Visual Mockups

Loading...

來自 California Institute of the Arts 的課程

Web Design: Wireframes to Prototypes

69 個評分

California Institute of the Arts

Web Design: Wireframes to Prototypes

69 個評分

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

Introduction to Week 21:05

Visual Mockups3:39

與講師見面

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

We have reached the visual mockup phase,

the final phase in the user experience process.

I hope you are looking forward to making your websites look beautiful.

Let's look at our abstract to concrete paradigm again.

As you know, with every phase we've grown a little bit more

concerned with the final shape of our sites.

Now, in the visual mockups phase,

all we are concerned with is the final shape of the sites.

What we're designing here will actually be seen and experienced by the user.

It's interesting to point out that the deliverables of

the previous phases will only indirectly affect the user's experience.

The user will not actually see your strategy document or your outline of scope,

and they won't see the sitemap diagram or your wireframes either.

What they will see, however,

is the visual design that you create for the sites.

In fact, the visual design is the very first thing users will experience.

While the visual mockup phase is the last phase of the UX process,

users will form their first impression from the decisions made in this phase.

First impressions are obviously very important,

and the visual mockup phase is therefore really important.

But as I've emphasized throughout the entire course sequence,

the success of the site as a whole,

depends on the successful completion of each phase in the process.

That's why we have a structured process in the first place.

You could go and start designing visual mockups right after receiving your clients brief,

and the visual design might be stunningly beautiful,

but chances are pretty high that your website will not turn out that great,

since you didn't spend the time defining your goals in the first place.

By the way, the idea of a viewer judging

the visual design first reminds me of something that the writer,

Scott McLoud mentions in his excellent book 'Understanding Comics'.

This book should be required reading for every visual design students.

It's a great primer for visual literacy,

and I highly recommend it.

Since it's itself written in the form of a comic,

it's also quite entertaining.

But what I'm trying to get to here is that the author at one point talks about how people

appreciate visual art most easily by looking at the surface of the arts.

Kind of like choosing an apple for its shiny skin,

but underneath the surface of artwork there are layers, craft, structure,

idiom, form, and hopefully an idea at the very center.

If these inner layers are missing,

there's only a shiny skin,

and continuing with the metaphor,

we have an apple that is beautiful on the outside,

but hollow in the insides.

This makes me think of our UX process again,

if you don't have a solid strategy in the center of our website,

it might turn out to be quite hollow as well.

What I also find quite interesting is how our design process is

exactly the opposite journey from how a user experiences the final sites.

We start with strategy and end with designing the visual design,

which the user in turn sees first.

Underneath the surface skin, however, hopefully,

they will find a solid structure of the information on each page,

which we developed in the wireframes.

Underneath that, there should be a solid structure of the entire site,

which we created when working on the sitemap.

Hopefully, we have included all necessary content and

functionality that the user will be looking for as defined in our outline of scope.

Lastly, if we've done our work well,

the site will achieve the user and client goals that we determined in the strategy phase.

探索我們的目錄

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

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

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

通過 App Store 下載

通過 Google Play 獲取