Intro to Web & Mobile Design

DSGN 153

This course teaches the fundamentals of designing websites, mobile content, and graphics for screen-based devices. Topics include navigation, user interaction and user experience, image production and digital color theory, layout techniques, accessibility, contracts and copyright law, and managing project assets. Client relationships, audience identification, and search engine optimization are also explored. Techniques are modified each quarter to better reflect current industry standards

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.