Articulate Marketing에서 웹사이트를 구축하는 방법

먼저 HubSpot CMS 웹사이트를 구축합니다. HubSpot이 무엇인지 모르더라도 걱정하지 마십시오. 쉬운 소개를 위해 여기로 가십시오. 아직 저희와 함께 하시는 분들을 위해 오늘 저희는 고객을 위한 웹사이트 구축 프로세스를 간략하게 설명합니다.

이 기사는 Articulate Marketing의 스튜디오 책임자인 Ioana Negulescu가 주최한 웨비나 중 하나를 기반으로 합니다. 동영상을 보고 아래 슬라이드를 다운로드할 수 있습니다.

웹사이트 구축 과제

새 웹사이트 구축(또는 기존 사이트 마이그레이션)과 관련하여 초기 단계가 있는 경우가 많습니다. 우리는 약간의 두려움을 완화할 필요가 있습니다. 이전 에이전시와의 경험으로 인해 이전에 화상을 입은 고객이 있는 것은 드문 일이 아닙니다.

우리가 들을 때...

'우리는 마지막 웹사이트가 너무 고통스러웠기 때문에 새로운 웹사이트를 얻는 것에 대해 걱정하고 있습니다.'

우리는 이것을 ...

우리는 이것을 너무 많이 들었습니다. 그래서 우리는 더 잘하기 위해 노력합니다.

예를 들어 Gantt 차트를 사용하는 것보다 이정표 를 사용하는 것을 선호합니다. 우리가 집중하는 것 중 하나는 진행 상황에 대한 지속적인 업데이트와 함께 투명한 프로세스를 갖는 것입니다. 이것은 우리 고객들에게 안정감을 줍니다.

웹 디자인 과정에서 우리에게 정말 정말 중요한 한 가지는 이메일을 통한 영상 통화 입니다. 고객의 반응을 측정할 수 있기 때문에 중요합니다. 그들이 조금 조용하다면, 매우 흥분하면 등등. 그렇게 하면 우리는 그들의 기대에 부합하는 추천을 할 수 있습니다. 그리고 물론 그들이 가질 수 있는 모든 질문에 대답하십시오.

우리가 들을 때...

'우리는 개발자를 너무 많이 쫓아가려고 했지만, 그들은 우리에게 돌아오지 않을 것입니다.'

우리는 이것을 ...

진행 상황을 표시하기 위해 정기적인 프로젝트 관리 통화를 사용하며 첫날부터 일정에 전화를 겁니다. 이러한 프로젝트 관리 통화 중에 우리는 새로운 작업을 제시하고 방해 요소를 식별합니다.

디자이너와 개발자는 실제로 작업을 완료하는 데 시간이 필요하므로 이러한 모든 호출에 참석하는 것이 항상 의미가 있는 것은 아닙니다. 관련성이 있을 때 가져옵니다.

우리가 들을 때...

'새 웹사이트가 우리의 기대에 미치지 못한다면?'

우리는 이것을 ...

웹사이트 디자인 프로젝트를 시작하기 전에 마케팅 전략 기반을 살펴봅니다. 이것은 이 단계에서 우리가 클라이언트의 고객, 구매자의 여정 및 비즈니스의 마케팅 목표에 대해 배우기 때문에 매우 중요합니다. 이것은 우리가 웹사이트에 대해 내리는 많은 전략적 결정을 알려주고 처음부터 기대치를 설정합니다.

그런 다음 브랜드 아키텍처로 이동합니다. 여기에서는 웹 사이트의 기본 사항을 설명합니다. 색상, 이미지 또는 일러스트레이션, UX/UI 요소, 글꼴 - 웹사이트의 전반적인 미학. 이것은 매우 협력적인 프로세스입니다. 우리 고객은 모든 단계에 참여 하므로 고객의 의견과 요구 사항이 최종 제품에 포함됩니다.

예: HTG

우리는 HTG용으로 수상 경력에 빛나는 웹사이트를 구축했으므로 이를 전체에서 예제로 사용할 것입니다.

그들은 우리가 그들에게 처음 이야기했을 때 이러한 두려움을 표현하고 어려움을 설명했습니다. 다음은 B2B 기술 회사에서 매우 일반적인 문제입니다.

• 야심찬 비즈니스 성장 목표
• 오래된 웹사이트(및 브랜드)
• 리드 캡처 기회가 거의 없음
• 투박한 탐색
• 열악한 사용자 경험
• 사이트 성능 저하

이것이 당신처럼 들리면 여기로 이동하여 웹 사이트에 점수를 매기십시오.

