Moodboards and Homepage Mockup: Bradley

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.

Из урока

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.

Creating Visual Mockups9:23

Moodboards and Homepage Mockup: Bradley6:58

Homepage Mockup: Alyson13:02

Познакомьтесь с преподавателями

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

Cool, let's talk about mock-ups.

Let's do it.

Let's do it. But first,

you set out and gathered some inspiration.

Right. Yes. Once we got to this point in the project,

I was thinking about how the visuals will be represented and how would it look.

So, you made a mood board?

Exactly. So, I used Pinterest to make a mood board.

Yours is on the left?

On the left, yeah, PokeFresh.

I was thinking about the fact that

the restaurants open pretty much from sunset to sunrise,

it made a lot of sense that since the food is Hawaiian,

looked up Hawaiian sunsets and stuff and also,

see, as the food comes from Hawaii,

look at Hawaiian symbol and patterns in forms.

I think that made a lot of sense,

I think these two things together really, you know.

Yeah, and we'll see in a second how that actually informed your visuals.

Right.

But maybe quickly about Pinterest,

Alison, yours is on the right here.

You were looking at a lot of Italian.

Yeah, I was looking at a lot of Italian packaging,

signage for my logotype because I was thinking that my logo would be more type-based.

So, I was looking at both historical and contemporary type.

I like using Pinterest because it's

a free mood boarding program and it just allows you to see everything at once.

So, I think it's really helpful.

Yeah.

Yeah. Not only that, you can also find really cool stuff, too.

If you really want to go in on the visuals,

a lot of that stuff is pretty.

Or you can save your own photos that you have.

Yeah.

Or any photo on the web brand to Pinterest.

So, it's a good tool to do that.

All right. PokeFresh, here's the mood board, sunsets, colors, shapes.

Let's see what happens.

The homepage for PokeFresh.

Mobile phone?

Mobile app, right.

So, start by looking at the logo.

I did a logotype that blended both symbol and type.

In a moment, we can look at the other logo variation and the process.

Yeah.

If you look at the background, there's a gradient going on and it

represents a sunset and also a salmon color.

So, it has both.

This fish that is a big part of Poke.

Yeah. It's a subtle light pattern inspired by a wave.

The Order button looks like a little sun.

Yeah, like a setting sun. Yeah.

Or rising. It is setting.

Yeah, these are leaves in the background,

they were inspired by Hawaiian symbols and obviously,

they represent that whole idea.

Yeah. Well, not only that, too,

but also Los Angeles because it's in Westwood.

So, I was thinking a lot about knowing the area,

there's some really nice sunsets over the summer.

It's also pretty close to the beach on the West side of LA so I think it all fit in.

The wave also features prominently in your logo.

Let's actually look at the development.

The development.

Yeah. When I started looking at fish and stuff and thinking about it's a fish place,

but that seemed a little on the nose and clunky.

So, you see through the process.

Originally, it was flat, like horizontal fish,

and then maybe a curved one into a symbol that's supposed to represent just like a wave.

Once we got to that point,

it seemed like it was going in a better direction and for number four,

I think we got to a good place there.

Yeah. Because number one, two, and three,

they also had the word PokeFresh next to it,

so some topography as well.

But then in the fourth version,

you combined the topography and the logo.

Right.

So, the waves became [inaudible].

Yeah, and I think that made sense, too,

because working on a mobile app,

you do have more limited space versus web.

So, to have both in one symbol.

The wave also got a lot more refined,

from three to four.

But then the shape of the wave and number three,

you also kept for some of the shapes.

It was inspired anyway for the repeating pattern in the background. What else?

So, we talked about colors,

we talked about the logo.

What about the topography itself?

Yeah, I was thinking about the voice, too,

voice of the site and then also navigation-wise,

I wanted it to be pretty clear,

pretty easy to navigate because someone might be [inaudible] Yeah.

But as far as this stuff goes, like the "yeah,

seriously", I used two different typefaces so that yeah,

seriously is a Google font which looks more

hand-drawn versus the sans serif which is Osmos,

contemporary sans serif typeface.

Yeah. Then I guess the "yeah,

seriously" on, it adds more attitude.

Yeah.

It's a little bit,

I don't know, is it snarky?

A little bit, but it comes also from the personas that we looked at earlier, too.

Yeah.

Those influenced the way that the language is on the website for sure.

It also provides a nice contrast typographically,

just handwritten scribble over it.

Yeah, form-wise.

Yeah, and there's a couple of iterations also just at the homepage.

This is your development process that you went through, left to right?

Yeah. Exactly. While also developing the logo,

you can see from left to right,

some of the challenges I faced is just, like,

"How do I place this massive fish logo?"

I think that really informed my decision-making in terms of

how I can get that to fit on the page and I think

it made it a lot better once the logo and the type work combined.

Also, just like refinement overall typographically,

you can see there's a big change.

But as far as the gradient and the sunset thing goes,

that stayed pretty much throughout.

Right. So, if you squint at these,

they actually look somewhat similar but if you look at the details.

Yeah.

Your hierarchy of type and how you use icons and imagery changed over time, it evolved.

Exactly.

Got tighter. Especially if you look at the last,

these all have the same hierarchy.

Basically, these three forms of them

got a lot more refined where the $10 Poke is the first thing.

Because that's the main thing.

It's cheap, they're not cheap,

it's just affordable for for college students.

Then the very last thing is even the "yeah,

seriously" and the arrow pointing to the Order Now,

that's one of the later moves that you added.

Yeah, like adding another voice in later on. Definitely.

Think that about covers it.

Right.

Right.

Thanks.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play