brunch

매거진 디자인 뉴스레터 디독

라이킷 383 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김자유 Nov 02. 2018

2019 웹 디자인 트렌드

1.Drop shadow와 Depth

그림자를 사용하는 건 이미 구식인데, 왜 이게 키워드일까?

비록 그림자가 오랜 시간동안 웹 디자인에서 중요한 요소이긴 했지만 웹 브라우저 발전으로 인해 사람들은 마침내 몇 가지 흥미로운 변형을 보게된다. 대부분의 매체에서 가장 문제가 되는 디자인 과제 중 하나는 3차원을 사용할 수 없을 때 depth를 만드는 것이다.

flat designs이 지루하고 단조로울 수 있으니, 이 문제를 방지하기 위해, 페이지 밖으로 튀어나오는 디자인을 만드는 것이 우리의 일이다. 몇 년 동안, 디자이너들은 drop shadow라고 불리는 기본 기술을 사용해서 깊이를 만들어왔다.

drop shadow는 물체나 유형처럼 디자인 요소 뒤의 가짜 그림자를 배치했다. 가짜 그림자는 사실적인 그림자처럼 보이기 위해 다양한 강도와 부드러움을 만든다. 그림자를 쓰는 것은 단지 웹 페이지의 미학 뿐만 아니라 이 기술을 사용하면 디자인 요소가 페이지 위에 떠 있는 것 처럼 보이고, 튀어나와 추가로 주의를 끌 수 있다.

하지만, 그리드와 페럴렉스 레이아웃과 함께, 웹 디자이너들은 이제 깊이를 만든다기 보다 그림자를 더 재미있게 보면서 화면을 넘어선 세계의 환상을 즐기고 있다. 최근 몇 년 동안 널리 인기있었던 flat 디자인 트렌드에 대항하는 반응일 수도 있다.

쉐도우를 사용하는 것은 웹 페이지의 미학뿐만 아니라 강조되어 User Experience (UX)에 도움되는 매우 다양한 영향을 준다. 예를 들어, 부드러운 그림자들은 사실 새로운 개념은 아니다. 선명한 색깔의 그라디언트를 사용해서 섞으면 그림자에 풍부한 입체 효과를 준다.

2.모바일 친화 버전

스마트폰 브라우저는 이제 공식적으로 데스크탑 컴퓨터들을 능가한다. 오늘날 많은 사람들은 스마트폰을 사용하려고 산다. 하지만 10년 전만해도, 모바일 디자인은 누구나 할 수 있는 일은 아니었다. 디자이너들은 더 혼란스러워했다. : 어떻게 하면 화면 위에서 서브메뉴에 함께 좋은 메뉴와 서브메뉴를 정확하게 얻을 수 있을까?

이제 훌륭한 스마트폰 덕분에, UI design은 발전해왔다. 심지어 rollout burger도 이젠 표준이 되어서, 화면에 있는 아이콘이 눌러야 메뉴가 나온다. 아이콘을 사용하면 크고, 멋진 이미지를 버려야 할 수도 있다. 그러나 아이콘은 공간과 관련해서 훨씬 효율적이고, 이미 널리 퍼져있어서 사용자는 그들이 의미하는 바를 이해하는데 아무 문제가 없다. UX문제는 이전보다 인지하고 수정하기가 더 쉬워졌다.

3.크고 굵은 타이포그래피

타이포그래피는 더 가독성 높고 매력적인 요소가 됐다. 게다가, 효과적인 타이포그래피는 두가지 중요한 목표를 해낸다.

a) 적절한 환경을 만들고 사용자가 사이트를 신뢰할 수 있게 한다.

b) 방문자가 서비스나 정보에 관심을 갖도록 하는 근본적인 메시지를 전달할 수 있게 한다.

텍스트가 방문객과 정확하고 직접적으로 커뮤니케이션하는 가장 효율적인 수단이기 때문에 타이포그래피의 힘을 과소평가해서는 안된다. 타이포그래피는 중요한 정보를 퍼뜨리면서 특징을 만들고, 감정을 이끌어내고, 웹사이트의 톤을 결정할 수 있는 종합적인 시각적 도구다. 기기의 해상도는 더 선명해지고 검색이 용이하기 때문에 글꼴 패턴 사용이 크게 증가할 것으로 예상된다.

인터넷 익스플로어 외에도 대부분의 브라우져들은 웹 브라우져용 CSS을 통해 작동할 수 있는 손으로 만든 서체를 권장할 수 있다. 대문자의 시대에서, 산 세리프와 세리프 제목은 선명한 대조를 이루고 UX를 향상시키며 사용자가 웹사이트를 계속 읽게한다. 웹 페이지에서 제목은 검색 엔진에 적합한 요소가 되고, 독자의 시선을 사로잡는데 도움이 된다.

2019년에는, 타이포그래피를 활용한 제목으로 구성한 웹 페이지 덕에 눈이 즐거울 것이다.

4.감정을 이끌어내고 전달하는 디자인

