CSS-Gradient, 웹상에서 매력적인 조합을 만들어낼 수 있다면?

  콜투액션(CTA)을 위한 버튼, 이렇게 디자인해보는건 어떨까? ‘GRADIENT-BUTTONS’     눈에 띄는 그라데이션 모음, 컬러 트렌드 파악까지! 이번주에 만난 2개의 매력적인 디자인 서비스   웹사이트 배경을 구성하는 방법에는 여러가지가 있겠지만, 그라데이션을 활용한 방법은 그 중에서도 꾸준히 사랑받는 방법 중 하나가 아닐까 싶습니다. 하나의 컬러를 활용했을 때의 단조로움을 벗어날 수 있으며 이를 통해 웹사이트에서 전하고자 하는

웹사이트 배경에 필요한 패턴을 쉽게 만들고, 활용할 수 있는 서비스!

  다각형으로 구성된, 무료로 활용 가능한 백그라운드 이미지 컬렉션 ‘LOW POLYGON ART’     작년 1월, 웹디자인 트렌드에 대한 글을 하나, 둘 정리하며 속편으로 함께 발행했던 글이 있는데요. ‘웹사이트 배경을 구성하는 다섯가지 아이디어‘라는 글이었습니다. (자세한 내용은 링크를 통해 확인해주세요.)  이미지와 기하학적 패턴의 결합 회색톤의 활용 밝은 색상의 레이어 활용 비대칭의 활용 추상적인 내용의 활용  

우버의, 드롭박스의, 스냅챗의, 도커의 초기 모습은 어땠을까? 서비스 초기 데모 영상을 한 곳에서!

      두 이미지를 보면, 어떤 서비스와 브랜드의 웹사이트인지 쉽게 알아보실 것 같은데요 🙂 첫 번째 이미지는 애플의 초기 웹사이트, 아래 이미지는 페이스북의 초기 웹사이트 모습입니다. 각각 2001년과 2004년에 만들어졌으니 2018년 지금의 기준에서 보면 조금은 촌스럽게 느껴질 수도 있습니다. 그럼에도 불구하고 두 서비스의 초기 웹페이지를 보면 구조가 잘 짜여져있다는 생각도 들었는데요. 특히 애플의 경우

컬러에 따른, 무료로 사용 가능한 다양한 일러스트를 제공해주는 ‘Undraw’

  웹디자인에서의 ‘일러스트‘는 이미지 및 타이포와 비교했을 때 서비스가 원하는 ‘메시지’를 더욱 구체적으로 전달할 수 있다는 장점을 지니고 있습니다. 드롭박스와 에버노트가 서비스 소개 페이지에서 자신들의 특징을 ‘일러스트’로 표현하고 있는 것도 같은 맥락이라고 할 수 있죠.        다양한 분야의 일러스트레이션 디자인 사례를 확인할 수 있는 곳 ‘ILLUSTRATION’ 웹은 물론 앱 디자인에 참고하기 좋은 일러스트

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

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

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

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

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

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

다양한 분야의 일러스트레이션 디자인 사례를 확인할 수 있는 곳 ‘illustration’

  일러스트레이션을 활용한 디자인! 일러스트레이션을 활용한 웹/앱디자인이 최근 더 많이 눈에 띄는 것 같습니다. 특히 서비스 및 재품 소개를 위한 페이지, 잘못된 URL을 입력했을 때 만나게 되는 404에러페이지 등에서 자주 쓰이는 일러스트레이션! 보통은 ‘Behance’나 ‘Dribbble’을 통해 이런 사례들을 키워드나 카테고리에 따라 찾아보곤 했는데 최근에 일러스트레이션을 활용한 디자인 사례들을 한 곳에서 볼 수 있도록 큐레이션 해주는 웹서비스를

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

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

스플릿 스크린 어떻게 활용하면 좋을까?

  다양한 디바이스에서 사용 가능한 스플릿 스크린 삼성의 옴니아 사태(?) 이후, 다시는 삼성의 스마트폰을 쓰지 않겠노라 다짐했던 마음을 뒤흔들었던 제품이 ‘갤럭시노트’시리즈였습니다. 옴니아를 쓰다 도저히 안되겠다 싶어 1년 만에 갈아탄 제품은 아이폰4였는데요! 아이폰4의 약정이 끝날때쯤 나온 제품이 갤럭시노트2였고, 이런 저런 메모를 즐겨하는 제게 ‘S펜’은 정말 매력적인 존재로 다가왔습니다. 그렇게 갤럭시노트2를 쓰며 작성한 S메모만 1,000개가 넘었고 이