30일 안에 웹 디자인을 배우기 위한 30가지 팁

 30일 안에 웹 디자인을 배우기 위한 30가지 팁

John Morrison

30일 안에 웹 디자인을 배우기 위한 30가지 팁

웹 디자인의 기초를 배우는 것이 여전히 "언젠가는" 목록에 있습니까? 왜 아직 시작하지 않았습니까? 이번 달에 웹 디자인 학습을 시작하는 데 도움이 되는 30가지 팁과 리소스를 모았습니다(아마도 새로운 진로를 찾을 수도 있습니다!).

그래픽 디자이너, 인쇄 디자이너, 새로운 것을 배우거나 미루는 일을 그만둘 필요가 있는 웹사이트 침입. 첫 번째 단계를 수행하지 않는 날마다 다른 사람보다 하루 더 뒤쳐지게 됩니다!

다음 단계를 따라 첫 번째 웹사이트를 만드는 방법, 업계 모범 사례 등을 모두 30개에서 배우십시오. 일!

디자인 리소스 탐색

1. 웹사이트 시작

웹 디자인 학습을 시작하는 가장 좋은 방법은 직접 해보는 것입니다. Design Hackers의 저자인 David Kadavy의 조언입니다.

블로그를 시작하는 것이 좋습니다. 웹 디자인 놀이터를 갖기 위해 블로그를 시작했고 7년 후 이 주제에 관한 베스트 셀러 책을 출간했습니다. 블로그와 같은 개인 프로젝트를 통해 새로운 것을 시도할 수 있는 장소를 제공하고, 일을 망쳐도 상사가 해고하지 않을 것입니다.

대량으로 시작할 필요는 없습니다. 웹사이트 또는 미친 디자인; 작게 시작하십시오. 웹사이트를 가지고 놀면서 무엇이 작동하는지 알아내십시오. (그리고 코드를 검사해야 웹사이트 작동에 익숙해질 수 있습니다.)

원하는 것그로 인해 일어나는 색이나 눈의 움직임. 이 가장 단순한 형태의 디자인은 마무리 작업을 진행하기 전에 어떤 것이 개념으로 작동하는지 아이디어를 제공합니다.

22. Google 글꼴을 사랑하는 법 배우기

Google 글꼴은 당신의 친구입니다.

Google에 대해 어떻게 생각하든 웹사이트에서 사용할 수 있는 서체를 찾아보고 정렬하고 선택할 수 있습니다. 디자인이 중요합니다. 라이선스에 대해 또는 서체가 특정 브라우저와 호환되는지 여부에 대해 생각할 필요가 없습니다.

제한 사항은 작업할 Google 글꼴 라이브러리에 있는 항목만 있다는 것입니다. 하지만 시도해 보면 거의 모든 프로젝트에 맞는 것을 찾을 수 있습니다. 장기적으로 많은 시간을 절약할 수 있습니다.

23. UI 키트 분리

사용자 인터페이스 또는 아이콘 키트를 다운로드하고 선택합니다.

웹사이트의 코드를 검사할 수 있는 것처럼 웹용 디자인 요소가 어떻게 구성되는지 살펴봅니다. . 크기와 격자를 기록하고 색상 혼합과 Photoshop 또는 Illustrator 내에서 파일이 구성되는 방식을 살펴보십시오.

고해상도 디스플레이를 위한 여러 형식의 요소가 포함된 다운로드할 키트를 찾으십시오. (JPEG 파일을 많이 다운로드하는 것은 그다지 도움이 되지 않습니다.)

그런 다음 한두 개의 요소를 직접 만들거나 맞춤설정해 보세요.

24. 타이포그래퍼 되기

현대 웹사이트 디자인은 타이포그래피에 중점을 둡니다. 좋은 타이포그래피. 영웅 헤더에서사용자를 디자인으로 끌어들이는 거대한 단어와 텍스트 레이어를 사용하여 문자 요소를 페어링하고 매력적인 텍스트 블록을 구성하는 방법의 원칙을 이해하는 것이 중요합니다.

Ellen Lupton의 Thinking with Type으로 시작하세요. (같은 이름의 책도 있습니다.) Lupton은 타이포그래피의 권위자이며 그녀의 정보는 곧 타이포그래퍼처럼 생각하게 만들 것입니다.

25. Jump into JavaScript

웹 디자인에 익숙해지기 시작하면 JavaScript를 배우기 위해 다시 도전하십시오. HTML과 CSS 다음으로 웹에서 가장 중요한 언어입니다.

