어린이를위한 웹 사이트 디자인:트렌드 및 모범 사례-스매싱 매거진

12 최소 읽기
영감,쇼케이스,웹 디자인,아이
트위터에 공유하기,링크드 인

저자 소개

루이스는 캐나다 토론토에 본사를 둔 프런트 엔드 개발자,작가 및 저자입니다. 그는 뉴스 레터 웹 도구 주간 및 기술 생산성 및 블로그에 대해 큐 레이트…↬

이메일 뉴스 레터

프런트 엔드&에 주간 팁.
190.000 사람들이 신뢰합니다.

빠른 요약↬어떻게 당신이 좋아하는 디자인,아름다운 다채로운 자극,웹사이트는 매혹적인,기억에 남는,당신은 당신을 당신의 창조적인 주스의 흐름없이 너무 걱정할 필요가에 대한 사용성과 최고의 방법이 있나요? 오늘 웹 디자인 시장안에,그런 계획사업이—너가 아이들을 위해 웹사이트를 디자인하라고 요청하면 않는한 선물할텐데 고 희소하다.

어린이를 위해 디자인 된 웹 사이트는 웹 디자인 기사 및 검거에서 크게 간과되었지만 토론과 분석의 가치가있는 어린이 웹 사이트에는 아름답고 흥미로운 디자인 요소와 레이아웃이 많이 있습니다. 또한 어린이 사이트에 대 한 웹 디자인 전용 모범 사례—일반적으로 일반적인 웹사이트에 시도 하지 말아야 하는 사례의 수가 있습니다.

당신은 관련 기사를 살펴 할 수 있습니다:

아이 들을 위한 웹 디자인에 대 한 모범 사례
아이 들을 위한 웹 인터페이스 디자인
아이 들을 위한 아이 패드 애플 리 케이 션의 개발자에 게 아빠의 탄 원

이 문서에서는 어린이 관심과 자극을 유지 하는 데 사용 하는 동향,요소 및 기법의 분석과 아이 들을 대상으로 인기 있는 상업 웹사이트의 숫자를 선보일 예정 이다.

점프 후 더! 아래 계속 읽기

감각을 자극하는 디자인

인간은 여러 가지 요인에 의해 정신적으로 자극을받으며 특히 어린이들에게 그렇습니다. 성공적인 아이들의 웹사이트는 아이의 개성 및 관심사를 위해 적응된 환경을 창조하는 디자인 원리 및 다수 성분을 실행한다.

밝고 선명한 색상

밝은 색상은 쉽게 캡처하고 오랜 시간 동안 아이의 관심을 개최합니다. 색상 선택 웹사이트의 모든 유형을 설계 하는 기본 요소 이지만,이것은 특히 색상 어린이 젊은 마음에 큰 인상을 이후 아이 들을 위한 웹사이트를 디자인할 때 사실 이다. 색상 선택 및 조합 가능성이 거부 될 것 이라고 또는 일반적인 웹사이트를 디자인할 때 웃었다 어린이 위한 웹사이트에 환영 수 있습니다.

아래 스크린샷에 사용된 색상 조합 중 성인 사용자를 대상으로 한 웹사이트에서 성공할 수 있는 색상은 몇 개입니까? 아니 많은. 그래서 아이들을 겨냥한 사이트를 디자인 할 때 잊을 수없는 방식으로 시각적으로 자극 할 밝고 생생한 색상을 사용하십시오.

허먼의 홈페이지

펀브레인 놀이터

2958></figure><h3>행복한 기분</h3><p>아이들은 자신의 경험이 행복한 경우 웹 사이트를 기억하고 돌아갑니다. 요소는 명랑,긍정적 인 분위기가 제시되는 것을 보장하기 위해 디자인에 통합 할 수 있습니다.</p><p>미키 마우스 클럽하우스는 미키 자신을 페이지의 시각적 초점으로 삼아 행복한 분위기를 조성한다. 그의 행복한 얼굴과 신체 언어는 환영 분위기를 만들어이 행복한 느낌을 향상시키는 데 도움이됩니다.</p><figure><img src=

놀이도 웹사이트는 빛나는 아이를 중심으로 행복한 분위기를 조성한다.

복실이와 화단 웹 사이트는 시각적 초점이 큰 웃는 화단 문자를 가지고있어 행복한 분위기를 연출합니다.

자연의 요소

아이들은 관련 될 수있는 인식 가능한 요소에 의해 자극을받습니다. 인생에서 아이들의 경험은 제한되어 있기 때문에,그들이 가장 잘 알고있는 것들 중 일부는 자연에서 발견된다. 나무,물,눈 및 동물과 같은 자연 요소는 아래 표시된 웹 사이트에서 사용됩니다. 많은 경우 이러한 요소는 디자인의 크기 또는 단순성을 통해 지나치게 강조됩니다.

