Wireframing Tools

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.

Wireframing Tools6:51

Wireframes: Bradley8:24

Wireframes: Alyson, part 18:48

Wireframes: Alyson, part 27:48

Meet the Instructors

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

So, what tools might you use to create your wireframes?

Of course there is pen and paper you can always use

that and sometimes I think it's a good idea to start there,

just get your thoughts out there do something nimbly with your hands.

It's nice to start design processes with your hands instead of the computer.

However, eventually I would suggest that wireframes should

end up in the computer if only that it allows you to

revise them more easily and oftentimes you go through multiple phases when working with

a client and presenting a first set of wireframes

will oftentimes lead to changes that need to be implemented,

and if you're working by hand,

you just have to start over, right?

Or you erase everything that's kind of smudgy,

so I like working on the computer for final wireframes.

So, Illustrator is another fine option for a tool to create wireframes.

It allows you to create boxes and texts and

lines and that's all we need for wireframes, right?

So, the example here is a wireframe I created in illustrator for

an architecture studio and what you're seeing here is the wireframe for the landing page.

Where Illustrator can get tricky is that it allows you to

do too much do you put down a piece of type you

actually have to choose the typeface and you

might get into this rabbit hole of hunting for

the best typeface for your wireframes where as I said

before it's not the time to make those decisions.

So, instead there are

some designated wireframe tools out there

and the one that I really like is called Balsamiq.

It's made with the sole purpose to allow you to create wireframes.

They have an app that you can download and install on your computer,

but they also have a cloud-based tool that works in your browser.

And the nice thing is that they actually give you

a 30-day free trial to try out their software,

so I would really encourage you to create your wireframes for this class in Balsamiq.

I think you'll find the software quite intuitive and easy to learn.

I'm just going to give you a quick tour so you will get

an idea of how the software works.

So, here I am logged into Balsamiq Cloud and you can have

multiple projects here and you see there's already one that I created,

which is for a previous lecture.

I created all the form UI elements that I showed in a previous lecture here in Balsamiq.

You'll see these patterns come with Balsamiq,

you don't have to create them on your own.

So if I wanted to add another checkbox item here, I can double-click.

There's a specific easy to learn syntax,

so if I wanted to add another checkbox item that isn't selected,

I can do that and there it is in my wireframe.

So, let me create a quick wireframe from scratch.

I can create a new wireframe that's completely blank and add a few elements and

I find the best way to work with Balsamiq is to use the "Quick Add" function.

You just type in what you need.

So, first thing I'll need is a browser window and I'll type in

browser and here in the list the UI element actually shows up.

I click on it and there it is.

All right, so, now I can make it bigger I can double-click on it.

There are some options.

My site mysite.com.

These two things now show up in

the browser window and since I don't want to inadvertently select this browser window,

I can lock it by right-clicking on it and saying lock.

All right, so, what else are we going to add here.

Maybe a logo for that I usually just use an icon and a label pattern.

There it is, some text underneath just an empty icon.

If I click on it, I can label it and I can also add some links.

So, there's a button bar pattern.

I can have a comma separated list here.

Let's just say About Us,

Our Products and Contact.

Then we'll add a title for the page title

and maybe this About Us page just has a video player and a caption.

So, you can search for video,

add a player here,

resize it however I want and then let's say there's

a caption to the left of it just describing what this video will show us.

If I search for block I'll get this pattern called a block of text.

Maybe we don't know what that caption will say,

we just know it'll say something, right?

So, instead of having to write it at this point,

I will just indicate, oh there's going to be some text there.

At this point, I should also show you that there's actually

two flavors of this wireframing skin that Balsamiq comes with.

If you go to the project info,

there is a skin option right here on the bottom and right now I'm using

the sketch skin which has quite a bit of a hand drawing feel to it,

but there's also more streamlined wireframe skin that looks a little bit cleaner.

So, it depends what you prefer.

So, let's quickly create a second wireframe for the Our Products page.

I can just go to the page here on the left and click on duplicate,

and then have a copy of the previous wireframes.

I can delete the elements I don't need.

This title becomes products.

Here when I click on the button bar,

I can change which link is actually active.

So, now our navigation reflects the page that we're on.

And here maybe we just have some thumbnail images.

So, image that's just a box with an X,

make that a certain size,

and I can hit Command D to duplicate it and now I have

four products that presumably when we click on them go to a detail page, right?

So, my second wireframe is already done in this very simple example anyway.

The last thing I'll show is you can use this tool also to make a clickable prototype.

Let's actually name our wireframes here.

So this is about,

this one is our products.

So, now when I click on the button bar on the About Us page, there are links.

Our Products link goes to the Our Products page and then on the Our Products page,

the About Us links to about then I can use Balsamiq to actually have a click-through.

So, I do that by going into the presentation modes with the link on the top right corner

full screen presentation and now I can click on About us go to the About us page,

click on Our Products or toggle back and forth.

And it seems like I'm navigating this website and you

can see how this can become fairly complex.

I've got to say, I don't use Balsamiq all that often in that way.

I usually just print things out or make

PDFs and send it to a client and then have a discussion about them.

But since this is Cloud-based,

you could actually send a link to a client have them navigate through your wireframes.

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