웹 사이트 디자인 방법

01 of 10

연구

잠재 고객이 방금 웹 사이트를 디자인하라고 요청했지만 어디서부터 시작합니까? 프로젝트가 원활하게 진행될 수 있도록하기 위해 따라야 할 특정 프로세스가 있습니다. 포함 할 웹 사이트 특정 단계가 있는 표준 그래픽 디자인 과정을 반영 합니다 .

그래픽 디자이너는 코딩을 포함하여 전체 디자인을 직접 선택할 수 있습니다. 그러나 세부 정보를 제공하는 팀을 모으고 싶을 수도 있습니다. 웹 개발자와 SEO 전문가가 귀사의 프로젝트에 중요한 도움이 될 수 있습니다.

모든 것이 연구로 시작됩니다.

대부분의 디자인 프로젝트와 마찬가지로 웹 사이트를 만들 때 첫 번째 단계는 연구를 수행하는 것입니다. 이 연구 중 일부는 고객의 요구 사항을 이해하기 위해 고객과 함께 수행됩니다. 또한 업계 및 경쟁 업체에 대해 더 자세히 알아야 할 것입니다.

고객과 면담 할 때 가능한 한 사이트의 윤곽을 개발하고 결국 설계하도록 도와야합니다. 여기에는 대상 고객, 목표, 창의적 방향 및 고객에게 제공 할 수있는 것에 영향을 줄 수있는 기타 변수 (예 : 예산 및 기한)에 대한 질문이 포함됩니다.

귀사의 업계 및 시장 조사가 동시에 이루어질 것입니다. 고객과의 만남을 준비하려면 업계에 대한 아이디어가 있어야합니다. 그들의 필요를 알아 낸 후에, 당신은 조금 더 깊게 보이기를 원할 것입니다.

수행되는 연구의 수준은 고객의 예산 및 업계에 대한 기존 지식에 따라 달라집니다. 현장의 다른 웹 사이트가 어떤 모습인지 쉽게 볼 수 있습니다. 더 큰 프로젝트의 경우 포커스 그룹이있는 심층 연구와 같을 수 있습니다.

02 중 10

브레인 스토밍

프로젝트가 무엇인지 알게되면 아이디어를 수집 할 시간입니다. 브레인 스토밍은 시작할 수있는 좋은 곳 입니다. 귀하의 첫 번째가 될 완벽한 아이디어를 찾는 것보다 웹 사이트의 모든 아이디어 또는 개념을 버리십시오. 나중에 언제든지 범위를 좁힐 수 있습니다.

일부 웹 사이트는 탐색 (버튼 막대)과 사용자가 가장 기대하는 콘텐츠 영역이있는 표준 웹 인터페이스를 요구할 수 있습니다. 다른 사람들은 컨텐트를 표현하기 위해 고유 한 개념을 요구할 수 있습니다.

결국 콘텐츠가 디자인을 주도하게됩니다. 예를 들어, 뉴스 사이트는 사진 작가의 웹 포트폴리오보다 훨씬 다른 접근 방식을가집니다.

03 / 10

기술 요구 사항 결정

웹 사이트 개발 초기에 프로젝트의 기술적 요구 사항에 대한 결정이 내려져야합니다. 이러한 결정은 예산, 일정 및 경우에 따라 사이트의 전체적인 느낌에 영향을 미칩니다.

기본 결정 중 하나는 사이트의 기본 구조가 무엇인지 결정하는 것이며,이를 통해 어떤 소프트웨어를 사용해야하며 어떤 시스템으로 사이트를 "작동하게 할 것인가"를 결정하게됩니다.

선택할 수있는 옵션은 다음과 같습니다.

04 중 10

개요 작성

이제는 필요한 정보를 수집하고 아이디어를 브레인 스토밍 했으므로 이제는 종이에 모두 내려 놓는 것이 좋습니다.

웹 사이트 개요에는 사이트에 포함될 각 섹션의 목록과 각 페이지에 표시 될 콘텐츠 유형에 대한 설명이 포함되어야합니다. 또한 사용자 계정, 주석 달기, 소셜 네트워킹 기능, 비디오 또는 뉴스 레터 가입과 같이 사이트에 어떤 기능이 있는지를 가능한 자세히 설명해야합니다.

프로젝트를 조직하는 것을 돕는 것 외에도 프로젝트 진행 전에 클라이언트가 웹 사이트 제안서 의 개요 제시해야 승인 할 수 있습니다. 이렇게하면 섹션이나 기능을 추가, 제거 또는 조정할 수 있습니다.

이 모든 것이 궁극적으로 예산 및 시간 계획을 수립하고 사이트를 구축하는 데 도움이됩니다. 승인 된 개요에 따라 웹 사이트 프로젝트 가격을 합의하면 프로젝트 후반에 추가 비용이나 의견 차이를 피할 수 있습니다.

05 중 10

와이어 프레임 생성

와이어 프레임은 웹 사이트 레이아웃의 간단한 선 그림 으로, 고객 (및 클라이언트)이 색상 및 유형보다는 요소의 배치에 집중할 수 있도록합니다.

