웹 디자인 프로세스의 8계명(초보자 및 코드 없음)

구조화된 웹사이트 디자인 프로세스를 따라 성공적인 웹사이트를 만드는 방법을 알아보세요.

우리의 가설은 당신이 이미 도메인 이름과 호스팅 제공자를 찾았다는 것입니다.

아직 호스트를 선택하지 않았다면 파트너인 Cloudways 를 적극 추천합니다 .

아래 예에서는 웹사이트를 직접 만드는 경우에 대한 단계를 보여줍니다. 웹 사이트가 클라이언트를 위한 것이라면 프로젝트 계획, 기한 설정, 계약 등의 측면에서 새로운 단계가 발생할 수 있습니다. 그러나 핵심적으로는 여전히 아래에 제시된 단계를 따라야 합니다.

이제 단계는 다음과 같습니다.

1. 범위 식별 : 웹사이트가 충족해야 하는 요구 사항은 무엇입니까? 웹사이트는 누구와 대화합니까? 목표와 동기는 무엇입니까? 귀하와 동일한 범위와 대상 고객을 가진 비즈니스는 무엇입니까?
2. 웹 사이트의 사이트맵 정의 : 비즈니스와 청중이 목표를 달성하는 데 도움이 되는 웹 페이지와 기능은 무엇입니까?
3. 콘텐츠 제작 : 웹사이트 페이지에 대한 사본 준비;
4. 시각적 브랜드 만들기 : 웹사이트 디자인에 사용할 색상 팔레트, 글꼴 및 그래픽을 준비하여 시각적 아이덴티티를 형성합니다.
5. 와이어프레임: 웹 페이지 레이아웃 스케치
6. 웹사이트 디자인 : 실제 웹사이트를 만들고 사용하는 도구의 한계를 인식합니다.
7. 테스트 : 링크에서 양식 및 버튼에 이르기까지 모든 것이 작동하는지 확인합니다. 다양한 브라우저와 장치에서 웹사이트를 테스트하여 제대로 작동하는지 확인하십시오.
8. 출시: 신중하게 계획된 커뮤니케이션 전략으로 라이브를 시작하기 전에 약간의 소음을 내십시오.

하나씩 가져갑시다.

웹사이트 디자인 프로세스의 단계

1. 범위 식별

이 단계에서 귀하와 귀하의 팀은 아래 몇 가지 질문에 대한 답변을 파악해야 합니다.

• 누구를 위한 사이트인가요?

눈길을 사로잡는 웹사이트에는 장점이 있을 수 있지만 웹사이트 방문자가 돈이나 시간을 투자하도록 하려면 그만한 가치가 있다고 확신시키기 위해 더 많은 정보를 파헤쳐야 합니다. 설득력을 갖기 위해서는 타겟 고객을 이해하고 고객의 요구 사항, 내부 및 외부 동기 요인을 이해해야 합니다.

이 파고는 또한 유용하고 누군가의 필요를 해결하는 제품을 만들어야 함을 의미합니다.

예를 들어 종이꽃꽂이를 취미로 하고 있는데 이를 더 발전시켜 사업으로 만들고 싶다고 합시다. 꽃을 종이로 만드는 사람이 있습니까? 이 사람들을 어디에서 찾을 수 있습니까?

글쎄, 나는 웨딩 플래너와 미래의 신부가 그러한 선택을 원할 것이라고 생각할 수 있습니다.

하지만 나는 더 나아가야 한다. 모든 신부가 내 종이 꽃을 원할까요 아니면 그냥 신부를 원할까요?

즉, 몇 가지 조사를 거쳐 경쟁업체를 확인해야 합니다. 다른 종이 꽃 상인이 있습니까? 당신은 또한 좋은 오래된 꽃 가게와 경쟁합니다. 그러면 귀하의 부가가치 또는 고유한 가치 제안은 무엇입니까?

• 귀하의 웹사이트 방문자는 귀하의 웹사이트에서 무엇을 찾을 것으로 기대합니까?

우리의 예로 돌아가서 방문자는 다양한 제품, 색상, 배송 정보(종이 꽃은 깨지기 쉽기 때문에 약간의 주의가 필요할 수 있음) 등을 보고 싶어할 것입니다. 일부에서는 종이가 재활용된다는 언급은 어떻습니까? ? 고객이 환경에 미치는 영향을 매우 잘 인식하고 있으며 이러한 세부 사항에 관심이 있을 수 있습니다.

꽃도 빌릴 수 있나요?

이제 몇 가지 평가를 포함하면 어떻게 될까요? 친구의 결혼식을 위해 종이 꽃꽂이를 디자인했을 수도 있습니다.

내가 도착하는 위치를 참조하십시오? 웹사이트 디자인에 뛰어들기 전에 조사를 해야 합니다.

• 전환은 어떻게 보입니까?

코스 등록, 제품 구매, 뉴스레터 구독에 대해 이야기하고 있습니까?

