본문 바로가기

웹디자인

(28)
웹 스토리보드 작업 전 프리핸드 스케치의 필요성 슬로워크에서 제가 속한 컨버전스디자인팀의 KPI는 풀스택 디자이너(Full-stack designer)되기입니다. 그래서 디자인을 제외하고 가장 관심있는 웹기획을 스터디했고, 내/외부 프로젝트 스토리보드를 제작하면서 직접적인 경험을 하고 있습니다. 이 경험을 통해 배운 스토리보드 제작 전 프리핸드 스케치의 필요성을 공유합니다. 스토리보드? 프리핸드 스케치? 1. 스토리보드 진행중인 내부 프로젝트의 스토리보드 스토리보드는 실제 작업 담당자(디자이너, 개발자, 퍼블리셔)가 업무를 수행하기 전에 이해해야 할 작업지시서로, 고객의 의뢰에 따른 머리 속의 비즈니스 모델을 표현하는 것입니다. 2. 프리핸드 스케치 진행중인 내부 프로젝트의 프리핸드 스케치 프리핸드 스케치는 말그대로 연필 등의 도구로 스케치하는 작업으..
2016 슬로워크 블로그 올해의 인기글 5 2016년 슬로워크 블로그에서는 어떤 글이 가장 인기 있었을까요? 주로 실용적인 정보나 트렌드를 다룬 콘텐츠가 많은 사랑을 받았는데요. 지난 1년간 가장 페이지뷰가 높았던 베스트 글 5를 소개합니다. 특별히 각 콘텐츠 글쓴이의 소감 및 코멘트도 받아두었으니 함께 살펴보세요! 5위. 비디자이너의 얕은 지식 쌓기: 디자인 용어 20 디자이너에게는 너무나도 기본적인 개념들. 디자이너가 아니면 모릅니다. 디자이너와 함께 일하는 기획자, 에디터, 마케터라면 한 번 정리해보세요. 글 바로가기(링크) "제 글이 5위라니, 영광입니다! 실제로 디자이너와 작업하면서 ‘커닝(kerning)'이라는, 전혀 모르는 말을 듣고 이 주제를 생각했어요. 많은 분들이 봐주신 걸 보니 ‘내가 모르는 건 다른 사람들도 잘 모를 거다’ ..
새로운 아름다운가게를 소개합니다. 아름다운가게(www.beautifulstore.org)는 지난 2016년 4월, 웹사이트를 새로운 웹사이트를 공개했습니다. 이번 웹사이트 리뉴얼(개편)은 슬로워크에서 진행하였는데요. 아름다운가게 웹사이트는 어떤 과정을 거쳐 새롭게 태어났을까요? 그 과정을 소개합니다. 아름다운가게 웹사이트 개편을 위해, 슬로워크와 아름다운가게의 담당자 간 사전 미팅을 여러 차례 진행했습니다. 기존의 웹사이트는 다양하고 많은 콘텐츠를 가지고 있었으나, 사업이 점점 커져감에 따라 메뉴 구조와 디자인 톤에 변화를 주고 사용성을 높여야 하는 상태였습니다. 이를 효과적으로 개선하고자 몇 차례 회의을 진행하였고, 시작 전 리뉴얼의 큰 방향성과 목표를 세웠습니다. 기존의 아름다운가게 홈페이지 아름다운가게 리뉴얼 방향성 및 목표1. 메..
슬로워크 대학생 디자인 캠프 slo20, 생생후기 인터뷰 슬로워크는 작년 2015년부터 대학생 디자인 캠프 slo20을 진행하고 있습니다. slo20이란 디자인 주니어와 슬로워크 전문가의 만남으로, 디자인 워크숍(1주)와 실무 인턴십(9주)을 통해 디자인 실력을 향상시킬 수 있는 기회를 주고 있습니다. 작년 상반기, 하반기 2번의 slo20을 진행했습니다. 오늘은 2015년 하반기 slo20 웹개발실 디자인 인턴을 진행한 고양이 발자국의 생생후기를 통해 slo20에 대해 자세히 알려드립니다. 실무 인턴십 수행 전, 디자인 워크숍을 진행 중인 낙타발자국님과 slo20 고양이 발자국님 slo20은 실무 인턴십을 진행하기 전, 1주간 디자인 워크숍을 진행합니다. 이 워크숍에서는 실무에서 진행하게 될 디자인 업무 교육뿐만 아니라 전반적인 실무를 진행할 수 있는 회사 ..
황금비율을 이용해 디자인하기 황금비율은 자연이 우리에게 선사해 준 가장 아름다운 비율입니다. 조개의 껍질, 꽃잎 등 자연에서 뿐만아니라 모나리자, 피라미드 등 역사적인 건축물이나 예술작품에서도 황금비율을 찾아볼 수 있는데요, 이러한 황금비율을 우리가 하는 디자인에 어떻게 적용할 수 있을까요? 디자인에서 황금비율을 이용할 수 있는 팁을 소개합니다. 두 변의 길이가 황금 비율인 1:1.61을 사각형에 적용한 것이 아래의 황금사각형입니다. A4용지, 신용카드나 신분증(8.5cm, 세로 5.4cm, = 1.574) 등 주위에서 흔히 이 황금사각형을 발견할 수 있는데요, 우리의 눈엔 단순히 직사각형으로 인식되었던 이러한 것들이 인간이 보기에 가장 편안하고 안정적인 형태입니다. (2016.01.14 수정) 황금비율을 가장 간단하게 적용하는 방..
2016 꼭 알아야 할 웹 디자인 트렌드 최근, 구글은 Material Design으로 모바일 친화적인 업데이트를 보여주었습니다. 그에 따라 더 많은 사이트들이 ‘mobile ready’로 움직이며, 반응형 웹 디자인의 인기가 계속되고 있는데요. 작년에 이어 올해에는 어떤 것이 가장 인기가 있을지 AWWWARDS가 소개하는 웹 디자인 트렌드를 전해드립니다. 1. UI 패턴의 증식 반응형 디자인의 부작용 중 하나는 많은 사이트들이 비슷하게 보인다는 것입니다. 하지만 반응형 디자인만의 문제가 아닙니다. 워드프레스 사이트의 대두와 테마 시장의 붐의 영향도 있습니다. Cypress North 그러나 비슷하게 보이는 것이 꼭 나쁜 것은 아닙니다. 우리가 웹을 소비하는 방식이 많은 공통 UI 디자인 패턴을 만드는 방식으로 바뀌었기 때문입니다. 즉, 체크아..
2015 슬로워크 블로그 인기글 10 2015년 슬로워크 블로그에서 어떤 글이 인기 있었을까요? 페이스북 참여 수 순으로 가장 있기 높았던 글 10개를 소개합니다. 10위: 추천! 웹디자인 스타일 가이드 7가지 (9월 2일) ➔ 더 읽기 웹사이트 스타일 가이드는 '패턴 라이브러리', 'UI 툴킷', 'UI 가이드라인' 등 여러 방식으로 소통됩니다. 웹사이트를 만드는 개발자, 디자이너, 콘텐츠 제작자에게 도움이 되는 잘 만들어진 7가지 스타일 가이드를 소개합니다. 9위: 슬로워크의 색다른 시도, '최고지속가능성책임자'를 영입했습니다! (4월 29일) ➔ 더 읽기 슬로워크는 2015년 CSR 분야의 전문가를 CSO로 영입했습니다. 최고지속가능성책임자(Chief Sustainability Officer)는 세계에서 기업의 사회적 책임을 적극적으로..
웹, 모바일 디자인을 한다면 읽어야 할 정보 8가지 UI라는 단어는 이제 전문가가 아니더라도 쉽게 들을 수 있습니다. 웹, 모바일 디자이너거나 비디자이너라도 관련 프로젝트를 준비하고 있다면 알아두어야 할 8가지 웹, 모바일 UI정보를 모았습니다. 1. UI의 9가지 상태UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화합니다. 상태나 상황에 따라 여러 가지 형태로 변화합니다. 변화에 따른 다른 데이터를 표현하고, 그 표현 양식이 달라지기도 합니다. UI디지안을 할 때 UI의 9가지 상태를 가이드라인으로 삼으면 사용자를 혼란에 빠뜨리는 일을 예방할 수 있습니다. UI의 9가지 상태 ➔ 더 읽기 2. 모바일 사용자 UX의 시작, 터치 제스처터치스크린 기반 인터렉션의 중요성과 터치제스처의 9가지 용어를 정리했습니다. 터치제스처의 기본 정의와 용어를 이해..