Applying the Style Guide to the Pattern Library
Lesson 32 from: Modern Web Design DemystifiedAndy Pratt, Jesse Arnold
Applying the Style Guide to the Pattern Library
Lesson 32 from: Modern Web Design DemystifiedAndy Pratt, Jesse Arnold
Lessons
Day 1
1Class Introduction
09:10 2The Design Flow Basics
18:27 3The Designer as Co-Creators
06:48 4Get to Know Your Material
17:07 5Responsive Vocab: Floats, Flows, & Images
11:58 6Mobile First: Working Small
09:46 7Future Friendly: Embrace Unpredictability
14:17Collaborating with Your Clients
13:52 9Prioritize Your Users
39:42 10Best Practices for Defining Success
08:58 11Intro to Scrum
04:24 12User Stories & Epics
35:53 13Content Basics
27:40 14Defining the Visual Language
22:31 15Starting with Type
35:31 16Starting with Grids
15:40 17Gutcheck & The Product Brief
22:03 18Working With Developers
12:33 19Communicating with Developers
16:25 20Finding a Common Language with Developers
06:28 21Code Literacy
04:37 22Sitemap & Wireframe Basics
33:48 23Prototyping Basics
12:02 24HTML Prototypes
13:28 25Code Literacy & Developer Tools
11:46 26Developer Lingo
07:23 27Interface Personality & Behavior Galleries
17:27 28Designing for Performance
18:19 29Progressive Enhancements
07:00 30Designing a System: Discovery to Pattern Library
12:25 31Workflow Examples
20:25 32Applying the Style Guide to the Pattern Library
09:08 33Alternative Workflow
23:04 34Alternative Workflow Part 2
21:52 35Tech Requirements
21:53 36Retrofitting an Existing Site
12:15 37Project Cupcake: Building a Site from Scratch
24:08Day 2
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, mixture.io, 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 mixture.io, 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, mixture.io 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 Materials
Bonus Materials with RSVP
Bonus Materials with Purchase
Ratings and Reviews
CityGirl
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.
Jesah Segal
From A to Z, this class methodically covers everything you need to know to create a website from scratch. Great class. The teachers are great too.
Student Work
Related Classes
Branding