본문 바로가기

2014 project

[SMLab 디자인스쿨] - 웹 디자인 워크숍 (6시간)




디자인이 좋으면 뭐든게 잘되는 것 같다.




<웹 디자인> 워크숍 

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' 검색

- http://www.cgtextures.com/

- http://minimalwall.com/


이미지 찾기

- Flickr http://www.flickr.com 

- 나만 알고 싶은 고퀄리티 이미지 35개 


아이콘, 벡터, 일러스트

- 디자인 패턴 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





- 동적인 느낌 + 디자인 www.slid.es



- 웹에 디자인 입히기 맵핑도구

온라인 이미지맵핑 도구  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. 웹 코드를 입혀서 메일로 발송해봅시다.