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 Fonts
Loading...
来自 California Institute of the Arts 的课程
Web Design: Wireframes to Prototypes
24 个评分
从本节课中
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.
与讲师见面
Roman JasterVisiting Faculty, Program in Graphic Design
School of Art
Typography for the web used to be quite limited.
In the old days and I mean the time roughly before 2010,
it wasn't easy to just use any typeface you wanted on a website.
The reason for this is that fonts are software and
they need to be installed on a computer before they can be used.
So, you can design your website to use let's say the typeface Cooper Black,
and this will work on your computer just fine because you have this typeface installed,
but you can't be sure that the typeface is installed on your user's computers.
A browser will only render the typeface if it's actually installed.
If it isn't installed,
users will see a default typeface replacement instead.
There are a few typefaces however that are installed on almost all computers.
So, for a long time,
these five fonts for driving most of the topography of the web: Arial,
Georgia, Verdana, Times New Roman, and Courier.
These are pretty nice typefaces especially Georgia and Verdana which were
designed specifically for low-resolution screens by Matthew Carter in the 90s.
But we can all agree that being stuck with
just five typefaces for every website on the Internet is pretty limiting and
boring and what we would call fine topography and
attention to detail that has a rich history in print design,
wasn't even attempted on the web in those days.
There were a few hacky solutions to this typeface problem.
Mostly web designers would simply create bitmap images of texts they wanted to use.
They would create the text and the typeface they wanted to use in Photoshop,
then export an image and place these images into their designs.
Here's The New Yorker website from 2008.
Most of the type are set in Arial and Times New Roman.
But you can see that the iconic New Yorker typeface for
headlines is being used in a few places,
and those had to be created as images.
This was a pretty cumbersome process.
Every time new texts was to be added,
a designer had to create a new image.
This method couldn't be used for dynamically generated text,
a user comment for example,
and maybe most egregiously text as image causes many accessibility problems.
Screen readers for visually impaired users can't read it,
users can't select and copy it,
and search engines can't index sets.
So, in a way, designers at the time in their quest for more aesthetic web experience,
were breaking fundamental qualities of what made the web so great in the first place.
But luckily, things changed around the year
2010 when the technology of Web fonts was added to browsers,
which allowed for the use of custom typefaces.
The CSS property @font-face was now widely
supported and designers are ready to exploit new possibilities.
Here's an early example,
which was designed to showcase the promise of the new technology.
The site is still online at lostworldsfairs.com
and it includes a few additional visually extravagant examples.
These designs were quite a revelation at the time.
Finally, the quality of web typography was ready to catch up with that of print.
By the way, here's The New Yorker website as it looks today.
As expected, there are no more images for type,
all the type is using custom web fonts.
So, take a moment to appreciate how much more exciting it is to be a web designer today,
where once there were only a handful of typefaces available.
Now, we have literally thousands.
So, where can you get web fonts?
It goes without saying that you shouldn't use typefaces illegally.
There are plenty of ethical reasons not to do that of course,
but they are legal reasons too.
Since websites are so transparent,
it's really easy to look at the code behind the scenes and it's also quite
easy to find out if someone is using a typeface without a proper license.
So, the very first thing to do before deciding on a typeface for
a web project is to find out if it's available for online use.
This should generally not be a problem today as pretty
much all web foundries offer web licenses.
But you'll have to make sure that your project has a budget for fonts.
By the way, just because you own the license to use a typeface on your desktop,
doesn't mean you're allowed to use it online.
You should check with the type foundry.
But there are some attractive free options too.
Google Fonts is a favorite.
There are hundreds of freely available fonts
there and some of them are actually quite good.
I would suggest that you spend some time just browsing through
their catalog and make note of typefaces you like.
It's just a good practice for a designer to
have a few typefaces in the back of your mind,
as sort of personal library of your favorite fonts.
Then the next time you need a, let's say,
slightly condensed Sans Serif for some captioned text,
you might already know of a few contenders that you can try out right away.
Such knowledge of course also comes with experience over time.
Here are a few Google font typefaces that I use quite a bit in my work.
These Sans Serif fonts can be described as workhorses.
They are really well-designed,
they work well at small sizes,
and they are all quite neutral in their appearance.
But if you look closely, you can find some differences in the details.
Look how the tail of the 'Y' of Lato does not curl for
example or how the 'C' in PT Sans is a lot more open than the 'C' in Roboto.
You'll also notice that Roboto appears a bit heavier than
the other typefaces and that PT Sans is more condensed than Open Sans,
meaning it takes up less horizontal space.
All these are considerations when picking a typeface
and can affect the way your design communicates.
Here are some Serif typefaces I like.
Serif fonts have these little horizontal lines at the end of
the strokes and also more variations of thicks and thins.
They usually also have more personality.
See how Playfair is quite fancy and has connotations of fashion,
whilst Crimson Text has a more bookish traditional feeling.
Again, these are examples of typefaces that you can get for free at Google Fonts,
and there are literally hundreds more.
There are a few other sites that specialize in free typefaces.
You can check out dafont for example and Font Squirrel as another option.
Just be aware that the quality of free typefaces often varies.
Now, let's talk about another option,
renting typefaces via webfont delivery services.
Here, you can pay a monthly or a yearly fee and this
gives you the ability to use their typeface library in your projects.
A big one is Typekit.
It's owned by Adobe.
So, if you already have an Adobe Cloud Subscription,
you also have a Typekit accounts,
and you can use their typefaces.
Typekit has a very large selection of professional typefaces.
I actually use the service quite a bit in my own work.
A competitor to mention is cloud topography
created by the reputable typographer Jonathan Hoefler.
It's also the only place you can use their excellent type library which
includes popular fonts like Hoefler texts, knockout, and Gotham.
