에어비엔비의 디자인은? 다양한 디자인 기준들을 한 눈에 확인할 수 있는 ‘Design Principles’

  에어비엔비(Airbnb)를 모르는 분들은 이제 많지 않을 것 같습니다. 여행의 시작을 함께 하는 대표적인 서비스가 되었으며, 기존과 다른 경험을 제공해주기 때문입니다. 스타트업에게는 유니콘에 다다른 배울게 많은 곳이기도 하고요. 그 중에서도 에어비앤비의 ‘디자인 철학’에 대한 이야기를 빼놓을 수 없는데요. 위의 내용은 에어비앤비의 디자인 블로그에 게시된 내용 중 일부로 Unified, Universal, Iconic, Conversational 등 네 가지 주요

웹은 물론 앱 디자인에 참고하기 좋은 일러스트 사례 10

  지난 7월, 일러스트레이션을 활용한 디자인 사례를 확인할 수 있는 ‘ILLUSTRATION’을 소개드렸는데요. 기존에는 웹사이트의 배경 등 한정적으로 사용되던 일러스트가 이제는 온보딩은 물론, 404 에러페이지 서비스 및 제품 소개 페이지 등 다양한 곳에 사용되는 추세입니다.    일러스트 활용의 장점에는 여러가지가 있겠지만 그 중에서도 이미지에 비해 서비스의 컨셉을 더욱 명확하게 보여줄 수 있다는 점이 큰 역할을 하지 않을까 싶네요. 자주는 아니지만, 생각이 잘 풀리지 않거나 영감을

스케치(Sketch)를 즐겨 쓰는 디자이너를 위한 보물창고 ‘Sketch for Desinger’

  포토샵 그리고 스케치 위의 이미지는 차례대로 2015년과 2016년 가장 많이 쓰이는 와이어프레임툴을 보여주는 자료입니다(출처:2016 Design Tools Survey) 어보디의 포토샵이나 XD에 비해 스케치가 더 많은 디자이너들에게 사랑받고 있다는 사실을 알 수 있는 자료이기도 하죠. 어도비(Adobe)는 아주 오랫동안 디자이너나 기획자들에게 중요한 프로토타이핑 툴로 자리잡고 있었는데, 모바일 앱 제작에 최적화된 툴을 제때 제공하지 못해 스케치에게 빠른 속도로

사용자 경험을 해치지 않는 에러메시지, 어떻게 작성해야 할까?

  어떻게 경우든, 오류를 명확하게 해결해주는 것이 중요하다! 모든 시스템은 오류없이 작동 할 수 없습니다. 우리가 자주 사용하는 페이스북도 종종 오류가 발생하곤 하죠. 이런 오류는 서비스를 제공하는 곳에서 발행할 수도, 서비스를 이용하는 유저로부터 발생할 수도 있는데요! 두 경우 모두 사용자 경험을 해치지 않기 위해 올바른 방법으로 처리하는 것이 매우 중요합니다.  그래서 오늘은 ‘How to Write

결제로의 전환, 다양한 가격 정책을 한 눈에 볼 수 있는 ‘Pricing Page’

  ‘SaaS’에게 있어 가장 중요한 전환, 결제 – 그리고 결제를 해야 하는 이유의 제공! 위의 이미지는 ‘망고보드’라는 서비스의 가격 정책 페이지입니다. 망고보드는 제가 정말 좋아하는 서비스 중 하나로, 인포그래픽과 같은 디자인 작업물은 물론 최근 상품 상세 소개 페이지까지 디자이너 없이도 쉽고 빠르게 제작할 수 있도록 도와줍니다. 개인 프로젝트들을 진행하며, 디자이너 없이 디자인 작업물을 빠르게 만들어야

2000년의 네이버, 2008년의 페이스북 웹디자인은 어땠을까? ‘웹디자인 박물관’

  웹디자인의 변화 얼마전 다음과 네이버의 PC 버전이 변경되었습니다. 고해상도 모니터 이용자들이 증가하는 추세에 따라 가로폭을 넓힌것이죠. 모바일 이용자가 훨씬 많을텐데 왜 굳이 PC 사용자를 위한 개편을 진행했을까, 라는 질문에는 어제 공개된 메리미커의 인터넷 보고서를 통해 알 수 있습니다. 그녀는 ‘모바일로의 전환’보다는 ‘모바일의 추가’가 맞다는 표현을 썼는데요. 모바일 이용 시간이 늘어나고 있는 것은 분명하지만 데스트탑의

콜투액션(CTA)을 위한 버튼, 이렇게 디자인해보는건 어떨까? ‘Gradient-buttons’

  어떤 버튼이 더 많은 클릭을 유도할 수 있을까? CTA(Call To Action)이란 랜딩페이지와 웹사이트에 방문한 사람에게 우리가 원하는 반응을 유도하는 장치를 뜻합니다. 예를 들어 쇼핑몰이라면 위와 같이 구매하기를 기본으로 공유, 좋아요, 장바구니 담기 등 특정 행동을 방문자/사용자들이 할 수 있도록 유도하는 것이죠. 아마 모바일 커머스, 쇼핑앱에서 구매하기가 가능한 페이지에서는 해당 버튼이 하단게 고정되어 있는 모습을

원하는 모양과 컬러의 라인아이콘을 찾고, 받을 수 있는 ‘Lineicon’

  다양한 곳에서의 활용이 가능한 베이직 아이콘 지금까지 아이콘과 관련하여 다양한 서비스를 소개드렸는데요 🙂 심플한 라인으로만 구성된 베이직 아이콘의 경우 다양한 작업 과정에서 쓰일 수 있기에 저는 무료로 사용 가능한 아이콘 팩을 주로 사용해왔는데요! 얼마전 검색을 통해 원하는 아이콘을 찾고 원하는 컬러에 맞춰 다운로드를 할 수 있는 서비스를 알게 되어 오늘 소개드릴까 합니다.   검색,

iOS와 안드로이드를 포함한 모바일앱은 물론 웹에서도 사용 가능한 애니메이션 라이브러리 ‘Lottie Files’

  앱과 웹에서의 ‘애니메이션’ 앱을 쓰면서 우리는 한 번 이상의 애니메이션을 접하게 됩니다. OS와 디바이스의 발전에 따라 애니메이션 역시 아주 간단한 것에서 시작해 최근에는 다양한 용도로 활용되고 있기 때문이죠. 로딩 시 노출되는 애니메이션은 물론이고 앱을 사용하는 과정 과정에 애니메이션을 적절히 활용한다면 정적이고 단조로운 앱을 생동감 있고 지루하지 않게 만들 수 있습니다. ‘지금 써보러 갑니다’를 통해서도

다양한 UI 디자인 사례는 물론, 코드까지 확인할 수 있는 ‘Building-blocks’

  UI디자인 사례 확인과 적용까지 한 번에! 오늘 소개드릴 서비스는 ‘Building-Blocks’입니다. 부트스트랩과 같은 반응형 프레임워크를 제공해주는 파운데이션에서 얼마전 오픈한 서비스죠. 파운데이션을 활용한 많은 종류의 UI 작업물들을 확인할 수 있도록 도와주는 서비스로, 총 7개의 카테고리에 따라 UI디자인 사례들을 확인할 수 있습니다.   블로그, 대시보드, 마케팅, 이커머스, 모바일앱, 포트폴리오 등 주요 내용을 한 번에 확인하고 다룰 수