16 가지 놀라운 HTML 예제

1/2 페이지 : 페이지 1

이러한 사이트 중 일부는 최신 기술을 사용하여 웹에서 가능한 것의 경계를 확장합니다. 다른 사람들은 아름답고 유용한 사이트를 만들기 위해 전통적인 디자인 원칙을 사용합니다. 간단한 HTML을 사용하든 WebGL 및 3D CSS를 사용하든 여기에서 영감을 얻을 수있는 것을 찾을 수 있습니다.

우리는 또한 영감을주는 훌륭한 선택이 있습니다. CSS의 예 탐색 할 수 있습니다.



01. Appy Fizz

이 디자인은 매우 평평한 요소와 3D 효과 요소를 혼합합니다.



이 디자인은 매우 평평한 요소와 3D 효과 요소를 혼합합니다.

Appy Fizz는 자신을 '과일 음료의 샴페인'으로 묘사하는 스파클링 음료입니다. 새로운 Appy Fizz 웹 사이트는 NYC에 기반을 둔 디자인 회사의보다 광범위한 리 브랜딩 프로젝트의 일부였습니다. Sagmeister & Walsh . 제작자가 사례 연구에서 설명했듯이 정체성은 '3D 구와 원의 동적 그래픽 언어를 통해 탄산 거품을 시각화합니다.'

디자인은 매우 평평하고 함축 된 3 차원 요소의 흥미로운 혼합입니다. 굵은 빨간색, 흰색, 검은 색으로 쓰여진 원형 언어는 팝아트, 미니멀리즘, 물방울 무늬와 관련된 세계적으로 유명한 예술가 쿠사마 야요이의 작품을 연상시킵니다.



상업 산업에서의 예술과 그 공간은 Sagmeister & Walsh가 작업 전반에 걸쳐 다루는 주제이며,이 조합이 어떻게 웹으로 변환되는지 보는 것은 흥미 롭습니다. 여기에는 동일한 시각적 언어를 사용하는 많은 애니메이션과 대화 형 캔버스 요소가 있습니다. 탄산화 시뮬레이션은 웹 사이트에서 이동하는 사용자의 마우스를 따라 이동합니다.

02. 소수에 의해 제작

이 컨퍼런스 사이트는 숨겨진 놀라움으로 가득 차 있습니다.

이 컨퍼런스 사이트는 숨겨진 놀라움으로 가득 차 있습니다.

Made by Few는 주최하는 연례 웹 컨퍼런스입니다. 조금 , Arkansas의 디자인 및 개발 기관입니다. 샐리 닉슨 의 상세하고 밝은 삽화가 마스트 헤드와 발표자 설명에 나와 있으며, 너무 미묘하기 때문에 군중 속에 반복이 있음을 깨닫는 데 시간이 걸립니다.



사이트를 탐색하면 더 많은 놀라움이 있습니다. Few의 공동 설립자이자 컨퍼런스 주최자 인 Arlton Lowry는 'At Few는 즐거운 사고를 좋아하고 탐험을 장려합니다. 탐사 철학에 가깝게 사이트 전체에 숨겨진 보석이 흩어져 있습니다 (모두 제공하지는 않지만 Konami 코드를 입력 해보세요!).

이러한 재미있는 요소는 사이트에 Arlton이 대행사 문화에 직접 기여하는 많은 개성을 부여합니다. '우리는 사람들에게 개방적이고 재미있는 환경을 제공 할 때 어떤 일이 일어날 지 알 수 없다고 믿습니다.'

좋은 캐릭터 디자인을 만드는 것

03. 올 버즈

강력한 제품 사진은이 사이트에 영향을줍니다.

강력한 제품 사진은이 사이트에 영향을줍니다.

Allbirds는 양 29,221,344 마리의 땅에서 온 스포츠 신발 브랜드입니다. 공동 창립자 인 Tim Brown이 메리노 울의 놀라운 품질을 관찰하고 왜 이전에는 신발에 사용되지 않았는지 궁금해하면서 시작되었습니다.

Shopify를 사용하여 구축 된 웹 사이트는 라이프 스타일 사진과 일러스트레이션을 혼합합니다. 그 결과 Allbirds의 비하인드 스토리를 전달할뿐만 아니라 제품 자체에 대한 느낌도주는 즐거운 경험이됩니다.

'제품 디자인에 대한 세부 사항과 생각에 대한 놀라운 관심을 보여주기 위해 설계되었습니다.'라고 Brown은 사이트의 추론에 대해 설명합니다. '우리는 사진과 뉴욕에 기반을 둔 키위 사진 작가 Henry Hargreaves에 막대한 투자를하여 현장에 활기를 불어 넣고 더 나은 신발을 더 나은 방식으로 만드는 우리의 사명을 명확히했습니다.'

