Using whitespace to style a form

Loading...

來自 California Institute of the Arts 的課程

Web Design: Wireframes to Prototypes

27 個評分

California Institute of the Arts

Web Design: Wireframes to Prototypes

27 個評分

課程 4（共 4 門，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. This is the fourth and last course in the UI/UX Design Specialization, which brings a design-centric approach to user interface (UI) and user experience (UX) design, and offers practical, skill-based instruction centered around a visual communications perspective, rather than on one focused on marketing or programming alone. These courses are ideal for anyone with some experience in graphic or visual design and who would like to build their skill set in UI or UX for app and web design. It would also be ideal for anyone with experience in front- or back-end web development or human-computer interaction and want to sharpen their visual design and analysis skills for UI or UX.

從本節課中

Finally, Make it Beautiful: The Mockup Phase

We finally reached the point that many of you—especially if you consider yourself a visual designer—have probably been waiting for. We’ll now talk about designing the look and feel for your website. Meaning, we’re ready to design visual mockups. Finally, you’ll get to decide on colors, typefaces, and images. Maybe you’ll create a few illustrations. And your site will need a logo, too. This week, we’ll focus on designing the visual mockups of just the homepage. To find some inspiration, I’ll also have you create a mood board.

Design Principles7:51

What is whitespace?3:55

Using whitespace to style a form3:30

A visual comparison1:34

與講師見面

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

Let's look at another example of how White Space enables us to create better design.

Consider the simple form that includes two form fields and a button.

Now, is this a visual pleasing and inviting form?

I'd argue that it isn't.

Everything is too tight and the feeling I get from it is one of slight anxiety,

and most of the time,

this is not a feeling that we want our users to have, right?

But we can fix a lot of problems here by just

giving the box around the form more padding.

Meaning, more white space. What a relief.

It's almost like being able to breath again after unbuttoning a too tight shirt.

What else? The Sign Up button could also use more white space.

There, much better now.

And the form fields too,

typing something into them right now would again feel

really claustrophobic because the fields are too small.

Making them taller solves the problem and now let's implement

a few quick changes that aren't related to

white space but will make our form look even better.

We can lose the colons after the labels.

Since, they are unnecessary and just add visual noise.

Also, let's change the button typography from all caps into title case.

That looks much friendlier.

Then let's remove all the outlines around the box and the form fields.

Much cleaner and less oppressive now.

But let's add one heavy ruler back to just the top of the box,

to create some visual weights balancing the button below and lastly,

let's lighten the background just a little bit to make

everything feel even lighter and friendlier.

So, now we have a pretty nice form and

it's quite a bit different from what we started with.

But let's take it one step further which gives me

the opportunity to talk about making more rational design decisions.

So far, I simply eyeball the spacing between the elements,

like the space between the top of the box and the first form fields

or the space between the two fields or the height of the fields themselves.

There's a way we can be more systematic about those dimensions.

Let's create a small grid with the smallest grid unit

based on the height of the dark rule on the top of the box.

There, and now we have a sort of ruler on the left to help us with our sizing.

You can see that currently,

the elements aren't quite lining up.

Let's change that.

Now, they do.

Let me add a quick color overlay so we can see the size relationships now.

The spaces on the top and bottom are six squared units tall.

The form fields and the button of five units,

the space between the fields is two units,

and between the last field and the button are four units.

You'll notice that now there's an underlying reason for the height of

all elements and there is a variety of sizes,

some are the same and some are different,

and that tension of sameness and difference creates

an interesting and pleasing rhythm between the design elements.

Now, in this case,

I use the idea of a grid to allocate vertical space.

But grids come into play even more

importantly when we're dividing up horizontal space in a layout.

You'll learn more about that in a later lesson.

So, here's our finished form and here it is next to where we started from.

Quite a difference, right?

We haven't even done all that much with color and we

haven't tried different typefaces or used any icons.

We mostly edit white space to design a form that a user will find pleasing and inviting,

a form that is therefore much more usable.

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

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

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

通過 App Store 下載

通過 Google Play 獲取