27 단계로 완벽한 웹 사이트 레이아웃 얻기

1/2 페이지 : 웹 사이트 레이아웃 : 시작 및 디자인 워크 플로

특히 피해야 할 일반적인 실수를 알고 있다면 웹 사이트 레이아웃을 디자인하는 것이 어려울 필요가 없습니다. 이 게시물에서는 완벽한 웹 사이트 레이아웃에 도달하기 위해 수행해야하는 단계를 살펴 봅니다. 우리는 새로운 프로젝트를 시작하기 전에 모든 새로운 웹 사이트 제작자가 알아야 할 사항과 실수를 방지하기 위해주의해야 할 사항에 대해 설명합니다.

이 단계는 디자인 측면뿐만 아니라 일반적인 워크 플로 팁도 다룹니다. 이 페이지에서는 시작하는 방법과 디자인 워크 플로의 주요 단계를 살펴 봅니다. 2 쪽 웹 사이트 레이아웃 디자인에 접근하기위한 일반적인 조언과 프로젝트 마무리를위한 팁을 찾을 수 있습니다. 이 조언을 따르면 곧 전문적인 웹 사이트 레이아웃을 만들 수 있습니다. 당신은 또한 읽을 수 있습니다 원자 디자인 , 사이트를 구성하는 방법으로.



여전히 호스트를 찾고 계십니까? 에 대한 가이드를 살펴보십시오. 최고의 웹 사이트 호스팅 서비스 그리고 최고의 웹 사이트 빌더 지금. 여기에서는 다루지 않지만 오류 페이지를 잊지 마세요! 우리의 선택을보십시오 최고의 404 페이지 영감을 위해.



시작하기

01. 성공의 의미 정의

노트북을 가진 사람

디자인 목적의 근본 원인 파악

작업을 시작하기 전에 설계 대상이 무엇인지 알아야합니다. 사이트에 대한 설명 외에도 사이트에 대한 기대치가 무엇인지 알아야합니다. 예를 들어 뉴스 사이트를 살펴보십시오. 목표는 무엇입니까? 가능한 한 많은 광고 노출을 만드는 것입니까, 아니면 최고의 독서 경험을 제공하기위한 것입니까? 이러한 목표는 어떻게 측정됩니까?



좋은 재 설계는 반드시 가장 화려한 것은 아니지만 시간이 지남에 따라 성능을 향상시키는 것입니다. 디자인을 시작하기 전에 고객과 이야기하는 것이이 모든 것을 정의하는 열쇠입니다. 서면 SOW (작업 명세서)를 넘어서는 그들의 관심사와 목표가 무엇인지 알아야합니다.

02. 현재 사이트 이해

종종 디자이너의 프로젝트 참여는 독립적으로 발생하는 것이 아닙니다. 고객이 처음부터 무언가를 시작하기 위해 항상 연락하는 것은 아닙니다. 대부분의 경우 현재 시스템을 이해하고 프로젝트에 도전 할 계획이라면 발전 할 기회를 찾거나 그대로 따라야합니다.

옵션은 무한합니다. 이미 확립 된 것에 도전하고 요구 사항을 이해할 수없는 사람으로 떠오르는 것과는 반대로 빠르게 움직이고 혁신의 기회가 어디에 있는지 인식하려면 디자인 관점에서 현재 위치를 이해하는 것이 중요합니다.



03. 초기에 고객과 디자인 공유

인터랙티브 한 컨셉이나 디자인의 '룩앤필'을 제안 할 때, 당신과 클라이언트가 가능한 한 빨리 같은 페이지에 들어가도록해야합니다. 클라이언트와 공유하기 전에 개념에 너무 많은 시간을 소비하지 마십시오.

초기 컨셉이 승인되면 잠시 긴장을 풀고 생산을 시작할 수 있습니다. 그러나 첫 번째 개념을 제시 한 후 고객이 그 개념을 좋아하지 않는다면 충분한 피드백을 수집하여 더 적절한 두 번째 개념을 테이블에 가져와야합니다.

디자인 워크 플로우

04. 먼저 레이아웃 태클

