디자인 개선을위한 10 단계

1/2 페이지 : 페이지 1

이 디자인 체크리스트는 제가 시간이 지남에 따라 직접 만든 가이드입니다. 디자이너로서 매일 직면하는 두 극단 사이의 균형을 찾을 수 있습니다.

때때로 나는 조감도에서 프로젝트를 보지 않고 모든 사소한 세부 사항에만 집중할 수 있으며, 어떤 때는 중요한 세부 사항에 실제로 집중하지 않고 전체 론적 관점에서만 프로젝트를 생각합니다. 이 10 단계를 따르면 여러 프로젝트를 동시에 진행할 수 있고 전반적으로 더 건강한 설계 프로세스를 수행 할 수 있습니다.



01. 프로젝트 이해

디자인 작업을 시작하기 전에 프로젝트가 실제로 무엇인지, 어떤 기능을 가지고 있으며 최종 사용자가 무엇을 얻어야하는지 이해해야합니다. 디자인이 기능을 지배하지 않도록하십시오.



디자인을 개선하려면 다음 10 단계를 따르세요.

The History Channel의 Civil War 150 사이트의 경우 시각적으로 흥미롭고 이해하기 쉬우 며 임의의 사실로 시청자를 압도하지 않도록 사용자가 경험에서 어떤 정보를 얻어야하는지 이해하는 것이 중요했습니다.

종종 디자이너는 목표를 이해하지 못하고 보지 못하는 프로젝트에 '점프'합니다. 물론 그들은 결국 그 목표에 도달 할 수 있지만 훨씬 더 긴 경로를 통해서만 달성 할 수 있습니다. 머릿속의 마지막 부분을 거의 상상하는 이해는 더 건강한 과정을 거치게 해줄 것입니다. 결과적인 디자인은 당신을 놀라게 할 것입니다.



02. 아이디어를 올바르게 전달

내부적으로나 고객 앞에서 프레젠테이션의 힘을 과소 평가할 수 없습니다. 디자이너로서 아이디어를 명확하고 간결하게 전달하면 많은 질문과 피드백 세션이 제거되어 실제 작업 시간을 절약 할 수 있습니다. 고객은 즉시 모든 것을 통제하고 있다고 느끼고 귀하의 의견을 훨씬 더 신뢰하게 될 것입니다.

작업을 단계별로 발표하십시오. 먼저 개별 구성 요소를 보여줍니다. 각각의이면에있는 생각과 작동 방식을 설명하십시오. 그런 다음 사이트의 프레임 워크와 주요 사용자 상호 작용을 보여줍니다. 그것으로 이야기를 만들어라 : 거의 고객 앞에서 전체 프로젝트를 하나씩 만들어라. 마지막으로 모든 구성 요소가 함께 결합 된 전체 페이지를 표시합니다.

목탄 초상화를하는 방법

디자인을 개선하려면 다음 10 단계를 따르세요.



HTC Sense 사이트에 대한 스케치. Fi는 고객에게 스토리이면의 주요 아이디어를 설명하기 위해 화면 비디오를 녹화했습니다.

내가 일할 때 판타지 인터랙티브 (Fi), 디자이너는 디자인의 JPEG를 클라이언트에게 거의 보내지 않았습니다. 대신 매우 짧은 동영상을 녹화했습니다.

3D로 볼까요?

하루가 끝날 때 또는 배달 전에 디자이너는 Photoshop에서 작업 파일을 열고 모든 작업 방식에 대해 이야기하는 10 분 스크린 캐스트를 녹화하고 레이어를 켜고 끄고 서로 다른 상호 작용을 보여주고 특정 드롭을 보여줍니다. 아래로 작동하고 탐색이 확장되는 방식-일부 전환을 모방하여 왼쪽과 오른쪽으로 움직이는 여러 프레임을 만들고 모션 블러로 완성합니다.

03. 프레임 워크 생각

웹, 모바일 또는 TV 용으로 디자인하든 프로젝트를 시작할 때 프레임 워크와 주요 사용자 상호 작용을 먼저 생각하십시오. 사용자가 장치와 상호 작용하는 방법, 디자인해야하는 공간의 양, 사용자가 한보기에서 다른보기로 이동하는 방법 및 탐색이 사용되는 방법을 고려하십시오.

디자인을 개선하려면 다음 10 단계를 따르세요.

사용자가 사이트와 상호 작용하는 방식을 항상 고려하십시오 : Broadway.com iPad 앱의 홈페이지 프레임 워크 및 탐색

