The UX Phases (part 1)

Loading...

Do curso por California Institute of the Arts

Web Design: Strategy and Information Architecture

1 classificação

California Institute of the Arts

Web Design: Strategy and Information Architecture

1 classificação

Curso 3 de 4 em Specialization UI / UX Design

This is the first course in a two-course workshop, in which you will deeply explore and practice every phase of the user experience process. While the concepts covered will translate to many kinds of interactive media (apps, digital kiosks, games), our primary focus will be on designing contemporary, responsive websites. This course is focused on the early UX challenges of research, planning, setting goals, understanding the user, structuring content, and developing interactive sequences. In this course you will complete the first half of a large scale project—developing a comprehensive plan for a complex website—by defining the strategy and scope of the site, as well as developing its information architecture and overall structure. Along the way we will also discuss: - Different job descriptions in the web design industry and where UX and UI skills fall within this spectrum - The difference between native apps and websites - The difference of agile vs. waterfall approaches - User personas and site personas - User testing The work and knowledge in this course continues in the last course in the UI/UX Design Specialization, Web Design: Wireframes to Prototypes, where you will tackle—finally—wireframes, visual mockups, and clickable prototypes.

Na lição

The User Experience Process

This week I will give you a brief overview of the user experience process that I will teach in this course sequence. We will begin by defining the term "user experience", and then briefly look at the five phases of UX design: Strategy, Outline of Scope, Sitemap, Wireframes, and Visual Mockups. I will also talk about the differences between mobile apps and websites, and the differences between waterfall and agile approaches to UX design. Lastly, I will introduce you to the main project that you will be working on in this course and the one that follows it. You’ll be starting your first assignment at the end of the week. Last, here's something to keep in mind this week: “Design is not just what it looks like and feels like. Design is how it works.”—Steve Jobs

What could possibly go wrong?4:04

The UX Phases (part 1)4:55

The UX Phases (part 2)3:03

Conheça os instrutores

Roman Jaster
Visiting Faculty, Program in Graphic Design
School of Art

The UX process, as I follow it in

my own practice and as I will teach it to you this course sequence,

follows five main phases.

Here they are: strategy, outline of scope,

sitemap, wireframes, and visual mockups.

We will cover each of these phases in detail,

roughly one phase per week.

You will gain experience and a deeper understanding of each phase by practicing what you

learn while working on a project that will span the duration of this course.

I will introduce the project at the end of this week's lectures.

For now, let me give you a quick overview of each phase.` I will illustrate

the deliveries for each phase with

examples from a web design project that I have worked on.

A few years ago my company,

Yay Brigade was tasked to redesign the website for

the Pasadena Conservatory of Music and I'll use this project's process as an example.

One last note though,

I have to give some credit to an influential book called

The Elements of user experience by Jesse James Garrett.

I was exposed to a lot of the concepts that I'm teaching in

this course for the first time while reading this book many years ago.

In fact, the book has been one of the top influential texts for the web design community.

Our process starts with a strategy phase.

Here, we're asking a lot of fundamental questions,

like what are our goals,

who are our users,

what are their needs.

Here are some pages from

a large strategy document that we prepared for the Pasadena Conservatory.

You see that we defined objectives for the site and determined who our users are.

We also performed an exercise to figure out what voice

our website would use if it was a human being.

The strategy phase also includes a visual research.

So we looked closely at a lot of websites of

other music schools and educational and nonprofit organizations.

The next phase is to create an outline of scope.

This is basically a list of content and functionality that needs to be included

in the site to fulfill the goals set up in the strategy phase.

Next up is the sitemap.

Here the content and functionality from

the previous phase is structured into a cohesive whole.

Here we also determine the navigational structure of the site and we'll make

sure to use precise labels for the navigation categories.

Speaking of labeling things,

for the Pasadena Conservatory site we spent a lot of time

discussing the terms for children and for adults.

We knew that it was important to have separate landing pages for

younger and older students but we also realized that

using the term children is not ideal for teenagers.

But we didn't want to create

three different landing pages for children, teens and adults.

Another solution we contemplated was to name the first section for

children and teens but that seemed too clunky.

In the end we decided to stick with children and adults

which, though not perfect, seemed to be the best compromise.

The fourth phase is about creating wireframes.

Here our focus shifts from the site as a whole to individual webpages.

Wireframes are a simple sketches of the structural makeup of a web page.

You can see here, for example,

wireframes for the homepage on the left and the for children landing page on the right.

And each of these pages was mocked up to address small and large screens.

Here are wireframes to show how we imagine

the navigation menus to work on big and small screens.

You'll notice that higher level concerns such as which typefaces we will

use and which images and which colors are not addressed here at all.

You can think about wireframes kind of like architectural blueprints.

They show what goes where without getting hung up on final design details.

Then lastly we have the visual and mockup phase.

Now it's finally time to determine the visual identity of the website.

For graphic designers, this is obviously the funnest part of the process.

You get to think about colors and typefaces you'll figure out how images are treated.

Maybe you create textures or icons or illustrations.

You can see here that we worked on the visual mockups for

the Pasadena Conservatory in Adobe Illustrator.

I like their tool since it's easy to create

multiple art boards to investigate different design options.

Other designers like the application sketch or others use Photoshop or Adobe XD.

So that's it.

These five steps will form the structure of our process in this course sequence.

You will learn about these steps in the following weeks and you will

use them for the class project I will assign soon.

Hopefully, you will use these tools in

your web design work after you complete the course.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play