이런 웹사이트는 조언을 해주는 대신 기업, 서비스, 제품과 그들이 진정한 방법으로 반영하는 조직에 대한 관심을 전달하려고 한다.

감성 인터페이스 디자인 : 정렬적인 소비자로 들어가는 게이트웨이 - 감정이 뛰어난 능력을 가진 디자이너들의 경향 조사

난 그 실험이 마음에 들었고, 검색 엔진 최적화에 유용하다는 것을 발견했다. 사용자가 웹사이트에서 감정적으로 갇히면 다음과 같은 이점이 있다 :

• 공유

• 콘텐츠 제공

• 공헌

• 링크

• 신뢰성 유지

• 친밀감

• 추가 페이지 브라우져

이 모든 것에는 실현가능한 메인의 SEO(*검색엔진최적화) 에서 직접적인 또는 간접적인 효과가 있다.

5.하이퍼링크를 활용한 인포그래픽

인포그래픽 링크 미끼가 유행이다. 재미있는 부분은 1페니도 지불하지 않으면서 많은 일을 할 수 있고, 약간의 돈을 건다면 끝없는 실험을 할 수 있다는 것이다. 이게 왜 중요할까? 사람들은 여전히 인포그래픽을 좋아하기 때문이다.

통계는 출처에 따라 다를 수 있지만, 우리 모두 인포그래픽이 소셜 미디어에서 더 많이 공유되기 때문에 블로그 게시물보다 더 많은 사람들을 끌어들인다는 데에 동의한다. 소셜 미디어를 강타할 아름다운 인포그래픽을 만드는데 도움이 되는 많은 툴들이 있다.

가장 좋은 점은 인포그래픽을 만듦으로써 블로거들이 조회수, 관심, 링크들을 가져오고 이익을 얻을 수 있다는 것이다. 만약 그것이 잘 작동한다면, 인포그래픽은 설득력이 있다는 뜻이다; 그럼 당신은 하이퍼링크를 가져오려 안간힘을 쓰게 될 것이다.

6.AMP(가속 모바일 페이지)

AMP: AMP는 매력적이고 부드럽고 사용자가 거의 즉시 로드할 수 있는 웹페이지를 만들기 위한 단순한 방법을 제공하는 오픈소스 라이브러리. AMP 페이지는 링크를 연결하고 사용자가 직접 관리할 수 있는 단순한 웹페이지이다.

AMP라고 부르는 Accelerated Mobile Pages는 모바일 장치에서 페이지 로딩 속도를 높이기 위해 설계된 시스템이다. 웹 페이지를 몇 초 만에 로드할 수 있고, 특히 3G나 4G에서 검색할 때 유용하다. 최신 구글 업데이트에서, SEO(검색) 우선 순위는 가속모바일페이지가 구성된 사이트에 주어진다.

회사 웹사이트에 AWP를 설치하면 구글 애드워즈 광고 운영이 전보다 강력해진다. AWP를 사용하면 다양한 기기에서 배포 플랫폼 전반에 걸쳐 매력적이고 빠르고 고성능의 웹 사이트와 광고를 만들 수 있다.

회사는 AWP기능을 사용해서 모바일 사용자의 트래픽을 높이고 최적화 할 수 있다.

7.음성 검색 최적화

지난 몇 년에 비해 음성 검색에 관해 많은 소식이 들려온다. 브랜드들은 자체 검색 기능을 가지고 있다. 예를 들면 아마존의 알렉사, 마이크로소프트의 코타나, 애플의 시리, 구글의 음성 검색 등.

음성검색을 사용하여 웹사이트를 최적화하면 사용자가 생산성을 높일 수 있다. 웹 사이트에서 대답하면, 방문자가 당신의 사이트로 이동하고 고객의 질문을 해결할 시간을 절약할 수 있다.

게다가 이건 리드를 만들 가능성이 더 크다. 방문자를 타겟으로 하는 웹사이트에 콘텐츠를 통합하면 음성검색으로 비즈니스 랜딩 페이지로 전환시킬 수 있다. 또한 사용자의 이름이 이용되었을 경우 추가적으로 웹 사이트의 검색 엔진 최적화 순위를 높일 수 있다.

8.결론

2019년에는 중소기업이 고객에게 서비스를 제공할 때 타협할 필요가 없다. 반대로 이제는 잠재고객이 부정적인 경험을 받았다면, 참지 않고 다른 회사로 눈을 돌릴 수 있다. 우리는 고객이 업계의 왕이며 비즈니스 요구는 전적으로 고객이 원하는 것, 고객이 상품이나 서비스에 대해 좋은 생각을 갖고 있는지에 달려있다고 말할 수 있다.

그리고 고객의 친밀감을 높이기 위해서는 2019년 웹 디자인 트렌드를 고려해야 한다.

뉴스레터 전문을 보고 싶다면 여기로.

저자 : Inkbot Design
원문 링크: https://inkbotdesign.com/web-design-trends-2019
번역: REASIGN
문의: reasign.newsletter@gmail.com