비 설계자를위한 웹 디자인에 대한 개발자 안내서

14 살 때 첫 웹 사이트를 학교 프로젝트로 만들었습니다. 작업은 간단했습니다. 텍스트, 이미지 및 표를 포함한 매우 기본적인 사이트를 만드십시오. 학교 프로젝트에 대한 나의 평소의 태도는 그것들을 완전히 잊고 나중에 막판 해결책을 제시하는 것이 었습니다. 그러나 이번에는 견딜 수 없었습니다.

첫 번째 웹 사이트부터 항상 물건을보기 좋게 만드는 우선 순위를 정했습니다. 사람들은 외모에 따라 판단합니다. 자신이하는 일이 자신이하는 일을 잘 알고있는 것처럼 보이게하면 사람들이 더 신뢰하게됩니다. 바로 그런 일입니다.

몇 년간의 부수적 인 프로젝트를 진행하면서 프로그래밍을 완성하는 대신 디자인 기술을 개발하는 데 점점 더 집중했습니다. 알다시피, monstrum을 작성하는 알고리즘을 사용하면 지금까지 얻을 수 있습니다. 수익성있는 사이드 프로젝트를 시작하려는 꿈을 추구하면서 많은 다른 일을해야합니다. 디자이너가되는 것이 그들 중 하나입니다. 크로스 핏 운동 선수와 마찬가지로 솔로 설립자는 성과가 좋도록 둥글어야합니다.

뛰어난 디자인이 반드시 드리블 공조가 가장 많은 것은 아닙니다. 처음에는 눈치 채지 못할 것입니다. “할머니가 할 수있다”와“와, 정말 멋지다”라는 완벽한 균형입니다. 디자인은 경쟁 우위 또는 관의 못이 될 수 있습니다.

재능에 관한 것이 아닙니다

어렸을 때 많은 마인 크래프트를했습니다. 사람들이 만든이 멋진 건물들을 모두 보았습니다. 그러나 내가 무언가를 만들 때 상자처럼 보였습니다. 추악하고 스타일이 없습니다. Minecraft에서 어떻게 멋진 것을 만들 수 있습니까?

그래서 YouTube에서 한 남자를 발견하고 그가 제작 한 것과 똑같은 사본을 만들었습니다. 몇 주 후, 나는 나만의 스타일을 개발했고 나만의 스타일을 만들 수있었습니다. 갑자기 내 작품은 쓰레기처럼 보이지 않았습니다. 도대체 건물 콘테스트에서도 우승했습니다.

디자인은 기술이며 다른 기술과 마찬가지로 배울 수 있습니다.

작업에 적합한 도구 선택

프로그래밍에서 메모장을 사용하고 마치 완전한 IDE로 작성된 것처럼 좋은 앱을 작성할 수 있습니다.하지만 인생이 꽤 비참하기는하지만 눈에 띄게 더 오래 걸릴 것입니다. 웹 디자인의 세계에서 MS Paint는 메모장의 역할을 담당 할 것입니다. 메모장과 마찬가지로 실제로 디자인을 선택하는 사람은 거의 없습니다…

웹에서 가장 인기있는 디자인 도구는 다음과 같습니다.

  • React와 비슷한 MacOS 전용 도구 인 Sketch는 모든 작업 목록에 하드 코딩 된 것 같습니다. $ 99 / 년
  • Vue의 역할을 담당하는 무료 크로스 플랫폼 도구 인 Adobe XD. 소규모 커뮤니티이지만 시작하기가 매우 쉽습니다.
  • 모든 사람에게 알려진 디자인 작업을위한 스위스 나이프 인 Adobe Photoshop. jQuery, 그 자리를 차지했습니다. $ 9.99 / 월

Sublime 또는 VS 코드를 사용하여 앱을 작성하는지의 차이는 거의 없습니다. 또는 프론트 엔드에 React 또는 Vue를 사용하는지 여부 단지 선호의 문제 일뿐입니다. 각각의 장단점이 있기 때문에 디자인 툴도 마찬가지입니다.

