Visual & Media Design

최혜송 : Portfolio PC 사이트의 메인 theme이 book 이였다면 이것을 계속 끌고 나갔어야 되지 않을까.... 모바일 메인 맨처음이 너무 오래걸리는것 같음. 로딩에 시간에 대한 고려가 있어야 될것 같음. PC 사이트와 모바일 사이트 동작하는것을 화면으로 찍어서 블로그에 금요일까지 올릴것. Finalproposal View more presentations from Hyesong Choe 웹 : http://yysongyy.dothome.co.kr/menu 모바일:http://yysongyy.dothome.co.kr/menu/m_index.html 포스팅 : http://songcomm.egloos.com/666092 오현아 : 흑백을 유지하는것이 더 좋았을듯. 회색이 들어가면서 완성품이라기..

6월 14일 화요일 기말 과제 제출및 발표를 합니다. 기말때 발표자료를 slideshare.net에 올리고 링크를 블로그와 기말 포스트에 댓글로 제출합니다. 최종으로 작업한것의 sitemap, navigation 및 최종 스크린 캡쳐 화면이 포함되어야 있어야 함. - 포트폴리오사이트 (모바일 or PC 버전) URL 과 캡쳐받은것 or 구동화면의 동영상을 블로그에 올리고 아래에 댓글로 달것 - 프로젝트 모바일웹 프로포잘(슬라이드쉐어에 등록하고 블로그에 임베디드로 삽입) + URL 과 캡쳐받은것 or 구동화면의 동영상을 블로그에 올리고 아래에 댓글로 달것 한 블로그 포스트안에 - 프리젠테이션 slideshare.net 임베디드 코드 - PC 사이트 화면 캡쳐 or 구동 동영상 - 모바일 사이트 화면 캡쳐 ..

What is UX Design? View more presentations from Ji Lee.

The 2011 trends in interactive design View more presentations from Prophets Agency http://sour-mirror.jp/

Add to home screen message for iphone and ipad 아이폰과 아이패드에 홈스크린 메시지를 더하기 스크립트 다운로드 받기 https://github.com/cubiq/add-to-homescreen/tarball/master 데모화면 http://vimeo.com/19090508 한글도 지원하므로 풍선말에 나오는 해당 텍스트가 자동으로 한글을 지원함 사이에 아래 스크립트를 삽입 위에서 다운로드 받은 스크립트의 폴더 "src"와 "style"폴더를 같이 업로드해서 각각 add2home.css와 add2home.js의 링크를 정확하게 표시해주어야 함.

모바일에 flickr 슬라이드 쇼를 넣는 방법 http://freejavascriptslideshow.com/flickr-javascript-slideshow-for-mobile.html 소프트웨어를 다운로드 받아서 구동시키면 코드를 자동 생성해 주고 원하는 부분에 넣으면 됨. 주의할것은 관련 폴더들을 모두 가져와야 함 flickr 사진을 PC 웹사이트에 슬라이드 쇼로 가져오는 방법 임베디드코드를 생성해서 원하는 부분에 가져다 넣기만 하면됨. http://www.flickrslideshow.com/ 예: 특정셋을 가져다가 넣었음 http://www.flickr.com/photos/jisunlee/sets/72157625948886045/ Created with flickr slideshow from so..

포트폴리오 사이트에 들어가야 할것들... 단순한 로고. 어떤 디자이너인지 간략하게 전달 포트폴리오나 이력서를 다운로드 받게 제공 http://speckyboy.com/2011/05/08/building-a-great-web-design-portfolio-%E2%80%93-10-best-tips-40-examples/ 상단 네비게이션으로 많이 유도. 홈으로갈수있도록. 세로 네비게이션만. 최소한의 클릭. 세로로 많은 컨텐트 배치 http://www.mobileawesomeness.com/ 모바일웹을 만드시는 분은 QR 코드를 만들어서 연결시켜면 좋습니다. URL에 모바일웹 URL 만드시고 generate 버튼을 누르면 나오는 이미지를 일러스트레이트에서 image trace기능을 이용하여 벡터로 바꾸어서 쓰시..

