안녕하세요. rocks'ezweb의 김동주 강사입니다.

 

피그마활용 웹디자인 & 웹퍼블리싱 강의를 그린컴퓨터아트학원(종로점)에서 특강형식으로 진행합니다.

강의는 오프라인으로 학원에 등원하거나 zoom을 통한 온라인 수강도 가능합니다.

 

하루 4시간, 총 약13일간 피그마를 활용한 웹디자인 기초와, 완성된 피그마 파일을 참조로 HTML, CSS, jQuery등을 활용하여 웹페이지를 구현, 반응형 구현의 강의를 진행합니다. 또한 모바일 디자인을 참조하여 웹과는 다른 모바일의 환경에 최적화된 쇼핑몰을 구현합니다.

 

약 4일간의 디자인 파트는 디자인 초보자도 가능하지만, 6일간 코딩 파트의 강의내용은 html, css, script를 한번이라도 학습한 분을 대상으로 하기 때문에 기초가 부족한 분은 수업이 어려울 수 있습니다.

 

기초는 있지만 종합적으로 적용이 어려운 분,반응형이 힘든 분,모바일 전용 쇼핑몰 구현이 궁금한 분

 

딱 13일간 빡세게(?) 가르쳐 드립니다. 한번 도전해보세요!

 

1. 강의 일정

개강일: 2021년 12월 14일 ~ 1월 21일 (화목금/화목 총 13일)

강의장: 그린컴퓨터아트학원 종로지점 - 501호

휴강일: 공휴일 휴무

교육시간: 
휴강일 : 12/31(금), 1/7(금),1/14 (금),

**수업나오는요일**
    12월: 14, 16. 17(금), 21, 23, 28, 30
    1월: 4, 6, 11, 13, 18, 20 (총 13회)
    12월: 19:00~22:00
    1월: 19:00~22:10 (총 40시간)

수강료: 300,000원

문의: 02-722-2111

모집인원: 20명~100명

( ⚠ 오프라인 수강인원은 코로나 방역지침으로 한 강의실에 최대 10명입니다. 상담시 확인해주세요. )

2. 강의 내용(13회에 맞춰 진행됩니다.)

1 일차 디자이너의 피그마 활용 피그마 기본
- Adobe XD, sketch, Figma 비교
- 설치, UI 메뉴,  프레임
- 쉐이프, 클리핑 마스크, 펜툴, 폰트위계
- 컴포넌트, 프로토 타이핑
2 일차 - UI 디자인 원칙
- 그리드

피그마 웹디자인 실무
- 버튼, 배너
3 일차 피그마 웹디자인 실무
- 배너, 서비스, 후기
- 푸터, 회사소개페이지
- 서브페이지, 아코디언
- 서브페이지, 회원가입, 로그인
4 일차 개발자의 피그마 활용 피그마 웹디자인 실무
- 서브 페이지

피그마 디자인 to HTML
- 인덱스 페이지
- 공통 HTML, CSS 작성

- INDEX페이지 CSS
5 일차 피그마 디자인 to HTML
- ABOUT 페이지
- 로그인
- 회원가입
- 반응형
6 모바일 쇼핑몰 구현하기
- index 페이지 HTML, CSS, SCRIPT
7 모바일 쇼핑몰 구현하기
- 상품목록페이지 HTML, CSS, SCRIPT
- 회원가입 HTML, CSS
8 모바일 쇼핑몰 구현하기
- 회원가입 HTML, CSS
- INDEX ASIDE 애니메이션 HTML, CSS, SCRIPT
9 모바일 쇼핑몰 구현하기
- 상품목록 HTML, CSS, SCRIPT
10 모바일 쇼핑몰 구현하기
- 상품 상세 HTML, CSS, SCRIPT
- 장바구니 HTML, CSS, SCRIPT

(상기 일정은 학습 여건에 따라 변경될 수 있습니다.)

 

3. 대상

- 포토샵 또는 일러스트로 웹디자인을 한 경험이 있는 분 또는 없는분도 가능

  (포토샵, 일러스트레이터를 몰라도 피그마는 가능합니다.)

 

- HTML5 태그를 학습한 분

h1~h5, ul, p, a, input등 기본태그를 사용할 수 있다.

header, footer, aside등 HTML5 태그를 이해할 수 있다.

(기초 수업은 아닙니다. 태그를 하나하나 설명할 시간을 없을 수 있습니다. )

 

- CSS 기초를 학습한 분

  float, position, flex, 반응형 등을 학습한 분

(완벽하게 이해하고 있지 못해도 써본 경험이 있으면 됩니다. )

 

- Javascript, jQuery를 학습 한 분

변수, 함수, 배열, 이벤트을 이해할 수 있다.

(기초수업은 아닙니다. 한번도 해본적이 없다면 이해하기 힘들수도 있습니다.)

 

