프론트덕후
960
2018-08-30 10:40:27
16
10811

요즘 디자인 트렌드 (via. 드리블닷컴)



trip.gif

베이징에 거주하는 디자이너 Tommao님의 모바일 여행앱 디자인입니다. UI도 멋지고 UX 흐름도 멋지네요. 이런 앱을 사용할 수 있는 것만으로도 영광이지 싶습니다. 여행도 하기전에 앱을 쓰면서 설레고 즐거울 것 같습니다. 시원시원하게 잘 만들었습니다.

image.png

디자이너 zoeyshen님의 대시보드 디자인입니다. 중국인 UX디자이너인데 어두운 톤에 깔끔한 느낌의 디자인을 잘 하는 것 같습니다. 곡선 그래프를 개발로 잘 구현해낼 수 있다면 정말 멋지겠네요.

image.png

기본적으로 플랫한 디자인에 그라데이션이나 빛 효과를 잘 쓰는 디자이너 같습니다. 깔끔하고 이쁘게 디자인을 잘하네요.

image.png

개인적으로는 플랫한 깔끔한 그래프를 좋아해서 여러 분석 자료에 그런 디자인을 선호해서 사용해 왔는데, 이런 느낌으로 그라데이션과 빛, 그리고 색상 배합을 잘 해도 정말 멋진 UI디자인이 나오네요.

image.png

uixninja님의 디자인입니다. 이분은 보라색 성애자같은데요, 보랏빛 디자인을 참 잘 다룹니다. 산출물들을 보면 느낌이 zoeyshen님과 비슷합니다.

image.png

image.png

image.png

image.png

보라색이 잘못 사용하면 쉽게 허접해 질 수 있는 어려움 색임에도 불구하고, 능숙하게 보라색을 잘 다루는 디자이너 같습니다.

image.png

rogie님은 웹개발도 잘하는 디자이너입니다. 그리고 원래는 일러스트를 잘 그리는 디자이너입니다. 최근에, 로지님이 한 붓 그리기 실력을 선보였습니다. 펜툴을 이용해서 한붓 그리기로 백조를 그렸는데, 정말 아름답지 않습니까? 저는 이 백조를 만나자마자 숨이 멎을 뻔 했습니다.

image.png

image.png

한 붓으로 그린 까마귀와 숫사슴입니다.

image.png

image.png

Gis1on님의 신용카드 사용 내역 관리 앱 디자인입니다. 이게 보기엔 쉬워보여도, 미묘한 폰트의 크기, 폰트의 선택, 요소들의 색상, 요소들의 배치에 따라서 쉽게 허접해 질 수 있는 디자인입니다. 심플해 보이지만 난이도 있는 디자인을 깔끔하게 잘 그려낸 모습입니다.

todo.gif

Gis1on님의 할일 관리 앱입니다. 하나의 버튼만을 노출하고, 그 버튼의 역할을 바뀌게 만드는 이런 UI는 미니멀리즘의 정수인 것 같습니다. 이 멋진 UI를 보다가, 버튼이 주렁주렁 달려있는 UI를 생각해보니 끔찍하네요.

xore___solar_system.gif

러시아 디자이너 Anton Skvortsov님의 모바일 UI/UX 디자인입니다. 행성을 탐험하는 컨셉인가요. 멋집니다. 정적인 UI도 멋지지만 UX와 애니메이션 처리도 멋집니다.

3.gif

예전에 플래시 시절에 구현하던 현란한 UI를 이제는 프론트엔드와 클라이언트 성능이 좋아져서 CSS와 자바스크립트로도 충분히 구현할 수 있게 되었습니다. 여러가지 애니메이션을 가미한 UX디자인을 구현할 능력이 된다면 훨씬 편리하고 다채로운 사용자 경험을 이용자들에게 선사할 수 있을 것입니다.

shot.gif

루마니아에 살고 있는 디자이너 Virgil Pana님의 고퀄리티 모바일 쇼핑몰 메인 이미지입니다. 이건 일러스트레이터로 그림을 그리고, 애니메이션 처리는 플래시나 애프터이펙트로 한 것 같네요. 이분은 자바스크립트 프로그래밍과 모바일, 웹디자인 그리고 모션그래픽도 다룹니다.

image.png

공사중 페이지인데, 이런 느낌의 일러스트를 곧잘 그리기도 하지만,