월요일의 경우 홈페이지에서 전환율을 쉽게 파악할 수 있습니다.

주요 전환은 스크롤 없이 볼 수 있는 부분의 중앙에 있는 "시작하기" 클릭 유도문안에서 분명합니다.

또 다른 미세 변환은 회의 등록으로, 왼쪽 상단 모서리에 있는 메시지에서 확인할 수 있습니다.

또 다른 마이크로 전환은 "영업팀에 문의"입니다.

귀하의 웹사이트는 어떻습니까? 주요 전환이 있습니까? 부차적인 것들이 있습니까?

• 고객 여정은 어떤 모습인가요?

고객 여정 지도는 방문자가 입구에서 웹사이트를 통해 원하는 목표에 도달하고 떠날 때까지 이동하는 경로를 시각적으로 표현한 것입니다.

고객 여정 맵에는 방문한 페이지, 순서, 웹사이트 방문자가 목표를 달성하는 데 필요한 단계, 회사와 웹사이트 방문자 간의 상호작용 지점(양식, 채팅 등), 잠재적인 마찰 지점.

고객 여정은 고정되어 있지 않습니다. 가정으로 시작한 다음 그 과정에서 조정합니다. Google Analytics 와 같은 도구를 사용 하여 웹사이트 행동을 분석 하고 실제 통찰력을 기반으로 최적화할 수 있습니다.

2. 웹사이트의 사이트맵 정의

원천

이제 고객 여정이 명확해졌으므로 사이트맵을 만들 차례입니다. 웹사이트의 사이트맵은 웹사이트의 정보 아키텍처를 설정하고 다양한 페이지 간의 관계를 설명하는 데 사용됩니다.

Excel에서 Figma에 이르는 다양한 도구에서 사이트맵을 만들 수 있습니다.

3. 콘텐츠 제작

이제 웹 사이트의 구조가 설정되었으므로 개별 페이지에 대한 콘텐츠를 만들 차례입니다.

카피라이팅에 관한 몇 가지 모범 사례는 다음과 같습니다.

• 이상적인 사용자에게 친숙한 단어와 개념을 사용하십시오.
• 보잘것없는 용어와 전문 용어를 사용하지 마십시오.
• 일반적인 대면 만남에서와 같이 의사 소통을 시도하십시오. 이렇게 하면 친숙한 느낌을 받을 수 있습니다.
• 현재 시제로 쓰고 수동태를 피하십시오.
• 항상 가독성을 확인하십시오. 이를 위해 Readable 과 같은 도구를 사용할 수 있습니다 .
• 친구, 낯선 사람, 동료와 함께 헤드라인을 테스트하십시오. David Ogilvy는 다음과 같이 말합니다.

“평균적으로 본문을 읽는 사람보다 헤드라인을 읽는 사람이 5배 더 많습니다. 헤드라인을 작성할 때 1달러에서 80센트를 지출한 것입니다.”

이것은 헤드라인이 웹사이트에서 중요하다는 것을 의미합니다.

잠재고객(SEO)에 대한 특정 관련 키워드를 중심으로 콘텐츠를 최적화하십시오. Google 트렌드 (무료), Ubersuggest (무료), Ahrefs (유료) 와 같은 도구를 사용할 수 있습니다 .

• AIDA 카피라이팅 프레임워크를 활용하세요.

A – 주의 : 관심을 끌고, 호기심을 불러일으키며, 청중이 브랜드에 대해 더 많이 알아야 한다고 설득하는 콘텐츠를 만듭니다.

I – 관심 : 방문자에게 계속 참여해야 하는 이유를 제공합니다. 여기서 핵심은 문제를 개인적으로 만들어 다른 사람이 아닌 잠재 고객에게만 이야기하도록 하는 것입니다.

D – Desire : 이것은 귀하의 제안이 그들의 문제/고통에 대한 솔루션을 제공하는 방법을 홈페이지 방문자에게 보여주는 곳입니다. 여기에서 제품의 기능에 대한 설명을 시작할 수 있으며 이러한 기능이 제품의 삶을 어떻게 개선할 수 있는지에 초점을 맞춥니다.

A – 실행 : 이제 잠재 고객이 행동하도록 설득할 때입니다. 구매, 구독, 무료 제품 다운로드, 평가판 시작 등

4. 비주얼 브랜드 만들기

이 단계가 항상 4단계일 필요는 없습니다. 이 과정에서 더 일찍 시작할 수 있습니다.

시각적 아이덴티티는 브랜드에 대한 인식을 형성하는 방식을 나타냅니다.

이것은 그 자체로 전체 프로세스입니다.

여기에서 다음을 수행해야 합니다.

• 그래픽 이 어떻게 생겼는지 정의합니다. 모양, 3D 그래픽, 일러스트레이션을 사용하시겠습니까?

원천

• 웹사이트의 타이포그래피 정의 ;

원천

