블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 달린 댓글

'2010년 웹디자인 트렌드'에 해당되는 글 2건

  1. 2009.11.11 2010년 유행할 웹디자인 트렌드 (1)
  2. 2009.01.19 2009년 유행할 웹디자인 트렌드 (13)




미래를 예측한다는 것은 상당히 힘든일이다.
이 분야 일을 시작한지 어언 십수년이 지나가지만 자신만의 스타일을 고수하기 보다는 매년 트렌드를 따라 작업하다 보니 이런 것을 챙기지 않으면 트렌드를 따라가지 못한다는 강박관념(?)이 생겨버렸다.  트렌드를 쫓다보면 트렌드를 따라가지 못한다는 느낌이 많이 든다. 
각설하고.... 일년전 이맘때 2009년 유행할 웹디자인 트렌드를 포스팅한 적이 있었다. 물론 웹디자인 카테고리에서 가장 많은 트래픽을 가져온 포스팅이기도 했다.
이미 2010년 웹디자인 트렌드에 대해   카페글에 포스팅되어 있는 내용들을 사부작 꼬불쳐 본다.

아래 내용은 2010년 웹디자인 트렌드라는 제목으로 14가지 항목으로 정리되어 있다.

번역본에 데꾸벅만의 생각들을 살포시 얹어보았다 


대부분 2009년 웹디자인 트렌드에서 이미 언급되었거나 국내 환경에서는 유행이 지난 내용들이 많으며 오히려 2008년 트렌드와도 흡사하다. 이제는 해외 사이트트렌드와 국내웹사이트들의 트렌드가 이제는 조금씩 바라보는 뷰가 틀려지기 시작하는 듯 싶다. 

2009년의 트렌드와 비교하자면 조금 객관적이지 못해 작성자만의 지극히 주관적인 생각이며 잘못 설정된 표본집단 조사, 즉 넓은 시각이 아닌 좁은 시각에서 웹디자인 트렌드를 바라본 것 같다. 




데꾸벅이 가장 좋아하는 스티브잡스형님이 이런 얘길 한적이 있다. 


"Design is not just what it looks like and feels like.  

  Design is how it works"


단지 데꾸벅's 생각일뿐~ 오해하지 말자







오래되고 닳은 웹 디자인은 정리를 할 시간이고, 내일을 위한 과감하고 새로운 얼굴들을 맞이할 시간이다.  물론 트렌드라는 것이 1월 1일에 시작이 되고 끝나는것은 아니지만, 새해에는 새로운것을 갈망을 하고, 연말에는 지난간 한해에 교본(tutorial)을 찾게되는 욕구에는 분명 뚜려한 움직임이 있다.  대부분의 경우, 이러한 변화는 미묘하다.  이러한 변화는 현재 트렌드를 완벽하게 만들거나 새롭게 해석을 하는 것이다.  트랜드들은 우리가 디자이너로서 진화를 하는데 도움을 준다.  미적 디자인 스킬을 습득하게 됨에 따라, 우리는 다음에 무엇이 있는지, 우리가 원하는 것이 무엇인지를 추구하게 된다.

 

이러한 트랜드 뒤에 있는 아이디어들은 당신이 이미 알고 있는 것들도 있음에 오해를 하지 말기바란다.  아래의 트렌드들이 2009년에 인기가 있었던 것들로부터 굉장한 차이가 있는 것은 아니지만, 앞으로 펼쳐지는 트렌드들이 전개가 되고 또한 좋은 결과들로 남게 될 것이다.  당신들이 이러한 트렌드들을 당신의 디자인에 어떻게 이용을 할 것인가를 고민을 할때, 각 트렌드의 주요 아이디어가 무엇인가에 초점을 맞추기를 바란다.




 

1. 대형로고와 헤더

데꾸벅 : 최근 3년동안의 트렌드와 같은 내용이다.  대형 타이포를 이용하여 사용자시선을 유도한다. 다만 디자인적인 면이 다분이 많으며 사용성에는 그다지 중점을 두지 않은 듯 보인다.

