새 웹사이트를 디자인할 때 따라야 할 단계

게시 됨: 2021-04-19

훌륭한 웹 디자인은 뛰어난 미학과 뛰어난 기능을 결합하는 것입니다. 훌륭하게 디자인된 웹사이트를 만들려면 다양한 기술, 약간의 창의적인 감각, 시작 단계의 조직이 필요합니다!

이 가이드는 멋진 웹사이트를 만드는 데 도움이 되는 것을 목표로 합니다. 보기에도 좋고 더 잘 작동하는 제품입니다. 가능한 최고의 웹사이트를 얻기 위해 취해야 하는 몇 가지 주요 단계를 살펴보겠습니다. 시작하자!

목적 및 연구

웹 디자인 프로세스의 창의적인 부분으로 넘어가기 전에 먼저 설정해야 할 몇 가지 사항이 있습니다. 핵심은 타겟 고객을 이해하는 것입니다. 이것은 매우 중요합니다. 결국, 대상 인구 통계의 요구 사항을 충족하지 않는 웹 사이트에 시간과 돈을 투자하는 것은 의미가 없습니다.

이 첫 번째 단계는 꽤 까다로울 수 있습니다. 청중이 무엇을 원하는지 알고 있다고 가정하기 쉽습니다. 그러나 처음에 이것을 실제로 조사하는 데 시간을 들이면 프로젝트 후반부에 많은 시간을 절약할 수 있고 웹사이트가 성공할 가능성이 높아집니다. 그리고 잊지 마세요. 클라이언트를 위한 웹사이트를 디자인하고 있다면 이 프로세스에 클라이언트를 참여시켜야 합니다!

특히 웹사이트가 클라이언트용인 경우 고려해야 할 몇 가지 핵심 사항은 다음과 같습니다.

웹사이트는 그 자체로 독립된 항목입니까, 아니면 보다 포괄적인 마케팅 전략의 일부를 구성합니까?
이미 강력한 브랜드가 존재합니까? 그렇다면 웹사이트에 이를 반영하는 것이 중요합니다. 브랜드가 이미 확립한 스타일과 함께 편안하게 어울리지 않아도 되는 현대적인 디자인 트렌드에 집중하려는 유혹이 있을 수 있기 때문에 이는 때때로 어려운 일이 될 수 있습니다. 새로운 사이트가 처음부터 구식으로 보이지 않는 것이 중요하지만, 브랜드가 이미 확립한 핵심 디자인 원칙에서 너무 멀리 벗어나서도 안 됩니다(브랜드가 이미지를 전면적으로 재검토할 의사가 있는 경우 제외).
귀하 또는 귀하의 고객의 경쟁자를 살펴보는 것도 매우 중요합니다. 새 사이트가 성공하는 데 필요한 모든 것을 통합할 수 있도록 강점과 약점을 식별하십시오. 경쟁을 살펴보는 것도 잠재적으로 중요한 기능을 놓치지 않도록 하기 때문에 도움이 될 수 있습니다.

조사가 완료되면 이제 디자인하는 모든 새 사이트가 클라이언트(또는 물론 자신)의 요구 사항을 충족할 것이라는 확신을 가질 수 있습니다. 연구는 때때로 지루하게 느껴질 수 있습니다. 특히 자신이 창의적인 주스로 가득 차 있다고 느끼고 실제 화면에 무언가를 보여주고자 하는 욕구가 압도적일 때 더욱 그렇습니다. 아무리 유혹적이라도 이 단계를 건너뛰지 마십시오. 앞으로 많은 시간을 절약할 수 있습니다.

타임라인

필수 사항은 아니지만 웹사이트를 완료하는 데 필요한 작업에 대한 타임라인을 만드는 것이 좋습니다. 타임라인 내의 이정표는 빈 페이지에서 완성된 웹 사이트로 이동하는 데 필요한 프로세스를 명확히 하는 데 도움이 될 수 있으며 처음부터 프로젝트를 정확하게 인용하는 데 도움이 될 수 있습니다. 더 큰 사이트의 경우 이정표가 있는 타임라인을 사용하면 팀 구성원 간에 작업을 보다 효율적으로 나눌 수 있으며 모든 사람이 자신의 작업(및 마감일!)이 전체 그림에 어떻게 맞는지 확인할 수 있습니다.