이것은 매우 명백해 보이지만 디자이너가 해결하려는 문제에 대해 생각하기 전에 작업에 바로 뛰어 드는 것을 너무 자주 발견했습니다. 디자인은 문제 해결에 관한 것이며 이러한 문제는 그라디언트 또는 그림자를 통해 해결할 수 없으며 오히려 좋은 레이아웃과 명확한 계층 구조를 통해 해결할 수 있습니다.

내용, 레이아웃 및 기능에 대해 생각하십시오. 이러한 생각이 고객의 목표와 일치하는지 확인하고 자유롭게 공유하십시오.

05. 최상위 프레임 워크 스케치 시작

웹 사이트 레이아웃 : UX 스케치

기본 와이어 프레임은 레이아웃을 구성하는 데 도움이됩니다 (확대하려면 오른쪽 상단 아이콘 클릭).

웹 사이트 레이아웃의 룩앤필을 만들라는 요청을 받았을 때 가장 먼저해야 할 일은 모든 디자인 문제를 해결하는 최상위 프레임 워크를 만드는 것입니다. 프레임 워크는 콘텐츠를 둘러싸고 사용자가 작업을 수행하고 탐색하는 데 도움이되는 UI입니다. 여기에는 탐색 및 사이드 바 및 하단 바와 같은 구성 요소가 포함됩니다.

이 관점에서 디자인에 접근하면 홈페이지를 넘어서 섹션을 디자인 할 때 레이아웃에 필요한 것이 무엇인지 명확하게 이해할 수 있습니다.

06. 그리드 추가

다른 화면의 그리드

기준선이 10px 인 978 그리드의 예

들리는 것처럼 간단합니다. 디자인을 시작하기 전에 적절한 그리드가 필요합니다. 그리드없이 시작하는 데는 타당한 변명이 없습니다. 그렇지 않으면 디자인이 좋지 않을 것입니다. 그리드는 여러 섹션의 레이아웃을 구성하는 데 도움이됩니다. 특정 화면 크기 요구 사항을 안내하고 반응 형 템플릿을 만드는 데 도움이되므로 간격 및 기타 여러 디자인 문제의 측면에서 일관성을 유지할 수 있습니다.

이를 수행하는 방법을 알아 보려면이 가이드를 참조하십시오. 모든 화면 크기에 맞게 조정되는 그리드 만들기 .

07. 타이포그래피 선택

웹 사이트 레이아웃 : 타이포그래피

경험상 웹 사이트 레이아웃에서 두 가지 이상의 다른 서체를 사용하지 않는 것이 좋습니다.

다양한 서체와 색상을 탐색하는 것은 프로젝트의 발견 단계의 일부입니다. 일반적으로 웹 사이트에서 두 가지 이상의 다른 서체를 사용하지 않는 것이 좋습니다. 비록 그것이 실제로는 성격에 달려 있지만. 큰 텍스트 청크에 대해 읽기 쉬운 글꼴을 선택하고 제목과 클릭 유도 문안으로 더 재미있게 만드십시오. 영감을 찾고 계십니까? 우리의 완벽한 라운드 업을 살펴보세요 글꼴 쌍 또는 목록 무료 글꼴 . 큰 글꼴을 사용하는 것을 두려워하지 말고 타이포그래피를 사용할 때 창의적이고 일관성을 유지하십시오.

08. 색상 테마 선택

웹 사이트 레이아웃 : 색상

Color Hunt와 같은 도구는 팔레트를 선택할 수 있도록 설계되었습니다.

서체 세트를 선택하는 과정에서 인터페이스, 배경 및 텍스트에 사용할 색상을 탐색해야합니다. 일반적인 UI에는 제한된 색상과 톤 세트를 권장합니다.

각 요소의 기능에 따라 웹 사이트 레이아웃 전체에 일관되게 적용하는 것이 중요합니다. Facebook, Twitter, Quora 및 Vimeo와 같은 사이트의 레이아웃에 대해 생각해보십시오. UI 외에도 구성 요소의 기능을 방해하지 않는 한 일러스트레이션이나 그래픽 세부 사항에 대한 색상 제한이 없어야합니다.

막히면 목록을 살펴보십시오. 웹 디자이너를위한 최고의 색상 도구 .

09. 레이아웃 단순화

웹 사이트 레이아웃 : B-reel 홈페이지

간단한 레이아웃은 탐색하기가 더 쉽습니다.

