비주얼 라이브러리 구축 : 디자인 팁 및 과제

게시 됨: 2020-12-17

노련한 디자이너와 주니어 디자이너의 가장 큰 차이점 중 하나는 그가 만드는 비주얼 라이브러리입니다.

비주얼 라이브러리 란?

이것은 UI 요소 및 UX 관행과 관련하여 머릿속에있는 것입니다. 무엇을 구축하고 작동 방식을 이해하고 있습니다. 라이브러리가 풍부할수록 그 자리에서 솔루션을 더 빨리 찾을 수 있습니다.

예를 들어 보겠습니다. 디자이너는 새로운 웹 사이트를 구축해야합니다.

어떤 웹 사이트? 물어볼 수 있습니다. 글쎄, 그것이 당신이 가진 모든 요구 사항입니다. 동료 동료의 도전. 아, 또한 한 시간 동안 할 수 있습니다. 이것은 DevriX에서 한 도전이며 다음은 3600 초 후의 결과 중 하나입니다.

Alex Dimitrov의 디자인

주제를 고려할 시간이 많지 않았기 때문에 헤더에 바로 들어갔습니다. 헤더에는 어떤 구성 요소가 있습니까?

  • 확실한 제목
  • 항해
  • 검색 창
  • 일부 소셜 링크
  • 주로 계정 등록 및 / 또는 생성을위한 일부 클릭 유도 문안 버튼
  • 재미있게 만들기위한 탐색

이 모든 것이 어디에서 왔습니까? 이전에는 빈 페이지였습니다. 처음에는 주제조차 없었습니다. 웹 사이트, 애플리케이션 및 그 주변의 모든 것을 구축하는 동안 디자이너의 마음 속에 만들어진 시각적 라이브러리 덕분에 모든 일이 일어났습니다.

헤더를 얼마나 많은 방법으로 디자인 할 수 있습니까? 수백 가지 방법. 다양한 유형의 요소, 지형도, 색상, 오버레이, 버튼, 요소 등이 많이 있습니다. 할 수있는 흥미로운 실험입니다.

비주얼 라이브러리를 구축하는 방법

가장 간단한 대답은 "더 많은 디자인을 만드는 것"이지만, 훨씬 더 많은 것이 있기 때문에 만족 스럽지는 않습니다. 더 중요한 것은 다양성입니다. 다양한 디자인 구축. 이에 접근 할 수있는 직접적인 방법 중 하나는 큰 사이트를 재 설계하는 것입니다.

다음은 몇 가지 예입니다.

페이스 북 :

이미지 출처 : Dribbble

Gmail :

이미지 출처 : Dribbble

트위터:

이미지 출처 : Dribbble

너무 많은 예가 있습니다. 디자인이 복잡할수록 더 빨리 진행할 수 있습니다. 그러나 정확히 어떻게 작동합니까?

목록을 예로 들어 보겠습니다. 목록에는 이름을 지정하는 머리글이있을 수 있으며, 색상이 지정되거나 디자인이 비슷하거나 디자인이 다른 아이콘이있을 수 있습니다. 또한 더 큰 제목과 부제목을 가질 수 있으며 번호가있는 레이블 일 수도 있습니다. 그런 다음 마우스 오버 상태, 선택하거나 비활성화 할 수있는 항목 등을 추가 할 수 있습니다. 이러한 모든 변형을 사용하여 다양한 목록 디자인을 만들 수 있습니다.

이미지 출처 : Dribbble

너무 많은 구성과 레이아웃을 만들 수 있다는 것은 좋은 시각적 라이브러리를 갖는 것입니다. 그렇게 할 수 있다는 것을 알기 위해서. "상자를 그려주세요"라고 말한 다음 "제목 추가"라고 말하는 사람이 옆에있는 것과 같습니다. 이 모든 결정은 당신이 전에 한 적이 있기 때문에 내려집니다. 실제로 디자인 기본 사항도 따르지만 항상 노트 나 책에 도달 할 수는 없습니다. AI를 훈련하는 것과 같습니다. "성공적인 요소 순서"를 사용하여 패턴을 구축해야합니다.

모든 비주얼 아티스트는 라이브러리를 구축해야합니다.

그 대표적인 예는 어떤 관점으로도 실물과 같은 작품을 만들 수있는 천재 김정기이다.

Art 김정기

인터뷰에서 그는 평생 동안 주변의 모든 물체를 어떻게 보았는지, 모양을 이해하고 다른 관점에서 그렸습니다. 이 기술을 통해 그는 이제 참조없이 흰 종이에서 시작하여 위 이미지에서 보는 모든 것을 그릴 수 있습니다.

또는 그의 참조가 그의 마음에 있기 때문에 도달 할 수있는 참조없이 그의 시각적 라이브러리를 더 잘 말하십시오. 이것은 디자이너를 위해 노력하는 큰 목표 인 마스터 작품의 예입니다.

웹 디자이너가 버튼, 목록, 카드, 입력 필드, 팝업 등에 대해 배우는 것과 같은 방식으로 디지털 아티스트는 재료, 조명, 실루엣, 근육이 작동하는 방식, 중력이 당신을 끌어 당기는 방식에 대해 배우고 몸 등등.

Suzanne Helmigh의 그래픽

이것은 디지털 아티스트가 다양한 재료를 구에 적용하여 어떻게 학습하는지 보여주는 예입니다. 마그마, 나무, 모피, 포도주, 계란, 치즈, 뭐든지 유효합니다. 그것에 대해 배우고, 손을 사용하여 수행하면 조금씩 뇌에 각인됩니다. 그리고 그 재료를 실제 그림에 적용 할 때가되면 그것이 실제로 어떻게 작동하는지 그리고 최종 결과가 어떻게 현실적으로 보이는지 더 잘 이해하게되었습니다.

