Intro to Web & Mobile Design
- DSGN 153
Week 1 – Hierarchy
We look at hierarchy of information and how it can lead the user through experiences on the web. Topics covered include: Font ramp, Contrast, Call to Action, and Negative Space
Week 2 – Wireframes and Mocks
We review these two deliverables as to give some text in upcoming discussions. Neither are produced this week, but knowing what the outcome will be can often aid in understanding why we take the steps before wireframes and design comps.
Week 3 – Heuristics in UX
The 10 Heuristics of User Interface Design by Jacob Nielson are reviewed. Primarily, Visibility of system status and Aesthetic and Minimalist Design. A group discussion follows this giving examples of good and bad examples.
Week 4 – Information Architecture
Students complete IA diagrams that layout site structure and features. We review who needs to use the diagram, and how it will translate to wireframes in the next phase.
Week 5 – Pricing Design Services
Taking a break from the technical design lessons and focusing on how to build a rate for pricing design services. We discuss pricing the client, not the job, and how clients look for the least risky option, not always the cheapest option.
Week 6 – Wireframes and Prototyping
We translate the IA diagrams and discussions we’ve had into wireframes for e-commerce sites. I discuss the importance of symbols and reusable components not only to save time, but for more efficient development in the future. Lastly, we create click through prototypes using either Sketch or XD, or Invision.
Week 7 – Digital Color Theory
We look at how to build complimentary colors based on real life examples. A proven formula to create either darker or light versions of any color is given while sticking to the newer HSB color model for screen based designs.
Week 8 – Design Comps
With our new knowledge in color theory and the wireframes complete, we move onto the design comps phase. Students are asked to focus on Hierarchy of information, call to action, and visibility of system status. A critique will follow along with a prototype.
Week 9 – Design Comps Revisions and Prototype
Students participate in formal critique and make recommendations for improving designs. Finally, the students prototype their designs into clickable mocks of the real thing.
Week 10 – Finals Week and Debrief
Debrief includes answering questions for students about next steps in this career path, a day in the life of a designer, salary expectations, and other classes they may be able to take.