웹 2.0 기획과 디자인

미리보기

4
118 / 20

웹 2.0 기획과 디자인 기획자와 디자이너가 꼭 알아야 할 웹 2.0의 77가지 키워드와 디자인 패턴 이 책 정보 갱신

<노주환> 저 | 예인 | 2007--01

국내도서>컴퓨터/인터넷>웹디자인/홈페이지>웹기획

전 세계 주목을 끌고 있는 웹 사이트 분석을 통해 '웹2.0의 77가지 키워드와 디자인 패턴'을 정리한 책. 국내 수 많은 기업에서 사용자 경험 프로젝트 컨설팅을 진행했고, 사용자 인터페이스 및 인터랙션 디자인 분야에서 국내 최고 전문가로 손꼽히는 이 책의 저자는 변화하고 있는 웹의 전략과 트렌드를 분석하기 위해 전 세계에서 새롭게 주목 받고 있는 웹 사이트를 2,000개 넘게 분석하였다. 그리고 그 사이트에서 나타난 특징들을 기획과 설계, 디자인 관점에서 77가지 키워드와 디자인 패턴으로 분석하여 설명하였다. 『웹2.0 기획과 디자인』은 웹2.0 비즈니스에 관심 있는 경영자, 기획자, 디자이너들이 해외에서 주목 받고 있는 사이트들의 ‘핵심 설계 패턴’을 빠른 시간 안에 습득할 수 있도록 도와준다. 인터파크



한눈에 보는 " 웹 2.0 기획과 디자인 기획자와 디자이너가 꼭 알아야 할 웹 2.0의 77가지 키워드와 디자인 패턴 "

8 개의 메모가 있습니다.

웹2.0 기획과 디자인... 책 제목만으로도 맘에 든다. ^^

2011-07-15 17:41:23

@startup 님에게 댓글 쓰기

최영

최영 님의 메모

너무 어렵다 ㅠㅠ

2010-12-26 01:31:41

@yongcui 님에게 댓글 쓰기

정보디자인의 모형
~ 물리적 디자인 : 사용자의 정보 탐색을 돕기 위한 디자인
~ 인지적 디7자인 : 정보에 대한 사용자 이해를 돕기 위한 디자인
~ 정보에 대해 편한 느낌을 가질 수 있게 만드는 디자인

블로그 타입 서비스
: 초기화면과 서브 화면의 차이가 거의 없음
: 초기부터 주제를 강조한다. 초기 화면의 주제가 방문자 니즈에 부합될 경우, 방문자에게 핵심 메시지를 전달할 수 있게 되므로 강한 관계 형성

주제를 전달하기 위해 제목, 요약, 부제목, 내용, 관련 그림으로 구성.

thumblicio.us 딜리셔스의 북마크 정보를 스크린샷 형태로 제공

얼굴아이콘의 중요성

위젯사이트 : Wigetbox.com

포스트잇타입 인터페이스 : 컨테이너 크기가 다양하고 배열 자유로움. 복잡해보임
사용자 니즈가 자주 바뀌는 경우에 적합한 방식

카토그래피 인터페이스 : map-making. 정보학이나 IT에서는 공간데이터를 시각화하는 기법이나 방법으로 알려져 있음
정보 구조를 실제 세계의 그것과 가깝게 개념화하고 시화 하는 것.
카토그래피를 통해 정보의 절대적 가치와 의미를 표현하고, 링코그래피를 통해 정보의 상대적 가치와 의미를 표현하면 관계 및 맥락 정보가 더해져 커뮤니케이션 효과를 극대화시킬 수 있으며, 전체 정보량을 한눈에 표현할 수 있는 강점을 가지고 있다.

패널 인터페이스 : 포토샵이지에서 보다 자세한 정보를 제공해야 하는 경우라면 리스트로 보기가 적합하며, 이미지 중심의 정보 열람이 효

http://uxtlab.tistory.com/entry/D-sort 카드소팅 툴

마인드맵핑 프로그램 : 프리마인드