이 과정을 돕기 위해 Asana와 같은 도구를 사용하는 것이 유용할 수 있습니다. 웹 사이트 빌드의 각 요소를 작업으로 조심스럽게 분해하면 균열을 통해 누락되는 것이 없으며 클라이언트에게 웹 사이트 완료 날짜를 보다 자신 있게 제공할 수 있습니다. 새 웹 사이트가 기존 웹 사이트를 대체하는 경우 이전 페이지에서 새 페이지 등으로 리디렉션해야 할 수 있는 '라이브' 전환을 관리하기 위해 제시간에 구축하는 것을 잊지 마십시오.

마지막으로, 항상 약속을 지키지 않고 전달하는 것을 잊지 마십시오. 대부분의 프로젝트와 마찬가지로 웹 사이트는 항상 처음에 예상한 것보다 시간이 더 오래 걸리므로 경험에 따르면 초기 추정치에 20%의 시간을 추가하여 자신이 실행되고 있다는 오래된 함정에 빠지지 않도록 하는 것이 좋습니다. 처음부터 시간이 부족하여 마감일을 놓칠 가능성이 있습니다.

디자인 프로세스의 다음 단계는 사이트맵을 만드는 것입니다. 사이트가 작더라도 하나 있으면 좋습니다. Sitemap은 새 사이트의 레이아웃을 완전히 시각화하는 데 도움이 될 뿐만 아니라(따라서 중요한 것을 놓치거나 혼란스러운 탐색 구조를 가지지 않도록 보장) 궁극적으로 사이트가 게시될 때 Google이 사이트를 크롤링하여 사이트를 개선하는 데 도움이 됩니다. 검색 엔진 최적화

일부 디자이너는 자신이 좋아하는 일러스트레이션 도구를 사용하여 사이트 맵을 스케치하는 것을 좋아하지만 WriteMaps와 같은 전용 사이트맵 도구를 사용하여 삶을 더 쉽게 만들 수도 있습니다.

와이어프레임, 모형 및 프로토타입

Wikipedia는 웹사이트 와이어프레임을 '웹사이트의 골격 프레임워크를 나타내는 시각적 가이드'로 정의합니다. 웹사이트 와이어프레임을 만드는 것은 일반적으로 웹사이트를 디자인할 때 첫 번째 단계로 사이트 레이아웃에 대한 중요한 명확성을 얻는 데 도움이 됩니다. 와이어프레임은 제안된 디자인에 대해 훨씬 더 가시적인 시각화를 제공하지만 결정적으로 페이지의 실제 모형보다 훨씬 더 빠르게 생성할 수 있기 때문에 클라이언트 및 팀과 새 사이트에 대해 논의할 때 사용할 수 있는 훌륭한 도구입니다. 이를 통해 이해 관계자는 사이트에 많은 시간이 소요되기 전에 설계를 비판할 수 있습니다.

모형은 와이어프레임을 다음 단계로 끌어 올립니다. 일부 디자이너는 와이어프레임(회색조를 고수할 가능성이 있음)의 약간 더 살찐 버전인 사이트의 '완전한 뼈대' 모형을 만들기로 선택할 수 있지만 다른 디자이너는 이미지, 색상 및 일부 기능을 포함하는 전체 모형을 만들기로 선택할 수 있습니다. 목업을 얼마나 밀어붙이고 싶은지는 제안하는 디자인에 대한 자신감에 달려 있습니다. 클라이언트가 여전히 사이트 디자인의 상당 부분을 변경하기를 원할 수 있다고 생각되면 제안된 디자인/기능을 전달하는 데 필요한 만큼 목업을 단순하게 유지하는 것이 합리적입니다.

귀하와 귀하의 클라이언트가 디자인에 확신을 갖게 되면 페이지 또는 전체 웹사이트의 디자인을 완전히 보여주는 전체 모형을 만들 수 있습니다.

목업 프로세스의 속도를 크게 높일 수 있는 수많은 온라인 도구가 있습니다. 여기에는 와이어프레임에서 전체 웹사이트 목업으로 바로 이동할 수 있는 Mockflow 및 Moqups가 포함됩니다.

목업이 웹사이트의 기능을 완전히 전달하는 것을 허용하지 않더라도 사이트 디자인과 관련하여 귀하, 귀하의 팀 및 클라이언트가 모두 100% 동일한 페이지에 있음을 보장합니다. 그리고 생계를 위해 사이트를 코딩하는 우리 중 누구라도 알겠지만 목업에서 사이트 디자인을 변경하는 것이 최종 사이트 자체에서보다 훨씬 쉽습니다!

