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.
Examples
Loading...
来自 California Institute of the Arts 的课程
Web Design: Wireframes to Prototypes
个评分
从本节课中
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.
与讲师见面
Roman JasterVisiting Faculty, Program in Graphic Design
School of Art
Since we've already talked about navigation and footers in other lessons,
I want to specifically focus here on the content area of the homepage.
What goes here?
I have found in my own work that sometimes it's fairly
easy to figure out what content should be included on the homepage,
but at other times,
it can almost feel that a site doesn't even need a homepage at all.
So, let's talk about specific strategies you can employ.
Looking around the web,
I have discovered that there are certain distinct approaches that can
be categorized as follows: table of contents,
featured contents, palate cleanser,
call to action, narrative,
fork in the roads and fusion.
By the way, these labels aren't an official agreed upon list or anything.
I simply made them up,
although I think they're pretty descriptive,
and it's entirely possible that there are additional categories.
In fact, I invite you to think about other strategies that you would add here.
Let's talk about each item in this list while looking at actual websites as examples.
Some of these websites that I'll show are sites that I have worked on myself.
So, table of contents.
This is a strategy where the homepage consists of a list of
links that point to the content contained in the site.
It's a bit like a table of contents and a printed magazine or book.
Let's take a look at the Pioneering Women of American Architecture site for an example.
This website is mainly a collection of two dozen essays about
women architects that made an important contribution to the field of architecture.
The homepage simply lists the names of all women.
When you click on a name,
you get a detailed page for the architect.
You can also look at this list sorted chronologically based on
the woman's lifespans and there's
a pictorial view where the list is represented by an image.
But again, this homepage acts like a table of contents.
You see a list of everything that's contained in the side and you can make a selection.
The Marciano Art Foundation website doesn't actually list all content on the homepage,
but it introduces important sections and acts as a jumping off point to the content.
A user basically has two ways to navigate;
they can click on something in the main navigation right away or
they can scroll down and get an overview of the site's contents.
Which path a user chooses,
probably depends on how experienced they are with
the museum or if they came to the site with a very specific question.
People coming here for the first time might want to get
a little bit of context about the museum first.
These users can scroll down and get an overview of the most important things;
what's on view, what are the upcoming events,
what is the Marciano Art Foundation in the first pace.
On the other hand, someone coming to the site wanting to
know the opening times of the bookstore, well,
they will probably click on bookstore in
the navigation and get straight to the content they need.
Here's another good example, the IRS site.
For full disclosure, this is not a site that I had any hand in designing,
but we can see here the table of contents strategy really well.
The most important common user scenarios and tasks are addressed right on the homepage.
If I'm looking to find out about my refund status, well,
there's a big link right here,
and if I want to apply for an EIN,
well, there it is.
Same thing if I'm looking for a specific form.
I would imagine that the IRS uses
actual analytics data in deciding which topics will appear on the homepage.
These might change seasonally.
Right before April 15th,
when taxes are due in the US,
the site might draw a special attention to information about filing taxes.
Right after April 15th,
maybe there's a link about filing for an extension for
any stragglers who didn't file on time.
I'll show you one more website that utilizes a table of contents strategy,
but not in a very imaginative way.
Alas, it's one of the first sites I ever designed and it's still up on the Internet.
It's, a tribute site for the painter Edvard Munch.
Besides an obvious late 90's inspired web design,
you can see here that I didn't really know what to do with the homepage.
I mean, there's a photograph of the artist and one of his paintings,
but then I simply added the main navigation as
a free-flowing list of links granted the hover effects are kind of fun,
but I now realize that what doesn't work so well is the fact that
the main navigation isn't introduced in
the same way it will be displayed on the secondary pages.
There's a disconnect between the homepage and
the other pages in terms of navigation layouts,
and it creates some disorientation for the user.
Let's move on to the next strategy, featured contents.
Here, the homepage is used to display some actual content right away.
This is great for e-commerce sites and blogs where you'll want to
showcase either featured content or the latest contents.
So, for a site like The Washington Post, a news site,
it makes absolute sense to show
the very latest and most important news stories right on the homepage.
It's pretty similar to how a traditional newspaper front page works.
On Amazon's homepage, you see some featured products and
product categories and you'll see what's most popular,
or if you happen to be logged in to your account,
you get specific recommendations just for you based on previous searches and purchases.
Here's the blog Root Simple that I designed a few years ago.
As expected, the latest blog post shows up first,
so that readers can get to it right on the homepage.
After that post, they get the second latest post and so on.
Lastly, here's the site for the CalArts Poster Archive that my studio
developed in collaboration with Michael Worthington and a few grad students.
Here, the homepage gets to the point right away.
There's a collection of posters in an orderly grid.
The user can filter this list by year or subject
matter and they can search for something specific, and of course,
they can click on a poster for more information and a bigger image,
but much of the action happens right on the homepage.
Onto the next strategy, the palate cleanser.
Here, the homepage is used to set a tone or a mood.
It provides the user moment of pause before delving into the content of the sites.
It's a little bit like the cover of a book perhaps,
it lets you establish an iconic visual introduction to your site.
Here's the Schindler Lab website as an example,
another segment studio designs.
It's an online publication for a cultural institution and we
decided to make a bold visual statement to set the tone.
There's some introduction texts as you scroll down and you can
access the table of contents via link,
but the homepage acts like a book cover for this publication.
Here's a site for the construction company Bronstruction.
There are four links in the main navigation about projects,
press and contact that will take you to the actual content of the site.
The homepage though, uses much of the real estate for
a beautiful image of a project that Bronstruction has worked on.
This image by the way changes randomly every time the homepage is loaded.
One more, the website for dosa,
a clothing design company.
Here, we have a simple list of navigation items to the left and on the right side,
you have a beautiful mood image.
I think there's a place for the palate cleanser,
but keep in minds that this homepage strategy can make a website feel a bit static.
If you want to communicate that your site is always up to date and not stale,
then you might employ strategies that ensure
that your homepage doesn't look the same all the time.
But again, it depends on the project.
In a little bit, we'll see how you can employ
the palate cleanser strategy in conjunction with other strategies..
The call to action is a singular action that you
want the user to do before leaving the site.
That might be creating an account or calling a phone number or downloading a file,
starting a chat or purchasing a product or service.
Here are a few examples.
Monday is a productivity tool and on their homepage,
it is very clear what they want you to do next.
Enter your email and sign up for a free account.
In fact, most homepages for online services will have have this in common;
get a new user to sign up or existing users to log in.
Google.com is a curious case of a call to action websites,
while there's one singular thing to do here, search for something.
Note that compared to other search engines,
those that are still around and those that are not,
Google doesn't show you any secondary content like the most popular websites or
the latest news or anything else that gets in between you and your search results.
That's pretty great UX, right?
In my opinion, it's probably one big reason
why Google search took over the world even though,
it was one of the later search engines to enter the market.
Here's another fun example, Donate Your Tab.
This service uses your computer's processing power to temporarily mine bitcoins,
but the proceeds being donated to an important cause.
Here's a ginormous call to action,
a toggle button to turn on the mining.
Then we have the narrative as a strategy for the homepage.
Here, the homepage is used to explain or introduce the site's mission.
This often involve scrolling or a slideshow.
Here are a few examples.
The Burden of Genius sites is for a documentary film about
the physician who performed the first successful liver transplant.
At first, the homepage seems a bit like a palate cleanser,
a big iconic photo and a title,
but as you scroll down you get a bit of a narrative in the form of captions and images.
At the end of this sequence,
there's a call to action to watch the trailer.
Here is the HostGator homepage.
As you scroll down,
you get an introduction to
their hosting services and they tell you how they are different,
how to get started and what other people have said in praise of their company.
The fun animations bring a bit of surprise and joy to the experience.
I often call what is happening here narrative scrolling.
As you scroll down the page,
a narrative unfolds and words, images and animations.
I'm a big fan of it actually,
and sometimes this is pushed to an extreme.
Consider the website Every Last Drop.
This site seems to be a marriage of a comic book and a movie,
only that you're scrolling controls the action.
As you scroll down here and you can see the scroll bar moving down on the right,
the character in the story wakes up and starts his day, he gets dressed,
eats breakfast, commutes and goes to work evidently as an astronaut no less.
Along the way, there are stats that tell us about
the importance of clean water and conservation.
All right, two more strategies to cover.
The fork in the road strategy is great for sites that need to immediately
send users on two different paths depending on what user group they belong to.
For example, the website for a Napster,
which is a music streaming service,
bifurcates the homepage into two different sections for two different user groups;
businesses and personal accounts.
You must make this decision as the very first thing before being able to move on.
Here's the homepage for Coca-Cola.
It doesn't really provide us with much information,
but instead we are asked to choose the country we live in.
Each country then has a unique Coca-Cola website all of its own.
On the website for Capital Investing,
you get to choose what kind of investor you are.
If you'd like to work with an adviser or invest on your own,
each one of these options leads to a separate section of
the site tailor-made for the specific audience.
Finally, a homepage strategy I call fusion.
That's simply a combination of multiple strategies.
In fact, most websites will employ more than one of the strategies that I covered here.
Let's look at two examples.
On the Airbnb site,
we can find palate cleanser,
call to action and featured contents.
On the side for a Paymo,
a project management service,
we have call to action,
fork in the road and a narrative.
Here's the homepage for Airbnb.
The large images in the background are what I would call a palate cleanser.
They set the tone for the sites by showcasing beautiful vacation locations.
The call to action is also very prominent,
a big search box.
As you scroll down,
you get some feature contents,
including featured homes around the world.
By the way, they also implemented an interesting functionality here.
No matter how much I scroll down,
there's always more content that loads automatically.
That's called an infinite scroll by the way.
On the Paymo site,
we get a big call to action,
start a free trial.
As you scroll down,
there's also a fork in the road,
you can choose between being part of a team or being a freelancer.
Then as you scroll further,
there's a narrative explaining the service that Paymo provides,
including nice illustrations, a list of problems that the software solves,
user testimonials, key features and so on.
Then when you reach the end of the page,
just in case, there's another call to action.
All right, we have made it through our investigation of homepage strategies.
This should give you a good foundation and some inspiration for
the homepage of your project that you're designing in this course.