UX에 대해 공부해보려고 책을 찾던 중 처음으로 읽게 된책 (왼쪽:한국에 나온책, 오른쪽: 원문) 읽고 나니 뭔가 좋은 얘기가 많았던거 같지만 나의 기억력이 얼마나 갈지 모르기에 정리를 해보려고 한다. 빌 벅스턴 | Bill Buxton 원래 음악가였던 빌 벅스턴은 30여 년 전부터 컴퓨터를 이용한 예술 활동을 해왔다. 무대와 스튜디오에서 음악을 하며 기술이 미치는 긍정적인 영향과 부정적인 영향을 절절히 경험했다. 이 러한 경험을 바탕으로 디자인과 리서치 분야에 몸담고 나서 '인간의 얼굴을 한 기술'과 '사용자 인터랙션'에 천착하게 되었다. 30여 년 동안 다양한 디자인 리서치에 참여하면서 기술을 사용자에 맞게 디자인하는 방법을 다수 연구했다. 또한 음악, 영화, 산업 디자인 등 창의적인 분야에 기술을 ..

디지털 테크놀로지는 콘텐츠를 인터넷이라는 '디지털 하이웨이'에 실어 세계 곳곳으로 실어나름으로써 인류에게 지금까지 경험해 보지 못한 '콘텐츠 세례'를 선사하기 시작했다. 스위치를 켜고 모니터를 들여다보며 마우스를 놀리고 있자면 '콘텐츠의 정거장'인 웹사이트들을 통해 무엇이든 원하는 정보를 쉽게 얻을 수 있을 것만 같았다. 그러나 대부분의 사용자들은 콘텐츠를 습득하고 사용하기에 난감함을 표한다. 그 존재 방식이 사용자에게 친절하지 못하기 때문이다. 따라서 디자이너들은 콘텐츠의 존재 방식을 어떻게 디자인할 것인가라는 새로운 과제에 직면했다. 하지만 한때 봇물처럼 터져 나오던 웹사이트 디자인과 이를 둘러싸고 벌어졌던 활발한 논쟁들은 어느덧 자취를 감춰버린 채 새로운 미래를 준비하고 있지 못하는 듯하다. 이에 ..

http://www.flickr.com/photos/paulhughes/sets/ IDEO사의 디자인 사고에 관한 스케치 & 노트

출처 : 브레인스토어 코리아 블로그. 정수 공유 땡큐 http://ideamachine.tistory.com/120 고객사들과 아이디어 도출 프로젝트에 대한 이야기를 나누다보면 빠지지 않는 주제가 IDEO의 Design thinking에 대한 것이다. 이번 호부터는 아이디어 도출 전문 조직인 IDEO 특집으로, IDEO가 Stanford 대학에 제출한 Social Innovation review를 빌어 IDEO의 Design thinking에 대해 이야기해보고자 한다. 이번 호에서는 Design thinking 이란 무엇인지, 어디에서부터 시작되었는지에 대해 다루어보도록 하겠다. Design Thinking의 시작 IDEO는 1982년에 애플 컴퓨터의 첫 번째 마우스를 만든 David Kelley Des..

conducting collaborative design Sessions Conducting Collaborative Design Sessions – Part 1: Prepare Conducting Collaborative Design Sessions – Part 2: Inform Conducting Collaborative Design Sessions – Part 3: Facilitate Conducting Collaborative Design Sessions – Part 4: Maintain

수요일 점심 12:00 까지 이미지 모두 제출 html code는 금요일 오후 3시까지 이메일 주소로 보내주세요. neofuture@yahoo.co.kr

http://www.cssplay.co.uk/menu/gallery3l.html Cascading Style Sheet#gallery { padding:0; margin:0; list-style-type:none; overflow:hidden; width:320px; height:425px; border:1px solid #888; background:#fff url(windows/win_back.gif); } #gallery li { float:left; } #gallery li a { display:block; height:30px; width:320px; float:left; text-decoration:none; border-bottom:1px solid #fff; cursor:default; }..

출처 http://www.lokeshdhakar.com/projects/lightbox2/ 아래의 화일을 다운로드 받습니다. 아래의 화일들이 있어야 합니다. Download Lightbox v2.05 1. 자신이 작업하는 html 페이지에... 부분에 아래를 삽입합니다. 2. 원하는 이미지의 링크 태그에 아래처럼 삽입합니다. image #1

배경이미지 패턴으로깔아주기 스크롤바 디자인 바꾸기 http://www.iconico.com/CSSScrollbar/

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_locations See also Chapter 4. Chapter 1 This chapter explains ba bla bla Chapter 2 This chapter explains ba bla bla Chapter 3 This chapter explains ba bla bla Chapter 4 This chapter explains ba bla bla

