여기 38개의 HTML5로 디자인된 사이트들이 여러분의 영감을 돋구어줄 것입니다.(번역)

 

HTML 발전에서 HTML5 여태 개발되었던 사이트들의 신선한 공기처럼 다가왔습니다. “플래시 킬러” “새로운 거대한” “미래의  디자인” 등의 수식어가 붙은 HTML5 우리들에게 다가오고 있습니다심지어 웹디자이너에게도 HTML5다시한번 우리들을 즐겁게 만드는  놀라운 툴로 다가왔습니다.

여기 작은 웹의 수집이 HTML5로써의 구조화가 말해주는 즐거움을 알려줄 것입니다.

(역자주 : 솔직히 아래 사이트들 전부  추천입니다.. 제겐 솔직히 신선한 디자인적 충격을 안겨주었습니다.)

트론 웹사이트

HTML5 캔버스의 요소들을 정말 놀라우리만큼  사용했습니다즐겨보세요.

Tron-Legacy-2011-07-12-03-42-42.png 

자라 미디어 디자인

디자인 에이전시 회사의 홈페이지로 컨텐츠를 매끄러운 가로 스크롤로 보여줍니다.

Zara-Media-Design-Group-2011-07-12-01-21-35.png 

Karlsruhe 블로그

Webdesign-Karlsruhe-Blog-2011-07-12-01-43-25.png 

비주얼라이즈( visualise)

캐나다의 마이크로 블로깅 플렛폼입니다.

visualise.ca-–-un-micro-blog-par-Gab-Labelle-artisan-numérique-montréalais-–-photographie-web-design-vidéo-idéation-trucs-perso-et-+++-2011-07-12-02-04-59.png 

버튜티 디자인 스튜디오

Virtuti-D.-Home-based-small-design-studio-from-Tel-Aviv-Israel.-Websites-and-graphics.-HTML5.-User-side-web-development.-2011-07-12-02-02-49.png 

퓨마 웹사이트

Untitled-11.jpg 

토오타 프리우스 프로젝트

Toyota-Prius-Projects-2011-07-12-01-44-16.png 



와이어드 마인드

와이어드 마인드는 Wored.co.uk 컨텐츠를 다른 방식으로 탐험해   있는 시각효과를 제공해 줍니다. MS IE 9브라우저와 파트너쉽을 맺고 매우 빠른 표준 브라우저에서 여러분이   있는 것이 무엇인지를 보여줍니다.

(역자주 : 상당히 시각적이면서도 놀라운 디자인과 브라우징 방법을 보여줍니다꼭꼭 방문해 보시기를 추천합니다.)

The-Wired-Mind-at-Wired.co_.uk-Visualising-the-Future-of-Technology-News-and-Reviews-Wired-UK-2011-07-12-01-36-43.png 

황야의 시내(the wilderness downtown)

The-Wilderness-Downtown-2011-07-12-01-52-34.png 

불릿 에이전시(The Bullit Agency)

미칠듯한 효과로 아티스트들을 보여줍니다슬라이드  없이 부드럽게 컨텐츠를 이동하고메뉴들이 위치를 이동합니다.

(역자주 : 정말 멋진 사이트입니다 방문하셔서 멋진 디자인 효과를 살펴보시길..)

The-Bullitt-Agency-A-full-service-exclusive-booking-agency-for-top-international-djs-producers-2011-07-11-16-13-46.png 

S5 스타일 포트폴리오

캔버스로 무엇을   있는지에 대해 아름다운 예제를 보여줍니다처음 제가 보았을때는 플래시인줄 알았는데아니었습니다!

S5-Style-Hello-world.-2011-07-12-01-59-37.png 

 에드워드의 포트폴리오

ROBEDWARDS.ORG-Web-Graphic-Design-2011-07-12-02-01-29.png 


레드스퀘어 에이전시

Red-Square-Agency-2011-07-12-01-34-04.png 


안투안 (Antoine Wette)  포트폴리오

Portfolio-Of-Antoine-Wette-2011-07-12-01-42-44.png 


리카드 선드의 포트폴리오

 사이트는 신선한 공기와도 같습니다다른 사진작가들과 협력하여 사이트를 만들었습니다플래시를 사용하지 않고 단지HTML5 자바스크립트만을 사용하였습니다최적화된 사진을 내려받으며  괜찮은 슬라이딩 애니메이션/네비게이션이 가능합니다정말 멋진 사이트인  같습니다.

Photography-by-Rickard-Sund-2011-07-12-01-51-02.png 


 나은 세상나이키 캠페인 웹사이트(Nike Better World Campaign website)

Nike-Better-World-2011-07-12-01-40-02.png 

