Windows Phone Design Maria Nasioti, UX/UI Designer & Developer Twitter: @Maria_Nas Tuesday, June 18, 13
Windows phone 8 Design
May 12, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Windows Phone Design
Maria Nasioti, UX/UI Designer & DeveloperTwitter: @Maria_Nas
Tuesday, June 18, 13
Tuesday, June 18, 13
VisualsLayout
Windows Phone CompositionMotion & Transitions
Tuesday, June 18, 13
Visuals
Tuesday, June 18, 13
VISUALS
Themes
Tuesday, June 18, 13
VISUALS
Accent Brushes
Tuesday, June 18, 13
VISUALS
Colors
Tuesday, June 18, 13
VISUALS
Themed Controls & Tiles
Tuesday, June 18, 13
VISUALS
Theme HowtoAlways check your apps in both dark and light theme.If you utilizing system theme’s, use a basic color scheme.Don’t be afraid to use accent brushes. They are simple way to make your app feel native to the device.
Tuesday, June 18, 13
VISUALS
IconographySome actions are difficult to clearly convey with text or images. In these cases, use simple geometric icons instead of images or extra text.
Tuesday, June 18, 13
VISUALS
Iconography
Tuesday, June 18, 13
VISUALS
Imagery
Tuesday, June 18, 13
VISUALS
Icons & Imagery HowtoGo simple and geometric with icons.Don’t be afraid to go big.Layer your imagery with content.Add noise to gradient to prevent “banding”.
Tuesday, June 18, 13
VISUALS
Fonts
Tuesday, June 18, 13
VISUALS
Custom FontsUse custom fonts to showcase your own BRAND in a very personal way.Find the typography that best reflects your app’s personality.
Tuesday, June 18, 13
VISUALS
Fonts HowtoAvoid using font sizes that are smaller than 15pt in size.If using colorized fonts, use high contrast colors at smaller point sizes to enhance readability.Since Segoe is such an integral part of the UI experience, use alternative fonts sparingly in applications.
Tuesday, June 18, 13
VISUALS
Globalizations & LocalizationBi-Directional Layouts. Right to Left.East Asian vertical text. Japan style.Localization.
Tuesday, June 18, 13
Layout
Tuesday, June 18, 13
LAYOUT
ResolutionsSupport 3 resolutions.
Tuesday, June 18, 13
LAYOUT
Graphic Resolution HowtoTo display a splash screen for all resolutions, use a single image that is 768x1280.If you can’t use a graphic for each resolution, use a graphic for the highest resolution.
Tuesday, June 18, 13
LAYOUT
The GridThe grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to personal style. But one must learn who to use the grid; it’s an that requires practice.
Josef Muller-Brockmann
Tuesday, June 18, 13
LAYOUT
The Grid
Tuesday, June 18, 13
LAYOUT
The Grid
Tuesday, June 18, 13
LAYOUT
The Grid
Tuesday, June 18, 13
Use Grid everywhere. Tiles, Panorama, custom pages, lists etc
Tuesday, June 18, 13
LAYOUT
The Grid
Tuesday, June 18, 13
LAYOUT
The Grid
Tuesday, June 18, 13
LAYOUT
The Grid HowtoUse order to create the perception of simplicity.Establish a rhythm and cadence with the grid.Then break it to make the content pop.
Tuesday, June 18, 13
LAYOUT
Pages
Tuesday, June 18, 13
LAYOUT
Panorama
Tuesday, June 18, 13
LAYOUT
Panorama
Tuesday, June 18, 13
LAYOUT
Panorama
Tuesday, June 18, 13
LAYOUT
Panorama HowtoExpansive or overviewTop Level. Nothing than data and Navigation.Use a minimized AppBar, portrait only.5 Panels or less.Returning users should be taken back to the pane where they left off.
Tuesday, June 18, 13
LAYOUT
Panorama Examples
Tuesday, June 18, 13
LAYOUT
Pivots
Tuesday, June 18, 13
LAYOUT
Pivots HowtoPivots control should be used only to display items or data of similar typeUse a full AppBar7 Panels or less.Never place a pivot control inside to another pivot control.Never place a pivot control inside a panorama control.Don’t use scroll elements like maps or bar inside a pivot control.Limit pivot’s header text to a max of one or two words.Never use an edit control within a pivot.
Tuesday, June 18, 13
LAYOUT
Pivots Examples
Tuesday, June 18, 13
LAYOUT
Basic Page
Tuesday, June 18, 13
LAYOUT
AppBar
Tuesday, June 18, 13
LAYOUT
AppBar
Tuesday, June 18, 13
LAYOUT
Structure
Tuesday, June 18, 13
Motions & Transitions
Tuesday, June 18, 13
MOTION
Why Motion?Motions delights the users.Motions adds more interactions.Motion gives the impression of enhanced performance.Motion adds personality.Motion adds consistency.Motion adds elegance.
Tuesday, June 18, 13
MOTION
It’s like a movieAn action movie isn’t 100% action.Highs (Defining moments)Lows (Consistent, not distracting but still delightful)How is it edited for the biggest impact.
Tuesday, June 18, 13
MOTION
TransitionsTriggered by user action.Transitions provide a mental breadcrumb for the user as they navigate the UI.
Tuesday, June 18, 13
MOTION
RulesEstablish physics.Sense of how gravity works on the device that the user can relate to.Gravity is always the same.Transitions are directional.Enter, exit, forward, backward.Create the medal model of where items live.If it didn’t change don’t move it.
Tuesday, June 18, 13
MOTION
Motions HowToIt doesn’t matter how long an animation takes, it matters how long you think it takes.Under 500ms is instant.Use easing to our advantage.Not what you thought you saw.For time-consuming processes, provide feedback.
Tuesday, June 18, 13
Examples.
Tuesday, June 18, 13
Tuesday, June 18, 13
Tuesday, June 18, 13
Tuesday, June 18, 13
Thank you! So say we all.Twitter: @Maria_Nas
Tuesday, June 18, 13
Related Documents
