digital design workshop
TRANSCRIPT
![Page 1: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/1.jpg)
tt
DIGITAL DESIGNKATHERINE BARROW | DESIGN ASSEMBLY | PIXEL FUSION
#DADigitalDesign | @KatBarrow | @PixelFusion_NZ | @DsgnAssemblyNZ
![Page 2: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/2.jpg)
WHO AM I?
![Page 3: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/3.jpg)
WHO ARE YOU?
![Page 4: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/4.jpg)
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
![Page 5: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/5.jpg)
WHAT IS
DIGITAL DESIGN?
![Page 6: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/6.jpg)
WE’RE DESIGNING HOW WE INTERACT WITH TECHNOLOGY
![Page 7: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/7.jpg)
WE’RE DESIGNING INTERACTIVE TOOLS
![Page 8: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/8.jpg)
WE ARE DESIGNING SYSTEMS
![Page 9: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/9.jpg)
WE ARE DESIGNING EXPERIENCES
![Page 10: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/10.jpg)
Digital design is the process of conceptualising, designing and styling interactive digital products such as websites and mobile applications.
![Page 11: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/11.jpg)
THE DIGITAL DESIGN
MINDSET
![Page 12: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/12.jpg)
SWITCH YOUR MINDSET
![Page 13: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/13.jpg)
STATIC VS FLUID LAYOUTS
![Page 14: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/14.jpg)
STATIC VS DYNAMIC CONTENT
![Page 15: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/15.jpg)
IT HAS TO BE BUILT
![Page 16: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/16.jpg)
IT HAS TO PERFORM
![Page 17: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/17.jpg)
IT’S A LIVING MEDIUM - IT HAS TO EVOLVE
![Page 18: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/18.jpg)
THE DIGITAL DESIGN
PROCESS
![Page 19: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/19.jpg)
USABILITY
![Page 20: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/20.jpg)
“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.”
![Page 21: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/21.jpg)
PUSH OR PULL?
![Page 22: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/22.jpg)
INSTRUCTIONS UNCLEAR
![Page 23: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/23.jpg)
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.
![Page 24: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/24.jpg)
WHY DOES USABILITY MATTER?
![Page 25: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/25.jpg)
10 USABILITY COMMANDMENTS
![Page 26: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/26.jpg)
1. DON’T MAKE ME THINK
2. PROVIDE VISUAL FEEDBACK
3. BE CONSISTENT
4. DON’T WASTE MY TIME
5. FORM FOLLOWS FUNCTION
![Page 27: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/27.jpg)
6. RECOGNITION VS RECALL
7. HELP ME FIND MY WAY
8. BE HUMAN
9. BE ACCESSIBLE
10. BE RESPONSIVE
![Page 28: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/28.jpg)
USABILITY REVIEWS & TESTING
![Page 29: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/29.jpg)
COMMUNICATING USABILITY
![Page 30: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/30.jpg)
• 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.
![Page 31: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/31.jpg)
BREAK
![Page 32: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/32.jpg)
CONCEPTUAL DESIGN
![Page 33: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/33.jpg)
1. WHAT IS IT?
2. WHAT IS ITS PURPOSE?
3. HOW DO I USE IT?
![Page 34: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/34.jpg)
MENTAL MODELS
![Page 35: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/35.jpg)
“Mental models are deeply ingrained assumptions, generalisations, or even pictures, that influence how we understand the world and how we take action.”
-Peter Senge
![Page 36: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/36.jpg)
MATCH THE USER’S MENTAL MODEL
![Page 37: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/37.jpg)
WIREFRAMING
![Page 38: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/38.jpg)
![Page 39: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/39.jpg)
WHY SHOULD YOU WIREFRAME?
![Page 40: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/40.jpg)
12 COLUMN GRID
![Page 41: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/41.jpg)
1 2 1 2
1
![Page 42: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/42.jpg)
![Page 43: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/43.jpg)
USING DESIGN PATTERNS
![Page 44: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/44.jpg)
SHARING WIREFRAMES WITH CLIENTS
![Page 45: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/45.jpg)
• 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.
![Page 46: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/46.jpg)
VISUAL DESIGN
![Page 47: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/47.jpg)
FINALLY… GET THE COLOURS OUT
![Page 48: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/48.jpg)
1. BRANDING & CONSISTENCY
2. VISUAL HIERARCHY
3. USABILITY & AFFORDANCE
4. STYLE
5. DESIGN SPECIFICATIONS
![Page 49: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/49.jpg)
UI KITS & ATOMIC DESIGN
![Page 50: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/50.jpg)
SKETCH DEMO
![Page 51: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/51.jpg)
• 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.
![Page 52: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/52.jpg)
THE DIGITAL DESIGN
FUTURE
![Page 53: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/53.jpg)
DESIGN TRENDS - SKEUOMORPHISM
![Page 54: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/54.jpg)
DESIGN TRENDS - FLAT DESIGN
![Page 55: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/55.jpg)
DESIGN TRENDS - MATERIAL DESIGN
![Page 56: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/56.jpg)
DESIGN TRENDS - WHAT’S NEXT?
![Page 57: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/57.jpg)
WHAT’S THE BIG DEAL ABOUT BIG DATA?
![Page 58: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/58.jpg)
ENGAGEMENT & HABIT BUILDING
![Page 59: Digital design workshop](https://reader031.vdocuments.net/reader031/viewer/2022022413/58f0018b1a28ab97698b45cd/html5/thumbnails/59.jpg)
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