Skip to main content

Modern Web Design Demystified

Lesson 32 of 37

Applying the Style Guide to the Pattern Library

Andy Pratt, Jesse Arnold

Modern Web Design Demystified

Andy Pratt, Jesse Arnold

Starting under


Get access to this class +2000 more taught by the world's top experts

  • 24/7 access via desktop, mobile, or TV
  • New classes added every month
  • Download lessons for offline viewing
  • Exclusive content for subscribers

Lesson Info

32. Applying the Style Guide to the Pattern Library


  Class Trailer
Now Playing
1 Class Introduction Duration:09:10
2 The Design Flow Basics Duration:18:27
3 The Designer as Co-Creators Duration:06:48
4 Get to Know Your Material Duration:17:07
6 Mobile First: Working Small Duration:09:46
9 Prioritize Your Users Duration:39:42
11 Intro to Scrum Duration:04:24
12 User Stories & Epics Duration:35:53
13 Content Basics Duration:27:40
14 Defining the Visual Language Duration:22:31
15 Starting with Type Duration:35:31
16 Starting with Grids Duration:15:40
17 Gutcheck & The Product Brief Duration:22:03
18 Working With Developers Duration:12:33
19 Communicating with Developers Duration:16:25
21 Code Literacy Duration:04:37
22 Sitemap & Wireframe Basics Duration:33:48
23 Prototyping Basics Duration:12:02
24 HTML Prototypes Duration:13:28
26 Developer Lingo Duration:07:23
28 Designing for Performance Duration:18:19
29 Progressive Enhancements Duration:07:00
31 Workflow Examples Duration:20:25
33 Alternative Workflow Duration:23:04
34 Alternative Workflow Part 2 Duration:21:52
35 Tech Requirements Duration:21:53
36 Retrofitting an Existing Site Duration:12:15

Lesson Info

Applying the Style Guide to the Pattern Library

So, the library itself. We've got styles. We've got components, and we've got templates and pages. Click overview and then we'll open it up. Styles that we have laid out, or separated from our component layer. We've actually mapped out the markup, separated from our template layer. Which is finally separated from our finished product. Again, all this stuff is in browser, all of these resources are part of the bonus material for the class for everybody to look at. So, this a sample exhibition page, you can see, we've poured all this content in. It's not necessarily styled, as much as it represents in-browser testing of components and reflow. I go from large, to medium here, one break point happens, and we get this extra spacing, around things. And then when we close again, to smaller sizes, font sizes shift one more time, spacing collapses even. We remove all grid reference, and we have a completely vertical website. So again, we mapped that out, on the wire frame level. So, and dude, t...

