웹 사이트를 디자인하는 단계는 무엇입니까?

모든 웹 디자이너 호출 :)

저는 고향에있는 소기업을위한 웹 사이트를 만들기 시작했으며 이것이 제 첫 프로젝트가 될 것입니다. 나는 과거에 여가를 위해 한 사이트를 만들었습니다. HTML과 CSS에 능숙합니다. 나는 고객 요구 사항과 그가 웹 사이트 등에서 원하는 것을 얻었습니다. 요구 사항을 마무리 한 후에 따라야 할 단계에 붙어 있습니다. 웹을 검색했지만 정보가 오래되어 내 질문과 관련된 것을 찾을 수 없습니다.

내 질문은 :

2014 년 웹 디자이너 워크 플로우 란 무엇입니까? (모든 것이 너무 빨리 변하기 때문에) 사이트의 와이어 프레임을 만든 다음 포토샵에서 디자인 한 다음 디자인을 코딩합니까?

웹 사이트를 만들기 위해 어떤 단계를 거쳐야하는지 "디자인"프로세스가 어떻게 작동하는지 알고 싶습니다.

미리 감사드립니다.

발견과 범위

고객과 함께 앉아서 목표, 목적 및 요구 사항을 결정하십시오. 목적에 맞는 사이트의 견적을 작성하고 처리 시간에 대해서도 논의해야합니다. 제공 할 수없는 내용은 반드시 작성하십시오. 사이트 구성 방법을 파악해야합니다. 반응 형, 태블릿 및 전화 전용, 데스크톱 전용, 데스크톱 및 태블릿 전용. 클라이언트가 데스크톱 버전을 출시하고 나중에 전체 모바일 앱을 원할 경우와 같이 디자인이 다단계 디자인 대상인지 파악해야합니다.

컨텐츠 매핑

바라건대 사이트에 필요한 모든 컨텐츠가 제공되기를 바랍니다. 사이트와 해당 기능을 매핑해야합니다. 향후 수정을위한 확장 성 방법을 결정하고 CMS 또는 앱용 코드 인 경우 코드를 구성하는 방법을 결정하십시오.

예:

모형

고객의 승인을 받아 "트리"또는 "맵"을 완성한 후에는 손 스케치 또는 모형 도구를 사용할 것입니다. 오른쪽 상단에서 검색하면이 주제에 대해 많은 질문이 있습니다.

예:

스타일 타일

웹 디자인을 위해 Photoshop에서 디자인하면 오늘날 시대의 목표가 사라집니다. 포토샵을 사용하는 많은 사람들은 그와 같은 시간을 브라우저에서 코딩 할 수있는 멋진 버튼을 만드는 데 걸리는 시간이 많기 때문에 아직 잘 모르고 있습니다. 특별 요청에 따라 응용 프로그램을 사용해야하는 경우 Illustrator 또는 InDesign에 응용 프로그램을 배포합니다. 다음과 같은 스타일 타일을 디자인하도록 마이그레이션하는 것이 좋습니다.

타일의 목적으로 고객에게 디자인을 전달하지 않고 "이것은 나에게 준 디자인처럼 보이지 않습니다." 또한 사이트를 계획하는 경우 특정 장치 등을 디자인하는 데 많은 시간을 할애하기 때문에 Photoshop에서 사이트를 배치하는 데 시간을 투자 할 이유가 없습니다. 전체 사이트를 디자인해야하는 경우 명시된 바와 같이 SVG와 Photoshop에 비해 사이트의 요소를 내보내는 기능에 대해서는 Illustrator를 고려하십시오. 어느 정도는 InDesign을 사용하여 내용의 서식을 지정할 수도 있지만 이미지 조작에는 Photoshop 만 사용하고, 그렇게하려면 ImageMagick으로 롤백 할 것입니다. 스타일 타일을 다른 레벨보다 한 단계 더 높이고 단일 페이지로 코딩하여 마스터의 예비 작업을 중단했습니다..css 파일.

와이어 프레임