nGen Works

nGen-Works-2011-07-12-01-41-42.png 


맥킨니 에이전시(McKinney Agency)

McKinney-2011-07-12-01-47-56.png 


Kzauhide Fukuyama Portfolio

kzxtreme-Kazuhide-Fukuyama-the-web-designer-and-front-end-developer-2011-07-12-01-23-43.png 


Klokkerent shop

KLOKKERENT-design-watches-and-sunglasses-Normal-Timepieces-Extra-Normal-Grande-2011-07-12-01-51-54.png 


Harpoon Pictures Directors

Harpoon-Pictures-Directors-2011-07-12-01-41-02.png 


고업 커뮤니케이션 그룹(Go Up Communication group)

GO•UP-Communication-group-it.png 


고스트 홀스(Ghost horses)

Ghost-Horses-Totally-Ace-Website-Design-Development-in-Manchester-2011-07-12-03-18-12.png 


무료 에이전트 디폿(FreeAgent Depot)

FreeAgent-Depot-—-A-furtive-glance-behind-the-wizards-curtain-2011-07-12-01-56-56.png 


페시오 디자인(Facio Design)

Facio-Design-Essex-Web-Design-iPhone-iPad-UI-Design-HTML-Email-Design-2011-07-12-01-30-44.png 

엠파이어 스테이트 리코딩

HTML5 오디오 테그들을 멋지게 구현하였습니다.

Empire-State-Recordings-House-Music-House-Music-Record-Label-House-Mixes-House-Remixes-2011-07-12-01-29-05.png 


카탈린 보로이(Catalin Boroi) 포트폴리오

HTML5 만든 깔끔한 디자인의 홈페이지 입니다.

efingo-2011-07-12-01-57-52.png 


디지털 핸드 에이전시(Digital Hands Agency)

Digital-Hands-Online-Brand-Communication-Social-Media-Consultancy-Online-Campaign-Practices-Mobile-Marketing-2011-07-12-01-58-26.png 


다니엘 스콜턴(Daniel Scholten)

Daniel-Scholten-★-Kriminalromane-2011-07-12-02-02-14.png 


컬쳐럴 솔루션 UK(Cultural Solution Uk)

cultural-solutions-uk-I-Lincolnshire-based-cultural-consultancy-I-research-planning-events-management-services-2011-07-12-01-33-07.png 


카펜 디지털 에이전시(Cappen Digital Agency)

Cappen-Agência-Digital-SEO-Criação-de-Web-Sites-Portais-Flash-Site-Sistemas-Bluetooth-Touchscreen-E-commmerce-Web-Agency-Recife-Pernambuco-Brasil-+55-81-3241.5288-2011-07-12-01-55-21.png 


Büro Maisengasse Gassee

Büro-Maisengasse-Grafische-Gestaltung.-Medienentwicklung-Landeck-in-Tirol-2011-07-12-01-32-15.png 


BountBev

BountyBev-Bringing-the-Reward-of-American-Craft-Beer.-2011-07-12-01-56-00.png 

  보디가드

Ben-the-Bodyguard.-Protecting-your-data-on-iPhone®-and-iPod-touch®-2011-07-12-01-47-05.png 

에스페시 제펜(Aspesi Japan)

ASPESI-OFFICIAL-SITE|アスペジ-オフィシャルサイト-2011-07-12-01-35-47.png 


에어워크

 회사는 보드 스포츠 문화에 혁명을 일으키고 있는 회사입니다온라인 샵이 멋진 터치들로 이루어져 있고세로 슬라이더,비디오애니메이션 등이 있습니다눈으로 즐기세요!

AIRWALK-2011-07-12-01-49-22.png 


Octave and Octave

Octave & Octave  디자인과 모바일  기반의 신세대 에이전시 입니다.

Agence-web-paris-design-et-developpement-application-web-2011-07-12-02-03-26.png 

데이브 가마체(Dave Gamache) 2010년의 중요한 7가지

 페이지는 데이브의 2010년의 특별한 순간들을 표현했습니다전체화면의 배경 화면에 오버래핑 되는 세로 네비게이션은정말 질리지 않더군요.


7-Best-Things-of-2010-by-Dave-Gamache-2011-07-12-01-53-34.png 


결론

HTML5  CSS3 조합그리고 자바스크립트의 엄격한 구현은 새로운 관점의 유저 경험을 가져옵니다단지 디자인적으로 작은 HTML5 단계의 변화가 있을지라두요새롭고 희망적인 것들이 HTML5 통한 디자인에서 나올 것을 우리는 기대해봐야 겠습니다.


(이 글은 한국 HTML5 사용자 모임에 기고된 글입니다.)