Thu, Nov 23

Designing user experinces

Today's objectives!

Work in progress review of diary and flow chart assignment.

Tasks

Review work in progress.

Presentations

Responsive design

Responsive design

Asset creation

Asset creation

How to do things

How to do things

Workflow and testing

Workflow and testing

Agenda

Agenda

Assignment
Assignment 11: App wireframe
Citizen science: Wireframe an App

Using Figma, develop the user experience for an application, as described below.

Develop a lo-fi wireframe of the citizen science invasive species reporting app. Set it up at a size that matches your own phone. You'll want to use the official Figma app for Android or iOS for testing - don't just test on your computer. test early, test often.

As noted on the web page below, the app should allow users to:

  • Send a photograph (or more) of the invasive species.
  • Send the exact location.
  • Send any notes.
  • Allow submission anonymously or with contact info.

Your wireframe at this point should focus on demonstrating the flow of actions needed to accomplish the task, and what features the app needs. Treat any wireframes as explorations of flow, not detailed layouts. Detailed visual design is not needed for this assignment.

Make sure your wireframe is well-constructed, with buttons that work, etc. Function and flow is more important than detailed visual design. Make sure to test as you go. A major part of the wire-framing process is for the designer to understand and fix problems with the navigation and flow of the app. The intent of the app is to communicate the concept to non-designers.

You will need to make decisions about features, etc., as part of the process.

As this will be a phone app, choose a phone model/size an design to that. It does not need to be "responsive" in terms of working on different screen sizes or orientations. Figma's preview on device function is good for testing.

Important: this is an initial wireframe designed to show flow and functionality, and to reveal problems or gaps that you will need to address. Time spent on visual design beyond basic hierarchies of information, labels, interface elements, etc is not time well spent at this stage. While some of the Figma interface kits for iOS or Android may be useful, focus on communicating the intent of your design. It's fine to create placeholders from screenshots, etc. - especially useful if you want to represent built-in functions such as maps, cameras, photo galleries, keyboards, etc.


Samples

Here you will find any sample files or code samples you need for class.

None this week - refer to last week's page.

Tutorials

None this week - refer to last week's page.

Resources

Planning and prototyping

Photoshop: Generate assets
https://helpx.adobe.com/ca/photoshop/using/generate-assets-layers.html
Illustrator: Export for Screens
https://helpx.adobe.com/illustrator/using/collect-assets-export-for-screens.html
"Responsive" Images
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Slicing
https://helpx.adobe.com/photoshop/using/slicing-web-pages.html

Robert Currie
This page was last updated at 2023-12-12 12:46.