신제품 웹 사이트 구축 방법 (그리고 어떻게했는지) |

로고 개발 프로세스를 완료 한 경우 귀하는 이미 광고 문안 작성 초안을 작성했을 수 있습니다. 그렇다면 귀하의 웹 사이트를 위해 재사용 할 수 있습니다. 창조적 보고서를 아직 만들지 않았다면, 이제는 문서를 작성해야 할 때입니다.

다행스럽게도 전초 기지 창조적 보고서의 예를 포함하여 문서 작성법을 자세히 설명한 기사를 이미 작성했습니다. 당신은 우리가 어떻게 우리를 지었는지 알 수 있습니다. 따라서 크리에이티브 브리프에 대한 작업이 필요한 경우 로고 및 크리에이티브 브리핑을 개발 한 방법에 대한 기사를 읽고 준비가되면 여기로 돌아와주십시오.

사이트 맵 만들기

손을 대면 사이트 맵 작업을 시작할 수 있습니다. 사이트 맵은 사이트에 포함시킬 모든 페이지 (목적 및 목표 포함)를 나열하는 개요입니다.

다음은 전초 기지 용으로 개발 한 사이트 맵입니다.

집

1. 1. : 제품 개요 무료 평가판에 가입하는 "클릭 유도 문안" 기능 개요
   2. : 상세 기능 페이지에 대한 링크가있는 모든 기능 개요 기능 A에 대한 기능 세부 사항: 기능 A. 세부 사항
      1. 에 대한 기능 세부 사항 기능 B: 기능 B의 세부 정보
      2. 모든 기능에 대해 반복하십시오.
      3. 가격: 무료 평가판 가입을위한 가격 책정 계획 및 링크에 대한 세부 정보

• 고객:
• 성공적인 고객의 프로필 회사 소개:
• 우리가 누구인지, 사명 선언문 및 역사에 대한 개요 연락처:
• 연락처, 시간, 장소 채용 정보:
• 현재 채용 정보 목록 개인 정보 보호 정책:
• 전초 기지 개인 정보 보호 정책 블로그:
• 최근 블로그 게시물을 나열하는 블로그 홈페이지 블로그 포스트:
• 블로그 게시물이 여러 개있을 것입니다. 이 페이지는 템플릿입니다 도움말 센터:
• Google 도움말 센터는 Zendesk에서 제공합니다. 물론 사이트는 전초 사이트 맵과 매우 다를 것입니다. 예를 들어 식당의 경우 메뉴 또는 예약 페이지가있는 페이지가있을 것입니다. 온라인 상점을 만들고 있다면 다양한 제품 페이지가있을 것입니다.

가능한 한 사이트 맵에 귀하의 사이트 맵이 포함됩니다. 이 작은 계획으로 사이트 계획 및 개발의 나머지 부분을 훨씬 쉽게 만들 수 있으므로 초기 단계에서 투자 할 가치가 있습니다.

첫 번째 복사본 만들기

내가 생각한 것 바로 주문 하지마.

사실, 더 나은 접근법은 "뒤로"일을하고 웹 사이트 복사본을 먼저 생각한 다음 주위를 디자인하는 것입니다. 그 사본. 왜? 고객과 소통하기를 원하는 것은 사이트의 실제 최종 디자인보다 훨씬 중요합니다. 물론 디자인이 중요하고 모양이 좋아 보이기를 원하지만 사용자에게 주요 메시지를 전달할 수 없다면 좋은 디자인으로는 차이를 만들 수 없습니다.

먼저 복사본 작성 또한 잠재적 인 설계자가 각 페이지가 통신하려고 시도하는 것을 이해하는 데 도움이됩니다. 따라서 메시징을 강화하는보다 나은 디자인 설계가 가능합니다. Squarespace와 같은 도구로 사이트를 직접 만들지라도 디자인을 선택하기 전에 각 페이지의 내용을 알면 큰 시간을 절약 할 수 있습니다.

디자인에 시간이 다가온다면 적절하게 작성되었는지 확인하기 위해 사본을 수정해야하지만 메시징을 위해 설계되지 않은 디자인 사본을 작성하는 것보다 쉽습니다.