Adobe XD를 사용합니다. 가장 큰 이유는 크로스 플랫폼이기 때문에 Apple 생태계에 인질로 잡히지 않기 때문입니다. 또한 Adobe의 지원을 받으므로 잠시 동안 여기에 올 것입니다. 초보자를위한 최선의 방법은 2018 년 5 월부터 Adobe XD를 몇 가지 제한 사항으로 자유롭게 사용할 수 있다는 것입니다 (어쨌든 넘어지지 않을 것임).

사고 방식 조정

웹 디자인 세계에서 가장 큰 도전은 내 사고 방식을 조정하는 것이 었습니다. 웹 사이트를 코딩 할 때 디자인을 생각해 보았습니다. 모든 것이 명령을 받았습니다. 흐름은 왼쪽에서 오른쪽으로 그리고 위에서 아래로 진행되었습니다. 사실이 접근법은 당신을 더 나쁜 디자이너로 만듭니다.

디자인 도구는 모든 요소가 절대적으로 배치되는 것처럼 디자인하도록 강요하기 때문에 혼란 스럽습니다. 이 변화를 받아들이십시오. 빠르게 변경하고 실험을 쉽게 할 수있는 자유를드립니다. 디자인은 지속적인 프로세스이기 때문에 이것이 필수적입니다. 좋은 결과를 얻기 전에 많은 것을 바꿀 것으로 예상됩니다.

도구 학습

코딩 할 때 div, span 및 input과 같은 HTML 요소를 사용하고 브라우저에서 시각적 요소로 렌더링하도록합니다. 디자인 도구를 사용하면 중개자를 건너 뛰고 모양 및 텍스트와 같은 시각적 요소를 직접 사용할 수 있습니다.

가장 많이 사용되는 4 가지 설계 도구를 선택했기 때문에 학습 시간을 줄이고 설계 시간을 더 많이 소비 할 수 있습니다. 그렇게하면 가능한 빨리 연습을 시작할 수 있습니다. 아래에서는 그들이 어떻게 작동하고 어떻게 사용하는지 보여 드리겠습니다.

사각형 도구

사각형은 가장 보편적 인 모양입니다. 당신은 항상 그들을 사용 자신을 찾을 수 있습니다. 그것을 div로 생각하십시오. 텍스트 입력 생성부터 컨테이너에 이르기까지 모든 종류의 작업에 유용합니다.

텍스트 도구 (라벨)

제목에서 알 수 있듯이 텍스트 도구를 사용하면 텍스트를 만들 수 있습니다. 텍스트 도구에는 한 줄 텍스트와 여러 단락에 대한 두 가지 상태가 있기 때문에 간단하지 않습니다. 다행히도 올바르게 사용하는 법을 배우기가 매우 쉽습니다.

첫 번째 상태는 텍스트 크기에 따라 크기를 조정하는 한 줄짜리 텍스트 컨테이너입니다. 줄 바꿈을하지 않으면 줄 바꿈이 없다는 점을 제외하면 과 비슷합니다. 이 상태의 이점은 줄 높이 및 글꼴 크기에 따라 텍스트 상자 크기를 자동으로 조정한다는 것입니다.

그것을 만들려면 텍스트 도구를 선택한 상태에서 클릭하여 작성하면됩니다. 일반적으로이 상태는 특정 너비가 필요하지 않고 한 줄인 경우에 사용하십시오. 예를 들어, 단선 헤드 라인 및 레이블.

텍스트 도구 (문단)

두 번째 상태는 특정 너비의

또는 격자 열 내부의

처럼 동작하는 특정 크기의 텍스트 컨테이너입니다. 이 상태의 이점은 텍스트 상자 크기를 제어 할 수 있다는 것입니다. 단락을 만들려면 선택한 텍스트 도구를 클릭 한 상태로 클릭하여 선택 영역을 만듭니다. 일반적으로이 상태를 두 줄 이상의 단락 및 헤드 라인에 사용하십시오.