눈에 띄지 않으면 브라우저에 디자인을 배포하는 것을 선호합니다. 요즘에는 사이트 스케치 또는 사이트 모형에 Illustrator를 사용할 수 있지만 일반적으로 .css그레이 스케일로 6 색 이하 의 기본 템플릿 파일을 배포하고 대부분의 사람들이 할 수 없으므로 사이트 구조에 대한 모든 것을 코딩합니다. 디자인을 이해하고 무언가를 갖고 싶어합니다. CMS에 배포하기가 더 쉽기 때문에 PHP에서 때때로 진행합니다. 그런 다음 클라이언트의 PROVIDED 글꼴이 포함 된 간단한 하위 도메인을 흑백 방식으로 개발하여 전체 사이트의 기능이 제공되고 통과 할 수 있도록합니다. 모든 내용이나 색상을 추가하는 데 시간을 소비하지 않았기 때문에 (더미 텍스트 참조를 사용하기 때문에 : "웹 사이트에 Lorem Ipsum (더미 텍스트) 대신 사용)") 기기에 따라 특정 요소가 마음에 들지 않으면 존재하는 모든 변경 사항을 쉽게 수정할 수 있습니다.

채색 및 내용

클라이언트가 사이트 및 기능의 구조에 사인 오프하면 나머지 CSS를 작성하고 요청 된 애니메이션 또는 JavaScript 특정을 추가합니다. 스타일 타일이 승인되어 있고 올바르게 개발하면 CSS를 복사하여 설정할 수 있습니다.

디버그, 디버그, 디버그

클라이언트 사인 오프 전의 마지막 단계는 디버그이며 내 코드가 오류없이 제대로 작동하는지 확인하십시오. 모든 것이 정확하면 부드럽게 릴리스해야합니다. 이 단계에는 가격 및 제공이 제공되는 테스트 및로드 테스트 서비스도 포함됩니다. 개인적으로, 저는 모든 디자이너가 인쇄 디자인과 관련하여 여러분이 원하는대로 개발하고있는 것을 알고 있어야한다는 확고한 신자입니다. 클라이언트가 진정한 호스팅 제공 업체를 감당할 수 없다면 사이트의 성능을 제한 할 수 있으며 모든 고객이 귀하의 잘못이라고 말하고 귀하가 잘못한 것입니다.

훈련

나는 일반적으로 CMS 사이트에 대한 요약 / 견적 교육에 입찰합니다. 어떤 사용자는 자신이 무엇을하고 있는지 전혀 알지 못하므로 오후에 한 시간 동안 패딩 후 질문에 대한 입찰을 통해 무언가를 검토하거나 내 디자인을 최고의 기능으로 사용하고 있는지 확인합니다.

기본적인 질문을했기 때문에 도움이 될만한 다른 주제들 :

• 와이어 프레임과 모형의 차이점은 무엇입니까?
• 클라이언트에게 웹 디자인 모형을 제시하는 방법?
• 웹 디자인에서 좋은 "모의"관행은 무엇입니까?

또한 현장에서 시작한 웹 디자이너이기도합니다. 그래도 지금은 몇 가지 프로젝트를 수행했습니다. 나를 위해, 내 워크 플로는 다음과 같습니다.

1. 초기 설계 및 개발 회의
   이것은 예상 완료 날짜를 포함하여 모든 관련 정보를 수집하고 고객이 필요로하는 항목 목록을 만들 때입니다.
   
2. PhotoShop Mockups
   현재 고객에게 적합한 디자인 또는 2 ~ 3 개의 브랜드를 찾고, 브랜딩, 색상, 스타일 등을 사용하여 Photoshop에서 목업을 만듭니다.이를 통해 각 제품에 대해 변경 / 유지해야 할 사항에 대해 논의합니다. 그런 다음 고객이 원하는 디자인을 결정하게합니다.
   참고 : WordPress를 사용하여 구축하는 경우 http://themeforest.com으로 이동하십시오.수많은 테마를 확인하십시오. 여기에서 스크린 샷을 찍고 목업을 할 수 있으며 라이브 데모를 제공 할 수도 있습니다 (클라이언트의 사용자 정의없이). 고객이이 모형 중 하나를 좋아하는 경우 테마를 구입하고 필요에 따라 변경할 수 있습니다. 이것이 내가하는 경향이 있습니다. 적절한 신용 / 지불 등을 제공하지 않고는 테마 (또는 그 문제에 대한 다른 것)를 사용하지 않습니다. 원래 제작자에게 :)
   
