Thu, Oct 28
Planning and prototyping
Today's objectives
Understand the basics of Adobe XD.
- Discuss readings
- Planning and prototyping
- Wireframes and "fidelity"
- Tools and techniques
- Intro to Adobe XD
- Design Mode
- Prototype Mode
- Share mode
- Mobile apps
- Other tools: Figma, Sketch
Tasks
Review forms. Build a simple wireframe. Explore the basics of the Skeleton framework.
Presentations
Planning and prototyping
Grids
Learning Adobe XD
Agenda
Preparation
Remember the readings assigned last class.
Tutorials
Adobe XD
- Adobe XD basics
- https://www.adobe.com/ca/products/xd/learn/get-started-xd-design.html
- Adobe XD prototyping
- https://www.adobe.com/ca/products/xd/learn/get-started-xd-prototype.html
Resources
- Adobe UI Kits
- https://www.adobe.com/ca/products/xd/features/ui-kits.html
Download UI kits for big brands, quick sketches and everything in-between
Planning and prototyping
- Paper prototyping
- https://uxplanet.org/the-magic-of-paper-prototyping-51693eac6bc3
- Wireframe Sketching
- https://www.nngroup.com/articles/draw-wireframe-even-if-you-cant-draw/
- Design process: the "double diamond"
- https://www.designcouncil.org.uk/news-opinion/what-framework-innovation-design-councils-evolved-double-diamond
A low-tech way to develop and test ideas
A general approach for design of any kind.
CSS Grids and layouts
- Basic CSS layouts
- https://www.w3schools.com/css/css_templates.asp
- Modern CSS Layout
- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
Planning and prototyping
- Site planning process
- https://www.printmag.com/editors-picks/phases-of-the-web-design-process/
Tools
- Adobe XD
- Part of the CC suite.
- Figma
- A (very good) web-based prototyping tool
- Sketch
- The first prototyping tool to be widely adopted and still one of the most popular
Assignment 06
Wireframing
Using Adobe XD, create a wireframe for a new version of the Iceland site. Don't just use the existing layouts and design you have created; use this as an opportunity to focus on the user experience. Don't worry if there are aspects of your wireframe that you are not sure how to code; focus on the design and user experience. For this assignment, you only need to design a desktop layout. Use a 12-column grid to organize your design.
The objective of the site is to get people interested in visiting Iceland, and to get them to fill in the form so they can be contacted and more information provided to them. This is the key outcome we want to see from site users.
Choose a fidelity level for your wireframe. A low-fi wireframe is probably best. You can use placeholders for text and images. If you think new assets - text, graphics, etc are needed, include placeholders for them.
Name your project "Assignment 06" and "share" a link with me using the "Design Review" setting - use my NSCAD email address.
You may use libraries and UI "kits" from other sources for this assignment, but note them (just put a note/link to them on the last page of your wireframe).
Due Wed, Nov 03, 6:00 PM.
Professional practice
Being familiar with a range of planning and prototyping tools is vital. Don't forget about paper, whiteboards and other low-tech tools. Nothing is as immediate as picking up a pen and sketching.
Need help?
Contact me - Slack is best.