취할 수 있는 마지막 단계는 프로토타입 웹사이트를 구축하는 것입니다. 전통적으로 이것은 시간이 많이 소요되었을 것입니다(그리고 최종 사이트 자체를 구축하는 것과 거의 동일합니다). 그러나 Framer와 같은 도구 덕분에 이제 기능적 요소를 목업 디자인에 도입하여 고객이 사이트 작동 방식에 대한 '느낌'을 실제로 얻을 수 있도록 하여 목업을 다음 단계로 끌어올리는 것이 그 어느 때보다 쉬워졌습니다.

이 섹션의 마지막 메모로 너무 많은 선택이 좋지 않을 수 있음을 기억할 가치가 있습니다. 궁극적으로 클라이언트가 무엇을 말하든 귀하는 디자인 전문가이며 팀과 함께 웹사이트 디자인에서 최적의 결과를 제공하는 것이 무엇인지 가장 잘 이해할 것입니다. 이 때문에 클라이언트가 선택할 수 있는 다양한 옵션을 제공하여 가장 잘 작동한다고 생각하는 색상과 레이아웃을 제시하고 혼동을 주지 않는 것이 더 나을 때가 있습니다. 이렇게 하면 클라이언트가 결합되어 호환되지 않을 수 있는 요소에서 '선택 및 선택'이 끝나는 것을 방지할 수 있습니다. 더 적은 것이 가장 확실하게 더 많을 수 있습니다!

훌륭한 콘텐츠 작성

웹사이트 디자인이 아무리 좋아도 사이트의 문구가 원하는 메시지를 전달하지 못하면 궁극적으로 의미가 없습니다. 이 때문에 처음부터 프로젝트에 카피라이터를 참여시키는 것이 좋습니다. 그들은 독자의 관심을 끌만한 콘텐츠를 만드는 데 도움을 줄 수 있으며, 그런 다음 이 콘텐츠가 사이트에 최적의 방식으로 배치되도록 그들과 협력할 수 있습니다.

예를 들어, 카피라이터는 제품/서비스를 한 문장으로 전달하는 멋진 태그 라인을 생각해 낼 수 있습니다. 이것은 분명히 중요한 정보이지만 프로젝트의 마지막 단계에서 카피라이터만 참여시키면 이 텍스트를 표시하기에 적절한 위치에 디자인하지 않았다는 것을 알 수 있습니다. 분명히 그것은 큰 실수가 될 것입니다.

카피라이팅은 웹사이트에서 종종 간과되는 요소입니다. 우리 모두는 시각적 매력에 빠져들지만 카피는 결국 아무도 호의를 보이지 않는 '마지막 순간'에 추가될 수 있습니다.

처음부터 카피라이터를 참여시키는 또 다른 이유(의심스러운 경우)는 사이트가 SEO 관점에서 최적화되었는지 확인하는 것입니다. 복사는 웹사이트의 SEO를 만들거나 깨뜨릴 수 있으므로 중요하지 않다고 생각되면 다시 생각하십시오! 키워드와 핵심 문구를 올바른 방식으로 사용하면 검색 엔진이 SERP에서 더 높은 우선 순위를 부여할 가능성이 더 높아집니다. Google Keyword Planner, Screaming Frog's SEO Spider, Google Trends 등과 같이 SEO를 개선하는 데 도움이 되는 몇 가지 훌륭한 도구가 있습니다.

그리고 당신이 카피라이터를 고용할 여유가 없고 '혼자 일하기'를 생각하고 있다면 당신의 삶을 더 쉽게 만들어줄 수 있는 몇 가지 글쓰기 리소스와 도구를 확인하고 싶을 것입니다. 첫 번째로 살펴볼 가치가 있는 도구는 사용하기 쉬운 쓰기 도우미인 Grammarly입니다. Grammarly는 오타를 방지하고 텍스트 형식을 개선하는 데 도움이 될 수 있습니다(언어학적 관점에서).

두 번째로 살펴볼 것은 도구라기보다는 Storybrand라는 마케팅 리소스에 가깝습니다. Storybrand는 '메시지를 명확하게'하는 데 도움이 되는 워크샵을 운영합니다. 이렇게 하면 명확하고 모호하지 않은 용어로 귀하의 비즈니스에 대해 전달하는 메시지를 강화하여 웹사이트의 성공을 급증시킬 수 있습니다. 워크샵 비용이 너무 비싸다면 마케팅 프레임워크에 대한 책을 확인하십시오.

