[Msd11]mobile interfacedesign03

http://msd2013.jylee6977.com/tc

KGIT 2013 SPRING CLASS @ JYLEE

Mobile Service Design

CLASS11 MOBILE DESIGN 03



App Design Process (after service strategy)

IDEA WIREFRAME DESIGNING

Information Architecture(IA) User Interface Design(UI) Graphic User Interface Design(GUI) Sourcing(XML)



App Design Process (after service strategy)

Information Architecture(IA) User Interface Design(UI) Graphic User Interface Design(GUI) Sourcing(XML)

내용 정의 누구에게. 어떤 방식으로.어떤 순으로

뼈대 마네킹 설정. 옷의 방식/형태 설정

스킨 옷의 질감 및 패턴 선정 옷의 다양한 요소 선정

적용 적용된 옷을 토대로 공정

옷을 만드는 순서


Android UI Overview 00. Android UI



Android UI : UI Principle

01. Home, All Apps, and Recent

Home All Apps Recent




02. System Bars

1. Status Bar 2. Navigation Bar 3. Combined Bar




03. Notifications




04. Common App UI

1. Main Action Bar 2. View Control 3. Content Area 4. Split Action Bar


Android GUI Style 00. Android UI



Android UI : GUI Style

01. Devices and Display

1. Be Flexible

2. Optimized Layout

3. Asset for all

To work in the base standard (normal size and MDPI) Multi-pane Layout




02. Theme

Gmail in Holo Light Setting in Holo Dark Setting in Holo light with Dark Action Bar

API Guildeline : http://developer.android.com/guide/topics/ui/themes.html

http://developer.android.com/guide/topics/ui/themes.html




03. Touch Feedback

States




03. Touch Feedback

Communication Boundaries

Gesture로 인한 결과를 희미하게 표시하여, 사용자 입력에 대한 결과 예시화

더 이상의 줄이나 데이터가 없을때 (최종/최상단 리스트) 바운더리를 표현함으로써, 끝에 왔음을 표현




04. Metrics and Grid

Space Consideration

Gesture로 인한 결과를 희미하게 표시하여, 사용자 입력에 대한 결과 예시화





Space Consideration

API Guildeline : http://developer.android.com/training/basics/supporting-devices/platforms.html

http://developer.android.com/training/basics/supporting-devices/platforms.html





Space Consideration

API Guildeline : http://developer.android.com/guide/practices/screens_support.html

http://developer.android.com/guide/practices/screens_support.html





Space Consideration


• Screen Size (small, normal, large, xlarge) • Screen Density (ldpi, mdpi, hdpi, xdpi) • Orientation • Resolution px = dp * (dpi / 160) • Density independent pixel

xlarge screens are at least 960dp x 720dp large screens are at least 640dp x 480dp normal screens are at least 470dp x 320dp small screens are at least 426dp x 320dp






Density Independence







48dp Rhyme

Spacing between each UI element is

8dp.

** Touchable UI Component = 7-10mm (48dp)





48dp Rhyme




05. Typography

http://developer.android.com/downloads/design/Roboto_Hinted_20120823.zip




05. Typography

Type Color

Type Scale

textColorPrimary / textColorSecondary.

textColorPrimaryInverse /textColorSecondaryInverse.




06. Color

#33B5E5 #AA66CC #99CC00 #FFBB33 #FF4444

Android Color

http://developer.android.com/downloads/design/Android_Design_Color_Swatches_20120229.zip




07. Iconogrphy

Size & Scale Launcher icons on a mobile device must be 48x48 dp. Launcher icons for display on Google Play must be512x512 pixels.

Proportion Full asset, 48x48 dp

Style Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed from above, so that users perceive some depth

Launcher




07. Iconogrphy

Size & Scale Action bar icons for phones should be 32x32 dp..

Proportion Full asset, 32x32 dp Optical square, 24x24 dp

Style Pictographic, flat, not too detailed, with smooth curves or sharp shapes. If the graphic is thin, rotate it 45° left or right to fill the focal space. The thickness of the strokes and negative spaces should be a minimum of 2 dp.

