웹사이트를 디자인하기 전에 와이어프레임을 만들 때의 6가지 이점(+ 예제)

효과적인 웹사이트를 디자인하려면 레이아웃을 제시하고, 사용자 경험(UX)을 고려하고, 특정 기능을 구현하는 방법을 알고, 콘텐츠를 작성하고, 검색 엔진 최적화(SEO) 모범 사례를 통합하는 등 많은 요소가 필요합니다. 그리고 모든 것이 브레인스토밍 세션으로 시작됩니다. 여기에서 관련된 모든 크리에이티브는 클라이언트와 함께 그들이 필요로 하는 것과 사이트에 포함하고 싶은 것을 결정합니다.

이러한 요구 사항이 모두 나열되면 다음 두 가지 방법 중 하나로 진행할 수 있습니다. 크리에이티브에게 프로젝트의 일부를 수행하도록 지시하고(예: 콘텐츠 작성, 모형 디자인 등) 하나님께 당신이 모두가 되기를 바랍니다. 동일한 페이지에서 또는 웹사이트가 어떻게 보일지에 대한 똑같은 비전을 따라 모든 사람이 작업할 수 있도록 와이어프레임을 만들 수 있습니다. 후자는 와이어프레임을 생성하여 수행할 수 있습니다.

와이어프레임이란?

와이어프레임은 디자인할 주요 웹 페이지의 시각적 가이드입니다. 그 목적은 프로젝트에서 일하는 모든 사람들을 위한 청사진 역할을 하는 것입니다. 그렇게 하면 관련된 모든 사람이 각 구성 요소(영웅 배너, 탐색 모음, 제목, 부제목, 콘텐츠, 이미지, 비디오, 클릭 유도 문안 버튼, 그래프 등)가 어디로 갈 것인지 정확히 알 수 있습니다.

그들은 디자인 관점에서 매우 간단합니다. 아직 색상이나 실제 이미지 또는 특정 텍스트를 추가할 필요가 없습니다. 대신 사이트가 완료되면 어디에나 있을 위치에 대한 자리 표시자를 포함합니다. 여기에는 이미지를 나타내는 정사각형 또는 직사각형, 내용에 대한 lorem ipsum 텍스트, 제목 및 부제목에 대한 H1, H2 및 H3 글꼴 크기가 포함됩니다.

출처: 발사믹

와이어프레임의 유형

와이어프레임을 만드는 방법은 다양합니다. 원하는 경우 연필로 공책에 스케치할 수 있습니다. 결국 이것은 미술 대회에 출품하는 것이 아닙니다. 그러나 소프트웨어를 사용하여 생성하는 경우 다른 소프트웨어 프로그램에서 다양한 유형의 와이어프레임을 허용합니다.

저충실도 와이어프레임

저충실도 와이어프레임은 단순한 이미지를 표시합니다. 소개 단락은 여기로 이동합니다. 상품설명이 나와있습니다. X가 그려진 이 사각형은 결국 회사에서 일하기 위해 들뜬 직원들이 웃고 있는 사무실의 사진이 되어야 합니다. 고객에게 해당 이미지를 설명할 수 있지만 페이지의 모든 내용은 매우 기본적입니다.

고충실도 와이어프레임

고충실도 와이어프레임은 사이트가 어떻게 보일지 보다 사실적인 모양과 느낌을 반영합니다. 여기에는 독자를 CTA가 가져갈 페이지로 안내하는 클릭 가능한 CTA 버튼과 같은 실제 웹사이트 콘텐츠와 기능이 포함됩니다. 여기에는 로고, 타이포그래피, 이미지 크기 등이 포함될 수도 있습니다.

웹사이트 와이어프레임 생성의 6가지 이점

이 방법을 웹사이트 디자인 프로세스에 통합하기 시작하면 다음과 같은 많은 이점을 즉시 깨닫기 시작합니다.

1. 웹사이트 청사진 제공

10명이 한 방에 모여 웹사이트를 디자인하는 방법에 대해 토론할 수 있습니다. 그들은 사이트에 필요한 페이지, 각 페이지에 포함할 정보, 웹사이트를 경쟁 제품과 차별화할 기능에 모두 동의할 수 있습니다. 그러나 이것이 모든 사람들이 이것이 어떻게 생겼는지에 대해 똑같은 이미지를 가지고 있다는 것을 의미하지는 않습니다.

따라서 콘텐츠가 웹 개발자가 구상한 것보다 훨씬 더 긴 홈페이지 텍스트를 작성하는 경우 프로젝트를 콘텐츠로 다시 보내어 단축하거나 디자인에서 레이아웃을 재작업하는 데 추가 시간이 필요합니다. 와이어프레임이 있으면 이 프로세스가 더 효율적입니다.

2. 사용자 경험(UX)을 더 잘 평가할 수 있습니다.

어떤 것들은 이론상으로는 훌륭해 보이지만 실제로는 잘 작동하지 않습니다. UX 디자이너가 하위 페이지에 대한 드롭다운 메뉴와 함께 탐색 모음에 X개의 항목을 포함하려고 한다고 가정해 보겠습니다. 그러나 모든 것이 끝나면 이것이 혼란스럽게 만든다는 것을 깨닫게 됩니다.

