모든 웹 개발자가 알아야 할 10 가지 디자인 개념

지난 몇 년 동안 저는 개발자를 대상으로하는 비주얼 디자인 기본에 대한 워크숍을 가르치고 있습니다. 웹에있는 대부분의 것들과 마찬가지로, 저는 제 워크샵을 수강 한 학생들과 함께 일한 개발자들로부터 다양한 수준의 디자인 지식과 관심을 발견했습니다.

이 목록은 내가 함께 일하는 개발자가 디자인에 대해 이해하기를 바라는 개념의 짧은 목록입니다. 디자인에 대한 생각과 의사 소통에 대한 소개로 개발자를 올바른 방향으로 안내하기위한 것입니다.

01. 디자인은 단순히 시각적 인 것이 아닙니다.

디자인은 단지 파사드가 아닙니다. 그것은 아래의 성격입니다. 어떤 이유로 디자인은 오로지 웹 사이트의 시각적 인 부분이라는 오명을 가지고 있습니다. 이것은 더 이상 거짓이거나 오해가 될 수 없습니다. 디자인은 사용자가 사이트에 들어온 순간부터 사이트를 떠난 후까지의 전체 경험입니다.



포토샵 요소에서 배경을 흐리게하는 방법

디자인은 사람들이 사이트를 사용하기를 원하는 '방법'과 '왜'입니다. 사이트가로드되는 속도; 호버링, 클릭 및 터치 간의 상호 작용 새로운 기능과 콘텐츠를 제공하는 속도. 이 모든 개념은 디자인을 구성합니다.

디자인은 시각적 측면 그 이상이고 전체 경험에 영향을 미치기 때문에 프로젝트의 모든 사람은 디자이너입니다. 사용자가 사이트와 상호 작용하는 방식을 발견하기 위해 시작하는 모든 팀 구성원은 디자이너입니다. 프론트 엔드, 백엔드 및 프로젝트 관리는 모두 디자인에 대해 생각해야합니다.

02. 사용자 중심

사용자는 가장 중요하며 항상 사이트 또는 앱에 대한 모든 결정의 최전선에 있어야합니다. 디자인은 사용자가 속도, 효과 및 가장 중요한 즐거움으로 목표를 달성 할 수 있도록해야합니다.

워크숍에서 학생들이 작업 할 프로젝트를 선택한 후 초기 디자인 개요를 작성하도록합니다. 따라야 할 간단한 지침을 제공하지만 대부분 사용자에게 초점을 맞추고 있습니다. 사용자가 누구인지, 사이트에서 무엇을하고 있는지, 언제 방문 할 때 원하는 느낌이 무엇인지, 그들은 떠난다?

이것은 워크샵의 소규모 프로젝트에 적합하지만 더 큰 프로젝트의 경우에는이 기반에 대해 더 큰 규모로 생각해야합니다. 디자이너는 페르소나, 스토리 텔링 등을 사용하여 사이트 사용자가 누구이며 사이트에서 무엇을하고 싶은지 나타냅니다. 프로젝트에서 어떤 형태로든 이러한 지침을 자세히 살펴보고이를 사용하여 모든 설계 결정에 영향을 미칩니다.

디자이너가 모든 사용자 경험을 짊어 질 필요는 없습니다. 디자이너는 그것을 이끌어야합니다. 대신 전체 팀이 경험을 공유해야합니다 (존재하는 경우). 최고의 사용자 경험을 만드는 가장 좋은 방법을 찾는 데 개발자에게 의존 한 경우가 많이 있습니다. 그들은 자신의 한계를 더 잘 알고있을뿐만 아니라 모든 가능성에 대한 명확한 아이디어를 가지고 있습니다.

03. 디자인 디테일

세부 사항은 '좋은'디자인을 '위대한'것으로 만들 수 있습니다. 사용자 경험의 세부 사항에 대한주의는 만족 한 사용자와 성가신 사용자의 차이 일 수 있습니다. 적절한 파란색 음영을 사용하거나 특정 텍스트 주위에 링크를 배치하는 것이 정말 중요합니다. 세부 사항의 문제는 그것들에 얽매이기 쉽다는 것입니다. 세부 사항에 너무 일찍 집중하는 것은 불필요하며 프로세스 속도를 늦출 수 있습니다. 특정 세부 사항에 초점을 맞출 때 또는 전체, 더 큰 그림을 시각화하는 것이 유익 할 때를 아는 것이 중요합니다.