Action Bar

Colors: #333333 Enabled: 60% opacity Disabled: 30% opacity

Colors: #FFFFFF Enabled: 80% opacity Disabled: 30% opacity

http://developer.android.com/downloads/design/Android_Design_Icons_20120814.zip




07. Iconogrphy

Size & Scale Small icons should be 16x16dp.


Style Neutral, flat, and simple. Filled shapes are easier to see than thin strokes. Use a single visual metaphor so that a user can easily recognize and understand its purpose.

Small / Contextual Icons

Color




07. Iconogrphy

Size & Scale Notification icons must be 24x24 dp


Style Keep the style flat and simple, using the same single, visual metaphor as your launcher icon

Notification Icons

Color




08. Writing Style

• Keep it brief. Be concise, simple and precise. Start with a 30 character limit (including spaces), and don't use more unless absolutely necessary.

• Keep it simple. Pretend you're speaking to someone who's smart and competent, but doesn't know technical jargon and may not speak English very well. Use short words, active verbs, and common nouns.

• Be friendly. Use contractions. Talk directly to the reader using second person ("you"). If your text doesn't read the way you'd say it in casual conversation, it's probably not the way you should write it. Don't be abrupt or annoying and make the user feel safe, happy and energized.

• Put the most important thing first. The first two words (around 11 characters, including spaces) should include at least a taste of the most important information in the string. If they don't, start over.

• Describe only what's necessary, and no more. Don't try to explain subtle differences. They will be lost on most users.

• Avoid repetition. If a significant term gets repeated within a screen or block of text, find a way to use it just once




08. Writing Style


How to design? 01. Let’s Do Interface Design



Let’s Design : How to Design?

01. Design Tools




02. Icon Design

Logo<App Icon<Resources

Logo Icon Resource

매우 단순함 단순함 복잡함

단독사용가능 App의 특징을 나타냄 조합하여 사용

강한 인상 식별로 이용 사용하기에 불편하지 않음

정보량이 적음 어느 정보의 정보를 담음 정보를 담는 경우 많음

표현의 제약이 많음 사이즈의 제약이 많음 제약 거의 없음

폭 넓은 용도 Launcher, Google Play App 내부에서만 사용

가치를 지님 App의 가치에 의존 App안에서만 가치




02. Icon Design

2, 3가지 색으로 분위기 결정

대상을 요소로 분리하여 보자

기능을 시사하는 아이콘의 효과




02. Icon Design

Style Clean and contemporary Simple and iconic • Android Launcher icons are caricatural in nature; your

icons should be highly simplified and exaggerated, so that they are appropriate for use at small sizes. Your icons should not be overly complicated.

• Try featuring a single part of an application as a symbolic representation of the whole (for example, the Music icon features a speaker).

• Consider using natural outlines and shapes, both geometric and organic, with a realistic (but never photorealistic) rendering.

• Your icons should not present a cropped view of a larger image.

Tactile and textured: • non-glossy, textured material




02. Icon Design

Size and Positioning Launcher icon dimensions for high-density (hdpi) screens: • Full Asset: 72 x 72 px • Icon: 60 x 60 px • Square Icon: 56 x 56 px Launcher icon dimensions for medium-density (mdpi) screens: • Full Asset: 48 x 48 px • Icon: 40 x 40 px • Square Icon: 38 x 38 px Launcher icon dimensions for low-density (ldpi) screens: • Full Asset: 36 x 36 px • Icon: 30 x 30 px • Square Icon: 28 x 28 px

ldpi (120 dpi)

mdpi (160 dpi)

hdpi (240 dpi)

xhdpi (320 dpi)

Launcher Icon Size 36 x 36 px 48 x 48 px 72 x 72 px 96 x 96 px




02. Icon Design

Materials and colors it appear to be sculpted from some real-world material. Icons should not use more than one primary color per icon, if possible. The icons should not be over-saturated. The highlight colors palette are recommended

