Syllabus v3.0 20210127

ADS 560 / VISC 525, Designing Digital Products, Spring 2021
Tuesday / Thursday @ 3:20-5:50pm
Matt Kirkland / mattk@ku.edu / Zoom Link

Week 5

March 2 / 4

Getting visual

This week we'll take what we learned in user testing, apply it to our wireframes, and test out some visual styling. We'll talk about design systems as usued in product design.

In a product design, we don't think of styling or interactions one screen at a time: we have to think in both larger AND smaller systems. When you design a system, one way to start is designing little atomic parts for re-use. You can't solve every design problem by looking at the kit of parts, but you can do a LOT of them. A Lego model consists of most of the same bricks reused from model-to-model. But sometimes they have to make a new mold for special circumstances or use a part in an unintended way. We want to make a great, useful set of lego parts.

Lean on your gestalt principles here! Pay attention to alignment, size contrast, consistency, grouping. Remember the thing about shadows: light comes from the top.

Resources

• A simple overview of the design systems concept
• Some examples design systems (I'm focusing on these small atomic UI components):
• US Web Design System
• Flexport's Latitude
• Finastra components
• Quickbooks system

Assignment

For Thursday March 4 by class time:
• Make a design system concept in Figma. It should have one example of each of the elements we listed in the google doc. Here's that google doc!
• Keep the items separate, and THEN pick out the product_count view in your wireframe (the one where the user actually enters an inventory number) and make a mockup it. This will be a way to test out your components: how do they work in a real interface? If you don't like it, then go fix your components :)
• Your system should be small, and cover only the list of items we map out in class on March 2 (see that google doc)
• Be ready to share in class on March 4.

For Tuesday March 9 by 8am:
• Adjust your design system based on feedback / crit today, and finish out your prototype with those styles. Remember to integrate any improvements or changes from your wireframe user testing! If you use the components and style options in Figma then this can rough in pretty quickly, and then you can adjust and fine-tune.
• Post the new prototype to your site!
• Reading Assignment. Write your response to the UI Crash Course post.