3. 개발
   마지막으로 개발 환경에서 실제로 사이트 개발을 시작합니다 (클라이언트의 라이브 웹 사이트는 아니지만 가능한 경우 하위 도메인-IE dev.clienturl.com). 페이지가 닫힐 때마다 업데이트를 클라이언트에 보냅니다. 문제가있을 경우 바로 그 방법으로 문제를 해결할 수 있습니다.
4. 항상
   따라 가기 고객의 웹 사이트가 가동되어 만족스러워 보이며 추가 변경을 요청하지 않은 경우에도 후속 조치를 취하십시오. 기대에 따라 모든 것이 제대로 작동하는지 확인하십시오. 또한 웹 사이트가 약 일주일 동안 라이브로 전환되면 각 고객이 완료 할 수 있도록 약간의 설문 조사를 작성하는 것이 좋습니다. 당신은 당신의 웹 사이트에 대한 평가로 여기에서 의견을 사용할 수 있습니다.

도움이 필요하면 내 웹 사이트를 통해 저에게 연락하십시오. 계약서, 포스트 프로덕션 설문 조사, 초기 설문지 등을 위해 귀하와 공유 할 수있는 많은 자료가 있습니다. http://anchorsawaydesigns.com/

처음부터 가능한 한 많은 정보를 얻고 나서 다음과 유사한 단계적 접근 방식을 따르십시오. 클라이언트가 가능한 한 많은 정보를 얻으려고 노력하십시오. 나중에 기대치에 미치지 못하는 것을 찾기 위해 격리 된 것을 개발하고 싶지 않기 때문입니다. 훌륭한 와이어 프레이밍 툴에 투자하면 (저는 balsamiq을 사용합니다), 절반의 작업이 완료됩니다.

1. 요구 사항 수집
2. 와이어 프레임
3. 디자인 모형
4. 완성 된 디자인
5. 개발
6. 호스팅

행운을 빕니다.

안녕하세요, 새 프로젝트를 시작하는 것이 좋습니다.

필요한 단계 :

1. 먼저 프로젝트에 사용할 기술을 결정하십시오. 단일 페이지 스크롤, 여러 페이지 등을 의미합니다.

2. 그런 다음 레이아웃과 워크 플로우를위한 스케치를 준비하십시오.

3. 이제 포토샵에서하는 것처럼 도구로 레이아웃 디자인을 시작하지만 원하는대로 사용할 수 있습니다.

4. 그 후 모든 변경 사항에 대해 클라이언트에게 ur 레이아웃을 표시하는 것이 좋습니다. HTML, 시간에 두통을 일으키지 않도록 색상, 글꼴 등.

5. 이제 고객 확인 후. Html과 Css로 코딩을 시작할 시간입니다.

6. 그 후 언어 기반 코딩을 위해 개발자에게 전달해야합니다. PHP, 닷넷 등

즐겨............

웹 산업에서는 개발 프로세스 를 능률화 하기 위해 디자인이 완료되고 최종 디자인이 추가로 개발되거나 테스트되기 전에 다른 중간 단계가 포함됩니다.

1 단계 : 영감 얻기 :

다른 디자이너 나 사이트가 자신의 와이어 프레임에 대해 수행하는 작업을 지속적으로 관찰하면 와이어 프레임이 화면 정보를 구성하는 데 어떻게 도움이되는지 천천히 생각하게됩니다.

"Wirify"Wireframing 도구를 사용하면 책갈피에 큰 링크를 추가하고 원하는 웹 사이트를 찾은 다음 책갈피를 클릭하면 웹 사이트가 와이어 프레임으로 바뀌는 것을 볼 수 있습니다.

2 단계 : 프로세스 설계

다양한 설계자들이 다양한 방식으로 와이어 프레임과 비주얼 또는 코드로의 변환에 접근합니다.

