디자인이 좋으면 뭐든게 잘되는 것 같다.
<웹 디자인> 워크숍
Chapter1 보이는 커뮤니케이션 '디자인 기획 + 디자인 기법'
Chapter2 디자인 인사이트 제작물 사례와 잘 만들어진 케이스보기
Chapter 3 디자인 재료 찾기 : 패턴, 텍스처, 일러스트, 폰트, 이미지
Chapter 4 디자인 도구 이해하기 : canva, pixlr, infogram
Chapter 5 웹 홍보물 만들기
Chapter1 보이는 커뮤니케이션 '디자인 기획 + 디자인 기법'
● 구글 크롬 설치 ▶ 다운로드 설치
● 파일저장은 드롭박스 설치 ▶ 가입하고 이용하기
Chapter2 디자인 인사이트 제작물 사례와 잘 만들어진 케이스보기
● 웹포스터 국내사례 ▶ FLICKR HERE
● 웹포스터 해외사례 ▶ 핀터레스트 HERE
● 타이포 디자인이란 ▶ http://www.typographicposters.com/
● 슬라이드쉐어 ▶ www.slideshare.net
● 76개 회사의 브랜드 디자인 ▶ http://metabranding.blog.me/220012044862
Chapter3 패턴, 텍스처, 일러스트, 폰트, 이미지
배경(텍스처) 찾기
- 구글, 플리커 등에서 'Textrue' 검색
이미지 찾기
- Flickr http://www.flickr.com
아이콘, 벡터, 일러스트
- 디자인 패턴 http://www.freevectors.net/
- 일러스트, 벡터, 디자인 소스 http://www.freepik.com
- 예쁜 아이콘 모음 https://www.iconfinder.com/
폰트
- 타이포 디자인이란 http://www.typographicposters.com/
- 한글폰트 http://software.naver.com/software/fontList.nhn?categoryId=I0000000
- 영문폰트 http://www.dafont.com
- 배달의 민족 '한나', '주아'체 http://www.woowahan.com/?page_id=3985
브랜드 칼라 (웹 #6자리 코드)
- 브랜드 칼라라는 것은 무엇일까요? 삼성, 네이버, 카카오톡... 하면 떠오르는 색깔은?
- 우리 기관/ 프로젝트/ 서비스를 대표하는 칼라 찾기
- 웹은 6가지 숫자로 색깔을 통한다. #ffffff (흰색), #000000 (검은색)
- 멋진 칼라 찾기 http://paletton.com/
- 화면에서 찾기 http://www.colorzilla.com/
드로잉도구
- 자유롭게 그려보자 http://paintsomething.co/
- 풍부하게 그려보자 http://mudcu.be/sketchpad/
Chapter4 디자인 도구 이해하기 : canva, pixlr, infogram
- 디자인도구 Canva www.canva.com
- 디자인도구 PIXLR www.pixlr.com
- 인포그래픽 차트 www.infogr.am
- 웹에 디자인 입히기 맵핑도구
온라인 이미지맵핑 도구 http://maschek.hu
* 코드 만들기
이미지 코드 불러오기
<img src="이미지URL">
이미지 코드 + 링크
<a href="이동할주소">
<img src="이미지URL">
</a>
[코딩의 예]
<map id="imgmap2013612173425" name="imgmap2013612173425"><area shape="rect" alt="다음 홈페이지" title="" coords="48,65,301,240" href="http://www.daum.net" target="_self"><area shape="rect" alt="네이버 " title="" coords="327,66,447,144" href="http://www.naver.com" target="_blank"><area shape="rect" alt="SMLab" title="" coords="327,159,446,237" href="http://smlab.org/108" target="_top"><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
<img src="https://t1.daumcdn.net/cfile/tistory/0275403751AE821A05" usemap="#imgmap2013612173425">
- 웹에 적용해보기 http://fiddlesalad.com/html/
Chapter 5 웹 홍보물 만들기
1. A4에 간단히 손으로 그려봅시다.
2. 필요한 재료들을 모아봅시다.
3. 디자인 도구를 이용해 제작 시작!
4. 웹 코드를 입혀서 메일로 발송해봅시다.
