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


Review forms. Build a simple wireframe. Explore the basics of the Skeleton framework.


Planning and prototyping

Planning and prototyping



Learning Adobe XD

Adobe XD




Remember the readings assigned last class.


Adobe XD

Adobe XD basics
Adobe XD prototyping


Adobe UI Kits

Download UI kits for big brands, quick sketches and everything in-between

Planning and prototyping

Paper prototyping

A low-tech way to develop and test ideas

Wireframe Sketching
Design process: the "double diamond"

A general approach for design of any kind.

CSS Grids and layouts

Basic CSS layouts
Modern CSS Layout

Planning and prototyping

Site planning process


Adobe XD
Part of the CC suite.
A (very good) web-based prototyping tool
The first prototyping tool to be widely adopted and still one of the most popular
Assignment 06

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 2022-05-17 12:45.