사이트의 스플래쉬 페이지는 너무도 낡은 기법이다.  방문자들에게 잊혀지지 않는 느낌을 주기 위한 2010년의 트랜드는 특대형의 로고와 그와 걸맞는 특대형의 헤더이다.  이러한 류의 헤더는 전체 스크린을 차지하되, 하나의 중용한 메세지를 가지고 있다.  방문자는 아무것도 클릭을 할 필요가 없고, 그냥 스크롤 다운을 하면 된다.  방문자들은 (과거의 나쁜 네비게이션 경험으로 생긴) 종종 마우스클릭에 대한 공포를 가지고 있다. 그래서, 대형 헤더는 당신 사이트의 방문자들 이 무엇인가를 클릭하도록 강요하지 않으면서, 스플래쉬 페이지의 역할을 수행한다.

 

주요 아이디어: 커다란 헤더는 방문자들이 당신을 기억하게 만든다. 

http://ma.tt/

 

 


2. 스케치/손그림

데꾸벅 : 이미 국내에서는 몇년전 부터 웹디자인 템플릿 사이트에 유행이 지난 것으로 주요 프로모션 성격의 사이트에서 많이 사용되고 있다. 

손으로 그린 디자인은 새로운 것은 아니다. 하지만, 웹 디자인에서는 아직은 가장자리를 차지하고 있음을 알고 있다.  많은 디자이너들이 이러한 스타일에 감탄을 하면서도, "나는 잘 그리지 못해"라는 투의 태도때문에 이 스타일을 사용하기를 두려워하고 있다.  이러한 스타일의 디자인들은 미술박물관에 걸만한것은 아니라고 해도, 일탈의 감성적인 면을 전달을 할 수 있고, 차거운 웹 사이트와 친근한 인터랙션의 경계를 흐리게 할 수 있다 - 그게 인터넷의 궁극적 목적이 아니겠는가?  만약 그림을 끄적거릴 수 있다면, 당신은 이미 웹 디자인을 스케치 할 수 있다.

 

2010년에는 스케치는 웹 디자인상의 요소로 자리를 할 것이고, 웹 디자인의 주 초점이 되지는 않을 것이다.  또한 스케치는 표준적인 웹을 새롭고 흥미있는 것으로 개인화 시키는 데 사용이 될 것이다.

 

주요 아이디어: 스케치는 기업 웹 사이트 디자인의 "요소"가 될 것이다.

 
http://www.biola.edu/undergrad/

 

 


 


3. 굵고 두꺼운(Slab) 글꼴


데꾸벅 : 최근3년 트렌드에서도 언급되었던 내용이다.  전통적인 인쇄매체에서 많이 사용되던 Press Letter형태를 웹형태로 옮겨온 것으로 영문폰트를 이용하여  적용한 예가 많다. 한글폰트에서도 두꺼운 글꼴은 글쎄다~. 

 폭이 넓은 글자체는 지난 200년 동안 전통적인 미디어에서는 사용이 되어왔지만, 웹 디자인에서는 비교적 새로운 것이다.  폭넓은 글자체의 좋은 "감"을 얻으려면, 옛날 옛날 서부 개척시대의 "현상금" 포스터를 생각을 하면 될 것이다.  이때 사용이 된 굵은 글자체들이 "Slab" 타이프이다.  폭이 넓은 글자체들은 보통 모두 대문자에, 볼드로 처리가 되어있고, 그리고 눈을 끌어당기는 당당하게 보인다.  많은 디자이너들이 과거에는 슬랩 타이프를 멀리 해왔는데, 슬랩 타이프가 사용이 되면 로고나 헤더들이 저평가 되게 보일 수 있기 때문이다.  하지만, 대형 헤더라는 트렌드와 같이 사용이 되면, 슬랩 타이프를 사용할 때 독자들의 시선을 끌수가 있다.

 

주요 아이디어: 슬랩 타이프는 당신 누구인지 과감하게 표현하기 위해 사용이 된다.

 