디즈니 웹 사이트는 어떤 제품이 홍보되는지에 따라 테마를 변경합니다. 이 스크린 샷에서,그들은 기억에 남는 시각적 경험을 만들기 위해 그랜드 캐년 같은 풍경을 사용합니다.

디스커버리 키즈는 수중 테마를 사용합니다.

클럽 펭귄은 북극 테마를 제공합니다.

CBC 아이들이 사용하는 계절에 따라 테마,단순한 눈길을 끄는 그래픽입니다.팝캡 게임은 태양의 큰 광선 앞에 잔디 풍경을 사용합니다.

실물보다 큰 디자인

대형 디자인 요소는 모든 유형의 웹 디자인에 효과적임이 입증되었으며,큰 타이포그래피,큰 버튼 및 큰 클릭 유도 문안 영역이 현대적인 디자인에서 보편화되었다는 사실로 입증되었습니다. 어린이 자연스럽 게 간단 하 고,분명 하 고,인식할 수 있는 개체에 그려지기 때문에,어린이 위한 웹사이트 큰 디자인 요소를 사용 하 여 그들의 효과 증가할 것 이다.

애니메이션 캐릭터

대형,애니메이션,말하기 문자는 잡아 아이의 관심을 보유 할 수있는 매력적이고 매혹적인 방법입니다. 어린이를 위해 설계된 많은 사이트에서이 요소를 효과적으로 사용합니다.

바비

미스터 로저스의 이웃

디즈니 프린세스

토마스 탱크 엔진

바니&친구

디자인의 깊이

아이들은 자신의 상상력이 실제처럼 보이고 느껴지는 세상에서 펼쳐지기를 좋아한다. 이런 종류의 분위기는 디자인 요소의 깊이를 통해 만들어 질 수 있습니다. 여기에는 돌출된 모양,그림자,풍경,경 사진 효과,반짝이는 그라디언트 또는 부동 개체가 포함될 수 있습니다. 종종 이러한 요소 중 많은 부분이 아래 그림과 같이 만화와 같은 디스플레이에 존재합니다.

웹킨즈”채택 센터”는 그림자,실제와 같은 캐릭터 및 기타 3 차원 요소를 사용하여 깊이있는 디자인을 만듭니다.

푸아송 루즈는 다른 많은 3 차원 요소와 함께 태양을 바라 보는 창을 사용하여 깊고 사실적인 분위기를 만듭니다.

레인보우 매직은 사용자가 다른 요소를 가리킬 때 움직이는 플래시 애니메이션 풍경 장면을 통해 디자인에 깊이를 만듭니다.

눈에 띄는 탐색 및 클릭 유도문안 영역

모든 웹 사이트 디자인에서 탐색 및 클릭 유도문안 영역은 초점이 되어야 합니다. 어린이 웹 사이트 디자이너는 이러한 영역을 지나치게 단순화하여 어린이가 쉽게 탐색 할 수 있습니다. 어린이 웹 사이트의 텍스트 기반 탐색은 페이지에 시각적 초점이 없기 때문에 큰 버튼과 그래픽만큼 효과적이지 않습니다.

페파 피그는 큰 아이콘과 각 항목에 대한 읽기 쉬운 설명을 포함하는 수평 탐색 모음이 있습니다.

위니 더 푸 웹 사이트는 사용자가 간과하지 않을 큰 나무 그래픽 요소를 사용하여 탐색 모음을”숲”테마에 통합합니다.

세서미 스트리트는 큰 클릭 유도 문안 영역과 함께 찾기 쉬운 수평 탐색 모음을 가지고 있습니다.

마이 리틀 포니는 텍스트 기반 탐색을 사용하여 그래픽이 적은 경험을 만들어 콘텐츠 요소에 집중할 수 있습니다. 이것은 어떤 상황에서는 이상적 일 수 있지만 어린이 웹 사이트에서는 그래픽 기반 탐색 모음이 효과적 일 가능성이 더 큽니다.

사용자 상호 작용

아마도 어린이 웹 사이트가 성공할 수있는 가장 중요한 방법 중 하나는 어린이가 어떤 방식으로 사이트와 상호 작용할 수있는 요소를 포함하는 것입니다. 아이들은 강렬한 독서 또는 연구를 하고 싶지 않는다;그들은 놀고 대접되고 싶다.

일반적인 웹 사이트에서 특정 디자인 요소는 산만하고 사용할 수 없으며 번거로운 것으로 간주됩니다. 아이 웹사이트에,그 동일한 성분은 사용자를 끌기의 효과적인 수단으로 전망된다.