1. 슬라이드용 디자인 자신의 웹사이트 디자인을 이미지를 1024*768 로 작업바랍니다. - 자신 웹사이트 디자인 컨셉소개 템플릿 포토샵화일 첨부합니다. 나눔고딕 ExtraBold를 사용하였습니다. 서체다운로드 : http://hangeul.naver.com/nanum.nhn 폰트를 먼저 인스톨하시고 포토샵을 여셔서 입력한뒤에 jpg로 만들어서 제출합니다. web_template.psd - 자신 웹사이트 디자인 이미지 백그라운드 없고, 브라우저 부분빼고 순수 이미지 영역만 4장 1024x768 사이즈로 제출합니다. 웹브라우저 빼고 디자인 영역만 제출 : 슬라이드용 디자인 이미지만을 name_presentation 폴더에 만들어서 넣어놓을것 2. 웹사이트 링크로 연결할 부분 제출 - 인터넷 웹페이지 화일..

지금 까지 진행된 과제한것을 여기에 댓글로 달아주세요.

http://yensdesign.com/tutorials/popupjquery/ 버튼을 누르면 새창이 뜨면서 창부분만 하일라이트 됩니다. 요새 많이 쓰는 j쿼리의 투토리얼 입니다. http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/

w3schools.com/css/

http://datavis.tumblr.com/archive

슬라이드 쉐어에 못올린사람들은 나중에 올려서 알려줄것 파워포인트에서 pdf로 바꾸어서 올려볼것 백수지 포트폴리오 웹사이트 무지 사이트 의 영향을 받아서 디자인함 가로사이즈 줄일것 원래 자신의 아트웍을 적용해서 디자인해올것 좀더 다양한 기능을 넣는것을 시도해볼것 플래시나, 게시판 등등. 기말을 위해서는 tweety0224.dothome.co.kr 이정민 Non-private Designer's website 포트폴리오 공유 사이트 현재는 자신의 포트폴리오 사이트를 IA로 가져왔음 공유사이트를 만들것이라면 그것에 맞추어 IA와 UI를 스케치할것 (다음주까지) Media design project proposal View more presentations from joey1106 안지은 포트폴리오 웹사이트를 ..

http://vimeo.com/6520450 Web Design Tutorial Part One Web Design Tutorial Part One from andrew on Vimeo. 1. 와이어 프레임을 손으로 먼저 자세히 그린다. 2. 포토샵에서 먼저 새로운 도큐먼트에서 Web을 선택하고 거기서 사이즈를 선택 3. proof setup에서 monitor RGB 선택, proof color 를 선택 4. grid system generator를 이용하여 그리드 이미지를 만들고 이것을 가져다가 포토샵에 넣고 사용 5. 포토샵 레이어 폴더를 만들어서 각각의 로고, 메인메뉴 등등의 폴더를 만들어서 따로 따로 디자인해서 이용함 . 이것은 와이어 프레임을 그렸던 것에 기초해서 만든다. 그런다음에 종류별로 다..

http://colorschemedesigner.com/

아이폰 어플이나 모바일웹을 2학기 웹디자인에서 시도하려고 합니다. 디자인 하실때 다음의 재료들을 쓰셔서 디자인을 시작할수 있습니다. iPhone Safari Browser Download File (.psd) iPhone GUI Elements iPhone Status Bar: Gray Download File (.psd) iPhone Status Bar: Black Download File (.psd) iPhone Title Bar: Blue Download File (.psd) iPhone Title Bar: Black Download File (.psd) iPhone Title Bar Buttons Download File (.psd) iPhone Icon Bar Download File (.psd..

중간과제 여기에 댓글로 달아주세요. 1. translation 번역 숙제, 2. designing interaction books 1장 2장 써머리, 3. 자신의 인터렉티브 미디어 디자인 프로젝트 프로포잘 쓰기 1단계 전략수립(strategy / research) 1-1. Mission - 개발 하고자 하는 사이트의 미션은 무엇인가? 몇문장으로 정리 1-2. Objectives - 개발 하고자 하는 사이트의 목적은 무엇인가? 몇문장으로 정리 1-3. Target Users - Primary Target 사용자와 Secondary Target 사용자를 정의 1-4. Scope of the Project - 유사/ 경쟁 사이트 벤치마킹 2단계 디자인 및 스펙결정 (design / Ideation) 2-1. ..

http://webzone.k3.mah.se/k3jolo/visCat/

http://www.informationisbeautiful.net/

국내의 무료 웹호스팅을 제공하는 업체들 리스트 입니다. 닷홈. 사용방법도 아래에있어요. http://ilryu.tistory.com/113 해외의 무료 웹호스팅 대용량 http://blog.naver.com/PostView.nhn?blogId=parangbee&logNo=80120844021 국내 무료웹호스팅 라온넷 http://www.raonnet.com/