다음은 피부, 가죽, 금속 및 머리카락을 모두 사용하여 매우보기 좋은 최종 제품을 만드는 예입니다. 이러한 재료에 대한 근본적인 이해가 부족하면 금속이 플라스틱, 가죽과 같은 종이처럼 보일 수 있습니다.

이미지 출처 : Artstation

웹 디자인 구성 요소 과제

이제 웹 디자인에서 자주 사용할 몇 가지 일반적인 구성 요소와 수행 할 몇 가지 사례를 다시 살펴 보겠습니다.

1 – 버튼

웹 사이트에서 가장 기본적인 구성 요소 중 하나입니다. 버튼은 모든 모양과 크기로 제공됩니다. 그라디언트 설정, 색상 변경, 텍스트 그림자 추가, 테두리 추가 (둘 이상), 광택 스타일 추가, 윤곽선 추가, 모양 변경 (사각형, 둥근 모서리, 원), 일부는 아이콘과 함께 제공되고 다른 일부는 아이콘이 분리되어 있습니다. 하위 클릭 가능 영역.

이미지 출처 : Dribbble

작업 : 20 가지 스타일의 버튼을 디자인합니다. 그들 사이의 차이가 클수록 좋습니다. 각각에 대해 대비, 균형 등의 측면에서 모범 설계 사례를 계속 따르십시오.

2 – 카드

카드 또는 상자는 또 다른 매우 일반적인 구성 요소입니다. 일부 공통 요소는 머리글 / 바닥 글 + 기본 콘텐츠 일 수 있지만 모든 유형의 콘텐츠를 포함 할 수 있습니다.

이미지 출처 : Dribbble

과제 : 콘텐츠를 사용하여 위의 카드를 구성하고 10 가지 변형을 디자인합니다. 이상적으로는 가능한 한 다릅니다. 스타일 변경, 새로운 요소 추가, 회전, 그라디언트, 그림자, 아이콘 및 일러스트레이션 사용. 그것에 열광하십시오.

3 – 댓글

거의 모든 블로그에는 일종의 댓글 시스템이 있습니다. 그러나 주석 구성 요소가 실제로 실제 주석이 아니라 "상태"변경에 더 가깝다고 생각 했습니까?

이미지 출처 : Dribbble

태스크 : 위의 예는이를 보여줍니다. 이제 사용자의 댓글, 작업 업데이트 상태 (댓글 영역에 있음), 채팅과 같은 댓글 등 댓글 구성 요소와 관련된 모든 것을 생각해보십시오. 7-10 개의 변형 사이의 모든 것이 좋은 숫자입니다. 다시 – 그것들을 모두 다르게 유지하십시오. 더 많이 조사하고, 아이디어를 찾고, 사이트를 찾아보십시오.

이 연습의 목표는 이전에 알지 못했던 새로운 방식으로 공통 요소를 수행하는 방법을 찾는 것 입니다.

4 – 슬라이더

슬라이더는 많은 프런트 엔드 개발자가 생성하는 엄청난 양의 문제와 백그라운드에서 실행될 수있는 무거운 JavaScript 때문에 싫어하는 구성 요소 중 하나입니다. 하지만 그렇다고해서 만들 필요가 없다는 의미는 아닙니다.

이미지 출처 : Dribbble

작업 : 웹 및 다양한 디자인을 검색하여 다양한 레이아웃과 접근 방식에 대해 자세히 알아 봅니다. 그들이 가지고있는 것을보기 위해 슬라이드를하는 JS 라이브러리를 살펴볼 수도 있습니다. 거기에서 슬라이더를위한 10-15 개의 다른 디자인을 디자인하십시오. 다시 말하지만, 모든 디자인을 이전과 최대한 다르게 만들고 약간의 개선 만 사용하지 마십시오.

5 – 입력 양식

입력 양식은 거의 모든 웹 사이트의 또 다른 핵심 부분입니다. 그들에게 흥미로운 것은 그들이 출력물 대신 정보를 받는다는 것입니다.

이미지 출처 : Dribbble

과제 : 여기서 당신의 일은 누군가가 웹 사이트에서 필요로 할 수있는 가장 이상한 유형의 정보를 찾는 것입니다. PDF 또는 PSD (하나 선택), 신용 카드 정보 업로드, 쿠키 레시피 추가, 페인트 혼합 비율 계산, 자동차 대리점 구성 도구 만들기. 떠오르는 것은 무엇이든 독특할수록 좋습니다. 실제 솔루션을 보려면 웹 사이트를 계속 탐색하십시오. 독특한 디자인으로 10 가지 이상의 독특한 형태를 디자인하세요.

요약

디자이너로서 디자인 라이브러리를 구축하는 것은 워크 플로를 개선하고, 디자인을 신속하게 생성하고, 고객을위한 문제를 해결하고, 사용자 경험을 개선 할 수있는 독특하고 천재적인 방법을 제시하기위한 주요 디딤돌 중 하나입니다. 웹의 각 요소를 탐색하고 면밀히 살펴보면 사용자의 작업, 사용자가 보는 내용, 개선 할 수있는 방법을 고려하기 시작합니다.

위의 과제를 숙제로 사용하면 포트폴리오채우는 데 도움이 됩니다. 언급 된 5 가지 작업에만 국한하지 말고, 웹 사이트를 탐색하고, 재 설계하고, 연구하고, 계속해서 디자인 감각을 개발하고 자신 만의 시각적 라이브러리를 구축하십시오!