http://www.edgepointchurch.com/

 

 


4. 타이포

데꾸벅 : 타이포그라피와 관련된 내용은 당근 이전부터 쭈욱~ 언급되었던 내용이다. 굳이 무엇을 더 언급할것인가 

타이포그라피는 적용하기에 가장 어려운 트렌드 중에 하나이기때문에, 2010년에도 싱싱하게 존재를 할 것이다.  사용성관련된 모든 걱정들 때문에, 웹 디자이너들은 새롭고 색다른 폰트를 사용하기를 꺼려한다.  다른 폰트사이즈들을 섞는 다는 생각은 절대로 할 수도 없는 것이 였다. 하지만, 폰트들은 탐구의 대상이고, 비틀고, 우리의 목적에 적합하도록 사용이 되어야 한다.  정확한 위치선정을 한다면, 타이포그라피를 주요 디자인 요로 사용을 하는 웹 사이트들은 수많은 사진들로 부담이 되는 사이트들 보다는 독자들에게 더 흥미로와 보일 것이다.

 

주요 아이디어: 타이포그라피의 사용은 아직 충분한 성장을 하지 못했지만, 웹 디자인의 한 부분으로 남아있을 것이다.

 

 

 

 

 


5. 한 페이지 레이아웃

데꾸벅 : 이미 Interaction한 Rich UI Layout ( Web Application 혹은 Ajax Application) 이 자리잡은 요즘에 비하면 2010년 트렌드라 말하기에는 조금 오래된 내용이다. 

한 페이지 레이아웃은 필요하지 않는 부분을 제거를 하게끔 하는 과제를 준다.  2010년에는 이 스타일이 특이한 네비게이션을 버리고 미니멀리즘 접근방식을 택할 것이다.  이러한 웹 사이트들을 비즈니스 카드라고 생각을 하라.  이러한 웹 사이트들은 당신과 다양한 사이트들에 퍼져있는 당신의 작업물들을 어떻게 찾을까를 알려주는 one-stop-shop이 될 것이다.

 

주요 아이디어: 한 페이지 레이아웃은 기업 사이트가 보다는 개인 프로파일에 더 적합하다.


 http://www.zachklein.com/

 

 


6. 큰이미지

데꾸벅 : 큰 이미지뿐만 아니라 이제는 화면전체를 이미지로 깔고 덮고 플래쉬로 도배를 하기도 한다. 

대형 로고/헤더와 가까운 친척인 대형 이미지는 거의 같은 기능을 제공한다.  대형 이미지들은 방문자들이 쉽게 잊지 못할 효과를 준다.  위에서 이야기를 한 대형 헤더와는 달리, 대형 이미지는 사이트의 브랜딩과 관련이 있는 것은 아니다.  대신에, 이러한 이미지들은 방문자들을 사이트의 컨텐츠가 아니라면 이미지를 이용해서라도 방문자들을 사이트로 끌어들인다. 2010년에는, 웹 디자이너들은 사이트의 느낌을 전달하기 위해서, 대형 이미지를 사용하는 것을 더욱 편안하게 느낄것이다. 

 

주요 아이디어: 대형 이미지들은 방문자들을 초대하기 위해서 사용이 된다.

 

http://digitalmash.com/ 

 





7. 시각의 변화

데꾸벅: 좀 더 비주얼한 면을 강조하기 위해 2D에서 3D형태 뷰포인트의 전환등 이러한 시도는 항상 있어왔다. Flex/Flash, 혹은 Silverlight,  SVG, VML 등 이미 수없이 많은 디자인 사이트에서 봐왔던 내용이다. 

이미 위에서 이야기를 한것과 같이, 데스크 탑 형태의 디자인은 지겹도록 사용이 되어왔다. 2010년에는  좀더 현실감있는 시각으로 변화가 될 것이다. 공간에서 옆을 보는 것과 같은 시각으로 이동도 있을 수 있다.

 