image.png

이런 느낌도 잘 구현하구요.

shot2.gif

일러스트 뿐 아니라 이런 UI/UX 구현에 있어서도 남들이 생각하지 못하는 사소한 부분들까지 신경쓰는 디테일 성애자이기도 합니다. 위의 디자인은 플루이드 슬라이더로 값을 조정할 때 손가락에 숫자가 가리는 불편함을 해결하기 위한 디자인으로, 아기자기하고 예쁜 애니메이션 처리는 덤입니다.

1.gif

전체 항목을 다 보여주는 이런 스타일의 다이렉트 셀렉트 박스 UX처리도 괜찮은 아이디어로 생각됩니다.

image.png

이런 일러스트도 깔끔하네요. 이분은 못하는게 뭔지?

image.png

Unfold라는 회사를 창업한 디자이너 Eddie Lobanovskiy의 고전적이고 미니멀한 디자인입니다. 개인적으로는 얇쌍한 폰트에 여백 많은 이런 웹사이트 디자인을 좋아하는 편인데 딱 제 취향이네요. 그런데 플로리다에 거주하는 이 사람도 엄청난 노력파에다가 천재끼까지 있습니다. 온갖거 못하는게 없는 다재다능형 디자이너인데, 이런 사람이 진짜 디자이너가 아닌가 생각합니다. 그의 작품들을 함께 보시죠.

image.png

와플 아이폰앱 아이콘을 그렸습니다.

image.png

카메라 앱 아이콘을 그린 것이구요,

image.png

이건 알람 앱의 아이콘을 그린것입니다.

image.png

image.png

image.png

image.png

에디는 작은 아이콘을 하나 만들더라도 볼펜으로 꼼꼼하게 스케치와 기획을 할 정도로 디테일에 신경을 많이 쓰는 성격입니다.

northface.gif

이건 에디가 디자인 한 노스페이스 오피셜 사이트입니다. 구름과 산을 이용해서 아주 간단한 애니메이션 처리를 해주었는데도 불구하고 뭔가 추운 느낌, 아웃도어 사이트 느낌이 물씬 풍기지 않습니까?

image.png

image.png

이 정도 사이트 디자인이야 에디에겐 그야말로 껌이죠. 오래전에 국내 포털 다음의 아이덴티티와 비슷한 느낌도 듭니다. 어쨌든 사용하기 어려운 색들을 잘 조합해서 사용하였습니다.

elastic.gif

베를린에 거주하는 Andreas Storm님의 위트있는 디자인입니다. 구글 머티리얼 디자인의 기본 label + input UI에 약간의 애니메이션을 주었을 뿐인데, 재치있는 UI애니메이션이 되었습니다. 이런 것들 너무 좋습니다.

image.png

인도 뉴델리에 사는 디자이너 Surja Sen Das Raj는 기본 하얀색 배경 화면 위에 페이지 디자인을 깔끔하게 잘 해냅니다. 공해의 도시 뉴델리를 떠 올리면 뭔가 잿빛이 대표색으로 떠오릅니다. 그런 공해의 도시에 살면서도 이렇게 퓨어한 디자인을 해낼 수 있다니 조금은 신기한 생각도 듭니다. 그의 디자인을 몇개 더 보시겠습니다.

image.png

image.png

image.png

image.png

image.png

image.png

dribble.gif

모스크바에 살고 있는 디자이너 Alexander Bender의 작업물입니다. 틴더 스타일의 스와이핑 UI는 최근 많이 활용되고 있는 것 같습니다.

savevid.gif

뉴질랜드에서 활동하는 디자이너 Sam Atmore의 앱 디자인입니다. 이 역시 틴더 스타일의 스와이핑 모션을 활용하였습니다.

isometric_2.gif

이런식으로 컨텐츠 목록에서 컨텐츠를 선택하면 컨텐츠 상세페이지로 슝~ 들어가는 UI도 최근에는 굉장히 유행하는 것 같습니다. 실제로도 자주 목격하게 되는데, 여기서 또 보게 되네 반갑네요. 슝~ 들어가는 방식은 디자이너 스타일마다 다르고, 워낙 자유롭게 구현할 수 있어서 다양한 모션그래픽 효과를 구경할 수 있습니다.

image.png

벵갈루루에 거주하는 Divan Raj님의 다크 대시보드입니다. 검정색 톤의 이런 대시보드도 정말 멋지네요.

