컨셉트 디자인 :: concept deisgn

컨셉트 디자인

정의
광범위한 생각들의 형태가 명확하게 표현되는 단계로서
디자인 프로세스의 초기단계. (= 제안디자인)
포함영역 : UI, UX, strategy, interaction, visual.

 

ui prototpe

1. 기획의도 파악

기획 내용에 대한 질문 및 고객 커뮤니케이션

 

2. 레퍼런스

 - 경쟁사 서비스 종류 분석

 - 경쟁사 UI 분석

 - 고객사가 원하는 컨셉 분석

 - 디자인 에이전시 트랜드 분석

 - 컨셉표현 (아이덴티티, 비주얼, GUI)

경쟁사 UI 분석

하나투어 / 노랑풍선 / 모두투어 행사리스트 UI

패키지 여행서비스

 - 필수요소 : 목적지 선택, 출발 날짜 및 기간, 항공 선택 등 제품을 선택하는데 있어서 꼭 필요한 UI

 - 선택요소 : 필터기능, 정렬기능, 태그기능, 찜하기 기능 등 없어도 되지만 있으면 편리한 UI

특별한 UI를 만들기 위함이 아니라 보편적인 패턴안에 핵심을 찾고 각 UI 별 어떤 장단점이 있는지 알아보기 위함이다.

 

 

 

3. 기본 레이아웃 설정 및 러프디자인

 - PC(12단) : 콘텐츠 양 및 컨셉에 따라 width값 마진값 설정. (1440, 1280, 1080)

 - Mobile(4단 or 2분할) : (375, 414)

 - 반응형 : break point (720, 1024, 1334, 1660)
 - default font : 13~14pt / title font : 48pt~ 등으로 간단히 정의한다.

 

UI 프로토타입

TASS mobile UI

 - 그리드 및 모듈 구성. (위계 구성력 / 근거 / 테스트)

    i) grid system

그리드시스템 :: grid system

 

4. 비주얼 작업 및 컨셉트 디자인

 - main : 레퍼런스및 레이아웃 UI기반 컨셉 디자인 진행,

             아이덴티티, GUI(비주얼,아이콘), 주요 버튼 타입 및 컬러도 함께 정의해 나간다. 
 - sub : 주요 컴포넌트가 정의되도록 UI구성. 
 - layout : view type + component

UI concept design

ui prototpe

UI를 구성이 어느정도 완료되면 비주얼부터 작업하면서 컨셉 작업을 진행해 나간다.

2020/09/02 - [design/GUI] - 웹사이트 비주얼 디자인 :: website visual design

 

5. 뷰타입 정의

# viwetype

 - #grid
 - #card-ui
 - #list : txt, img + txt
 - #table
 - #footer

 

2020/08/11 - [design/UI] - 뷰 타입 :: View type

뷰 타입 :: View type

 

6. 컴포넌트 정의

@ component

    1. button
        1) font
        2) shadow
        3) padding
        4) radius
        5) state
            a) default
            b) hover
                i) hover scale
            c) pressed
                i) tab scale
            d) disable
        6) scale animation
    2. checkbox
        1) checked
            a) yes
            b) no
        2) disabled
    3. radio
        1) active
            a) button
            b) circle
            c) text
        2) inactive
        3) hover
    4. input
        1) type
            a) input
            b) textarea
            c) password
        2) placeholder
        3) value
        4) background
        5) border
        6) focus
        7) padding
        8) radius
        9) keyboard
            a) default
            b) numeric
            c) phone
            d) decimal
            e) email
            f) url
            g) search
    5. segmented control : group control for switching content
    6. slider
        1) tint
        2) track
        3) knob
        a) shadow
    7. toggle
        1) track
        2) knob
    8. tab 
    9. icon set
    10. indicator

 

 

신규서비스 디자인에는
꽤 많은 에너지와 시간이 들어간다.
런칭 후에도 꾸준한 수정 보완이 이루어지고.
중요한것은 첫단추를 잘 꿰어매는것이다.
충분한 리서치와 검증을 통해
모두에게 유익한 서비스를 
만들어보자.