Draw Toast Activity
- Draw a diagram of how you make toast
- Discuss your approaches with your scrum team
- Class debrief:
Tedtalk on Draw Toast
Mental Models
The concept of mental models is useful for discovering how people relate to the methods they use to forage for information on the web. Especially when people have to learn to use a newer piece of technology. They will usually model their approach to it based on something familiar.
Watch Mental Models
Visual Hierarchy (we may do this tomorrow)
- Link to Slide Deck
- Core Elements of Visual Hierarchy:
- Color and Contrast
- Scale
- Grouping
Common Design Principles
- Link to Slide Deck
- Important Concept: Cognitive Load
- The amount of mental effort needed to use/figure out how to use a site/app
- Design Principles:
- Repetition
- Space
- Grid systems and alignment
- Typography
Activity: Find Web Examples of Design Principles in the Web
- Note: If you created the figjam file in the first activity, then let someone else do it this time.
- Create a figjam file with 4 sections (you can choose between any of the design principles we discussed today)
- Invite all team members to the space with editor status
- Pick a website or app and analyze it for the design principles that we’ve learned about
- Screenshot each example and add the images to the figjam file in the appropriate section
- Write a brief description on why/why not this was used effectively.
An Introduction to Usability
Usability is a full stack responsibility
- While most discusson on usability focuses on the frontend, information architecture can also inform usability.
- Backend response times to deliver data heavily impact a user’s experience of interaction cost
- Usability work extends to things like how a CMS is set up for content editors to work
- Learn to practice web development with usability in mind. But don’t let the perfect become the enemy of the good - that’s why we develop software in cycles
User Interface Design
- When planning a site or app, it’s important to take time to plan out (even if minimally) these visual aspects:
- Theme of the site (this is heavily influenced by brand and site identity)
- Necessary ui elements (reusable patterns for displaying content)
- Design assets (at minimum, colors and fonts)
Draw a user flow
This is essentially the same activity as our Draw Toast from this morning. However instead of mapping out how to make toast, we will map out our own mental models of how to shop online.
- Follow the same instructions as our morning activity (and without looking at an example on the web), map out how you would go about shopping and buying something online.
- Next in pairs, search up an online shopping site. try to find something other than Amazon
- Walk through it’s user flow and then discuss how it fit or varied from your model