홈 페이지의 경우 헤드 라인이 필요할 수 있습니다. 당신이하는 일을 정확히 설명합니다. 바로 고객을위한 핵심 가치 제안입니다.

공유 전자 메일 합리화

간편하게 추적하고 공동 작업을 수행 할 수있는 기능을 제공합니다. @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@로 < 무엇을 의사 소통해야하는지 알려주십시오.

전초 기지에 대해 우리는 제품의 주요 기능과 이점을 전달하고 잠재 고객이 더 많은 것을 배우도록 장려해야합니다. 우리는 고객 서비스 팀에 대해서도 이야기하고 싶습니다.

그러나 이것은 귀하의 홈 페이지를위한 적절한 설정이 아닐 수도 있습니다. 당신이 레스토랑이라면, 아마도 당신은 메뉴에 대한 링크 또는 예약에 관한 정보를 원할 것입니다. 모든 회사는 서로 다르므로 무엇을 말하고 작성해야하는지 파악하십시오.

빈 페이지로 시작하는 것에 대해 걱정하지 마십시오. 대신, 업계에서 가장 좋아하는 웹 사이트 목록을 작성하고 각 사이트에 대해 좋아하거나 싫어하는 점을 생각해보십시오. 그들이 어떤 종류의 탐색을 사용합니까? 어떤 페이지에 포함됩니까? 그들은 어떤 종류의 이미지를 사용합니까? 바퀴를 재발 명할 필요가 없으며 좋아하는 사이트를 점프 포인트로 사용하면 시작할 수있는 좋은 방법입니다.

마지막 팁:

보통은 적습니다. 귀하의 웹 사이트를위한 끝없는 단락의 단락을 쓰고 싶지는 마십시오 (고객이 기대하지 않는 한!). 웹 사이트 사용법에주의를 기울이면 모든 단어를 읽지 않고 텍스트를 감추고있는 경우가 많습니다. 이것이 대부분의 사람들이 모든 단어를 읽지 않고 온라인 감추기를 읽는 방법이기 때문에 사본을 짧고 중요한 시점에 보관하십시오.

와이어 프레임 개발

와이어 프레임은 웹 사이트의 대략적인 레이아웃입니다. 정말로 디자인이 아닙니다. 이 문서는 색상이나 기타 그래픽을 고려하지 않고 페이지에서 대략적으로 내용을 표시하는 문서입니다. 디자이너와 협력하여 웹 사이트를 제작하는 경우에는 웹 사이트의 일부로 와이어 프레임이 생성됩니다. 디자인 과정. Squarespace 또는 Shopify와 같은 서비스를 사용하여 자신 만의 웹 사이트를 구축하려는 경우 쉽게 와이어 프레임을 만들 수 있습니다.

이 단계에서 겁 먹지 마십시오. 와이어 프레임을 제작하는 데 특별한 도구가 필요하지 않습니다. 종이 한장과 펜으로 사이트의 각 페이지를 스케치 할 수 있습니다. 기억하세요, 당신은 "설계"가 아니며 와이어 프레임이 귀중하지 않아도됩니다. 영감이 필요한 경우, 다른 사이트를 체크하고 각 페이지의 정보를 구성하는 방법을 살펴보십시오. 다른 사이트의 레이아웃을 빌려 자신의 사이트에 대한 영감을 얻는 것이 좋습니다.

펜과 종이를 사용하지 않는 경우 PowerPoint 또는 Keynote를 사용하여 와이어 프레임을 만들 수 있습니다. Balsamiq과 같은 전용 와이어 프레임 도구를 사용하면 프로세스를 쉽게 처리 할 수 ​​있습니다.

전초 기지의 홈페이지 와이어 프레임을 포함 시켰으므로 와이어 프레임의 모양을 알 수 있습니다. 이전 단계에서 작성한 사본과 설계자가 작성하고자하는 그래픽 요소에 대한 아이디어의 스케치를 볼 수도 있습니다.

전초 기지 용 와이어 프레임

디자인 및 빌드

이제 실제로 웹 사이트를 실제로 디자인하고 제작할 차례입니다. 프리랜서 디자이너 나 디자인 회사를 이용한다면 여기에서 프로세스를 인계받습니다.

