웹사이트 구축 동향. "전형적인" 스톡 사진을 피하세요. 단순한 글꼴과 부드러운 색상 팔레트
우리는 웹 디자인 트렌드를 따르고 실험합니다. 누가 뭐래도 대부분의 새로운 장치는 비즈니스에 유용합니다. 2017년이 후임에게 자리를 내줄 준비를 하면서, 이제 예비적인 예측을 해야 할 때입니다.
당신에게 달려 있지 않은 것에 대해 약속하는 것은 감사할 일이 아닙니다. 그럼에도 불구하고 우리는 내년에 웹 디자인의 10가지 핵심 영역을 강조할 것입니다. 목록은 우리 팀의 경험을 바탕으로 작성되었습니다.
평면 디자인
2017년에 디자이너와 개발자는 스마트폰과 태블릿에서 더 잘 표시되도록 깔끔하고 단순한 웹사이트를 만들었습니다. 과도한 리소스는 모바일 사용자를 겁나게 합니다. 스마트폰을 통한 트래픽이 꾸준히 증가하고 있으며, 이에 따라 웹 디자인에 대한 태도도 변화하고 있습니다. 이제 주로 모바일 장치에 맞춰진 사이트는 유행처럼 보이지 않습니다. 이러한 추세는 러시아와도 관련이 있습니다.
플랫 디자인이 2차원으로 귀결된다고 생각하지 마세요. 그것은 미니멀리즘과 실용성에 관한 것입니다. 어수선한 부분을 없애고 사이트의 중요한 요소에 집중하겠다는 철학이라고 생각하시면 됩니다. 거대한 구조로 이루어진 느린 웹사이트 뒤에는 밝은 색상, 선명한 가장자리 및 열린 공간이 신선한 공기처럼 느껴집니다.
미니멀리즘과 형태에 대한 기능의 우위는 플랫 디자인을 지루하게 만들지 않습니다. 대조되는 밝은 색상, 일러스트레이션, 단순한 이미지 및 Apple의 산세리프 글꼴 등이 함께 결합되어 눈길을 사로잡고 놀라운 뛰어난 사용자 경험을 전달합니다.
"금융 문화" 포털 블록 중 하나의 디자인
플랫 디자인은 사진에 의존하지 않으므로 로딩이 더 쉽습니다. 사이트 관리에 있어 이는 두 가지 멋진 점을 의미합니다.
- 리소스는 고객에게 메시지를 신속하게 전달합니다. 전화나 컴퓨터 등 사이트에 어떻게 액세스했는지는 중요하지 않습니다.
- 최적화된 사이트는 Google, Bing 등 검색 엔진에 더 매력적입니다.
플랫 디자인의 웹사이트는 검색 엔진에서 높은 순위를 차지할 가능성이 더 높습니다. 그리고 방문자는 페이지에 더 오래 머무는 경향이 있습니다. 이것이 바로 플랫 디자인이 인기를 얻은 이유이며 2018년에도 그 인기는 유지될 것입니다.
표현적인 타이포그래피
웹 디자이너는 사진과 복잡한 디자인 없이는 무방비 상태입니까? 아니요, 랜드마크가 방금 변경되었습니다. 2018년 타이포그래피에서는 단어 하나가 사진 천 장의 가치를 지닙니다. 이 진술을 살펴 보겠습니다.
어떤 사람들은 "타이포그래피"가 흥미로운 디자인 요소처럼 들리지 않는다고 주장합니다. 제목 글꼴이 고딕인지 모던인지, 세리프인지 산세리프인지에 따라 어떤 차이가 있나요?
모든 인쇄상의 결정은 사진뿐만 아니라 생각을 전달하고 연관성을 불러일으킬 수 있습니다.
와인 음료 제조업체 cirq의 웹사이트는 전통에 대한 충성심을 말합니다.
러시아 정부도 기술의 중요성을 이해하고 있습니다. 우리나라에서는 2022년까지 사물인터넷 기기를 위한 국가 운영체제를 만들 계획이다.
가상 현실 비디오
2017년 말쯤에는 모든 자존심 강한 웹사이트들이 소개 영상을 만든 것 같았습니다. 그것은 경이 롭다. 소비자는 서비스나 제품 뒤에 있는 사람을 보았습니다. 동시에 비디오 콘텐츠 제작을 단순화하는 서비스도 개발되었습니다.
수십년 전 가상현실(VR)은 SF로 인식됐지만 이제는 VR이 없는 파티는 상상하기 어렵다. VR이 웹디자인과 친해지려고 합니다. 360도 동영상 제작은 나날이 저렴해지고 쉬워지고 있습니다.
가상현실이 사람들에게 다가오고 있습니다. State Hermitage는 VR 형식으로 박물관의 역사에 대한 비디오를 제작했습니다. 미니 영화의 가이드는 배우 Konstantin Khabensky였습니다. 발췌 내용은 YouTube에 공개적으로 게시됩니다. 여러분도 한번 보세요.
챗봇, 인공지능, 머신러닝
우리는 봇과 더 자주 소통합니다. 아마도 이동통신사에 전화할 때 이렇게 할 것입니다. 결실을 맺으려면 수년이 걸릴 것 같았습니다. 하지만 인공지능(AI)과 머신러닝의 발전으로 그들은 점점 더 똑똑해지고 있다. 이것이 바로 Facebook이 귀하의 선호도를 잘 아는 이유이기도 합니다. 지리적 위치 데이터, 습관, 검색 정보를 사용하여 어떤 뉴스를 제공할지 파악합니다.
우리는 2018년에 이 기술의 개발을 기대하고 있지만 웹 기술에서는 그렇습니다. 고객 행동을 분석하고 고객을 위한 특별 제안을 제공하는 웹사이트를 상상해 보십시오. 인터넷을 통한 고객 서비스는 스마트 시스템 덕분에 더욱 빠르고 효율적이 됩니다. 이를 명심하십시오.
음성 사용자 인터페이스 및 검색
음성 사용자 인터페이스는 자연어 처리라고도 합니다. 간단히 말해서 음성 형태의 인간-컴퓨터 상호 작용입니다. 글쎄요, “좋아, 구글. 내 다른 양말은 어디에 있나요? 기계 학습과 결합된 이 기술은 사람이 요청을 완료하기 전에 요구 사항을 예측할 수 있습니다.
우리는 자신의 목소리를 지닌 사이트를 볼 수 있기를 바랍니다. 음성 검색도 증가하고 있습니다. 소비자는 인터페이스와 다르게 상호 작용하는 경향이 있으므로 웹 사이트에 적절한 모듈이 있는지 확인하십시오. 개인용 컴퓨터 사용자는 아마도 키보드를 사용할 것이지만 스마트폰에서 받아쓰기가 더 쉽습니다.
원활한 상호작용
이전에 소셜 네트워크 VKontakte에서 누군가가 글을 썼는지 여부를 확인하려면 페이지를 다시 로드해야 했던 것을 기억하십니까? (그러면 벽을 기억해야 합니다. 다시 돌려받고 싶다면 좋아하세요). 나중에 실시간 업데이트를 추가했습니다. 이것이 바로 우리가 원활한 상호 작용이라고 부르는 것입니다.
새해가 되면 누군가가 커피 찌꺼기로 점을 치고 슬리퍼를 어깨 위로 던집니다. 그리고 디자이너들은 미래를 탐구하고 2017년의 주요 테마가 될 트렌드를 파악하려고 노력하고 있습니다. 우리도 시도해 보세요. 우리는 취향과 '아트 디렉터가 그렇게 말했다'는 사실뿐만 아니라 분석에도 의존할 것입니다.
1. 영상은 기능적 요소이다
글이 너무 어려워서 집중하셔야 합니다. 사진은 유익하지 않습니다. 그리고 비디오는 현대 인터넷 사용자가 소비하고 즐길 수 있는 콘텐츠 유형입니다. 그리고 사용자에게 이야기(예: 복잡한 웹 사이트 개발 프로세스가 어떻게 작동하는지)를 전달할 때 이를 사용하세요. 분석가가 프로토타입을 만들고 디자이너가 모형을 그리는 방법을 촬영하고 보여줍니다. 사용자를 스토리에 몰입시키고 그들이 가질 수 있는 질문에 답하세요.
그리고 고객이 예산 내에서 놀라운 것을 요구하는 모든 곳에 비디오를 게시하지 마십시오. 뷰티를 위한 영상 - 사용자의 깨진 희망. 그는 그들이 그에게 유용한 것을 보여주고 그에게 이야기를 들려줄 것이라고 보고 희망합니다. 하지만. 따라서 유용한 기능을 수행하지 못하는 웹디자인의 장식적인 요소로 영상은 2016년에도 남는다.
예:사용자 질문에 답변하고 웹사이트 문제를 해결하는 동영상입니다.
아니요:비디오는 아름답고 모두가 그렇게 하기 때문에 배경에 있습니다.
2. 영상 대신 시네마그램
시네마그램을 사용하세요. 정적인 이미지보다 흥미롭지만, 스토리나 목적이 없는 영상처럼 사용자에게 헛된 희망을 주지는 않습니다.
주의하여! 시네마그램은 정말 끈적끈적합니다.
3. 글꼴 그래픽
비디오와 이미지의 또 다른 대안은 글꼴 그래픽입니다. 이는 사이트를 장식하고 더 많은 정보를 제공합니다. 여기서 가장 중요한 관심사는 양질의 콘텐츠입니다. 그러나 그것은 완전히 다른 이야기입니다.
4. 아이콘은 주요 장식 요소입니다.
이미 사이트에 있을 아이콘에 "와우"를 추가할 수 있다면 이미지, 비디오 및 글꼴 변형이 필요한 이유는 무엇입니까? 진지하게, 맞춤형 애니메이션을 추가하고 하루를 보내십시오. 당신은 가장 트렌디한 사람이 될 것입니다.
5. 끈적한 인포그래픽
사용자의 문제는 덜 부지런해진다는 것입니다. 그리고 금붕어처럼 건망증이 있습니다. 그들은 사이트로 갔다가 전화가 깜박이고 (오, 잘못된 경보-단지 햇빛의 반짝임) 모니터로 돌아와 그들이 여기서 무엇을했는지 기억할 수 없습니다. 그리고 그들은 떠난다.
문제는 해마다 심각해지고 있다. 따라서 디자이너의 임무는 지루한 통계라 할지라도 사용자를 유인하고 사용자가 콘텐츠와 상호 작용하도록 강요하는 것입니다. 특히 (!) 이것이 지루한 통계라면 더욱 그렇습니다.
애니메이션을 적용하고, 밝은 색상으로 칠하고, 사용자가 상호작용하도록 강제합니다. 페이지가 끝날 때까지 사용자를 끌어들이고 놓지 않도록 모든 작업을 수행합니다.
6. 통합 탐색
인기를 얻고 있는 기술(가로 및 세로 스크롤을 결합)은 사용자의 지루한 일상을 밝게 하고 관심을 갖게 하며 사이트와 사려 깊은 상호 작용을 하게 만듭니다.
7. 햄버거 메뉴 피하기
2015년과 2016년 웹 디자인 예측의 99.9%에서 저자는 올해 디자이너들이 확실히 햄버거 메뉴를 포기할 것이라고 약속했습니다. 그냥 그렇습니다. 글쎄요, 전통을 지지하고 다음과 같이 말합시다: 2017년에는 햄버거 메뉴가 유행하지 않을 것입니다. 그러지 마세요, 윽!
막대가 3개인 아이콘의 문제점은 직관적이지 않다는 것입니다. 이미 상호작용을 해본 경험이 있고 기호 뒤에 무엇이 숨겨져 있는지 알고 있는 숙련된 칼라치에 의해 인식됩니다. 그러나 아주 작은 올챙이와 노인 모두 인터넷에 더 많은 새로운 사람들이 나타나고 있습니다. 그리고 햄버거 메뉴 아이콘은 그들에게 익숙하지도 않고 이해할 수도 없습니다. 그들은 고통스러운 경험을 겪은 후에야 그녀가 무엇을 숨기고 있는지, 대체 메뉴가 어디에 있는지 알아낼 수 있다.
현실적으로 생각해 봅시다. 햄버거 메뉴를 완전히 버릴 수는 없을 것입니다. 하지만 이를 적용하기 전에 각 프로젝트에서 가능한 대안을 찾아보세요.
studio-spoon.co.jp
8. 사이트 주변의 프레임
널리 사용되는 솔루션은 전체 화면을 채우도록 사이트를 늘리는 것이 아니라 깔끔한 프레임에 배치하는 것입니다. 멋지고 탐색에 사용할 수 있는 여유 공간이 있습니다(햄버거 메뉴가 죽어가고 있으니 안 되겠습니까).
텔레타이프 온라인
9. 더 많은 이모티콘
사용자가 반응하는 데 드는 노력이 적을수록 반응하려는 의지는 더 커집니다. 그리고 그들은 이모티콘보다 더 간단한 반응을 내놓지 못했습니다. 현재 웹사이트에서는 콘텐츠에 '좋아요'만 표시할 수 있으며 최대치는 Facebook Emote를 제공하는 것입니다. 하지만 동료 디자이너 여러분, 이제는 이모티콘으로 전환해야 할 때입니다.
10. 머티리얼 디자인
예, 그는 여전히 우리와 함께 있습니다.
11. 더 많은 모바일 우선
휴대전화로 웹사이트를 보는 사용자가 점점 더 많아지고 있으며, 이것이 바로 Mobile First 접근 방식이 매년 고객들로부터 더욱 쉽게 받아들여지고 있는 이유입니다. 더 이상 이상한 실험이 아니라 그 자체를 정당화하는 방법으로 간주됩니다. 따라서 동일한 유형이지만 휴대폰에 매우 편리한 수많은 사이트에 대비하세요.
12. 더 많은 마이크로 인터랙션
웹사이트는 모바일 애플리케이션의 더 많은 기능을 흡수하게 될 것입니다. 2017년에는 손가락을 떨게 만드는 놀라운 마이크로 인터랙션이 있을 것입니다. 트위터의 하트처럼요. 예술 작품이군요! 나는 그를 영원히 누르고 싶다. Mobile First 및 클래식 프로젝트에는 이 기능이 더 많이 포함됩니다.
13. CTA는 훨씬 더 방해적입니다.
디자이너는 테이블과 드리블에서만 아름다움을 위한 아름다움을 불러일으킵니다. 다른 경우(돈을 지불하는 경우)에는 마케터가 그의 귀에 숨을 크게 쉬고 있는데, 여기에는 더 밝은 것이 필요하고 저기에는 더 큰 버튼이 필요합니다. 2016년에는 이러한 요구 사항에 대한 전환점이 있었고 재고가 있었던 것 같습니다. 2017년에는 크고 흥미로우며 눈길을 끄는 CTA 블록이 기대됩니다. 마케팅 담당자가 추가할 것이 없습니다.
strv.com
14. 80년대 향수
세련된 인터넷에서 디자이너들은 성냥개비 램프 픽셀, 셋톱박스의 8비트 사운드, 진공관 TV의 소음을 그리워합니다. 그리고 그들은 웹사이트 디자인에서 80년대와 90년대에 대한 그리움을 보상합니다. 트렌드에 맞춰 프로젝트에 산성 색상, 간섭 및 결함을 추가하세요.
Retrominder.tv
15. 스톡 사진을 피하세요
스톡 이미지는 이미 심각하게 한계에 부딪혔습니다. 햄버거 메뉴는 더 나쁘고 교체하기가 더 쉽습니다. 그럼 우리의 모습을 촬영해 볼까요?
21세기는 마당에 있다, 카몬. 휴대폰은 고품질의 사진을 찍을 수 있게 되었습니다. 그러므로 지금 당장 휴대폰으로 직원이나 업무과정을 촬영하는 것은 문제가 되지 않습니다. 가장 중요한 것은 좋은 프로젝트를 만들기 위한 시간과 열망입니다.
16. 채소
Pantone 직원들은 2017년의 색상이 작은 녹색 그리너리(Green Greenery)라고 믿습니다. 듣고 목록에 추가해 봅시다. 
17. 프로토타입 제작에 대한 새로운 접근 방식
어떤 멋진 디자인을 그리든 가장 중요한 것은 고객이 사랑에 빠지는 방식으로 표현하는 것입니다. 아니면 적어도 당신이 보는 방식으로 보았습니다.
정적 레이아웃은 이 작업을 거의 처리할 수 없으므로 2017년에는 프레젠테이션 기술을 향상해야 합니다. 그래서 고객은 레이아웃 직전에 발명된 모든 퓨퓨를 보고 마음속에 상상하지 않습니다. 그렇지 않으면 그는 자신에게 뭔가 잘못된 것을 상상하게 되고 개발자가 정당화할 수 없을 것이라는 기대를 갖게 될 것입니다.
이제 디자이너가 단순히 그림을 그리고 보여주는 것이 낯설지 않습니다. 프로토타입 도구 중 하나를 사용하여 대화형 템플릿을 만들거나 애니메이션 기술을 향상시킬 수 있어야 합니다.
동료 여러분, 내년을 위한 무기고가 여기 있습니다. 하지만 화상전화를 원하는 고객과 말다툼을 벌이지 마세요. 깔끔하고 최소한의 전자상거래가 필요한 곳에 픽셀 요소와 이모티콘을 밀어넣지 마세요. 그리고 이 기사에 대한 링크를 사용하여 Skype에서 꺼리는 고객에게 포격을 가하지 마십시오. 트렌드를 현명하게 사용하거나 전혀 사용하지 마세요. 어쨌든, 3년 후에는 완전히 업데이트될 예정입니다 :)
디지털 매체로서의 웹 디자인은 기존의 인쇄 매체에 비해 기술 변화에 훨씬 더 민감합니다. 놀라운 점은 디자이너들이 계속해서 점점 더 많은 기술적 문제를 해결하면서 사용자 친화적이고 명확하며 혁신적이고 기업 아이덴티티와 호환되며 상상할 수 있는 모든 장치에 적용 가능하고 아름다운 사이트를 만드는 방법입니다.
2017년에는 모바일 장치의 사용 증가가 마침내 콘텐츠 다운로드 및 시청 측면에서 데스크톱 컴퓨터를 추월하는 등 많은 발전이 있었습니다. 이는 2018년에는 이전과는 전혀 다른 방식으로 모바일 기능을 사용할 것이며 데스크톱 장치는 관련성을 유지하기 위해 발전해야 한다는 것을 의미합니다. 이 모든 것을 염두에 두고 유비쿼터스화될 주목할 만한 웹 디자인 트렌드를 살펴보겠습니다.
그림자의 사용은 새로운 것이 아닙니다. 그런데 왜 언급했습니까? 이 기술은 디자인 측면에서 오랫동안 전통적이었음에도 불구하고 오늘날 브라우저의 발전 덕분에 이전에는 존재하지 않았던 흥미로운 변형을 볼 수 있습니다. 그리드 및 시차 레이아웃을 사용하면 훨씬 더 넓은 범위의 그림자를 가지고 놀 수 있으며 화면 뒤에 존재하는 세계의 환상을 만들 수 있습니다. 이는 최근 몇 년간 유행하고 있는 트렌드인 (플랫 디자인)에 대한 직접적인 반응이다.
그림자는 페이지의 미학을 더 높은 수준으로 끌어올릴 뿐만 아니라 액센트를 사용하여 사용자 경험(UX)의 유동성에 기여하는 등 놀라울 정도로 다재다능한 효과를 만들어냅니다. 예를 들어, 링크를 나타내기 위해 마우스 오버 상태에서 부드럽고 미묘한 그림자를 사용하는 것은 새로운 아이디어는 아니지만 위의 예에서와 같이 생생한 색상 그라데이션(자세한 내용은 아래 참조)과 결합하면 그림자의 3D 효과가 향상됩니다.
2018년은 확실히 매우 밝은 색상의 해입니다. 과거에는 많은 브랜드와 디자이너가 "웹에 안전한" 색상을 고수했지만, 오늘날 많은 사람들이 헤드라인을 채도가 높은 밝은 색조로 접근하고 채색하는 것뿐만 아니라 기울어진 선과 각도(단순한 수평 대신)로 글자를 결합하는 데 더욱 대담해지고 있습니다. 양식). 이는 부분적으로 더 풍부한 색상을 생성할 수 있는 기술적으로 더 발전된 모니터와 장치 화면 때문입니다. 대담하고 상충되는 색상은 방문자의 관심을 즉각적으로 사로잡기를 원하는 새로운 브랜드에 유용할 수 있지만 "웹에 안전"하고 전통적인 모든 것에서 자신을 차별화하려는 기업에도 이상적입니다.
일러스트레이션은 사이트에 재미 요소를 추가하는 재미있고, 재미있고, 친근한 이미지를 만드는 놀랍도록 다재다능한 방법입니다. 숙련된 아티스트는 개인적인 의미가 가득한 일러스트레이션을 제시하고 브랜드 메시지의 구체적인 내용을 고려합니다. 이것이 바로 오늘날 경쟁이 치열한 시장에서 모두가 노력하는 것입니다.
이러한 추세는 재미와 에너지와 관련된 비즈니스에 이상적일 뿐만 아니라 "진지한" 기업이 고객에게 더 가까이 다가가는 데에도 도움이 됩니다.
이 스타일로 랜딩 페이지를 만들고 싶지만 아직 강력한 디자이너가 없다면 다음에서 미리 만들어진 템플릿이나 섹션을 사용할 수 있습니다.
언제든지 당사 디자이너로부터 맞춤형 랜딩 페이지를 주문할 수도 있습니다. 완성된 작품 예시 보기 .
입자 배경은 삽입된 비디오로 인해 느린 로딩 문제가 발생하는 사이트를 위한 훌륭한 솔루션입니다. 문제의 애니메이션은 백그라운드에서 자연스러운 움직임을 생성하는 가볍고 빠르게 로드되는 자바스크립트입니다.
사진 한 장이 천 단어를 말해준다고 하는데, 이는 의심할 여지 없이 사실입니다. 또한, 움직이는 부분이 있는 배경은 눈길을 사로잡아 브랜드가 단 몇 초 만에 기억에 남는 인상을 남길 수 있습니다. 모션 그래픽은 관심 있는 리드를 랜딩 페이지로 유도하면서 소셜 미디어에서 점점 더 인기를 얻고 있습니다.
5.모바일 우선
이미 언급했듯이 모바일 세계가 데스크톱 세계를 지배하기 시작했습니다. 우리 중 거의 모든 사람이 매장에 가서 스마트폰으로 주문을 합니다. 이는 한때 사용자가 채택하는 데 시간이 많이 소요되는 번거로운 프로세스였습니다. 디자이너들은 작은 화면에 일반 메뉴, 하위 메뉴 및 하위 하위 메뉴가 있는지 어떻게 확인할 수 있는지에 대해 고민했습니다.
하지만 이제 모바일 디자인은 더욱 성숙해졌습니다. 팝업 메뉴가 나타나며, 메뉴를 작게 만드는 것이 가능해졌습니다. 모바일에서 크고 아름다운 사진을 포기해야 했을 수도 있지만, 아이콘은 훨씬 더 공간 효율적이게 되었고, 이제 아이콘은 너무나 흔해져서 사용자는 거의 모든 사진의 의미를 이해할 수 있습니다. UX 문제는 마이크로 인터랙션을 통해 더 쉽게 식별하고 수정할 수 있으며 사용자 행동에 대한 즉각적인 피드백을 얻을 수 있습니다.
6. 크고 굵은 글꼴
Google Fonts 컬렉션의 모든 글꼴을 시각적 갤러리에 추가했으며, 적절한 글꼴을 선택하고 연결 버튼을 클릭한 후 랜딩 페이지의 새 텍스트나 기존 텍스트에 사용하기만 하면 됩니다.
2017년 가장 주목할만한 혁신 중 하나는 비대칭적이고 비전통적인 "조각화된" 레이아웃(레이아웃)의 출현이었으며 이러한 추세는 2018년에도 여전히 유효할 것입니다. 비대칭 레이아웃의 매력은 독창성, 특수성 및 다소 실험성에 있습니다.
콘텐츠가 많은 기업은 여전히 전통적인 그리드 구조에 의존하고 있지만 기업이 나머지 환경과 차별화되는 고유한 경험을 제공하기 위해 점점 더 노력함에 따라 특이한 레이아웃이 더 보편화될 것으로 예상할 수 있습니다. 일반적으로 전통적인 회사는 이러한 미학에 관심이 없지만 위험을 감수하려는 대형 브랜드는 디자이너가 고정관념에서 벗어나 생각하기를 기대합니다.
8. 통합 애니메이션
브라우저 기술이 발전함에 따라 점점 더 많은 사이트가 정적인 이미지에서 벗어나 애니메이션과 같이 사용자의 참여를 유도할 수 있는 새로운 방법을 찾고 있습니다. 앞서 언급한 배경의 개별 부분에 대한 애니메이션과 달리 작은 애니메이션 조각은 전체 페이지 경험을 통해 시청자의 참여를 유도합니다. 예를 들어 페이지가 로드되는 동안 사용할 수 있는 그래픽에 애니메이션을 적용하거나 강조 표시된 링크 상태에 대한 흥미로운 디자인을 만들 수 있습니다. 애니메이션 요소는 스크롤, 탐색에 통합될 수도 있고 전체 사이트의 중심이 될 수도 있습니다.
애니메이션은 사이트 스토리에 사용자를 포함시키는 좋은 방법으로, 사용자는 묘사된 캐릭터에서 자신(및 고객으로서의 잠재적인 미래)을 볼 수 있습니다. 추상적이고 재미있는 시각적 매체로서만 애니메이션에 관심이 있더라도 방문자에게 의미 있는 경험을 선사할 수 있습니다.
이제 그라데이션이 크고 눈에 띄며 밝아졌습니다. 최신 버전 중 가장 인기 있는 것은 그라디언트 사진 필터입니다. 이는 지루한 이미지를 더욱 흥미롭게 만드는 좋은 방법입니다. 다른 사진이 없다면 단순한 그라데이션 배경도 트렌드에 어울리는 완벽한 솔루션이 될 수 있습니다.
2018년 트렌드
밝은 색상, 대담한 그라데이션 및 애니메이션... 내년은 웹 디자인 역사상 가장 흥미롭고 기억에 남는 해가 될 것입니다. 디자이너들이 어떻게 이것을 현실화하고 한계를 뛰어넘을지 기대됩니다. 결국 약 사용자에게 훌륭한 UX를 제공하려면 트렌드에 항상 열려 있어야 합니다.
2016년에는 많은 기업이 웹사이트를 재설계하여 탐색 옵션 수를 줄였습니다. 이러한 추세는 2017년에도 계속될 것이다.
이전에 5~7개의 옵션이 포함되었던 페이지 헤더 메뉴는 이제 3~4개의 옵션을 제공합니다.
옵션이 적으면 사용자가 필요한 정보를 더 쉽게 찾을 수 있고 '선택 마비'를 피할 수 있습니다.
새로운 접근 방식의 좋은 예는 이케아(Ikea)입니다. 아래 스크린샷에서 회사 웹사이트의 이전 버전과 새 버전을 비교할 수 있습니다.
구 버전:
2016년에 출시된 새 버전:
- 햄버거 메뉴 거부
햄버거 메뉴는 사용자에게 사이트나 애플리케이션의 깊이에 대한 정보를 제공하지 않습니다. 그 결과, 그는 계속 방향 감각을 잃습니다.
Spotify는 이미 앱에서 햄버거 메뉴를 포기했습니다. 2017년에는 더 많은 기업이 그의 모범을 따를 것입니다.
- 이중톤
이중톤을 사용하면 웹사이트 디자인이 미니멀해지고 사용자의 주의가 메인 메시지나 탐색에 계속 집중될 수 있습니다.
2017년에는 풀컬러 배경 대신 듀오톤 활용이 더욱 활발해질 것으로 예상됩니다.
- 촉각 디자인
시차 스크롤의 단점은 페이지 로딩 속도가 느려진다는 것입니다.
2016년에는 애니메이션이 유망한 트렌드로 여겨졌습니다. 그러나 올해 개발자들의 초점은 성능에 맞춰져 있습니다. 이러한 관점에서 시차 스크롤링은 가장 최적의 솔루션이 아닙니다.
- 의미 있는 행동
머티리얼 디자인의 핵심 원칙 중 하나는 '의미 있는 행동'입니다. 구글은 그렇다고 믿는다 "행동은 반드시 의미 있고 적절하며 관심을 끌고 연속성을 유지하는 데 도움이 됩니다.".
Tumblr 앱은 이 원칙의 좋은 예입니다. 2016년 애니메이션 부문 머티리얼 디자인 어워드(Material Design Award)를 수상했습니다.
- 품질이 낮은 스톡 이미지를 피하세요
회사 웹사이트는 사용자가 상호 작용하고 비즈니스 가치를 반영하도록 유도해야 합니다. 더 이상 품질이 낮고 지루한 스톡 이미지를 위한 공간은 없습니다. 이와 같이:
- 더 적은 수의 앱, 더 많은 PWA
PWA(Progressive Web Apps) 기술을 사용하면 웹사이트가 애플리케이션처럼 작동할 수 있습니다. 오프라인도 포함됩니다. The Washington Post, Airberlin 및 Flipkart와 같은 대규모 출판물 및 회사에서는 이미 사용하고 있습니다. 올해는 이 기술의 인기가 높아질 것입니다.
- 구글 글꼴
구글은 2010년에 오픈소스 글꼴 라이브러리를 만들었습니다. 2016년에는 머티리얼 디자인 작업을 계속하면서 Google Fonts 서비스도 개선했습니다. 결과적으로 글꼴 미리보기가 더 빨라지고 사용자 정의가 더 쉬워졌습니다. 추천 섹션에는 머티리얼 디자인과 잘 어울리는 글꼴이 포함되어 있습니다.
2017년에는 더 많은 웹 디자이너가 Google 글꼴을 사용하게 될 것입니다.
- 미니멀리즘
이러한 추세는 위에서 언급한 다른 많은 추세를 결합합니다. 미니멀리즘은 성능(속도)과 사용성에 중점을 둔다는 의미입니다. 이 접근 방식에서는 타이포그래피, 대비 및 공간이 중요한 역할을 합니다.
인포그래픽 디자인 서비스 Venngage의 콘텐츠 편집자인 Ryan McCready가 현재 그래픽 디자인에서 무엇이 인기 있고 올해에는 어떤 기술이 버려졌는지에 대해 이야기합니다.
대담하고 생생한 색상
지난 몇 년 동안 많은 기술 리더들은 조용하고 읽기 쉬운 색상을 사용해 왔습니다. 그래서 그들은 매우 명확한 디자인 계획을 만들고 공상 과학 영화에서 흔히 볼 수 있는 우아하고 기능적인 미래가 이미 도래했음을 보여 주려고 노력했습니다.
이 방법은 회사가 새로운 개발 단계로 이동하고 모든 애플리케이션을 하나의 색상으로 통합하는 데 도움이 되었습니다. Spotify와 마찬가지로 밝은 색상을 대담하게 사용하여 브랜드를 돋보이게 만들었습니다.
디자인에 있어서 대담하고 밝은 색상의 유행은 Google의 머티리얼 디자인 원칙에서 비롯됩니다. 회사는 "예상치 못한 활력 넘치는 색상은 물론 기능적이고 눈을 즐겁게 하는 글꼴과 이미지"를 추가하여 평면적이고 유선형이며 직관적인 디자인을 선택했습니다.
일반적으로 2017년 현재의 많은 트렌드는 Google의 머티리얼 디자인 원칙의 영향으로 나타났습니다.
이번 전자책 홍보 이미지 제작에도 활용했습니다. 그 결과 해당 이미지는 엄청나게 인기를 끌었습니다.
디자인에 가장 적합한 색상을 선택하는 데 어려움이 있다면 색상 팔레트의 몇 가지 훌륭한 예를 읽어보세요. 그리고 서로 대조되는 색상을 사용하는 것을 두려워하지 마십시오.
볼드체
굵은 글꼴이 독자의 관심을 끕니다. 당신은 크고 눈길을 끄는 비문에 무의식적으로주의를 기울입니다.
제가 가장 좋아하는 예는 Wired입니다. 다양한 글꼴을 사용하여 특정 제목을 강조 표시하고 페이지 정보의 계층적 순서를 유지합니다.
한번 살펴보세요:
눈길을 끄는 글꼴을 사용하는 또 다른 좋은 예는 HubSpot입니다. 텍스트는 전경에 있으며 그래픽으로 지원됩니다.
HubSpot은 매년 트윗에서 정보를 흡수하는 데 걸리는 시간이 0이 되는 경향이 있다는 것을 알고 있습니다. 따라서 독자의 관심을 끌기 위해 굵은 글씨로 짧고 간결한 비문을 사용합니다.
게다가 이제 점점 더 많은 사람들이 휴대폰으로 인터넷을 서핑하고 있습니다. 고화질 화면으로 인해 굵은 글꼴을 사용할 필요성이 점점 더 커지고 있습니다. 따라서 독자를 유지하려면 콘텐츠를 올바른 방식으로 전달해야 합니다.
버퍼는 처음 부분뿐만 아니라 기사 전체에 걸쳐 헤드라인을 강조 표시하므로 모든 장치에서 기사를 더 쉽게 읽을 수 있습니다. 긴 기사에는 이 접근 방식을 사용하는 것이 좋습니다. 이렇게 하면 독자가 기사를 탐색하는 데 도움이 됩니다.
이 인포그래픽을 만들 때 이 방법을 적용했습니다. 볼드한 폰트와 흥미로운 컬러의 조합이 눈길을 끕니다.
Google Fonts의 글꼴
저는 Google Fonts가 매우 다재다능하기 때문에 오랫동안 사용해 왔습니다. 온라인 출판물을 위한 디자인을 구상하고 이를 프리젠테이션에 추가해야 한다면 모든 글꼴이 서로 잘 어울릴 것이라고 확신합니다. 모든 블로그 플랫폼이나 웹사이트에서 모두 멋지게 보입니다.
그건 그렇고, 810개 글꼴 모두가 완전 무료입니다! 아, 그렇죠, 사람들은 공짜를 좋아해요. 그들은 또한 사용하기 매우 쉬운 것을 좋아합니다. 다음은 Google에서 인기 있는 여러 글꼴을 결합한 예입니다.
우리 웹사이트에서는 Roboto 및 Open Sans 글꼴을 사용합니다.
원본 사진
고품질 이미지에 대한 요구와 마찬가지로 콘텐츠의 양도 매년 증가하고 있습니다. 사진이 오랫동안 지속될 수 있도록 저자는 사진을 최대한 다양하게 만들려고 노력합니다.
단 한 가지 문제가 있습니다. 최고의 일반 이미지는 시간이 지나면서 낡아지는 경향이 있습니다. 기술 및 마케팅 분야의 뉴스를 팔로우한다면 아마도 다음 사진에 익숙할 것입니다.
랜딩 페이지, 블로그, 심지어 인스타그램 게시물에도 사용됩니다. 솔직히 말해서 몇 년 전에 작업했던 사이트를 위해 제가 직접 가져왔습니다. 이러한 스톡 이미지의 인기로 인해 그래픽 콘텐츠의 독창성은 급격히 떨어졌습니다.
그리고 선명하고 완벽한 사진을 사용해야 한다는 요구는 상황을 더욱 악화시킬 뿐입니다.
독자가 같은 사진을 100번째 보면 그 기사의 저자가 최소한 조금도 독창적이려고 노력하지 않았다고 생각합니다. 그렇다면 왜 그런 기사를 읽었습니까?
그렇기 때문에 원본 이미지를 사용해야 합니다. 인기 있는 사진을 찍는 것을 멈추고 나만의 사진을 만들어보세요.
나는 당신의 팀원 모두가 카메라폰을 가지고 있다고 확신합니다. 왜 사용하지 않습니까? 사무실이나 로고 사진을 찍어서 사용하세요.
동료 중에 사진작가 지망생이 있는지 알아보세요. 그에게 사무실을 빌릴 수 있도록 며칠만 주면 일년 내내 충분한 사진을 찍을 수 있습니다!
우리는 새 웹사이트를 만들면서 직원들의 사진을 찍었고 그 결과에 매우 만족했습니다.
손으로 그린 이미지와 아이콘
사진뿐만 아니라 아이콘과 그림도 원본이어야 합니다. 일부 브랜드는 이미 이를 깨닫고 이런 방식으로 군중 속에서 눈에 띄려고 노력하고 있습니다. 이 접근 방식은 디자인에 개인적이고 재미있는 요소를 추가합니다.
어떤 사람들은 이러한 트렌드가 비전문적이고 유치해 보인다고 말하지만, 여전히 눈길을 끄는 것은 분명합니다. 2017년 대부분의 트렌드와 마찬가지로 최근 몇 년간의 무균 클린 디자인에 대한 대안으로 작용합니다.
Dropbox는 전체적으로 손으로 그린 그림을 사용합니다. 그들은 회사 브랜드의 일부가 되었고 알아볼 수 있게 되었습니다.
이러한 그림은 편안한 분위기를 조성하고 우리 각자의 영혼 속에 사는 아이를 기쁘게 합니다. 그들은 제품을 더 저렴하게 보이게 만듭니다. 특히 Dropbox와 같은 대규모 기술 회사에서 효과적입니다.
이 접근 방식의 또 다른 성공적인 예는 매트리스 회사인 Casper입니다. 그녀의 사이트 전체는 거의 손으로 그린 그림으로 구성되어 있습니다. 다음은 그중 하나입니다.
이러한 추세는 MailChimp 서비스에서도 포착되었습니다. 2016년 보고서에서도 비슷한 그림을 보여준다.
마케팅 소프트웨어를 개발하는 회사인 Moz는 기사 헤더에 그림을 삽입합니다.
때때로 그림에 대한 우리의 사랑은 다른 프로젝트에서도 드러납니다.
미니멀리즘의 뿌리로 돌아가다
낯선 사람에게 미니멀리즘이 무엇인지 설명하라고 하면 아마도 기능성을 위해 장식성을 포기해야 할 때라고 대답할 것입니다. 검정색, 회색, 흰색 음영으로 구성된 중성 색상 팔레트가 즉시 떠오를 것입니다.
지루한 흑백 배색이 진정한 미니멀리즘 정신을 대체한 것 같습니다. 모바일 기기의 작은 화면 크기와 낮은 전력 소모를 보완하기 위해 일부러 이런 조치를 취한 것으로 보인다.
하지만 2017년에는 모든 것이 바뀔 것이다. 미니멀리즘은 진정한 모습으로 돌아올 것이다. 즉, 색상이 더 많아진다는 의미입니다. 요즘 모바일 장치는 컴퓨터만큼 강력하며 일부 장치는 더 나은 화면을 갖추고 있습니다.
제가 가장 좋아하는 미니멀리스트 디자인의 예는 미디엄 플랫폼 로고입니다. 제작자는 여러 가지 색상을 결합하면서도 여전히 미니멀한 스타일을 유지할 수 있었습니다.
Google은 미니멀리즘과 밝은 색상의 조합을 위해 또 다른 로고 디자인을 변경했습니다. 많은 새로운 트렌드 출현의 촉매제 역할을 한 것이 바로 이 회사라는 점은 주목할 만합니다. 디자이너들은 글꼴을 약간 다듬고 제가 정말 좋아하는 새로운 G 모양의 로고 모양을 도입했습니다.
이 모든 것에는 미니멀리즘 정신이 느껴지지만 언론은 이에 대해 글을 쓰지 않았습니다. 사람들은 진정한 미니멀리즘이 무엇인지 잊어버렸습니다. 로고가 무색이 아니고 단일한 형태로 만들어져 있어서 미니멀한 스타일로 만들어졌다고는 누구도 생각하지 못했습니다.
새로운 로고는 미니멀한 느낌을 유지하면서도 밝고 시선을 사로잡았습니다. 리디자인 이후 주변 사람들은 다른 면에서 예전처럼 구글을 모방하기 시작했다.
우리는 블로그 디자인에 좀 더 미니멀한 스타일을 사용하기 시작했습니다.
심플한 이미지 디자인으로 필요한 정보를 쉽게 전달합니다.
GIF 사용
모든 사람(음, 거의 모든 사람)이 GIF를 좋아합니다. 때로는 문자보다 감정을 더 잘 전달할 수 있기 때문에 대화에 도움이 됩니다.
또한 재생에는 특별한 프로그램이 필요하지 않습니다. GIF는 일반적으로 크기가 작으며 거의 모든 곳에 삽입할 수 있습니다.
특히 페이지 로드 시간과 트래픽을 줄이려는 경우에는 비디오나 이미지보다 낫습니다. 저는 GIF의 다양성이 GIF를 더욱 유용한 디자인 요소로 만든다고 믿습니다.
나는 기사 헤더에 gif를 넣는 것을 정말 좋아합니다. 거기에 지루한 스톡 이미지를 넣는 대신 몇 분만 시간을 내어 이와 같은 GIF를 만들어 보세요.
이를 위해 특별한 창의적인 노력을 기울일 필요는 없지만 소셜 네트워크에서 귀하의 게시물에 확실히 관심을 끌 것입니다. 기사 헤더에 GIF를 사용하는 또 다른 좋은 예는 다음과 같습니다.
2색 이미지
이는 일반적으로 하나의 이미지에서 매우 밝거나 대비되는 두 가지 색상의 조합입니다. 그러한 이미지를 만들려면 디자인 기술을 활용해야 하지만 그만한 가치가 있습니다.
매우 숙련된 디자이너만이 이렇게 아름다운 2색 사진을 만들 수 있습니다. 나는 이와 같은 것을 만들 수 없다고 확신합니다. 하지만 그렇다고 해서 이 기술을 디자인 계획에서 제외해야 한다는 의미는 아닙니다.
