Atoms, Modules And Other Fancy Particles - Part II

Atoms, Modules And Other Fancy Particles - Part II

E8f68e199b61f63780758ca20d573b62?s=128

Alla Kholmatova

June 21, 2016
Tweet

Transcript

  1. 2.
  2. 4.
  3. 6.

    How to understand the function of a module. How to

    give modules names that people will use and remember. How to achieve consistency without detailed design specs.
  4. 9.
  5. 14.

    Sell a train journey to Paris Book a train ticket

    to Paris, Get inspired to go to Paris by train.
  6. 15.

    Booking form Book a train ticket, functional tool Sell a

    train journey to Paris Book a train ticket to Paris, Get inspired to go to Paris by train.
  7. 16.

    Snapshot Key selling points of the train journey. Sell a

    train journey to Paris Book a train ticket to Paris, Get inspired to go to Paris by train.
  8. 17.

    Apéritif Give taster of the destination. Sell a train journey

    to Paris Book a train ticket to Paris, Get inspired to go to Paris by train.
  9. 18.

    Functional tool Key information Inspiration Sell a train journey to

    Paris Book a train ticket to Paris, Get inspired to go to Paris by train.
  10. 24.

    • start with a larger goal • see how the

    modules work together to achieve that goal • understand the role of each module • look for the modules with similar function across other pages • group modules by function and improve the design as you go
  11. 26.

    By naming objects we bring them into existence… we draw

    them out of nothingness. James Britton, Language & Learning “
  12. 27.

    By naming objects and putting them into the pattern library

    we bring them into existence… we draw them out of nothingness. James Britton, Language & Learning “
  13. 28.

    Try to define the function of a module in the

    context of the system, rather than a page.
  14. 33.
  15. 34.
  16. 36.
  17. 39.

    Signpost - something that “sign posts” to another page, and

    a miniature representation of the page it links to.
  18. 40.
  19. 41.

    Sometimes it’s better to make the module generic, and sometimes

    more specific. Names should reflect that.
  20. 46.
  21. 47.

    It helps to use a common point of reference from

    the real world as a visual metaphor.
  22. 48.
  23. 49.
  24. 52.
  25. 53.
  26. 56.
  27. 61.
  28. 62.

    Make effort to use the names in everyday conversations, no

    matter how weird it might sound*. *It only sounds weird the first couple of weeks, until people get used to it.
  29. 63.
  30. 64.
  31. 66.
  32. 67.

    If you can't come up with a name for a

    thing, something is not right with it.* *Usually it means that the function of a module is too overloaded, too diluted, or not well understood. The inspiration for this tip came from a brilliant book by “How to Make Sense of any Mess” by Abby Covert.
  33. 70.

    You can see this shared language as a precise way

    of describing someone’s experience of your site.
  34. 71.

    Learn and progress Discover new content Purchase SIGNPOST SPOTLIGHT BILLBOARD

    FOOTER PROMO RUN PROGRESS PROGRESS TOGGLE COMMENT BLOCK WHISPER BOX STANDFIRST STANDFIRST WEEK PROGRESS CARD BOOM BOX
  35. 73.
  36. 74.

    Some designers like generous spacing. Others prefer it more cosy.

    What do I do…? Developer at FutureLearn “
  37. 75.
  38. 76.
  39. 77.
  40. 78.
  41. 81.

    Spacious Typographic contrast: high Spacing: “spacious” Regular Typographic contrast: regular

    Spacing: “regular” Cosy Typographic contrast: low Spacing: “cosy”
  42. 83.
  43. 85.
  44. 86.
  45. 87.
  46. 88.

    • When doing an UI inventory, start with a larger

    goal – this makes it easier to understand the function of the modules. Then stay focused on the function all the way. • By naming a module you bring it into existence and shape its future. A good name is focused, memorable and embodies the function. A good name is the name people want to use. • Instead of describing styles individually try to define visual patterns and connections across the system.
  47. 89.

    If you get the function of a module right, it

    can become a stable point that connects the system.
  48. 91.

    THANKS AND CREDITS Many people helped and contributed to the

    ideas in this talk in different ways, for which I’m extremely grateful. I especially would like to thank: Gabor Vajda, FutureLearn Vitaly Friedman, Smashing Magazine Lucy Blackwell, FutureLearn Jusna Begum, FutureLearn Daniel Jackson and team, Eurostar Xavier Watkins and team, EBI Karen McGrane, karenmcgrane.com …and huge thanks to the FutureLearn team for their support!