2. Dee Sadler
Adobe Community Professional
Adobe Certified Expert / Instructor
Adobe Freelancer Program
Conference Organizer - D2WC.com
UI Strategist/Android/HTML/CSS geek for Sprint
Total Training and Adobe TV (CS6) video tuts
Hybrid
@DeeSadler
Tuesday, October 2, 12
3. Topics
Understanding how the user uses their devices
Rules of UX - Human Factor guidelines,
Orientation etc.
Sizes - from fingers to pixels
Prototyping
Tuesday, October 2, 12
16. Mobile Design Life Cycle
This isn’t your dad’s website
1.Assess current user requirements
2.Understand your users
3.Prioritize mobile features
4.Design with mobile considerations
5.Prototype / preview / refine / test
Tuesday, October 2, 12
22. Native
Don’t mimic other platforms, stay true to the OS
Don’t try and make a new interaction from one
that already exists and keep it consistent per OS
SAMPLE OF IOS, ANDROID AND
WINDOWS UI
Tuesday, October 2, 12
26. Think top down
Where is their hand going to be?
Make usage easy and logical
Tuesday, October 2, 12
27. Think top down
Where is their hand going to be?
Make usage easy and logical
Design using physicality and realism
Tuesday, October 2, 12
28. Think top down
Where is their hand going to be?
Make usage easy and logical
Design using physicality and realism
Always work at a higher resolution
than you need.
Tuesday, October 2, 12
29. Think top down
Where is their hand going to be?
Make usage easy and logical
Design using physicality and realism
Always work at a higher resolution
than you need.
Be aware of orientation
Tuesday, October 2, 12
30. Think top down
Where is their hand going to be?
Make usage easy and logical
Design using physicality and realism
Always work at a higher resolution
than you need.
Be aware of orientation
Add detail and depth
Tuesday, October 2, 12
31. Think top down
Where is their hand going to be?
Make usage easy and logical
Design using physicality and realism
Always work at a higher resolution
than you need.
Be aware of orientation
Add detail and depth
Typography is just as important
Tuesday, October 2, 12
32. Think top down
Where is their hand going to be?
Make usage easy and logical
Design using physicality and realism
Always work at a higher resolution
than you need.
Be aware of orientation
Add detail and depth
Typography is just as important
Think twice before you design
a standard control!
Tuesday, October 2, 12
33. Think top down
Where is their hand going to be?
Make usage easy and logical
Design using physicality and realism
Always work at a higher resolution
than you need.
Be aware of orientation
Add detail and depth
Typography is just as important
Think twice before you design
a standard control!
Create a great brand experience
Tuesday, October 2, 12
34. 4 step process
Designing for multiple screens
Define device groups by grouping screens with
similar widths together resulting in a manageable
number of groups,
Create a default reference design that will adapt
to smaller and larger screens,
Define rules for content and design adaptation
for it to display well and
Opt for Web standards and a flexible layout.
Tuesday, October 2, 12
35. What else
Simplify navigation
Be succinct with the content
Minimize user input
Form efficiency
Can they use it offline?
Don’t use high res images for everything
Don’t forget to test!
Tuesday, October 2, 12
39. Android - trouble x 10
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
Tuesday, October 2, 12
40. Pixel Density/Screen size
To get the ppi, you first need to find out how many
pixels there are diagonally.
This is the square root of each side squared, added
together (from a2 + b2 = c2)
Android densities: low, medium, high and extra high
Density-independent pixel (dp)
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in
a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline
density assumed by the system for a "medium" density screen.At runtime, the system transparently handles
any scaling of the dp units, as necessary, based on the actual density of the screen in use.The conversion of
dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5
physical pixels.You should always use dp units when defining your application's UI, to ensure proper display
of your UI on screens with different densities.
http://developer.android.com/guide/practices/screens_support.html
Tuesday, October 2, 12
42. HTML5 Image issues
Which method to use? Scale. replace images at
each break point, what?
Start with small and then serve up larger at each
break point?
Tuesday, October 2, 12
45. Pros
Mimics other media syntax like <video> and
<audio>, which makes sense.
The fallback makes it backwards-compatible with
browsers that don't support it, which is extremely
important. We can't have images that just don't
work in older browsers.
Gives us web authors the control to show exactly
what we want under situations we specify.
Tuesday, October 2, 12
46. Cons
It's a whole lot more complicated than <img>.
Harder to teach, harder to learn, more code to
write. Easy to screw up.
Muddies the water of CSS and HTML a bit, by
bringing the media query syntax into HTML.
Similar issues to why inline styles are bad. Makes
future updates more difficult. Not a reusable
abstraction.
Tuesday, October 2, 12
52. Designing
Use vector shapes where possible
Start with large artboards
Get rid of unnecessary metadata on images
Decide which format of images works best for the
images. Are they opaque, transparent, etc.
If Android, keep consistent naming conventions
for different density images
Tuesday, October 2, 12