주요 아이디어: 2010년 여러가지 다른 시각/시점이 시도가 될 것이다.

 

http://downsign.deviantart.com/art/Book-Store-136542851


http://kpucu.deviantart.com/art/Pastorant-Restaurant-71565329

 

 

 

 


 

8.인터렉티브/직관적 디자인

데꾸벅 : 웹디자인이나 UI/UX에 대한 입문서에 나올만한 내용이다. 인터렉티브하고 직관적인것인 이미 디폴트인 시대에 살고 있다.

Flash는 지금보다는 더 인기가 있었던 적이 있었다.  한때는 짜증스러운 Flash 인터페이스가 없는 사이트들을 피할 수 없었던 적도 있었다.  최근에는, Flash는 좀더 편안하고 좀더 전문스러워 졌다.  어떤 디자이너들은 폼이나 팝업을 위해서 jQuery를 더 선호할 수도 있지만, Flash는 적당하게 사용이 되었을때면 아직도 웹 디자인의 중요한 부분이다.  Flash은 인터랙티브한 면에서는 아직도 적수가 없다.  2010년에는 웹 디자인너들은 Flash를 좀더 보완할 수 있는 요소들로 이동을 할 것이다.  최근의 방문자들은 웹에 대해서 대부분 잘 알고 있기 때문에, 디자이너들은 과거의 사이트들 보다는 좀더 직관적인 사이트를 제작을 할 것이다.

 

주요 아이디어: 인터랙티브 디자인이 컴백을 할 것이다.

 

 http://www.crowleywebb.com/

 


 

9. 모달창

데꾸벅 : 최근 3년동안의 웹트렌드에서도 언급되었던 내용이며 2010년에도 계속 유행될듯 싶다. 워낙 막강한 javascript library나 Framework들과 RICH Tool들이 많다 보니 이제는 구현하기도 쉬워졌다.

모달 윈도우는 2010년에는 말 그대로 사방에서 볼 수 있는 트랜드가 될 것이다.  모달 윈도우는 팝업하고는 달리 부드럽고, 모양도 좋고 더 인기가 많다. 모달 윈도우는 디자인과 사용이 너무 쉽게 때문에, 사용성을 염두에 두는 디자이너들에게는 최적의 해법이 될 것이다.

 

주요 아이디어: 모달윈도우는 2010년에도 지속적으로 사용이 될 것이다.

 

 http://digg.com/

 


 


10. 미니멀리즘


데꾸벅 : 모노톤이나 명조대비만으로 여백의 미를 강조하는 동양적인 디자인 컨셉에서 부터 시작된다. 과거 해외사이트를 살펴보면 대부분 여백에 텍스쳐나 바탕이미지를 사용하였으나 이제는 "오리엔탈 이즈 베스트 ~~~"

과거의 미니멀리즘 웹 사이트는 잊어도 좋다.  2010년의 웹 사이들은 많은 여백을 사용을 하되, 과감한 타이포그라피와 놀라운 컬러 스킴을 이용을 할 것이다.  모든 미니멀 웹 사이트들이 명확한 간결성 개념과 일치 하지는 않을 것이다. 미니멀리즘은 그 본연이 강도가 떨어지기는 하지만, 새로운 색상들이 채용이 될 것이다.  미니멀리즘은 차가운 것이 아니고, 따듯하고 핵심을 찌르는 것이다.

 

주요 아이디어: 미니멀리즘은 타이포그라피로 모험을 시도할 것이다.

 

 http://www.kylestanding.com/

 





11. 대형푸터

데꾸벅 : 일전에 데꾸벅의 블로그에서도 한번 포스팅 되었던 내용이기도 하다. 메인기능이 아니라 부가기능이나 정보, 혹은 메타성 데이타를 한곳에 몰아둔다는 느낌이 없지 않아 있다. 국내의 현실은 대부분 숨겼다/보여주는 형태로 많이 구현되고 있다.

