Image credit: Design Like a Pro

A Review of Design Like a Pro

Design Like a Pro Review

This is a review of Mark Miller’s Course (Design Like a Pro)

Interesting Points of the Course

  • An interesting fact of the course is how much proximity plays a role with UI.
  • If elements of a UI are placed in close proximity, users typically assume they are related

So if you should group related items in a UI in close proximity

Contrast

  • Contrast is also important in UI
    • For example if you hover a button the contrast should be small not large

Proximity

  • In this picture notice that the label of the Gas Type is inside the button
  • Mark Miller explains that having the element in close proximity to the action is key
  • Notice that in this picture the proximity and the layout of the buttons in the elevator are confusing

Borders

  • Another interesting point made is about Borders
    • Borders Contrast should be low and should be thin
  • Notice that in this table borders are rubbing up next to each other
  • The lines are more prominent and the actual data is hard to extract
  • In this table the borders are thin and the table is much easier to read

Controls

  • Another point of the course talks about controls
  • Users don’t read tons of text if you have to present information then consider a tooltip

Text

  • There was a section detailing how text can confuse dyslexic readers
  • This really goes hand and hand with modern web accesibility design
  • If you design UIs with users that may have disabilities in mind then general readers benefit

My key takeaways for text:

  1. Don’t use black and white instead use gray and off-white
  2. Use concise sentences instead of long paragraphs.
  3. Increase Padding in between paragraphs.
  4. Left-justify text
  5. Use single spaces after sentences and never double space

Information Dimension

Serial (through time) Parallel (in space)
Takes longer to consume Evaluated instantly
Comparisons are hard Comparisons are easy
Burden on recall No burden on recall
Pacing Issues Viewer controls Pace
Harder to Understand Easier to Understand

As you can see from the table above it is easier to present information in parallel over serial to users

Graphic Language

  • Match known physical items to make symbols easier to read
  • Graphic Language should be independent of color
  • There should be consistency of colors

Notice here in both the simplicity of the icons but the clarity in their message

  • You can clearly tell each sport in each graphic

What was surprising

  • I was surprised to learn that simplicity of design seems to be the hardest thing to get right
  • Fancy effects don’t provide as much value as clarity of intent
  • Accomodating to users with disabilities improves overall design
  • Proximity of elements natural groups elements so you have to get the right proximity

What Mark Miller did well

  • Mark Miller know how to clearly explain key design principles that help you build great UIs
  • The course is rich with imagery and clear examples on what constitutes good UIs
  • There is also a great transition from the Science of Great UI course
    • Incremental steps on each course help facilitate key design points

What could have been done better

  • There wasn’t any mention of using Sketch app and instead Adobe Creative Cloud was heavily used
  • It would be great to mention tools like Sketch and Omnigraffle
  • More opinions on using design tools would be nice although it might detract from the course intent

Overall this course is wonderfully crafted, job well done

Purchase the Course

Go to Design Like a Pro to purchase and watch this great course.

comments powered by Disqus