사이트 구조가 단순할수록 사용자가 탐색하기가 더 쉽습니다. 각 섹션은 스토리를 전달해야합니다. 사용자를위한 이유와 최종 결과가 필요합니다. 레이아웃은 콘텐츠가 해당 스토리에서 가장 중요한 부분을 강조하는 데 도움이됩니다.

실제로 페이지에 클릭 유도 문안이 너무 많으면 안됩니다. 모든 것이 최종 '여기서 무엇을 할 수 있나요?'로 이동해야합니다.

포토샵의 굽기 도구는 무엇입니까

단순한 목적으로 상상할 수있는 가장 간단한 레이아웃을 생각하고 필요한 구성 요소를 추가하기 시작합니다. 결국 당신은 그것을 단순하게 유지하는 것이 얼마나 어려운지 놀랄 것입니다.

10. 모든 구성 요소 수정

Microsoft Music 디자인

Claudio Guglieri는 Microsoft Music에서 UI 디자인 작업을했습니다.

모든 구성 요소를 디자인 콘테스트에 제출할 수있는 것처럼 취급하십시오. 모든 구성 요소에주의를 기울이면 전체가 해당 부분의 합계 이상이됩니다. 나는이 조언이 내 것이 아니라는 것을 인정해야한다. 이전 에이전시에서 들었는데이 말이 얼마나 분명하고 사실인지 충격을 받았습니다.

각 구성 요소는 지금까지 최고의 구성 요소로 독립 할 수있는 것처럼 설계되어야합니다. 때때로 디자이너는 할 일 목록에 마지막까지 사이트의 특정 부분을 남겨두고 그다지 존경심을 보이지 않게됩니다.

11. 고객에게 솔루션 안내

당신의 일을 크게 드러내지 마십시오. 클라이언트와 자주 소통하는 목표 중 하나는 작업을 공개 할 때 놀라움을 피하는 것입니다. 진행 상황을 보여 주었을 때, 나는 그들을 여행에 데려 가서 내가 시작한 곳, 이것 또는 그 도전을 탐색하는 동안 내가 가진 고려 사항과 내가 마침내 도착한 곳을 보여주는 것이 더 유용하다는 것을 알았습니다. 맥락없는 여정의 끝.

이렇게함으로써 그들이 귀하의 결론에 동의하거나 귀하의 연습 중 어느 시점에서 귀하가 고려하지 않았을 수있는 결함이나 추가 변형을 지적 할 것임을 알게 될 것입니다. 두 경우 모두 대화를 나누고 클라이언트는 프로세스의 일부이기 때문에 더 많은 투자를 느낄 것입니다.

12. 움직이는 생각

외로운 행성 웹 사이트

인터랙티브 경험을 디자인 할 때 모션은 필수적입니다.

인터랙티브 한 경험을 디자인 할 때 모션은 필수적입니다. 디자인은 그 자체로 또는 더 이상 정적 구성 요소로 판단 할 수 없습니다. 모든 구성 요소는 시스템과의 관계에 의해 정의되며 해당 관계는 모션이 제대로 전달되어야합니다. 모션은 레이아웃 내의 콘텐츠 또는 대화 형 상태에 대한 동적 효과를 나타낼 수 있습니다. 두 번째 목적을 위해 디자인을 프로토 타이핑으로 조금 더 나아가는 것이 좋습니다.

13. 프로토 타입, 프로토 타입, 프로토 타입

모바일에서 외로운 행성 사이트

프로토 타이핑은 상호 작용을 테스트하는 가장 좋은 방법입니다.

프로토 타이핑은 상호 작용 및 기술을 테스트하는 가장 좋은 방법입니다. 많이 있습니다 프로토 타이핑 도구 이제는 쉽게 만들 수 있으며 효과적인 프로토 타입을 만들기 위해 코딩 전문가가 될 필요가 없습니다. 이것은 다른 방법으로 많은 설명이 필요한 개념과 아이디어로 고객을 흥분시킬 수있는 또 다른 방법입니다.

다음 페이지 : 디자인 접근 방식 및 마무리

  • 1

현재 페이지: 웹 사이트 레이아웃 : 시작 및 디자인 워크 플로

다음 페이지 웹 사이트 레이아웃 : 디자인 접근 및 마무리