홈페이지 제작을 위한 6단계 일반 프로세스

웹 사이트를 구축할 때, 특히 웹 디자이너로 막 시작하는 경우 따라야 할 프로세스가 있으면 도움이 됩니다. 좋은 지침은 건망증을 최소한으로 유지하여 더 나은 작업을 수행하는 데 도움이 될 수 있습니다. 모든 디자이너 또는 회사는 시간이 지남에 따라 웹 디자인 프로세스에 고유한 구성 요소를 개발하지만 기본은 동일하게 유지됩니다.

 

본론으로 들어가기 전에 먼저 설계 프로세스 전반에 걸쳐 이루어져야 하는 두 가지 병렬 프로세스를 공유하겠습니다. 지속적으로 해야 할 첫 번째 일은 피드백 을 구하는 것 입니다.

정기적으로 피드백을 받으면 낭비되는 시간과 노력을 많이 절약할 수 있습니다. 두 번째로 지속적으로 해야 할 일은 테스트입니다. 길을 가다가 극심한 두통을 피하기 위해 모든 것을 테스트하십시오.

 

 

1. 배우다
웹 디자인 과정에서 가장 중요한 단계는 무엇이라고 생각하십니까? 계획? 설계?

코딩? 다시 맞춰보세요. 처음부터 구축해야 할 것을 발견하고 이해하는 학습이 전체 웹사이트 디자인 프로세스에서 가장 중요한 부분이라는 사실에 놀랄 일이 아닙니다.

왜요? 간단합니다. 달성해야 할 사항에 대해 더 많이 알수록 성공적인 웹사이트를 만들 가능성이 높아집니다.

다음과 같이 생각하십시오. 궁수라면 화살을 조준할 위치를 알아야 하지 않습니까? 그것이 목표입니다. 중앙에 있는 작은 빨간 점은 과녁입니다.

작기 때문에 맞추기는 어렵지만, 조준하고 빗나가더라도 화살을 허공에 겨누고 무작위 직격을 희망했을 때보다 확실히 가까워집니다.

 

 

그렇다면 웹 디자이너로서 어떻게 과점을 찍을 수 있습니까? 더 진행하기 전에 프로젝트에서 과녁을 맞추는 것이 의미하는 바를 정의해야 합니다.

웹 디자이너로서 과녁을 맞추는 것은 고객이 원하는 것을 제공하는 것입니다. 고객이 지불하는 것입니다. 고객이 원하는 것은 사례별로 크게 다릅니다. 당신은 마인드 리더가 아니기 때문에(아니요, 당신은 아닙니다) 그들이 원하는 것이 무엇인지 사전에 찾아야 합니다.

어떤 경우에는 원하는 것이 무엇인지조차 모를 수도 있고, CSS, Ajax 또는 관계형 데이터베이스와 같은 업계 용어와 개념을 모르기 때문에 상상한 것을 말로 표현하는 데 어려움을 겪을 수도 있습니다.

 

http://contentmall.tloghost.com/

테마몰 1 페이지 | 반응형홈페이지제작 - 티로그 부산

 

크리에이티브 브리프
다행히 웹 디자이너가 이 정보를 쉽게 수집하는 데 사용할 수 있는 도구가 있습니다. 크리에이티브 브리프라고 합니다. 크리에이티브 브리핑은 기본적으로 프로젝트의 범위 와 목표를 이해할 수 있도록 클라이언트에게 묻는 일련의 질문 입니다.

대면 회의나 전화 통화 중에 이러한 질문을 할 수 있습니다. 또는 단순히 웹 사이트에서 고객의 답변을 처리하는 웹 양식을 사용할 수 있도록 만들 수도 있습니다. 귀하와 귀하의 고객이 가장 편한 방식으로 이 정보를 얻어야 합니다. 그러나 무엇을 하든 크리에이티브 브리핑을 건너뛰지 마십시오. 이는 프로젝트의 생명선이 될 것이기 때문입니다. 크리에이티브 브리핑에서 어떤 종류의 질문을 해야 합니까?

최소한 다음 사항을 알아보세요.

 

• 클라이언트의 타겟 고객
• 웹 사이트에 대한 기본 및 보조 목표
• 현재 브랜딩 특성
• 예산
• 그들이 충족해야 하는 마감일

