
The Art of Web Design
Special | 6m 36sVideo has Closed Captions
Web design has dramatically shaped the way we experience and interact with information.
The explosion of the internet over the past 20 years has led to the development of one of the newest creative mediums: the website. Web designers have adapted through the technological developments of html, CSS, Flash, and JavaScript, and have mastered the balance between creativity and usability. Now, the rise of mobile computing is further changing our expectations for responsible web design.

The Art of Web Design
Special | 6m 36sVideo has Closed Captions
The explosion of the internet over the past 20 years has led to the development of one of the newest creative mediums: the website. Web designers have adapted through the technological developments of html, CSS, Flash, and JavaScript, and have mastered the balance between creativity and usability. Now, the rise of mobile computing is further changing our expectations for responsible web design.
How to Watch Off Book
Off Book is available to stream on pbs.org and the free PBS App, available on iPhone, Apple TV, Android TV, Android smartphones, Amazon Fire TV, Amazon Fire Tablet, Roku, Samsung Smart TV, and Vizio.
[music playing] WHITNEY HESS: It's important to remember when designing a website what purpose it's going to serve in people's lives.
JEFFREY ZELDMAN: Creating a very simple, easy to use, easy to understand experience-- that's the challenge of designers.
JASON SANTA MARIA: It really comes down to understanding that someone is a person on the other end of the thing we make.
They're not a number.
JEFFREY ZELDMAN: When Tim Berners-Lee created HTML, he was writing something that would allow scientists to share physics papers over the internet.
HTML is so simple.
It's just take your content, and structure it, and make it accessible to any device.
It used to be that you used HTML to do your layout.
That's how most designers in the '90s did their stuff.
They used HTML table cells, sliced and diced images, and that's how they worked.
But the content was all mixed up with the layout, so CSS allowed designers to separate structure of their content from the presentation of their content.
That was a big advance.
And behavior-- that's controlled by JavaScript-- that's separate again.
The next big thing that happens is the dominance of Flash for several years, because that's where they had real control over typography, and they could do all kinds of dynamic stuff that were much harder to pull off in HTML.
But Flash was really good if you thought of the web as something that a small core of artists used to entertain the masses, but it turns out they don't really want to go to a web for that.
What they want to go to the web to do is share.
Now designers have realized people come here for the content, so let's put the content first and make it accessible to any device.
And HTML5 becomes stable enough that developers start paying attention to it.
All of a sudden, it's about apps.
It's about applications being built with HTML.
So HTML is the cockroach that will survive a nuclear winter.
JASON SANTA MARIA: People judge web design through the lens of print design, but the two are not that analogous.
The screen is a very different medium than a page.
There are a myriad of different decisions that you can make, and that's the interesting process as a designer.
I usually start with content, but beyond that, start thinking about how someone's going to navigate and traverse all the information that you're putting onto these pages.
So the grid is a system for layout.
It's a structure that you can apply to a canvas to help you organize content in a systematic way.
But also, the grid will allow you to structure things in a hierarchical so that through contrast, you can create importance and meaning.
There are also very important aesthetic considerations, and color is a very big one, because being on screen, we're talking about color being made of light, that being additive color.
So something that you might like in print design-- a very vibrant yellow or a very strong black-- might not look that good on screen, because it could be too contrasted, or it might not be contrasted enough.
And choosing the right typeface becomes another asset on a page, just like an image or a video or anything like that.
When I'm considering a ranging type, I have to think of someone actually needs to read this.
If something is a headline, or if I want someone to read something first, I'm going to make that stand out.
I'm going to make sure that's it either the biggest, it's the first on the page, it's the most eye-catching, and that will, once again, then reinforce the structure of all the other content on the page.
On the web, you can always change something.
You can always evolve it.
You can always try to make that experience better.
Does it resonate with people, and do they get something out of it?
Do they learn something?
Are they moved to action?
I think all of those are goals of the art of web design.
WHITNEY HESS: User research is all about understanding people's behaviors.
When you're using a website that is impossible to get through, that is a failure of user experience, because the person who created it never took the time to understand what their target audience actually need.
An example of a company that's really getting this right is Etsy.
They were really thoughtful about the unique ways in which their target audience would want to search for items like being able to look for something by color or by texture or by the age of an item.
When you have a site like Facebook that has features all over it, that's the result of having to meet so many different segments' needs, and so don't put roadblocks for people to overcome, because the truth is if you have a great user experience, the user interface fades into the background.
For example, Craigslist-- that website isn't much to look that, but the user experience that they create is so helpful to people that it doesn't really matter what that user interface looks like.
Design isn't really about the bells and whistles.
It's about serving people's needs, and if the bells and whistles serve people's needs, then great.
And if they don't, they don't belong there.
JEFFREY ZELDMAN: The most fundamentally important thing in web design is not how the site looks.
It's is the content accessible to everyone?
And it's really that thinking that allowed us to move into mobile that way we have now, and is allowing mobile to become the new mass media.
WHITNEY HESS: Now we don't even know the physical context in which users are accessing our websites.
They may be at home.
They may be at work.
They may be sitting on the toilet, and we have to take into account where they are and what information they may need at that point.
JASON SANTA MARIA: In recent years, at the rise of something called responsive web design, people are designing one website and allowing that content to reflow and adapt to different screen sizes and different resolutions.
And that experience is more tailored to the device that you're on.
The rise of apps has changed things considerably too, but I feel as though that's even more young, obviously, than web design.
And it still remains to be seen what the real impact of that is, but I feel as though the average web user has matured a lot.
Once people have that language, once they understand it, you can keep building upon it and make new things out of that.
Now truly, anyone with a phone from a protest in Egypt or anywhere can say something to the whole world, so that's pretty magical.
And I think that's the most important change that has happened.
WHITNEY HESS: Involving your users in the process of designing your website at every stage is so crucial.
JEFFREY ZELDMAN: Now anyone on Facebook can be a mommy blogger.
So all the things that we used to need background skills to accomplish are now accessible to everyone, and I think this is great.
WHITNEY HESS: The bar is so low that I feel like everybody can very make a website, and that's very empowering.
[music playing]