대형 푸터는 이미 여기저기에서 볼 수가 있지만, 2010년에는 좀더 과장되게 사용이 될 것이다. 앞으로의 푸터는 미약한 존재가 아닌 디자인의 중요한 부분이 될 것이다.  앞으로는 다양한 소셜미디어 사이트의 부터의 피드, 투표기능, 트위터 피드와 같은 무작위적인 정보를 포함을 하고 있는 푸터도 보게 될 것이다.

 

주요 아이디어: 대형 푸터는 중요도는 떨어지지만, 좀더 퍼스널한 정보를 제공을 할 것이다.

http://www.duirwaigh.com/


 

 http://oldloft.com/

 

 

 

12. 복고

복고풍의 디자인은 당분간 남아있을 것이다.  많은 수의 디자이너들이 복고풍의 디자인에 감탄을 하기는 하지만, "마무리"를 제대로 짓지 않는 느낌을 제대로 소화하는 것은 쉽지 않다.  복고풍 디자인의 디자인의 톤과 저변에 깔린 재미요소를 통한 영감을 받아야 한다.  2010년의 레트로 디자인은 구식예술을 존중하는 새로운 방법을 찾아갈 것이다.

 

주요 아이디어: 복고는 "새롭다"

 

 http://www.level2d.com/

 






 

13.  인트로 상자

데꾸벅 : 2009년 웹디자인트렌트 맨 마지막 아이템으로 소개되었던 내용이다. 2010년에도 계속 쭈욱~ 될 듯 싶다.

2010년 디자이너들은 "안녕, 내이름.. " 하는 식의 자신을 방문자에게 소개하는 아름답기까지한 간결함을 알게될 것이다.  만일 당신이 창의적인 "About" 페이지 구성에 고민을 하고 있다면, 인트로 박스가 아마 최적의 답이 될 것이다.  인트로 박스는 당신이 누구인지를 제한된 면적을 통해 알려야 하기 때문에, 정보를 농축시키도록 강요할 것이다.  2010년의 인트로 박스는 그 사용영역을 단순 소개를 넘어서게 될 것이다.  지루한 "Hello"가 아닌 좀더 새로운 "인사법"을 디자이너들은 찾게 될 것이다.  그리고, 왼쪽에 치우쳐서 놓이는 인트로 박스가 아닌, 특이한 자리에 놓이는 - 예를 들면 페이지의 중간 같은 - 인트로 박스를 보게 될 것이다.

 

주요 아이디어: "Hello"를 하는 새로운 방법들

 

http://www.alessandro-cavallo.de/ 

 




14. 잡지형식의 레이아웃

데꾸벅 : 2009년 웹디자인트렌트 맨 처음 아이템으로 이미 소개되었던 내용이고 웹도 인쇄매체와 마찬가지로 2D라는 측면에서 접근하는 경향이 많다.  대부분의 레이아웃 설계나 정보설계(IA)시 인쇄매체의 레이아웃을 많이 참조하는 경향이 있다. 

사람들이 점점 더 전통적 인쇄물의 편안함에서 온라인으로 이동을 함에 따라, 디자이너들은 그들의 이동을 부드럽게 하는, 새로운 "환영 방법"을 찾고 있다.  한장의 홈페이지에 잘 정돈이 된 정보들을 가진, 잡지포맷의 디자인을 제공하여, 방문자들이 원하는 정보를 찾아보도록 하는, 이동이 생기고 있다.  잡지나 신문을 읽어본 사람이라면, 제공이 되는 익숙한 디자인에 호감을 갖을 것이고, 사용에 편안함을 느낄 것이다.  2010년에는 잡지포맷은 블로그에서 특히 인기가 있을 것이다.

 

주요 아이디어: 잡지 형태가 인포테인먼트 사이트에서 사용이 될 것이다.

 

 http://www.bmivoyager.com/

 

 

 

Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2010.03.11 17:11 김용근  댓글주소  수정/삭제  댓글쓰기

    정말 재밌게 잘 읽어보고 갑니다^^ 많은 아이디어가 떠오르는데요 :)