명확한 과정

여기 우리의 과정이 있습니다. 간단히 말해서. 이 이미지를 클릭하면 더 자세히 볼 수 있습니다:

HTG의 예로 돌아가 보겠습니다. 그들과 함께 우리는 일반적인 7단계 프로세스를 따랐습니다.

1. 킥오프

시작은 웹 사이트 프로젝트의 첫 번째 상호 작용입니다. 그 통화 중에 우리는 디자인과 브랜드 열망에 대한 고객의 선호도를 측정하려고 노력합니다. 우리는 이러한 선호도를 Articulate 제작 웹사이트의 궁극적인 목표인 잘 작동하는 마케팅 엔진을 구축하는 것과 전략적으로 일치시키고자 합니다.

2. 무드보드 및 웹사이트 구조

여기에서 두 가지 내부 프로세스를 실행합니다. 하나는 무드보드, 글꼴 추천, 색상 추천, 이미지 등을 함께 모으는 것입니다.

다른 하나는 마케팅 카피라이터 팀과 함께 사이트 맵 권장 사항을 작성하는 것입니다. 이것은 우리가 구축해야 할 탐색 및 페이지의 구조입니다.

그런 다음 첫 번째 중요한 이정표인 고객 검토 전화를 받습니다. 각 단계가 끝나면 검토 요청이 있습니다. 모든 것이 승인되면 다음 단계로 넘어갑니다. 그렇지 않은 경우 돌아가서 반복합니다.

3. 초기 설계 및 와이어프레임

여기서 우리는 웹사이트의 미학을 보여주는 방식으로 홈페이지를 디자인합니다. 일반적으로 클라이언트가 선택할 수 있는 몇 가지 다른 옵션을 만듭니다. 우리는 모듈 방식으로 디자인할 때 이것을 가장 중요한 '레고 브릭'이 어떻게 생겼는지 보여주는 단계라고 생각합니다.

동시에 우리는 페이지 구조를 중심으로 전략을 세웁니다. 즉, 어떤 콘텐츠가 어떤 페이지로 이동합니까? 어떤 레고 브릭이 필요할까요?

그런 다음 우리 팀은 디자인 요소가 없는 웹사이트 페이지의 대략적인 스케치와 같은 와이어프레임을 만듭니다.

4. 모든 모듈을 디자인하고 웹 사본 초안 작성

이 단계에서 우리 카피라이터 팀은 카피 초안을 시작하고 디자인 팀은 웹사이트에 필요한 모든 모듈을 디자인합니다. 항상 모든 사본을 고객의 웹사이트에 작성하는 것은 아니지만 그렇게 할 때 사전에 동의한 사이트맵을 기반 으로 투명한 페이지당 비용을 청구합니다 .

5. 웹사이트 개발

모듈 디자인을 현장에서 보여주기 위해 lorem ipsum 사본과 자리 표시자 이미지 가 있는 모든 페이지를 개발하고 구축하므로 고객이 최종 결과에 대한 적절한 아이디어를 얻을 수 있습니다.

개발자와 함께 일할 때 모든 개발자에게 몇 가지 관련 질문을 하고 싶습니다.

• 웹사이트를 코딩하기 위해 취하는 주요 단계는 무엇입니까?
• 코드가 깔끔한지 어떻게 확인합니까? (템플릿 웹사이트의 주요 문제입니다.)
• 속도와 전반적인 성능을 언제, 얼마나 자주 확인합니까?
• 웹 사이트가 개발된 후 페이지를 구축하는 방법은 무엇입니까? 페이지를 구축하는 사람에게 친숙한 사용자 경험입니까?

또는 Articulate로 작업하는 경우 '루빅 큐브를 푸는 가장 빠른 시간은 언제입니까?' 우리는 그러한 질문을 환영합니다.

우리의 개발 프로세스는 작업을 계획하는 Notion에서 시작됩니다. 그런 다음 탐색 및 일부 전역 모듈에 대한 기본 코드를 설정합니다. 다음으로, 우리는 특정 웹사이트를 위해 구축해야 하는 모든 디자인 요소와 기능에 대한 품질 보증 체크리스트를 준비합니다. 이것은 전체 빌드에서 우리를 올바르게 유지합니다.

HTML의 모든 모듈을 스캐폴딩한 다음 스타일을 살펴보기 시작합니다. 따라서 벽돌, 석고, 그림 및 장식을 생각하십시오.

전체적으로 우리는 모든 것을 테스트하고 성능을 확인하며 개선합니다. 종종 우리는 더 나은 일을 하는 방법을 배우고 그 전문 지식을 다음 웹사이트에 제공할 것입니다.

