반응형 그리드 레이아웃을 확인할 수 있는 오픈소스 라이브러리 ‘Muuri’

  반응형에 대한 ‘반응’은 엇갈리는게 사실이지만, 웹 서비스를 구현하는데 있어 한 번쯤은 꼭 논의해봐야할 내용 중 하나입니다. 반응형으로 가느냐, 아니냐에 따라 그리드 레이아웃 자체를 다르게 설계해야 하기 때문인데요. 웹 버전에만 초점을 맞춰 레이아웃을 구성할 경우 모바일에서의 레이아웃이 깨질 수 있고, 반대로 모바일에 초점을 맞출 경우 웹에서 레이아웃이 어색해질 수 있습니다. 때문에 반응형으로 서비스를 개발할 경우에는

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

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

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

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

개성있는 레터링 작품과, 다양한 폰트 정보를 제공해주는 ‘Font-Inspiration’

  폰트와 관련된 다양한 영감을 얻을 수 있는 곳! 오늘은 오랜만에, 지금 써보러 갑니다의 ‘단골’ 주제 중 하나인 폰트/디자인과 관련된 웹서비스를 소개드리려고 합니다. 폰트를 선택하는데 있어 가장 중요한 것은, 어떤 폰트가 우리 서비스, 디자인과 잘 어울릴까에 대한 답이라고 생각하는데요!   오늘 소개드릴 서비스 ‘Font-Inspiration’의 경우 실제 존재하는 폰트를 소개해주는 서비스라기 보다 다양한 포트폴리오 서비스에 등록된 작품들 중 레터링과 연관된 내용들을 분류에 따라

상업적 사용이 가능한 웹사이트 템플릿(HTML5/CSS3)을 제공해주는 ‘Mash-up Templates’

  웹사이트 제작 어떻게 해야할까? 웹사이트를 제작하는데 있어 우리가 활용할 수 있는 툴과 서비스가 많아지고 있습니다. ‘국내 스타트업이 서비스 중인 웹사이트 빌더3’와 같이 위지웍에디터를 활용해 쉽게 제작 가능한 서비스도 있고, 원하는 템플릿을 찾아 스스로 또는 누군가의 도움을 받아 맞춤형으로 제작하는 방법도 있습니다. 그 중 오늘은 후자에 해당하는 서비스를 하나 소개드리려고 하는데요! 100% 상업적 사용이 가능한,

이미지 한 장으로 다양한 목업을 만들 수 있는 웹서비스 ‘Dimmy.Club’

  디바이스 별 서비스의 느낌을 보고 싶을 때 서비스를 기획, 디자인 하다 보면 다양한 디바이스에서 우리 서비스가 어떻게 보여질 지 궁금해지는 경우가 많습니다. 여기서의 궁금증이란 사실 테스트를 위한 내용이라기 보다 디자인한 내용이 디바이스 별로 잘 반영되는지 확인하기 위한 것이라고 할 수 있죠. 예전에는 .PSD, .AI로 만들어진 목업을 다운로드 받아 이미지를 하나씩 삽입해가며 확인해봤는데 최근에는 스마트

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

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

이런 포트폴리오는 어때요? 최고의 포트폴리오 페이지 #2

  매력적인 웹 디자인 사례들을 가장 많이 확인해볼 수 있는 곳 : 포트폴리오 페이지 매일 뭘 봐야겠다 – 정해놓은 것은 아니지만 버스와 전철에서 다양한 자료들을 접하게 됩니다. 아무래도 긴 출,퇴근 시간을 활용해야 하기 때문인데요! 여러 관심사 중, UX/UI 디자인쪽에 대한 자료들을 특히 자주 찾아보는 편인데 텍스트로 이뤄진 자료가 보기 부담스럽거나, 멍하니 시각적인 충격을 받고 싶을 땐 기획자, 디자이너, 개발자 등

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

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

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

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