image.png

아이폰용 호텔 관리 대시보드입니다.

image.png

미용실앱이 이렇게 예뻐도 되는거에요?

image.png

데이팅앱 디자인입니다.

atro222.gif

샌프란시스코에서 활동하는 UI8팀의 가계부앱입니다. 지출 내역별로 멋드러진 애니메이션 전환 효과를 제공합니다.

newewrst-dash.gif

로스엔젤레스에서 활동하는 Yaroslav Zubko님이 고안한 그래프 대시보드 UI입니다. 원형 그래프에서 항목별 세부사항을 보여줄 때, 이런 방식의 UI를 사용하는 것도 정말 괜찮을 것 같습니다.

turkish-airlines.gif

암스테르담에 거주하는 Denis Kurtcape기 디자인 한 터키항공 웹사이트입니다. 과거 플래시 시절에나 쓸법한 모션이기는 하지만 그래도 간단한 CSS와 도시별 항공 사진 DB로 여행을 가기전 목적지에 대한 기대감을 키워주는 멋진 디자인을 만들어 냈습니다.


[펌] 요즘 디자인 트렌드 http://

15
25
  • 댓글 16

  • 봄이슬
    2018-08-30 10:49:15

    와 너무 이쁘네요. 화면단 코딩하는 재미가 쏠쏠할거같아요

  • TheProdigy
    1k
    2018-08-30 10:51:31

    잘 봤습니다. 몇몇개는 그냥 컨셉 아트인건가요?

  • 프론트덕후
    960
    2018-08-30 10:54:28

    봄이슬 / 그렇죠~ 프론트단도 그렇지만 백엔드 개발자들도 사이트 만들어 진거 보면 어깨춤이 절로날 듯 하네용^^

    TheProdigy / 네~ 몇몇개는 목업 아트이고, 몇몇개는 실제로 사이트로 만들어진거고 그런 듯 합니다^^

  • 니플
    2018-08-30 12:40:59

    https://steemit.com/design/@jongsiksong/ui

    여기에서 가져오신 것 같네요 ㅎㅎ

  • iIIiIiiIiIIIiiIiIiII
    40
    2018-08-30 12:41:07

    프론트쪽 관심이 많으신것 같네요! 좋은거 많이 봤습니다~

    볼때마다 저도 저런것 하나 해보고 싶은 욕심이 드네요..ㅎㅎ

  • EF
    904
    2018-08-30 15:25:54
    이 글을 보기만 해도 디자인 감각이 성장한것 같아요.
  • lllllllllllllll
    8k
    2018-08-31 18:03:58

    눈정화 ㅋㅋ

  • 노오오오오오오오오오력
    330
    2018-08-31 20:01:04

    아이고 이걸 구현할려면 빡세겠네요

  • diabloage
    21
    2018-09-01 02:35:24
    밋밋한 화면만 보다가 안구 정화하고 갑니다.
  • 르라나
    2018-09-01 16:10:19

    저 공책이 탐나네요..

  • 물병자리
    259
    2018-09-03 08:29:41

    아이고...

  • jjmean2
    283
    2018-09-03 19:22:14

    멋진 디자인들이 많네요! 애니메이션 목업(?)은 보통 어떻게 만드는 건가요? 방송이나 유튜브 영상 같은 거 보면서 현란한 애니메이션 같은 걸 볼 때면, 가끔 저런 거 내가 코딩으로 구현할 수 있을까? 하는 생각이 드는데... 코딩으로 하는 건가요? 

  • 허허
    1k
    2018-09-04 09:40:18

    멋지네요 ~ 


  • 슈팅스타님
    72
    2018-09-04 15:48:03

    저런 감각은 타고나는 건지

    수많은 시행착오를 거쳐서 나오는건지

    아니면 모종의 레퍼런스를 자기것으로 잘 바꾸는건지...

    능력이 부러운것은 별개로 저런게 궁금하네요 ㅡㅋ

  • 가방던지기
    102
    2018-09-05 04:56:11

    와 이런 UI부분은 개발로 어떻게 진행하는건가요?


  • biipp
    267
    2018-09-05 13:00:08
    와 정말 멋지네요 잘구경하고 갑니다.
  • 로그인을 하시면 댓글 을 등록할 수 있습니다.