6. 페이지 채우기

이 단계에서 몇 번의 반복 작업과 고객 검토를 거쳐 승인된 사본과 이미지로 페이지를 채웁니다. 이 단계에서 웹 사이트는 출시 준비가 거의 완료되었습니다. 또 다른 고객 검토 단계를 거친 후 철저한 출시 전 QA 체크리스트를 실행합니다.

7. 발사!

웹사이트가 제대로 작동하고 스테이징에서 라이브로 중단된 부분이 없는지 확인하는 것이 매우 중요하기 때문에 출시 후 또 다른 QA 체크리스트를 실행합니다.

마침내, 물론, 우리는 축하합니다!

훌륭한 웹사이트 디자인을 위한 10가지 팁

다음은 우리가 수년에 걸쳐 배운 몇 가지 규칙과 수십 가지 이상의 웹사이트 빌드입니다.

1. 선호도를 두 번째로, 페르소나의 문제점을 먼저 두십시오.
2. 단순히 서비스를 나열하는 것보다 고객을 돕는 방법에 집중하세요.
3. 바퀴를 재발명하려고 하지 마십시오. 효과가 있는 것은 이유가 있습니다. 예를 들어 스크롤 없이 볼 수 있는 부분에만 초점을 맞추는 것은 잘못된 생각입니다. 스크롤 방법은 누구나 알고 있습니다. 그것에 대한 웹사이트도 있습니다: http://abovethefold.fyi/
4. 탐색을 짧고 단순하게 유지하십시오.
5. 버튼을 가치 중심으로 만드십시오. 가능하면 일반 복사를 피하십시오.
6. 더 많은 컨텍스트가 있는 페이지가 있는 경우 항상 관련 페이지에 링크합니다.
7. 주요 페이지에서 너무 많은 외부 링크를 사용하지 마십시오. (당신의 블로그는 다른 이야기입니다.)
8. 항상 하나 이상의 CTA(클릭 유도문안)로 페이지를 끝내고 사용자를 프로세스의 다음 단계로 안내합니다.
9. 연락처 페이지의 힘을 과소평가하지 마십시오. 너무 자주 출구 지점이지만 사람들을 그 페이지에 계속 머물게 하고 싶습니다.
10. 적은 것이 더 많다!

보너스: 로고가 나쁜 디자인을 지시하도록 하지 마십시오.

우리가 HTG의 웹사이트를 디자인할 때 그들의 로고는 구식이었고 더 이상 우리가 원하는 브랜드에 맞지 않았습니다. 우리는 몇 가지 간단한 변경으로 그것을 현대화했습니다:

여기 생각할 거리가 있습니다. 디지털 시대에 브랜드는 로고가 아니라 웹사이트가 될 가능성이 높습니다. 따라서 웹 사이트를 먼저 생각하고 로고를 두 번째로 생각하십시오.

출시 후에는 어떻게 됩니까?

괜찮은. 새로운 웹사이트가 있습니다. 이제 뭐? 앞서 말했듯이 Articulate에서는 웹사이트를 마케팅 엔진으로 간주하므로 출시와 함께 참여를 종료할 필요가 없습니다. 사실, 이것은 대부분의 고객에게 있어 여정의 시작일 뿐입니다.

블로그, 필라 페이지, 제한된 제안 및 '압착' 페이지와 같은 새로운 콘텐츠를 만드는 것부터 행동 추적 및 다변량 테스트 실행에 이르기까지 웹사이트에서 할 수 있는 일은 훨씬 더 많습니다.

스니크 피크: Nucleus

그렇다면 어떻게 HubSpot 웹사이트 를 얻을 수 있습니까? 맞춤형 웹 사이트 구축과 같은 몇 가지 옵션이 있지만 한 가지 방법은 HubSpot 테마를 사용하는 것입니다. Nucleus는 Articulate의 고유한 테마입니다.

테마는 훨씬 더 정교한 웹사이트 템플릿과 같습니다. 우리 웹사이트는 Nucleus를 기반으로 하며 다양한 디자인 스타일을 가진 여러 고객에게 사용되었습니다. 2022년 HubSpot Marketplace에서 출시할 예정입니다. Nucleus를 사용하면 고객을 위해 몇 주, 심지어 며칠 만에 고도로 최적화된 웹사이트를 구축할 수 있습니다. 모든 것이 오히려 흥미진진합니다!

>> Nucleus를 탐색하려면 여기를 클릭하십시오. <<