The Art of Web Design | Off Book | PBS Digital Studios

The Art of Web Design | Off Book | PBS Digital Studios


It’s important to remember when
designing a website what purpose it’s going to serve in people’s
lives. Creating a very simple easy to use, easy to understand experience, that’s the challenge of designers. It really comes down to understanding that someone is a person on the other end of the thing that you make. They’re not a number. 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 lay out. That’s how most designers in the nineties 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 corps of artists used to entertain the masses. But it turns out, they don’t really want to
go to the web for that. What they want to go to the web to do is share. Now designers realize people come here
for the content. So lets put the content first and make it
accessible to any device. And HTML five 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. 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 myriads 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 of
the information that you’re putting on to these pages. So the grid is a
system for layout. It’s the 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 way so that, through contrast, you can create
importance and meaning. There are also very important aesthetic considerations and color is a very big one of those. Being onscreen, we’re talking about
color being made with light, that being additive color. So something that you might like in print design, you know, 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 video or anything like that. When I’m considering
arranging 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 it’s 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. User research is all about
understanding peoples 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
up for people to overcome because the truth is if you have a great user
experience, user interface fades into the background. For example, Craigslist. That
website isn’t much to look at 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. 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 the way we have now and is allowing mobile to become the new mass media. 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
are they are and what information they may need at that point. In recent years, with 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 are 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. Involving your users in the process of designing your website at
every stage is so crucial. Now anyone on facebook can be a mommy blogger, so all the things that we use to need
background skills to accomplish are now accessible to everyone and I think this is great. The bar is so low that I feel like everybody can very easily make a website and that’s very empowering.

Dereck Turner