또한 고객들에게 그들이 어떤 웹사이트를 좋아하는지 물어보는 것을 좋아하고 내가 어디로 향해야 하고 무엇을 피해야 하는지에 대한 시각적 아이디어를 제공하는 것을 좋아하지 않습니다. 또한 온라인 상점이 필요한지, 이미 로고가 있는지(없으면 로고를 만들 수 있음), 사이트가 게시된 후 유지 관리를 담당할 사람 등을 알고 싶을 수도 있습니다. 포함하고 싶은 고유한 질문이 있을 수 있습니다. 그것들을 사용하고 프로젝트별로 질문을 조정하는 것을 두려워하지 마십시오.

 

2. 계획
구축해야 할 사항을 파악했다면 이제 구축 방법을 계획해야 합니다. 웹사이트 디자인을 시작하기 전에 먼저 무엇을, 어떻게 디자인해야 하는지 정확히 알아야 합니다. 모든 것은 디자인 전략을 세우는 것부터 시작됩니다. 귀하가 만드는 각 웹사이트에 대한 디자인 전략은 클라이언트의 비전에 맞게 수작업으로 이루어져야 합니다.

 

스케치 및 목업
다음으로, 모형을 만들고 아이디어가 실제 상태를 더 많이 취할 수 있도록 할 때입니다. 나는 다른 많은 웹 디자이너들처럼 평범한 오래된 종이에 내 아이디어를 스케치하는 것으로 시작하는 것을 좋아합니다. 다른 사람들은 OmniGraffle 과 같은 와이어프레임 도구를 사용하는 것을 선호합니다 .

이 단계에서 사이트의 레이아웃뿐만 아니라 사이트의 구조와 탐색이 어떻게 형성될지에 대해 진지하게 생각하기 시작할 것입니다. 이것은 더 구체적인 것을 만들기 위해 실제로 Photoshop이나 Illustrator를 사용하기 전에 가장 효과가 좋은 것이 무엇인지 볼 수 있는 좋은 기회이자 다양한 아이디어를 실험할 수 있는 좋은 기회입니다.

 

도구 선택
프로세스의 이 부분은 또한 어떤 도구를 사용해야 하는지 평가할 수 있는 완벽한 기회입니다. 생성하는 각 사이트에 대해 미리 결정된 도구 집합을 사용하는 패턴에 절대 빠지지 않아야 합니다. 이는 사이트의 최종 사용자와 클라이언트를 포함하여 관련된 모든 사람에게 잠재적으로 위험한 관행입니다(포트폴리오가 얼마나 단조롭게 보일지는 말할 것도 없습니다).

Flash를 전혀 포함하지 않는 것이 좋은 아이디어인지 여부 등 사이트의 목표를 고려하여 어떤 콘텐츠 관리 시스템이 가장 효과가 있을지 진지하게 생각해 보십시오.

 

3. 디자인
이제 학습이나 계획에 대해 다시 생각하지 않고 디자인 단계로 바로 건너뛰기를 좋아하는 웹 디자이너가 많이 있다는 것을 알고 있습니다. 그러나 디자인은 단순히 만드는 행위 그 이상입니다. 실제로 훌륭하고 유용한 것을 만들고 싶고 디자인을 시작하기 전에 먼저 사전 작업을 수행하지 않고는 그렇게 할 수 없습니다. 이미 학습 및 계획 작업을 완료했다면 실제 설계가 훨씬 쉬워집니다.

작은 세부 사항에 대해 걱정할 필요가 없을 때 더 중요한 일에 집중할 수 있기 때문에 완전히 새로운 차원의 효율성과 생산성이 열립니다. 디자인을 시작할 준비가 되면 단순한 홈 페이지 그 이상을 디자인해야 한다는 점을 염두에 두십시오. 사이트의 하위 페이지에도 디자인이 필요합니다.

때로는 홈 페이지 개념을 설계하고 분할하고 코딩을 시작하여 하위 페이지에 도달하고 방향이 없는 경우가 있습니다. 사이트의 모바일 또는 iPad 버전도 디자인해야 할 수도 있습니다. 디자인 단계 자체는 간단합니다.

Photoshop(또는 선택한 그래픽 생성 도구)을 열고 목업에 생기를 불어넣으세요. 세부 사항을 땀. 픽셀을 완벽하게 만드십시오.

24시간 연속으로 벽만 쳐다보는 것보다 지금 하고 있는 프로젝트가 더 지루하게 느껴지더라도 모든 것을 쏟아부으세요. 당신의 클라이언트는 알아차릴 것이고 당신은 당신이 한 일을 자랑스러워할 것입니다. 이 시점에서 디자인에 실제 콘텐츠를 사용할지 또는 일부 더미 텍스트, 어느 쪽 진영에도 팬이 많지만 가능한 한 실제에 가깝게 만들 수 있는 경우 실제 사본과 사진을 사용하는 것을 개인적으로 선호합니다. 설계 단계에서 모든 지정된 요구 사항이 충족되었는지 확인하기 위해 자주 피드백을 구하는 것이 매우 중요합니다.

