• Like
Innobirds Media Design Webzine no.7
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Innobirds Media Design Webzine no.7

  • 8,261 views
Published

이노버즈 디자인실 웹진 제 7호, 이번 호 주제는 ‘꼭 기억해야 할 2014년 웹디자인 트렌드 10’ 입니다. 유용한 정보들과 링크들이 많이 있으니까 꼭 한번 씩 읽어보세요 :D …

이노버즈 디자인실 웹진 제 7호, 이번 호 주제는 ‘꼭 기억해야 할 2014년 웹디자인 트렌드 10’ 입니다. 유용한 정보들과 링크들이 많이 있으니까 꼭 한번 씩 읽어보세요 :D

2013년에 가장 HOT했던 디자인은 반응형 웹 디자인이었는데요, 그 외에도 커다란 이미지를 배경으로 사용하는 디자인, 무한으로 떨어지는 스크롤, 심플 & 미니멀리즘한 디자인 등이 유행했습니다. 작년에 유행했던 웹 디자인 의 트렌드 중 상당부분은 2014년에도 여전히 트렌드로 이어질 것으로 예상 됩니다.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,261
On SlideShare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
196
Comments
0
Likes
22

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 7호 14/02/28 2013년에 가장 HOT했던 디자인은 *반응형 웹 디자인이었는데요, 그 외에도 커다란 이미지를 배경으로 사용하는 디자인, 무한으로 떨어지는 스크롤, 심플 & 미니멀리즘한 디자인 등이 유행했습니다. 작년에 유행했던 웹 디자인 의 트렌드 중 상당부분은 2014년에도 여전히 트렌드로 이어질 것으로 예상 됩니다. 01 개성 있는 타이포그래피 *타이포그래피는 꾸준히 언급되어오고 있는 디자인 트렌드 중 하나입니다. 단지 타이포그래피의 성향도 시대의 흐름을 따라 계속 변화하고 있다는 것이 포 인트라고 할 수 있습니다. 2014년에는 믹스 매치된 타이포그래피가 눈에 띌 것으로 예상되고 있으며, 표준 글꼴에 디자이너의 개성과 고유성을 추가하여 새로운 글꼴을 창조 해, 남용 되던 서체에서 벗어나 좀 더 크리에이티브한 전개가 될 것이라고 합니다. 디자이너의 감성과 개성을 담은 타이포그래피는 웹 디자인의 레이아웃과 전체적인 이미지나 사이트의 느낌에 큰 영향을 주기도 합니다. ▲ 그래픽 디자이너 Jordan Metcalf 작품 http://www.jordan-metcalf.com/ *반응형 웹 디자인 : 모든 브라우져와 모바일 기기에서 자동으로 크기를 변환해주는 방식의 디자인 *타이포그래피 : 활판술, 활자 서체의 배열을 말하는데 특히 문자 또는 활판적 기호를 중심으로 한 2차원적 표현 01
  • 2. 02 플랫(Flat) 디자인 3D 입체감을 벗고 좀 더 심플한 플랫 디자인이 각광 을 받고 있습니다. 이러한 변화는 애플의 ios7 업데 이트를 보면 극명하게 나타납니다. 그라디에이션과 입체감을 과감히 없앤 심플한 아이콘, 심플한 라인 과 타이포그래피로 구성된 화면들을 보면 플랫디자 인으로 트렌드가 바뀌었다는 사실을 한 눈에 알 수 있습니다. 이전까지의 디자인은 실제질감(3D효과) 을 나타내기 위해 애썼지만 이제는 미니멀한 인터페 이스, 강렬한 컬러로 채워진 블록, 그라디언트를 거 의 없애는 등의 플랫디자인으로 트렌드가 바뀌어 가 ▲ ios7 업데이트 후 Flat icon으로 변화된 화면 http://www.makeusknow.com 고 있습니다. 전체 화면을 모두 사용하는 디자인 03 와이드한 화면의 웹사이트는 별도의 클릭 없이 마우스 스크롤만으로 간편하게 모든 내용을 한 화면에서 확인 할 수 있도록 해주며 또한 다양한 브라우저와 디바이 스 환경에 대응하기 위해 Flash나 별도의 플러그인 없 이 HTML5나 CSS만으로 사이트를 구성하여 편리하게 이용할 수 있도록 합니다. 이런 전체 화면을 활용한 사 이트들은 점점 더 창의적이고 정교해질 것입니다. ▲ 와이드 모니터로 보아도 여백 없이 채워지는 메인 http://developer.skype.com/ 04 데스크탑에서 모바일로 데스크탑, 랩탑, 스마트폰, 태블릿PC 등 웹에 접근하 는 기기들이 늘어나게 되면서 화면의 해상도도 점점 다양해 지고 있습니다. 다양한 기기들을 활용한 웹 사이트의 접근이 일상화 되면서, 디자이너들은 점점 더 유동적인 해상도를 고려한 디자인을 하게 될 것 입니다. 앞으로 콘텐츠를 중심으로 불필요한 기능과 형식, 꾸미기와 이동 등을 강제로 최소화 시키는 기 능을 구현한 웹 디자인이 늘어나게 될 전망입니다. ▲ 다양한 해상도에 맞춰진 반응형 웹사이트 예시 http://macsamoon.com 02
  • 3. 텍스트 대신 영상 05 새로운 환경들은 사용자들로 하여금 텍스트 보다 동 영상을 선호하게 만들 것입니다. 다양한 소셜 미디 어의 활용과 공유는 많은 데이터를 효과적이고 신속 하게 처리할 필요성이 있으며, 이를 위해 동영상은 현재로서 가장 효과적인 커뮤니케이션 방법이 될 것 입니다. 하지만 무거운 영상을 웹에서 완벽히 활용 하기 위해서는 용량문제 등 풀어야 할 숙제들이 남 아있습니다. ▲ 동영상으로 움직이는 재미를 더한 웹사이트 http://www.diadobaralho.com.br/ 06 무한스크롤 스크롤을 내림에 따라 지난 콘텐츠가 로드 되어 보여 주는 방식으로 끝이 없이 내려가는 웹 페이지 디자인 을 말합니다. 페이스북, 트위터, 핀터레스트, 텀블러 등 의 소셜 네트워크 서비스에서 주로 이용되고 있는데, 이는 소셜 네트워크 서비스의 특징상 다수의 사람들이 폭발적인 수의 콘텐츠를 업로드 하기 때문에 적정량의 콘텐츠를 불러온 후 스크롤에 따라 부가로 콘텐츠를 로드하여 로딩속도를 줄여주기 때문입니다. 따라서 웹 사이트 구축 시 콘텐츠 양에 따라 무한 스크롤 기능을 적절하게 사용한다면 매우 매력적인 사이트를 구현할 수 있습니다. 07 ▲ 무한스크롤 형식으로 콘텐츠가 로드되는 핀터레스트 www.pinterest.com 단순화 된 콘텐츠 모바일의 접속 비율이 늘어나게 되면서 가독성을 고려한 디자인이 중요해지게 됨에 따라 콘텐츠가 간소화 될 것입니다. 그리고 짧아진 사용자의 집중시간을 고려하여 핵심적인 내용위주의 임팩트 있는 콘텐츠를 전달하는 것이 효율적이기 때문에 콘텐츠는 점점 더 단순화 될 것이며, 내용 게시의 주기도 트위터처럼 점점 짧아질 것 입니다. 03
  • 4. 08 사이드바 삭제 블로그나 잡지 타입의 사이트에서 흔히 볼 수 있는 형태의 디자인으로, 요즘은 그 이외의 웹 사이트에서도 유 사한 디자인을 종종 볼 수 있습니다. 이런 형태의 디자인은 사용자의 주의를 분산시키는 것들을 줄여 편안하게 웹사이트의 내용을 숙지할 수 있도록 하기 때문에 시각적 효과와 다양한 콘텐츠 배치에 도움을 주고, 좀 더 나 은 비쥬얼 효과를 얻을 수 있습니다. 심플한 색 사용 09 간단한 색 구성, 타이포그라피의 강약 등을 이용한 심플한 디자인이 새로운 트렌드로 자리 잡고 있습니 다. 강렬한 비비드 컬러도 좋지만 한가지 색상 톤을 사용하여 차분한 느낌으로 작업하면 집중도를 높일 수 있습니다. 단조로운 색상을 활용한 디자인은 앞 서 말한 Flat design과 함께 사용될 수도 있습니다. ▲ 챕터별로 일러스트와 컬러가 다르게 표현된 웹사이트 http://www.adamhartwig.co.uk/ 10 보정된 이미지 사용 2014년에도 원래 이미지를 보정하여 새로운 느낌을 창조하는 디자인이 계속 될 것으로 보입니다. 인스타그램의 이미지를 연상시키는 색상 오버레이, 흐린 이미지 등을 사용한 디자인을 더 많이 볼 수 있을 것으로 생각되며, 일상을 공유하는 콘텐츠가 많아 짐에 따라 소박한 느낌을 주는 이미지로 보정 되는 경향을 보일 것으로 예상됩니다. ▲ 따뜻한 감성이 느껴지는 필터로 보정된 이미지 http://blog.naver.com/dhj07037 ▶ 감성사진 보정법 http://blog.naver.com/soul07777 본 리포트는 원문 http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/1/을 참고하여 해석된 자료를 가지고 재 편집한 글입니다. COPYRIGHTⓒ 2014 INNOBIRDS MEDIA 기획, 편집 : 황인택, 김영은 발행처 : 디자인실