• 색상 팔레트 를 선택합니다. 색상 팔레트에서 링크, 헤드라인, 버튼, 배경 등의 색상을 설정할 수 있는 스타일 가이드로 발전할 수 있습니다. 이를 위해 Adobe 색상환 과 같은 도구를 사용할 수 있습니다 .

원천

• 브랜드의 스토리를 전달하는 이미지를 선별 합니다.

출처: https://convertsquad.com/blog/

• 로고 디자인

원천

• 물리적 자산 (제품 포장 등)을 준비합니다.

원천

위의 대부분의 요소는 무드 보드를 만드는 데 사용할 수 있습니다. 글꼴, 그래픽, 색상을 무드보드에 모으면 전체 웹사이트 무드 비전을 더 잘 이해할 수 있습니다. 당신의 전체적인 톤과 목소리는 밝거나 어두울 것입니까? 격식을 차리거나 장난스럽게?

원천

5. 와이어프레임

원천

와이어프레임은 웹 페이지 또는 앱의 스케치입니다. 웹사이트의 복잡성에 따라 손으로 그리거나 Google Docs, Sketch 또는 Figma 에서 만들 수 있습니다. 와이어프레임은 페이지의 콘텐츠 및 기능을 레이아웃하는 데 사용됩니다. 비디오, 이미지, 헤드라인, 콘텐츠 블록, 버튼 등을 어디에 배치해야 하는지 디자이너에게 알려주어야 합니다. 와이어프레임을 사용하면 보다 유연하게 설계할 수 있으므로 디자인에 뛰어들기 전에 사용하는 것이 좋습니다. 미리 디자인된 웹사이트보다 와이어프레임의 구조를 수정하는 것이 더 쉽습니다.

6. 웹사이트 디자인

원천

이제 우리는 비즈니스를 말하고 있습니다!

콘텐츠, 와이어프레임, 시각적 요소가 준비되었으므로 이제 작업을 시작할 시간입니다.

제목에서 언급했듯이 웹 사이트를 만들기 위해 웹 디자이너나 코드 괴짜가 될 필요는 없습니다. 코드 없이 웹사이트를 디자인하는 데 도움이 되는 많은 도구가 있습니다. 페이지 빌더라고 합니다.

대부분은 디자인의 모든 부분을 사용자 정의하고 반응형으로 만들 수 있습니다.

예를 들어 WordPress 내에서 자체 Colibri 빌더 또는 Elementor를 사용할 수 있습니다. WordPress 외부에서 Wix와 Squarespace는 정말 유명합니다. 이러한 도구는 고유한 섹션, 시각적 개체 및 콘텐츠를 추가하여 보강할 수 있는 템플릿을 제공할 수 있습니다.

이제 디자인에 특정 애니메이션, 효과가 필요한 경우 코드를 추가해야 할 수 있습니다.

7. 테스트

네, 콘텐츠와 영상이 완성되었다고 가정해 보겠습니다. 당신의 일은 아직 준비되지 않았습니다. 모든 것이 제대로 작동하는지 확인할 때입니다. 아무데도 연결되지 않는 링크(깨진 링크 또는 404s라고도 함)가 없고, 모든 버튼과 양식이 작동하고, 웹사이트가 대부분의 브라우저와 장치에서 잘 보이는지 확인합니다.

이제 출시 전에 외부 사람들이 웹사이트를 어떻게 인식하는지 테스트할 수 있습니다. 이렇게 하면 자신의 편견에 휘말리는 것을 피할 수 있습니다. 이를 위해 간단한 사용자 조사( 5초 테스트 )를 수행할 수 있습니다. 예를 들어 사용자가 홈페이지를 본 후 처음 5초 이내에 받는 첫인상을 측정하는 데 도움이 되는 방법입니다.

8. 출시

이제 시작할 때 게시를 누르면 완료됩니다. 아니요, 소문을 퍼뜨리고, PR 캠페인을 시작하고, 소셜 미디어를 통해 사람들에게 당신이 나갔다는 것을 알릴 필요가 있습니다!

그리고 그것은 랩입니다. 이제 웹 디자인 프로세스를 위한 올바른 단계가 있습니다.

행복한 웹사이트 구축!

이 기사가 마음에 들었고 WordPress 웹사이트를 디자인하는 방법에 대해 더 알고 싶다면 Colibri의 Youtube 채널 을 구독하고 Twitter 와 Facebook 에서 팔로우하세요!

사업을 시작하고 싶습니까?

격월 업데이트 받기:

• 멋진 워드프레스 웹사이트 디자인하기
• 온라인 입지 구축
• 웹사이트 홍보

이메일 주소:

18세 이상이고 독점적인 경품, WordPress 및 당사 제품에 대한 뉴스를 이메일로 받고 싶다면 체크하십시오. 언제든지 구독을 취소할 수 있습니다. 자세한 내용은 개인 정보 보호 정책 및 사용 약관을 확인하십시오.