모든 요소를 ​​종이에 적어두면 디자인 프로세스가 시작되기 전에 이러한 문제를 볼 수 있습니다. 이렇게 하면 훨씬 더 쉬운 단계에서 문제를 해결할 수 있습니다.

3. 그들은 모두가 같은 페이지에 있는지 확인합니다.

디자인 팀의 모든 사람들은 각 웹 페이지가 만들어지기 전에 어떻게 보일지 정확히 알고 있기 때문에 더 나은 방향 감각을 가지고 작업에 착수할 수 있습니다. 그리고 모든 것이 어떻게 진행될지에 대해 질문이나 의심이 있는 사람이 있으면 초기 브레인스토밍 세션에서 이를 제기할 수 있습니다.

이 프로세스를 통해 모든 사람이 우려 사항에 대해 듣고 함께 아이디어를 제안할 수 있으며 모든 결정의 배경이 되는 사고 과정을 철저히 이해할 수 있습니다.

4. 디자인 프로세스를 간소화합니다.

와이어프레임이 생성되면 더 이상 변경 작업에 시간을 낭비할 필요가 없습니다. 이 단계는 여전히 모든 프로젝트의 일부이지만 프로젝트를 시작하기 전에 모두가 동의한 청사진이 있으면 각 팀 구성원이 보다 효율적으로 작업할 수 있습니다.

이것은 또한 각 웹사이트에서 작업하는 시간을 줄여 마감일 전에 완료하고 고객을 만족시킬 가능성을 높인다는 것을 의미합니다.

5. 웹사이트 콘텐츠 개발을 더 쉽게 만듭니다.

콘텐츠 작성은 주관적인 과정입니다. 일부 모범 사례에는 스타일 가이드, 브랜드 보이스 및 특정 구매자 페르소나를 염두에 두고 작성하는 것이 포함됩니다. 그러나 길이와 형식은 여전히 ​​크게 다를 수 있습니다.

와이어프레임을 개발하면 작성자가 길이 제한 또는 선호하는 형식에 대한 아이디어를 얻을 수 있습니다. 단어 수를 지정할 필요는 없지만 2~3개의 짧은 lorem ipsum 단락을 보여주는 와이어프레임은 다른 경우를 위해 톨스토이 소설을 떠나도록 알려줍니다.

6. 사이트가 구축되기 전에 고객에게 보여줄 수 있습니다.

웹사이트를 디자인할 때 가장 실망스러운 경험 중 하나는 당신이 만든 것에 대해 모두 흥분했지만 고객이 찡그린 얼굴을 하고 그것이 그들이 염두에 둔 것이 아니라고 말하는 것입니다. 이것은 당신이 만든 것이 좋지 않다는 것을 의미하는 것이 아니라 둘 다 엄청나게 다른 결과를 상상했다는 것을 의미합니다.

와이어프레임을 생성하면 클라이언트가 사이트의 베어본 버전이 생성되기 전에 어떤 모습일지 매우 명확하게 알 수 있습니다.

와이어프레임 모범 사례

이제 와이어프레임을 만드는 다양한 방법이 있지만 최상의 결과를 보장하기 위해 특정 단계를 따르는 것이 좋습니다.

팀과 함께 브레인스토밍

앞서 언급했듯이 첫 번째 단계는 웹 디자인에서 작업할 모든 사람들과 함께 하는 것입니다. 이렇게 하면 아이디어를 던질 수 있고 다른 사람들에게 그 이유를 알릴 수 있습니다. 또한 모든 사람은 다른 사람의 레이더에는 없을 수도 있는 프로젝트에서 자신의 특정 역할에 영향을 미치는 요소를 고려하게 됩니다.

아이디어를 먼저 그려라

기술적으로 브레인스토밍을 하면서(또는 와이어프레이밍 소프트웨어를 사용하여) 노트북에 와이어프레임 그리기를 시작할 수 있지만 마른 지우개 보드나 펜과 종이를 사용하여 첫 번째 반복을 완료하는 것이 더 쉬울 수 있습니다. 완료되면 사진을 찍어 와이어프레임을 생성할 팀원에게 이메일로 보낼 수 있습니다. 쉽게 참조할 수 있도록 프로젝트 관리 카드의 작업 설명에 포함시키는 것도 좋은 방법입니다.

출처: WhatPixel

색상 최소화

와이어프레이밍할 때 색상과 특정 이미지에 대해 자세히 설명할 필요가 없습니다. 청사진은 바로 그 것입니다. 사이트가 어떻게 생겼는지에 대한 맨 뼈 묘사입니다. 방향을 나타내는 메모(예: 여기에는 브랜드 색상, 거기에는 공백)를 포함할 수 있지만 주요 디자인 요소에 중점을 둡니다.

기능에 대한 메모 작성

