[Msd11]mobile interfacedesign03
Transcript of [Msd11]mobile interfacedesign03
http://msd2013.jylee6977.com/tc
KGIT 2013 SPRING CLASS @ JYLEE
Mobile Service Design
CLASS11 MOBILE DESIGN 03
Mobile Service Design
http://msd2013.jylee6977.com/tc
App Design Process (after service strategy)
IDEA WIREFRAME DESIGNING
Information Architecture(IA) User Interface Design(UI) Graphic User Interface Design(GUI) Sourcing(XML)
Mobile Service Design
http://msd2013.jylee6977.com/tc
App Design Process (after service strategy)
Information Architecture(IA) User Interface Design(UI) Graphic User Interface Design(GUI) Sourcing(XML)
๋ด์ฉ ์ ์ ๋๊ตฌ์๊ฒ. ์ด๋ค ๋ฐฉ์์ผ๋ก.์ด๋ค ์์ผ๋ก
๋ผ๋ ๋ง๋คํน ์ค์ . ์ท์ ๋ฐฉ์/ํํ ์ค์
์คํจ ์ท์ ์ง๊ฐ ๋ฐ ํจํด ์ ์ ์ท์ ๋ค์ํ ์์ ์ ์
์ ์ฉ ์ ์ฉ๋ ์ท์ ํ ๋๋ก ๊ณต์
์ท์ ๋ง๋๋ ์์
Mobile Service Design
Android UI Overview 00. Android UI
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : UI Principle
01. Home, All Apps, and Recent
Home All Apps Recent
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : UI Principle
02. System Bars
1. Status Bar 2. Navigation Bar 3. Combined Bar
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : UI Principle
03. Notifications
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : UI Principle
04. Common App UI
1. Main Action Bar 2. View Control 3. Content Area 4. Split Action Bar
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : UI Principle
04. Common App UI
1. Main Action Bar 2. View Control 3. Content Area 4. Split Action Bar
Mobile Service Design
Android GUI Style 00. Android UI
Mobile Service Design
http://msd2013.jylee6977.com/tc
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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
03. Touch Feedback
States
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
03. Touch Feedback
Communication Boundaries
Gesture๋ก ์ธํ ๊ฒฐ๊ณผ๋ฅผ ํฌ๋ฏธํ๊ฒ ํ์ํ์ฌ, ์ฌ์ฉ์ ์ ๋ ฅ์ ๋ํ ๊ฒฐ๊ณผ ์์ํ
๋ ์ด์์ ์ค์ด๋ ๋ฐ์ดํฐ๊ฐ ์์๋ (์ต์ข /์ต์๋จ ๋ฆฌ์คํธ) ๋ฐ์ด๋๋ฆฌ๋ฅผ ํํํจ์ผ๋ก์จ, ๋์ ์์์ ํํ
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
04. Metrics and Grid
Space Consideration
Gesture๋ก ์ธํ ๊ฒฐ๊ณผ๋ฅผ ํฌ๋ฏธํ๊ฒ ํ์ํ์ฌ, ์ฌ์ฉ์ ์ ๋ ฅ์ ๋ํ ๊ฒฐ๊ณผ ์์ํ
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
04. Metrics and Grid
Space Consideration
API Guildeline : http://developer.android.com/training/basics/supporting-devices/platforms.html
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
04. Metrics and Grid
Space Consideration
API Guildeline : http://developer.android.com/guide/practices/screens_support.html
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
04. Metrics and Grid
Space Consideration
API Guildeline : http://developer.android.com/guide/practices/screens_support.html
โข 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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
04. Metrics and Grid
Density Independence
API Guildeline : http://developer.android.com/guide/practices/screens_support.html
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
04. Metrics and Grid
Density Independence
API Guildeline : http://developer.android.com/guide/practices/screens_support.html
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
04. Metrics and Grid
48dp Rhyme
Spacing between each UI element is
8dp.
** Touchable UI Component = 7-10mm (48dp)
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
04. Metrics and Grid
48dp Rhyme
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
05. Typography
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
05. Typography
Type Color
Type Scale
textColorPrimary / textColorSecondary.
textColorPrimaryInverse /textColorSecondaryInverse.
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
06. Color
#33B5E5 #AA66CC #99CC00 #FFBB33 #FF4444
Android Color
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
07. Iconogrphy
Size & Scale Small icons should be 16x16dp.
Proportion Full asset, 16x16 dp Optical square, 12x12 dp
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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
07. Iconogrphy
Size & Scale Notification icons must be 24x24 dp
Proportion Full asset, 24x24 dp Optical square, 22x22 dp
Style Keep the style flat and simple, using the same single, visual metaphor as your launcher icon
Notification Icons
Color
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
08. Writing Style
Mobile Service Design
http://msd2013.jylee6977.com/tc
Android UI : GUI Style
08. Writing Style
Mobile Service Design
How to design? 01. Letโs Do Interface Design
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : How to Design?
01. Design Tools
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : How to Design?
02. Icon Design
Logo<App Icon<Resources
Logo Icon Resource
๋งค์ฐ ๋จ์ํจ ๋จ์ํจ ๋ณต์กํจ
๋จ๋ ์ฌ์ฉ๊ฐ๋ฅ App์ ํน์ง์ ๋ํ๋ ์กฐํฉํ์ฌ ์ฌ์ฉ
๊ฐํ ์ธ์ ์๋ณ๋ก ์ด์ฉ ์ฌ์ฉํ๊ธฐ์ ๋ถํธํ์ง ์์
์ ๋ณด๋์ด ์ ์ ์ด๋ ์ ๋ณด์ ์ ๋ณด๋ฅผ ๋ด์ ์ ๋ณด๋ฅผ ๋ด๋ ๊ฒฝ์ฐ ๋ง์
ํํ์ ์ ์ฝ์ด ๋ง์ ์ฌ์ด์ฆ์ ์ ์ฝ์ด ๋ง์ ์ ์ฝ ๊ฑฐ์ ์์
ํญ ๋์ ์ฉ๋ Launcher, Google Play App ๋ด๋ถ์์๋ง ์ฌ์ฉ
๊ฐ์น๋ฅผ ์ง๋ App์ ๊ฐ์น์ ์์กด App์์์๋ง ๊ฐ์น
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : How to Design?
02. Icon Design
2, 3๊ฐ์ง ์์ผ๋ก ๋ถ์๊ธฐ ๊ฒฐ์
๋์์ ์์๋ก ๋ถ๋ฆฌํ์ฌ ๋ณด์
๊ธฐ๋ฅ์ ์์ฌํ๋ ์์ด์ฝ์ ํจ๊ณผ
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : How to Design?
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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : How to Design?
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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : How to Design?
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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : How to Design?
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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : How to Design?
02. Icon Design
http://www.iconspedia.com/search/android/ http://ntt.cc/2010/08/04/350-fresh-and-elegant-free-icons-for-android.html
Mobile Service Design
Design Style Guide 01. Letโs Do Interface Design
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : Style Guide
01. Color Scheme
Online Color Palette Generator
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : Style Guide
01. Color Scheme
Point Color ๋ก๊ณ , ๋ฆฌ์คํธ ๋ฑ์ ๋ค์ด๊ฐ๋ ์์ด์ฝ, ์์ด์ฝ๊ณผ ํจ๊ป ์ด์ฉ๋๋ ํ ์คํธ๋ฑ์ ์ง๊ด์ ์ผ๋ก ๋์ ๋๋ ๊ณณ์ ์ฌ์ฉ๋๋ ์ปฌ๋ฌ
Sub Color ์ฌ๋ฌ ์ปจํธ๋กค(๋ฒํผ, ๋ฆฌ์คํธ, ํ ์คํธ)๋ค์ ๋ฐฐ๊ฒฝ์ผ๋ก ์ด์ฉ๋๊ฑฐ๋ ๋ฉ์ธ์ปฌ๋ฌ๋ฅผ ๋๋ณด์ด๊ฒ ๋ง๋๋ ๋ถ์์ ์ธ ์ปฌ๋ฌ
Main Color : ์์ด์ฝ, ์คํ๋์ ์ด๋ฏธ์ง, ์๋จ ํ์ดํ(ํน์ ์ค์ฌ์ด ๋๋ ํญ๋ฐ)๋ก ์ด์ฉ๋๋ ์ดํ๋ฆฌ์ผ์ด์ ์ ๋ํํ๋ ์ปฌ๋ฌ
Color Use
๊ฒฝ์พํ๊ณ ์ฐ๋ปํจ
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : Style Guide
01. Color Scheme
Color Use
์คํํจ
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : Style Guide
01. Color Scheme
Color Use
์ง๊ด์ /์ ์ฐํจ
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : Style Guide
02. Texture and Pattern
Pattern Libraries
Do it yourself
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : Style Guide
02. Texture and Pattern
Pattern Generator
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : Style Guide
02. Texture and Pattern
Texture Library
Lost and Taken Graphic River
wegraphics Free textures for layers Digital Camera World
Texture Gen FBrush
Graphic Mania
Shizoo Texture Palace Mayang
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : Style Guide
03. Type Face
์์ฒด ํ์ฉ๋ฐฉ์
1. Android ๊ธฐ๋ณธ ์์ฒด ํ์ฉ
2. ๋ฌด๋ฃ Font Embed
3. ์ด๋ฏธ์ง๋ก ํ์ฉ
์์ฒด ๊ธฐ๋ณธ ์์
Title์ฒด
Sub Title ์ฒด
๋ณธ๋ฌธ์ฒด
์ธ์ฉ/๊ฐ์กฐ/๊ธฐํ ์ฒด
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : Style Guide
03. Type Face
์์ฒด ํ์ฉ๋ฐฉ์
1. Android ๊ธฐ๋ณธ ์์ฒด ํ์ฉ
2. ๋ฌด๋ฃ Font Embed
3. ์ด๋ฏธ์ง๋ก ํ์ฉ
Droid sans Droid serif Droid mono
๋ค์์ฒด : ๋๋์ฒด : ๋ซผ๋น์ฐ์ค์ฒด
์์ธ์ฒด : ๋ฐ๋ฅธ๋์/๋ฐํ์ฒด
Font Club: Cute Font
์ค๊ณ ๋/๋ช ์กฐ ์๋ฆฌ์ฆ
์ฐ๋๊ณ ๋ ์๋ฆฌ์ฆ
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : Style Guide
03. Type Face
๋ถ๋๋ฌ์ด ์ฃผ์ ์๋ ์์ธ ํ๊ฐ์ฒด
๋๋๋ช ์กฐ ๊ฐ์ ๋ช ์กฐ์ฒด๊ฐ ์ข๊ณ ,
๋ํํ ๋ด์ฉ์๋ ๋๋์๊ธ์จ๋ถ ๋๋
๋๋์๊ธ์จํ์ด ์ฌ๋ฏธ๋ฅผ ๋ํด์ค๋ค
01. ๋ถ๋๋ฌ์ด ์ฃผ์
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : Style Guide
03. Type Face
๋๋๊ณ ๋ EB ๋๋๊ณ ๋ LIGHT
ํต์ฌ
๋๋จธ์ง
์ ๋ชฉ
๋ณธ๋ฌธ
๋ค์ SB ๋ค์ REGULAR
02. ํต์ฌ๊ณผ ๋๋จธ์ง, ์ ๋ชฉ๊ณผ ๋ณธ๋ฌธ
Mobile Service Design
http://msd2013.jylee6977.com/tc
Letโs Design : Style Guide
03. Type Face
03. ์ฑ์ ์ฑ๊ฒฉ๊ณผ ์ฌ์ฉ์์ ๋ฐ๋ผ ๋ชฉ์๋ฆฌ๋ฅผ ๋ง๋ค์ด๋ณด์
๊ทธ๋ ์ ์์ ๊ฑฐ๊ฐ ๋ด ๊ฐ์ด ์์ผ๋ก ๋ค์ด์๋ค.
์นจ๋๋ ๊ฐ๊ตฌ๊ฐ ์๋๋๋ค. ๊ณผํ์ ๋๋ค.
๋ถ์๋์ธ์.
๋ง ์ ์ด๋ ์ผ๋ ๋ ๋ฏํ ์ท,์ญ ๋ ์ ์ ์ด๋ ์ผ ๋ ๋ ๋ฏํ ์ท
๊ณ ๊ฐ์ด ์ฐ์ ์ด๋ค.
Mobile Service Design
2013 UI Trends 02. Trend Report
http://msd2013.jylee6977.com/tc
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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Authentically Digital, Flat UI
Microsoft ๊ฐ ์ฃผ๋ํ๋ ์ฌํํ๊ณ ๋์งํธ ํ๊ฒฝ์ ์ต์ ํ๋ UI ๋์์ธ ์คํ์ผ (์ผ๋ช Metro UI) ๋์งํธ ํ๊ฒฝ์ ์ต์ํด์ง ์ฌ์ฉ์์ ๋ฉํ ๋ชจ๋ธ์ ๊ณ ๋ คํ์ฌ ์ ๋ณด ๋ฐ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ํํ/๊ทธ๋ฃนํ ํ ์ ์๋ ๊ธฐํํ์ ์ธ ๋ฉํํฌ๋ฅผ ์ ์ ํ ํ์ฉ
1
Minimalism
www.corporateriskwatch.com
www.designworkplan.com
www.informationarchitects.jp
Mobile Service Design
http://msd2013.jylee6977.com/tc
Real Metaphor
Apple Design Philosophy ๊ฐ ๋ฐ์๋ UI ์คํ์ผ ์๋ ๋ก๊ทธ ๋ฉํํฌ์ ์๊ฐ ์์๋ ๊ทธ ๋ฐ์ ์์ (Transition, sound)๋ฑ์ UI์ ์ ์ฉํ์ฌ ์ต์ํ ๊ฒฝํ ์ ๊ณต
Skeuomorphism 2
Mobile Service Design
http://msd2013.jylee6977.com/tc
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
Mobile Service Design
http://msd2013.jylee6977.com/tc
Back to Basics
Responsive web์ด UI ๊ตฌํ์ ํต์ฌ ํธ๋ ๋ ์ด์ ๊ทธ๋ฆฌ๋ ์์น์ ์ค์ํ์ง ์๋ ์ปจํ ์ธ ๋ ์ด์์์ ์ฌ์ฉ์์๊ฒ ๋ถ์พ๊ฐ
Grid System
http://goldengridsystem.com/
http://bohemianalps.com/tools/grid/
4
Mobile Service Design
http://msd2013.jylee6977.com/tc
Dynamic grid layout
์ ๋ณด ๋จ์๋ฅผ ํ๋์ ์๊ฐ ๋จ์๋ก ๋์์ธ ํ๊ฒ ๋๋ฉด ์ ๋ณด ๊ฐฑ์ ๋ฐ ์ด๋, ์ ๋ ฌ, ๊ฒ์ ๋ฑ์ด ์ฉ์ดํ๋ฉฐ ํนํ ์ ์ค์ฒ ๊ธฐ๋ฐ์ผ๋ก ์๋ํ๋ ๋ชจ๋ฐ์ผ์์ ์ ์ฉ
Tile (brick) Layout
http://pinterest.com/
http://wedpics.com/
5
Mobile Service Design
http://msd2013.jylee6977.com/tc
Changes of intros
์ฒ ์ ํ ์ฌ์ฉ์ ๋ถ์์ ํตํด ์ค์ ์ฌ์ฉํ๋ ์ต์ํ์ ๊ธฐ๋ฅ๊ณผ ์ต์ํ์ ์ปจํ ์ธ ๋ง ๋ฐฐ์นํ ๋๋ฉ ํ์ด์ง
Simple landing pages
http://www.hongkiat.com/blog/beautiful-landing-pages/
6
Mobile Service Design
http://msd2013.jylee6977.com/tc
Instant behavior
์ฌ์ฉ์๊ฐ ์ํํด์ผ ํ Task๋ฅผ ํผ๋ํ์ง ์๋๋ก ์ง๊ด์ ์ผ๋ก ์ธ์์ํค๋ UI ์ปจํธ๋กค
Laser focus 7
Mobile Service Design
http://msd2013.jylee6977.com/tc
Context Cognition
์ฌ์ฉ์์ ์ฌ์ฉ ๋งฅ๋ฝ์ ๊ธฐ๋ฐ์ผ๋ก ํ์ฑํ/๋นํ์ฑํ๊ฐ ์๋์ผ๋ก ์ค์ ๋ ์ฌ์ฉ์๊ฐ ํด๋น ๋งฅ๋ฝ์์ ํ์๋ก ํ๋ ๊ธฐ๋ฅ์ ์ ์ ํ๊ฒ ํ์ํ๋ ๋งฅ๋ฝ ๊ธฐ๋ฐ User Interface
Context sensitive navigation 8
Mobile Service Design
http://msd2013.jylee6977.com/tc
Responsive disclosure
๋จ๊ณ๋ณ๋ก ์ ๋ณด์ ๊ตฌ์กฐ๋ฅผ ๋ ธ์ถํ๋ฉด์ ์ฌ์ฉ์๊ฐ ์์ฐ์ค๋ฝ๊ฒ ์ ๋ณด ๊ตฌ์กฐ๋ฅผ ์ธ์งํ๊ณ ํ์ฌ ์ํํ ์ ์๋ ์ ๋ฌด๋ฅผ ํ์ ํ ์ ์๊ฒ ํ๋ UI ์ปจํธ๋กค
Collapsed content
http://webcloud.se/jQuery-Collapse/
9
Mobile Service Design
http://msd2013.jylee6977.com/tc
๊ณ ์ ์์ญ ๋ค๋น๊ฒ์ด์
์์ฌ์ด Navigation์ ์ํด Navigation ๊ด๋ จ ๊ตฌ์ฑ์์๋ฅผ ํ์ด์ง ์ด๋์ด๋ Scroll ์ฌ๋ถ์ ๊ด๊ณ ์์ด ๊ณ ์ ์ ์ผ๋ก ํ์ ํ๋ UI ์ปจํธ๋กค ์ ํ. Floating ๋ฐฉ์ Navigation์ด๋ Remote UI ๋ฑ
Fixed-Position Navigation 10
Mobile Service Design
http://msd2013.jylee6977.com/tc
์คํฌ๋กค์ด ํจ์ฌ ํธํ๊ณ ์ ์ฉํ ๋๊ฐ ์์ต๋๋ค. ์์ฃผ ๋ง์ด..
์ ๋ถ๋ฅ๋ ์ปจํ ์ธ ๋ฅผ ํ ํ์ด์ง์ ๊ธธ๊ฒ ๋ฐฐ์นํ์ฌ ์คํฌ๋กค ๊ธฐ๋ฐ์ผ๋ก ๋ธ๋ผ์ฐ์ง ํ ์ ์๊ฒ ์ปจํ ์ธ ๋ฅผ ๋ฐฐ์นํ๋ ๊ฒ์ด ์ฌ์ฉ์์๊ฒ ํจ์ฌ ๊ธ์ ์ ์ธ ๊ฒฝํ์ ์ ๊ณต. ํนํ ๋ชจ๋ฐ์ผ.
Long pages 11
Mobile Service Design
2013 UI Style Trends 02. Trend Report
Mobile Service Design
http://msd2013.jylee6977.com/tc
Unique Object Metaphor
์ฌ๊ฐํ์ ๋น์ฃผ์ผ ๋ฉํํฌ์์ ๋ฒ์ด๋ ์ํ์ ๋ฉํํฌ๋ฅผ ํ์ฉํ๋ ๋์์ธ ์คํ์ผ. ์ผ์์ ์ธ ๋์์ธ์ด ์๋๋ผ ๋ณด๋ค ์ ๋ํฌ ํ ๋๋์ ์ฃผ๊ณ ์ถ์ ๋ ์ ์ ํ ํ์ฉ ๊ฐ๋ฅ
Circular design elements 1
Mobile Service Design
http://msd2013.jylee6977.com/tc
์ต๊ทผ Modern Web ์ด๋ผ๊ณ ํต์นญํ๋ ๋์์ธ ํธ๋ ๋์์ ์์ฃผ ์ฌ์ฉํ๋ ๋น์ฃผ์ผ ๋ฉํํฌ ์ ํ.
Ribbons & Banner & Badge Unique Object Metaphor 2
Mobile Service Design
http://msd2013.jylee6977.com/tc
Large photo backgrounds
๋น์ฃผ์ผ์ ์ค์ํ๋ ๋ธ๋๋๋ ์๋น์ค์ ๊ฒฝ์ฐ ๋ธ๋ผ์ฐ์ ๋ฅผ ๊ฐ๋ ์ฑ์ฐ๋ High Quality์ ์ด๋ฏธ์ง๋ฅผ ํ์ฉ
100% BG image 3
Mobile Service Design
http://msd2013.jylee6977.com/tc
Simpleํ๊ณ Futuristic ํ ์คํ์ผ์ ์ง์ณค์ ๋
์ ํ์ ์คํ์ด๋ชฐํผ์ฆ๊ณผ๋ ๋ค๋ฅด๊ฒ ๋ ํธ๋ก ํ ์ด๋ฏธ์ง ์์ฒด๋ฅผ ์ ๋ํฌ ํ ๊ฐ์ฑ์ ํํํ๊ธฐ ์ํ ๋์์ธ ์์๋ก ํ์ฉํ๋ ์คํ
Retro style
www.sensisoft.com
www.custom-design.ch www.level2d.com
www.targetscope.com
Design Style 4
Mobile Service Design
http://msd2013.jylee6977.com/tc
ํฐํธ๋ก ํํํ๋ Identity
Adobe typekit์ด๋ ๊ตฌ๊ธ ์น ํฐํธ ๋ฑ ์ ๋ํฌํ ์นํฐํธ ์๊ธ์ด ์ํํด ์ง์ ๋ฐ๋ผ ํฐํธ๋ก ๊ธฐ์ ๋ฐ ์๋น์ค ์์ด๋ดํฐํฐ๋ฅผ ์ ๊ทน์ ์ผ๋ก ํํํ๊ฑฐ๋ ํฐํธ ์์ฒด๋ฅผ ๋น์ฃผ์ผ ๋ฉํํฌ๋ก ํ์ฉ
Custom Font Faces 1
Mobile Service Design
http://msd2013.jylee6977.com/tc
๋ฐ์ดํฐ๋ฅผ ์๋ฆ๋ต๊ฒ ํํํ๋ ๋ฐฉ๋ฒ
๊ธฐ์กด์๋ ์์น๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ๋๋์ ์ ๋ณด๋ฅผ ํ ํ๋ฉด์ ํ์ํด์ ์ผ์ ํ ํด๋ ๋ฅ๋ ฅ์ ๊ฐ์ถ ์ฌ์ฉ์๋ค์๊ฒ โ์ ๋ฌโ๋ง ํ๋ค๋ฉด Infographic๋ฅผ ํตํด ๋๋์ ์ ๋ณด/์ปจํ ์ธ ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ํํํ๋ ๋ฐฉ๋ฒ
Infographics 1
Mobile Service Design
http://msd2013.jylee6977.com/tc
์ธ๋ จ๋ ์ปจํ ์ธ ํํ ๊ธฐ๋ฒ
์ฝ๊ฐ์ ํผ๋ธ๋ฆฌ์ฑ ๊ธฐ์ ๋ง์ผ๋ก ๊ต์ฅํ ์ธ๋ จ๋๋ฉด์ ๋ ์ด์ด ๊ฐ๋ ์ผ๋ก ๋ฐฐ์น๋๋ ์ปจํ ์ธ ๋์์ธ
CSS Transparency
http://tympanus.net/codrops/2012/11/26/using-transparency-in-web-design-dos-and-donts/
5
Mobile Service Design
http://msd2013.jylee6977.com/tc
Minimalism ํํ ํํ
Flat Design 6
Flat UI Inspirations
Flat UI Guide
Mobile Service Design
http://msd2013.jylee6977.com/tc
Minimalism ํํ ํํ
In a few word 6
Mobile Service Design
2013 Mobile GUI 02. Trend Report
http://msd2013.jylee6977.com/tc Flat Interface
http://msd2013.jylee6977.com/tc
Mobile Service Design
FOR NEXT WEEK
1. Style Guideline 2. Check Site for Resources