애니메이션과 사운드를 통한 상호 작용

어도비 플래시로 만든 효과와 경험은 전형적인 현대 웹 디자인에서는 권장되지 않지만 어린이 사이트에서는 다른 옵션이 거의 없습니다. 그것은 자바 스크립트 애니메이션과 효과 때문에 사용할 수있는 많은 자바 스크립트 라이브러리의 먼 길을왔다 사실,하지만 복잡한 애니메이션이 플래시로 만들 수있는 용이성이 방법 아이를 위해 설계된 많은 상용 웹 사이트에 대한 첫 번째 선택합니다.

폴리의 플레이 하우스 사이트,이 문서에 등장하는 웹 사이트의 대부분처럼,플래시에 완전히 내장되어 있습니다.

핫 휠 웹 사이트에는 페이지가 로드될 때 화면으로 확대되는 애니메이션”오늘의 자동차”가 포함되어 시각적 상호 작용을 만듭니다.

포효 경주 용 자동차에는”건너 뛰기”버튼이있는 간단한”플래시 소개”가 있습니다. 이것은 전형적인 웹 디자인안에 구식 동향 이고,그러나 아이 기초를 둔 경청자에게 음식을 장만하기의 효과적인 평균 이다. 인트로는 문자가 수평선에 나타날 때까지 도로를 통해 애니메이션. 이것은 그들이 개인적으로 로리의 애니메이션 세계를 입력하는 것처럼 사용자가 느낄 수 있습니다.

야후! 어린이 탐색 모음은 플래시로 생성 및 음향 효과를 만들고 해당 항목을 공중 선회 할 때 애니메이션됩니다. 이 추세는이 기사에 소개 된 많은 사이트에서 매우 일반적입니다.

비디오를 통한 상호 작용

텔레비전은 몇 시간 동안 어린이 관객을 사로 잡는 것으로 알려져 있으며,이것이”토요일 아침 만화”가 수십 년 동안 많은 텔레비전 네트워크의 방송 일정에서 유리한 부분이었던 이유입니다. 마찬가지로 어린이 웹 사이트의 비디오는 사이트의 콘텐츠에 재미 있고 대화 형이며 교육적인 측면을 추가합니다.2018 년 11 월 1 일,2018 년 12 월 1 일,2018 년 12 월 1 일,2018 년 12 월 1 일,2018 년 12 월 1 일,2018 년 12 월 1 일,2018 년 12 월 1 일,2018 년 12 월 1 일,2018 년 12 월 1 일,2018 년 12 월 1 일,2018 년 12 월 1 일 어린이 영화 가이드

내셔널 지오그래픽 어린이-동영상

게임을 통한 상호 작용

어떤 어린이가 게임을 즐기지 않습니까? 즐겁게,교육 또는 다른 웹사이트에 아이 차지 하는 가장 효과적인 방법 중 하나는”게임”섹션을 포함 하는 것입니다. 이 기사를 위해 연구 된 거의 모든 웹 사이트에는 교육,자극 및 직접적인 상호 작용을 허용하는 게임이 포함되며 이미 논의 된 많은 디자인 요소를 통합합니다. 아래는 몇 가지 예입니다.

씨 비비-고든 정원 그놈

토이 스토리-우디의 큰 탈출

디즈니 픽사의 자동차 세계는 사용자가 생성,공유,자신의 사용자 정의 자동차 경주.

인쇄 가능한 요소

아이들은 자신의 경험을 기억할 수 있도록 실질적인 것을 가지고 싶어합니다. 웹 사이트 소유자에게 강화하고 컴퓨터 화면의 외부 자신의 브랜드를 홍보 할 수있는 기회를 제공하면서 인쇄 가능한 사진과 색칠 페이지는 아이들이 자신의 경험의 유품을 할 수 있습니다. 아래는 아이들의 웹 사이트에 인쇄 가능한 색칠 페이지의 몇 가지 예입니다.

핑구 색칠 페이지

크레욜라 디지컬러

페파피그 색칠 페이지

토마스와 친구들 온라인 색칠

텔레 토비-컬러로 인쇄

틀에 얽매이지 않는 방법

우리는 이미 현대의 전형적인 웹 디자인에서 이제는 틀에 얽매이지 않는 것으로 간주되는 여러 요소에 대해 논의했습니다. 사운드,애니메이션 및 대형 돌출 그래픽은 일반적인 웹 디자인에서 종종 눈살을 찌푸립니다. 어린이 웹 사이트에서 이러한 요소는 사용자 경험에 도움이됩니다. 다른 틀에 얽매이지 않는 요소와 디자인 선택은 아래에 설명되어 있습니다.