웹용으로 디자인 한 경우에도 앱에서 신호를 가져옵니다. 사이트가 20 개가 아닌 5 개의 템플릿으로 만 구성 될 수 있으며 나머지 정보는 플라이 아웃, 대화 형 서랍 등을 사용하여 동적으로 표시됩니다.

디자인을 개선하려면 다음 10 단계를 따르세요.

Google Ramayana의 프레임 워크 및 주요 상호 작용. 개별 요소 이전에 프로젝트의 프레임 워크 고려

이러한 모든 것들은 디자인 (또는 UX) 프레임 워크의 일부입니다. 먼저 거기에서 혁신을 시도한 다음 최종 결과가 무엇인지 알고 각 개별 구성 요소를 하나씩 디자인하기 시작하십시오.

04. 흥미 진진한 일 찾기

프로젝트를 시작할 때 아무리 흥분하더라도 그 과정에서 열정을 잃기 쉽습니다. 특히 작업은 몇 달 동안 지속되고 지속적으로 수정됩니다.

사자 얼굴을 그리는 방법

이와 같은 프로젝트에서는 아무도 실제로 관심을 기울이지 않고 혁신하지 않는 영역을 식별하여 많은 관심이 필요한 사이트 부분에 대한 정기적 인 작업과 균형을 이루는 것이 중요합니다.

홈페이지 작업이 지루하다면 지금까지 디자인 된 가장 혁신적인 이용 약관을 생각해보십시오. 이것은 어리석은 예처럼 보일 수 있지만 혁신은 좋은 디자인만큼이나 중요합니다. 믿거 나 말거나, 이러한 혁신적인 아이디어는 클라이언트가 처음에는 눈치 채지 못하더라도 나중에 사이트의 '중요한'섹션으로 이동합니다.

디자인을 개선하려면 다음 10 단계를 따르세요.

HTC 제품 페이지 마키. 이와 같은 멋진 작은 혁신은 종종 전체 사이트에 적용됩니다.

실제 예를 살펴 보겠습니다. 우리는 꽤 오랫동안 HTC 홈페이지를 확인하려고 노력했습니다. 우리는 모든 제품 요구 사항을 따르고 있었지만 항상 매우 간단했습니다. 그것을 특별하게 만드는 작은 것이 필요했습니다.

동시에 우리는 사람들이 올바른 HTC 전화를 선택할 수 있도록 대화식 마법사를 개발했습니다. 문제는 마법사가 많은 구성 요소를 가지고 있고 전체 페이지를 무겁게 만들고 있다는 것입니다. 실제 제품에서 산만 해졌습니다.

해결책으로 우리는 사용자가 끌어서 열어 마법사를 찾을 수있는 접힌 종이 윤곽을 만들었습니다. 이 기능 (종이 드래그 / 필링)은 매우 원활하게 실행되어 홈페이지를 포함한 사이트의 다른 곳에서 빠르게 구현되었습니다.

포토샵에서 레이어를 미러링하는 방법

05. 개별 픽셀 작업

아이디어를 올바르게 얻는 것은 작업의 50 %에 불과하며 나머지는 순수한 실행입니다. 너무 많은 프로젝트가 훌륭한 아이디어를 가지고 있지만 그 아이디어가 제대로 구현되지 않았기 때문에 영향을주지 못합니다.

디자인을 개선하려면 다음 10 단계를 따르세요.

Broadway.com 앱. 디자인을 최종 픽셀로 다듬기 : 사용자는 무의식적으로도 디테일에주의를 기울입니다.

주요 브랜드가 기준을 너무 높게 설정했기 때문에 대부분의 사용자는 제대로 실행되지 않은 디자인과 잘 실행 된 디자인을 쉽게 구분할 수 있습니다. 꺼져있는 실제 픽셀을 발견하지 못할 수도 있지만 전체적인 모양과 느낌을 포착합니다.

따라서 완벽한 픽셀 디자인을 목표로하십시오. 눈에 띄지 않을 것이라고 생각하더라도 가장 작은 세부 사항에 대해 작업하십시오. 디자인을 돋보이게하는 것은이 작은 세부 사항입니다.

Generate에서 Anton Speak를 참조하십시오. 오늘 티켓!

다음 페이지 : 더 나은 디자인을위한 다음 5 단계

  • 1

현재 페이지: 페이지 1

다음 페이지 2 쪽