Wireframing and Designing Interfaces

SP00: Design Sprint

CL24

Ajay Gandecha

UNC Department of Computer Science

COMP 423: Foundations of Software Engineering (Fall 2024)��Sit in your assigned tables!

TODO: Make an account on figma.com!

Announcements

COMP 423: Foundations of Software Engineering (Fall ‘24)

• RD14 - Angular Widgets and RD15 - Material Design due 10/27.
• Submit on GradeScope.
• Continue work on SP00.
• Due Friday, 11/1.
• Interesting and relevant news for this lecture!

​

!

!

SP00: Design

Wireframing and Designing Interfaces

CL24

• Simplicity: The user interface should be…
• Easy to use and painless to navigate
• Minimalistic: only include what you need (no clutter!)
• Consistency: The design of the user interface should be…
• Visually and functionally consistent across interfaces.
• User-Centricity: The app should should…
• Have the user’s goals / needs in mind. → User stories!
• Accessibility: Consider how non-traditional users interact with your app.

COMP 423: Foundations of Software Engineering (Fall ‘24)

Recall: Key Principles of Good Design

SP00: Design

Wireframing and Designing Interfaces

CL24

• Design System: Common set of UI components, colors, typography, and layout elements used across a common system or suite of apps.�
• The CSXL site uses Material 3 from Google as its main design system.
• Angular makes it easy to use Material 3’s components. → Angular Material
• All pages on the site are made using these components.
• The colors follow Material’s color roles.
• The typography uses Material’s preferred typography and typographic roles
• https://m3.material.io

COMP 423: Foundations of Software Engineering (Fall ‘24)

Recall: Design System

SP00: Design

Wireframing and Designing Interfaces

CL24

• Material categorizes components into six categories:
• Actions: Enables the user to perform actions (Buttons)
• Communication: Provides helpful information to the user
• Containment: Contains and organizes information on an interface
• Navigation: Allows the user to navigate between interfaces
• Selection: Allows the user to input choices into the UI
• Text Inputs: Allows the user to type information into the UI
• https://m3.material.io/components

COMP 423: Foundations of Software Engineering (Fall ‘24)

Exploring Material UI’s Design Elements

SP00: Design

Wireframing and Designing Interfaces

CL24

• Choosing the right UI components for the job is an important skill.
• Consider this question: Suppose I am trying to design a filter drop down for the events feature. What UI elements could I use to design the filter options?
• In your groups - come up with an example for each!

COMP 423: Foundations of Software Engineering (Fall ‘24)

Choosing the Right Components

SP00: Design

Wireframing and Designing Interfaces

CL24

• To choose the right selection UI element, consider the data you are working with.
• Type: Are we working with text, numbers, or on/off?
• On/off → consider a switch.
• Nature: If numbers, are the number choices discrete or continuous?
• Continuous → consider a slider.
• Are we trying to select multiple items?
• Multiple items → consider checkboxes or chips.
• Single item → consider a menu or radio buttons
• Why these? Principle of good design.

COMP 423: Foundations of Software Engineering (Fall ‘24)

Choosing the Right Components

SP00: Design

Wireframing and Designing Interfaces

CL24

• There are so many components! How do I choose the right one?�
• Design systems often include guidelines which you should always follow!�
• Guidelines discuss use cases, recommendations, and examples.
• Ex) https://m3.material.io/components/buttons/guidelines�
• Guidelines (especially for Material) are developed through meticulous UI research.
• Helpful note on creative freedom…

COMP 423: Foundations of Software Engineering (Fall ‘24)

Choosing the Right Components

SP00: Design

Wireframing and Designing Interfaces

CL24

• Implementation of Material Design that allows us to use Material in Angular apps.
• https://material.angular.io/

COMP 423: Foundations of Software Engineering (Fall ‘24)

Angular Material

​

SP00: Design

Wireframing and Designing Interfaces

CL24

• When designing user interfaces, it is always a good idea to create a wireframe / prototype of your design first before you ever start coding.
• Discuss with your teams (1-2 min): why might we want to do this?

