Blog site design part1예제 (DESIGN 06)에서 이어서 학습해주세요.
Blog Site Design part3
- 패턴으로 가로줄 만들기
- 그룹 생성하기
- 레이어 이름 작성하기
반응형
Youtube 동영상
- DESIGN 07 [ Blog site design part 3 ] 웹디자인 패턴가로줄 만들기, 그룹 및 레이어 생성 및 이름 작성하기 2019.05.27
- DESIGN 06 [ Blog site design part 2 ] 웹디자인 준비하기, 자료수집하기, 폰트수집하기 2019.05.27
- DESIGN 05 [ Blog site design part 1 ] 웹디자인 준비하기, 자료수집하기, 폰트수집하기 2019.05.27
- DESIGN 04 [Figma 4/4 ] 피그마! - 구글 material design 소스 활용, css 코드 확인하기, image 저장하기 2019.05.27
- DESIGN 03 [Figma 3/4 ] 피그마! - 로그인 입력폼, 버튼, 메인화면 완성하기 2019.05.27
- DESIGN 02 [Figma 2/4 ] 핫! 디자인 프로그램 피그마! -펜툴, 쉐이프, 컴토넌트 2019.05.27
- DESIGN 01 [Figma 1/4 ] 인싸 디자인 프로그램!! figma(피그마)로 디자인과 프로토타이핑을 동시에 하자! 2019.05.27
- jQuery 43 [ Floating Form ] 제이쿼리, CSS Animation, 폼을 빠르게 입력하도록 도와주는 폼 디자인과 jquery 2019.05.27
- CSS3 - 65 [ 플렉스 애니메이션 ] flex css animation, 줄무늬 메뉴 구현하기 2019.05.21 2
- CSS3 - 64 [ CSS 라이브러리 #2 ] CSS animation 쉽게 구현하기, CSS 애니메이션 라이브러리 Hover CSS 2019.05.21
DESIGN 07 [ Blog site design part 3 ] 웹디자인 패턴가로줄 만들기, 그룹 및 레이어 생성 및 이름 작성하기
2019. 5. 27. 16:13
DESIGN 06 [ Blog site design part 2 ] 웹디자인 준비하기, 자료수집하기, 폰트수집하기
2019. 5. 27. 16:11
Blog site design part1예제 (DESIGN 06)에서 이어서 학습해주세요.
Blog Site Design part 2
- 웹디자인용으로 포토샵 설정하기
- 웹디자인 순서
- canvas 생성하기
- 가이드 작성하기
- 그리드 작성하기
- 폰트사이즈와 행높이의 황금비율
반응형
'Youtube 동영상 > web design' 카테고리의 다른 글
DESIGN 05 [ Blog site design part 1 ] 웹디자인 준비하기, 자료수집하기, 폰트수집하기
2019. 5. 27. 16:10
Sample Download: http://bitly.kr/GeEA7
Blog Site Design part1
- 웹디자인 준비하기
- 폰트 수집하기
반응형
'Youtube 동영상 > web design' 카테고리의 다른 글
기본예제 1/4 예제: https://goo.gl/icduFr
1/4 예제에서 이어서 진행해주세요.
Sample Download: https://goo.gl/icduFr
(please check from Desgin 01[figma 1/4] footage)
- 서브페이지 만들기
- google material design 활용하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기
- 페이지가 연결되는 프로토 타이핑 하기
- 디자인단계에서 css 코드 확인하기
- image 저장하기
반응형
'Youtube 동영상 > web design' 카테고리의 다른 글
| DESIGN 06 [ Blog site design part 2 ] 웹디자인 준비하기, 자료수집하기, 폰트수집하기 (0) | 2019.05.27 |
|---|---|
| DESIGN 05 [ Blog site design part 1 ] 웹디자인 준비하기, 자료수집하기, 폰트수집하기 (0) | 2019.05.27 |
| DESIGN 03 [Figma 3/4 ] 피그마! - 로그인 입력폼, 버튼, 메인화면 완성하기 (0) | 2019.05.27 |
| DESIGN 02 [Figma 2/4 ] 핫! 디자인 프로그램 피그마! -펜툴, 쉐이프, 컴토넌트 (0) | 2019.05.27 |
| DESIGN 01 [Figma 1/4 ] 인싸 디자인 프로그램!! figma(피그마)로 디자인과 프로토타이핑을 동시에 하자! (0) | 2019.05.27 |
DESIGN 03 [Figma 3/4 ] 피그마! - 로그인 입력폼, 버튼, 메인화면 완성하기
2019. 5. 27. 16:07
기본예제: https://goo.gl/icduFr
1/4 예제에서 이어서 진행해주세요.
Sample Download: https://goo.gl/icduFr
3/4
- 폰트어썸 아이콘
- 로그인 입력폼, 버튼
- 첫 메인화면 완성하기
- 히스토리 저장하기
4/4
- 서브페이지 만들기
- google material design 활용하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기
- 페이지가 연결되는 프로토 타이핑 하기
- 디자인단계에서 css 코드 확인하기
- image 저장하기
반응형
'Youtube 동영상 > web design' 카테고리의 다른 글
DESIGN 02 [Figma 2/4 ] 핫! 디자인 프로그램 피그마! -펜툴, 쉐이프, 컴토넌트
2019. 5. 27. 16:06
Sample Download: https://goo.gl/icduFr
(please check from Desgin 01[figma 1/4] footage)
- 펜툴 사용하기
- 컴포넌트 사용하기
- 모바일 사이트 디자인하기
- 헤더 완성하기
Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb
반응형
'Youtube 동영상 > web design' 카테고리의 다른 글
DESIGN 01 [Figma 1/4 ] 인싸 디자인 프로그램!! figma(피그마)로 디자인과 프로토타이핑을 동시에 하자!
2019. 5. 27. 16:04
Sample Download: https://goo.gl/icduFr
1/4
- 피그마로 디자인하기
- 피그마로 요소들 그리기
- 그리드 사용하기
- 텍스트 사용하기
2/4
- 펜툴 사용하기
- 컴포넌트 사용하기
- 모바일 사이트 디자인하기
- 헤더 완성하기
3/4
- 폰트어썸 아이콘
- 로그인 입력폼, 버튼
- 첫 메인화면 완성하기
- 반응형에 맞춰 유연하게 디자인하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기
4/4
- 서브페이지 만들기
- google material design 활용하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기
- 페이지가 연결되는 프로토 타이핑 하기
- 디자인단계에서 css 코드 확인하기
- image 저장하기
반응형
'Youtube 동영상 > web design' 카테고리의 다른 글
| DESIGN 06 [ Blog site design part 2 ] 웹디자인 준비하기, 자료수집하기, 폰트수집하기 (0) | 2019.05.27 |
|---|---|
| DESIGN 05 [ Blog site design part 1 ] 웹디자인 준비하기, 자료수집하기, 폰트수집하기 (0) | 2019.05.27 |
| DESIGN 04 [Figma 4/4 ] 피그마! - 구글 material design 소스 활용, css 코드 확인하기, image 저장하기 (0) | 2019.05.27 |
| DESIGN 03 [Figma 3/4 ] 피그마! - 로그인 입력폼, 버튼, 메인화면 완성하기 (0) | 2019.05.27 |
| DESIGN 02 [Figma 2/4 ] 핫! 디자인 프로그램 피그마! -펜툴, 쉐이프, 컴토넌트 (0) | 2019.05.27 |
Sample Link : https://codepen.io/alikerock/pen/PmpMGO
폼입력을 빠르게 도와주기 infield Input Form
- Label Animation
- input Animation
Code Editor: Microsoft visual studio code
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb
#form, #label animation, #jquery, #웹디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사
반응형
'Youtube 동영상 > javascript & jQuery' 카테고리의 다른 글
CSS3 - 65 [ 플렉스 애니메이션 ] flex css animation, 줄무늬 메뉴 구현하기
2019. 5. 21. 16:06
예제 링크: http://bitly.kr/aF3b4T
- display flex
- 플렉스 활용 애니메이션
에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#flex, #css, #animation, #animate
반응형
'Youtube 동영상 > css3' 카테고리의 다른 글
CSS3 - 64 [ CSS 라이브러리 #2 ] CSS animation 쉽게 구현하기, CSS 애니메이션 라이브러리 Hover CSS
2019. 5. 21. 16:05
예제 링크: http://bitly.kr/BgxYJF
- css animation library
- css 애니메이션 라이브러리
에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#css, #animation, #animate
반응형