http://developer.android.com/guide/practices/ui_guidelines/icon_design.html




02. Icon Design

Effects

1 Lighting: Top-lit using appropriate lighting details

2 Drop shadow:

#000000, 75% opacity angle 90° distance 1px size 3px

3 Textures: Tactile, appear to use real-world materials




02. Icon Design

http://www.iconspedia.com/search/android/ http://ntt.cc/2010/08/04/350-fresh-and-elegant-free-icons-for-android.html

http://www.iconspedia.com/search/android/

http://www.iconspedia.com/search/android/

http://ntt.cc/2010/08/04/350-fresh-and-elegant-free-icons-for-android.html
















Design Style Guide 01. Let’s Do Interface Design



Let’s Design : Style Guide

01. Color Scheme

Online Color Palette Generator

http://www.colourlovers.com/trends

http://colorschemedesigner.com/

https://kuler.adobe.com/




01. Color Scheme

Point Color 로고, 리스트 등에 들어가는 아이콘, 아이콘과 함께 이용되는 텍스트등의 직관적으로 눈에 띄는 곳에 사용되는 컬러

Sub Color 여러 컨트롤(버튼, 리스트, 텍스트)들의 배경으로 이용되거나 메인컬러를 돋보이게 만드는 부수적인 컬러

Main Color : 아이콘, 스플래시 이미지, 상단 타이틀(혹은 중심이 되는 탭바)로 이용되는 어플리케이션을 대표하는 컬러

Color Use

경쾌하고 산뜻함




01. Color Scheme

Color Use

중후함




01. Color Scheme

Color Use

직관적/유연함




02. Texture and Pattern

Pattern Libraries

Do it yourself

http://subtlepatterns.com/

http://www.dinpattern.com/category/patterns/

http://www.brusheezy.com/patterns/45101-golden-font-circles-pattern

http://webdesignledger.com/freebies/200-beautiful-seamless-patterns-perfect-for-web-design/

http://www.webdesignerdepot.com/2012/03/tutorial-create-5-subtle-background-patterns/





Pattern Generator

http://patternizer.com/izfa

http://repperpatterns.com/tool/

http://bgpatterns.com/

http://www.pixelknete.de/dotter/

http://bgmaker.ventdaval.com/

http://www.tartanmaker.com/

http://www.stripemania.com/

http://stripedbgs.com/

http://www.stripegenerator.com/





Texture Library

Lost and Taken Graphic River

wegraphics Free textures for layers Digital Camera World

Texture Gen FBrush

Graphic Mania

Shizoo Texture Palace Mayang

http://lostandtaken.com/

http://graphicriver.net/

http://wegraphics.net/downloads/textures/

http://www.texturegen.com/

http://www.grsites.com/archive/textures/

http://fbrushes.com/category/textures/

http://shizoo.frozen-media.de/textures.php

http://www.texturepalace.com/

http://mayang.com/textures/




03. Type Face

서체 활용방안

1. Android 기본 서체 활용

2. 무료 Font Embed

3. 이미지로 활용

서체 기본 양식

Title체

Sub Title 체

본문체

인용/강조/기타 체




03. Type Face

서체 활용방안

1. Android 기본 서체 활용

2. 무료 Font Embed

3. 이미지로 활용

Droid sans Droid serif Droid mono

다음체 : 나눔체 : 뫼비우스체

서울체 : 바른돋음/바탕체

Font Club: Cute Font

윤고딕/명조 시리즈

산돌고딕 시리즈

http://search.daum.net/search?w=tot&DA=YZRR&t__nil_searchbox=btn&sug=&q=%EB%8B%A4%EC%9D%8C%EC%B2%B4

http://hangeul.naver.com/font

http://www.tworld.co.kr/html/t/cm8_t_design_exp.html

http://design.seoul.go.kr/dscontent/designseoul.php?MenuID=490&pgID=237

http://www.print.or.kr/

http://www.fontclub.co.kr/Community/FreeFonts.asp

http://www.cutefont.co.kr/




