이 개요에서는 다음 프로젝트에 영감을 줄 각 트렌드와 아름다운 사례를 살펴보겠습니다.
1. 특별한 레이아웃
그림 1
2. 단일 페이지 레이아웃
그림 2
3. 다중 열 레이아웃
그림 3
4. 거대한 일러스트레이션과 생생한 그래픽
그림 4
5. 이전보다 공백이 많아졌습니다.
그림 5
6. 소셜 디자인 요소
그림 6
7. 대화형 탐색
그림 7
8. 동적 탭
그림 8
9. 큰 검색 상자
그림 9
10. 분류에 시각 효과 추가
그림 10
11. 작성자의 아바타
그림 11
12. 아이콘 및 시각적 신호
그림 12
13. 태그 인덱스(태그 클라우드 대체)
그림 13
14. 블로그에 일러스트레이션 사용
그림 14
15. 수채화 그림
그림 15
16. 손글씨
그림 16
17. 레트로
그림 17
18. 유기재료, 벽돌, 사진을 배경으로 사용
그림 18
19. 마킹 씰
그림 19
20. 가격표
그림 20
21. 리본
그림 21
특별한 레이아웃
몇 달 전 40가지 혁신적인 디자인 레이아웃: 특별한 레이아웃에서 설명한 것처럼 우리는 보다 개인화되고 혁신적인 레이아웃을 향한 강력한 추세를 관찰하고 있습니다. 디자이너들은 전통적인 박스형 레이아웃을 사용하는 대신 정보를 구조화하고 표시하고 표현하는 새로운 방법을 실험하고 있습니다.
이러한 특별한 레이아웃 디자인에서는 특정 콘텐츠보다 전체적인 창의성이 더 중요하고 기억에 남는 경우가 많습니다. 그럼에도 불구하고 사용성, 타이포그래피, 시각적 디자인은 간과되는 경우가 거의 없으며 주의 깊게 실행됩니다. 혁신적인 레이아웃은 대규모 프로젝트, 웹사이트 디자인 에이전시, 홍보 웹사이트(대기업의 상업 활동 등)에서 특히 인기가 높지만 블로그에서도 인기가 높습니다.
그림 22
창의성에 관해서는 사용 가능한 디자인과 사용할 수 없는 디자인 사이의 경계가 매우 모호합니다. 따라서 새로운 아이디어가 웹 사이트의 기존 내용을 깨뜨릴 수 있기 때문에 사용성 테스트가 특히 중요합니다. 종종 창의적, 고전적, 전통적인 디자인의 균형을 유지하는 것이 좋은 생각입니다. 이는 "파괴할 수 없는"(또는 심지어 궁극적으로 지루한) 사용 가능한 디자인과 창의적이지만 사용할 수 없는 디자인 사이의 균형을 찾으려는 노력을 의미합니다. 아이디어가 성장하는 데는 시간이 걸린다는 점을 기억하세요. 다시 생각하고, 수정하고, 조정하고, 개선하고 궁극적으로 디자인에 통합하는 것입니다.
디자이너는 전통적인 박스 레이아웃의 관습에서 벗어나 새로운 접근 방식과 자신만의 대담하고 기발한 아이디어를 시도할 것을 강력히 권장합니다. 당신의 재능을 보여주세요!
그림 23
그림 24
그림 25
그림 26
그림 27
그림 28
단일 페이지 레이아웃
디자이너가 방문자에게 깊은 인상을 주기 위해 자주 사용하는 또 다른 방법은 소위 단일 페이지 레이아웃입니다. 이 레이아웃은 단일 페이지를 사용하여 웹 사이트의 콘텐츠를 표시합니다. 이는 이러한 디자인이 반드시 미니멀하다는 것을 의미하지는 않습니다("적을수록 좋다"는 원칙에 따름). 반대로 이러한 유형의 디자인은 매우 복잡하고, 풍부한 이미지와 생생한 애니메이션 효과를 포함하고 있어 로드하는 데 시간이 오래 걸리는 경우가 많습니다.
그림 32
사용자가 탐색 옵션을 클릭하면 페이지가 변경되고(일부 변경) 이전 콘텐츠가 표시된 영역에 http://www.knowsky.com의 새 콘텐츠가 나타납니다. 이 레이아웃의 탐색 슬라이딩 및 스크롤 효과는 공개 JavaScript 라이브러리에서 지원됩니다.
사용자의 주요 이점은 원하는 정보를 얻는 데 필요한 마우스 움직임과 클릭 횟수가 적다는 단순한 사실에서 비롯됩니다. 이 접근 방식은 매우 새롭기 때문에 비전통적인 탐색 방법을 사용하는 데 혼란을 겪을 수 있는 사용자에게는 좋은 기회입니다. "정적" 버전이 유용하거나 심지어 필요한 경우도 있습니다. 예를 들어 검색 엔진과 JavaScript를 비활성화한 사용자를 위해 다른 버전을 제공해야 합니다.
그림 33
그림 34
그림 35
다중 열 레이아웃
다중 열(3개 이상의 열)이 반드시 복잡한 디자인을 의미하는 것은 아닙니다. 반대로, 올바르게 디자인된 경우 여러 열은 시각적 탐색 옵션에 대한 더 나은 개요를 제공하고 사용자가 원하는 정보를 빠르게 찾을 수 있도록 하기 때문에 방문자에게 매우 도움이 될 수 있습니다.
지난 몇 년 동안 웹사이트 콘텐츠의 폭발적인 증가로 인해 사용자가 웹사이트에 투자하는 관심과 시간이 감소했습니다(자세한 내용은 ReadWriteWeb 참조). 따라서 디자이너들이 방문자가 웹 사이트에 최대한 오래 머무르고 콘텐츠를 더 쉽게 찾을 수 있도록 정보를 보다 간결하게 표시하는 방법을 찾으려고 노력하는 것은 당연합니다.
그림 36
이를 달성하는 한 가지 방법은 여러 개의 인접한 열이 있는 레이아웃을 사용하는 것입니다. 이 아이디어는 완벽하게 이해됩니다. 최근 몇 년 동안 화면 해상도가 향상되어(그러나 Asus Eee PC와 같은 넷북이 널리 보급되면 변경될 수 있음) 사용자에게 더 많은 수평 공간을 제공하고 디자이너에게 콘텐츠를 채울 수 있는 추가 공간을 제공합니다.
결과는 점점 더 많은 디자이너가 디자인에 점점 더 많은 기둥을 사용하고 있음을 보여줍니다. 우리 연구에서는 일반적으로 1000픽셀 화면에서 850픽셀의 고정 너비를 사용하는 소위 다중 열 레이아웃에 대한 강력한 추세를 발견했습니다. 잡지 레이아웃과 대규모 프로젝트에서는 여러 열이 자주 사용됩니다. 이러한 레이아웃에서는 구조적 균형, 계층 구조 및 순서를 보장하기 위해 그리드가 자주 사용됩니다.
다중 열 레이아웃을 사용할 때 활성 공백과 개별 열 사이의 중요성은 아무리 강조해도 지나치지 않습니다. (활성 공백은 페이지 구조를 더 잘 표현하고 콘텐츠의 다양한 영역을 강조하기 위해 의도적으로 비워 두었습니다.)
이를 위해 디자이너는 종종 "Shneiderman mantra"("큰 그림을 먼저 표시하고 세부 사항을 나중에 표시")를 활용합니다. , 먼저 사용자에게 기능 개요를 제공한 다음 요청에 따라 세부 정보를 제공합니다. 나중에 링크를 클릭할 때(Mozilla Labs가 대표적인 예입니다).
그림 37
그림 38
그림 39
그림 29
그림 30
그림 31