04. 디자인 할 때 자주 스케치

혜택사용자 경험 스케치 아르 잘 기록 된 . 스케치는 다른 측면에서 콘텐츠, 계층 및 흐름에 대해 생각하는 데 도움이됩니다. 스케치는 저렴하고하기 쉽고 매우 빠릅니다. 30 초마다 하나의 새로운 아이디어를 만들 수 있어야합니다. 스케치는 또한 사이트의 레이아웃, 사용자 경험 및 사용자 흐름에 대한 아이디어를 전달하는 가장 좋은 방법 중 하나입니다.

스케치를 사용하면 아이디어를 빠르게 반복하고 목업이나 코드로 실험하는 데 많은 시간을 절약 할 수 있습니다.

스케치를 사용하면 아이디어를 빠르게 반복하고 목업이나 코드로 실험하는 데 많은 시간을 절약 할 수 있습니다.

저의 첫 대학 교수는 제가 학생이었을 때 이것을 저에게 심어주었습니다. 그녀는 스케치 페이지에서 페이지를 볼 때까지 컴퓨터 사용을 허용하지 않았습니다. 젊은 디자이너는 스케치를 생략하거나 아예 생략하는 경향이 있습니다. 나는 여전히 많은 디자이너들이 가능한 모든 솔루션을 먼저 탐색하지 않고 스케치에서 더 높은 충실도의 디자인으로 너무 일찍 전환하는 것을보고 있습니다.

스케치의 가장 좋은 부분은 누구나 할 수 있다는 것입니다. 누구나 상자, 구불 구불 한 선 및 화살표를 그리는 방법을 알고 있습니다. 디자인을 시작하는 데 필요한 기본 도구입니다. 정말 간단합니다. 우리는 귀중한 예술 작품을 찾고 있지 않으며 멋진 예술 학위가 필요하지 않습니다. 스케치와 그 뒤에 숨겨진 사고 과정을 명확하게 전달할 수 있어야합니다.

05. 공백 사용

개발자가 이해하기 가장 어려운 개념 인 것 같습니다. 적절한 양의 공백을 확보 할 때의 가장 큰 이점은 사용자에게 휴식을 제공하는 것입니다. 정보 처리에는 특히 처리 할 양이 많을 때 휴식이 중요합니다. 이것이 바로 하나의 긴 실행 텍스트 블록 대신 단락과 문장이있는 이유입니다.

일러스트 레이터에서 원근감 격자를 숨기는 방법

핵심은 공백이 다른 공간을 포함하여 페이지의 다른 개체와 관계가 있는지 확인하는 것입니다. 단일 열의 공백이있는 경우 균형을 맞추기 위해 주위에 다른 단일 열의 공백이 있는지 확인합니다.

세로 공간의 경우 본문 글꼴 크기의 일부만 사용하십시오. 나는 일을 단순하게 유지하고 .25의 척도를 사용하는 경향이 있지만 사용할 수있는 몇 가지 다른 저울 . 예를 들어, 본문 글꼴 크기가 16px (1em) 인 경우 : 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. 이렇게하면 단순히 배율을 위아래로 이동하여 글꼴 크기를 선택할 수 있습니다. 더 크거나 작은 유형을 원합니다.

Apple은 제품을 강조하고 보여주기 위해 공백을 정말 잘 사용합니다.

Apple은 제품을 강조하고 보여주기 위해 공백을 정말 잘 사용합니다.

06. 그리드는 단순한 CSS 프레임 워크가 아닙니다.

미쳤 죠? 그리드는 현재는 디자인에서 처음으로 눈에 띄었습니다. 국제 활자체 스타일 .

그리드를 사용하여 다음을 수행해야합니다.

  • 개체 간의 관계 만들기
  • 시각적 정렬을위한 기본 시스템 제공
  • 수평 및 수직 리듬 생성에 도움
  • 광학 균형 만들기

이러한 모든 개념이 함께 작동하여 사용자를위한 더 나은 시각 시스템을 만들 수 있습니다. 선택한 그리드는 디자인의 통일성에 영향을줍니다. 구현하기 가장 쉬운 그리드를 선택하는 것이 콘텐츠와 사용자를위한 최상의 디자인 선택이 아닐 수도 있습니다. 결국, 그것은 여전히 ​​도구 일 뿐이며 그것을 휘두르는 사람만큼 좋은 것입니다.

님

그리드를 CSS 프레임 워크로 생각하지 마십시오. 목적에 맞게 사용해야하는 디자인 도구