들어가기에 앞서
얼마전 가트너에서 발표한 2009 웹 10대 전략을 아래와 같이 요약하였다.
1. 가상화(Virtualization)
2. 클라우드 컴퓨팅(Cloud Computing)
3. 서버(Servers)
4. 웹 기반 아키텍처(Web-Oriented Architectures)
5. 엔터프라이즈 매쉬업(EnterpriseMashups)
6. 특성화 시스템(Specialized Systems)
7. 소셜 소프트웨어와 소셜 네트워킹(Social Software and Social Networking)
8. 통합 커뮤니케이션즈(Unified Communications)
9. 비즈니스 인텔리전스(Business Intelligence)
10. 그린IT(Green IT)

대부분의 2009년 웹트렌드는 소셜네트웍, 모바일, Saas라 불리는 클라우딩 컴퓨팅에 초점을 맞추고 있다. 대부분이 2008년에 이미 이슈화 되었고 앞으로 기술전망에서 언급된 내용이였다. 다만 전망하지 못한 부분들이 있었는데 금융위기에 관련된 부분이 조금 추가되었을 뿐이다. 
그런데 그에 따른 디자이너들의 웹트렌드에 대책은 어느정도 만족할수 있을까라는 생각에 여러사이트들을 둘러보다가 좋은 정보가 있어 포스팅한다. 


디자이너들은 항상 새로운것을 요구하고 여러가지를 경험하는 것을 좋아합니다.
작업물에 사용자의 반응을 지켜보는것을 좋아하고 가능한한 주류보다는 남들과 차별화된 디자인적 접근을 좋아합니다. 결론적으로 남들과 다르게 접근하고 새로운 트렌드를 추구하는 디자이너를 위해 최근 몇개월간의 추세를 기준으로 2009년 웹디자인트렌드를 작성합니다..
 - 원본글 중에서


1. Letterpress

최근 몇개월간 이제껏 많이 사용하지 않았던 온라인 서비스를 하는 웹사이트에서 인쇄물에서의 글꼴과 같은 웹사이트들이 많이 출현하였습니다. 이미 국내의 네트웍 인프라 덕분에(?) 국내의 다수 웹사이트는 이미 이러한 대형 인쇄타이포를 이용한 웹사이트들이 많이 있습니다. 특히 웹에이젼시나 디자인 전문 포트폴리오 사이트의 경우에는 더더욱 그렇습니다.


