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.
Web Typography: A few tips
Loading...
Del curso dictado por California Institute of the Arts
Web Design: Wireframes to Prototypes
25 calificaciones
De la lección
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.
Conoce a los instructores
Roman JasterVisiting Faculty, Program in Graphic Design
School of Art
So, let me give you a few tips that are quite specific to the web in terms of typography.
Of course, typography is a vast field and if you study graphic design,
you spend many semesters studying the intricacies of type,
and for a visual designer,
that is obviously very important to have control over typography
and create typographic hierarchy and be able to pair a typefaces et cetera.
Since this is a UX class,
this is not the focus but still here are
a few thoughts that should help you with your projects.
Size, that is a question that is often asked.
Well, how big should type B on the screen?
There are a few rules of thumbs.
If you design your body text to be at least 16 pixels,
you should be fine,
especially on mobile devices.
On a phone, I wouldn't make the type any bigger than 16 pixels.
But also consider bigger screens at a desktop,
you might go up to 20 or even 24 pixels.
The bigger the screen,
the further a user usually sits away from it.
On a hand-held phone, you have it quite close to
your face but if you have a giant desktop screen,
you actually might lean back or sit an arm length away from it.
So, making the text bigger is appropriate and you also have a lot more space.
In general, don't be afraid to make some type really big.
Here's a nice example from the design company IDEO and this
is their homepage and look at how giant these three links are.
It's quite jarring and beautiful and unexpected.
There's three big links and if you go to their blog,
you can see that the headline of the blog is also in
relationship to the other elements even their logo or let's say the author's name,
it's giant but it's really refreshing, right?
In some sense, if you look at the trends of the web in recent years,
I feel like a big type really has been a thing and I personally,
like it quite a lot.
Because you can create drama and you can make the typefaces really shine.
You can see type gets bigger.
Instead of seeing just texture and whole words,
you actually see the designs of each letter and that is nice.
Let's move on to line length and line height.
There's a general rule and this pertains to
traditional print typography two that for an ideal reading experience,
there should be about 40-70 characters per line.
So that rule has repercussions on how you design your column structure.
If you're designing for the desktop,
you'll have to have some max-width on your body text column.
Otherwise, there will be too many characters per line.
By the way, this rule is generally for body text so a caption or
a small pull-quote might be longer or might be shorter than 40-70 characters.
Then line height which is called leading also in
traditional typography is generally more open for skin typography.
So, there's more line-height than you would usually do in print design.
A good starting point here is 1.5,
so 150 percent of the typeface size to the leading size.
So, in traditional typography,
you would say 20 pixels over 30 pixels,
that spacing between the line is 1.5 times.
Here's a quick illustration of what actually happens when
the line length is really small or really long.
Here at 15 characters per line,
you can't even get a complete thoughts per line.
So, it gets really cumbersome to read that for longer texts.
Then the opposite extreme,
120 characters per line on the bottom,
here you have a really hard time and you get to the end of
the line to find the next line on the left.
So, in a way, you have to almost move your entire head to be
able to read this text and it gets really cumbersome.
In terms of line height,
here is a comparison.
On the left is something that you might set in a novel,
on a magazine, or in a book.
The general rule is about 120 percent of line spacing and on the right is 150 percent.
So, it's a lot more open and it's actually a little easier to read if you look at it.
Its area, its more inviting and part of it might also be again that space.
I've set this in a previous video,
space on the web is not expensive.
You can scroll a webpage as long as you want so you might as well make
the reading experience as pleasant as possible whereas with paper,
and printed books, printed magazines,
space is at a premium because someone has to pay for the paper.
Here's another quick example from The Washington Post website.
I checked here just to see what their settings
were on the typography because it's a newspaper,
there's a lot of leading going on,
a lot of body text.
So, in this example, the body text is 19 pixels and the line height is 33.4 pixels.
If you calculate the ratio of text size to line height,
you get to 175 percent,
which is quite a lot.
But if you notice,
their line length is actually quite long too and
another typographic rule you might have heard about is the longer the line length,
the more leading you actually want to have or the
more line height you want to have for your text.
A quick word about justification.
In general, justified text needs hyphenation to be turned on to look good.
Since web browsers are not that good,
it's not impossible but they're not that good at effective hyphenation,
I would say as a general rule, don't justify text.
In my personal opinion,
justifying texts for print is questionable in
the first place because you're putting a straight jacket on the text and you say,
"Oh, it needs to be aligned on the left and the right."
So, something has to give and it's hard to
make an even texture because sometimes there are
big holes between words because of the way certain words break.
But on the web,
it's even more problematic and if you really think about and look around,
it's hardly ever done for good reasons.
Here's a quick example of two pieces of justified text.
On the left, hyphenation is turned off and on the right, there is hyphenation.
On the left, you can see that the word spacing is quite
uneven and it's just not a pleasant texture that is being created.
So, just have your text left aligned and a rag on
the right and you cannot go wrong with that.
Then lastly, I want to talk a little bit about value contrast.
What I mean by that is that as a default,
one is tempted to use black text on a white background but that
can actually look quite stark on screen and create eye fatigue.
So, one little trick is to use an
off-black for the black and an off-white for the white and
here we go back to this IDEO page that I showed earlier to see what's happening here.
If you notice that headline actually has a true black background.
It's 100 percent black and that pops off the screen
really beautifully and the letters inside are true whites,
as white as it gets.
That is nice but when you get to the reading experience on the bottom,
you start reading the text,
you ease in for a longer reading experience,
you'll notice that it's not black and white,
it's an off-white for the background like a really light
gray and the type itself is a medium gray.
I actually went ahead and looked at the values
here and you'll see the RGB values on the top,
if it was true white, it would be 255,
255, 255 so it's not.
RGB(0,0,0) would be true black.
You'll see it's quite far away from true black the color of the text.
But one other thing you'll notice is that it's not actual neutral gray.
If it was, these three colors would be the same.
Just to illustrate this,
I put a neutral gray of the same value next to it.
If you look closely,
the values that are used are a little bit towards the blue spectrum.
That's another trick, I think.
Instead of using a dark gray that is completely neutral,
push it over to one color towards blue or purple and it just makes the color more alive.
It just sparkles a little bit and you can see
this I think suddenly here in the comparison,
the neutral graze almost look a little bit dead or dull.
So, again, you don't have to use the blackest black on the
whitest white and if you use a gray,
try pushing it over to one color just to see
what happens and if it doesn't look just a little bit more interesting.
Explora nuestro catálogo
Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.
Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.
© 2019 Coursera Inc. Todos los derechos reservados.