07. 모든 것이 강조되면 아무것도하지 않습니다

다른 일을하기 위해 동시에 소리를 지르는 사람들과 대화를 나누는 것과 같습니다. 페이지에서 가장 중요한 요소 중 하나만 강조해야합니다. 단일 요소를 강조하고 명확한 계층 구조를 갖는 것은 독자에게 흐름을 제공하며 원하는 방향을 가리켜 야합니다.

08. 영감 폴더 보관

시각적으로 영감을주는 모든 것의 갤러리를 유지하세요. 사진, 비디오, 포스터, 티셔츠 및 웹 사이트가 될 수 있습니다. 현재 직면하고있는 특정 디자인 문제에 대한 솔루션 아이디어를 촉발 할 수있는 모든 것.

이것은 참조 점으로 작용할뿐만 아니라 지속적으로 디자인을보고 평가해야합니다. 디자인 조각을 선택하여 폴더에 저장하는 간단한 프로세스는 이러한 디자인 분석 근육을 활용하도록합니다.

영감의 갤러리를 유지하십시오. 사진에서 티에 이르기까지 사진, 디자인 또는 다른 것을 참조 할 수 있으면 자신의 디자인에 대한 아이디어를 촉발 할 수 있습니다.

영감의 갤러리를 유지하십시오. 사진에서 티에 이르기까지 사진, 디자인 또는 다른 것을 참조 할 수 있으면 자신의 디자인에 대한 아이디어를 촉발 할 수 있습니다.

09. 디자인은 문제 해결에 관한 것입니다.

솔루션이 필요한 일련의 문제로 디자인에 접근해야합니다. 페이지의 모든 것은 거기에있는 이유가 있어야하며 사용자 또는 디자인에 대한 특정 문제를 해결해야합니다. 해결중인 문제가 매우 분명해질 때까지 기능 집합에서 기능을 제거하는 경향이 있습니다.

때로는 우리가 해결책으로 뛰어 드는 것보다 문제를 설명하기가 어렵습니다. 거꾸로 작업하면 정말 도움이됩니다. 예를 들어, 무언가가 빨간색이어야하는지 여부를 결정할 때 그만두고 처음에 빨간색을 원했던 이유를 생각하십시오. 스스로에게 물어보십시오. 내가 그것을 빨간색으로 만들어서 무엇을 성취하려고 하는가? 내 생각 과정은 어땠나요? 시작했던 곳으로 돌아갈 수 있지만 왜 그리고 무엇을하고 있는지 더 잘 이해할 수 있습니다.

10. 디자인에 대해 이야기하고 비평하는 방법을 알고

디자이너를 성가 시게하는 확실한 방법은 빨간색 블록이 파란색이어야하고, 텍스트 조각을 옮겨야한다고, 또는 로고를 더 크게 만드는 것입니다. 나는 당신이 아이디어를 얻은 것 같아요.

건설적인 피드백을 제공하는 가장 좋은 방법은 설계 문제에주의를 환기시키는 것입니다. 사용자, 사이트 흐름, 디자인 목표 및 시각적 원칙을 기반으로 한 증거를 확보하여 디자인에서 볼 수있는 문제를 지원합니다. 이것은 무엇을 변경해야하는지에 대한 귀하의 의견을 뒷받침하고 사용자와 디자인의 성공에 대한 강력한 기반을 제공합니다.

그런 다음 디자이너가 문제에 대한 해결책을 마련하기 위해 함께 작업 할 것입니다. 해결책을 제안 할 수있는 기회입니다. 로고를 더 크게 만들라고 요청하지 마십시오.

리소스 및 워크샵

이 내용이 흥미 롭다면 언제든지 내 개발자 리소스를위한 디자인디자인 학습 코스 . 나는 또한 당신을보고 싶습니다 온라인 버전 또는 대면 버전 워크샵의.

말: 카일 피들러

카일 피들러 Thinkbot의 디자이너로 Rails 및 iOS 애플리케이션 구축을 돕고 있습니다. 그는 닷컴 붐 (그리고 파산) 이후 어떤 형태로든 디자인하고 개발해 왔으며 그 이후로 멈추지 않았습니다.

포토샵에서 비디오를 반전하는 방법

이 기사는 원래 넷 매거진 문제 244.

마음에 드 셨나요? 읽어보세요!

훌륭한 디자인 팁이 있습니까? 댓글로 공유하세요!