A lightening speed introduction to the world of digital design. Targeted at people from graphic design, advertising or marketing backgrounds who are looking to make the transition into the digital design world.

1. t
t
DIGITAL DESIGN
KATHERINE BARROW | DESIGN ASSEMBLY | PIXEL FUSION
#DADigitalDesign | @KatBarrow | @PixelFusion_NZ | @DsgnAssemblyNZ

2. WHO AM I?

3. WHO ARE YOU?

4. 9:15 THE DEFINITION
9:30 THE MINDSET
10:00 THE PROCESS
11:00 THE BREAK
11:15 THE PROCESS II
12:00 THE FUTURE

5. WHAT IS
DIGITAL DESIGN?

6. WE’RE DESIGNING HOW WE INTERACT
WITH TECHNOLOGY

7. WE’RE DESIGNING INTERACTIVE TOOLS

8. WE ARE DESIGNING SYSTEMS

9. WE ARE DESIGNING EXPERIENCES

10. Digital design is the
process of
conceptualising,
designing and styling
interactive digital
products such as websites
and mobile applications.

11. THE DIGITAL DESIGN
MINDSET

12. SWITCH YOUR MINDSET

13. STATIC VS FLUID LAYOUTS

14. STATIC VS DYNAMIC CONTENT

15. IT HAS TO BE BUILT

16. IT HAS TO PERFORM

17. IT’S A LIVING MEDIUM - IT HAS TO EVOLVE

18. THE DIGITAL DESIGN
PROCESS

19. USABILITY

20. “Usability means making
sure something works well,
and that a person of
average ability or
experience can use it for
its intended purpose
without getting
hopelessly frustrated.”

21. PUSH OR PULL?

22. INSTRUCTIONS UNCLEAR

23. When you have
trouble with things
—whether it's
figuring out whether
to push or pull a
door or the arbitrary
vagaries of the
modern computer
and electronics
industries—it's not
your fault. Don't
blame yourself:
blame the designer.

24. WHY DOES USABILITY MATTER?

25. 10 USABILITY COMMANDMENTS

26. 1. DON’T MAKE ME THINK
2. PROVIDE VISUAL FEEDBACK
3. BE CONSISTENT
4. DON’T WASTE MY TIME
5. FORM FOLLOWS FUNCTION

27. 6. RECOGNITION VS RECALL
7. HELP ME FIND MY WAY
8. BE HUMAN
9. BE ACCESSIBLE
10. BE RESPONSIVE

28. USABILITY REVIEWS & TESTING

29. COMMUNICATING USABILITY

30. • Have a look at the event cinemas website (https://
www.eventcinemas.co.nz)
• Pretend that you want to book tickets for a movie on Sunday.
Walk through the site and make note of any usability issues.
• Remember to refer back to the 10 commandments!
• Present your top 5 observations to the group as you would
present them to a client.
TASK 1.

31. BREAK

32. CONCEPTUAL DESIGN

33. 1. WHAT IS IT?
2. WHAT IS ITS PURPOSE?
3. HOW DO I USE IT?

34. MENTAL MODELS

35. “Mental models are deeply
ingrained assumptions,
generalisations, or even
pictures, that influence
how we understand the
world and how we take
action.”
-Peter Senge

36. MATCH THE USER’S MENTAL MODEL

37. WIREFRAMING

39. WHY SHOULD YOU WIREFRAME?

40. 12 COLUMN GRID

41. 1 2 1 2
1

43. USING DESIGN PATTERNS

44. SHARING WIREFRAMES WITH CLIENTS

45. • I’m going to put an Event cinemas page up on the screen.
Your task is to re-imagine and wireframe this screen.
• Individually, create a few rough sketches and high level- just
get some ideas.
• In your groups- share your sketches and discuss what you
like or don’t like. Remember, it’s not just what looks good-
think about why you’re making choices and how they will
affect the user.
• As a group, create a single wireframe for the mobile and
desktop views of your page. Remember to think about your
responsive grid!
• Present to the group.
TASK 2.

46. VISUAL DESIGN

47. FINALLY… GET THE COLOURS OUT

48. 1. BRANDING & CONSISTENCY
2. VISUAL HIERARCHY
3. USABILITY & AFFORDANCE
4. STYLE
5. DESIGN SPECIFICATIONS

49. UI KITS & ATOMIC DESIGN

50. SKETCH DEMO

51. • In your groups, examine the website that I have given you.
The focus here should be on their visual design and UI. For
each of the following statements, decide whether or not you
agree, out of 5, with 5 being I strongly agree, and 1 being I
strongly disagree. Note down your reasons!
• This website uses a consistent style guide.
• This website uses visual design to enhance usability and
help users achieve their goals.
• This website does a good job of selling the brand.
• This website feels modern.
TASK 3.

52. THE DIGITAL DESIGN
FUTURE

53. DESIGN TRENDS - SKEUOMORPHISM

54. DESIGN TRENDS - FLAT DESIGN

55. DESIGN TRENDS - MATERIAL DESIGN

56. DESIGN TRENDS - WHAT’S NEXT?

57. WHAT’S THE BIG DEAL ABOUT BIG DATA?

58. ENGAGEMENT & HABIT BUILDING

59. THANK YOU.
#DADigitalDesign | @KatBarrow | @PixelFusion_NZ | @DsgnAssemblyNZ
Further reading:
“Don’t Make Me Think”- Steve Krug
“Rocket Surgery Made Easy” - Steve Krug
“The Design of Everyday Things”- Don Norman
Atomic Design- Brad Frost