필터
-
Web Design for Beginners | FREE COURSE
If you're new to web design, this course on web design for beginners will teach you everything you need to know. ► Download creative digital assets with Envato Elements: https://elements.envato.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
“How do I pick typefaces, how do I pick colors, what the heck is whitespace, and how do I position and size elements correctly?” These are exactly the kinds of questions which we’ll address in this beginner web design tutorial.
In terms of fundamentals, you’ll learn about color, typography, spacing, sizing, imagery, and responsive web design. We’ll discuss the theory, best practices, and some tools you can use to make your job easier.
When it comes to common web design patterns, you’ll learn about the elements you can use to design a web page—things like headers, hero areas, buttons, image galleries, contact forms, and more.
For each of these patterns, we’ll look at the definition and some use cases, and then we’ll apply that knowledge to a demo project: a three-page portfolio website designed specifically for this course.
► Check out this link for the project brief and course assignments: https://bit.ly/37YMk4W
► Read the course notes (and more!) for Web Design for Beginners on Envato Tuts+: https://webdesign.tutsplus.com/articles/web-design-for-beginners-epic-free-course--cms-41118?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Link to wireframe portfolio website with Figma: https://www.figma.com/file/Ak0JQMv65digqiASGnoLI0/Portfolio-Website?node-id=0%3A1
What You'll Learn:
00:00:00 Welcome!
00:04:31 Course brief and assignment
00:05:48 UI design vs. UX design vs. web design
00:14:08 Learning to work with project briefs
00:19:59 Working with wireframes
00:28:08 Picking the right design tool
00:33:53 Color theory
00:51:36 Color harmonies, psychology and tools
01:03:11 Creating a color palette for our project
01:20:00 Let’s talk about typography
01:31:11 Creating the typography for our project
01:46:01 Spacing and sizing in web design
01:54:47 Using icons and images in web design
02:03:33 Definition and use cases for headers
02:11:39 Let’s design a header
02:28:16 Definition and use cases for hero areas
02:33:06 Let’s design a hero area
02:39:08 Definition and use cases for buttons
02:44:46 Let’s design some buttons
02:57:27 Definition and use cases for image galleries
03:01:38 Let’s design an image gallery
03:12:34 Definition and use cases for footers
03:17:55 Let’s design the footer
03:26:37 Definition and use cases for testimonials
03:31:48 Let’s design some testimonials
03:44:15 Definition and use cases for tabs
03:48:11 Let’s design some tabs
03:59:47 Definition and use cases for accordions
04:04:03 Let's design an accordion
04:13:19 Definition and use cases for contact forms
04:18:17 Let’s design a contact form
04:32:49 What is a responsive website?
04:36:55 Making layout changes for tablets and phones
04:56:44 Making a component responsive
05:09:52 A quick word about prototyping
05:16:11 Next steps and key takeaways
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
6
웹디자인기능사-실전편
웹디자인기능사 실기 레이아웃 짜기 입니다.
60점 이상이 목표인 자격증 시험을 위한 강의이며,
마이크가 강의용 마의크라 녹음 상태가 좋지 않은 점 양해 바랍니다.
강의자료가 필요하신 분은 yulssem_nim@naver.com 으로 메일주시면 보내드리겠습니다.
감사합니다. -
[디자인] 고객을 모으는 웹디자인, 랜딩페이지의 비밀 전격공개
웹디자인에서 랜딩페이지는 무엇이며, 랜딩페이지를 통해 사용자의 마음을 훔치는 방법은 무엇일까요?
-
-
1시간안에 쇼피파이 쇼핑몰 만들기 | 초보자 완벽가이드 제작 강의 (2021년)
쇼피파이 14일 무료로 시작하기: https://guidebean.com/shopify
쇼피파이를 통해 처음 사이트를 만드는 사람도 혼자서 쇼피파이 쇼핑몰 홈페이지를 만들 수 있을까요? 이 영상에서 쇼피파이를 처음 접하는 초보자 분들을 위해 이렇게 사이트를 제작 및 꾸미는 방법부터 쇼핑몰을 운영하기 위해 필요한 모든 개념들을 하나씩 하나씩 무료 강의를 통해 알려드리려고 합니다.
[영상 바로가기]
00:00 - 인트로
00:45 - 쇼피파이 쇼핑몰 14일 무료로 시작하기
02:15 - 쇼피파이 관리자 페이지 언어 변경하기 (한국어)
02:55 - 쇼피파이 기본 사이트 확인하기
03:20 - 관리자 페이지 살펴보기 (주문)
04:00 - 관리자 페이지 살펴보기 (제품)
04:50 - 관리자 페이지 살펴보기 (고객)
05:00 - 관리자 페이지 살펴보기 (분석)
05:35 - 관리자 페이지 살펴보기 (마케팅)
05:49 - 관리자 페이지 살펴보기 (할인)
06:10 - 관리자 페이지 살펴보기 (앱)
06:23 - 관리자 페이지 살펴보기 (온라인 스토어: 테마)
06:52 - 관리자 페이지 살펴보기 (온라인 스토어: 블로그 게시물)
07:07 - 관리자 페이지 살펴보기 (온라인 스토어: 페이지)
07:18 - 관리자 페이지 살펴보기 (온라인 스토어: 탐색)
07:45 - 관리자 페이지 살펴보기 (온라인 스토어: 도메인)
08:01 - 관리자 페이지 살펴보기 (온라인 스토어: 기본설정)
08:49 - 관리자 페이지 살펴보기 (설정)
09:15 - 컬렉션 추가하기
11:55 - 제품 추가하기
15:45 - 무료 새 테마를 라이브러리에 추가하기
16:36 - 테마 메인페이지 편집하기 (헤더: 로고, 메뉴 위치, 탑 바)
19:00 - 테마 메인페이지 편집하기 (슬라이드: 이미지, 버튼, 텍스트, 높이, 자동회전)
21:19 - 테마 메인페이지 편집하기 (컬렉션 리스트, 컬렉션 목록)
22:42 - 테마 메인페이지 편집하기 (새 섹션 추가하기: 특별상품)
24:02 - 테마 메인페이지 편집하기 (바닥글)
24:47 - 테마 설정하기 (레이아웃)
25:16 - 테마 설정하기 (색상)
26:28 - 테마 설정하기 (폰트, 입력체계: 본문, 제목, 버튼)
26:45 - 테마 설정하기 (Favicon)
27:07 - 테마 설정하기 (소셜미디어)
27:31 - 테마 설정하기 (Checkout)
28:27 - 편집한 새 테마를 현재 테마로 적용하기
29:05 - 메뉴 편집하기
30:34 - 블로그 게시물 작성하기
32:10 - 블로그 페이지를 메뉴에 추가하기
33:00 - 새 페이지 추가하기
33:53 - 추가한 새 페이지를 메뉴에 추가하기
34:52 - 쇼피파이 쇼핑몰 설정하기 (일반: 스토어 세부 정보, 주소, 표준 및 형식, 통화)
35:35 - 쇼피파이 쇼핑몰 설정하기 (지급: 결제 서비스 공급업체 설정)
38:06 - 쇼피파이 쇼핑몰 설정하기 (결제: 결제 과정에 대한 옵션)
40:20 - 쇼피파이 쇼핑몰 설정하기 (배송: 배송요금 관리 및 배송관련 모든 옵션)
43:26 - 쇼피파이 쇼핑몰 설정하기 (세금)
44:31 - 쇼피파이 쇼핑몰 설정하기 (스토어 언어)
46:00 - 쇼피파이 쇼핑몰 설정하기 (위치)
46:15 - 쇼피파이 쇼핑몰 설정하기 (알림: 고객에게 보내는 이메일 템플릿)
47:28 - 쇼피파이 쇼핑몰 설정하기 (파일)
47:42 - 쇼피파이 쇼핑몰 설정하기 (판매채널)
48:03 - 쇼피파이 쇼핑몰 설정하기 (청구)
48:27 - 쇼피파이 쇼핑몰 설정하기 (법적정보: 환불정책, 개인정보처리방침, 배송정책…)
50:27 - 쇼피파이 플랜 변경하기
52:07 - 사이트 비공개에서 공개 상태로 변경하기
52:40 - 새 도메인 주소 등록하고 변경하기
DISCLOSURE: 가이드빈은 구독자분들을 통해 운영되고 있습니다. 이에 따라서 이 곳에는 제휴링크가 포함되어있을 수 있으며 링크를 통해 구매시 가이드빈에 소정의 커미션이 지급될 수 있습니다. 이에 따른 추가 비용은 없으며 오히려 해당 상품 및 서비스에 대한 프로모션이 있을 때마다 추가 할인을 받을 수 있도록 제공하며 실제로 사용해본 도구만 추천하고 있음을 알려드립니다. -
웹디자인 무료아이콘 및 포토샵 무료 강의 모음 TOP10
저번 글에 이어 웹디자인 무료아이콘과 포토샵 무료 강의하는 곳을 알아보도록 하겠습니다. 저번 글에서는 무료 사진, 무료폰트의 라이선스와 사용범위에 대해 상세히 적어두었습니다. 참고하시면 좋을 것 같습니..
-
웹디자인 무료사진 및 무료폰트 다운로드 사이트 모음
웹디자인 작업을 하다 보면 무료사진이나 무료폰트를 다운로드하여서 사용해야 하는 일이 많습니다. 특히 프리랜서라면 더욱 그 필요성을 느끼게 됩니다. 무료 사진 및 무료폰트 사이트 소개와 함께 라이선스와 사..
-
웹디자인 실무자들이 참고하는 즐겨찾기 TOP20
웹디자인 디자이너 실무자들이 참고하는 즐겨찾기 사이트 TOP20입니다. 정보가 넘쳐나는 온라인에서 수많은 사이트를 일일이 기억해 생각해내는 것은 매우 어려운 일입니다. 여러 아이디어나 콘셉트, 기획을 할 때..
-
쇼피파이 초보자 튜토리얼 2022 | 19단계의 쉬운 방법으로 쇼핑몰 만들기
이번 단계별 쇼피파이 튜토리얼을 통해 프로페셔널한 온라인 쇼핑몰 만드는 법을 배울 수 있습니다
► 쇼피파이 (Shopify): https://makewebsites.co.kr/shopify
00:00:00 – 1) 인트로
00:01:10 – 2) 쇼피파이 가입하기 (혹시 앞으로의 튜토리얼 제작을 위해 저에게 도움이 되고 싶으시다면 꼭 다음 링크를 사용해주세요: 'please add your link')
00:05:04 – 3) 쇼피파이 기초
00:06:11 – 4) 테마 설치하기
00:07:22 – 5) 테마/디자인 편집하기
00:28:20 – 6) 쇼피파이 설정
00:28:25 – 6.1) 일반 설정
00:29:35 – 6.2) 결제 방법
00:31:48 – 6.3) 결제 화면
00:37:05 – 6.4) 배송
00:42:33 – 6.5) 세금
00:44:53 – 6.6) 장소
00:45:05 – 6.7) 알림 설정
00:47:24 – 6.8) 미디어
00:47:43 – 6.9) 세일즈 채널
00:48:27 – 6.10) 계정
00:49:15 – 6.11) 쇼핑 언어
00:50:51 – 6.12) 청구서
00:51:21 – 6.13) 약관 정보
00:54:33 – 7) 페이지 추가 + 내비게이션에 추가하기
00:59:52 – 8) 설정
01:04:40 – 9) 블로그 포스트
01:05:14 – 10) 도메인 추가하기
01:09:31 – 11) 상품 추가하기
01:18:55 – 12) 카테고리
01:27:02 – 13) 할인
01:32:06 – 14) 주문 테스트하기
01:37:55 – 15) 통계분석
01:38:40 – 16) 마무리
추가 정보:
이번 영상은 2020년 초보자를 위한 한국어 쇼피파이 튜토리얼입니다.
이 쇼피파이 튜토리얼에서 어떻게 효율적으로 쇼피파이 쇼핑몰을 만들고 상품을 판매할 수 있는지 보여드리겠습니다.
쇼피파이 스토어를 만들기 위한 기초 내용을 배울 수 있습니다.
먼저 14일 무료 시범 버전 가입을 합니다. 그 다음 스토어 디자인을 시작합니다. 이후 쇼피파이의 모든 설정에 대해 둘러보고, 온라인 스토어의 백엔드(backend) 역시 잘 작동하도록 할 것입니다.
이 작업을 끝낸 후, 첫 상품들을 만들어보고 온라인 쇼핑몰 판매 목록을 작성할 것입니다. 쇼피파이 스토어 만드는 법은 어렵지 않습니다. 이번 단계별 쇼피파이 튜토리얼에서 모든 것을 보여드리겠습니다.
저는 구매대행에 대해서는 깊이 다루지 않지만, 이 튜토리얼을 통해 구매대행 쇼피파이 스토어 또한 구축할 수 있습니다.
온라인 쇼핑몰을 만드는 것은 매우 유용한 기술입니다. 이커머스는 앞으로 더욱 커지기만 할 것입니다. 쇼피파이 스토어를 만들 줄 알게 됨으로써 제 커리어에 여러 번 도움을 받았고 제가 어떻게 만드는지 그 방법을 이 쇼피파이 튜토리얼에서 보여드리겠습니다.
만들어진 쇼피파이 스토어는 필요한 모든 기능(결제 방법, 배송, 세금 등)을 포함할 것입니다.
즐겁게 시청하세요! -
22
웹디자인 기능사
웹디자인 기능사 실기 준비를 위한 동영상입니다.
웹 디자인 기능사의 여러가지 유형을 익혀야 하며
기본적인 제이쿼리는 꼭 외워야 합격하는 시험입니다.
동영상만 보고 따라하면 누구나 딸 수 있도록 제작하였으며
일주일만 공부해도 딸 수 있다고 생각이 듭니다.
소스 다운로드
https://github.com/webstoryboy/webd -
2022년 웹디자인 트렌드 10가지 | Digital Marketing Curation
웹디자인은 방문자들의 비즈니스에 대한 첫 인상의 95%를 결정합니다. 훌륭한 디자인은 판매 실적을 높이는데 도움이 될 수 있습니다.
그렇기 때문에 마케팅 전략에 현대적인 웹디자인을 접목하는 것이 그 어느 때보다 중요한 것입니다.
아래 글에서는 2022년에 주목해야 할 10가지 웹디자인 트렌드를 소개합니다. -
13
오직 웹 디자이너를 위한 웹 코딩 강좌
디자이너를 위한 웹 코딩 입문 강좌로 가볍게 HTML, CSS에 대해서 배워보도록 합시다. 흥미를 가지는 것이 핵심이에요 :)
![[디자인] 웹디자이너에게 유용한 앱(APP)8](https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F240FDB4158B79FBA0B)
![[디자인] 고객을 모으는 웹디자인, 랜딩페이지의 비밀 전격공개](https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F25610F4D56DFC75709)
![[디자인] 모바일웹 디자인을 위한 필수 팁](https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F2372773F557FB99601)
![[디자인] Grid System](https://media.vlpt.us/images/leehyunho2001/post/fd543677-0a01-4813-870b-d5fa45001aa4/sdfsdf.png?w=768)
