I cons -Advantages of icons-. icon 이란 ? 그림을 의미하는 그리스어 ‘eikoon’ 각종 프로그램, 명령어, 또는 데이터 파일들을 쉽게 지정할 수 있도록 하기 위해 각각에 해당되는 조그만 그림 또는 기호를 만들어 화면에 표시한 것. A dvanta.

Presentation on theme: "I cons -Advantages of icons-. icon 이란 ? 그림을 의미하는 그리스어 ‘eikoon’ 각종 프로그램, 명령어, 또는 데이터 파일들을 쉽게 지정할 수 있도록 하기 위해 각각에 해당되는 조그만 그림 또는 기호를 만들어 화면에 표시한 것. A dvanta."— Presentation transcript:

1 I cons -Advantages of icons-

2 icon 이란 ? 그림을 의미하는 그리스어 ‘eikoon’ 각종 프로그램, 명령어, 또는 데이터 파일들을 쉽게 지정할 수 있도록 하기 위해 각각에 해당되는 조그만 그림 또는 기호를 만들어 화면에 표시한 것. A dvanta g es of icons 0101 예)예)

3 1.Faster to select 빠르게 선택할 수 있다. 2.Good supplement text 텍스트를 도와준다. 3.International 전 세계적이다. A dvanta g es of icons 0202

4 1.Faster to select 글자의 역사는 그리 오래되지 않음. - 인간의 후천적 능력. 시각적으로 사물을 구분하는 능력. - 인간의 선천적 능력. A dvanta g es of icons 0303

5 1.Faster to select 하나의 아이템을 선택 할 때, -Choosing one item from a menu of textual options requires more brain processing and thus more item than recognizing and selecting one icon from a collection of icons. 텍스트메뉴를 읽고 해석하는 것보다, 시각적인 하나의 형태로 인식 하는 것에 더 의지하게 됨. -Textual menu options can be set in all capitals. (It aids recognition in choosing from among short texts) A dvanta g es of icons 0404

6 2. Good supplement to text 뉴미디어상 아이콘과 텍스트의 결합 You get the fast access that visual images provide, coupled with the clarity and precision that textual descriptions offer. 단 점 You have the double investment of designing text and icons and the combination of text with icons does make heavy use of screen space. A dvanta g es of icons 0505

7 벅스 뮤직의 좋은 예 ) 효율적인 공간활용을 위하여 아이콘만 삽입 하였다. 각 아이콘에 설명을 첨가하였다. 아이콘과 함께 텍스트를 첨가하면, 무슨 내용인지 쉽게 알 수 있다. A dvanta g es of icons 0606 2. Good supplement to text

8 3. International Many graphic representations of object are indeed universal and international. However it is all too easy to be lulled into a false sense of security on this point and think that everybody everywhere views icons in the same way that you do. Cultural influence on how we interpret visual information is huge and most people are unaware of how large a part it plays because they cannot see around it. A dvanta g es of icons 07

9 3. International A dvanta g es of icons 0808 지도의 예 ) 지도의 기호도 일종의 아이콘이다.

10 3. International A dvanta g es of icons 0808 익스플로러 툴바의 예 ) 아이콘만 봐도 무엇을 하는 기능인지 대강 짐작할 수 있다. 이와 같이 전 세계인에게 객관적이고 공통적으로 보이는 아이콘을 만들어야 한다.

11 Disadvantages of icons

12 www.themegallery.com Higher investment – many icons Different versions of the icon in different sizes (Time-consuming – 시간낭비 ) 이 아이콘만 봐도 얼마나 힘들게 작업했는지 알수있다.

13 www.themegallery.com Higher investment – many icons Made in several flavors or states : normal, disabled, highlighted icons Production time involved 3 * 3 * 20 = 180

14 www.themegallery.com Higher investment – choosing concepts Time and effort - brainstorming → evaluating → making ( 제한되어진 아이콘 공간 ) ex) Macintosh - 처음 의도와는 다른 결과를 초래

15 www.themegallery.com Higher investment – choosing concepts  남, 여 상징 남, 여 특징 관찰 많은 아이디어 중 평가 작업 실행

16 www.themegallery.com Bad design is easier ‘lighter’, ‘whiter’, ‘brighter’ = 비슷한 개념. 아이콘으로 디자인 하기 어 렵다. ← lighter?? whiter?? brighter??

17

18 Designing single icons

