1. 모바일 위주의 디자인
풀 웹사이트를 만들고 주변기기를 위해 작게 만들어 나가는 것이 아닌 반대로 모바일 용 또는 반응형 디자인을 먼저 꾸린 후 풀 웹사이트까지 확장하는 형식
1-1. 반응형 레이아웃(responsive layouts) 및 다양한 장비(환경)의 고려
반응형 웹디자인(responsive web design)은 2012년의 트렌드에서도 맨 먼저 언급하였는데, 그동안 꾸준하게 발전하여 드디어 모든 디지털 기기를 고려한 레이아웃 디자인의 결정판이 되어가고 있다. 이는 데스크탑, 렙탑,스마트폰,태블렛 뿐만 아니라 앞으로 등장할 새로운 기기를 지원하는 것을 고려한다는 것을 말한다.
1-2. 큰 버튼 사용
마트폰의 보급으로 터치스크린이 대중화되었다. 스마트폰을 보급하고있는 Apple과 Microsoft, Nokia는 각각 UI혹은 UX가이드를 통해 손가락이 눌러질 수 있는 최소사이즈를 각각 44px, 34px, 26px로 정의했다. 그만큼 링크 혹은 버튼을 제작할때에 크기의 고려가 중요해졌다.
Windows8의 메트로 UI를 보셔도 터치스크린을 의식해 버튼을 크게 만든것을 알 수 있다. 이처럼 웹디자인 또한 마우스로만 동작하는것이 아니라, 터치스크린에서도 쉽게 이용가능하도록 하이퍼링크나 동작하는 버튼들이 모두 커질것으로 예상하고 있다.
2. 레티나 디스플레이 지원(retina support)
반응형웹과 더불어 레티나 디스플레이를 지원하는 것에 대한 요구가 늘고 있다. Apple의 iphone4를 시작으로 최근 ipad와 macbook은 레티나 디스플레이를 탑재하고 있다.
레티나 디스플레이는 일반 LCD에 비해 2배의 심도를 표현할 수 있다. 따라서 레티나를 지원하는 웹사이트의 디자이너는 기존보다 2배의 해상도 이미지를 저장하고, 다른 하나는 표준 해상도로 저장할 필요가 있다.
retina.js를 추천한다. 방문자가 레티나를 지원하는 기기의 브라우저로 접속한 경우 스크립트가 알아서 @2x의 이미지를 처리할 것이다.
3. 헤더바 고정(fixed header bars)
CSS의 position:fixed; 를 사용하면 상단바를 고정할 수 있다. 방문자가 웹페이지를 아래로 스크롤하여도 항상 상단의 메뉴바는 항상 고정되어 위치하기 때문에 편리한 네이게이션을 제공한다.
+) 대표적인 예시로는 facebook도 있다.
4. 큰 배경 이미지(large photo backgrounds)
웹사이트에 화면을 가득채운 배경 이미지를 사용하는 트랜드로, 방문자에게 강한 인상을 남길 수 있어서 포토그래퍼나 사진을 다루는 웹사이트에 인기있는 디자인이지만, 일반 회사의 웹사이트에도 잘만 사용하면 큰 효과를 볼 수 있다.
5. HTML5, CSS3, Javascript libery등의 각종 최신 기법 적용
이전에 이미지형식으로밖에 처리할 수 없었던 디자인요소들을 CSS3과 Javascript libery의 등장으로 대체되서 적용하는것이 2013년 트렌드라고 한다.
반투명 PNG를 CSS3에서 지원하는 요소로 CSS3으로 처리할 수 있게 되었고, 기존 사각형모양만 가능했던게 둥근모양으로 바꿀 수 있게 되었다.
또 기존에 Flash나 Javascript를 사용했어야 했던 애니메이션효과가 CSS3의 Animation 속성으로 브라우저 자체에서 표현이 가능해졌다.
다양한 효과들을 적용할 수 있는 Javascript libery들이 OpenSource로 제공되고 있으며, 이로인한 효과는 이미지 트래픽을 줄이고, Flash 사용을 줄이면서 사이트 이용자에게 쾌적환 환경을 제공할 수 있을거라 생각한다.
따라서,
1) CSS 투명효과
2) CSS 애니메이션
5-1. CSS 투명효과(css transparency)
포토샵을 사용하지 않고도 투명효과를 줄 수 있는 css3로 2013년에는 모든 브라우저에서 잘 표현될 것이다. discussed on Codrops의 포스트를 참고하자.
Squarespace Blog 는 background:transparent 로 구현된 좋은 사례이다. 다른 방법으로는 rgba(255,255,255,0.6) 와 같이 흰색의 60% 투명도를 구현할 수 있다
5-2. css3 애니메이션
스크립트가 아닌 css만으로 구현된 이미지 그림자 효과, 텍스트 그림자 효과, 애니메이션 효과등을 낼수 있다
6. Simplicity & Minimalism
웹 디자인은 일관적인 컬러 톤을 유지하거나 심플한 레이아웃을 적용한 대신에 중요 내용은 폰트를 큼직하게 하고 필요한 정보만 보이도록 디자인하는 것이 추세.모든 웹사이트에도 잘 어울리고 로딩 속도가 빠르고 접근성이 높다는 장점이 있다.
따라서,
1) 웹 페이지 단순화
2) 첫 페이지의 간소화가 대세
6-1. 웹 페이지 단순화
웹의 추세가 점점 단순화(필요한 정보만 간단하게 모아놓는 방식)되어감
6-2. 첫페이지의 간소화(minimalist landing pages)
핵심 상품이나 서비스에 집중하도록 첫페이지의 간소화.
7. 디지털 QR 코드(digital QR codes)
8. 소셜미디어 배지(social media badges)
페이스북, 트위터 와 같은 SNS로 컨텐츠를 쉽고 간단하게 공유하게 해주는 소셜공유버튼의 인기는 계속될 것이다.
9. 일러스트풍의 디자인(detailed illustrations)
차별화된 웹디자인으로 일러스트풍의 디자인은 좋은 선택이 될 것이다.
10. 동그라미 스타일 디자인(circular design elements)
동그라미 스타일의 디자인은 최근 들어서 자주 보이는데, 깔끔하고, 안정감있고, 어떤 레이아웃과도 잘 어울린다. 아바타, 공유버튼, 날짜 등 일관적인 디자인 요소를 배치함으로 통일감 있는 사이트를 만들기에도 좋다.
11. 화면 가득 타이포 그래피
화면가득히 빼곡하게 차 있는 타이포그래피. 대게 첫화면에 많이 적용된다.
조형적인 요소(크기, 형태, 기울기)+색상을 잘 이용해서 느낌있고 멋진 웹사이트 연출이 가능하다
12. 자동 스크롤(infinite scrolling)
마우스클릭 없이도 아래로 자동 스크롤되는 페이지는 2012년에 본격적으로 인기를 얻었고 2013년에도 그 인기는 계속 될 것이다.
(스크롤을 내리면 아래로 무한대로 자료들이 계속 보여짐. 자동목록확장/갱신)
대표적인 예시로 facebook의 timeline도 이 방식을 채용하고 있다.
13. 특징요약 미리보기(homepage feature tours)
sliding 이미지 또는 데모 비디오로 특정 서비스 또는 상품의 특징을 한 눈에 보여주는 방식의 첫페이지. 이미 워드프레스 테마를 많이 접해본 사람에겐 익숙한 방식이다. 기존에는 플래시(flash)가 인기 있었지만, 2012년에는 jquery 가 대세가 되었다.
14. 모바일 메뉴(mobile navigation toggle)
위에서도 비슷하게 언급했듯이 요즘은 PC가 아닌 테블릿이나 핸드폰등 휴대용 모니터로 웹사이트를 많이 이용한다. 따라서 모바일에서도 대세인 웹 디자인 트랜드가 있다.
반응형 웹사이트를 구현할때 까다로운 것 중의 하나는 일관된 고정메뉴이다.
이 형식은 'for IOS Facebook App' 에서 볼수 있다. 원글에서는 다양한 제스처(위에서 아래로 내리기, 아래에서 위로 올리기, 왼쪽에서 오른쪽으로 슬라이드하기 등)으로 다양한 사용자경험에 충족하면서 네비게이션을 제공할 수 있다고 한다.
참고사이트
http://eastsocial.co.kr/2013/01/1352
http://lab.guleum.me/60185506028
http://webdesignledger.com/tips/2013-color-trends-on-the-web