Instant Edit : 플리커의 컨텐츠 편집모드. 모바일에서는 어떻게 적용되어야 할 것인가

Coverpop www.coverpop.com/pop/pulp 모자이크

피시아이 메뉴
(www.crispyshopy.com)

파비콘

단순한 기능


목차

인포메이션 디자인
에피센터 디자인
빈 서판
마이크로링크
태그 클라우드
계층 구조의 시각화
높은 가시성
탄성 리스트
비주얼 서치
검색과 브라우징의 결합
맥락 속의 핵심어
정보 구성기
드릴다운 네비게이션
블로그 타입의 초기 화면
대시보드 디자인
썸샷
스크린샷
스크린캐스트
순서매기기
최근 읽은 사람들 위젯
사이드노트
저작권 없는 푸터


2. 인터페이스 디자인
웨블리케이션
웹의 위젯화
포터블 인터페이스
제약이론
포틀릿 기반의 인터페이스
포스트입 타입 인터페이스
위키 타입 인터페이스
카토그래피 인터페이스
PIP 인터페이스
다중 검색엔진 인터페이스
URL 체계를 닮은 검색 인터페이스
탭 패턴
멀티 아이프레임
강력한 그룹핑
보기 옵션
큰 입력 필드
클릭 단서
다이렉트 컨트롤 버튼
원스톱 등


3. 인터랙션 디자인
단일 컨텍스트 다중 작업
Yellow Fade Technique
로딩표시기
자동완성
빠른 검색
미리보기 팝업
빠른 저장
빠른 편집
제약 기법
인터랙티브 모자이크
피시아이 메뉴
북마크릿과 파비콘
4 그래픽 디자인
단순함
단순한 레이아웃, 네비게이션
투명한 컨트롤 패널
본문 중심의 레이아웃
분리된 헤더
Using Utility Navigation Bar
가운데 정렬
리퀴드 디자인
자연친화적 디자인
강한 색과 밝은 색상
크고 진한 글자
둥그게 처리된 형태
Vlicon
선명하고 정교한 그래픽 요소
거시 여백과 미시 여백
코멘트 디자인
지도 디자인

5 마케팅 디자인
사용 계기
서비스 모델 전달하기
버즈 마케팅
숫자 마케팅
디자인 요소로서의 광고 요소
웹 배지
만화 마케팅

2010-12-25 23:15:52

@tpointt 님에게 댓글 쓰기

afr5

afr5 님의 메모

기억이 안나 ;ㅁ;

2010-10-15 12:05:55

@afrobambacar 님에게 댓글 쓰기

웹의 부분부분을 그림과 함께 설명한 책
정의가 잘 되어있어 이해하기 쉽다.

2010-08-31 17:29:29

@uni0330 님에게 댓글 쓰기

나인후르츠미디어 신인예찬 필독서 > Planning

2010-04-29 16:22:31

@sinye9fg 님에게 댓글 쓰기

isdead

isdead 님의 메모

(모던한) 웹 기획자라면 가리지 않고 추천하던 책. 웹 2.0식 구조화 방식을 차례로 열거하고, 적절한 예제를 각 소재마다 첨부했기 때문에 언제든 참고할 수 있다.
개인적으론 기획 전 단계인 명상(?) 과정에서 종종 훑어보곤 하는데, 머릿 속에 구현하고 싶었던 요소들을 다시 자극하여 꺼내는 용도로 매우 유용하게 쓰고 있다.

다만 그다지 아카데믹하지 않다는 점이 단점이라면 단점인데, 이 부분은 O'Reilly의 Designing Interfaces에서 충분히 채울 수 있다.

2009-12-02 13:38:40

@isdead 님에게 댓글 쓰기

한때 웹2.0스러운 기획과 디자인이 유행했었다죠. 그 트렌드를 확인하기에 좋습니다. 정리가 잘 되어있어요. 그렇지만 지금까지 유요한지는 잘 모르겠습니다.

2009-12-01 13:21:49

@hyungjoo 님에게 댓글 쓰기

책이야기