본문 바로가기

그래픽디자인

PART_4_18. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 지도 디자인 (Map Design) *** - 매쉬업(mashup) 서비스가 등장하면서 지도데이터를 이용한 디자인이 많이 짐 - 지도를 디자인 할떄는 지도의 이용 목적, 이용 대상, 이용 상황 등을 고려해 지도구성을 결정 - 좋은 지도 구성은 지도의 목적과 용도를 직관적으로 이해시키며, 주제요소와 배경간의 대비와 조화가 적절히 이루어져 궁극적으로 효과적인 그래픽 커뮤니케이션을 가능하게 한다. - 지도에도 제목, 만든이, 범례, 날짜, 방위, 격자, 축적, 정보가 기본적으로 포함 되어애 지더를 제대로 사용 할수 있음 - 시각디자인 측면에서 형태와 배경간의 구조화를 통해 요소의 중요도를 부여하고 다양한 대비기법을 통해 중요도가 높은 요소를 시.. 더보기
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)으로 간주 - 무언가 조작해야하는 영역과 단순히 읽고 보는 영역은 다른 특성을 가짐 - 따라서 기능 영역과 보기영역을 명료하게 구분해야화면을 보다 신속히 이해시킬수 있음 - 같은 속성을.. 더보기
PART_4_5. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 본문중심의 레이아웃 (presenting Main Contents First) *** - 로컬 네비게이션은 주로 본문 좌측에 위치 - 보편화된 레이아웃을 다르다보면 내용(본문)보다 기능(네비게이션)을 먼제 보여주게됨 - 블로그는 시간 또는 주제중심의 정보구조였기 때문에 기존 웹사이트의 구조와 다른 정보구조를 가짐 - 블로그는 본문을 먼저 보여주는 레이아웃 - 블로그는 본론부터 예기하는것과 같다. 정보의 홍수속에서 살고있는 사용자는 본론만 듣는것고 쉽지않음 - 본문 중심의 레이아웃은 그리드 시스템보다는 본문을 먼제 보여즐 수 있는게 관건 - 본문보다 다른 구성요서가 먼저 보인다면 본문중심의 레이아웃으로 볼 수 없음 - 이는 읽기 시작점과 관.. 더보기
PART_4_4. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 투명한 컨트롤 패널 (Transparent Control Panel) *** - 투명도(opacity, transparence)를 이용한 디자인 - 투명도를 이용하는 목적은 2차원 공간을 마치 3차원 공간처럼 사용하게 하거나 보이게하는것 - 화면의 복층구조, 포토샵의 레이어와 같은 개념 - 인터랙티브 티비에서는 영상테이터 위에 다른 테이터를 겹쳐 놓기 위해 투명도를 많이 이용 - 투명재질은 그라데이션효과처럼 시각적인 답답함을 다소나마 해소해줌 - 단점은 전경과 배경의 대비가 명료하지않다는점 - 대비가 명료하지않으면 판독성이 떨어짐 - 컨트롤 패널은 배경역할을 하기때문에 투명도가 전체적으로 적용되면 패널상에 배치된 요소의 선명도가 떨어짐 -.. 더보기
PART_4_3. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 단순한 네비게이션 (Simple Navigation) *** - 웹 2.0의 개념과 기능들은 어렵고 복잡해 단순함을 추구하는 디자인전략이 필요 - 선행과제는 불필요한 정보를 줄여 정보량의 최적화를 시킴 - 정보를 체계적으로 구조화시켜 카테고리간의 베타성을 강화 시킴 - 네비게이션 영역은 일종의 의미 영역이기에 단순한 네비게이션은 본문에 집중할 수 있는 디자인 구현을 도움 - 구조적으로 단순하게 설계된 네비게이션이라도 표현에 따라 단순하게 보이지 않을수 도 있음 - 네비게이션의 그래픽처리는 중요도를 고려해야함에도 부지불식간에 가장 중요한 화면요소로 인식되었음 - ''네비게이션=가장중요한 화면요소'라는 인식때문에 시각정 비중(visual we.. 더보기
PART_4_2. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 단순한 레이아웃 (Simple Layout) *** - 레이아웃이 복잡하면 화면을 이해하는 속도는 느릴수 밖에 없다 - 일반적으로 화면전체를 먼저 인식한 후 세부 영역에 대한 인식이 이루어짐 - 복잡성(Complexity)은 디자이너가 반드시 해결해야할 과제 - 내용과 디자인요소를 담는 틀이 단순해질수 있도록함 - 틀(Grid), 기준은 컬럼(Column) - 화면분할은 3단 그리드 이하가 바람직 - 3단 그리드가 임계점(critical point) - 레이아웃은 디자인 컨셉트를 반영 - 단순함이라는 그랜드 컨셉트가 있어야 단순한레이아웃이라는 서브켄셉트가 나옴 - 반드시 단순해야하는것은 아님 - 오래도록 보게 유도해야하는 컨텐츠, 다양한정.. 더보기
PART_4_1. 그래픽 디자인 (GRAPHIC DESIGN) PART_4. 그래픽 디자인 (GRAPHIC DESIGN) *** 단순함 (Simplicity) *** - 마케터들은 복잡함을 감수하더라도 더 많은 정보를 제공하는것이 옳다고 믿는 노출 지상주의를 지향하고있음 - 디자인의 목적은 필요이상으로 복잡한 사물을 단순하고 간결한 사물로 디자인해 용도에 적합한 디자인을 만드는것 - MIT미디어랩의 존 마에다 교수가 쓴 '단순함의 법칙'에서 단순하게 만들수 없는것도 있다 했듯이 전략적인 목적에 의해 복잡할수 밖에 없는 경우는 얼마든지있음 - 디자이너는 마케팅 전략이 어떠하든지 주어진 상황에서 복잡성을 덜어내어 가능한 수준에서 최대한의 간결함을 이끌어 내는것 - 최근 온라인서비스는 여러가지능력보다는 한두가지 능력이라도 보다 확실한 경쟁우위를 가지는 선택과 집중을 추구.. 더보기

티스토리툴바