브라운과 붉은 뿔 팀은 사이트의 UX에 대한 극도의 헌신과 종종 간과되는 세부 사항에 어떻게 의존했는지에 대해 이야기합니다. 일상적인 FAQ 섹션은 애니메이션 GIF로 생생하게 표현되며, 일러스트레이션은 예상치 못한 스토리 텔링 모티브로 사이트 전체에서 사용됩니다.

04. 카림 라시드

HTML 예제 : Karim Rashid

Karim Rashid의 새로운 사이트는

디자이너 카림 라시드 (Karim Rashid)는 자신이 유명한만큼 다작합니다. 3,000 개가 넘는 디자인이 제작되고 전 세계 20 개의 영구 컬렉션에서 작업하고 있기 때문에 그의 웹 사이트가 지난 10 년 동안 뒷자리를 차지한 것은 놀라운 일이 아닙니다. 그가 위임 할 때까지 Anton & Irene , 그건.

매력적인 상호 작용, 감성적 인 타이포그래피 및 진정으로 장치에 구애받지 않는 레이아웃을 트레이드 마크로 채택한 듀오는 활발한 탐험을 유도하는 사이트를 제공했습니다. 물론 요점은 '우리의 주요 목표는 시각적으로 매력적인 방식으로 과다한 제품과 프로젝트를 선보이는 것이 었습니다.'

이 과다한 제품은 또한 도전을 제시했습니다. 반응 형 환경에서 다양한 모양과 크기의 5,000 개 이상의 이미지를 제공하는 방법은 무엇입니까? 해결책 : 기존 레이아웃을 재 구상하고 구조화에 대한 lo-fi 접근 방식을 사용하여 대담한 (하지만 눈에 잘 띄지 않는) 타이포그래피와 결합 된 정확하고 유연한 그리드를 제공합니다.

Rashid의 새 사이트에서 가장 인상적인 점은 뷰포트 간의 원활한 전환 일 것입니다. '우리는 항상 모든 화면을 동시에 디자인합니다. 구성 요소 나 레이아웃에 대한 아이디어를 얻은 순간 모든 화면에서 시도해보고 전반적으로 의미가 있는지 확인합니다.'

05. 히스 토 그래피

HTML 예제 : 히스 토 그래피

빅뱅부터 현재까지의 인터랙티브 타임 라인

히스 토 그래피 – 이스라엘 디자이너 및 개발자 Stauber 죽이기 Bezalel 예술 및 디자인 아카데미의 마지막 해 프로젝트는 빅뱅에서 현재까지 140 억 년에 걸친 인터랙티브 타임 라인입니다. 문자 그대로 알려진 우주의 전체 역사에 걸쳐 확장되는 이것은 복잡한 주제를 전달하는 방법에 대한 우리의 선입견에 도전하는 거대한 대화 형 인포 그래픽입니다.

문학과 음악에서 암살, 발명 및 종교에 이르기까지 다양한 주제를 다루는 Histography의 타임 라인은 우리가 부유 한 과거의 사건을 탐구하도록 초대합니다. 각각은 Wikipedia에서 동적으로 가져와 화면에 작은 검은 색 점으로 표시됩니다. 두 가지 모드가 있습니다. 가로, 왼쪽에서 오른쪽보기로 사용자가 특정 기간에 집에 들어갈 수 있습니다. 또는 핵심 이벤트의 큐 레이트 목록을 제공하는 나선 모양의 타임머신.

Stauber는 시간이 지남에 따라 펼쳐지는 역사를 보여주는 아이디어에 항상 매료되었다고 말합니다. '타임 라인은 역사를 시각화하는 가장 인기있는 방법이지만, 항상 매우 제한적이라고 느꼈습니다. 이 프로젝트를 시작할 때부터 1 년, 10 년 또는 기간에 국한되지 않는 타임 라인을 만들고 싶었습니다. 모든 역사를 담을 수있는 타임 라인을 원했습니다. '

06. 그리드에서

HTML 예제 : 그리드에서

디자이너가 선별 한 국제 동네 가이드

많은 사람들에게 스트레스를 주지만 사무실을 옮기는 것도 큰 영감의 원천이 될 수 있습니다. 언제 Hyperakt 새로운 환경의 숨겨진 보물을 발견 한 팀의 흥분으로 브루클린의 Gowanus로 이전 한 팀은 디자이너가 큐레이팅 한 국제적인 동네 가이드 인 On the Grid의 화신으로 이어졌습니다.

