본문 바로가기

UX/웹 2.0 기획과 디자인

PART_5_7. 마케팅 디자인 (MARKETING DESIGN) PART_5. 마케팅 디자인 (MARKETING DESIGN) *** 만화 마케팅 (Cartoon Marketing) *** - 제품 또는 서비스에 대한 메시지를 만화로 전달하는 마케팅 기법 - 딱딱하고 어려운 내용을 친근하고 쉽게 이해시킴 - 텍스트와 그림을 동시에 보여주는 만화는 커뮤니케이션에 효과적이다. - 효과적인 커뮤니케이션 도구 이지만 시각적 자극이 너무 강해 주변 요소들이 읽혀지지않는 단점이있다. 관련이론 시각적 심상화 - 시각적 이미지는 기억을 촉진하는 역할을 수행한다. - 반드시 설득시키고 기억 시켜야 하는 정보는 시각적인 정보와 함께 제공하는것이 효과적임 출처: 웹2.0기획과 디자인(노주환) 더보기
PART_5_6. 마케팅 디자인 (MARKETING DESIGN) PART_5. 마케팅 디자인 (MARKETING DESIGN) *** 웹 배지 (Web Badges) *** - 정체성, 소속, 충성심을 상징하기위한 커뮤니케이션도구 - 웹에서는 브랜드마크와 시각적 주목을 위한 용도로 사용되고있음 - 브랜드 마크의 용도로 사용되는 웹배지는 특정기술 표준의 사용, 수상경력, 제휴 등을 알리기 위해 사용 - 소셜 네트워크 마케팅이 활성화되면서 특정기술이나 정보를 배포하기위한 네트워크 웹배지가 많이 사용 - 캠페인 배지는 개념이나 정신을 적극적으로 전파하기 위한 홍보 도구 - 대게 브랜드마크의 웹배지는 링크를 제공 관련이론 네트워크 배지의 종류 - 큰사이즈의 배지 - 주로 사이드바에 배치되는 경우에 사용 - 한줄짜리 배지 - 배치공간의 여유가 없을때 사용, 초기화면이나 트래픽.. 더보기
PART_5_5. 마케팅 디자인 (MARKETING DESIGN) PART_5. 마케팅 디자인 (MARKETING DESIGN) *** 디자인 요소로서의 광고요소 (Advertising Elements as Design Elements) *** - 광고의 게재는 불가피하다 - 광고의 적정수준을 결정하고 그 다음 과옥요소와 다른 디자인 요소간의 조화를 이룰수 있는 디자인을 강구 - 광고 수준은 콘텐츠의 균형을 고려해 결정하는것이 좋다 - 광고가 과도하게 많이 게재되면 콘텐츠가 묻히는 결과를 초래 - 사용자가 광고를 먼저보게 되거나 콘텐츠인지 광고인지 구분이 어려운 디자인은 바람직하지않다 - 콘텐츠와 광고는 두드러지게 구분시킨다. - 구분이 모호하면 사용자에게 불쾌감을 줄수 있고 반대로 구분이 분명하면 디자인의 통일성을 저해할 수 있음 - 이질성을 줄이기위해 본문내용을 먼.. 더보기
PART_5_4. 마케팅 디자인 (MARKETING DESIGN) PART_5. 마케팅 디자인 (MARKETING DESIGN) *** 숫자 마케팅 (Numeric Marketing) *** - 브랜드와 숫자가 결합하거나 쉬운 전화번호를 활용하는 마케팅기법 - 숫자는 비교적 기억하기 쉽고 차별적인 메시지를 담을수 있음 - 기능성제품의 경우 숫자의 정교함과 강력함을 통해 보다 강하고 호의적인 이미지를 형성시킬수 있게됨 - 사람들은 숫자에대해 3가지 개념구조를 가지고 있음 . 수량개념 : 갯수 또는 양을 측정하는 개념. 사람들은 1개와 100개가 얼마나 큰차이인지 안다. . 의미개념 : 문화적 관습과 개인적 경험치에 의해 형성되는 전화번호, 일련번호 등의 기호적 의미. 숫자1은 일등 최고를 의미 . 구조개념 : 높고 낮음에 따라 선행, 후향의 순서 개념과 상하위개념을 이해.. 더보기
PART_5_3. 마케팅 디자인 (MARKETING DESIGN) PART_5. 마케팅 디자인 (MARKETING DESIGN) *** 버즈 마케팅 (Buzz Marketing) *** - 입소문에 의해 브랜드 가치를 높이는 마케팅 기법 - 직접 입소문을 내기위한 마케팅과 이미 알려진 입소문을 적극적으로 알리기 위한 마케팅으로 구분됨 - 입소문을 내기 위한 마케팅은 초대하기 기능이나 서비스 설명 정보를 손쉽게 가져갈수 있도록 배포기능을 제공하고, 서비스체험이 고객에 의헤 기록되고 이에 대해 토론하거나 의견을 개진할 수 있는 공간을 마련한다. - 이미 알려진 입소문을 소개하기 위한 미케팅은 메체에 게제된 기사나 사용자 리뷰를 사이트내에 게제함으로써 공감을 얻음 - 이러한 전략을 공감 접근 방법(resonance approach)라하는데 제공자가 아닌 제3자의 객관적인 시.. 더보기
PART_5_2. 마케팅 디자인 (MARKETING DESIGN) PART_5. 마케팅 디자인 (MARKETING DESIGN) *** 서비스 모델 전달하기 (Communicating Service Model) *** - 어떤 서비스인지 어떻게 이해시킬것인가 - 사전지식없이 경험해본적 없는 서비스를 접하면 막연함으로 인한 불안감과 개인적 편견에 의한 오해를 가질 수 있음 - 이것은 서비즈에 대한 사용자 심성모형(mental model)이 불완전 할때 나타나는 전형적인 현상임 - 사용자에게 올바른 서비스 심성모형이 구축되도록 서비스의 구조모형, 기능모형, 가치모형에 대한 커뮤니케이션 전략이 필요 -구조모형 Structure Model . 서비스가 어떤 요소로 구성되었는지 묘사하는 모형 . 간단한 설명문, 다이어그램, 카피등을 적극 활용 -기능모형 Function Mode.. 더보기
PART_5_1. 마케팅 디자인 (MARKETING DESIGN) PART_5. 마케팅 디자인 (MARKETING DESIGN) *** 사용 계기 (Trigger of Use) *** - 사용자가 특정 제품을 사용하게 되는 기회를 갖는것 - 사용자 경험이 시작되는 기점 - 사용계기와 관련된 니즈가 잠재되어 있어야 하며, 이를 자극할 수 있는 요소가 제공되어야사용계기가 유발됨 - 가장 중요한 자극 요소는 서비스 내용(contents) 또는 제품(product) - 커뮤니케이션 기법에 의해 자극여부가 결정됨 - 우선 사용자의 주의와 관심을 끌 수 있는 시각적 자극이 필요 - 시각적 요소는 차별적 이점을(USP:unique selling points)를 담고 있어야함 - 차별적 이점은 이성적 동기를 이끌어 낼수 있도록 제공가치 위주로 기술되어야함 (ex:장황한 문구보다는 간.. 더보기
PART_4_18. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 지도 디자인 (Map Design) *** - 매쉬업(mashup) 서비스가 등장하면서 지도데이터를 이용한 디자인이 많이 짐 - 지도를 디자인 할떄는 지도의 이용 목적, 이용 대상, 이용 상황 등을 고려해 지도구성을 결정 - 좋은 지도 구성은 지도의 목적과 용도를 직관적으로 이해시키며, 주제요소와 배경간의 대비와 조화가 적절히 이루어져 궁극적으로 효과적인 그래픽 커뮤니케이션을 가능하게 한다. - 지도에도 제목, 만든이, 범례, 날짜, 방위, 격자, 축적, 정보가 기본적으로 포함 되어애 지더를 제대로 사용 할수 있음 - 시각디자인 측면에서 형태와 배경간의 구조화를 통해 요소의 중요도를 부여하고 다양한 대비기법을 통해 중요도가 높은 요소를 시.. 더보기
PART_4_17. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 코맨트 디자인 (Comment Design) *** - 의견영역을 쓰고 읽기 편하게, 더 나아가 보기 좋게 디자인하느것 - 블로그의 보급과 사용자의 참여도가 높아 지면서 코멘트 디자인은 본문 디자인 만큼 중요해짐 - 의견영역은 입력하고 싶은 느낌(enterable)가 가독성(readablity)이 중요하므로 다음 사항을 고려한다. 하나. 의견을 입력하고 싶은 느낌이 들어야 한다. . 입력 필드의 크기가 작으면 심리적인 측면을 자극시키지 못할뿐 아니라 사용자가 입력한 내용을 확인하기 어렵기 떄문에 불편함 . 열려있는 상태로 제공되어야 바로 입력될 수 있어야한다. . 이것은 심리적, 물리적 경로를 단축 시키는 효과가 있다. 둘. 의견을 신속하.. 더보기
PART_4_16. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 거시여백과 미시여백 (Macro & Micro White Space) *** - 영국의 디자이너겸 컨설턴트인 마크볼튼(Mark Boulton, http://www.markboulton.co.uk)은 여백을 크게 거시여백과 미시여백으로 나누었다. - 화면구성에 있어 주요요소 간의 여백을 거시여백으로 행이나 단어와 같은 작은 요소간의 여백을 미시여백으로 정의 함(http://alistapart.com/articles/whitespace) - 새롭고 생소한 서비스에 호의적인 첫인상을 주기위해 간결함, 미니멀리즘, 시각적 임팩트 등의 디자인 해결책을 통해 첫인상과 의미전달을 관리하기 위해 의도적으로 거시여백을 제공 - 여백을 효과적으로 사용하기 .. 더보기
PART_4_15. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 선명하고 정교한 그래픽 요소 (Vivid & Elaborate Graphic Elements) *** - 웹 페이지 용량 문제는 어디까지나 전략적인 관점에 의해 결정되어야한다. - 서비스 마케팅에 결정적인 도움을 줄 수 있다면 페이지 용량이 다소 늘어나는 것은 허용되어도 무방 - 사용자의 불편을 가중시키지않는 범위내에서.. - 그래픽 요소를 많이 사용하는것은 불필요한 시각적 자극이 늘어나서 오히려 열람을 방해 한다 - 적정개수를 유지해야하며 페이지 용량이 허락하는 범위 내에서 품질을 높이는 것이 좋다 - 사진은 선명하게 버튼과 아이콘은 정교하게 처리하여 사용한다 - 선명함은 사용자의 주의와 관심을 집중 시키고 더 빨리 기억되게 하며 사이트.. 더보기
PART_4_14. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** VL 아이콘 (VLicon) *** - vlicon, visual Language icon 은 텍스트 레이블(textual label)이 포함된 작은 그림 또는 아이콘을 말하며 사물 또는 개념을 시각적 언어로 전덜하기 위해 사용함 - 아이콘은 신호나 기능애 대한 기억과 학습을 항상 시키며 정보를 찾거나 인식시키는 역할을 수행 - 대부분의 아이콘은 추상적인 형태를 가짐(simbolic icons, arbitrary icons) - 이런 아이콘은 사물이 쉽게 인식 되도록 돕지만 사물, 행위와 관련이 적어 일정 수준의 학습이 필요 - 아이콘 사용이 늘면 학습요소도 증가 - 아이콘이 제대로 디자인 되지않아 커뮤니케이션에 오류를 야기 - 그림과 텍.. 더보기
PART_4_13. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 둥글게 처리된 형태 (Rounded Shape) *** - 사람이 사는 곳은 인위적인것이 아니라면 대개 곡선의 형태를 띤다. - 자연스러움을 표현하는 경우 둥근 형태를 즐겨 사용해왔다. - 둥글게 처리된 형태는 비교적 손쉽게 사용자의 주의를 끌수 있다. - 원형에 가까울수록 형태는 강한 응집력을 갖는다. - 그래서 시선을 끌거나 기억에 남게 하려면 사각형보다는 원이나 삼각형의 형태가 유리하다. - 모니터가 사각이라는 점을 감안하면 둥글게 처리된 디자인 요소는 강한 시각적 대비를 형성 시킬수 앆에 없다. - 웹 2.0 기업의 CI(corporate identity)는 유난히 둥근 서체와 소문자를 많이 사용 하여 소박함을 강조 - 그러나 등근.. 더보기
PART_4_12. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 크고 진한 글자 (Bigger & Bilder Text) *** - 사람이 사물을 쉽게 이해하는 벙법중의 하나가 비교(comparison) - 가장 효과적인 비교 기준은 크기 - 사람은 큰것이 작은것보다 중요하다고 지각한다. - 디자인 요소들이 비슷한 크기로 배열이 되면 시각적 흥미를 유발 시키지 못한다. - 디자이너의 감각에 의존함이 팽배해있어, 주요 메시지를 강조하지 않고 지나치게 평범하게 처리하는 경우는 깔끔한 인상을 주기는 하지만 디자인의 실용성 목적에 달성 하기 어렵다. - 서비스 정보 전달의 위해 4~5개의 주요 키워드를 선정해 강조할 필요가 있음 - 강조할 요소가 많을 경우 다른 페이지로 분산시켜 강조한다. - 웹에서의 커뮤니.. 더보기
PART_4_11. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 강한 색상과 밝은 색상 (Strong Color & Bright Color) *** - 새로운 서비스는 역동적이고 활기찬 느낌을 내세워 사용자의 시선을 끌어야한다. - 인지도가 낮은 서비스일수록 상징성 보다는 실용성을 앞세워 니즈를 자극해야한다. - 이런 전략적 의도를 만족시키기 위해 컬러전략을 사용한다. - 채도가 높은 색상은 밝고, 강하고, 진하고, 선명한 색상이다. - 이중 진한 색상은 명도가 낮아 무거운색으로 분류 - 강하고 밝은 색상의 배색은 강한 대비를 만들어 맑은 느낌을 가지게 한다 - 강하고 밝은 색은 자루한 화면에 활력을 넣고 특정 부분을 강조한다. - 남용하면 사각적 부담을 가중 시키는 역효과를 낸다. - 색상 전략을 수.. 더보기
PART_4_10. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 자연친화적인 디자인 (Eco-Friendly Design) *** - 기능적으로는 어플리케이션(소프트웨어)이지만 형태적으로는 어플리케이션 디자인을 타피하고 있음(ex_웨블리케이션) - 기능만을 중시하지않고 검성도 중시하고있다. - 사용자의 감정을 이해해 총체적인 사용 만족감을 제공해야 하는 것이 중요 - 가상공간이 좀더 인간적이고 자연적이어야 한다 - 테크놀로지는 회색이라는 획일성에서 벗어나 인간적인 느낌을 전달 - 강한 색상과 대비를 피하고 자연스러운 느낌을 강조 - 강한색상과 밝은 색상 은 시각적인 임팩트 위주의 커뮤니케이션을 통해 단번에 사용자의 관심을 끌려고 하는 전략이므로 자연친화적 디자인과는 전략 자체가 다름 벤치마킹 http:.. 더보기
PART_4_9. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 리퀴드 디자인 (Liquid Design) *** - 다양한 브라우져지원, 플랫폼에 종속되지않는 디자인을 추구 - 해상도에 따라 적절하고 유연하게 보여지는 디자인 - Flexible Design - 사용자에게 비슷한 경험을 제공하기 위한 목적을 가짐 - 가변 레이아웃(relative layout)이 전제되어야 함 - 고정 래이아웃(fixed-width layout)에 비해 가독성에 대한 약점이 있음 - 행의 길이가 과도하게 길어질 경우 다음 행의 시작점을 찾기 어렵다 - 다양한 모습과 느낌을 미리 예상 한다는것이 디자인 측면에서는 약점 - 가변 레이아웃은 CSS를 사용해 화면을 구성허고 요소를 배치한다 - 여백(margin), 영역(div.. 더보기
PART_4_8. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 가운데 정렬 (Central Alignment) *** - 인터넷초기에는 좌측정렬이 주로 채택되었으니 해상도가 높아짐에 따라 '사용자 환경을 고려한 디자인'을 구현하기 위해 가운데 정렬이 많아지고있다. - 좌측정렬은 보수적인 느낌을 준다. - 전통을 중시하는 기업은 좌측 정렬을 선호하기도 함 - 여백은 형태를 돕는 순기능을 수행하지만, 여백이 과도하면 형태를 압박하거나 산만함을 가중시키는 역효과 발생 - 좌측정렬은 과도한 여백에 의해 본문이 위축되거나 여백의 집중으로 인해 전체의 안정감이 떨어진다 - 여백에 의해 읽혀 진다는 것을 감안 할때 본문의 좌측영역이 보다 쉽게 읽혀지도록 하기 위해 서는 좌측에도 여백을 부여하는것이좋다. 그래서 좌.. 더보기
PART_4_7. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** UNB 운용 (Using Utility Navigation Bar) *** - 유틸리티네비게이션(utility navigation) - 사이트 이용에 필요한 주요 메뉴를 말함 - 개념적으로는 사이트 구조상에 별도로 존재하지않음 - 사용 빈도가 높아 언제 어디서든 접근 할 수 있도록 만든것이 Utility Navigation Bar 임 - 글로벌 네비게이션과 비슷한 속성을 지니지만 글로벌 네비게이션은 사이트 구조를 의미하는 메인 네비게이션임 - UNB는 본문 영역이 아닌 화면 상단, 측면, 하단에 주로 배치 - 구성 링크는 홈, 마이페이지, 사이트맵과 같은 간단한것들임 - 주 사용처는 전형적인 형태의 웹 사이트 보다는 하위 개념의 사이트를 .. 더보기
PART_4_6. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 분리된 헤더 (Separate Header) *** - 헤더는 브랜드 아이텐티티, 메뉴 들이 있는 화면 상단을 말함 - 방문한 사이트의 정체성, 네비게이션을 돕는 기능영역임 - 웹사이트에서 사용자의 목적은 본문을 통해 달성 - 헤더와 푸터는 분문 이용을 위한 지원기능을 담당하기에 본문과는 다른성격을 가지며 시각적으로도 다르게 표현되어야 함 - 메인페이지가 아닌경우 헤더와 푸터는 기능 영역(function area), 본문은 보기 영역(viewing area)으로 간주 - 무언가 조작해야하는 영역과 단순히 읽고 보는 영역은 다른 특성을 가짐 - 따라서 기능 영역과 보기영역을 명료하게 구분해야화면을 보다 신속히 이해시킬수 있음 - 같은 속성을.. 더보기

티스토리툴바