UI/UX IV
ARTG 474
User Interface / User
Experience Design IV
Refactoring UI Essentials $29:
https://gum.co/LsTNA/nsD3OGSKfv5tK2P0
Additional Resources
Google Material Design
https://developer.android.com/
design/
Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/
OUTLINE
COURSE TEXTBOOKS
// WHICH MEANS ...
You will continue working on
Not only will you build on what
class will advance your digi-
the projects from Patrick’s
we’ve covered in previous UI/
tal interface design and devel-
Design Research class by cre-
UX courses, you will use this
opment skills, and provide a
ating a new digital interface.
project to showcase the skills
deeper understanding of these
This interface will do one of
you’ve acquired in the graphic
processes.
three things: it can be a prod-
design program over your four
uct unto itself; it can serve
years at VIU.
to enhance the functionality
Everything you work on this
semester will be a resource for
of a product; or it can create
We will be diving deeper into
awareness of your product as a
usability by learning about
marketing platform.
heuristics and laws of UX, all
while honing UI skills. This
your UI and UX portfolio.
COURSE
Class Zoom link, Mondays 3:304:30 or by appointment
-
OFFICE HOURS
474
https://viu.zoom.us/
j/63527069460?pwd=SGtjV1JlZWV1SmlBTGI5MzIrbXB3UT09
ARTG
CLASS
Mondays 11:30-2:30
Zoom/Online
This is a capstone research course in user-interaction and user-interface design, focusing on
user-centered design. Students will develop and
design a semester-long major project, drawing on
their work in usability heuristics and various
design methodologies from prior courses to design
a site/application for desktop and mobile devices.
-
Brad Harris
brad.harris@viu.ca
// ACCORDING TO THE CALENDAR ...
01
INSTRUCTOR
UI/UX IV
ARTG 474
User Interface / User
Experience Design IV
LEARNING OUTCOMES >
Upon successful completion of
this course, student will be
able to:
Î Establish project goals
based on specific research.
Î Propose supporting infor-
and user flows.
PROTOCOL >
Have your supplies and anything
you need to sketch, design and
take notes. Back up your work
and don’t run updates on your
laptop the night before something is due.
Please show up on time, class
mation architecture for a
starts promptly every Monday at
digital prototype.
11:30am, online. The provided
Î Identify essential features
for your digital product
that are appropriate for
your user base (persona).
Î Employ appropriate user
interface patterns in your
product.
Zoom link will remain consistent throughout the term. If
you’re unable to make it on
time, or at all, send an email.
and UX design practice. These
end-of-term.
assignments (and possibly a
quiz) will count for 45% of
your final grade. Readings from
Refactoring UI will also be
required. Assignments may also
include multiple choice questions based on these readings
to be completed on your own
time.
Late is late, regardless of the
reason. Late work will not be
Your capstone project is the
culmination of the UI/UX courses to date. It is worth 50% of
your final grade. Invest yourself in this; take pride in how
far you’ve come by harnessing all of your skills you’ve
acquired over the years in the
Graphic Design program.
accepted without prior approval. Deadlines are strict; treat
each class as if you were about
to have a meeting with a client in which they are expecting to see work completed on a
project. Be prepared to have a
conversation about your work.
ASSIGNMENTS, QUIZZES &
READINGS >
I will, however, accept as-
Throughout the semester, you
was submitted in time, on the
will be required to complete
CAPSTONE PROJECT >
signment resubmissions if work
original due date, completed to
EVALUATION >>
Capstone Project - 50%
Assignments / Quizzes - 45%
Engagement - 5%
OUTLINE
term.
Î Develop effective prototypes
and may not be graded until the
COURSE
velopment environment from last
however, is graded on my time,
and understanding of good UI
-
book, access to a Webflow de-
itive navigation design.
will enhance your abilities
474
pens, a sketchbook or a note-
Î Demonstrate mastery of intu-
at least 50%. Resubmitted work,
ARTG
Suite CC (Adobe XD), pencils,
heuristics appropriately.
a variety of assignments that
-
Your laptop, Adobe Creative
Î Implement various usability
02
SUPPLIES >
*/ ON ENGAGEMENT
Think of engagement like class participation, only more.
In addition to participating, engagement is not just raising your hand to speak up and share your thoughts; it also
includes your level of interaction within group activi-
“GOOD DESIGN IS OBVIOUS.
GREAT DESIGN IS TRANSPARENT.”
ties, how you work with your classmates, and your level of
communication with me.
Do not under-value this.
It can
be the difference between a letter grade after everything
is considered.
>> JOE SPARANO
Engagement will be a key component in your careers as
designers, and in life as higher-functioning humans. As
we’ve experienced, life can get unpredictable and throw
ever, this is no excuse for not communicating, not showing
up in person, or deciding you will attend online without
valid reasons and prior approval. If this becomes your
pattern, your engagement score will be affected.
It is your choice to attend classes and meetings, engaged
and on time. Make the right choices and treat your time as
a student as your profession.
COURSE
have tried to accommodate students wherever possible. How-
-
ty have noticed a drop in attendance and communication. We
474
Because of the turbulent last couple of years, the facul-
ARTG
signer - as a real human.
-
Reach out. I’m here to support you as a student, as a de-
03
responsible: if you need help, ask; feeling overwhelmed?
OUTLINE
challenges at us. But if the going gets tough, try to be
COURSE CALENDAR >
Feb 21
Interface paradigms / a history of styles
What are they and how do they fit with
your project? We look at some influential
web design trends.
Activity: Webflow - buttons, many ways
Homework: UI pattern assessment, read
Chapter 2 Refactoring UI.
Feb 28
Feb 7
Affordances and Signifiers
What you always wanted to know but were
afraid to ask.
Activity: Advanced colours and/or Whiteboarding
Homework: read Chapters 5 & 6 Refactoring
UI.
Advanced UI Patterns
We explore common UI patterns and make
decisions.
Activity: Interface Testing
See how your interface stands up to user
testing
Homework: Start building in Webflow
Mar 7
Advanced Forms
We look at examples and discuss usability.
Activity: Webflow Responsiveness
Homework: Keep building in Webflow
class, assignments may
change, due-dates may be
pushed back or brought
ects might be adjusted.
Changes will be posted in the announcements
section of VIULearn,
after each class.
VI-
ULearn is your true
source of accurate, upto-date information.
Because of COVID
uncertainty, some in-
Mar 14
Wireframing, whiteboarding, and user flow
What are they and why are they important?
We explore what you need in your project,
navigation, and a few Laws of UX.
Homework: User Journey / interactive wireframe, read Chapters 3 & 4 Refactoring UI.
on where we’re at as a
Mar 21
Putting it all together: UI/UX portfolios
We look at how to showcase UI/UX skills in
a portfolio.
class activities that
Activity: Webflow forms
possible; only time
Workflows in the Real World
We talk about different ways to manage
projects, and we discuss career possibilities as a UI/UX designer.
Activity: Webflow - adding extras
are best done inperson, may not be
will tell if these
activities will
happen!
-
Jan 31
eral outline; depending
forward, value of proj-
Activity: We look at worst possible ideas.
Homework: Design Principles, decide on
your product type, user objectives and
goals. Read Chapter 1 Refactoring UI.
Jan 24
Study Break
This calendar is a gen-
CALENDAR
Design Principles & Innovation
We dig deeper into design principles and
also talk about innovation. We get creative.
Homework: Hi-Fi mockup XD (build your assets library in XD), Read chapters 7 & 8 in
Refactoring UI.
** STUFF CHANGES
Mar 28
Project Studio Day - individual check-ins
Homework: Capstone Project
Apr 4
Final Class - Capstone Project Due for
Critique
Present your digital product. You will
have 1 more week to make changes.
474
Jan 17
Usability Heuristics
What are they and why are they important?
A few more Laws of UX.
ARTG
Activity: We make toast.
Homework: read ‘The Creation Myth’ https://
www.newyorker.com/magazine/2011/05/16/creation-myth
Feb 14
-
Welcome back!
An overview of what you’ll be creating for
your term project. We look at the context,
flow, and implementation pyramid.
04
Jan 10
ARTG 474
Capstone Project <Digital Interface>
RESOURCES
You will be building on the
project done in Patrick’s class
last term.
You’ve brought your
designs to a point where you
can now start considering how
a digital product can support,
enhance, or even become your
product.
You’ve (presumably)
conducted user research to
assess the viability of your
product, and, like last term’s
poster design, we shift to digital.
This is the next iteration of
and a solidification of your
may find it difficult to find
product’s ‘brand’.
the time for your own passion
projects.
When
Completing this
A digital interface can be many
project could put you 3/4 of
things.
It can be a product
the way there. You could poten-
unto itself, such as a video
tially make residual income, or
streaming service, or a game;
even start a business venture.
it can serve to enhance the
functionality of a product,
CREATIVE SOLUTIONS >
such as bluetooth control of
Think about how a digital for-
an appliance; or it can create
awareness of your product as a
marketing platform, in the form
of a responsive website.
A set of well-crafted design
principles - NOT principles of
design - should help guide this
project.
If design principles
haven’t already been crafted,
you will need to create these.
SO WHAT?
>
mat can create different experiences for your users.
A
mobile device, for example, has
potential for tracking someone’s location, giving haptic
or auditory feedback, or even
augmenting reality. We will be
looking at creative examples of
digital products with innovative user experiences.
Remember all that time we spent
last term looking at Art Direc-
Between this and last semester,
tion? Keep this in mind when
you have the opportunity to
designing your digital inter-
create a real product.
faces. How can you use Art
Direction to engage your users?
By the end-of-term, this proj-
How can you use your interface
PROJECT
A digital Interface, designed in XD, and built in
Webflow.
you hit the ‘real world’, you
CAPSTONE
Final Project Format
a real business venture.
There should be an evolution
-
April 11, 2022
your product. Depending
on the nature of your
product, this could
take many forms: a website, an application, a
mobile web app - whatever best supports or
enhances your project.
nity to enhance your ideas.
474
DUE DATE
ect has the potential to become
ARTG
50% of Final Grade
For your final project,
you will be creating a
digital interface for
your product, and an opportu-
-
PROJECT WEIGHT
YOUR OBJECTIVE >
01
Me, Refactoring UI, the
web, your classmates.
Additionally, the quality of
matted Word document won’t cut
your writing will be taken
effectively, you need to under-
Users are habituated to cer-
it, in fact, I won’t read it.
into consideration.
stand your users.
Grammar,
tain patterns, that if deviated
Harsh? I don’t think so. Your
spelling, and well-articulated
content, imagery, etc. would
from, can create a poor user
design skills should bleed into
thoughts count. Even if you are
your audience engage with most?
experience.
everything you put into the
the best visual designer in the
world.
land, sloppy writing can quick-
Part of your grade will be
different expectation and
based on creativity.
ferences in these patterns -
But there’s a huge caveat to
al. If you have trouble with
hasn’t all been done before
this is yet another reason for
this: good design doesn’t mean
this, get someone to proof-read
- that is a super weak (and
understanding your users.
flashy colours and illustra-
your work before handing it in.
tions.
You should care a lot about
dif-
It means appropri-
Foundational are Apple’s Hu-
ate design.
made every day, and there will
man Interface Guidelines and
well-designed document can also
wants showcase how tremendously
always be more opportunity for
Google’s Material Design Sys-
be inappropriate.
talented our graduates are - so
creative solutions.
believe.
Innovations are being
An aesthetically
Know where
this.
More selfishly, VIU
tem. Working with these de-
to design, and where not to -
heartedly encourage solutions
sign systems will enhance your
this is super key in digital
that haven’t been seen before.
understanding of common, us-
interface design (remember the
Need Free Help with writing?
er-friendly UI patterns. Un-
icons in gov,uk?). Build from
Contact The Writing Centre:
derstanding these systems will
well-chosen fonts, make the in-
https://vancouver.mywconline.
We will be looking more closely
make you more competent - and
formation readable, and create
com
at UI patterns this term. Along
more efficient - designers.
a strong visual hierarchy.
WRITING &
DOCUMENTATION
To take this a step further,
ON PATTERNS
I whole-
>
with this we will be exploring
psychological patterns such as
Jakob’s Law: “Users spend most
>
your documents should reflect
the visual systems already
of their time on other sites,
and they prefer your site to
Written assignments should look
established in your product.
work in the same way as all the
well-ordered and aesthetically
Doing so will ensure you have
other sites they already know.”
appealing;All assignment sub-
cohesive documentation of your
This is where leveraging well-
missions this term should be
process that would be suitable
known user interface patterns
well-designed.
for a UI/UX portfolio.
in your design is an essential
room in this class for poor-
There is no
don’t tarnish this, okay?
PROJECT
tremendously boring) thing to
ly make you look unprofession-
CAPSTONE
No, it
-
Even between iOS
and Android users, there are
474
What type of
ARTG
To do this
ly-crafted documents. An unfor-
-
ers will relate to?
part of its usability.
02
to tell a story that your us-
weekly in VIULearn.
or a marketing platform for
Refactoring UI will play a
find other successful products
your product.
large role in building your
designs, and will be required
reading weekly for the first
half of the semester.
I will
reinforce these concepts during
the second half of the semester
while you build your designs.
Next, you will
that include effective UX and
UI that you can use as inspiration for your interface.
TASK 3 - JOURNEY
MAPPING / WIREFRAMING
>
Now to decide what you need in
Your design principles are the
guiding light to your interface
design. Even though this may
have been established during
your design research class, we
need to look at this through
the lens of digital interface
design. Well-crafted principles
are an important foundation
for any design-centered project, especially for a team.
TASK 2 DEFINING YOUR PRODUCT
/ PATTERN ASSESSMENT >
As a class, we will look at
what digital interface options
are available to you, then de-
active prototype. Within this,
it’s very important to create a
solid assets library for your
design.
This should include
colours, typography, and components so that making those
Some of these tasks may change
TASK 1 DESIGN PRINCIPLES
/ PRODUCT AUDIT >
In XD, you will build an inter-
your interface and where to put
it. Sorting your content into
inevitable changes will be fast
and efficient. Presumably, your
aesthetics have already been
determined in your previous
class.
Now, we can put them
to use in your new interface
design.
You
will need to determine the main
user objectives achieve their
goals. To do this properly, try
to be problem-oriented, rather
than solution-oriented; understanding the users’ problems
is key to finding the proper
solutions.
Use your persona developed last
term to start constructing
a user journey and determine
how you want them to navigate
through your product. Start
mapping this as an interactive
prototype using resources I’ll
be sharing in class.
TASK 5 USER TESTING >>
It’s time to put your ideas to
the test.
at your disposal to build this
in Webflow, including pre-made
components - just make sure to
make them your own!.
PRESENTATION
& CRITIQUE >>
For the end-of-term critique,
you will reveal your completed
digital interface to the class
by sharing your screen and
talking about your work.
You will have one week from
this day to make changes and
a logical hierarchy of importance is the first step.
a few. You can use any method
You will be test-
ing your prototypes in groups
and using different qualitative
research methods to assess the
effectiveness of your design,
and garner useful feedback from
your classmates.
TASK 6 BUILD IT >>
We spend the rest of the term
building your designs in Webflow using the assets we’ve
covered up until this point:
Refactoring UI, Apple’s Human
submit this on April 11, to
VIULearn along with your cumulative documentation.
PROJECT
that will enhance your product;
gle’s Material Design to name
CAPSTONE
given each class and posted
standalone product; a product
-
lowing tasks, with more detail
face. There are 3 options: a
Interface Guidelines, and Goo-
474
We will be completing the fol-
TASK 4 USER INTERFACE DESIGN
>>
ARTG
cide the purpose of your inter-
-
>
03
YOUR TASKS