Loading...

Responsive Design

There’s more than seven billion people on the planet, and just about that many computing devices. Given that scale and diversity, interface design can’t be one-size-fits-all. In this module, we’ll dive into the rationale and strategies for making designing interfaces more flexibly. We’ll talk about internationalization--i18n for you wonks and 1337 h4x0rs--and the interplay between script direction and interface layout. And we’ll discuss responsive design: having a ‘family’ interface strategy that grows, shrinks, and changes to accommodate a range of device form factors.

A blank canvas is full of possibility. If you have an idea for a user experience, how do you turn it into a beautiful and effective user interface? This covers covers principles of visual design so that you can effectively organize and present information with your interfaces. You'll learn concrete strategies to create user interfaces, including key lessons in typography, information architecture, layout, color, and more. You’ll learn particular issues that arise in new device contexts, such as mobile and responsive interfaces. You will learn how to apply these design principles in a modern context of increasingly diverse form factors - from tablets, to walls, to watches.

查看授課大綱

您將學習的技能

Information Design, User Interface Techniques, Responsive Web Design, Website Wireframe

教學方

Scott Klemmer
Professor

腳本

For centuries,

visual designer's role has involved creating families of related designs.

If you're creating book covers, you may have different languages,

where your design needs to accommodate the title from different languages.

If you're an automobile designer,

you'll have a whole family of cars which need to express the same vocabulary,

from the smallest one all the way up to the largest one.

In recent years this has gotten even more complicated.

Part of what's exciting, but also challenging on visual design for

computers is that we have this increasing diversity of devices.

This means different size displays, different input modalities,

different usage scenarios, all sorts of stuff.

So the user interface that works on a watch might be different than the one that

works on a tablet, or a phone, or a wall, or a pull out display, or

anything that might be coming along.

Until recently, I would say that many people did web design,

for example, focusing on something that was a laptop-ish

size screen first, maybe 1024 x 768.

But now there are so many different sizes.

You don't even need to go too far afield.

Let's just look, for example,

at the range of Apple touch screen devices sold in the past few years.

You go from a 3.5 inch diagonal screen all the way up to a 13 inch diagonal screen.

That is a four fold increase in physical real estate.

That's almost a ten fold increase in the total number of square inches of real

estate that's available.

And that compounds with the fact that you've got higher resolution screens and

all a lot other stuff going on at the same time.

So there's no way that you can take exactly the same design and just shrink or

expand it across that wide a range and have it work.

I pulled up the Wikipedia page for

responsive web design and appropriately enough,

it doesn't do a very good job at all in accommodating different screen sizes.

We can see as we start out with a normal browser width, it looks pretty good.

But as we shrink the browser, everything collides, and

then we expand out the browser, and you get a text that's like this long.

It just doesn't work at all.

So things that we know don't work for responsive design are,

you can't just let boxes get as large or as small as they want.

Also, you can't have things be a fixed size,

no matter what device you're displaying it on.

In one case you need to zoom the view port around, in the other,

you're wasting most of the screen real estate.

The solution to the strategy of this increasingly diverse set

of devices is to create a family of designs that have a similar look and

feel but are appropriate for each device.

On the web, the implementing technologies for this are media queries and

rewriting the web page with JavaScript, among a few other things.

The implementing part is for another class, but here, what I want to focus on

is how a designer will create a design that can work across a family of sizes.

So let's start with a common webpage

that you might see is a three-column fluid layout.

Where you have nav on the left, more information on the right and

then a large fluid column in the middle.

This can work really well for laptop sized devices.

Shrink it down to say, a tablet though and it might be too large.

So with a tablet, what you might do for something of this three-column

style is it becomes two columns where you have the nav on the left here.

So what you might do for a tablet,

is that it becomes two columns where you have the nav on the left here, and

then this big column, is what was the fluid piece here before.

For a phone, you might not even have enough space for two columns.

It might just be one.

So for something that's this size, what we might do is we take our content and

then the nav, well,

that just might be a menu up top that you click on to get to the nav.

Or in some cases, people will have a menu that pops out or

pops over what's available otherwise.

For you as a designer, the trick is to have something where even though

the actual rendering necessarily needs to be different as you scale up and down.

It should feel roughly similar across different devices.

And there's two reasons for this.

The one obviously is branding,

that you want people to recognize that they're at the same site.

The more important one probably is the user experience,

that you want people's intuitions about what works here to transfer across these

different device sizes.

Here's another example of how you can make your design responsive.

Let's say we have here something where,

again we'll carve off some space on the left for nav.

We might have some nav up top, so this could be your primary navigation and

your secondary navigation.

Maybe there's a big wall paper image up here.

And you might have a column here, and a column here,

and then some additional information here.

A well-designed laptop-sized display,

you can often fit four columns of information pretty comfortably.

And again, that's not going to work as you go up or down.

So what we'll see, just as we went from three columns to two to one here,

that the same information is going to change as we go to the tablet.

So, in this case, we go down to the tablet and

we might have our primary nav now takes up the whole with here, so that's this part.

We might have some secondary navigation here.

But maybe it doesn't start until a little further down.

So we might have this wallpaper image here become

something that's full width in the tablet.

And then our secondary nav goes below that.

And then as opposed to three columns here, these things may condense a little bit.

So it may be just these two columns here become one column here and

then we can condense this further still as we go down to a phone size.

So I'll have something that's like this size here and I have a wall image.

My nav gets narrower again and in this case, we probably will need to serialize.

Does this come first?

Maybe this is second and this is third or is the order different?

If you have truly ancillary content, you can often put it behind a menu or

pull it across pages.

This is one reason that people often suggest doing mobile first responsive web

design, because it's a lot easier to add stuff than it is to take it out.

And so if you start mobile first, it can be easier to say, well we can,

On a mobile website, if you start mobile first, you'll often spatially,

If you start mobile first, one common strategy is to split different

information across multiple, different pages.

On a desktop site or

a laptop site, where you have more room, you can often unpack that.

And so these things that were three different pages on a phone

can become one page on the desktop or laptop computer.

Starting mobile first is a big advantage over starting on the desktop

because of this ability to expand more easily than to contract.

Still, my experience has been it's hard to start with any one form factor.

There's different reasons why you might want to start with each of these.

But tailoring any one to the other, that can actually be kind of tricky.

And so my experience is that you kind of want to start from the mockup stage,

having a couple of representative form factors and designing for

each of them simultaneously.

And it turns out to be a lot less work in the long run

if you start with multiple design models up first.

It turns out to be a lot less work in the long run if

you start with multiple design models up front.

Because that lets you think through where you need the flexibility

as you're designing.

It's a little more work upfront but it totally pays off in the long haul.

So in the next video, we're going to talk about how we move from these mockups that

we've talked about here into something that is more about pixel for

pixel representation for what you would see on a final page.

關於 Coursera

課程、專項課程和在線學位均由全世界一流大學和教育機構的頂尖授課教師教授。

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2019 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取