비주얼

웹사이트 방문자의 두뇌에 가장 먼저 영향을 미치는 것은 웹사이트의 시각적 요소입니다! 따라서 이것들이 매우 중요하다는 것은 자명합니다.

디자이너로서 사용하려는 시각적 개체에 대한 구체적인 생각이 있을 것입니다. 애니메이션 그림에서 제품 사진 또는 브랜드와 제품을 나타내는 사진에 이르기까지 다양합니다. 무엇을 사용하기로 선택하든 이러한 영상이 고품질인지 확인하십시오. 그렇지 않으면 다른 모든 노력이 낭비됩니다.

비주얼은 경쟁에서 자신을 진정으로 구별할 수 있는 핵심 영역입니다. 이 기회를 낭비하지 마십시오! 프로젝트를 인용하고 수락하기 전에 클라이언트와 함께 사용하려는 비주얼에 대해 논의하십시오. 사용할 수 있는 사내 이미지 라이브러리가 있는지 또는 필요한 이미지를 얻기 위해 사진 촬영을 계획하고 있는지 알아보십시오. 그렇지 않고 적절한 품질의 이미지가 없는 경우 Shutterstock과 같은 사진 라이브러리에서 합리적인 '일반' 이미지를 찾을 수 있습니까?

마지막으로, 개발 단계에서 이러한 이미지의 크기에 주의하고 사이트 속도가 느려지지 않도록 최적화되어 있는지 확인하십시오. TinyPNG와 같은 도구를 사용하는 것은 충분히 가치가 있습니다. 그렇지 않으면 호스트가 Pressidium에서 사용하는 Image Smacking 도구와 같은 동등한 서비스를 제공할 수도 있습니다.

레이아웃이 완료되면 작성된 적절한 이미지를 복사하여 흥미로운 이정표에 도달했습니다. 개발! 이것이 수반하는 것과 주의해야 할 몇 가지 함정에 대해 살펴보겠습니다.

개발

빌드를 직접 처리하지 않는 한 개발자가 작업을 수행할 수 있도록 사이트 디자인을 개발자에게 제공해야 합니다. 디자인이 명확하고 필요한 추가 기능에 대한 설명이 명확할수록 개발자가 시각화한 사이트를 더 쉽게 제공할 수 있습니다. Framer와 같은 도구를 사용하여 만든 프로토타입 사이트가 바로 여기에 있습니다.

빌드하는 동안 많은 개발자가 클라이언트에 전달할 수 있는 개발 링크를 제공하여 빌드가 어떻게 진행되는지 미리 볼 수 있습니다. 표면적으로는 작업이 진행 중임을 항상 보여줄 수 있어 좋은 아이디어처럼 보입니다(특히 클라이언트가 사이트를 완료해야 한다는 압박감에 시달리고 있는 경우). 많은 개발자는 작업이 진행 중임을 클라이언트에게 보여주기 위해 일부 개발 링크를 만드는 경향이 있습니다.

이렇게 하고 싶은 생각이 든다면 잠시 멈추고 이것이 정말 좋은 생각인지 생각해 보십시오. 대부분의 클라이언트는 개발자가 따라야 하는 워크플로를 이해하지 못하며 결국 몇 가지 쿼리와 함께 변경 요청으로 다시 돌아올 가능성이 높습니다. 이 단계에서 이러한 문제를 처리해야 하는 것은 역효과를 낳고 실시간 수액이 될 수 있으므로 전체 실행을 위해 자리에 앉기 전에 최종 사이트가 준비될 때까지 기다리는 것이 가장 좋습니다.

품질 테스트

최종 사이트가 준비되었으므로 이제 라이브 시작을 고려하기 전에 몇 가지 확인을 수행해야 합니다. 이는 매우 광범위할 수 있으며, 누락된 항목이 없는지 확인하는 데 도움이 되도록 체크할 수 있는 재사용 가능한 체크리스트를 만드는 것이 좋습니다. 특정 순서 없이 확인해야 할 사항은 다음과 같습니다.