19 소 개 여기서는 아이콘 디자인에 대하여 설명을 할 것입 니다. 시작하기에 앞서 아이콘을 디자인하는 것은 크게 두개로 나뉘는데 하나는 이장에서 다룰 ‘ 하나의 아이콘을 제작 하는 것 ’ 과 뒤에서 배울 ‘ 기능을 고 려하여 하나의 집합의 아이콘의 제작 ’ 에 관한 것 입니다.

20 Abstraction and presentation ‘ What is the essence of the concept that you are trying to communicate? ’ ‘ How can that essence be given a distinct visual form? ’

21 Finding visible entities Certain entities are physical objects themselves and as such can be depicted without too many problems. ->ex) computers, cars, etc. 자동차나 컴퓨터 같이 어떤 물리적 사물 같은 것들 은 별문제 없이 그릴 수가 있다.

22 BUT!!! Sometimes the essential thing is hidden!! - 대부분의 사람들은 하드디스크가 어떻게 생긴 줄 모릅니다. 그래 서 실제 생김새로 나타내기 보다는 그냥 박스에 디스크가 놓여있 는 거 처럼 생긴 것으로 표현합니다. The thing to be represented nay have a visual identity that is highly indistinct and unrecognizable. - 카페인 처럼 실제적으로 있긴 있지만 불명확하고 식별할 수 없는 것이 있습니다. 그래서 그림 5.2 처럼 어떤 사람이 카페인아 매우 절실하게 필요하 다는 것과 같이 카페인을 연상시켜주는 그림으로 나타내어야 한 다.

23 There are some ideas that are abstract and have no physical form associated with them. - ‘ Protection ’ 과 같이 보호란 말은 물리적 형태를 갖고 있지가 않다. 그럼 어떻게 표현을 하나 ?? 우산과 보호막과 같은 것으로 ‘ protection ’ 을 연상시킬 수 있는 대리 사물로 연상을 시키도록 만들어야 한다.

24 Symbols from other times Is that little gadget a compact camera, and electric shaver, a mobile phone or is it just a packet of cigarettes? - 이처럼 기술이 점점 미니어쳐화 되어가면서 카메라인지 전기 면 도기인지 핸드폰인지 아니면 그냥 담배각인지 쉽게 알 수가 없다. 그래서 요즘과 같이 너무 작아져서 구별하기 힘든 것으로 아이콘 을 만들지 않고 옛날의 것으로 만든다. 예를 들어 ‘ 사진 금지 ’ 를 나타내려고 한다면 디카에다가 빨강줄을 귿는게 아니라 예전의 수동 카메라와 같이 누구나 카메라라고 알 아볼수 있는 것에다가 빨강줄을 그어 표시한다. 그리고 컴퓨터는 1960 년도의 기본적으로 누구나 다 알아볼 수 잇 는 컴퓨터로 나타내고, 기차는 KTX 와 같은거 말고 예전의 증기기 관기차로 나타낸다.

25 Using symbols from other contexts. It is possible to borrow icons from one area and use then in another area in the assumption that many users will recognize them and understand them in the new context. - 요즘과 같은 세상에서는 사람들은 왜만한 아이콘들은 다 익숙 하기때문에 딴 데서 쓰인 아이콘을 여기로 가 져와 쓸 수 도 있다. 예를 들어 도로판에 ‘ 출입금지 ’ 라 는 기호를 슈퍼마켓에서 쓸 수가 있다고 한다. 보통 대 형마트에 가면은 이쪽으로 들어가지 말고 저쪽으로 돌 아서 들어가라고 말할때 쓰인 것을 실제로 보았다.

26 Extraneous meaning When designing icons, avoid adding objects and backgrounds to try to make the icon clearer. - 아이콘을 디자인 할 때 배경과 사물을 더하여 아이콘의 의미를 확실하게 하려고 하는 것을 피하라는 것인데 이런 경우가 있었다고 한다. ‘ 소시지 ’ 를 나타내려고 하는 아이콘을 만들려고 정육 점 아저씨의 칼과 소시지 주변의 판들을 더한 결과 아 이콘은 정육점 아저씨를 상징을 하게 되었다.