JavaScript는 디자이너가 웹 페이지에서 복잡한 것과 상호 작용을 구현할 수 있게 해주는 도구입니다. 슬라이더 슬라이드나 패럴랙스 애니메이션을 애니메이션으로 만드는 것입니다.

Learn JS에는 시작하는 데 도움이 되는 대화형 자습서가 있습니다.

또한보십시오: 20+ 재미있는 & 디자인 프로젝트를 위한 멋진 Photoshop 아이디어(+ 템플릿)

26. 포트폴리오 업데이트

웹 디자인을 시작하면 웹 디자인 프로젝트로 포트폴리오를 업데이트해야 합니다. 이 간단한 작업을 통해 웹 디자인이 레퍼토리의 일부임을 자신과 다른 사람들에게 보여줄 수 있습니다.

업데이트된 포트폴리오는 잠재 고객이 귀하의 "스타일"이 어떤 것인지 확인하는 데 도움이 될 수 있습니다. 당신이 무엇을 할 수 있는지 보여주는 레이아웃, 색상, 타이포그래피 및 다양한 기술을 보여주어야 합니다.

27. 자신에게 도전하기

거의 모든 웹사이트 문제를 해결하는 데 도움이 되는 수많은 단축키와 코드 스니펫을 사용하여게으르지 마십시오. 새로운 기술과 기술을 배우기 위해 지속적으로 자신에게 도전하고 웹 디자인 게임을 계속 개선해야 한다는 점을 기억하세요.

이 분야의 한 가지 특징은 끊임없이 변화한다는 것입니다. 항상 새로운 것을 배우거나 시도할 수 있습니다.

28. 경험 극대화

나가서 디자인하십시오. 웹 디자이너가 되려면 웹사이트 디자인을 시작해야 합니다.

작게 시작하되 다른 사람들과 함께 프로젝트를 진행하세요. 직장에서 팀과 함께 프로젝트에 참여하도록 요청하십시오. 친구를 위한 작은 웹사이트를 다루십시오. 웹사이트 구축 경험이 많을수록 더 빠르고 더 좋아질 것입니다.

무엇을 기다리고 계십니까? 미루지 마세요.

29. 피드백 요청

네트워크를 사용하여 웹사이트 디자인 프로젝트가 아무리 작더라도 피드백을 수집하십시오. 마음에 들지 않더라도 이 피드백에 귀를 기울이고 무엇을 배울 수 있는지 알아보세요.

피드백을 제공한 사람은 시각적 선호도 외에도 웹사이트 기능을 개선하기 위한 제안을 제공했습니까? 그들은 디자인의 목표를 쉽게 이해할 수 있었습니까? 메시지와 연결되었습니까?

30. 새로운 것을 계속 배우십시오

훌륭한 웹사이트 디자이너가 되려면 계속해서 새로운 것을 시도하고 배우면 됩니다. 현장의 다른 사람들과 네트워크를 형성하고 소통하여 수요가 많은 기술과 시각적 변화를 파악할 수 있습니다.

찾고 있는 경우웹사이트 디자인을 배우기 위해, 이것은 아마도 당신이 정기적으로 하는 일일 것입니다. 그러나 이것은 진화하는 분야이며 거의 매일 계속 변화하고 있습니다. 하고 있는 사람에게 물어보십시오.

빨리 시작? 먼저 시각적 사이트맵을 만듭니다. 그런 다음 Wix와 같은 웹사이트 빌더를 통해 스타일리시한 웹사이트 디자인을 시작하는 데 도움을 받을 수 있습니다. 웹사이트에 들어가는 요소와 개념을 배우기 시작할 때입니다.

2. 읽을 수 있는 모든 것을 읽으십시오.

읽기 시작하십시오. 당신은 이 블로그에 있기 때문에 아마도 디자인 세계에서 일어나는 일을 추적하는 데 익숙할 것입니다. 계속 읽으십시오.

웹사이트 디자인, 동향, 기술 및 모범 사례에 대해 가능한 모든 내용을 읽으십시오. 소셜 미디어에서 존경하는 디자이너를 팔로우하세요.

웹사이트 디자인 읽기에도 넓은 그물을 던지세요. 일부 코드를 배우기 위해 기본 사항에 대해 읽고 디자인 이론에 대해 읽고 자습서 및 최신 기사를 읽으십시오.

3. 효과적인 커뮤니케이터가 되십시오

당신이 가장 명료한 사람이 아니라면 그 기술을 연마하십시오. 웹사이트 디자인의 큰 부분은 커뮤니케이션입니다.

웹사이트 디자이너는 디자인이 해결해야 할 문제를 파악하기 위해 클라이언트와 정기적으로 커뮤니케이션해야 합니다. 이러한 솔루션을 전달하고 구현해야 합니다.

