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

Planning and prototyping

Grids

grids

Learning Adobe XD

Adobe XD

Agenda

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

A low-tech way to develop and test ideas

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 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.


Robert Currie
This page was last updated at 2021-12-16 08:06.