Secondary and utility navigation

Loading...

来自 California Institute of the Arts 的课程

Web Design: Wireframes to Prototypes

个评分

California Institute of the Arts

Web Design: Wireframes to Prototypes

个评分

课程 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.

从本节课中

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 and Primary navigation4:29

Secondary and utility navigation5:20

Related content, inline links, indexes, and search4:30

与讲师见面

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

The next navigation system to talk about is

the secondary navigation This represents the subsections of our site.

Now, some sites are so simple and small that they get

away without any subsections and secondary navigation.

But most sites do have them.

Again, you can look at your sitemap and see pretty

clearly which pages belong to the secondary navigation.

In this example, the shop and about sections have sub-pages that

will need a secondary navigation and how could this look in our wire frame?

Well, we could have a drop-down menu when the user hovers over a primary menu item.

This would allow the user to get to the secondary pages

without having to visit the primary landing page first.

On the secondary pages,

we could also have a secondary menu.

In this case I added it to the left side of the screen going down vertically.

This would allow the user to quickly navigate between

different secondary pages and it also provides

a quick overview of what other pages exist in this section.

The Marciano Art Foundation does not employ drop-down menus.

The user clicks on one of the primary menu links and any secondary pages are listed here.

At the bottom of each secondary page is

a list of other secondary pages that are part of this section.

The MAK center side makes use of simple drop-down menus,

and advantage here is that the user can get to any

of the secondary pages very quickly and they

also get an overview of

all the secondary content by just hovering over the primary links.

There are two sections: visit and bookstore that

don't have sub-pages so these don't have a drop-down menu.

The secondary navigation on the secondary pages is handled horizontally across the top.

The Pasadena Conservatory side employs

something that we at the time christened fat menus.

When you click on a primary menu,

you get a very large drop down that not only includes links but also images,

buttons and small text blurbs.

Relate how we could employ typographic hierarchy and create visual excitements.

Of course these fat menus are not tenable on mobile devices,

there's just not enough room for them on a small screen.

Here we have a more straightforward text only menu.

Let's quickly also look how the other two sides steered the mobile size.

On the Marciano side,

the navigation collapses and we get a menu link that opens up the navigation.

On the MAK Center website the navigation is also hidden

first and can be opened with the hamburger menu icon.

You can also open and close the secondary navigation items by tapping on the main links,

the ones that have secondary items indicate this via a small triangle on the right.

So, besides the primary and secondary navigation,

we also have something called utility navigation.

There's no strict rule of what to place inside

a utility menu or whether you even need one,

but often important parts of the site that are not directly

part of the site's main content will be grouped here.

So, that could be the help section or the shopping carts or

the login or account links or the social media links.

In our fictitious example here,

we could argue that the card and account links while

important options are somewhat different from the site's main contents.

They are utilitarian in nature.

So, these would be good candidates for the utility navigation.

This navigation is often placed in

the top right corner beside and above the primary navigation.

The other two links we'll include here are links to our social media,

Instagram and Facebook in this case.

They will be available on every single screen,

but they're pretty discrete and do not get in the way of the contents.

Let's check in how the three example side steel by the utility navigation.

Well on the Marciano side,

the links bookstore mailing list and contact are treated differently, they are smaller.

They almost look like an utility menu and

the reason we treated them differently here was that they

were somewhat less important and we wanted the other six main links to stand out more.

We basically created different visual hierarchies for two sets of navigational items.

The same for the Pasadena Conservatory sites.

Here contact, meaningless and donate are treated differently than

the primary navigation links below and we also

have links to Facebook and the RSS feed here.

On the Mac center side the menu items about contact,

links, press and mailing lists are part of the utility navigation.

If you count all the links in the header here,

you'll get to 12.

That's more than the rule will be discussed in a previous week

of not having more than five to nine choices at a time.

If you imagine the orange primary navigation here to have a total of 12 items,

that would be visually really overwhelming and it wouldn't even fit horizontally.

Instead we have two menus,

one with seven options, one with five.

The different visual hierarchy,

for the two sets of links makes the scanning of those choices much easier for the user.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2018 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取