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.
Responsive Design
Loading...
來自 University of California San Diego 的課程
信息设计
429 個評分
從本節課中
Flexible Layout
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 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.
與講師見面
Scott KlemmerProfessor
Cognitive Science & Computer Science
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.