- jQuery 라이브러리를 사용해본 경험이 있는 분

bxslider, slick, swiper, jQueryUI을 적용할 수 있다.

(기초수업은 아닙니다. 한번도 해본적이 없다면 이해하기 힘들수도 있습니다.)

 

- 디자인에서 코딩까지 전체 프로세스를 경험해보고 싶은 분

 

4. 수업내용 미리보기

피그마 디자인 & 디자인 참고 웹페이지 구현하기

 

디자인 참고 웹페이지 구현하기

 

5. 문의

- 02-722-2111

- ezwebpub@gmail.com

- 상담 신청하기 https://forms.gle/uZaBACQWb3U6f3NEA

반응형

 

피그에서 폰트 어썸 아이콘이 나타나지 않을 때느 작업중인 컴퓨터에 폰트어썸 폰트가 제대로 설치되어 있는지 확인합니다. 설치가 되어 있지 않다면 아래와 같이 폰트어썸사이트에서 다운로드 합니다.

 

폰트어썸 다운로드 페이지에서 컴퓨터 시스템에 맞은 파일을 다운로드합니다. 참고로는 Desktop에서 Free for Desktop 버튼을 클릭하여 소스를 다운로드했습니다. 

 

https://fontawesome.com/download

 

font 설치

다운로드한 압축파일을 해재하고 ofts 폴더내의 3개의 폰트를 모두 선택후 마우스 우클릭/설치를 클릭하여 설치합니다.

 

다시 피그마에 프로그램에서 폰트가 제대로 나타나는지 확인합니다.

일부 폰트의 경우는 폰트어썸 이전 버전(v4)용 폰트를 설치해야 나타나는 경우도 있습니다. 

v4의 경우는 아래 주소에서 소스를 다운로드 하실 수 있습니다.

https://fontawesome.com/v4.7/get-started/

 

Get Started with Font Awesome

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

 

 

반응형

https://youtu.be/KaQiPNufl-Y

- unsplash

- content reel

- image palette

- super tidy

 

[피그마 설치 ] https://youtu.be/_myVwi0vq5s https://www.figma.com/

#webdesign #figma #plugin

 

완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/

반응형

https://youtu.be/JzmCivgpa28

이전 예제에서 이어서 진행하고 있습니다.
Sample Download: http://bit.ly/2KaoSDK

#figma #피그마 #프로토타이핑

Blog : http://alikerock.tistory.com/
Twitter : eztoweb

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

반응형

https://youtu.be/F-VpiQq0gDw

이전예제에서 이어서 진행하고 있습니다.
Sample Download: http://bit.ly/2KaoSDK


#figma #피그마 #웹디자인

Blog : http://alikerock.tistory.com/
Twitter : eztoweb

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

반응형

https://youtu.be/Cc7s-MfySeA

이전예제에서 이어서 진행하고 있습니다.
Sample Download: http://bit.ly/2KaoSDK

피그마 디자인하기 - 
- 메인 상품 리스트
- Clipping Mask

#figma #피그마 #웹디자인

Blog : http://alikerock.tistory.com/
Twitter : eztoweb

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

반응형

https://youtu.be/4gP2MhnW_YE

Sample Download: http://bit.ly/2KaoSDK

피그마 디자인하기 - 
- Look booK header
- Linear Gradient
- Clipping Mask


Blog : http://alikerock.tistory.com/
Twitter : eztoweb

구독하기(subscribe now) : https://bit.ly/30wbC1y

오프라인 수업 문의: ezwebpub@gmail.com

반응형

수료일: 2019.04.03 
과정시간: 1000시간  

1차 과제명 : CJES RENEWAL
과제 주소: http://sumini1st.dothome.co.kr
과제 특징: 주요 페이지 구현



2차 과제명 : 신세계 리뉴얼
과제 주소: http://sumini2st.dothome.co.kr/
과제 특징: 피그마 디자인 > 코딩, 주요 페이지 구현, 반응형, 웹표준 검사, 스크립트 작성

 



3차 과제명 : SLOW PHARMACY
과제 주소: http://sumini3st.dothome.co.kr/
과제 특징: 피그마 디자인 > 코딩, 반응형

 

반응형

https://youtu.be/eGkJAxKmEDE

기본예제 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 저장하기

반응형

https://youtu.be/63OpBisj6DY

기본예제: https://goo.gl/icduFr
1/4 예제에서 이어서 진행해주세요.

Sample Download: https://goo.gl/icduFr


3/4
- 폰트어썸 아이콘
- 로그인 입력폼, 버튼 
- 첫 메인화면 완성하기
- 히스토리 저장하기

4/4
- 서브페이지 만들기
- google material design 활용하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기
- 페이지가 연결되는 프로토 타이핑 하기
- 디자인단계에서 css 코드 확인하기
- image 저장하기

반응형

+ Recent posts