커서 변경

이것은 표준 웹 디자인에서 절대적으로 나쁜 관행으로 간주되지만 어린이 웹 사이트 테마에 재미있는 요소를 추가하는 재미 있고 효과적인 방법이 될 수 있습니다. 이것은 동적 텍스트를 사용하여 수행 할 수 있지만 플래시를 통해 더 자주 수행됩니다.

디스커버리 키즈 웹 사이트의 커서가 스냅 베어 트랩 그래픽으로 바뀝니다.

세서미 스트리트 웹 사이트의 커서에는 노란색 별이 표시되고 클릭 가능한 플래시 요소 위로 커서를 이동하면 작은 애니메이션 별에 둘러싸인 노란색 별이 표시됩니다.

말하기 탐색

때로는 탐색 모음이 음향 효과를 생성하지만 다른 경우에는 탐색 링크가 명랑한 목소리로 표현하는 것을 소리냅니다.

어린이 탐색 모음은 사용자가 그 위에 놓으면 어린이의 음성을 사용하여 말합니다.

비비 탐색 모음은 음성을 사용하여 각 탐색 항목의 대상을 소리냅니다.마우스 오버 시 빌더 탐색 모음이 사용자에게 말합니다.

복실과 화단은 말하기 탐색 모음을 제공합니다.

격자를 깨는

전통적인 현대 웹 디자인 기술은 그리드 기반 디자인의 장점과 미학을 받아 들였지만,아이들의 웹 사이트는 지나치게 구조화 된 레이아웃에서 벗어나 어린이가 경험할 수있는 독특한 세계를 만들 수 있습니다.

이것은 그리드를 디자인의 기초로 사용하는 것이 잘못되었음을 암시하는 것이 아닙니다. 그리드로 시작한 다음 제어 된 방식으로 그리드 외부의 요소를 디자인하는 것이 유용 할 수 있습니다. 이러한 디자인과 레이아웃의 유연성은 이미 논의된 여러 사이트에서 보여지지만 아래 예제의 탐색 막대에서도 분명합니다.

보글 보글 스폰지 밥 웹 사이트의 탐색 모음이 기울어 져 있으며 일반적인 그리드 기반 웹 디자인의 규칙에 위배됩니다.

한나 몬타나 웹 사이트는 그리드를 깰 탐색 모음 그래픽을 제공합니다.

인 나이트 가든 웹 사이트는 통상적으로 구조화 된 디자인에서 발견 된 것과 거의 유사하지 않은 매우 특이한 탐색 모음 디자인을 특징으로합니다.

아래는 더 엄격한 그리드 기반 형식을 사용하는 웹 사이트의 몇 가지 예이며 그 결과이 기사에서 이미 고려 된 웹 사이트 중 일부만큼 독특하고 기억에 남거나 매혹적이지 않습니다.

아이들은 딱딱하고 기억에 남지 않습니다.

크레욜라 웹 사이트는 그리드 형식과 수직 탐색 기능이있는 다소 오래된 학교입니다.

네오 펫은 또한보다 구조화 된 그리드에 설계되었습니다.

부여,어떤 경우에는 더 강한 그리드 기반 디자인은 관객이 청소년 관객 인 경우 필요한 것,시 아이의 경우와 같이,아래 그림.

책임감

온라인 경험을 통해 젊고 감수성이 강한 사람들의 마음과 마음에 도달하려는 경우,당신은 무거운 책임을 위임받습니다. 아이들은 정신적으로 연약하고,보고,듣고,만지는 것에 쉽게 영향을받습니다. 모든 어린이 웹사이트에 해결 될 필요가 있는 특정 요인이 있다,아무 해를 보장 하기 위해 아이 들에 게 주어지고 있다.

교육 홍보

게임 및 기타 상호 작용 요소는 회사의 브랜드와 정체성을 홍보 할뿐만 아니라 유익하고 긍정적 인 방식으로 젊은 마음을 교육하고 훈련시키는 데 도움이되어야합니다. 게임과 활동을 통해 교육을 홍보하는 것은 당신의 회사가 사용자에 대한 관심과 자신의 온라인 경험이 미래에 그들에게 영향을 미칠 수있는 방법을 보여줍니다.

피셔 프라이스의 온라인 학습 게임에는 연령 그룹에 따라 달라지는 게임이 포함됩니다.

펀브레인은”어린이 및 교사를 위한 인터넷 1 위 교육 사이트”로 자리매김했다.”

My Race

어린이를위한 웹 사이트 디자인:트렌드 및 모범 사례