프로페셔널해 보이는 웹디자인을 위한 부가적 요소 몇 가지 웹디자인에 간단한 인터랙션을 조금만 더하면 프로페셔널해 보이는 몇 가지 요소들이 있습니다. 작은 효과들로 내 사이트를 풍성한 UX web이 되도록 제작해보세요. 1. 블러 효과 filter:blur() 이전 콘텐츠에서도 한번 소개되었던 nike 사이트의 블러 효과입니다. 위와 같은 마우스오버 효과는 스크립트가 함께 추가되어야 하지만 단순한 hover 효과나 blur 효과 자체는 간단한 CSS만으로도 설정이 가능합니다. blur(0) /* No effect */ blur(8px) /* Blur with 8px radius */ blur(1.17rem) /* Blur with 1.17rem radius */ 블러 효과 적용을 원하는 이미지 소스의 cl..

명품 브랜드의 웹사이트는 보통 어느 나라에서든 원활한 접근이 가능하도록 호환성을 높이고 누구나 편하게 볼 수 있도록 직관적인 UI를 사용하고 있기에 장식적 디자인 요소가 많은 편은 아닙니다. 폰트는 영문 위주이며 국가에 따라 기본이 되는 산세리프, 세리프 폰트를 사용하고 있습니다. 그럼에도 브랜드마다의 UI적 특성이 조금씩 다르고 또 보통의 브랜드 사이트들과 대표적 차이가 있는 부분들이 있어 몇 가지 명품 브랜드 웹사이트를 탐색해봤습니다. 1. 보테가 베네타 #기본레이아웃 #심플 보테가 베네타의 메인 이미지는 심플하게 대표 아이템의 아트워크 이미지 배너 1개로 구성 되어있습니다. 모바일 사이즈와 동일한 이미지를 PC에 사용하였고 PC버전 사이트 wrap 가로 사이즈는 1440px을 사용하고 있습니다. 글..

최근 어디에서나 보셨을 법한 웹/그래픽 디자인 트렌드는 #레트로, #로파이, #세리프, #아치 총 4가지 키워드로 이야기 될 수 있을 것 같습니다. 키워드에 따라 구분하여 웹디자인과 그래픽 디자인의 트렌드에 대하여 알아보겠습니다. 전반적으로는 아르데코와 캘리그라피를 합쳐놓은 듯한 우아하고 유려한 곡선을 가진 세리프 폰트가 많이 사용되고 있습니다. 이런 형태의 폰트 디자인도 새로이 많이 제작되는 듯 합니다. 어딘지 모르게 명화 속 비너스가 떠오르는 폰트 디자인은 주로 두세가지 컬러의 그라디언트 배경에 많이 사용되며, 이미지와 그라디언트 배경 모두에는 노이즈가 가미되어 있습니다. 또한 아치 형태의 이미지 크롭이 많이 등장하고, 빛을 형상화하는 기하학 도형이나 원형, 선들이 그래픽 요소로 적용됩니다. 웹디자인..

Life in VOGUE 프로젝트는 2018년부터 오프라인 공간에서 디자인과 패션을 접목하여 진행된 복합 프로젝트 입니다. 올해는 비대면 전시를 위해 온라인상에 VR로 가상의 빌딩을 제작하여 아티스트의 공간 디자인 프로젝트를 소개하는 사이트를 오픈했는데, 차분하면서도 고급스러운 기조로 전개되는 UI와 함께 아티스트의 작품들을 층별로 전시하여 통상적인 가상 공간 전개 방식인 360도 영상이나 커다란 갤러리 공간에 전시된 작품을 감상하는 방식이 아닌 색다른 방법으로 풀어낸 부분이 인상적입니다. 가상의 빌딩을 인지시켜주는 예쁜 일러스트로 제작된 페이퍼북으로부터 시작하여 페이지를 넘기면 엘리베이터 문 팝업 페이지가 등장하여 층을 이동하는 버튼을 누를 수 있도록 화면이 연결됩니다. 전체 메뉴 UI를 엘리베이터의 ..

여러개의 페이지로 생성할만한 충분한 양의 콘텐츠가 없을 때 소량의 콘텐츠와 텍스트만으로도 멋진 웹사이트를 구현할 수 있는 원페이지형 웹사이트 21가지를 소개합니다. 원페이지 웹사이트란 접속한 전면페이지에서 스크롤 다운으로 전체 메뉴가 구성되어 별도의 페이지 이동이 없이 전체 스크롤 페이지 내에서 위치를 이동할 수 있도록 구현된 웹 페이지입니다. 원페이지 웹사이트는 콘텐츠의 양이 적어 웹사이트 내에서 머물 수 있는 요소가 적을 수 있지만, 대신 스크롤을 내리고 슬라이드를 탐험할 수 있도록 다양한 인터랙션을 적용하면 콘텐츠의 양이 많은 웹사이트보다 콘셉을 전달하고 감각을 표현하는 데에 더욱 효과적일 수 있습니다. 요즘 많은 브랜드와 기업들이 단기적인 캠페인을 홍보하거나 마이크로사이트 등으로 활용하고 있습ㄴ다..

2020년의 웹디자인 트렌드를 6가지 키워드로 살펴보았습니다. HTML5와 CSS3가 도입되면서 스크립트가 아닌 간단한 코딩으로 다양한 소스의 구현이 원활해짐에 따라 배경, 이미지, 텍스트가 각각의 요소로써 사용자의 행동에 따라 반응하는 인터랙션이 가미된 웹사이트가 늘어나고 있습니다. 감각적인 컨셉의 디자인임에도 정지된 이미지가 아닌 몇 가지 요소에 모션이 적용되어 웹상에서 더욱 생동감있는 경험을 제공하며, 이는 사용자가 인식하는 해당 브랜드의 가치를 더욱 높여줍니다. 2020 Web design TREND 1. 풀스크린 와이드 전면페이지 2. 스크롤 인터랙션 3. 로딩 아이콘 4. 볼드/컬러 텍스트 5. 스토리텔링 6. 일러스트레이션 1. 풀스크린 와이드 전면페이지 스크롤 없는 와이드형태의 전면페이지 ..