30 일 동안 웹 디자인을 배우는 30 가지 팁
웹 디자인의 기초를 배우는 것이 여전히“언젠가”목록에 있습니까? 왜 아직 시작하지 않았습니까? 이번 달에 웹 디자인을 배우기 시작하는 데 도움이되는 30 가지 팁과 리소스를 모았습니다.
새로운 것을 배우거나 웹 사이트에 침입하려는 그래픽 디자이너, 인쇄 디자이너 및 광고 소재는 미루어 야합니다. 당신이 그 첫 걸음을 밟지 않는 매일 매일 당신을 다른 사람들보다 더 떠나게합니다!
다음 단계에 따라 30 일 만에 첫 웹 사이트, 업계 모범 사례 등을 만드는 방법을 배우십시오!
1. 웹 사이트 시작
웹 디자인 학습을 시작하는 가장 좋은 방법은 웹 디자인을 시작하는 것입니다. 이것이 바로 Design Hackers의 저자 인 David Kadavy의 조언입니다.
블로그를 시작하는 것이 좋습니다. 나는 웹 디자인 놀이터를 갖기 위해 블로그를 시작했고 7 년 후 그 주제에 대해 가장 많이 팔린 책을 시작했습니다. 블로그와 같은 개인 프로젝트를 수행하면 새로운 일을 시도 할 수있는 장소가 생겨 엉망이 될 때 상사가 당신을 해고하지 않습니다.
방대한 웹 사이트 나 미친 디자인으로 시작할 필요는 없습니다. 작은 시작. 웹 사이트를 가지고 놀아 무엇이 효과가 있는지 알아보십시오. 또한 코드를 검사하여 웹 사이트 작동에 익숙해지기 시작하십시오.
빨리 시작하고 싶습니까? Wix와 같은 웹 사이트 제작자는 웹 사이트에 들어가는 개념과 빌딩 블록을 배우기 시작하면서 세련된 웹 사이트 디자인으로 먼저 시작할 수 있습니다.
2. 할 수있는 모든 것을 읽으십시오
읽기 시작하십시오. 이 블로그에 있기 때문에 디자인 세계에서 일어나는 일을 추적하는 데 익숙 할 것입니다. 계속 읽으세요.
웹 사이트 디자인, 트렌드, 기술 및 모범 사례에 대해 할 수있는 모든 것을 읽으십시오. 소셜 미디어에서 존경하는 디자이너를 팔로우하십시오.
귀하의 웹 사이트 디자인 읽기를 위해 넓은 그물을 캐스트하십시오. 기본 사항을 읽고 코드를 배우고 디자인 이론을 읽고 튜토리얼과 최신 기사를 읽으십시오.
3. 효과적인 의사 소통자가 되십시오
가장 명료 한 사람이 아닌 경우 해당 기술을 연마하십시오. 웹 사이트 디자인의 큰 부분은 커뮤니케이션입니다.
웹 사이트 디자이너는 디자인이 해결해야하는 문제를 파악하기 위해 고객과 정기적으로 통신해야합니다. 그들은 그 솔루션을 전달하고 구현해야합니다.
4. Tuts + & Envato Elements 구독
우수한 Tuts + 학습 리소스를 이용할 수있는 Envato Elements 구독을 고려하십시오.
Tuts +는 기본 기술부터 최신 고급 접근 방식 및 개발에 이르기까지 그래픽 및 웹 디자인에 대한 정규 과정을 게시합니다. 전문 강사가 가르치는 완전히 스스로 진행됩니다. 또한 웹 디자인 작업에 연결할 그래픽, 템플릿 등을 찾는 데 유용한 리소스 인 Envato Elements에 액세스 할 수 있습니다.
5. HTML로 생각
HTML 또는 하이퍼 텍스트 마크 업 언어는 웹 사이트 디자인의 초석입니다. HTML은 웹 사이트의 구조를 만드는 데 도움이되는 뼈대이며 일단 언어를 읽을 수있게되면 웹 사이트 디자인의 세계가 훨씬 더 합리적입니다.
W3Schools에는 수백 가지 HTML 예제가 포함 된 훌륭한 HTML 초보자 자습서가 있습니다.이 예제를 통해 화면에서 어떤 일이 발생하고 어떻게 작동하는지 알 수 있습니다. (생각보다 직관적 인 것으로 보일 수 있습니다.)
6. Codeacademy에서 코드를 가지고 놀아 라
HTML은 좋은 시작이지만 Codeacademy에서 거의 모든 프로그래밍 언어를 배울 수 있습니다. 무료 도구 세트는 대화식 활동 및 게임을 사용하여 코딩하는 방법을 알려줍니다.
필요할 때 언제 어디서나 Codeacademy 과정을 수강하고 시작할 수 있습니다. 웹 개발, 프로그래밍, 데이터 과학 또는 집중할 언어 – HTML 및 CSS (시작하기 좋은 곳), Python, Java, SQL, Ruby 등 배울 주제를 선택하십시오.
7. CSS 이해를 배우십시오
CSS 또는 CSS (Cascading Style Sheet)는 HTML 또는 XML 및 SVG로 작성된 문서의 표현을 정의합니다.
Mozilla에서 정의한대로
CSS는 화면, 종이, 연설 또는 기타 미디어에서 요소를 렌더링하는 방법을 설명합니다.
또한 Mozilla에는 선택기 및 속성, CSS 규칙 작성, HTML에 CSS 적용, CSS에서 길이, 색상 및 기타 단위를 지정하는 방법을 포함하여 CSS 작동 방식에 대한 견고한 소개와 함께 시작하기위한 훌륭한 CSS 리소스 모음이 있습니다. 상속, 박스 모델 기본 및 CSS 디버깅. 그런 다음 모듈은 스타일링 텍스트 및 상자를 설명하기 위해 진행합니다.
8. 디자인 기술을 웹에 적용
이미 크리에이티브 또는 그래픽 디자인 분야에서 일하고 있다면 웹 사이트 디자인에도 적용 할 수 있다는 것을 이미 알고 있습니다. 시각적으로 매력적인 무언가를 만드는 원리는 매체에 따라 변하지 않으며 모든 디자인 이론은 디지털 공간에서도 유용 할 것입니다.
학습 코드와 같은 요소가 자연스럽게 느껴지지는 않지만 디자인 배경을 갖는 것은 큰 보너스입니다. 아름답게 코딩 된 웹 사이트가 웹 사이트와 상호 작용하기를 원하지 않는다면 어떤 이점이 있습니까?
9. 당신이 사랑하는 웹 사이트에주의를 기울이십시오
좋아하는 웹 사이트를 기록해 두십시오. 그들에게 어떻습니까? (그리고 이러한 요소를 복제하는 방법을 배울 수있는 방법은 무엇입니까?)
- 타이포그래피
- 항해
- 이미지와 공간 사용
- 양식 디자인
- 애니메이션 및 스크롤 효과
- 색깔
10. 와이어 프레임 그리기
Wireframing은 웹 디자이너의 브레인 스토밍입니다.
가장 순수한 형태의 와이어 프레임은 웹 사이트의 모습을 스케치 한 것입니다. 미적 요소의 개요가 아니라 웹 사이트의 청사진입니다. 와이어 프레임을 그리는 것은 실제로이 디자인의 모양이 아니라 내부의 정보 구조에 관한 것입니다.
와이어 프레임을 만드는 방법을 잘 모르십니까? Digital Telepathy에는 학습에 도움이되는 모범 사례 가이드가 있습니다.
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의 웹 디자인 문제에 대한 답변을 찾으십시오. 거의 모든 문제와 해결책을 안내 할 수있는 많은 자습서와 비디오가 있습니다.
중요한 것은 정확히 알아야 할 것을 검색하고 평판이 좋은 답변을 찾는 것입니다. 튜토리얼과 비디오에 관한 또 다른 팁은 다음과 같습니다. 최신 컨텐츠가 더 좋고 더 완벽하고 관련성 높은 답변을 제공 할 것입니다. (이 것들 중 일부는 빠르게 변하고 있음을 기억하십시오.)
19. 사용자 경험에주의를 기울이십시오
사용자 경험 디자인과 같은 웹 사이트를 만들거나 깨뜨릴 수있는 것은 없습니다. 계획하고 이해해야합니다.
Interaction Design Foundation이 UX 디자인을 설명하는 방법은 다음과 같습니다.
UX (User Experience) 디자인은 의미 있고 개인적으로 관련된 경험을 제공하는 제품을 만드는 프로세스입니다. 여기에는 제품의 유용성과 소비자가 제품을 사용함으로써 얻을 수있는 즐거움에 대한 신중한 디자인이 포함됩니다. 또한 브랜딩, 디자인, 유용성 및 기능 측면을 포함하여 제품을 획득하고 통합하는 전체 프로세스와 관련이 있습니다.
UX 디자이너 또는 경험 형성 프로세스를 알고있는 디자이너는 의도적으로 프로세스에 영향을 미치는 요소를 만들고 형성하려고합니다. 이를 위해 UX 디자이너는 제품 사용 이유, 대상 및 방법을 고려합니다.
20. 디자인 트렌드에 주목
현대적인 웹 사이트 디자인은 어떻게 생겼습니까? 속임수가 아닙니다. 최신 웹 사이트와 사용자 경험을 디자인하려면 사용자가 원하는 것과 사용자와 상호 작용하는 방식을 알아야합니다. 마지막으로 앱을 다운로드했거나 휴대 전화에서 웹 사이트를 본 경우 2016 년에 많은 근거가 있습니다.
현대적인 터치와 트렌드가 디자인에 통합 된 웹 사이트 디자인을 만들면 프로젝트가 돋보이게됩니다. 트렌드가 무엇인지 어떻게 알 수 있습니까? 이와 같은 사이트를 계속 읽고 다른 디자이너의 작업에주의를 기울이십시오. 자주 방문하는 웹 사이트에 포함 된 색상과 스타일 및 기능을 기록해 두십시오.
21. 색상없이 생성
색상없이 모든 디자인을 시작하십시오. 위대한 디자이너는 디자인이 흑백으로 작동하면 색상이 완벽 할 것이라고 말했습니다.
항상 그런 것은 아니지만 좋은 출발점입니다.
흑백으로 디자인을 만들어서 요소가 대조되는 위치와 요소가 함께 어떻게 작동하는지 확인할 수 있습니다. 당신은 그것으로 인해 발생하는 색이나 눈의 움직임과 관련된 감정적 인 관계를 제거했습니다. 이 가장 단순한 형태의 디자인은 완성하기 전에 어떤 것이 개념으로 작용하는지에 대한 아이디어를 제공합니다.
22. Google 글꼴을 사랑하는 법을 배우십시오
Google Fonts는 당신의 친구입니다.
Google에 대한 느낌에 관계없이 웹 사이트 디자인에서 작동하는 것으로 알려진 서체를 탐색, 정렬 및 선택하는 기능이 중요합니다. 라이센스에 대해 생각하거나 서체가 특정 브라우저와 호환되는지 여부를 생각할 필요가 없습니다.
한계는 Google Fonts 라이브러리에있는 것만 사용할 수 있다는 것입니다. 그러나 시도하면 거의 모든 프로젝트에 적합한 것을 찾을 수 있습니다. 장기적으로 많은 시간을 절약 할 수 있습니다.
23. UI 키트 분리
사용자 인터페이스 또는 아이콘 키트를 다운로드하여 선택하십시오.
웹 사이트의 코드를 검사 할 수있는 것처럼 웹을위한 디자인 요소가 어떻게 구성되는지 살펴보십시오. 크기와 격자를 기록하고 색상 혼합과 Photoshop 또는 Illustrator 내에서 파일이 구성되는 방식을 살펴보십시오.
고해상도 디스플레이를위한 다양한 형식의 요소가 포함 된 키트를 다운로드하십시오. 많은 JPEG 파일을 다운로드한다고해서 모든 기능이 제대로 작동하지는 않습니다.
그런 다음 하나 또는 두 개의 요소를 작성하거나 사용자 정의하십시오.
24. 타이포 그래퍼가 되십시오
현대의 웹 사이트 디자인은 타이포그래피에 중점을두고 있습니다. 거대한 단어가 포함 된 히어로 헤더부터 사용자를 디자인으로 유도하는 텍스트 레이어에 이르기까지 유형 요소를 결합하고 매력적인 텍스트 블록을 구성하는 방법의 원리를 이해하는 것이 중요합니다.
Ellen Lupton의 Thinking with Type으로 시작하십시오. (동일한 이름의 책이 있습니다.) Lupton은 타이포그래피의 권위자이며 그녀의 정보를 통해 타이포 그래퍼처럼 생각하게됩니다.
25. JavaScript로 이동
웹 디자인에 익숙해지기 시작하면 JavaScript를 배우도록 다시 도전하십시오. HTML과 CSS 이후에는 웹에서 가장 중요한 언어입니다.
JavaScript는 디자이너가 웹 페이지에서 복잡한 사물과 상호 작용을 구현할 수있는 도구입니다. 슬라이더 슬라이드 또는 시차 애니메이션이 움직이는 이유입니다.
Learn JS에는 시작하는 데 도움이되는 대화식 자습서가 있습니다.
26. 포트폴리오 업데이트
웹 디자인을 시작하면 웹 디자인 프로젝트로 포트폴리오를 업데이트하십시오. 이 간단한 행동은 웹 디자인이 레퍼토리의 일부라는 것을 자신과 다른 사람들에게 보여줄 것입니다.
업데이트 된 포트폴리오는 잠재 고객이 "스타일"이 어떻게 보이는지 확인할 수 있도록 도와줍니다. 레이아웃, 색상, 타이포그래피 및 수행 할 수있는 작업을 보여주는 다양한 기술을 보여주십시오.
27. 자신에게 도전
거의 모든 웹 사이트 문제를 해결하는 데 도움이되는 많은 단축키와 코드 스 니펫으로 게으르지 마십시오. 새로운 기술, 새로운 기술을 배우고 웹 디자인 게임을 지속적으로 개선하기 위해 끊임없이 도전해야합니다.
이 분야의 한 가지 점은 끊임없이 변화하고 있다는 것입니다. 항상 배우거나 시도해야 할 새로운 것이 있습니다.
28. 경험을 극대화하십시오
밖으로 나가서 디자인하십시오. 웹 디자이너가 되려면 웹 사이트 디자인을 시작해야합니다.
소규모로 시작하지만 다른 사람들과 프로젝트를 시작하십시오. 직장에서 팀과 함께 프로젝트에 참여하도록 요청하십시오. 친구를위한 작은 웹 사이트를 다루십시오. 웹 사이트를 구축 한 경험이 많을수록 더 빠르고 빠릅니다.
당신은 무엇을 기다리고 있습니까? 그말 질질 끌어.
29. 피드백 요청
아무리 작아도 웹 사이트 디자인 프로젝트에 대한 피드백을 수집하려면 네트워크를 사용하십시오. 마음에 들지 않더라도이 피드백을 듣고 배울 수있는 것을보십시오.
시각적 선호도 외에 피드백을 제공 한 사람이 웹 사이트 기능을 개선하기위한 제안을 제공 했습니까? 디자인의 목표를 쉽게 이해할 수 있을까요? 그들은 메시지와 연결 되었습니까?
30. 새로운 것을 계속 배우십시오
훌륭한 웹 사이트 디자이너가 되려면 계속 새로운 것을 배우고 시도하고 배우면됩니다. 네트워크를 가리키고 현장의 다른 사람들과 의사 소통하여 필요할 때 필요한 기술 및 시각적 변경 사항을 파악할 수 있습니다.
웹 사이트 디자인을 배우고 싶다면 이미 정기적으로 수행하는 것일 수 있습니다. 그러나 이것은 진화하는 분야이며 거의 매일 바뀌고 있습니다. 그 일을하는 사람에게 물어보십시오.