4. Tuts+ & Envato Elements

Envato Elements 구독을 고려해보세요. 그러면 훌륭한 Tuts+ 학습 리소스에 액세스할 수 있습니다.

Tuts+는 기본 기술에서 그래픽 및 웹 디자인에 대한 정규 과정을 게시합니다. 최신 고급 접근 방식 및 개발을 통해.전문 강사가 가르치는 완전히 자기 주도적입니다. 또한 그래픽, 템플릿 등을 찾아 웹 디자인 작업에 연결할 수 있는 훌륭한 리소스인 Envato Elements에 액세스할 수 있습니다.

5. Think in HTML

HTML 또는 하이퍼텍스트 마크업 언어는 웹사이트 디자인의 초석입니다. HTML은 웹사이트의 구조를 만드는 데 도움이 되는 뼈대이며 언어를 읽을 수 있게 되면 웹사이트 디자인의 세계가 훨씬 더 이해하기 쉬워질 것입니다.

W3Schools에는 수백 개의 HTML 예제가 포함된 훌륭한 HTML 시작 자습서가 있습니다. 무슨 일이 일어나고 정확히 어떻게 작동하는지 보기 위해 화면에서 놀 수 있습니다. (생각보다 직관적이라고 느끼실 수 있습니다.)

6. Codeacademy에서 코드 놀이

HTML이 좋은 시작이지만 Codeacademy에서 거의 모든 프로그래밍 언어를 배울 수 있습니다. 무료 도구 세트는 대화형 활동과 게임을 사용하여 코딩하는 방법을 알려줍니다.

