Sample Download: http://bitly.kr/GeEA7
Blog Site Design part1
- 웹디자인 준비하기
- 폰트 수집하기
반응형
분류 전체보기
- 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
- CSS3 - 63 [ CSS 라이브러리 #1 ] CSS animation 쉽게 구현하기, CSS 애니메이션 라이브러리 animate css 2019.05.21
- CSS3 - 62 [ 카드 뒤집기 ] Card rotate - 마우스를 올리면 뒤집히는 카드 구현하기, transform 2019.05.21
DESIGN 05 [ Blog site design part 1 ] 웹디자인 준비하기, 자료수집하기, 폰트수집하기
2019. 5. 27. 16:10
기본예제 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
반응형
'Youtube 동영상 > css3' 카테고리의 다른 글
예제 링크: http://bitly.kr/Gn49zF
- css animation library
- css 애니메이션 라이브러리
에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#css, #animation, #animate
반응형
'Youtube 동영상 > css3' 카테고리의 다른 글
CSS3 - 62 [ 카드 뒤집기 ] Card rotate - 마우스를 올리면 뒤집히는 카드 구현하기, transform
2019. 5. 21. 16:03
예제 다운로드: http://bitly.kr/5WSW6l
- transform rotate
- transform-style
에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#css, #transform, #transform-style
반응형