Week 11
- Download Files for class demo
- In class demo: End of class files
- Sketch
- Sketch Online Manual
- Sketch Prototyping Video Overview
- LinkedIn Learning: Sketch Essential Training (full access with your Simmons account)
- Adobe XD
- Critiques
Homework
Reading
Web Typography:
Navigation Patterns:
- A Brief Overview On Responsive Navigation Patterns
- Responsive Navigation Patterns
- Complex Navigation Patterns for Responsive Design
- 5 UI Patterns: Navigation That Makes Good UX Sense
- UI Patterns: Navigation
UXPin has several free e-Books on prototyping. You just have to cough up your email address!
Exercises
Final Project
Wireframes
Revise your computer rendered wireframes for next week (11/26).
- Refine ideas based feedback
- Use the prototyping feature of either Sketch or Adobe XD to link your wireframe templates
- Draw sketches or create a computer rendering of your design at a mobile size
Post your revised wireframes on your website by 6pm next Tuesday (11/26).
Mockups Version 1 (due 12/3)
The first version of your mockups are due next class (two weeks from now). We will be critiquing them in class. Review the mockup assignment from the final project page.
Use either Sketch or Adobe XD to create your mockups. Since we are designing for screens, make use of the predefined artboard templates in both programs to use appropriate sizes. Which particular desktop size you choose is your choice. Also, remember that just because the predefined sizes start as a 'short' size, your page (and mockup) will not necessarily be short. You can always extend the artboard.
You should have a mockup for each different type of page in your site. For example, home pages usually look different than other pages in a site. Your mockups should be complete, well thought out designs. You've already done much of the structural part by doing your site maps and wireframes. You also should have a pretty good idea of your design direction from your style tile.
Do not forget to consider navigation, footers, changes on interaction (like hover states).
Deliverables
We will be critiquing your mockups in class. Be prepared to present each mockup to the class.
Add to Google Drive
Create a folder in Google Drive with the following format:
- Comm244-Mockup-v1-[your name]
Share this folder with me before class.
Upload to your final project page
Save a copy of each of your mockups as a pdf. Make sure that they are full size. Upload and link to them from your final project page on your website.
Blog Assignment
No blog assignment