하지만 대부분의 사람들과 같다고 생각하면 아마 스스로를하고 비용을 통제하에두기를 원할 것입니다. 이 말처럼 들리면 웹 사이트를 디자인하고 호스트하기위한 플랫폼을 선택해야합니다.

먼저, 필요 사항을 고려하십시오. 간단한 한 페이지 웹 사이트 만 있으면됩니까? 블로그를 포함 하시겠습니까? 온라인으로 제품을 판매 할 것이고 장바구니와 같은 것이 필요할 것입니까?

문자 그대로 수백 가지의 선택이 가능하지만 몇 가지 즐겨 찾기 목록 만 나열하므로 너무 많은 시간을 허비하지 않아도됩니다. 당신의 웹 사이트.

WordPress: 이것은 간단한 웹 사이트를위한 훌륭한 저비용 플랫폼입니다. 다양한 디자인 옵션이 있으며 무료로 시작할 수 있습니다. 많은 제품으로 온라인 상점을 운영 할 계획이라면 WordPress를 추천하지 않지만 기본적인 정보 제공 웹 사이트 및 블로그에 적합한 옵션입니다. 수십만 개의 웹 사이트가 WordPress를 사용하므로이 선택 사항으로 너무 멀리 갈 수 없습니다. 그리고 필요한 경우 상거래 기능을 사이트에 추가 할 수있는 옵션이 있습니다.

Shopify:

온라인에서 물건을 판매하는 경우 Shopify가 탁월한 선택입니다. 이 플랫폼에서 전체 온라인 상점을 운영하고 제품, 재고 등을 관리하는 데 필요한 백엔드 도구를 모두 얻을 수 있습니다.

Squarespace:

• Squarespace는 모든 거래의 잭입니다. 이 도구를 사용하여 블로그에서 온라인 상점으로 모든 것을 만들 수 있습니다. 아름다운 디자인 템플릿과 무한한 유연성 덕분에 시작하기에 좋은 선택입니다.
• 전초 기지와는 약간 다른 상황에 처해 있습니다. 기존 회사 인 우리는 사내 디자이너 및 당사 웹 사이트에서 일하는 일부 엔지니어를 보유하고 있습니다. 그러나 그 경우가 아니라면 WordPress 나 Squarespace 중 하나를 선택하여 웹 사이트를 구축 할 수 있습니다. 테스트 및 반복
• 새로운 웹 사이트가 시작되고 실행되면 작업이 완료되지 않습니다. 실제로, 그것은 단지 시작입니다! 그 말을 듣고 싶지는 않겠지 만 사이트가 실제로 라이브가되었으므로 실제로 작성한 사본이 실제로 작동하는지 알아야합니다. 귀하의 사본은 고객이 원하는 것을 할 수있게합니까? 올바른 디자인과 사본을 찾는 것은 가지고있는 고객의 수를 늘리고 사이트에 올 모든 잠재 고객을 최대한 활용할 수 있도록합니다. 이 모든 것을 이해하려면 실행해야합니다. 몇 가지 검사. 이를 A / B 테스트라고합니다. 현재 웹 사이트 (A- 버전)를 대안 (B- 버전)에 맞출 때입니다. 그런 다음 더 나은 버전을 측정합니다. 매출 증대, 비즈니스 통화 증가 또는 단순히 고객이 다른 페이지를 클릭하도록 유도 할 수 있습니다.

A / B 테스트에 대한 자세한 안내는 여기에서 다루지 않겠지 만, 테스트를 끝내기 위해서는 몇 가지 추가 도구가 필요합니다.

실험 전환 또는 시각적 웹 사이트 최적화 도구를 권장합니다. 두 가지 모두 견고하고 저렴한 선택으로 테스트를 쉽게 수행 할 수 있습니다.

Google Analytics와 같은 분석 도구 (무료!)를 설치하여 웹 사이트를 방문한 사람들의 유형과 해당 웹 사이트 웹 사이트를 시작하고 실행하는 것에 대해 추가 질문이나 의견이 있으면 주저하지 말고 의견에 남겨주십시오.