이는 어떤 내용에 가장 많은 관심을 가질만한 내용과 해당 요소에 대해 페이지에서 사용 된 공간의 비율을 결정할 때 매우 유용합니다. 다른 시각적 요소에주의를 기울이지 않고도 승인 된 와이어 프레임은 설계를위한 프레임 워크를 제공합니다.

일부 프로젝트의 경우 다양한 유형의 콘텐츠에 사용할 수있는 와이어 프레임 모음을 사용할 수 있습니다. 연락처, about 및 많은 텍스트가있는 다른 페이지는 갤러리 또는 쇼핑 페이지와 다른 레이아웃을 가질 수 있습니다.

하나의 와이어 프레임에서 다른 와이어 프레임으로 전환 할 때 웹 사이트 전체에서 일관된 모양을 유지하는 것이 중요합니다.

06 중 10

웹 사이트 디자인

귀사와 고객이 와이어 프레임에 만족하면 사이트 디자인을 시작할 차례입니다.

Adobe Photoshop 은 초기 디자인을 만드는 가장 일반적인 도구입니다. 사이트 디자인의 초점은 콘텐츠를 제공하는 것이고 실제 웹 페이지를 만드는 데 사용됩니다.

지금 은 기본 요소 를 디자인하고 사용하여 고객이보고 승인 할 수있는 무언가를 만들어보십시오.

07 중 10

웹 페이지 작성

디자인이 승인되면, 모형을 모형에서 HTML 및 CSS로 작성된 실제 웹 페이지로 변환해야합니다.

숙련 된 디자이너 / 개발자는 모든 코딩 작업을 수행 할 수 있지만 웹의 디자인 측면에 중점을 둔 사람은 개발자와 긴밀하게 협력하여 사이트에 활력을 불어 넣을 수 있습니다. 이 경우 개발자는 처음부터 참여해야합니다.

개발자는 디자인이 현실적이고 효과적인 웹 레이아웃인지 확인하는 데 도움을 줄 것입니다. 또한 사이트를 실행하거나 유익하지 않을 수도있는 클라이언트에 대해 약속 한 기능에 대해 상담해야합니다.

Adobe Dreamweaver와 같은 소프트웨어를 사용하면 디자이너가 끌어다 놓기 기능, 미리 빌드 된 기능 및 링크 및 이미지를 추가하는 버튼이 포함 된 모형을 작업 웹 페이지로 전환 할 수 있습니다.

웹 사이트 구축에 사용할 수있는 많은 소프트웨어 선택 사항이 있습니다. 함께 즐기는 것을 선택하십시오. 실제로 페이지의 세부 사항 및 코딩을 이해할 수 있도록하십시오.

08 중 10

웹 사이트 개발

HTML 및 CSS로 레이아웃을 완성한 후에는 선택한 시스템과 통합해야합니다. 이것이 작동하는 웹 사이트가되는 지점입니다.

이는 컨텐츠 관리 시스템에서 읽을 템플릿을 개발하거나, WordPress 템플릿을 변경하거나, Dreamweaver를 사용하여 페이지와 고급 웹 기능 간의 링크를 만들 수 있습니다. 이것은 또 다른 회원이나 팀 구성원에게 맡길 수있는 단계입니다.

당신은 또한 웹 사이트 도메인 이름사고 접대 서비스를 일렬로 세울 필요가있을 것이다. 이것은 고객과의 토론의 일부 였고 실제로는 초기 단계에서 수행되어야합니다. 때로는 서비스가 활성화되기까지 시간이 걸릴 수 있습니다.

귀하 또는 귀하의 개발자가 웹 사이트를 철저히 테스트하는 것도 매우 중요합니다. 당신은 '큰 계시'를하고 싶지 않고 제대로 작동하지 않는 기능을 가지고 있습니다.

09/10

웹 사이트 홍보

귀하의 웹 사이트를 온라인으로 홍보 할 때입니다. 사람들이 방문하지 않는다면 놀라운 디자인은 좋지 않습니다.

사이트로의 트래픽 유도에는 다음이 포함될 수 있습니다.

10/10

신선한 상태로 유지하십시오.

사람들이 사이트를 다시 방문하도록 유지하는 가장 좋은 방법 중 하나는 콘텐츠를 최신 상태로 유지하는 것입니다. 모든 작업을 사이트에 넣으면 출시 후 수개월 동안 동일하게 유지되는 것을 원하지 않습니다.

새로운 콘텐츠, 사진, 비디오 또는 음악을 올리십시오. 사이트가 제작 된 모든 내용을 계속 게시하십시오. 블로그는 사이트를 업데이트 된 상태로 유지하고 사이트와 관련된 주제에 관계없이 모든 게시물을 게시 할 수 있는 좋은 방법 입니다.

클라이언트가 CMS 웹 사이트의 업데이트를 처리하는 경우 CMS 웹 사이트를 사용하도록 업데이트해야 할 수 있습니다. 디자인 한 웹 사이트를 업데이트하면 정기적 인 수입을 얻을 수 있습니다. 귀하와 귀하의 고객이 귀하가하는 모든 업데이트 작업의 빈도와 요율에 동의하십시오.