클라이언트가 변경을 원하면 디자인이 슬라이스되고 코딩되기 전에 변경을 수행해야 합니다. 디자인 단계에서 변경을 수행한다면 간단한 변경이 될 작업을 10배 더 어렵게 만듭니다.

 

4. 코드
멋진 디자인이 완성되면 실제 웹사이트로 전환해야 합니다. 어떤 콘텐츠 관리 시스템을 사용하든지 안전한 방법은 일반 HTML 및 CSS 템플릿으로 시작하는 것입니다.

기본 템플릿으로 시작
이미 서로 연결되어 있고 기본 시작 코드(예: CSS 재설정 ) 를 포함하고 있는 시작 HTML 및 CSS 파일 세트를 이미 가지고 있을 것입니다. 나와 같지 않고 이러한 일반 파일이 준비되어 있지 않다면 앞으로 이 단계에서 재사용할 수 있는 파일을 만드십시오. 더 진행하기 전에 제목, 설명 및 메타 태그를 추가하거나 나중에 콘텐츠 관리 시스템을 사용할 예정이라면 최소한 무엇이 있어야 하는지 기록해 두는 것이 좋습니다.

주요 섹션 및 콘텐츠 레이아웃
<div>머리글, 바닥글 및 콘텐츠 영역에 대한 주요 섹션(기본 섹션)을 삽입하여 HTML/CSS를 조각하기 시작합니다 . 다음으로 텍스트 및 이미지 콘텐츠 추가를 시작합니다. 목표는 마크업을 가능한 의미론적으로 유지하여 각 요소가 의미를 갖도록 하는 것입니다.

divitis를 피하십시오 — 너무 많은 div를 사용하는 행위. 예를 들어 로고를 포함하기 위해 div가 필요하지 않습니다. <h1>대신 또는 a 를 사용해 보세요. 정확히 같은 방식으로 스타일을 지정할 수 있습니다(예: CSS 속성 <p>을 사용하여 블록 요소로 만들기 ).display

 

검증 및 테스트
W3C에서 제공 하는 유효성 검사 도구 를 사용하여 코드가 유효성을 검사하는지 확인하는 것을 잊지 마십시오 (그러나 유효성 검사 도구에는 단점이 있음을 이해 하십시오). 또한 사이트가 의도한 대로 보이고 작동하고 사용자가 액세스하는 방식에 관계없이 일관된 브랜드 경험을 제공하는지 확인하기 위해 몇 가지 브라우저 테스트를 수행해야 합니다. 다른 유형의 컴퓨터에 대한 액세스가 제한된 경우 Browsershots 와 같은 도구를 사용할 수 있습니다 .

Firebug 및 YSlow 를 사용 하여 사이트를 디버그하고 작업이 최적의 속도로 실행되고 있는지 확인하십시오 . 마지막으로 Google Analytics 또는 선호하는 분석 대안 을 구현하는 것을 잊지 마십시오. 그래야 대규모 출시 기간 동안 통계를 추적할 수 있습니다.

 

5. 출시
마침내 사이트를 완성했다면 대중에게 공개할 시간입니다. 출시는 다양한 콘텐츠 관리 시스템과 개발 환경이 있기 때문에 사람들마다 다른 의미를 가질 수 있습니다. 예를 들어 콘텐츠 관리 시스템이나 게시 플랫폼을 사용하는 사이트를 재설계하는 경우 시작은 새 테마를 적용하는 것만큼 간단할 수 있습니다.

샌드박스 또는 로컬 개발 환경 에서 새로운 사이트를 디자인하는 경우 "라이브 시작"은 파일을 프로덕션 서버에 FTP로 보내는 것을 의미합니다.

 

6. 유지
계획 단계에서 사이트 유지 관리를 담당할 사람을 결정해야 합니다. 클라이언트가 사이트를 유지 관리할 수 없는 경우 유지 관리 작업을 관리하고 수행하기 위해 정기적으로 또는 필요에 따라 고용하도록 제안할 수 있습니다. 프로젝트 양도/종료 중에 클라이언트가 사이트를 적절하게 유지 관리하는 방법을 이해할 수 있도록 몇 가지 지침과 기본 교육을 제공하는 것도 도움이 될 수 있습니다.