웹 페이지의 특정 영역이 어떻게 작동하는지 기록해 두십시오. 예를 들어, 드롭다운 메뉴, 이미지 캐러셀, 방문자 퀴즈 또는 일종의 도구가 될 것입니다. 웹 디자이너에게 어디로 가야 하는지에 대한 명확한 지침을 제공하는 일반적인 세부 정보입니다.

데스크탑 및 모바일 와이어프레임 생성

모든 단일 웹사이트에는 반응형 디자인이 있어야 합니다. 그리고 사이트는 스마트폰에서와 같이 데스크탑 컴퓨터에서 동일한 방식으로 로드되지 않으므로 두 디스플레이가 어떻게 보일지 보여주는 와이어프레임을 만드십시오. 탐색 표시줄이 버거 메뉴가 되거나 더 큰 화면에서 나란히 있던 카드가 모바일 장치에 쌓여 표시될 수 있습니다. 이미 반응형 웹 사이트 템플릿으로 작업하는 경우 이 단계를 건너뛸 수 있습니다.

와이어프레이밍 시 하지 말아야 할 일

확인. 이제 수행할 작업을 알았으므로 건너뛸 항목 목록이 있습니다.

모든 단일 페이지를 와이어프레임하지 마십시오

와이어프레이밍의 요점은 시간을 절약하는 것입니다. 따라서 42개의 서로 다른 제품으로 웹사이트를 디자인하는 경우 하나의 제품/서비스 페이지를 와이어프레임하면 됩니다. 그런 다음 홈페이지, 정보 페이지, 가격 책정, 블로그 및 문의 페이지와 같은 큰 티켓 항목에 집중하십시오.

완벽하게 만들기 위해 너무 많은 시간을 소비하지 마십시오

와이어프레임이 인상적으로 보일 필요는 없습니다. 웹 페이지의 골격이 어떻게 생겼는지 보여주기만 하면 됩니다. 실제로 웹사이트를 디자인할 때 그것을 아름답게 하기 위해 노력을 기울이십시오.

모든 세부 사항을 포함하지 마십시오

모든 요소가 의미하는 바에 대한 유용한 메모를 포함해야 하지만 세부 사항에서 길을 잃지 마십시오. 간단하게 다음 페이지 디자인으로 넘어갑니다. 아트 디렉터나 웹 디자이너는 나중에 모든 것을 확장할 수 있습니다.

와이어프레임 생성 도구

공책에 그림을 그리는 것은 간단하고 간단한 과정입니다. 그리고 그것이 당신에게 효과가 있다면, 그것을 위해 가십시오. 그러나 쉽게 공유할 수 있는 매체를 선호하는 사람들을 위해 사용할 수 있는 소프트웨어 프로그램이 많이 있습니다. 가장 인기 있는 것은 다음과 같습니다.

발사믹

Balsamiq은 사용자 친화적이어서 학습 곡선이 거의 없습니다. 저충실도 와이어프레임 생성만 허용하지만 작업을 완료하기에 충분합니다. 또한 여러 계층 계획을 제공하고 실시간으로 작성하는 것을 볼 수 있도록 팀 구성원을 초대할 수 있는 기능을 제공하여 협업을 허용합니다.

어도비 XD

Adobe XD를 사용하면 충실도가 높은 와이어프레임을 디자인할 수 있고 클라이언트가 와이어프레임에 액세스할 수 있습니다. 그런 다음 실제로 수정하지 않고 와이어프레임의 각 요소에 대한 피드백을 제공하는 메모를 남길 수 있습니다. 또한 UX 및 UI 디자인을 개선하기 위한 튜토리얼도 제공됩니다.

출처: xd.adobe.com

스케치

Sketch는 Mac 사용자만 사용할 수 있습니다. (내 말은, 그것이 무엇인지). 이를 통해 전체 팀과 실시간으로 협업하여 충실도가 높은 와이어프레임을 생성할 수 있습니다. 템플릿 라이브러리는 없지만 많은 플러그인과 호환됩니다.

목플로우

MockFlow는 마른 지우개 보드에 스케치하는 것과 같은 느낌의 디지털 그리기 도구입니다. 또한 방대한 템플릿 라이브러리가 포함되어 있어 와이어프레임을 PowerPoint 및 Adobe PDF와 같은 다른 플랫폼으로 내보낼 수 있습니다. 그들은 무료 버전을 제공하지만 유료 계층에는 훨씬 더 유용한 도구가 포함되어 있습니다.

출처: MockFlow

프레이머

Framer는 다양한 도구가 포함된 무료 옵션을 제공하므로 예산이 부족한 신생 기업과 비즈니스에 적합한 도구입니다. 라이브러리에 보관하고 향후 프로젝트의 레이아웃으로 재사용할 수 있는 기본 와이어프레임을 구축할 수도 있습니다.

시간은 금입니다. 그리고 잃어버리면 절대 되찾지 못할 것입니다. 웹 디자인 프로세스에 와이어프레이밍을 구현하면 더 효율적으로 사용하는 데 도움이 됩니다. 더 똑똑하게 일하세요. 좌절을 피하십시오. 프로젝트를 더 빨리 완료하십시오. 어떻게 보든 윈-윈 솔루션입니다.