03. Type Face

부드러운 주제에는 서울 한강체

나눔명조 같은 명조체가 좋고,

대화형 내용에는 나눔손글씨붓 또는

나눔손글씨펜이 재미를 더해준다

01. 부드러운 주제




03. Type Face

나눔고딕 EB 나눔고딕 LIGHT

핵심

나머지

제목

본문

다음 SB 다음 REGULAR

02. 핵심과 나머지, 제목과 본문




03. Type Face

03. 앱의 성격과 사용자에 따라 목소리를 만들어보자

그녀의 자전거가 내 가슴 속으로 들어왔다.

침대는 가구가 아닙니다. 과학입니다.

부자되세요.

막 입어도 일년 된 듯한 옷,십 년을 입어도 일 년된 듯한 옷

고객이 우선이다.


2013 UI Trends 02. Trend Report


Laser focus

Context sensitive navigation

Collapsed content

Content chunking

Long pages

100% BG image

Responsive Web Design

Fixed-Position Navigation

Circular design elements

jQuery/CSS3/HTML5 Interaction

Ribbons & Banner & Badge

Design Style

Custom Font Faces

Usability

Retro style

Content

Simple landing pages Grid System

Tile (brick) Layout

Infographics

CSS Transparency

Minimalism Skeuomorphism

UI Design Trend Map



Authentically Digital, Flat UI

Microsoft 가 주도하는 심플하고 디지털 환경에 최적화된 UI 디자인 스타일 (일명 Metro UI) 디지털 환경에 익숙해진 사용자의 멘탈 모델을 고려하여 정보 및 기능을 쉽게 표현/그룹핑 할 수 있는 기하학적인 메타포를 적절히 활용

1

Minimalism

www.corporateriskwatch.com

www.designworkplan.com

www.informationarchitects.jp

http://www.corporateriskwatch.com/

http://www.designworkplan.com/

http://www.informationarchitects.jp/



Real Metaphor

Apple Design Philosophy 가 반영된 UI 스타일 아날로그 메타포의 시각 요소나 그 밖의 요소 (Transition, sound)등을 UI에 적용하여 익숙한 경험 제공

Skeuomorphism 2



For Seamless Experience

HTML 5와 CSS 3를 기반으로 구현되는 최근 Web page 구현의 핵심 Trend. 모든 종류의 브라우저, 플랫폼에서 사이즈와 사용환경을 막론하고 동일한 컨텐츠 경험을 제공하기 위한 웹기술 기반 디자인 트렌드

Responsive Design

http://mediaqueri.es/

http://sk.co.kr/mainpage.aspx#

http://www.cj.co.kr/

2

http://mediaqueri.es/

http://sk.co.kr/mainpage.aspx

http://www.cj.co.kr/



Back to Basics

Responsive web이 UI 구현의 핵심 트렌드 이제 그리드 원칙을 준수하지 않는 컨텐츠 레이아웃은 사용자에게 불쾌감

Grid System

http://goldengridsystem.com/

http://bohemianalps.com/tools/grid/

4

http://goldengridsystem.com/

http://bohemianalps.com/tools/grid/



Dynamic grid layout

정보 단위를 하나의 시각 단위로 디자인 하게 되면 정보 갱신 및 열람, 정렬, 검색 등이 용이하며 특히 제스처 기반으로 작동하는 모바일에서 유용

Tile (brick) Layout

http://pinterest.com/

http://wedpics.com/

5

http://pinterest.com/

http://wedpics.com/



Changes of intros

철저한 사용자 분석을 통해 실제 사용하는 최소한의 기능과 최소한의 컨텐츠 만 배치한 랜딩 페이지

Simple landing pages

http://www.hongkiat.com/blog/beautiful-landing-pages/

6

http://www.hongkiat.com/blog/beautiful-landing-pages/



Instant behavior

사용자가 수행해야 할 Task를 혼동하지 않도록 직관적으로 인식시키는 UI 컨트롤

Laser focus 7



Context Cognition

