Lessons

Lesson Info

Starting with Grids

So next up, starting with grids. So again, I see my type system as my vertical grid, because I think traditionally, when I've prepared design systems I really immediately, really quickly got here. I went towards my horizontal grid. But, as we saw from designing mobile first, my horizontal grid doesn't do me much good. Like this grid, this grid, horizontal grid isn't as useful for me for my starting place, I'm better of starting with my type grid, my vertical grid and adding my horizontal grid as an enhancement. This is why I'm encouraging you to start with typography first. Ensure that there's measure, and rhythm, and consistency, and structure there. And pay as much attention to that before we get into this, 'cause for all intents and purposes, the desktop as a whole is an enhancement. Grid systems are cool. I start this process developing my layout system immediately after typography. I actually remember when I first started designing. I remember designers who were really opposed to ...

using fixed grid systems, they didn't really, they felt like they were constrained, that they couldn't be free, they couldn't be inspired, they felt like it was too much modernism too fast, they wanted to be more spontaneous. Rachel Shillcock says about grid systems, "A grid system is a way of providing "a system that designers can work with "to structure and present content and imagery "in a more readable, manageable way." and I agree. It's not about me as a designer, it's about the person who has to use this thing. I need to put the login button in the same place all the time. I need to put the footer in the same place consistently. I need my layout to be predictable. I need an underlying system that's going to ensure that predictability, so when I am inspired, I can take chances. So, having an underlying structure gives us the foundation to do really cool asymmetrical things. Again, these are some examples from an app called Gridset that lets you draw your own grids. You don't have to use these rigid grids that are always the same column every time. You can actually do something, again more musical, or something more architectural. Again, based on your content, I'm going to encourage you to get a content sample first, decide on your grid after that. Which is why we talked about content already. Now, I can start making proportional relationships, because now I know how big or small things are. I know how many of a thing there might be. I know how condensed or broad I need certain elements to be. I understand a certain attribute, to visual and physical of my content objects, and then I make grid decisions. Again, you can go down the rabbit hole with any of these design elements, you can nest your grids, you can have grids within grids. And again, you can add and enhance the stuff with expanding media queries. But on a fundamental level, grids do a couple of things and again, more vocab just to make sure that we're all on the same page about what they do for us as designers. They give us a system in which to apply proportions to the elements on the page. Proportions are the relationships that we create between different parts of our interface. Big, small. Major, minor. Usability. How we use our grid affects our users, it really does. This is the most underserved part of grids, I think as a designer, when it comes to the user stories and I understand that, when it comes to layout, I think I initially default to I am in this realm, this is the domain of me as a visual person. Grids allow for and ensure layout consistency and visual consistency across pages and different content types. As much as content types might change, there are certain elements that are gonna stay the same and a grid ensures that. Oh yeah, by the way, the developer is going to be your best friend, okay, use grids, they'll love ya. Proportions. So, again we talked about earlier, building with blocks. I start design sketching kind of something like this. Big, little, littler. Major, minor, secondary. I need and require a grid to help me do this, and this is again only when I get to desktop level, a lot of these decisions and hierarchy I've made at the mobile level. It's when I get to multi column layouts that I begin to sketch these low level proportions. Again, we talked about usability. What goes where? That orange block needs to be that orange block on the next page, on the next content type. I need actions and items, messaging and utility to always be present and I need that experience to be consistent. You can take all the chances that you want as the designer, you can get as spontaneous as you want within this system and your developer will still respect you, because they'll understand, even though it may be lopsided, counter-weighted and maybe disproportionate, he can measure it, he can render it predictably, and then he can work with you to find out how that flexes and goes together. Again we talked about this, percentages, the major caveat to using grids in response to design is we ditch the whole pixel logic, and we move into percentages for our widths. The other piece of the puzzle are our media query breakpoints. When I say breakpoint and I say media query, I'm talking about the same event. A media query is the method, the break point is the event. How I'm telling it to do a thing, how I'm capturing, and remember, shielding all those rules from all those other devices, that's a media query. The measurement that I insert within that media query, that's the breakpoint, that's the event. It doesn't have to be all about when it gets smaller, like at some point, this center layout doesn't make sense. No matter how flexible those columns are, I can't fit 12 of them here. I need the layout to break. So, that's when we make certain decisions about how many columns go where. I have a quick demo to illustrate some of this. So again, CodePen, Chris Coyier, nice job! This is foundations grid system, this is the HTML and CSS grid system and frame work we're going to be looking at in the following segment. You can pipe this in as a dependency to CodePen. And so, all you're responsible for is this stuff over here. I was telling someone in-between sessions, if you're working with a front end dev, and you ask somebody to set you up in a demo or an example, which I'll often do with designers that I work with, I'll set this up for them, so they can play with it. I've extracted the component and now I've given them a sandbox where they can play with variables and the cool thing about CodePen, there's a URL and once you save it, you can send me, the front end developer, the URL, and I'm like, "Oh, I see what you're talking about, thanks." We don't have to be in the same room, you don't even really have to know code, you find the variables, you adjust those variables, you see this visual relationship happening in the browser and you send me the result, and then we have a conversation. It's really great stuff. So, the grid system. This is my desktop grid, I have three, four column units at the top, I have a three and a six and a three below. That's at desktop. I shrink my window and the grid changes. Those are the same cells, adjusted. This actually is using helper classes that are within foundation. So, helper classes are tied to media queries, they're tied to breakpoints, but all you need is a class name, thank you foundation, all I need to know is the shorthand, by default I want this element to be six column units, when it gets to a small screen, but when it gets to a large screen, I need you to make this grid element four, right. That's all, that's all you are responsible for experimenting on a layout level. And again, when I sketch page layouts, I do layouts completely independent of content, my content's in a text document over here. I have a sketch on a napkin over here. I start playing with responsive breakpoints in CodePoint here, I never see this stuff together. My job as a designer is to take this content, visualize it in the napkin sketch, and then play with markup, and experiment with breakpoints. I never see that stuff at the same time. I run experiments, I share my findings and research with the developer, and then before too long I am seeing my research being trickled into the application. So, it takes some trust. You're not going to see your design done, and I think that scares a lot of designers. Like, "I'm gonna see this part, "and I'm kinda gonna see that part, "but I'm never gonna..." You're never gonna... Because it would just be too complex. It would be too complex for me to work out breakpoints and content and visual decisions all in the same thing. So we've got to separate all of those pieces into different components, different atoms, different parts of the puzzle, work them out as independent, and trust in the process that they're all gonna come together. Again, there is no shortages of these frameworks, what we looked at, that was a foundation of the example, we're gonna dig more into the foundation in the following segment. But, a really popular one is Bootstrap, it uses a very similar logic, right. Column medium four, column medium six, column medium eight, you're telling, and that class is only talking to that breakpoint. Outside that breakpoint, the browser doesn't even see that class, it looks for something else. We just took a look at the Foundation framework, again, readily available. And the good news is, you can still abide by these rules and regulations, and limitations, and frameworks, and stay in the graphics application. This is the Foundation framework template for desktop and it's available online, so are the Bootstrap ones for all major breakpoints. You can still use the same measurement, still respect where you're going, and stay in Photoshop the whole time. Again, as long as we're all playing by the same rules. We just have to agree upon the set of rules that we'll all sort of use, and that way we're not running into conflict later. We make these decisions upfront, we like Bootstrap for that reason, we like Foundation for this reason, and that reason, let's come to consensus, we decide on one so now we're gonna all use that system, and those are the measurements and templates that are available to us. One little advanced piece is I'll change the gutters that come with Foundation out of the box first thing, to match my line hight to match my base unit that I generated from my grid lover template. One number that used to be this vertical spacing, I'll flip it. I'll change that variable in Foundation, and now my grid and foundation feels like my horizontal grid, or my vertical grid. And so, even if the user doesn't know it, and, you know, a lot of these decisions you make people don't go, "Wow, great gutters! "Nice work! You really spent some time." But it's this unified feeling, it's this sort of softer focus stuff as a designer, that you understand and respect it as a system. It's a unique thing, and it feels cohesive in a way that you can't quite articulate. I like it. If you want to play more, Gridset.com is a great tool for again, experimenting. It shows you multiple browser sizes, it lets you play with some variables, and I encourage you... this is how I learned, I really wanted to show you a lot of tools throughout the course of this workshop. And again, you're going to find, 'cause I don't think that the way that I do it is right, you know? I think that the way that you do it is going to be right for you, I don't really think that the way that Andy does it is right either. We're all going to find those ways that work for us so we want to, again, put some variables in play, give you some tools, because it's going to be partially your own tendencies plus your experience, projects, and the teams you work with. They're going to determine, "Oh, this app and these tools make sense "within this work flow." So again, to wrap up, grids give us proportions, a compositional toolkit, they benefit the user experience through consistently putting elements in the same place, they make our developers stoked because they can actually translate some of these crazy design ideas we have, and there are lots of templates and tools available online, like Gridset app, and like CodePen, and like Foundation, both HTML and PSD templates that allow you to push and play with a lot of the stuff.