COMP 423: Foundations of Software Engineering (Fall ‘24)

Wireframing and Prototyping

SP00: Design

Wireframing and Designing Interfaces

CL24

• When designing user interfaces, it is always a good idea to create a wireframe / prototype of your design first before you ever start coding.
• Discuss with your teams (1-2 min): why might we want to do this?
• Sets a guiding direction for a project.
• Helps to determine backend needs and considerations.
• Makes the UI design step more intentional.
• Allows you to iterate on the design before ever coding it up.

​

COMP 423: Foundations of Software Engineering (Fall ‘24)

Wireframing and Prototyping

SP00: Design

Wireframing and Designing Interfaces

CL24

You are adding a page called “Lessons” to the XL site allowing student instructors to post short lessons and modules for other students to learn from and complete.

• With your team on a single whiteboard, using some of the UI element examples you have seen so far, design a basic user interface for this feature.
• Assume you are designing the student-facing view only! (No admin functionality)
• As a student, I want to view a catalog of lessons so that I can learn more about CS / SWE, learn relevant skills, and build my portfolio.
• Assume that this is on the XL site, so include the navbar and sidebar.
• You have 10 minutes! GO!
• Submit your images to GradeScope as attendance.

COMP 423: Foundations of Software Engineering (Fall ‘24)

Get out your whiteboards!

!

SP00: Design

Wireframing and Designing Interfaces

CL24

• Stand up with your whiteboards! Pair up with other tables.
• Within zones: separate intro groups containing tables 1-3, 4-6, 7-9�
• Showcase your designs and talk briefly about the following:
• Why did you choose your design?
• What features did you want to add for your users?
• What did your team discuss? Did you restart or change as you designed?
• I will walk around - We can spend around 3-5 minutes on this.

COMP 423: Foundations of Software Engineering (Fall ‘24)

Get out your whiteboards!

​

SP00: Design

Wireframing and Designing Interfaces

CL24

• Your team just made a low-fidelity prototype.
• Prototype that shows a rough sketch of a UI at a high level.
• Often done using whiteboards or on sketch paper (often not digital).�
• Low-fidelity prototypes are inexpensive. What do you think I mean by this?

COMP 423: Foundations of Software Engineering (Fall ‘24)

Low-Fidelity Prototyping

​

SP00: Design

Wireframing and Designing Interfaces

CL24

• In contrast, a high-fidelity prototype is a more detailed design, often completed using digital software.�
• Figma ( ): Popular free prototyping tool.�
• Figma is an industry-standard tool, and is the primary tool we use to design the UI for the XL site.

​

COMP 423: Foundations of Software Engineering (Fall ‘24)

High-Fidelity Prototyping

​

SP00: Design

Wireframing and Designing Interfaces

CL24

• Log into Figma
• Using the CSXL Figma template.
• Follow along:
• https://go.unc.edu/csxl-figma
• ​
• Duplicate this project on your account.

​

COMP 423: Foundations of Software Engineering (Fall ‘24)

Tour of Figma

​

SP00: Design

Wireframing and Designing Interfaces

CL24

• Using the design you drew, play around with the existing Figma and the components.
• Try to start prototyping your Lessons page design using Figma!�
• TAs will be walking around to help.

COMP 423: Foundations of Software Engineering (Fall ‘24)

Figma Workshop

SP00: Design

Wireframing and Designing Interfaces

CL24

• When submitting prototypes for your design doc, submit at least one high-fidelity prototype (ideally made in Figma).
• You may also submit extra low-fidelity prototypes if you like.
• Remember – it is encouraged your team starts trying to make a low-fidelity prototype first!�
• Questions?

COMP 423: Foundations of Software Engineering (Fall ‘24)

Design Document Prototype

​

SP00: Design

Wireframing and Designing Interfaces

CL24

• For the rest of class:
• Work with your teams on SP00.

COMP 423: Foundations of Software Engineering (Fall ‘24)

Work Time

SP00: Design

Wireframing and Designing Interfaces

CL24