his is the magic. So,, is now an open source project, that, encourage anybody who wants to get into code land get, but this replaces a lot of more technical applications, like, gits, and, I don't even wanna list them. It puts a lot of things a developer would use, into like a My First Development Kit, and allows you to really get started, using boiler plates. So, it does a lot of work for you, and really simplifies and streamlines the process. So again, we want patterns now, so, I'm launching the patterns project. And what it does, on a pseudo-technical level, is it's processing all of my on-complied documents, and packaging up something I can look at in the browser. This is what a real development environment looks like. Everything exists as component pieces for efficiency, but there's a little bit of technical work that needs to be done, in order for me to experience it locally. And so, the view local action with the, allows me to immediately to have a local server up and running, I didn't have to do any of the traditional MAMP, PHP, Database, MySQL, lots of things we don't wanna ever get to know. So, does all that stuff for you, and just gives you a discreet, numerical but again, local, live thing. I can start porting services like type kit and all this stuff into this, straight away. And again, we're in the browser. What? This was like a picture of a thing. So now, look at this logo, this SVG logo, does that get any bittier? No. It gets even bigger, when I go smaller. It snaps to the screen, 'cause I removed my grid. Everything is growing and shrinking, based on pre-set break points, that we learned about, when we did our component, or content reference wire frame. These are the spacer blocks, again, invisible design. This is that vertical grid we talked about yesterday. These sort of invisible heroes, that give us that spatial personality, as our site grows and shrinks. And again, everything's measured in m's, 'cause we don't know, what the pixels are, because densities keep changing, and Apple invents a new one, and Android invents a new one. Our type grid is responsive. We've specked out, larger sizes for desktop, and smaller sizes for mobile. We started in Typecast, had Typecast create a type scale for us, made manual edits to that. And traditionally, what would we have to do in a static style guide? We'd have to render them both twice. Here's the desktop version, here's the mobile version. Why would I do that, if it's in the browser? It is responsive. So, all I have to measure, I just have to render it once. And that way, when I shrink it, it does what it shows me what it does. It gets smaller in mobile. So, I don't have to, there's not this repetition, you're actually showing what it does. You're exposing this, these aren't the rules, these are the seeds. These aren't the guidelines, this is the stuff. So, it's different than your traditional style guide. We have all these different button types, again, Foundation gives you a lot of options, as far out of the box, having small, big, round. We've got separate navigation, for mobile. Again, this is all Foundation, standard stuff. Our typography system, lives as a separate atom. We have not just the headers outlined, we have what is an actual block of content look like. Like again, things might make sense in math, but does it make sense, and does it read well, as a piece of content? We give an actual article, that sort of maps out what a piece of content looks like. Again, we document the grid system. Just enough documentation, this documentation's actually pulled from Foundation, and put here, so again, we don't use all of Foundation, we only document those pieces that our team need to be readily aware of. So, again, this content is theirs, we've restyled and housed it here, so it's specific to this component. There might be a chance in the future, that we ditch Foundation grid system, 'cause Bootstrap's is better, and you can do that. When we invent our own grid system, and we can do that. The whole pattern library itself is modular, so you can, you don't have to have this strict standard, and whatever you're using, is documented here, that's the good news. So, we have this agreed upon location. And now, we actually get into the atoms themselves. The colors are documented. Form elements, again, we have, we have some full width layouts and our site, and we have some contained layouts in our site, so we wanna make sure, both of these layouts, are represented, so we offer them both. A nine column and a 12 column, within the pattern library. On the button side of things, we give all the variant types of buttons, as well as, the classes necessary, to carry out those buttons. So again, instructional, and shows the variety of the UI. There're kind of these invisible things, called utilities, that developers are gonna need. And so, these are visibility classes as far as show this on medium and only small, show this on small, and only medium, and all of that stuff, you get to see working in the browser, and you can see, some of the markup that's associated with that. And again, it's not just the visual repose, it's a functional repo. We get into larger components, and so, now we're into these things, these molecules, this is a hero unit. This is those big, immersive photos at the top of the page, here's the markup that you need, in order to use this component in a prototype you might be building. And then finally, we get into the blocks themselves. So, these are all the modular pieces that exist throughout the UI across different templates. Things like navigation, asides and floaters, are also rendered, the mobile navigation is here. Template, single pages, and then, finally, our home page. Well, our home page isn't rendered. Again, this is a home page template. So, so yeah, this is what our pattern library allows us to do. So, as you can see, these are all of the pieces of the puzzle, all coming together, all rolled into one, final deliverable, that that hopefully, takes some gaps out of the how does this relate to that, sort of one, unified story, yeah.

Class Description

Online web design is not just about choosing fonts, colors, and layouts. The days of throwing a static visual comp over the wall are ending. Designers are now encouraged to work side by side with clients and developers. In Modern Web Design Demystified you’ll learn how to communicate with developers and collaborate with your clients in order to design websites that function as well as they look. You’ll learn about: 

  • The fundamentals of responsive web design
  • Working with Clients to identify and prioritize goals
  • How to communicate with Developers
  • Best practices for project workflow
In this online web design course, Andy and Jesse will share real world case studies to help you understand exactly what goes into creating and launching a website from the ground up. They’ll tell you about the tools they use and offer tips on working with everyone from the coder to the client.

High-quality web design is complex, but it gives businesses and orgs the opportunity to really connect with their users. Learn the ins and outs of the entire web design workflow process in the Modern Web Design Demystified course.

Bonus materials include: 
  • Sample Dev Tickets
  • Responsive HTML Wireframes
  • HTML Pattern Library
  • Sample High Resolution Visual Comps
  • and more! 



I've already taken several web design classes, but there were still some details that I found confusing. Andy and Jesse did a great job of explaining things like; programming languages and how they interact to form the structure of a site, work flow responsibilities between team members and the blurry lines between them; and agile methodologies applied to work flow. They used case studies to illustrate how this all happens, where variations crop up, and how to address them. If you're new to web design, or just want to understand the functions of other team members, this is a great real world look at the whole process. I haven't found this in any other class, either on-line or local. Andy and Jesse are both very experienced working designers with current knowledge. They're very responsive to questions and seem to really enjoy teaching. Having two instructors is a great benefit because you get double the perspective, knowledge, etc.

Junko Bridston

I worked with Andy when he was a Creative Director at Funny Garbage, a design studio in New York City. I found him to be knowledgeable​, articulate, and lovely to work with. I learned so much from him at the beginning of my career. In response to a previous comment: it seems silly to dismiss this class because Andy wears t-shirts with his blazers. If you think leaders only wear suits and ties, then maybe this class isn't for you. But if you want to learn from someone with loads of experience and a friendly manner, I really recommend it. You won’t be disappointed.


I was looking for a class that would not only address the web design basics but also their place and function as part of a workflow. This class did not disappoint and Andy's and Jesse's engaging presentation style made it easy for me to follow along during the 2-day live session. By using real life examples, the presenters provide plenty of tips and strategies how to best work with clients and developers alike — the many, often intangible ingredients that go beyond technical expertise and can make or break a project. Highly recommended.