27 Powerful simple images Some images are perfect for icon design, they are highly visual and distinct. - 물, 불, 태양, 사람과 같은 것들은 아이콘 디자인에 서 강력한 힘을 갖고 있다. 매우 시각적이고 명확 한 것이기 때문인데 그러나 의도 하는 초점에서 벗어나면 의미가 완전히 벗어난다. EX) 태양으로 하루 ( ‘ day ’ ) 를 나타내고자 했지만 그 냥 ‘ 태양 ’ 또는 ‘ 햇빛 ’ 으로 해석이 될 수 가 있다.

28 Be careful with arrows. Of all the graphic devices the arrow is probably the most powerful.!!!! - 화살표는 그래픽 장치 중에서 가장 힘있는 것이다. 화살 표가 가르키는 순간 그쪽 방향으로 나도 모르게 눈이 따라간다. 그래서 아이콘의 키 ( 중요 ) 콘셉에 연길 시켜 사용하여야 한다. 그렇지 않으면 의도한 것을 뒤로 밀 어두고 중요하지 않은 것을 강조하게 되는 효과가 생 겨버린다. 심지어 세모도 마찬 가지이다. 화살표와 비 슷하게 생겨서 사용자에게 별 의미도 없는데 의미 있 는 것 처럼 보이게 한다. 화살 표가 가르키는 순간 그쪽 방향으로 나도 모르게 눈이 따라간다.

29

30 Legibility The design should be balanced so that all the elements are visible and comprehensible from a distance. - 디자인은 균형감 있게 디자인 되어야 한다.

31 Cues from context. Icons are always see in a context. That context gives the user information about how the icon should be interpreted. - 포토샵에서의 확대안경은 ‘ 줌인 ’ 이고 많은 정보를 다루는 시스템에서 확대안경은 ‘ 찾기 ’ 이다. 이렇 듯 아이콘이 위치한 배경 ( 환경 ) 에서 그 아이콘이 무엇을 의미 하는지 단서를 준다. 복잡한 아이콘 들은 따로 있는 것 보다 원래의 배경 / 환경 (context) 에 있으면 더 쉽게 알아볼 수 있다.

32 32 Designing icon sets Iconic house style - Color - Style and layout - Weight - Standard elements - Vocabularies - Clustering - Difference

33 33 Designing icon sets Color - Consist of a few large area colors coupled with a few highlighting color - Chosen color relation to color that has been chosen for new media system as a whole

34 34 Designing icon sets Style and layout - Similar style - Consistently * Pictogram

35 35 Designing icon sets The Pictograms 사물 · 시설 · 행위 · 개념 등을 상징화된 그림문 자 (pictograph) 로 나타 내 불특정 다수의 사람 들이 빠르고 쉽게 공감 할 수 있도록 만든 상징 문자.

36 36 Designing icon sets WEIGHT - The same balance of colors CONSISTENT

37 37 Designing icon sets Standard elements - Icon sets make use of standard elements in the icon Vocabularies - Sets of icons are usually related in some way

38 38 Designing icon sets Clustering - How the icons are laid out in the interface is important Differences - The key to selecting one icon from a group of icons is that the icons are different - 결과적으로, 서로 연관되어있지만 각각 다른 아이콘들이 올바른 균형을 가지고 있는 아이콘세트를 디자인하는 것이 목 표이다.

39 아이콘 또는 텍스트 ?

40 아이콘 디자인의 중요시할 점  정보를 표시하는 최상의 수단  단순히 아이콘 디자인의 목적으로 디자 인하지 않는다 모든나라 사람들에게 혼란을 준다 In out 몇나라 사람들에게 혼란을 준 다

41 41 견본을 만들 때 텍스트를 사용하 라  아이콘과 텍스트의 차이점 고도의 시간적 투자를 요구하는 아이콘 보다 다루기 쉬우며 만들고 간단하게 바꿔 사용할 수 있는 텍스트  인터페이스 기능성이 착수됐을 때 아이콘 디자인의 시간적 투자 고려

42 42 텍스트에 높은 투자를 해야 한다  텍스트에도 시간적 투자가 필요  가능한 한 많은 사람들이 이해할 수 있게, 가능한 한 짧고 간결하게

43 43 아이콘은 국제적이다  고도의 문화적 영향을 받는 아이콘 경험에 기초, 문화의 전후관계로 형성  투자의 크기 한 언어만 사용 < 다양한 언어의 텍스트를 조합 < 가지각색의 아이콘

44 44 사용자가 선택하게 하라  때론 투자는 큰 화제가 아니다  텍스트와 아이콘 둘의 결합은 언제나 가능