[ http://365daysofastronomy.org/ ]


[ http://www.alexbuga.com/v8/ ]


[ http://brightkite.com/ ]


[ http://www.powerset.com/ ]


[ http://www.storenvy.com/ ]


[ http://unblab.com/login ]


[ http://www.leemunroe.com/ ]


[ http://2d2.es/ ]


[ http://www.respiromedia.com/ ]






2. Rich User Interfaces

기쁘게도 현대 웹사이트와 웹애플리케이션에서의 UI는 점점 더 뷰티플해지고 사용하기 좋아집니다. 그러나 최근 몇년 동안은 이러한 애플리케이션의 사용자경험이 환상적으로 향상되고 전통적인 데스크탑애플리케이션에 거의 가깝게 진화하고 있습니다.

특히 지난해에는 더 많은 사이트들에서 다양한 디자인 요소로써 사용되고 있고 사용성을 중시한 인터페이스들이 나타나기 시작하였습니다.  웹동향과 마찬가지로 RIA, Flex, Javascript UI Libraries의 영향으로 이러한 현상은 점점더 두드러 질것으로 예상됩니다.


[ http://www.quicksnapper.com/ ]


[ http://www.quicksnapper.com/ ]


[ http://dc2009.drupalcon.org/> ]

위의 두 예제는 웹애플리케이션 디자이너들에게 좀더 기능적으로 접근하고 표현하기 위해 그들의 경험을 향상시키고 있는 증거이다.


[ http://konigi.com/interface/mobileme-calendar-date-selector ]


[ http://www.newspond.com/science/ ]


[ http://www.howcast.com/categories ]


[ http://moodstream.gettyimages.com/ ]


[ http://www.gettyimages.com/ ]


[ http://listen.grooveshark.com/ ]


[ http://www.kontain.com/#home ]









3. PNG transparency

투명한 PNG 포맷은 불행히도 IE6에서는 지원하지 않지만(IE6에서도 편법적으로 지원합니다.) 좀더 사용자들에게 좋은 이미지를 제공하게 해둔다. 이전까지의 투명이미지는 PNG만큼의 쿨러티를 지원해주지 않았으나 PNG의 투명도를 이용한 디자인은 아래와 같이 근사한 사이트를 디자인 하게 해준다. 

IE6에서는 setPNG와 같이 자바스크립트 나 url(data: /base64)와 같은 CSS만으로도 가능하겠지만 디자인적인 측면에서 투명이미지 사용으로 인하여 얻는 효과는 무궁무진합니다. 


[ http://rustinjessen.com/ ]


[ http://dc2009.drupalcon.org/ ]


[ http://24ways.org/ ]


[ http://labs.paulicio.us/viewport/#2 ]


[ http://www.restroom.nl/ ]


[ http://www.wishingline.com/notebook/ ]


[ http://carrotcreative.com/ ]







4. HUGE Typography

사용자에게 좀더 어필하기 위하여 36픽셀이상의 폰트들이 많이 사용되고 있습니다. 특히 웹디자인 에이젼시나 포트폴리오 사이트, 제품사이트에서 많이들 사용됩니다. 국내의 웹사이트들은 이미 많이들 사용하고 있죠? 다만 깨끗한 한글폰트를 사용하는 사이트는 그리 많지 않고 대부분이 영어라는 점에서 아쉬운점은 있습니다.


[ http://www.francescomugnai.com ]


[ http://madebygiant.com/ ]


[ http://theautumnfilm.com/red-white-sale/us.html ]


[ http://www.signalapps.com/ ]


[ http://www.blackestate.co.nz/ ]


[ http://www.onefastbuffalo.com/ ]


[ http://www.shiftpx.com/ ]







5. Font Replacement

기존의 폰트에서 요즘은 다른 폰트들로 바껴가고 있습니다. 타이포그라피에 더 많은 주의를 기울이는 디자이너들 만큼 웹사이트의 본문에 더 세심한 주의를 기울입니다. 기존의 helvetica, arial, georgia,verdana체에서 다양한 폰트들로 웹사이트가 채워졌습니다. 재미있는것은 이러한 폰트들이 웹사이트의 디자인을 결정하기도하며, 사용자들에게 더 어필한다는 것입니다. 


[ http://blog.iso50.com/ ]


[ http://365daysofastronomy.org/ ]


[ http://www.chigarden.com/ ]


[ http://www.nonesuch.com/journal ]


[ http://daily.creattica.com/ ]









6. Modal Boxes (Lightboxes)

Modal boxes (dialog windows)는 차세대 팝업화면입니다. 이미 모든 브라우저에서 팝업차단기능때문에 div 태그와 자바스크립트를 이용한 팝업을 많이 겪어 보았을 것입니다. 이러한 팝업도 둥근 모서리의 애플리케이션 디자인처럼 진화하고 있습니다.


[ http://typedeskref.com/ ]


[ http://www.realmacsoftware.com/rapidweaver/overview/ ]


[ http://listen.grooveshark.com/ ]








7. Media Blocks

점점 더 빠른 네트웍인프라가 좋아지다 보니 이러한 미디어 블럭들이 많이 사용되고 있습니다. 사용자들에게 좀더 빠르고 사용하기 편하고 접근성이 좋은 디자인을 제공하기 위하여 자바스크립트와 플래쉬를 이용한 기술들이 주류를 이루고 있습니다.


[ http://www.getbackboard.com/ ]


[ http://www.goodbarry.com/ ]









8. The Magazine Look

대부분의 블로그, 기술 포트폴리오 사이트등등에서 게시물의 배치, 타이포그래피등 전통적인 인쇄방식의 그리드 기반의 디자인이 점점 인기를 끌고 있습니다. 현재 보시고 계신 티스토리 블로그 조차도 잡지와 같은 그리드 형식을 뛰고 있는것이 많으며 특히 뇌입어블로그의 스마트에디터의 경우느 이러한 그리드-레이아웃 템플릿 조차도 지원하고 있습니다.


[ http://www.alpha-multimedia.com/category/blog ]


[ http://www.objectifiedfilm.com/ ]


[ http://www.inspirationbit.com/sources-of-inspiration-to-the-rescue/ ]


[ http://www.good.is/ ]


[ http://cutandtaste.com/ ]


[ http://www.nonesuch.com/journal ]







9. Carousels (Slideshows)

Carousels은 자신이 원하는 페이지를 마우스 클릭이나 키보드의 화살표만으로 이동할수 잇는 슬라이드 네비게이션의 필수요소입니다. 이러한 슬라이드쇼는 사용자들로 하여금 더 쉽게 원하는 컨텐츠를 찾을수 있도록 배려해 줍니다.

전통적인 탑-레프트-컨텐츠 레이아웃에서 좀더 사용자들에게 쉽고 빠르게 정보를 전달하기 위해서 더 유용한 방식의 슬라이드 네비게이션이 강조되는 경향이 많습니다. 뇌입어의 웹캐스트도 같은 현상이라고 봐도 될런지... 


[ http://www.itv.com/ ]


[ http://money.cnn.com/ ]


[ http://music.yahoo.com/ ]


[ http://vickycristina-movie.com/ ]







10. Introduction Blocks

대부분의 웹사이트에서 상단-왼쪽영역은 가장 중요한 부분입니다. 이부분은 사용자에게 중요한 메세지나 권리들을 알려주고 가능한 빨리 메세지를 전달하는 역할을 합니다. 사실 많은 디자이너들이 웹애플리케이션이나 회사웹사이트디자인이든 온라인 서비스든 포트폴리오 사이트이든 상단-왼쪽 영역은 슬로건이나 간단한 소개를 넣는 것을 좋아합니다. 이곳에는 생생한 타이포그래피나 강력한 인상을 위하여 임팩트한 이미지들이 많이 사용됩니다. 보통 250~400픽셀의 높이로 사용됩니다. 디자인 요소 중 정보전달의 중요한  "강"-"약" 포인트에서 "강"에 해당되는 임팩트가 주로 들어가는 영역입니다. 


[ http://www.shannonmoeller.com/ ]


[ http://productplanner.com/ ]


[ http://www.45royale.com/ ]


[ http://revyver.com/ ]


[ http://creamscoop.com/ ]





더 많은 정보는 이곳에서 확인하세요! 






Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2009.01.30 17:47 밝은바다  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다. 퍼갑니다

  2. 2009.03.08 17:45 골든벨  댓글주소  수정/삭제  댓글쓰기

    잘봤어요^^

  3. 2009.03.30 04:33 빙빙  댓글주소  수정/삭제  댓글쓰기

    원문을 보고 영어에 워낙 약한지라 잘 이해하지 못한 부분이 많았어요
    많은 도움이 됩니다! 좋은 정보 감사해요^^ 퍼가도 되겠지요~ 퍼갑니다!

  4. 2009.04.23 08:45 쭈니  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다. 퍼갑니다~^^ 출처 표기해놓을게요~

  5. 2009.06.18 04:22 Lauren  댓글주소  수정/삭제  댓글쓰기

    퍼갑니다.. 넘 좋은 정보들이 많네요..^^

  6. 2009.06.20 02:39 북극성으로의 항해  댓글주소  수정/삭제  댓글쓰기

    퍼갈께요..좋은 정보 정말 감사해요.

  7. 2010.11.22 15:14 links of london charm bracelets  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다. 퍼갑니다~^^ 출처 표기해놓을게요~