본문 바로가기

Web + Mobile

리본과 태그를 사용한 웹디자인

웹 디자인에서 리본과 태그의 사용은 주로 온라인 의류 사이트에서 보여져왔던 것이 요즘은 여러 종류의 웹사이트에서도 사용되고 있습니다. 그 대표적인 예로 메인 메뉴의 백그라운드를 장식하는 것이라든가, 타이틀과 캡션을 구분하는 용도로 사용되는 것입니다. 


여기서 '무엇을 강조하고 효과를 줄 것인가'에 따라 리본과 태그의 그래픽적인 요소를 적절히 조화시키는 것이 중요합니다.






Holify


전체적으로 깔끔하고 심플한 디자인에 모노톤 리본의 사용이 외곽선 그래픽 요소들과 잘 어우러져 있습니다.


XHTMLChoppers


비록 3개의 리본이 가로줄로 거의 같이 놓여있어서 조금 어수선해 보이지만, 색과 형태를 달리하여 사용자의 집중을 잡아주고 있습니다.

Kinderfotografie


스티치 된 태그를 로프에 매달아놓고 흔드는 효과와 가벼우면서도 뚜렷하게 놓인 리본 메뉴가 귀여움을 더하고 있습니다.





Hosting Pear


태그라인 형태의 변화와 움직임을 줘서 사용자에게 읽는 재미를 주고 있습니다.


Milk and Blood


강렬한 이미지와 로고의 역할을 하는 큰 사이즈의 블랙 태그가 극적인 감정을 만들어내고 있습니다.



Bit Circus


심플한 하나의 거대하고 긴 리본라인이지만 효과적으로 사용자의 시선을 위에서 아래로 이끌면서 동시에 다른 텍스트와 선명하게 구분을 지어주고 있습니다.

Moonrise Kingdom


색바랜 베이지 색에 중후하고 약간은 거친 텍스쳐가 입혀진 리본 메뉴가 주변 이미지에 잘 녹아들어 있습니다.





Refresh Studio

해외 최신 웹/UX 디자인 글과 동향을 소개해 드립니다.