필요한 장소와 시기에 Codeacademy 과정을 선택하고 필요에 따라 시작하고 중지할 수 있습니다. 배울 주제(웹 개발, 프로그래밍, 데이터 과학) 또는 집중할 언어(HTML & CSS(시작하기 좋은 곳), Python, Java, SQL, Ruby 등.

7. CSS 이해 방법 배우기

CSS(Cascading Style Sheets)는 HTML 또는 XML 및 SVG로 작성된 문서의 표현을 정의합니다.

Mozilla

CSS에서 정의한 대로 화면에 요소를 렌더링하는 방법,종이, 연설 또는 기타 매체에.

Mozilla에는 또한 선택기와 속성, CSS 규칙 작성, CSS 적용을 포함하여 CSS 작동 방식에 대한 확실한 소개와 함께 시작할 수 있는 훌륭한 CSS 리소스 모음이 있습니다. HTML로, CSS에서 길이, 색상 및 기타 단위를 지정하는 방법, 캐스케이드 및 상속, 상자 모델 기본 사항 및 CSS 디버깅. 그런 다음 모듈은 스타일 지정 텍스트 및 상자를 설명하는 것으로 이동합니다.

8. 웹에 디자인 기술 적용

만약 당신이 이미 크리에이티브 또는 그래픽 디자인 분야에서 일하고 있다면 웹사이트 디자인에도 적용할 수 있는 이미 알고 있는 것들을 생각해 보십시오. 시각적으로 매력적인 것을 만드는 원리는 매체에 따라 달라지지 않으며 그 모든 디자인 이론은 디지털 공간에서도 유용할 것입니다.

학습 코드와 같은 요소가 자연스럽지 않을 수 있지만 디자인 배경은 엄청난 보너스입니다. 아름답게 코딩된 웹사이트가 상호작용을 원하지 않는다면 무슨 소용이 있겠습니까?

9. 좋아하는 웹사이트에 주목하세요

좋아하는 웹사이트에 주목하세요. 그들의 어떤 점이 당신에게 매력적입니까? (그리고 이러한 요소를 복제하는 방법을 어떻게 배울 수 있습니까?) 다음에 주의하십시오.

  • 타이포그래피
  • 내비게이션
  • 이미지 및 공간 사용
  • 양식 디자인
  • 애니메이션 및 스크롤 효과
  • 색상

10. 와이어프레임 그리기

와이어프레임은 웹 디자이너의 브레인스토밍입니다.

가장 순수한와이어프레임은 웹사이트가 어떻게 될지에 대한 스케치입니다. 미적 요소의 개요가 아니라 웹사이트의 청사진입니다. 와이어프레임을 그리는 것은 이 디자인의 모양에 관한 것이 아니라 그 안에 있는 정보 구조에 관한 것입니다.

와이어프레임을 만드는 방법을 모르십니까? Digital Telepathy에는 학습에 도움이 되는 모범 사례 가이드가 있습니다.

또한보십시오: InDesign에서 페이지를 추가하는 방법

11. 시간을 들여 스케치를 배우십시오.

Sketch는 디자인 요소를 쉽게 만들 수 있는 Mac용 벡터 드로잉 도구입니다. 많은 디자이너가 UI 요소와 반복되는 디자인 블록을 만들기 위해 Sketch로 눈을 돌리고 있습니다.

플러그인이 포함되어 있으며 쉽게 사용하고 액세스할 수 있도록 코드를 내보낼 수 있습니다. Adobe의 Creative Suite 이후 가장 강력하고 인기 있는 도구 중 하나이며 시간을 투자할 가치가 있습니다.

12. 최신 기술

AI, VR, AR, 360도 비디오, 봇.

수많은 새로운 기술과 트렌드를 따라잡기가 어려울 수 있습니다. 그러나 이러한 변화를 파악하려면 요점을 파악해야 합니다.

한 번에 하나씩 처리하고 수행하는 작업과 가장 직접적으로 관련된 기술부터 시작하십시오. 온라인 채팅이 가능한 웹사이트가 있는 경우 봇에 대해 배우는 것부터 시작하세요. 또는 동영상 콘텐츠를 많이 사용하는 경우 360도 동영상으로 놀아보세요.

인공 지능과 가상 또는 증강 현실과 같은 요소는 훨씬 더 복잡하지만 통합된 일부가 될 가능성이 높습니다.앞으로의 웹사이트 디자인 환경. 최소한 그것이 무엇이며 잠재적인 용도가 무엇인지 알아야 합니다.

13. SEO에 익숙해지기

많은 웹 디자이너는 SEO 전문가가 검색엔진이 읽을 수 있는 웹사이트를 준비할 수 있다고 생각하지만 SEO와 관련된 많은 디자인 작업이 있습니다.

이미지가 업로드되는 방식부터 페이지 및 요소에 메타 설명을 포함하는 빠른 깔끔한 코드 생성에 이르기까지 디자이너는 검색 사고를 워크플로우에 통합해야 합니다.

프리랜서 여러분에게도 이는 매우 중요합니다. 대부분의 고객은 SEO에 최적화된 웹사이트를 요청할 정도로 정통합니다. 혼자 일하는 경우 Google이 읽을 수 있는 견고한 프레임워크를 만들 수 있을 만큼 충분히 알아야 합니다(추가 작업이 필요한 경우 클라이언트를 SEO 전문가에게 추천할 수 있어야 함).

14. 웹사이트 빌더 사용하기

웹사이트 빌더는 모범 사례와 웹사이트 구축 및 디자인을 시작하는 방법에 익숙해지는 좋은 방법이 될 수 있습니다.

대부분의 이러한 도구에는 많은 템플릿이 있으며 요소를 사용자 지정하고 코드 스니펫을 추가할 수도 있습니다. 간단한 사이트의 경우 많은 웹사이트 빌더가 개인 포트폴리오 페이지나 놀이터 역할을 하는 기본 웹사이트를 만들 수 있는 무료 플랜도 제공합니다.

그런 다음 웹사이트 빌더 내에서 조각을 선택합니다. 에 대한 느낌을 얻기 위해 디자인되고 코딩된 방법을 살펴보십시오.모든 것이 어떻게 결합되는지. 다른 디자인을 선택하는 것만으로도 알아낼 수 있는 것에 놀랄 것입니다.

15. 멘토 찾기

웹 디자이너로서 존경하는 사람이 있습니까? 그들과 함께 점심을 먹고 업계에 대해 머리를 짜내십시오.

당신과 함께 일할 의향이 있는 멘토를 찾고 현장에 대해 생각하고 스스로 웹 디자인을 배우는 방법은 매우 중요할 수 있습니다. 온라인 커뮤니티에서 멘토를 찾을 수도 있지만 주기적으로 대면할 수 있는 실제 사람보다 더 좋은 것은 없습니다. (아마도 온라인 및 대면 멘토를 갖는 것이 가치가 있을 것입니다.)

16. CodePen 커뮤니티 가입

일부 코드와 프로그래밍에 익숙해지면 CodePen 커뮤니티에 가입하고 싶을 것입니다. 오픈 소스 커뮤니티를 사용하면 일종의 소셜 네트워크에서 코드 스니펫을 공유하고 편집할 수 있습니다.

다음은 사이트 창립자의 설명입니다. “CodePen은 소셜 개발 환경입니다. 기본적으로 브라우저에서 코드를 작성하고 빌드할 때 결과를 볼 수 있습니다. 모든 기술을 가진 개발자에게 유용하고 자유로운 도구이며 특히 코딩을 배우는 사람들에게 힘을 실어줍니다. 우리는 주로 HTML, CSS, JavaScript와 같은 프런트 엔드 언어와 이러한 언어로 변환되는 전처리 구문에 중점을 둡니다.”

17. 수업 듣기

일부 학습자의 경우 보다 공식적인 교실 환경은최고입니다.

대면 및 온라인으로 웹 디자인 기초를 배울 수 있는 수많은 수업이 있습니다. Udemy 또는 Coursera와 같은 지역 대학 또는 온라인 학습 허브에서 시작하십시오. 현재 능력 수준에서 수업을 선택하고 계속 진행하십시오.

18. 뭔가 하고 싶나요? Google It

전통적이지 않은 학습자를 위해 Google에서 웹 디자인 문제에 대한 답을 찾으십시오. 거의 모든 문제와 해결책을 안내할 수 있는 많은 자습서와 비디오가 있습니다.

핵심은 정확히 알아야 할 내용을 검색하고 신뢰할 수 있는 출처에서 답변을 찾는 것입니다. 자습서 및 비디오와 관련하여 또 다른 팁이 있습니다. 최신 콘텐츠가 더 좋고 완전하며 관련성이 높은 답변을 제공할 것입니다. (이 중 일부는 빠르게 변화하고 있음을 기억하십시오.)

19. 사용자 경험에 주의를 기울이십시오

사용자 경험 디자인만큼 웹사이트를 만들거나 망칠 수 있는 것은 없습니다. 이를 계획하고 이해해야 합니다.

Interaction Design Foundation에서 UX 디자인을 설명하는 방법은 다음과 같습니다.

사용자 경험(UX) 디자인은 의미 있고 개인적으로 관련된 제품을 만드는 프로세스입니다. 경험담. 여기에는 제품의 유용성과 소비자가 제품을 사용함으로써 얻을 수 있는 즐거움 모두에 대한 신중한 디자인이 포함됩니다. 또한 측면을 포함하여 제품을 획득하고 통합하는 전체 프로세스와 관련이 있습니다.브랜딩, 디자인, 사용성, 기능.

UX디자이너, 즉 경험이 형성되는 과정을 인지하고 있는 디자이너는 그 과정에 영향을 미치는 요소를 의도적으로 만들고 형상화하고자 합니다. 이를 위해 UX디자이너는 제품 사용의 Why, What, How를 고려해야 합니다.

20. 디자인 트렌드에 주목

현대적인 웹사이트 디자인은 어떤 모습일까요? 속임수 질문이 아닙니다. 현대적인 웹 사이트와 사용자 경험을 디자인하려면 사용자가 원하는 것이 무엇인지, 사용자가 원하는 것과 어떻게 상호 작용하는지 알아야 합니다. 휴대전화에서 마지막으로 앱을 다운로드하거나 웹사이트를 본 것이 2016년이라면 보완할 여지가 많습니다.

디자인에 현대적인 터치와 트렌드가 통합된 웹사이트 디자인 만들기 당신의 프로젝트를 돋보이게 해줄 것입니다. 트렌드가 무엇인지 어떻게 알 수 있습니까? 이와 같은 사이트를 계속 읽고 다른 디자이너가 하는 일에 주의를 기울이십시오. 자주 방문하는 웹사이트에 포함된 색상과 스타일 및 기능을 기록해 두십시오.

21. 색상 없이 만들기

색상 없이 모든 디자인을 시작하십시오. 한 훌륭한 디자이너가 디자인이 흑백으로 작동하면 색상이 완벽할 것이라고 말한 적이 있습니다.

항상 그런 것은 아니지만 좋은 출발점이 될 수 있습니다.

작성자 흑백으로 디자인을 만들면 요소가 대조되는 위치와 함께 작동하는 방식을 확인할 수 있습니다. 당신은 감정적 인 연관성을 제거했습니다.

John Morrison

John Morrison은 노련한 디자이너이자 디자인 업계에서 다년간의 경험을 쌓은 다작 작가입니다. 지식을 공유하고 다른 사람으로부터 배우는 것에 대한 열정으로 John은 업계 최고의 디자인 블로거 중 한 명으로 명성을 쌓았습니다. 그는 동료 디자이너에게 영감을 주고 교육하는 것을 목표로 최신 디자인 트렌드, 기술 및 도구에 대해 연구하고 실험하고 글을 쓰는 데 시간을 보냅니다. 디자인 세계에서 길을 잃지 않을 때 John은 하이킹, 독서, 가족과의 시간 보내기를 즐깁니다.