UIUX 스터디 6주차 학습일지 03 - 인터페이스 디자인 : 18

1-6. Define

디자인을 위한 디자인이 아닌 프로젝트 목표를 정하고 이를 위한 디자인 컨셉을 세워야 함

 

Analysis

As-is 분석과 동종 유사업계를 분석하여 어느정도 바운더리 안에서 해당 플랫폼이 구동하는지 바운더리를 파악

좋은 것과 나쁜 것을 분류하여 리스트업 및 분류

이후 디자인 리서치를 통해 어떤 형식으로 시각화할 것인지 시각화에 대해 리서치 진행

 

Visual Concept

개념적인 측면

서비스나 플랫폼의 가치를 시각화하는 것

추가 리서치를 통해 메타포를 도출하고 특정 가치를 시각화

ex) 아이들과 피카소로부터 한선그리기 컨셉 도출

 

형태적인 측면

형태의 의미와 가치를 부가하여 형태를 시각화

ex) 직선과 곡선의 감성 등을 반영

> Workshop을 통해 의견을 취합해서 선택

 

우리 서비스는 어떤 서비스고 어떤 기능을 제공해요 (x)

우리 서비스는 왜 해야하며 전달하고자 하는 궁극적인 가치는 이것이에요 (o)

> 시각화는 일차원적인 크리에이션보다 깊은 분석을 통해 작업하는 것이 좋다

 

1-7. Design Authoring Tools

UIUX 업계에서 이용하는 툴

1-8. Image, Mood board

Mood board

특정 주제를 설명하기 위해 텍스트, 이미지 등을 합친 것

에어비앤비 홈페이지

 

ex) 멋진 여행지와 효율적인 루트를 소개해주기보다 실제 현지인의 삶, 액티비티, 리얼, 친근한 여행을 모토로 이미지의 일관성을 유지

> 무드보드를 통해 룩앤필을 정의하고 어떤 이미지를 어떻게 사용해야 할지 전략을 세우는 것이 중요

 

1-9. Color

사람들의 장기기억속에 가장 길게 남는 디자인 장치

 

Red

파워풀하고 열정넘치고 속도감있는 이미지

무게감을 이용해서 기업의 파워를 나타냄

주의나 위협을 나타내기도 함

 

Yellow

즐거운, 창의적인, 진보적인, 적극적인 이미지

밝고 쾌활한 이미지

소통을 중시하는 메신저나 금융사에 주로 이용

가벼워보여 미성숙한 이미지로 비춰지지 않도록 주의

 

Blue

신뢰감, 정직함

결제시스템과 관련된 브랜드나 금융브랜드에서 선호

논리적인 이미지와 첨단 기술을 나타내기도 함

하드웨어, SNS브랜드도 사용

 

Green

건강함, 신선함, 조화로운 이미지, 성장하는 이미지

환경에 관심을 기울이고 있다는 이미지를 주기도 함

신선함 강조, 식료품, 화장품 브랜드

안정감을 주기도 해서 긍정적인 행동효과를 표지함

 

Orange

활력, 사교성, 아이디어

소비자들의 행동을 유발해 로고의 포인트를 주거나 클릭을 유도하는 버튼으로 이용

 

Purple

고급스러움, 신비로움, 상상력을 자극하는 색깔

창의성과 관련된 트위치, 인스타그램 등에 사용

이미지 고급화 전략으로 식료품, 코스메틱 등에서도 메인컬러로 사용

 

Black

현대적임, 우아함, 신비로움, 럭셔리한 이미지

명품 브랜드의 컬러로 주로 이용

볼드하고 모던한 아이덴티티

 

Multi Colored

글로벌, 포용, 넓은 스펙트럼

구글, 마이크로소프트, 이베이 등 다양한 제품을 사용하는 브랜드

브랜드의 톤앤매너를 표현하기엔 다소 어려움

 

Color Mode

HEX Code

 

1-10. Typography

플랫폼에서 전달하고자 하는 감성에따라 타이포그래피를 다르게 사용

서체는 정보전달과 더불어서 감성까지 담음

 

서체와 관련된 용어

 

최근에는 행간의 값을 잡으면서 어센더, 디센더보다 더 넓게 텍스트 영역을 잡고 이를 기준으로 간격을 잡고 있음

 

Letter-spacing

트래킹은 한꺼번에 늘리거나 줄이는 것

커닝은 한글자 한글자 사이의 간격

 

Line length

끝의 길이를 유사하게 맞춰줬을 때 안정적으로 컨텐츠를 볼 수있음

 

Line height

줄과 줄 사이의 간격

 

Paragraph spacing

각 단과 단 사이의 간격

 

2-1. 디자인환경

 

dp

 

DP (density Independent pixel)

화면의 구성요소들의 크기나 배치를 할 때 기기의 해상도 차이에 영향을 받지 않고 독립적으로 크기를 지정할 수 있도록 하는 가상적 화소(Pixel)의 단위

> 사이즈는 비슷하지만 그 안의 픽셀과 밀도의 차이를 두는것

 

DPI (Dots per Inch)

실제 크기 1인치 당 점이 몇개 들어가있는가를 나타내는 것