80 thoughts on “The Art of Web Design | Off Book | PBS Digital Studios

  1. Theo Pepper says:

    New OffBook YES!

  2. Carl Colglazier says:

    One of the best ones yet!

  3. shirobun says:

    Best webseries ever.

  4. Ben Wurth says:

    Anyone can make a website, sure. But just because you have the tools to make something doesn't mean you have the skills to make it good.

  5. Aaron 'Marth8880' Gilbert says:

    PBS is freakin AWESOME! πŸ˜€

  6. theowest says:

    you happen to have my name. How's that like?

  7. Olicallity says:

    Consistently some of if not the best videos on youtube.

  8. StraySora says:

    If I could subscribe more than one time I would!

  9. Daniel Liddle says:

    Love these! Keep 'em coming.

  10. Logan (Lugiaboy) says:

    Angry German Kid! OUO

  11. MeisterFalti says:

    I fucking love the music at the beginning!

  12. Hayden Karlheim says:

    I love OffBook!!!!!

  13. Fabrice Rodrigues de Aguiar says:

    Crying for the use of a christian website as a bad exemple… Way to be a narrow minded stereotypical hyper-religious dick David…

    The video was very good by the way. Very informative πŸ™‚

  14. Alex Bevan says:

    Responsive design over apps, yes please!
    BreedDigital.co.uk

  15. Andreas Dimitriadis says:

    where there kangaroos at Noah's `ark? that's the question

  16. Zosia Chmiel says:

    All of PBS Off Book productions are very inspirational. There is no episode I wouldnt learnt something new

  17. MyCars says:

    There is no money in web design. You can automatically produce any sort of site for loose change. So if you meet a web designer these days they will be mostly unemployed and sitting around in a coffee shop wondering what happens next.

  18. Brady Frey says:

    You're generalizing the category- maybe there's no money in the web designer from the 90's you remember, but there very much is in UI, UX, front-end develoment, back-end development, and all the futher nuances in between. I manage four, I have seven contractors, all well paid, all bleeding edge in their careers from mobile to the rest.

  19. Brandy Miller says:

    Not true. I do make my living with web design. Yes, you can make any sort of site for loose change – if you have the time, if you want a generic site that looks like everyone else's, if you don't mind risking being overlooked by search engines because of some mistake you made on your site that you didn't even know was a mistake.

  20. Preemie Maboroshi says:

    I really like the idea that if the user experience is good, the user interface fades into the background.

  21. Sposim Spo says:

    Craigslist has a good user interface? Are you fucking kidding?

  22. David Rodriguez says:

    "The bar is so low, anyone can make a website" -_- the reason why us developers are out of a job…

  23. Shadsterwolf says:

    As a website design contest winner, every thing they explained is basic, nothing in depth. A key item is to make the users work for you.

    *ahem* facebook.

    It comes down to about the money, not the website. For all you know, the secrets lay in the code. There are many things you dont know about.

    Like what is in the food you eat… Lol
    This world is all about simplicity and money.

  24. Tim Suite says:

    appearance != ease-of-use

  25. x2xHalox2x says:

    i like the video to go back n watch it when i start building my website ty πŸ™‚

  26. tobiasstorm says:

    This is a Great intro video into web design. So easy to understand and so informative. I have been doing web design and HTML and Cascading Style Sheets (CSS) for what seems like for ever now.

  27. Alex Gowers says:

    Great video, but I used to love the days when, your dad didn't go online and it required an IQ to create a website. Now the internet has become the place that appeals to the lowest common denominator, base humour and taste. The idea of media created by the masses is lovely but the reality is it's just junk and crap no one wants. It's so hard to find quality content online, the buzz of social media has dissolved the quality info that used to be available.

  28. ElDoombot says:

    It still requires intelligence, effort, and experience to create an engaging and enjoyable UI and UX. I don't know how far back you're talking about, but the ability for the average random user to create a website has been around for over a decade (see Angelfire, Geocities, etc). The set of protocols that form the basis of the Internet were created to help people connect and share information. Sure we share a lot of drivel, but the Internet has always been full of that.

  29. Mike McCormack II says:

    I love how they showed WIX!

  30. Prevenger says:

    2:00 my favorite band ever ^_^

  31. jankath says:

    I am your father and you disappointed me and your mom. She's crying.com

  32. Mario Cortes says:

    I am a web designer & this video hit the mark! Kudos to everyone that made this! Wow!

  33. deadwhitespace says:

    Coolio.

  34. NoQuo says:

    i dont know how i got unsubbed :/ at least i realized i didnt have a new episode in my sub box for a while!

  35. Boaz Arch says:

    Good explanation. Thank you.

  36. Paolo Franzese says:

    Great!

  37. bjsko87 says:

    We're RWD in my class right now, and this is really some great inspiration.
    The OffBook-series are fantastic, I would very much like to see some more.
    Keep up the great work! πŸ™‚

  38. Ben Locsei says:

    This is a really shallow piece of information thogh.

  39. Starryliscious says:

    This Channel is awesome πŸ˜€

  40. MyCars says:

    I'm the head of design for Europe in a large corporation. I've been building sites from the birth of the wobbldy WOrld wide web. I'd say that there was a peak of design innovation. It went backwards from there. User interaction at the front end was being lectured in the early 90's, I developed some of the worlds first content management systems. Most off shelf templates are adequate now, and cheap, and easily editable. Information and supply of relevant information is key. Design is just slap.

  41. Rob Baynard says:

    Thank you for this production PBS. The Visual Design Fundamentals section with Jason Santa Maria was very valuable. The fact that web design should be thought of very differently than print design is a very valuable point. I experience the same issues as a video professional, trying to explain to clients that the font they are so fond of for use in their email or word documents, usually does not translate well on screen. Your point about additive color is very valid too. Thank you for this.

  42. Luciano Sales says:

    Se vocΓͺ curte ou trabalha com web, precisa ver esse vΓ­deo…

  43. enzudesign says:

    Great video, very true indeed, should help a lot of those new to the industry πŸ™‚

  44. bunnihilator says:

    you developers have no emotion, first of all we are talking about a product made for the people, we human beings are visually oriented, we have eyes to gather visual information like shapes, lines, we are surrounded by graphics, it makes us understand better and better express ourselves.

    webdesign is not only about graphics or code, we also care about our clients needs and work together to achieve website/service success.

  45. Lewis Ford says:

    So the internet should just stay as it was 20 years ago? You did a very good job developing the foundations of what we use but to just leave it would be a waste. That's how technology works. With that logic the Nokia 3310 was a good phone, we'll use that forever. We'll all work with IBM machines and Apple II's because they worked.

  46. Sam Alexander says:

    Great video… also was that Patrick Norton at 5:30 πŸ˜€

  47. Ron Chistik says:

    Cool!

  48. Alex Cohn says:

    I just found out a WP training course that will help you transform WordPress into a professional marketing platform. It is a really stunning and very important course for any marketer in any niche, You can literally follow the videos step by step and transform your blog in a few hours. if you wanna learn more search on YTube for a video titled: –––»"QQ Course" «–– and become a WordPress Guru in no time!

  49. Nurkhan Abats says:

    music in the background as a serious obstacle, I know English is not so good

  50. zyelon Cmputech says:

    Hey..
    Cool video and great information fr the website development..
    thanx for share this..

  51. David Keever says:

    ok so i play bo2 and im in FaZe. do you think u could help are clan out by disigning a youtube channle style and website disign B) fail spalling srry

  52. DanasDesigns1969 says:

    This was a really Great video! However ~ I would like to note the one guy saying web design uses Additive Color ~ that is wrong. CMYK is Additive Color. All screen displays use rgb which is Subtractive Color actually. RGB is based on the light spectrum, obviously.

  53. alex larsen says:

    im also a designer.. and i totally agree

  54. Marfinites says:

    Hey great video. I have been struggling to find early web designers. Do you know where can i find information about that? Thank you.

  55. Patrik Grip-Jansson says:

    @DanasDesigns1969 You've got your color systems mixed up. RGB is additive and CMYK is subtractive.

  56. Joe Steadman says:

    If your website isn't appealing, then people are going to leave. Simplicity is key. But don't be too simple. There is a balance.

  57. seosauce says:

    interesting stuff thanks for the video

  58. Lorrie Chittum says:

    Get hosting account for just 1 cent at hostgator using coupon "1centaprlmay2013".

  59. Smith James L says:

    Trying to work and learn from the PROFI we become a PROFI RNMONEAEYATHOME.HOSTEI.COM this site helped and help many people, even me, I was not friends with the computer end now I'm making 100$ minimum at day depends days,maximum for me was 700$, beautiful day, I know I can do more if you wanna try RNMONEAEYATHOME.HOSTEI.COM

  60. Sahab Shahessain says:

    really nice site, but a lot of website owners don't realize that average time people spend in their sites are about 10-20 sec. Increase it by adding some more interactive content like spokesperson etc. tamtamtools. com

  61. Gardner-Webb University says:

    Hey this video has shots taken at Gardner-Webb University -I'd love to know how PBS obtained permission to use those shots?

  62. Kendrick Lamar says:

    I like this video pretty informative. If your looking for quality website design in pittsburgh check out ο½ˆο½”ο½”ο½://ο½—ο½—ο½—.ο½’ο½…ο½…ο½Œ-web.com/

  63. Chosen Web Host says:

    And the internet continues to grow at a very fast rate.

  64. nelsona203 says:

    Contact Web Focus LLC if you want a professional design!

  65. Peter Hatherley says:

    This is a good primer on the various mediums of creative web design and development with tablets, desktop and smartphone. Amazing what you can find out in 7 minutes about your own website's potential. Compare it against the thought that went into your own marketing and development.Β 

  66. SimplyGoon says:

    I know content is king but it seems to me a lot of designers are putting aesthetics on the back burner these days. Id like to see more artistic and creative designs on the web. Dont get me wrong they are out there but too far in between in my opinion.Β 

  67. Jake Pranger says:

    Β I liked your video.I am new to this business.How long have you been in the industry?

  68. chezb says:

    DId Google watch this video? Probably not.

  69. CorporalPoon says:

    pretentious as fuck

  70. sterlingthornhill.web44.net says:

    Good video content, 7.03 minutes well used.

  71. Sunnyvale SEO says:

    Some great points between design and the user experience from then and now.

  72. ADEL SEO says:

    For me the looks of the website is the very first impression to the visitors. Of course content is still king when it comes to the ranking on search engine and leads generation.Β 

  73. How to Build a Website says:

    Great Video for all people with a website

  74. gigglesnsmiles22 says:

    Lm

  75. Majestic Travel With LARRY & UMEKA says:

    I would say that all people really need to get into presenting their online business on the world wide web. I also assume that ranking in the major serps might be a great starting position. Excellent video!

  76. SEO ANTWERPEN says:

    Great video.

  77. MajinAnthony says:

    Upload

    Search

    Search

    6:31 / 7:06

  78. MajinAnthony says:

    https://www.youtube.com/watch?v=3iVVM_DgWY4&feature=youtu.be

  79. pranoi s says:

    Great video. I have read an article on the same topic written by Lauchilin McDonald https://linknow.com/blog/2016/09/26/the-art-of-web-design/. This video explains better.

  80. Jorge Gonzalez says:

    i love it

Leave a Reply

Your email address will not be published. Required fields are marked *