웹디자인 트렌드 참고 사이트 5 IT업계, 웹 디자이너, UI/UX 분야에 종사하고 계신 분들이라면 웹디자인 트렌드에 항상 민감하게 반응하고 계실텐데요. 제가 참고하고 생각날 때 마다 검색해보는 웹디자인 트렌드 참고할만한 사이트 5가지를 소개해드립니다. 1. themeforest(envato market) 테마 포레스트, 씸포레스트, 엔바토마켓 등으로 불리우는 세계적으로 유명한 디자인 템플릿 소스 사이트입니다. 저는 워드프레스 사이트 제작을 위해 방문했다가 다양한 디자인 소스들에 매료되어 업데이트되는 최신 소스들을 검색하곤 합니다. 가끔 유튜브 추천 동영상으로 이 envato market에서 소개하는 최신 템플릿 소스 영상이 뜨기도 할 만큼 워낙 대형 플랫폼이고 사용자 규모가 크다 보니 실시간으로 업데이..

동영상이 재생되는 듯한 스크롤 이펙트 패럴랙스 사이트 5 애플의 신제품 홍보 페이지에서의 동영상과 같은 화려한 스크롤 인터랙션을 많이 경험해보셨을텐데요, 웹 프론트엔드 개발을 디자인과 결합하는 영역의 선구자라고도 할 수 있는 애플의 이러한 인터랙션 디자인은 최근 국내외 사이트에서 많은 적용 사례를 확인해볼 수 있습니다. 이제는 웹디자인 트렌드에서 빠질 수 없는 기술과 디자인의 결합이라고도 할 수 있습니다. 고도의 개발 기술을 요하는 인터랙션 디자인 예제를 가득 확인할 수 있는 멋진 사이트 5가지의 사례를 준비했습니다. 스크롤을 내릴수록 마치 한 편의 동영상이 재생되는 듯한 화려한 인터랙션을 확인할 수 있는 스크롤 이펙트 패럴랙스 디자인의 사이트를 소개합니다. 1. FLOEMA floema 주얼리 브랜드 ..

프로페셔널해 보이는 웹디자인을 위한 부가적 요소 몇 가지 웹디자인에 간단한 인터랙션을 조금만 더하면 프로페셔널해 보이는 몇 가지 요소들이 있습니다. 작은 효과들로 내 사이트를 풍성한 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..

behance 사이트에서 디자인 트렌드를 서치하시나요? 그렇다면 메인에 뜬 추천 디자인이나 검색을 통한 추천디자인만 보고 계시지는 않나요? 비핸스 사이트에서 국가별 최신 디자인 트렌드를 확인할 수 있는 방법을 알려드립니다. behance에서 국가별 최신 디자인 트렌드 확인하는 방법 비핸스(비한스) 메인 페이지에는 알고리즘을 통한 추천 포트폴리오가 굿디자인 위주로 리스팅 됩니다. 검색을 해도 키워드에 최적화된 포트폴리오가 최신순이 아닌 상태로 필터링 되는데요, 검색 하단의 필터 셀렉트 박스에서 Location > Country / Region 및 City 를 선택하면 해당 국가와 도시에 업로드된 포트폴리오를 확인할 수 있습니다. 특정 지역을 대상으로 하니 해당 지역 또는 국가의 트렌드를 확인해볼 수 있다는..

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

behance에서 해외 디자이너들의 유려한 웹디자인 포트폴리오를 보면 화려한 인터랙션이 마치 모션그래픽처럼 멋지게 첨부되어있는 것을 볼 수 있습니다. App UI/UX 포트폴리오의 경우 프로토타입 툴을 이용해 동영상을 제작하기도 하지만, 웹디자인 포트폴리오는 퍼블리싱된 사이트에서 화면 녹화만으로도 깔끔하게 gif를 제작할 수 있습니다. 웹 포트폴리오 제작에 유용한 웹 화면 녹화를 통해 gif 만드는 방법 두 가지와 gif 저용량으로 변환하는 방법을 소개합니다. 1. 윈도우 화면 녹화 기능 사용하여 녹화하기 window key + G 윈도우 운영체제에서 Xbox Game center를 통해 자체 화면 녹화 기능을 제공하고 있습니다. window key + G 단축키를 통해 컴퓨터 화면을 녹화할 수 있습니다..

지금까지는 깃허브를 사용하지 않다가 우연히 오늘 깃허브를 가입하게 되었습니다. 내부에 개발자가 있는 팀에서 근무를 할 때 웹개발자분은 깃허브를 유료로 개인사용하고 있었는데, 배워야지 하면서도 늘 미뤄두었던 것 중 하나였지요. 문득 자바스크립트 라이브러리를 검색하러 codepen에 들어갔다가 여러 템플릿을 확인하려면 로그인하라고 뜨기에 회원가입하려는데 '깃허브로 로그인하기'가 눈에 띄었습니다. 깃허브의 계정 정보로 두가지 다 이용할 수 있다고 하기에 깃허브에 가입을 하러 들어갔어요. 깃허브는 그 특유의 고양이 캐릭터가 귀엽다고 생각했는데 개발 관련 서비스 답게 개발자들의 소스코드 작성 창과 우주 그래픽을 활용하여 독특한 그래픽 UI를 연출하고 있었습니다. 회원가입 절차를 밟으려는데 회원가입 플로우의 UX가..

그래픽 디자인에서 세리프 폰트가 트렌드라는 것은 이미 의심할 필요 없는 사실이죠. 기존의 정형화된 세리프 폰트에서 다양한 곡선으로 변화된 디자인은 각각의 특성을 가지고 서로 다른 감성을 표현합니다. 각각의 개성이 뚜렷하지만 본질적인 세리프 폰트의 '신뢰', '권위', '전통적인'과 같은 의미는 그대로 유지하고 있습니다. 트렌디한 브랜딩에 도움이 될만한 세리프 폰트 9개의 리스트를 공유합니다. 약간의 변형과 추가 도형을 얹어 로고디자인을 바로 해도 손색이 없겠네요. 9개 폰트 중 일부는 100% 무료이지만, 일부는 Personal use only 입니다. 각 폰트 제작자의 라이센스를 참고 바랍니다. Derivia 100% free font download Coconat free for personal us..

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

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