본문 바로가기

웹디자인

 (28)
뉴스레터 가입양식을 만드는 7가지 방식 뉴스레터는 여전히 고객들과 소통하기 아주 좋은 채널이며, 그만큼 경쟁자도 많습니다. 이 수많은 경쟁자를 이겨내고 더 많은 고객을 유치할 수 있을까요? 우리는 어쩌면 그 해답을 뉴스레터 가입양식에서 찾을 수 있을지도 모릅니다. 오늘은 뉴스레터 가입양식 만드는 방식을 7가지를 소개하고자 합니다. 1.보상을 명확하게 제공하기 당연한 얘기지만 사용자는 뉴스레터를 가입해서 본인이 얻어갈 수 있는 것이 무엇인지 궁금해합니다. 우리는 이 사실을 알면서도 간과할 때가 많은데요. 사람들은 인터넷을 사용하면서 다양한 뉴스레터 가입양식을 만납니다. 자칫 그냥 지나칠 수도 있지만, 만약 뉴스레터 가입 시 첫 구매에 할인을 제공한다면 어떨까요? 아니면 흥미로운 정보가 가득 담겨있는 전자책을 다운받을 수 있게 한다면 어떨까요? ..
웹 그리드시스템을 위한 가이드 흰 종이에 줄을 맞춰 글자를 쓰기란 생각보다 힘이 듭니다. 그렇지만 종이에 일정한 간격의 수평선이 그어져 있다면 보다 쉽고 깔끔하게 글을 쓸 수 있습니다. 우리가 흔히 사용하는 유선노트와 같이, 그리드(grid)는 더 나은 문서를 만들 수 있게 해줍니다. 그리드 시스템을 사용하면 정보에 질서와 구조를 부여할 수 있습니다. 의미 있고 논리적으로 콘텐츠를 구성할 수 있도록 도와줍니다. 편집 디자인에서 주로 다루던 그리드를 이제는 웹과 모바일 앱에서도 당연하게 사용합니다. 그리드 시스템은 어떻게 만들어야 할까요? 영국의 디자이너 Tom Newton이 말하는 그리드 시스템 가이드를 소개합니다. 1. 고려 사항그리드를 고려할 때는 첫 번째로 문제 해결, 두 번째로 미학에 초점을 맞추어야 합니다. 그리드는 요소들의..
웹사이트 디자인에 대한 이해 높이기 웹사이트 디자인을 처음 계획해보거나 리뉴얼을 생각하는 분들께 도움이 되는 글을 모았습니다. 웹디자인의 역사를 포함해 홈페이지 방문자 수를 늘리는 7가지 팁까지, 웹디자인에 대한 다양한 글을 읽고 웹디자인에 대한 이해를 높여보세요. 1. 짤방으로 이해하는 웹 디자인의 역사 웹디자인의 역사는 어떻게 발전해왔을까요? 웹의 암흑기부터 반응형 디자인까지 거쳐온 웹디자인의 발전을 간단한 짤방으로 이해할 수 있습니다. 짤방으로 이해하는 웹 디자인의 역사 (→글 읽기) 2. 움짤로 이해하는 반응형 웹디자인의 9가지 요소 반응형 웹디자인이라는 말 많이 들어보셨을 텐데요. 다양한 디스플레이 환경에 대응할 수 있는 반응형 웹디자인에 대해 정확히 이해할 수 있도록 돕는 글입니다. 아직도 반응형 웹디자인의 개념이 모호하다면 꼭..
웹디자인의 완성도를 올려 줄 8가지 체크리스트 조그마한 디테일이 웹사이트의 완성도를 좌우합니다. 이 글은 웹디자인의 디테일을 떨어트리는 사소한 실수를 다루려고 합니다. 아직 디자인 경험이 충분하지 않다면, 웹사이트의 완성도를 높여줄 8가지 체크리스트를 배워보세요*아래 예시들은 원글 작성자에게 피드백을 요청한 웹 사이트입니다. 1. 템플릿의 부적절한 활용템플릿은 여러분의 작업시간을 단축해주지만, 디자인의 통일성이 떨어질 수도 있습니다.템플릿을 사용하면서 생기는 공통적인 문제는 여러분이 준비한 로고와 통일성이 떨어진다는 점입니다. 로고의 컬러가 웹사이트 어디에도 찾을 수 없거나, 사이즈가 안 맞아 엉성해 보이는 경우가 많습니다. 템플릿을 사용했을 때는 반드시 디자이너의 재가공이 필요합니다. 템플릿이 깔끔하더라도 템플릿의 기본 스타일을 쓰지 않길 권합니다..
좋은 인터랙션 디자인을 위한 5가지 심리학 비밀 인간적인 요소를 포함하는 디자인은 매일 더욱 중요해지고 있습니다. 웹사이트와 사용자 경험 디자인은 미학에서부터 인터랙션, 모션(인식과 실제), 감정적 연결까지 사실적이어야 합니다. 그러나 디자이너들이 가장 자주 직면하는 문제는, 사용자를 `실제 사람들`처럼 생각하지 않는다는 것입니다. 인간적인 디자인은 사용자에게 물리적, 감정적으로 이어질 수 있는 매력적인 경험을 만들어줍니다. 인간적인 디자인을 위해서는 무엇을 고려해야 할까요? The Next Web(TNW)에 소개된 UXPin의 사례를 소개합니다. 1. ‘사람이 가장 먼저’모든 프로젝트의 디자인과 기획 단계에 이 말을 기억하세요. 의도적으로 행동하고 인터랙션하고, 디자인하세요. 무엇보다 사용자에게 공감하는 것이 중요합니다. 사진 제공: 리복 사람을 위..
우리 홈페이지, 어떻게 만들어 활용할까? 3편 웹사이트를 제작하고 운영하면서 콘텐츠에 대한 중요성을 다시 한 번 강조하여도 부족함이 없습니다만, 좋은 콘텐츠를 보유하였더라도 이를 출판(발행)할 매체가 없다면 필요한 사람들에게 그 정보를 전달하기가 어렵습니다. 네트워크와 인터넷 기술의 발전으로 고전적인 HTML 문서를 게시하는 것부터 간편하게 스마트폰에서 업로드 할 수 있는 수많은 방법이 생겨났습니다. 하지만 기관을 대표하는 공신력 있는 웹사이트를 제작하는 것은 단순한 SNS 페이지를 보유하는 것 이상으로 고려해야 할 사항이 많습니다. 이번 포스팅에서는 Mr.slo의 예시로 독립적인 웹사이트의 개발 및 운영에서 필수적으로 알고 있어야 할 사항에 대해 설명하도록 하겠습니다. 가상사례A 기관의 담당자인 Mr.slo는 최근 신설된 A 기관의 온라인 마케팅 ..
추천! 웹디자인 스타일 가이드 7가지 스타일 가이드의 개념은 ‘패턴 라이브러리’, ‘UI 툴킷’, ‘UI 가이드라인’ 등등 소통하는 방식은 각양각색입니다. 어떤 단어로 소통하는 것은 중요하지 않습니다. 하지만 그 의미는 우리가 통일할 필요가 있는데요. 스타일 가이드는 웹사이트를 만드는 이들을 위한 설명서와 재료라고 할 수 있습니다. 이들은 개발자가 될 수 있으며, 디자이너, 콘텐츠 제작자, 혹은 협력업체의 사람일 수도 있습니다. 스타일 가이드의 의미를 알아봤는데요. 이제는 비교적 잘 만들어진 7가지 스타일 가이드를 소개합니다. 에어비엔비(AIRBNB) 에어비엔비의 UI 툴킷은 폼의 입력필드, 메뉴, 광고와 툴바 등의 가이드를 가지고 있습니다. 특히 흥미로운 것은 그들만의 컬러 테마를 만들어서 보여줬다는 점이죠. 웹디자인은 뎁스와 대비 등 다..
타이포그래피, 웹에서 어떻게 활용할까? 웹사이트의 95%는 텍스트로 이루어져 있다고 합니다. 여러분이 읽고있는 이 글 또한 웹에 적용된 타이포그래피라고 할 수 있을텐데요, 사이트 방문자가 콘텐츠를 잘 읽고 목적지를 쉽게 찾아갈 수 있도록 하는 웹에서의 타이포그래피는 인쇄물에서의 그것보다 더 중요하다고 해도 과언이 아닐 것입니다. 웹 디자이너가 적용할 수 있는 웹 타이포그래피 요소와 디자인 팁을 소개합니다. 다양한 폰트의 선택, 미세한 활자의 조정이 가능해 디자이너의 창의성을 발휘할 수 있는 인쇄 작업과는 달리 웹에서 완벽한 타이포그래피를 구현하기에는 한계가 있습니다. 그럼에도 불구하고, 다양한 스타일의 웹폰트와 CSS의 출연으로 그래픽툴을 이용하지 않고도 웹상에서 훌륭한 타이포그래피를 구현할 수 있게 되었습니다. 웹에서 좋은 타이포그래피를 구..

티스토리툴바