사용자의 사용 맥락을 기반으로 활성화/비활성화가 자동으로 설정되 사용자가 해당 맥락에서 필요로 하는 기능을 적절하게 표시하는 맥락 기반 User Interface

Context sensitive navigation 8



Responsive disclosure

단계별로 정보의 구조를 노출하면서 사용자가 자연스럽게 정보 구조를 인지하고 현재 수행할 수 있는 업무를 파악할 수 있게 하는 UI 컨트롤

Collapsed content

http://webcloud.se/jQuery-Collapse/

9

http://webcloud.se/jQuery-Collapse/



고정영역 네비게이션

손쉬운 Navigation을 위해 Navigation 관련 구성요소를 페이지 이동이나 Scroll 여부와 관계 없이 고정적으로 표시 하는 UI 컨트롤 유형. Floating 방식 Navigation이나 Remote UI 등

Fixed-Position Navigation 10



스크롤이 훨씬 편하고 유용할 때가 있습니다. 아주 많이..

잘 분류된 컨텐츠를 한 페이지에 길게 배치하여 스크롤 기반으로 브라우징 할 수 있게 컨텐츠를 배치하는 것이 사용자에게 훨씬 긍정적인 경험을 제공. 특히 모바일.

Long pages 11


2013 UI Style Trends 02. Trend Report



Unique Object Metaphor

사각형의 비주얼 메타포에서 벗어나 원형의 메타포를 활용하는 디자인 스타일. 일상적인 디자인이 아니라 보다 유니크 한 느낌을 주고 싶을 때 적절히 활용 가능

Circular design elements 1



최근 Modern Web 이라고 통칭하는 디자인 트렌드에서 자주 사용하는 비주얼 메타포 유형.

Ribbons & Banner & Badge Unique Object Metaphor 2



Large photo backgrounds

비주얼을 중시하는 브랜드나 서비스의 경우 브라우저를 가득 채우는 High Quality의 이미지를 활용

100% BG image 3



Simple하고 Futuristic 한 스타일에 지쳤을 때

애플의 스큐어몰피즘과는 다르게 레트로 한 이미지 자체를 유니크 한 감성을 표현하기 위한 디자인 요소로 활용하는 스타

Retro style

www.sensisoft.com

www.custom-design.ch www.level2d.com

www.targetscope.com

Design Style 4

http://www.sensisoft.com/

http://www.custom-design.ch/

http://www.level2d.com/

http://www.targetscope.com/



폰트로 표현하는 Identity

Adobe typekit이나 구글 웹 폰트 등 유니크한 웹폰트 수급이 원활해 짐에 따라 폰트로 기업 및 서비스 아이덴티티를 적극적으로 표현하거나 폰트 자체를 비주얼 메타포로 활용

Custom Font Faces 1



데이터를 아름답게 표현하는 방법

기존에는 수치를 기반으로 한 대량의 정보를 한 화면에 표시해서 일정한 해독 능력을 갖춘 사용자들에게 ‘전달’만 했다면 Infographic를 통해 대량의 정보/컨텐츠를 효과적으로 표현하는 방법

Infographics 1



세련된 컨텐츠 표현 기법

약간의 퍼블리싱 기술만으로 굉장히 세련되면서 레이어 개념으로 배치되는 컨텐츠 디자인

CSS Transparency

http://tympanus.net/codrops/2012/11/26/using-transparency-in-web-design-dos-and-donts/

5





Minimalism 표현 형태

Flat Design 6

Flat UI Inspirations

Flat UI Guide

http://www.peacelovedesign.net/blog/2013/04/18/9-fresh-flat-web-mobile-ui-design-inspirations/

http://designmodo.com/flat-design-colors/



Minimalism 표현 형태

In a few word 6


2013 Mobile GUI 02. Trend Report

http://msd2013.jylee6977.com/tc Flat Interface


FOR NEXT WEEK

1. Style Guideline 2. Check Site for Resources

[Msd11]mobile interfacedesign03

Documents

Transcript of [Msd11]mobile interfacedesign03