사이트는 미니멀하면서도 인상적이며 ' 사이트의 콘텐츠처럼 매우 구조적이지만 재미 있고 역동적으로 설계되었습니다. '. 말도 안되는 미학은 일반적인 영웅 이미지 함정을 피하고 극단적 인 크기에서도 뷰포트를 잘 활용합니다.

그리고 세부 사항에 대한 관심이 있습니다. 애니메이션 로고부터 100 개 (그리고 셀 수있는)의 독특한 도시 삽화와 간단한 애니메이션에 이르기까지 On the Grid는 단순한 라이프 스타일 블로그가 아닙니다.

Hyperakt는 블로그에서 '아름다운 사진, 솔직한 설명 및 디자인 중심 큐 레이션을 통해 우리가 사랑하는 장소의 진정한 본질을 포착하는 신뢰할 수있는 리소스'를 만들고 싶었던 방법을 설명합니다. 매달 더 많은 큐레이터가 합류함에 따라 On the Grid는 곧 가까운 동네에 올 것입니다.

07. LS 프로덕션

HTML 예제 : LS Productions

일러스트 레이터에서 그림을 벡터로 바꾸는 방법
LS 프로덕션의 웹 사이트는 에딘버러 에이전시 Whitespace에서 제작했습니다.

LS 프로덕션은 최근에 훌륭한 위치 (Location Scotland라는 이름 아래)를 소싱하는 것에서 지평을 넓혀 현재 영국 최대의 스틸 및 모션 서비스 제작 회사가되었습니다. 브랜딩과 웹 사이트는 에딘버러 에이전시에서 제작했습니다. 공백 .

선임 디자이너 인 Mike Bryant는 회사의 작업이 이야기를하도록하는 것이 우선 순위라고 말했습니다. '그들은 스틸에서 모션에 이르기까지 놀라운 포트폴리오를 가지고있어서 우리의 주요 임무는 이미지로 최소한의 유형을 보완하는 구조를 만드는 것이 었습니다.' 이러한 접근 방식은 홈페이지에서 즉시 확인할 수 있습니다. 홈페이지에는 애니메이션 타이포그래피와 비디오가 적절하게 혼합되어 회사의 광범위한 제품이 요약되어 있습니다.

로드 시간을 최소화하고 고품질 이미지를 위해 다양한 크롭을 관리하는 주요 기술적 과제는 필요한 경우 고해상도 이미지를 대체하고 JavaScript를 사용하여 다양한 화면 크기에서 이미지의 높이와 종횡비를 동적으로 관리함으로써 극복되었습니다. .

최종 결과는 '아름다운 작업을위한 미묘한 배경 역할을하기 위해 모듈 식 패널, 깨끗한 유형 및 최소한의 색상 팔레트를 사용하는 벗겨진 사이트'라고 Bryant는 말합니다.

08. 지배자

HTML 예제 : Lordz

이 댄스 아카데미의 핵심을 포착하는 데 도움이되는 동영상

'놀이는 문화보다 오래되었습니다. 왜냐하면 문화는 항상 인간 사회를 전제로하고 동물은 인간이 자신의 놀이를 가르치기를 기다리지 않았습니다.' 따라서 작가가 사회에서 놀이의 영향에 대해 논의하는 Johan Huizinga의 Homo Ludens가 시작됩니다.

연극의 요소는 스위스에 본사를 둔 댄스 아카데미 인 Lordz가 진지하게 생각하는 요소입니다. Lordz에게 춤은 단순한 움직임이 아닙니다. 그것은 예술 형식이며, 문화적 표현의 장난기있는 수단입니다. 아카데미 사이트 설계를 맡은 Eidenbenz / Zürcher 이 정신을 사용하여 예술적 방향을 안내했습니다.

아트 디렉터이자 파트너 인 Daniel Zürcher는``우리는 Homo Ludens의 핵심으로 디지털 경험에 맞서는 무언가를 만들고 싶었습니다. '매일의 춤 연습에 대한 통찰력을 얻는 장난기있는 방법; 움직임, 감정 등. 이를 위해 우리는 촬영, 포스트 프로덕션, 물론 프로그래밍에 최신 기술을 사용했습니다. '

결과는 매우 놀랍습니다. 비디오 사용을 통해 조직의 심장을 진정으로 포착하는 독특하게 인식되고 영감을주는 사이트-요즘 드문 업적입니다.

다음 페이지 : 8 가지 놀라운 HTML 예제

  • 1

현재 페이지: 페이지 1

다음 페이지 2 쪽