여기에 따라야 할 길을 선택하는 것은 디자이너 만이 아니라 때로는 고객이 직접 모형을 만드는 것을 선호하고 일부는 더 체계적인 것을 선호합니다.

스케치 => 와이어 프레임 => 모형 => 코드

3 단계 : 스케치 :

이제 거친 아이디어와 접근 방식에 대한 영감을 얻었을 때 항상 스케치로 시작하는 것이 좋습니다. 마우스 / 스타일러스 또는 사용하는 것을 얼마나 잘 제어하든 상관없이 종이, 연필을 칠 수 없습니다. 간단.

종이에 손으로 스케치하는 것은 항상 모든 디자이너에게 좋은 출발점입니다. 초점을 맞추고 구성 할 수있는 빠르고 쉬운 방법을 제공합니다. 스케치가 정확하다면이를 최종 와이어 프레임으로 사용할 수도 있습니다.

4 단계 : 와이어 프레임 :

와이어 프레임 생성은 디자인하기 전에 수행해야 할 첫 번째 단계 중 하나입니다.

와이어 프레임은 웹 사이트 내 에서 요소와 컨텐츠 를 구성하고 단순화하는 데 도움이 되며 개발 프로세스에서 필수적인 도구입니다.

와이어 프레임은 기본적으로 디자인에서 컨텐츠 레이아웃을 시각적으로 표현한 것입니다 .

건물의 기초와 마찬가지로 값 비싼 페인트 코트를 줄지 결정하기 전에 근본적으로 강해야합니다.

도구를 고르세요

Mashable의 디자이너를위한 10 가지 무료 Wireframing 도구 목록은 다음과 같습니다.

그리드 설정

그리드는 대칭 및 병렬 디자인을 달성하는 데 매우 필요합니다.

좋은 디자인의 웹 사이트를 볼 때마다 콘텐츠가 본문의 특정 지점에서 시작하여 하나의 끝으로 끝나는 것을 알 수 있습니다. 그리드를 사용하여 관리됩니다.

상자로 레이아웃 결정

타이포그래피로 정보 계층 정의

와이어 프레이밍 동안 피해야 할 사항 :

• 페이지에서 너무 많은 일이 발생했습니다.
• 색상과 디자인에 중점
• 너무 많은 세부 사항

와이어 프레임을 만들면 클라이언트, 개발자 및 디자이너는 웹 사이트의 구조를 비판적으로 살펴보고 프로세스 초기에 쉽게 수정할 수 있습니다.

Wireframing은 다음과 같은 주요 이점을 제공합니다.

5 단계 : 모형 / 시각 :

이제 최종 와이어 프레임을 최종 모형 또는 비주얼로 변환 할 수 있습니다.

Mockuos의 일반적인 도구로는 Adobe Photoshop, Corel Draw 및 매우 새롭지 만 이미 많이 사용되는 Sketch 등이 있습니다.

정보 계층

강조 표시 할 항목과 추가 정보를 고려해야 할 수도 있으며 색상 구성표, 재배치 및 인쇄술이 결정되었습니다.

타이포그래피

올바른 대안을 조합하여 웹 사이트에 시각적으로 매력적이고 읽기 쉬운 타이포그래피를 선택하십시오. 글꼴 크기, 무게 및 색상은 가독성에 중요한 역할을합니다.

색 구성표

위험의 경우 빨간색, 성공의 경우 녹색 등으로 브랜드 정체성과 심리적 색을 나타내는 색 구성표

6 단계 : 프로토 타입 :

프로토 타입은 개념이나 프로세스를 테스트하거나 일이 복제 또는에서 배운하는 역할을 내장 제품의 초기 샘플, 모델, 또는 릴리스입니다.

와이어 프레임은 구조를 처리하고 목업은 비주얼을 처리하고 프로토 타입은 웹 / 앱 제품에서 사용성을 처리합니다.

프로토 타입 제품을 만든 다음이를 테스트하고 POC (Prof of Concept)를 수행합니다. 이제 실제 제품으로 이동할 수 있습니다 (변경이 필요하지 않은 경우).

이미지 및 기타 링크가있는 원본 기사 링크