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.
Homepage Mockup: Alyson
Loading...
Do curso por California Institute of the Arts
Web Design: Wireframes to Prototypes
classificação
Na lição
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.
Conheça os instrutores
Roman JasterVisiting Faculty, Program in Graphic Design
School of Art
Allison, you're up. Let's talk about your mock ups.
The homepage anyway, here it is.
Yes. So, I guess we can start with the mission statement on top of the photo.
I just wanted to make it clear what this website was about and that
it's catering just to the Santa Clarita Businesses in the area.
Catering Delicious Italian Cuisine to Santa Clarita Businesses.
I want it to be the first thing you see and doesn't fall back.
That's something that you carried over from your wireframes too.
The logo.
Yeah, the logo.
We can look at the iterations that it went through,
but I think from the beginning I always wanted it to be typographic,
to just focus on that feel that the type
would carry and the sophistication or eagerness to that.
I started out by looking at more homey type Italian things that we saw on my mood board.
So, I started with that and then I tried-
So, the first one almost looks like it's like the corner mom-and-pop restaurant.
A little goofy.
Yeah. Like some painting.
Like you make some typefaces there. Is that it?
Yeah, like brush.
Which, I guess, didn't communicate like the upscale.
Yeah the sophistication that I wanted.
So then, I tried doing more of a gestural movement to represent like a noodle,
but it's also not like a signature just-
Signature noodle.
Yeah, a signature noodle.
Or dough being stretched.
Yeah, but that also felt very
thin and not as bold as I would like it to be. So, I'm back and-
Maybe too edgy too.
It's like almost the opposite.
Yeah, too edgy. Yeah.
Yeah.
It's not really a Clarita, it's not-
It's not LA or Caribbean.
So, I went back and I looked into Art Deco,
Italian signage and stuff like that,
and I did like it inline typeface but it felt very on the news,
like an Italian brand.
A little generic.
Yeah, a little Generic.
So, then I move down onto something that still
felt kind of Art Deco but also a little more contemporary.
Like the Art Deco is still in the "A" character,
the raised bar and the rounded top,
but the other characters is here.
What typeface is this?
This is Matryoshka.
Matryoshka. Yeah, the other characters
feel quite contemporary. Like I think they are rounded?
I modified the A's to have the higher type- Yeah.
Tricky. Nice.
Yeah.
Nice move.
Then, a final move to like trying to go back to,
like the pasta I changed "S".
The noodle "S"?
Yes.
The noodle S. I think the final one really retains also the mood board too.
I could see that on an old packaging or something.
It's like upscale sophisticated contemporary,
but with this wholesome and retain some of the historical references.
Back to the logo I think one might think it also has a little bit of spirit,
as a little bit of fun,
it's not completely just no nonsense like this.
There's a little bit of a wink.
The "S". The "S" is the wink. Yeah, the Pasta "S".
What other typefaces are you using?
So, I used Redress regular for some of the headers down below,
the more ornate script.
Right. Like right here.
Just for the Italian,
almost half the page,
and then the rest use Apercu,
which is just a workhorse san serif.
It's friendly, corporate, but also very clean and you can tamper.
So, this right here is in our Apercu?
Yes.Up here you're using- for the main navigation using Matryoshka.
Yeah, to match the logo.
That's the only place you might use it right.
Everything else is in Apercu or Redress.
Talked a little bit about the colors,
deep blues, gold, some red.
Yeah. So, I wanted to still use colors that you usually think about,
like Italian for like red,
yellow and maybe like some like dark green,
but I also want it to be a little more dressed up and sophisticated.
So, I want the dark navy blue,
I felt like that's not a usual traditional,
a tying color, but it went in with the office, cleaned up vibe.
There's something legal about that background color, and then the other,
the gold or the yellow that brings in the pasta color and then the red from the tomato.
All the colors from nature.
So, one thing I wanted to talk about is that you place the logo in
the center of your navigation,
which is or just kind of- it's not unprecedented
if you look at websites out there that happens,
and I think it works really well here, this design.
It's totally fine.
One thing to keep in mind though is if in
the future your client adds a menu item, a seventh,
then all of a sudden you don't have three on the left, three on the right,
and it could be a potential problem,
or if you take one away,
then you have two on the left, two on the right.
So, it's something to keep in the back of your mind.
I think it's fine here,
and, as I said,
it's certainly done but it boxes you in
a little bit in terms of what might happen in the future.
Yeah. I think it was because I wanted to go at the restaurant menu type look
or have like a legal logo placement in the centers that you focus on going there.
But I consider the fact that if there are things that the client needs to change,
we'd have to refigure the placement.
That's a concern, we are well-concerned
that one would have to talk that through with the client.
Do you anticipate these menus changing?
Even if it does change,
then maybe the logo moves to the left,
it wouldn't be the lowest to either.
Although everything has like the central access at least on the homepage,
which works a bit like a menu,
and it looks really nice.
We also had some discussions,
when you were working in this,
about the use of Italian,
because you went back and forth,
there was more Italian at one point, less Italian.
Now, here on this homepage,
you have two places,
and you wanted to bring that in as a fun voice.
Yeah, just like a light added voice.
It is go act to like the spirit of my website,
but not it be fully in Italian or I guess fully like American,
because it is like American-Italian food,
and I only want to use it in certain places like on the thank you page
or like on the homepage and like to call it a-
Because the danger is to use it too much where, let's say,
the button actually says begin your order with us,
which I guess is already pronounced as-
Cominciamo.
Cominciamo, that means begin.
So, the button, I don't know if one of your earlier versions actually had the button,
I don't know, but it could be an option.
But then people don't know what it says.
Yeah.
So, you're being very Italian, but you lose the-
You lose the communication.
Okay, not ideal.
It's like bringing some lively Italian spirit into the office,
just like little migration.
If we don't understand this then, it's fine.
Yeah.
It's like no harm done.
Then you images, but do they communicate.
Yeah. One of the banner,
the first image that you see to communicate fresh Italian food,
and then I chose the other two smaller images to
represent office spirit and dining, obviously.
These are also images you found on splash, right?
Yeah.
Good resource.
Lastly, here we talked about this in the wireframes too,
your live chat feature that a user can click on and communicate with someone,
hopefully they're on duty.
But then, illustrations, fun illustrations,
I think this was one of your last moves when you were working on this?
Yeah, I think there were like the final touch to
my website because originally before I wanted like an infographic with all the pasta,
and then I realized that that wasn't necessary,
but I want to bring back that kind of fun element to it to make it less corporate.
I hand-drew them and vectored in Illustrator
to make it clean but still I guess fun and inviting.
So, you started on paper?
With some of them.
Then vectorized them?
Yeah.
When you communicate to a corporate audience,
you've got to find ways to or it's nice to find ways to
mix it up a little bit without going too
far and I think these illustrations do that nicely.
Yeah, I agree.
So, lastly, quickly let's look at some Homepage developments and how this looked before.
Quite rough. Again, if you squint at it the blue color is there,
the gold is there, but different images.
Different hierarchy.
Different hierarchy.
Marco has been there too. A little chat.
Yeah, he's been hanging out for a while there.
So, you do have this in the button, the Cominciamo,
which in the final,
the Italian was more secondary.
Yeah, I pushed it back.
Which is good.
Yeah.
But here, you use a different image,
which communicates something quite different.
It communicates- I don't know,
someone pushed over the white bottle.
It's like after the part or something.
Yeah. Sometimes food photography is hard.
Like this doesn't look all that appetizing.
Yeah.
Neither does the red.
It becomes smoochy in-
Yeah, capacity. Might not help it like this.
Even what you're seeing here are catering, Italiano,
but I don't know what is Santa Clarita businesses.
Is this some kind of weird Italian?
Yeah, it's like carrying Italian to Santa Clarita business.
Okay. Yeah.
But I mixed up the English and Italian too
much that it became unclear of what I meant. Yeah.
Yeah, it doesn't work.
So then, you change the image
into something that actually looks fresh and appetizing and yummy,
and this wasn't really worked out here.
Yeah.
Kind of infographic, which you battled for a while,
what are the steps and it's a noodle, that's-
It looks more of a sign read, that's what you are saying.
Yeah.
It was supposed to be something noodle-like.
Abstract, yeah.
But then you tried to figure it out and then it became this.
There actually is a noodle.
But still maybe unnecessary to have that there.
It's also really heavy on the page too.
In terms of a wine quality.
Then also this question like maybe bringing
some images off people in an office and you found some,
but they talk about cliche'd stock images.
So, you're may at least a second one like,
you know, business deal,
handshake, this guy towering over the boss.
Then weird beard guy, hipster.
Yeah. But it also doesn't look like Italian either.
Yeah.
He's eating so.
It doesn't look like a party.
It looks like he's alone at the cafeteria,
and it's an awkward crab.
Here you also got rid of the noodle, and you have these steps.
Yeah, and I simplified it down,
but I didn't have a graphic. Yeah.
That'd have sacrificed the noodle.
Then this, again, as the final where you just have two images,
think this office spirit image is quite nice.
Mid still stock imagery,
but it doesn't feel as staged.
Then your noodle illustrations are really charming. Cool. Very nice.
Thank you.
Thanks.
Explore nosso catálogo
Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.
O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.
© 2018 Coursera Inc. Todos os direitos reservados.
