황금비율 웹 디자인

230,000

필독 공지사항

본 페이지는 프로모션 페이지로 결제는 기존 리메인 사이트에서 진행해 주세요.

필수 준비물

  • 개인 노트북 (windows, mac 모두 가능)
  • 필기도구

콘센트와 와이파이는 완비되어 있어요 :D

현장 스케치

클래스 분위기를 느껴보세요 :D

클래스 소개

모바일 웹부터 데스크탑 웹까지, 생각보다 방대한 지식이 필요한 웹 디자인. 어디서부터 어떻게 만들어야할지 고민인 분들을 위해 웹에 대한 지식을 스텝별로 이해할 수 있도록 커리큘럼을 구성 하였습니다.

짧고 굵게 끝내는
웹 디자인 실무 이론, 딱 12시간

웹 디자인 제작을 위한 업계표준 실무 방법론부터 협업을 위한 환경세팅까지,
심도있게 배워보는 웹 디자인 클래스 입니다.

06개설기간

48기수현황

960배출인원

짧다고 허술하지 않습니다.
6년동안 노하우가 축척된 심도있는
웹 디자인 클래스 입니다.

웹 디자이너의 필수덕목, 웹 디자인과 퍼블리싱의 관계

웹 디자인의 결과는 퍼블리싱을 통해 출력 됩니다. 퍼블리싱의 특수성을 이해한다면 조금 더 올바른 UI를 제작할 수 있습니다.본 클래스는 웹 디자인 제작 기준을 퍼블리싱 조건에 맞게 설명 드리고 있습니다.

혹시 나의 이야기 아닌가요?

웹 디자인 처음인데 괜찮을까요?

웹을 처음 접하는 분들도 이해할 수 있도록 실무 프로세스 과정,
실무 방법론을 쉽게 설명해 어려움 없이 따라올 수 있도록 구성되어 있습니다.

사수가 없는 경력자인데 이 클래스 괜찮을까요?

수업을 듣는 대부분의 경력자 분들이 사수가 없는 고민으로 클래스를 신청 합니다.
본 수업은 사수가 없는 분들에게 강력 추천 합니다.

이런 고민, 한번이라도 했다면
본 과정을 추천 합니다.

업무환경, 협업에 대한 고민

  • 사수 없이 혼자 알아서 하기가 힘들어요...
  • 너무 감으로만 작업해요. 체계적인 이론이 필요해요.
  • 프론트 개발자와 소통, 어떻게 해야하나요?
  • 운영관리 디자인만 하다보니 실무감이 부족해요...

기본기에 대한 고민

  • 모바일 디자인 사이즈 몇으로 해야하지?
  • 모바일에서 이미지가 왜 깨지지?
  • 데스크탑 디자인 사이즈는 몇으로 해야할까?
  • 웹 폰트크기, 자간, 행간 어떻게 써야할까?

스킬에 대한 고민

  • 그리드시스템 어떻게 개발하지?
  • 반응형 개념 어떻게 이해하고 제작해야할까?
  • 스타일가이드... 무슨 개념이고 어떻게 만들까?

실무에 모든 초점을 맞췄습니다.
수업 핵심 카테고리

  • AREA #01 모바일 웹 디자인과 데스크탑 웹 디자인
  • AREA #02 반응형 웹 디자인 제작 방법
  • AREA #03 웹 스타일가이드 제작 방법그리드, 타이포, 컬러, 레이아웃 등
  • AREA #04 웹 디자인과 퍼블리싱의 상관관계

과정을 수료하면이런 결과를 가지고 갈 수 있어요.

프로젝트 스펙에 맞는 웹 방법론 구축

웹 접근성부터 클라이언트의 요구 사항까지, 웹 프로젝트 스펙사항을 스스로 구축할 수 있을만큼 지식을 전달 합니다.

협업을 위한 웹 스타일 가이드를 제작

점점 복잡해지는 프로젝트, 동료 디자이너뿐만 아니라 퍼블리셔까지 협업을 위한 스타일 가이드 이론을 섭렵할 수 있습니다.

웹 디자인과 퍼블리싱의 이해

웹 UI는 결국 퍼블리싱을 통해 출력 됩니다. 퍼블리싱의 특수성을 이해하고 올바른 UI를 제작할 수 있는 방법론을 전달해 드립니다.

강의장에 앉아보기

커리큘럼

1강 WEEK.01

1-1. 웹 디자인을 위한 데이터값 세팅

  • 웹 업무 프로세스 알아보기
  • 해상도와 웹 사이트 너비 값의 관계
  • 구글 애널리틱스로 해상도 데이터 값 도출하기

1-2. 디자이너를 위한 그리드 시스템

  • 최소 해상도 선정과 웹 사이트 너비 값 세팅하기
  • 그리드 시스템 개념과 제작 요소 알아보기
    *column, number of columns, gatter
  • 그리드와 컬럼 시스템의 관계 이해하기

2강 WEEK.02

2-1. 개발자와 그리드시스템으로 소통하기

  • 그리드 시스템 제작해 보기
  • 그리드 시스템을 백분율로 계산하기
  • 프론트 개발자와 그리드로 소통하는 방법

2-2. 모바일 웹 디자인을 위한 이론

  • 고밀도 해상도의 이해
  • 논리픽셀과 물리픽셀의 이해
  • 픽셀의 레스터화 과정 이해하기
  • 레스터화에 최적화된 배율 디자인 세팅하기
  • 모바일 웹 디자인 환경 세팅
  • 모바일에 최적화된 아이콘 제작방법
  • 반응형 디자인을 위한 브레이크 포인트 잡기
  • 스케치로 웹 디자인 환경 구축하는 방법

2-3. 반응형 웹 디자인 세팅방법

  • 반응형 디자인을 위한 브레이크 포인트 잡기
  • 스케치로 웹 디자인 환경 구축하는 방법

3강 WEEK.03

3-1. 디자이너가 꼭 알아야 할 이미지 비율과 경량화

  • 고밀도 대응을 위한 svg 제작법
  • 웹 로딩 속도를 위한 이미지 경량화 방법
  • http 요청을 줄이기 위한 이미지 스프라이트 기법
  • 이미지 비율 가이드 만들기

3-2. 가독성을 위한 웹 타이포그래피

  • 시스템폰트, 이미지폰트, 웹 폰트의 이해
  • 웹 안전 서체 세팅법
  • 웹 폰트의 이해와 사용법
  • 웹 폰트 경량화의 이해
  • 프로젝트에 최적화된 폰트 세팅법

4강 WEEK.04

4-1. 웹 접근성을 위한 유니버셜 타이포그래피

  • 웹에 최적화된 폰트 크기
  • 자간, 행간 사용법과 CSS 계산법
  • 웹 접근성을 위한 폰트 컬러 명도대비 체크하기

4-2. 아름다운 심미적 효과를 위한 디자인 요소

  • gray scale로 시각적 계층구조 만들기
  • 구조에 맞는 디자인 제작하기
  • 간격 디자인 가이드 만들기

클래스 이미지 소개

단순히 이쁘기만 한 디자인 아닌, 가이드, 협업, 접근성을 고려한 유니버셜 디자인부터
디자인 시스템 구축 방법까지 학습합니다.

본 과정에서 배우는 내용을 토대로 이론과 방법론을 적용한 예시물 입니다.

오시는길

서울 마포구 서교동 368-26 더 마운드 빌딩

주차장 이용은 불가 합니다.

  • 합정역 3번 출구 도보 6분 431m
  • 홍대역 9번 출구 도보 10분 654m
  • 서교동 예식장 타운 도보 4분 295m