HTML 및 CSS 유효성 검사: W3C HTML Validator 및 CSS Validator와 같은 도구를 사용하여 HTML 및 CSS의 유효성을 검사합니다. W3C는 또한 귀하의 웹사이트가 다른 언어로 쉽게 번역될 수 있는지 확인하는 데 도움이 되는 국제화 검사기를 제공합니다.
링크: 이 단계에서는 모든 내부 및 외부 링크가 제대로 작동하는지 확인하는 것이 필수적입니다.
문법 및 맞춤법: 카피라이터가 제공한 문서에서 텍스트를 복사하여 붙여넣은 것이 좋습니다. 그럼에도 불구하고 실수가 발생할 수 있으므로 다시 읽는 것이 시간 가치가 있습니다.
양식: 이 작업을 예상대로 확인하고 제출물이 도착합니다. 사이트가 가동되면 이 양식을 다시 테스트한 다음 클라이언트에게 향후 테스트 일정을 월 단위로 예약하도록 지시하는 것이 좋습니다.
로드 시간: 빠른 웹사이트는 필수입니다. WebPageTest, GTMetrix, PageSpeed Insights 또는 Pingdom과 같은 도구를 사용하여 로드 시간이 빠르고 좋은지 확인할 수 있습니다. 귀하의 사이트가 라이브 서버로 사용되지 않을 개발 서버에서 호스팅되는 경우 사이트가 라이브가 될 때 다시 테스트하고 싶을 것입니다.
모바일 응답성: 웹사이트가 모든 종류의 장치에서 올바르게 표시되는지 확인합니다. BrowserStack과 같은 도구를 사용하여 이를 수행할 수 있습니다.
기능: 사이트에 문의 양식과 같은 것 외에 고급 기능이 있는 경우 이러한 기능을 신중하게 테스트해야 합니다. 예를 들어 WooCommerce 사이트를 시작하는 경우 테스트 프로세스는 브로셔 스타일 웹 사이트보다 더 집중적이어야 합니다. WooCommerce를 예로 사용하여 결제 게이트웨이, 장바구니 기능, 프로모션 코드와 같은 작동 방식 등을 테스트합니다. 테스트 테스트 및 다시 테스트!
시각적 확인: 색상 팔레트와 간격, 여백, 패딩 등의 일관성을 살펴보십시오. 타이포그래피 및 이미지 위치 지정, 해상도 및 최적화도 마찬가지입니다.
브라우저 동작: 다음 목록은 여러 브라우저와 장치에서 웹사이트의 동작을 확인하는 것입니다.
SEO: SEO를 다시 확인하십시오! 여기에는 사용 중인 제목, 단락, 목록 및 기타 유형의 태그와 같은 의미 체계의 모든 요소와 메타 제목 및 설명, 소셜 미디어용 Open Graph 설정이 포함됩니다.

사이트가 예상대로 작동하고 원하는 만큼 좋아 보인다면 이제 시작할 준비가 되었다고 생각할 수 있습니다. 실제로 프로젝트에 참여하지 않은 5명 정도의 사람들이 사이트를 테스트하도록 하는 것이 좋습니다. 이상적으로는 이러한 사용자가 귀하보다 '기술 지향적'이 덜할 것입니다. 당신은 신선한 눈이 무엇을 집어낼 수 있는지에 놀랄 것입니다. 이렇게 하면 출시 후 '실제' 고객과의 문제를 피할 수 있고 사이트의 흐름을 더욱 개선할 수 있는 기회를 얻을 수 있습니다.

시작하다

이거 야! 트래픽 양이 적을 것으로 예상되는 하루 중 사이트를 시작하는 것이 가장 좋습니다. Cloudflare와 같은 DNS 공급자를 사용하면 DNS 캐싱 문제를 방지할 수 있습니다. 또한 개발자가 근처에 있을 때 시작하여 문제가 발생하면 도움을 줄 수 있도록 하는 것이 가장 좋습니다.

이제 라이브 중이므로 사이트를 다시 확인하는 데 시간을 할애하고 결함을 발견해도 걱정하지 마십시오! 균열을 통해 떨어지는 것을 피하는 것은 거의 불가능하지만 철저한 점검 목록을 사용하면 대부분의 주요 항목이 예상대로 작동하는지 확인하는 데 도움이 됩니다.

결론

좋은 웹사이트를 디자인하는 것은 방대한 작업이며 당면한 작업에 약간 겁을 먹기 쉬운 작업입니다. 작업을 관리 가능한 덩어리로 나누고 너무 얽매이기 전에 실제로 계획을 세우는 것은 프로세스를 더 성공적일 뿐만 아니라 즐겁게 만드는 데 실제로 도움이 될 수 있습니다.

행운을 빕니다!