도구를 고르시 오

이동, 크기 조정, 복제 이것이 바로 그 도구입니다. 그 분홍색 선은 주변 요소와의 거리를 보여줍니다. 파란색 선은 요소를 올바르게 정렬하는 데 도움이됩니다.

선 도구

설계의 일부를 분리하기 위해 선이 편리한 경우도 있습니다. 그렇기 때문에 선 도구가 여기에 있습니다. 대신 기술적으로 사각형 도구를 사용할 수는 있지만 div는 무엇이든 사용할 수 있습니다.

디자인 팁 및 기술

나열한 것

웹 개발에서 레이아웃은 가장 일반적으로 머리글, 메뉴, 내용 및 바닥 글로 설명됩니다. 그것의 일부이지만 레이아웃은 그 이상입니다. 말 그대로 모든 요소가 배치되는 방식입니다.

예를 들어, Sidemail의 프로젝트 정보를 디자인 할 때 카드 내부에 요소를 고르게 분산시켜보다 완벽하고 깨끗하게 보이도록했습니다.

그림 물감

다음 프로젝트에 완벽한 색상을 찾는 데 도움이되도록 색상의 심리학 (colorpsychology.org)을 염두에 두십시오. 기본 색상을 기반으로 완벽한 색상 조합을 찾는 데 유용한 도구는 Paletton입니다.

기본 색상 및 텍스트 색상의 음영을 사용하여 시각적 계층을 만듭니다. 컬러 배경을 사용할 때 텍스트에 더 어둡거나 밝은 색조를 시도하십시오.

타이포그래피

서체는 프로젝트의 브랜딩에 큰 영향을 미치므로 현명하게 선택하십시오. 프리미엄 서체는 Google 서체의 서체보다 더 좋아 보이는 경향이 있지만 처음 시작할 때는 구입하지 마십시오. Google Fonts에서도 숨겨진 보석이 있습니다.

텍스트를 시각적으로 구분하는 데 자주 사용하는 트릭은 큰 글자 간격으로 레이블을 대문자로 만드는 것입니다. 대문자 텍스트는 대칭 적이며 시각적 관점에서는 좋아 보이지만 읽기가 더 어렵 기 때문에 과도하게 사용하지 마십시오.

홈페이지 (또는 방문 페이지) 디자인

나는 항상 트렌디 한 요소를 디자인하려는 유혹을 피하고 내 메시지를 넣습니다. 오히려 나는 기능 (기능이 아님)을 생각해 내고 이야기에 넣고 시각적으로 매력적인 페이지로 그 이야기를 전합니다.

내가 말하고 싶은 것을 정한 후, 나는 보통 영감을 찾습니다. 이를위한 훌륭한 리소스는 사람들이 투표 할 수있는 멋진 방문 페이지의 방대한 디렉토리 인 land-book.com입니다. 디자인에 영감을주는 또 다른 멋진 페이지는 interfaces.pro로 가격, 404 또는 회사에 관한 카테고리별로 필터링 할 수 있습니다. 원하는 스타일에 맞는 사이트를 찾을 때까지 찾아보기 만하면됩니다.

어려운 부분은 모든 것을 하나로 묶는 것입니다. 불행히도, 지름길은 없습니다. 만족스러운 결과를 얻을 때까지 많이 반복하면됩니다.

일주일 전에 완전히 만족했던 디자인이 오늘날 충분히 나쁘거나 심지어 못 생겼다고 느끼는 것이 정상적인 지 궁금 할 것입니다. 대답은 완벽하게 정상이며 실제로 좋은 것입니다. 본질적으로 성장하고 배우고 발전하기 때문입니다. 어제의 도전은 오늘날 그렇게 도전적이지 않습니다. 쥐 경주에 걸리지 않도록이 점을 명심하십시오.

