HTML이라고 들어보셨나요?

HTML은 웹 문서를 만들기 위해 사용하는 가장 기본적인 프로그래밍 언어 가운데 한 가지로,

웹코딩에 익숙하지 않다면 HTML부터 차근차근 시작하는 게 가장 좋은 방법인데요.

오늘부터 각자 자신이 원하는 웹사이트를 자유롭게 만들 수 있을 때까지

장기간에 걸쳐 HTML을 배우고 익혀보는 시간을 갖겠습니다.

첫 번째 시간에는 인상적인 다양한 HTML 기법을 엿볼 수 있는 웹사이트 리스트를 공유하겠습니다.

디자인1실_1

 

 

 

1. http://www.judes.co.uk/flavours/tubs

디자인1실_2

부드러운 파스텔톤 색감이 제품의 특성과 잘 어우러지면서 시선을 사로잡는다. 

한눈에 들어오는 깔끔한 레이아웃 구성 역시 탁월하다.

 

 

2. http://www.onthegrid.city/

디자인1실_3

각 지역의 랜드마크를 일러스트로 표현한 방식이 흥미롭다.

또한 오른쪽에 숨은 페이지를 클릭하면

각 지역의 매력적인 장소를 지도에 표시해 한눈에 볼 수 있다는 점 역시 재미를 느낄 수 있는 부분.

 

 

3. http://klammerth.at/

디자인1실_4

가장 먼저 전체 화면을 뒤덮는 이미지가 보여진다.

시네마그래프(시네마+포토그래프의 합성어. 정지된 사진 속에서 한 부분만 움직이는 이미지를 말한다.)기법을 이용해

좌측 아래 부분에만 움직임을 부여했다. 빵에 칼질을 하는 부분이 시선을 사로잡는다.

그 아래로는 마치 긴 이야기를 들려주듯 막힘 없이 매끄러운 흐름으로 페이지를 이어나간다.

 

 

4. http://steuermann.haus/

디자인1실_5

첫 페이지에서 전체 화면에 영상이 재생된다.

페이지의 양쪽 west, ost 중 한 쪽을 선택하면

깔끔하고 밝은 모노톤의 인테리어 사진과 짤막한 설명이 화면의 반쪽을 채우며 등장한다.

반대쪽 화면에는 첫 페이지의 영상이 계속해서 재생된다.

잔잔한 영상이 여유롭게 현재 페이지에 집중할 수 있게 도와주고

인테리어 공간의 바깥 풍경을 떠올리게 해 조화로운 느낌을 준다.

 

단조로움을 깨는 화면 분할, 사진과 영상의 배치가

인테리어 사진과 잘 어우러지도록 제작한 것이 이 웹페이지의 가장 큰 매력.

페이지 전체에 mid-tone을 많이 사용해 잡지 KINFORK를 연상시킨다.

 

 

5. https://challenge.focus-bikes.com/

디자인1실_6

역동적인 영상과 그래픽으로 시작되는 페이지.

‘익스트림 스포츠’라는 단어를 자연스레 떠올리게 한다.

웅장한 효과음과 사선으로의 화면 전환이 페이지의 특성과 잘 어우러진다.

road, mountain, triathlon에 맞는 자전거(제품) 소개 페이지의 경우

각각의 특징을 블랙 백그라운드에 타이포와 그래픽으로 나타낸 점이 남성적이고 멋있다.

좌측 하단에 내가 본 페이지가 히스토리로 설정되어 언제든 이전 페이지로 돌아갈 수 있는 점 또한 흥미롭다.

 

 

6. http://dreamteam.pl/

디자인1실_7

기하학적인 도형들이 움직이며 입체적인 공간을 만드는 것으로 페이지가 시작된다.

tone-down된 큰 사각형들이 배경이 되고 아래에서 원하는 카테고리를 선택한다.

STAGE DESIGN – TV, EVENTS – FAIRS 카테고리를 클릭하면

화려하고 독특한 전시 및 무대 사진과 그에 대한 설명을 볼 수 있다.

왼쪽의 워딩은 고정되고, 오른쪽의 이미지는 마우스 스크롤로 위아래 이미지로의 이동이 가능하다.

배경을 이루는 도형들의 입체적인 모션이 인상적이며,

일직선으로 나열된 직사각형 사진들의 정직한 배열과 심플한 설명,

배경색과 대비되는 화려한 색감의 사진들에 매료된다.

 

 

7. http://www.yudo.com/index.do

디자인1실_8

시선의 흐름에 따라 디자인에 모션을 준 부분이 인상적인 기업 페이지.

아이덴티티를 담은 대표 컬러를 사용해 브랜드의 느낌을 잘 살렸다.

감각적인 디자인으로 오래된 기업임에도 불구하고 세련된 느낌을 준다.

개선되었으면 하는 부분은 이미지 속 등장인물이 한국인이었다면 더 좋았을 듯.

 

 

8. http://www.groupy.co.kr/about

디자인1실_9

전달하고자 하는 내용을 한눈에 파악할 수 있고,

오렌지, 블랙, 화이트. 과하지 않은 컬러의 조합이 좋다.

스크롤을 내리면 상단 바의 색상과 스타일이 바뀌며 고정돼 다른 카테고리로의 빠른 이동이 가능하다.

특이한 점이라면 폰트 제작 브랜드인 만큼 시스템 폰트를 거의 사용하지 않는다는 점.

 

 

9. https://customer.kbcard.com/CXCRSZZC0001.cms

디자인1실_10

국민카드 위시 페스티벌 페이지.

프로모션이나 인포그래픽 기술이 필요할 때 사용할 수 있을 듯.

 

 

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다