번역본 출처 : http://cafe.naver.com/uistudy/2852
안녕하세요. 요즘 여기저기에서 2011 디자인 트렌드에 관한 기사들이 많이 나오고 있는데,
개중에 괜찮은 기사를 발견하여 공부하는 겸 번역 해봤습니다. (힘들었음 --;)
디자인 일반이 아닌 ‘웹’ 디자인에 대한 내용이라 웹계에서 일하시는 디자이너분들께 유익할 듯 합니다.
큰 흐름은 시대가 시대이니만큼 아름다움보다는 기능 중시 디자인인 모양입니다.
원문을 바탕으로 곳곳에 사견도 배치되어 있으니 감안하셔서 읽어주시면 될 것 같아요.
원문 : http://webdesignledger.com/tips/web-design-trends-in-2011
Web Design Trends in 2011
by Jacqueline Thomas
1. More CSS3 + HTML5 <more CSS3 + HTML5>
HTML5와 Flash Action Script로 구현한 이미지입니다.
당연히 아래 것이 간지나 보입니다만, 특정 상황에서 플래시가 제대로 보이지 않고,
앞으로 생겨날 새로운 접근방식으로 인해 플래시 사용의 부담이 커진다는 점을 감안한다면,
표현적인 측면에서 HTML5가 FLASH 대용으로 사용될만한 가치가 있다고 볼 수 있습니다.
물론 완벽한 대체물은 될 수 없겠지만 HTML5와 CSS3로 가능한 시각적 효과들에 대해
이제는 디자이너들도 적극적으로 관심과 이해를 가져야 할 시점인 것 같습니다.
2. Simple Color Schemes <심플한 컬러 전략>
블랙 & 화이트 & 그레이의 조합은 잊어버리고, 녹색, 노랑, 빨강 등과 같은 강렬하고 심플한 컬러들을 주색으로 쓰되
그 조합은 2-3가지로 제한하라고 합니다.
다양한 컬러보다는 임팩트 있는 몇개의 컬러만으로 메시지를 전달하는 것에 더 주력하라네요.
http://toriseye.quodis.com/
3. Mobile Ready <모바일 버전 구축>
스마트폰, 아이패드, 넷북 등 다양한 매개체를 고려한 웹 디자인이 필요한데
이런 디자인은 단지 시각 요소를 줄여 사이트를 슬쩍 빈약하게 만든다고 되는 것이 아니라,
충분히 잘 디자인 한 후, 코딩을 다양한 매체에 맞도록 하는 것이 중요합니다. (코딩의 중요성!!)
더 많은 디바이스가 나올수록 일일이 그에 맞는 사이트 작업을 할 수는 없으니
반드시 원래 사이트(PC버전)으로 갈수 있는 옵션을 포함시키는 것이 좋습니다.
4. Parallax Scrolling <시차 스크롤링>
이 용어는 저도 생소했는데, 번역하면 '시차 스크롤링'입니다.
아래의 사이트에서 스크롤링을 해보면 배경의 구름과 흰 돌덩이(?)들이 서로 다른 시차로 스크롤링 되는 걸 볼 수 있습니다.
2011년의 웹디자인 핫 트렌드 중에 하나가 '깊이감'을 도출해내는 것이라고 하는데요.
시차 스크롤링은 레이어를 사용한 간단한 CSS 트릭이나 J쿼리 플러그인으로 3차원 공간인 듯한 효과를 줄 수 있기 때문에
효과적인 방법이기도 합니다. 시도해보아요!
5. Designing for Touch Screens, Not Mice <마우스가 아닌 터치스크린을 위한 디자인>
마우스로 네비게이션 하던 시대는 갔고, 원하는 곳으로 손끝만 가져가면 되는 시대가 왔으니
우리도 손끝 네비게이셔닝에 적합하도록 디자인해야한다는 내용입니다.
롤오버, 툴팁, 드롭다운 메뉴 등 터치UI에는 존재하지 않는 것들에 대해 고민해야 하고(이 내용들은 어느정도 익숙한듯),
또한 생각해봐야할 문제는 터치스크린에서는 세로보다 가로 스크롤링 방식이 더욱 적합할 수 있다는 점입니다.
그런 점에서 마치 잡지책을 펴놓은 듯한 레이아웃을 이용해 가로 스크롤링으로 내용을 전개하는 디자인도 트렌드가 될수 있을 듯 해요.
화면의 방향과 해상도에 영향을 받지 않는 유동적 레이아웃을 사용하는 것도 유저액션에 반응하는 디자인이 될 수 있겠습니다!
6. Depth Perception in Web Design <입체감 있는 웹디자인>
'깊이감'보다는 '입체감'이란 표현이 더욱 상통할 것 같네요.
2-3년 전에 유행했던 디자인이 – 책상 위에 놓여있는 키보드, 커피잔, 노트, 연필 등을 묘사하는 따위의 - 구체적인 오브젝트로
공간 자체를 표현했던 디자인이었다면, 올해의 유행은 사이트 자체에서 입체감이 느껴지도록 공간을 창출해내는 디자인이랍니다.
3D 툴을 사용하지 않더라도 그런 식의 표현을 연출함으로써 가능할 것 같아요.
사람에게는 가상의 공간에서 더욱더 실제처럼 느끼고자 하는 욕구가 있다고 하는데,
이런 표현 방식의 진화도 그런 욕구가 반영된 결과들이 아닌가 하는 생각을 해보네요.
http://www.plantate.net/
http://www.nike.com/jumpman23/historyofflight/
7. Large Photographic Backgrounds <큰 사진 배경>
화면 전체 BG로 큰 사진 이미지를 사용하는 것이 트렌드입니다.
큰 사진이미지는 그만큼 강렬하여 방문자의 주의를 사로잡을 수 있기 때문에 사진은 반드시 컨텐츠에 적합하여야만 합니다.
그리고 큰 사진배경을 사용하여 디자인 할 때는 사진이 컨텐츠를 방해하지 않고 컨텐츠와 잘 조화를 이룰 수 있도록 하는 것이
중요하겠습니다.
http://www.somewhere-lefilm.com/
http://www.iflymagazine.com/?locale=nl_en
8. Adventurous Domain Names & Integration <모험적인 도메인네임>
디자인 이슈에만 국한될 것이 아니라 크리에이티브한 도메인 네임을 사용하는 것도 생각해볼만 합니다.
.com 으로 끝나는 평범한 도메인 말고 다른 도메인들도 잘 생각해보고 남이 쓰기 전에 빨리 확보하랍니다.
예시로 나온 것처럼 '.me' 도메인은 개인 포트폴리오나 블로그처럼 자기만의 아이덴티티를 빠방하게 주입시키고 싶은
사이트의 도메인으로 아주 괜찮다고 할 수 있겠지요.
9. QR: Quick Response <QR>
이미 너무 많은 곳에서 발견할 수 있는 QR코드 역시, 올해의 디자인 트렌드로 꼽을 수 있겠습니다.
QR코드를 웹디자인에서 활용할 수 있는 방법도 많습니다. 가령, 개인사이트에 QR코드를 노출시켜 방문자로 하여금
나의 모바일 버전 사이트로 이동시켜준다거나,참조코드를 URL에 삽입시켜 QR코드로 내 사이트 방문자들의 추후 경로를
추적할 수도 있습니다. (ㄷㄷㄷ)
QR코드를 당신의 아바타처럼 써보세요! (오글;)
10. Thumbnail Design <썸네일 디자인>
사람들은 더이상 컨텐츠를 읽어가며 클릭하지 않고, 그중 돋보이는 이미지들만을 클릭해서 들여다봅니다.
인터넷 유저들의 웹서핑 능력이 점점 더 향상될 것이기 때문에 이런 방식으로 네비게이셔닝 하는 유저들을 타겟으로 삼아
섬네일 디자인에 더욱 신경을 써야 합니다.
11. Constant Connection/ Life Stream <지속적인 접속, 라이프스트림>
인터넷 환경 자체는 무생물(!)이지만 우리는 인터넷을 통해 타인들과 관계를 형성하고 의견을 나누면서,
생명을 가진 어떤 것으로 생각하고 있습니다.
그런 추세로, 2011년에는 개인 블로그와 사이트들이 주인장의 실시간 트위터 피드백 상황을 알려주는 기능들을
포함하고 있을 것이라는 게 마지막 내용입니다. 실제 요즘도 꽤 많은 블로거들이 자신의 트위터 상황을 알려주는 위젯을
장착하고 있더라구요.
반드시 트위터일 필요는 없지만, 그만큼 사람들이 자신의 일상을 나누는 서비스에 집중하고 있다는 것인데요.
결국은 '소셜네트워크서비스 디자인'이 트렌드인 것 같습니다.
http://www.mickmel.com/blog/lifestream/
이상입니다~~
'web standard > html5' 카테고리의 다른 글
| HTML5에 추가된 새로운요소들 (0) | 2010.07.05 |
|---|---|
| HTML5와 HTML4의 차이점 (0) | 2010.04.26 |
| HTML5의 모든것 (0) | 2010.04.26 |