핵심, 관심사:

  • 독특한 서체가 큰 차이를 만듭니다
  • 그래픽은 매우 중요합니다. 적어도 일부 그림이나 이미지를 사용하십시오.
  • 여러 가지 색조를 사용하여 시각적 중요성을 바로 잡으십시오. 텍스트와 기본 색상으로는 충분하지 않습니다.
  • 너비가 1100 픽셀 정도 인 컨테이너는 너무 넓습니다.
  • 부정적인 공간을 포용
  • 기능이 아닌 이점에 대해 이야기
  • 갇 히면 영감을 얻으십시오.

웹앱 (또는 대시 보드) 디자인

방문 페이지 디자인과 마찬가지로 디자인 단계로 넘어 가지 마십시오. 이번에는 이야기를하려고하지 않습니다. 대신, 사용의 용이성이 목표입니다. 펜과 종이를 잡고 앱이 어떻게 작동해야하는지, 무엇에 의존해야하는지, 쉽게 탐색하는 방법을 계획하십시오.

필요한 경우 스케치 또는 와이어 프레임을 만듭니다. 적절한 경쟁사 설계 검사를 수행하여 부족한 부분과 더 나은 결과를 얻거나 경쟁 우위로 전환 할 수있는 사항을 스스로 확인하십시오. 때로는 종이와 디자인을 계획하기 전에 휴식을 취하는 것이 좋습니다.

유스 케이스에 맞지 않다는 것을 알려주는 가장 좋은 조언은 적절한 페이지 레이아웃을 선택하는 것입니다. 일반적으로 모든 웹 앱은 앱의 목적에 따라 화면 전체를 채우는 고정 너비 컨테이너 또는 유체 컨테이너의 두 가지 페이지 레이아웃을 사용합니다.

고정 컨테이너

고정식 컨테이너를 선호합니다. 불필요한 눈 움직임을 막기 때문에 좁은 공간에 초점을 맞추기가 훨씬 쉽기 때문입니다. 고정 컨테이너 응용 프로그램은 외관이 깔끔하고 새로운 사용자에게는 덜 압도적 인 경향이 있습니다. 그러나 너비가 더 작기 때문에 고정 컨테이너 앱은 디자인하기가 더 어렵습니다.

예 : Twitter, 버퍼, DigitalOcean, Netlify, GitHub

유체 용기

유체 컨테이너 앱은 채팅 앱, 스프레드 시트 앱 및 화면에 더 많은 물건이 필요한 기타 앱에 매우 적합합니다. 그러나 화면에 많은 양의 데이터가 있으면 압도적 일 수 있습니다.

예 : 슬랙, 인터콤, Hotjar, Google 스프레드 시트, Trello, Spotify

전체 페이지 레이아웃이 여기에 의존하고 나중에 변경하는 것이 많은 작업이므로 올바른 컨테이너를 선택하는 것이 중요합니다. 각 프로젝트는 고유하며 고유 한 솔루션을 요구하므로 실험을 두려워하지 마십시오!

핵심, 관심사:

  • 단순하게 유지
  • 읽을 수있는 서체 사용
  • 많은 데이터를 표시 할 때 시각적 계층 구조 사용
  • 경쟁 업체의 열악한 디자인 선택 활용

마무리

디자인은 경쟁 우위가 될 수 있으므로 사용하고 멋진 것을 만들어보십시오.

최신 프로젝트의 랜딩 페이지 용으로 제작 한 Adobe XD 템플릿을 가져와 설계 과정을 시작하십시오. 내 새 이메일 목록을 구독하면 우편함에 들어갑니다.

또한 Sidemail에서 진행 한 69 일의 진행 상황을 공유 할 SaaS 프로젝트 인 다음 게시물에 대한 알림을 가장 먼저 받게됩니다. 여기에는 가입자 수, 사이트 방문, 지출 및 디자인 초안이 포함됩니다. 말할 것도없이 진행될 것이지만, 절대 스팸이 없음을 보증합니다. 나는 그 쓰레기에 대한 시간조차 없다.

내 Twitter DM이 열려 있으므로 디자인을 작성하는 데 어려움이 있거나 추가 질문이 있으면 언제든지 연락하십시오.