Introduction to Wireframes

Loading...

From the course by California Institute of the Arts

Web Design: Wireframes to Prototypes

ratings

California Institute of the Arts

Web Design: Wireframes to Prototypes

ratings

Course 4 of 4 in the Specialization UI / UX Design

This course is focused on the application of the early UX research to actual user interfaces: the creation of wireframes, high-fidelity mockups, and clickable prototypes. Along the way we will also discuss: - Responsive web design and mobile web challenges - Mobile-first approach - Web typography - The relationship between design and programming and whether it is important to know how to code - The different web technologies that make the web work, such as HTML, CSS, JavaScript, server-side coding, and databases. This course is the continuation of the course Web Design: Strategy and Information Architecture, in which students completed the first half of a large scale project—developing a comprehensive plan for a complex website. If you are intending to complete the assignments in this course to earn a certificate you must complete the Strategy and Information Architecture course first so you have the materials and data needed to begin creating wireframes and mockups in this course.

From the lesson

Not Getting Caught up in the Details: Wireframes

This week is all about wireframes. After mapping out our strategy and scope in the previous course, Web Design: Strategy and Information Architecture, this is the first time in the process that we will address the screen. Now things are going to get much more concrete as we’re starting to actually lay out elements for the user interface. This week you will learn why working on wireframes first—before designing high-fidelity mockups—is a helpful intermediate step. I’ll also talk about responsive design, navigation systems, wayfinding, common design patterns, and strategies for homepage design. And, we’ll discuss which tools are most appropriate for creating wireframes. Because creating those will be your assignment at the end of the week.

Introduction to Week 11:03

Introduction to Wireframes5:21

Meet the Instructors

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

We have arrived at face four in our journey along the user experience process.

That means we are ready for wireframes,

and that also means that we are starting to focus on individual pages of our sites.

So as a quick reminder,

in the previous course we established our goals in the strategy phase

and then defined requirements to meet these goals in the outline of scope.

Finally, we answered the question of how the pieces fit together to

create a cohesive logical structure to the information of our sites.

Now doing wireframing we are asking the question,

how are the pieces presented on the screen?

So we are dealing with the design of actual screens.

In fact it's the first time in our design process that we are

explicitly thinking about the UI, the User Interface.

Everything up to this point has been much more big picture at thinking.

To strain a few metaphors,

up until now we've been hovering high in the air looking at

overarching questions of strategy requirements and structure.

Now we are ready to enter the trenches and work on

the interface that the user will actually interact with,

but we are not ready to design the final appearance of the interface.

Instead wireframes are low-fidelity mockups and low fidelity is a bit of a funny word.

It means simplified or low detail.

So wireframes are simplified versions of our user interface.

Here you can see an example,

it's from a website project for the MAK Center in

Los Angeles which I worked on a few years ago.

You can see that wireframes involve a lot of

rectangular gray boxes and fairly uninspiring topography.

It's a bit drab, I agree,

but that's by design.

Wireframes are not meant to be visually exciting.

We are purposely limiting the amount of detail

we are concerned with so that we don't get sidetracked by

having to think about colors or typefaces or

precise scale relationships or which particular images we'll use.

We're mainly deciding which elements go where on the page.

Where is the logo?

Where is the navigation?

Where is the page title?

How many columns do we need?

What goes inside the footer?

These kinds of questions.

The term Low-fidelity is the opposite of High-fidelity,

a word you might be more familiar with in the context of sound quality.

When we say high-fidelity or hi-fi,

we mean high detail,

something that's very similar to the original.

In the context of user interface design,

a high-fidelity markup includes all those details that we are

omitting doing wireframing such as colors and typeface choices.

You might ask, do we even need this intermediate step of creating wireframes?

Why not jump straightaway to designing high fidelity mockups?

The reason is that wireframes give us the opportunity to focus on

more fundamental questions about the layout of our pages,

without getting caught up in a lot of details.

It's maybe a little bit like making a pencil sketch before painting an oil painting,

or you can think of wireframes a little bit like an architectural blueprints.

In this side-by-side comparison of the wireframe and the visual mockup of a homepage,

take a look at the main headline,

where it says MAK Center for Art and Architecture, Los Angeles.

The wireframe on the left,

we can tell that the headline is placed below

a large image that's by the way what the boxes with the big Xs represent.

They are placeholders for the images and we know that the headline will be visually more

prominent because in the wireframe it's bigger and that's all we need to decide for now.

We don't yet have to hunt for the perfect typeface or

the exact shade of red or the exact type size.

Those are important concerns eventually but

also things that can derail our design process.

Maybe you've been in this situation before you

trying to quickly sketch out a few ideas on

the computer and all over sudden you realize that you've been

spending the last hour looking for just the right typeface.

That's where wireframes help you out.

The fact that they're so restrictive visually

means that you can focus on the big picture decisions,

and as abstract and simplified as the wireframe on the left is,

there are tons of big picture decisions that have been made.

We know for example that the logo will be on the top left and there will be

a horizontal main navigation next to it and

a more secondary utility navigation in the top right corner.

There will be three texts columns with images

giving a brief overview of the main mission of

the MAK Center each with a button that will lead

the user to the respective section of the sides.

On the right you see how these structural decisions are reflected in the visual mockup.

Here all visual design decisions have been made.

I'll leave you with one more metaphor to distinguish wireframes and visual mockups.

Wireframes are a bit like x-rays of the final page designs,

they represent the underlying skeleton of each page.

While the visual mockups represent a beautiful skin.

We'll talk all about visual mockups in the next week.

For now, let's discuss in detail all the things we have to figure out doing wireframing.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play