Prototyping for Web II: Visuals for UX and Branding

1. Trailer: I'm Erika Heins. I'm a web designer and web developer. I've been working for over 10 years in the field in New York City. This class we'll talk about visual web design and how to plan your visual direction, how to take it into color choices, typographic choices, image choices, and then how to adapt that process for responsive web design. So, creating element collages or Frankenstein layouts, and then going into specific responsive layouts that you'll task with various users and keep iterating on. At the end of this you'll have your inspiration board and from that you'll have created an element collage or Frankenstein layout to serve as your guidebook for the rest of your layouts and you'll also have full responsive layouts that you could hand off to a developer, or you could take them on to the next class and build a website yourself. This class is Gorgeous Web Design: Branding, UI, and Visual Prototypes. 2. Introduction: Hi, and welcome to Gorgeous Web Design. In this class, you'll do the branding, user interface design, and visual prototypes for a responsive website. You can then hand it off to a programmer or continue with the next class to build it yourself. You should already have a sitemap and sketches or wireframes. If not, you can do the first class in this series for help planning this site. I'll start with this quote by Scott Adams about creativity allowing yourself to make mistakes and that design is knowing which ones to keep. So, that'll be a theme of we want to do a lot of exploration and then have a lot to choose from as we edit and polish and refine down. So, the tools that we'll use in this class are Illustrator and Photoshop to do mock-ups. You could also use Sketch which I'm trying out now and liking a lot, but that's maybe a topic for a future class. Tweet at me if you'd like to hear about that. So, let's get started. Okay, so go ahead and get setup. Download Sketch if you don't have it. You could use Illustrator or InDesign or other design app of your choice, but I'm going to recommend Sketch because of how easily it converts into web development and the tools that it has. So, get a Google Drive account too if you need one, and then go ahead and get an icebergs.com account while you're at it. It's really helpful for making moodboards and things. 3. Visual Direction: Okay. The first thing we need for our visual web design is a sense of direction. We want to think about what's appropriate for our particular users. So, how are we going to do that? It's tempting to look at trends the different ways that illustration, architecture, color, have reflected the culture of the times and the technology of the times through art nouveau, their art deco, through the Bauhaus, and now we even see that with web design. People are always copying Apple as the leader in good design, especially in software and hardware. But if we look back at it, we see that we can't imagine copying that now, but it just reflected the spirit of the times. For example, when Apple started doing this reflected mirrored surface underneath the iPhone, you started seeing that under every single product that was presented on the web, and same thing with their nav bars, those were common styles that you started seeing all these photoshop tutorials of how to recreate that. Then grids finally became possible on the web and quite of insight was copied a ton for people who were trying to explore how to use a grid, and now flat design is the latest trends. So, LayerVaults was one of the most clear executions of this style, and so they've had UI kits copying their entire site. A lot of people just trying to do what seems current, and what seems fresh and modern. So, it is useful to a point because obviously a trend to serving the current cultural appetite. If you're leading that trend, you're showing your taste, you're showing that you are modern, that you understand kind of what's current and cool in today's culture, and if you're following that trend you're kind of trying to glom onto that brand equity like of Apple. You're trying to say you're as sophisticated or you had as good design as apples. So, you're trying to gain some of that same reputation. But of course they're a little bit lame too because when you're following the trends it makes your work less distinctive, it also dates it to a particular period, and also dulls you're thinking because you're starting to just copy other visual sources instead of really trying to come up with a new visual language of your own. So, you want to start from a sense of your own brand, what its values are, what it's personalities are, and so the previous class in this series went through some detailed questions that will help you articulate that, things like a personality map or your engagement methods that you might use. So you need some sense of what your brand is and what you're about before you move into visual design. Then once you're there, the first step for me is always an inspiration board where I start to try and figure out where- I start to try to get my materials into a digital format. So I need to capture colors, I need to capture photography, I need to start seeing all these things together so I can start to visualize what my website is gonna take shape. So, Dropmark is a great tool for this. Here's a collection I was doing for protest site, and here's another recent one from more of a lifestyle brand, and you can see that some of them I'm just grabbing for color and some of them are I'm grabbing for examples of photography. So for example, we want the books that were selling are white and we want to show them on a silhouetted background. This lets my client visualize how it's going to look. But other things, I don't always show mood boards or inspiration boards to clients because it's not clear why you've picked each image in there. So for example this dress on the right, I pick because I have the color blue that I want to use. But if I showed this mood board to a client, she might think, we're going to show fashion photography on the website? They don't always understand. So, really your inspiration board should just be for you so that you have colors, that you have typefaces, you start to get a sense of what family your site is going to fall into. So start there, I like Icebergs because again it lets you highlight certain photos as favorites and it lets you group them, and you want to collect a bunch of photos that you might use, try to get real ones. So, if you know that you have a bunch of user photos that are going to go on your site, go ahead and put them in your inspiration boards, so they start to become part of the mix. If you don't, then go ahead and look for similar subject shot in the manner that you plan to shoot them. You want to start to collect colors. So just as you browse the web, your favorite blogs, your favorite sites, just look for color and just grab whatever images look good on the web. Print design, interior design, web design, all have distinct ways in which you use color. So you want to try and find assets that are in a digital format already, so that you know that those colors are going to render well still on screen. Then you also want to start to collect typography that speaks in similar tones to your brand voice. So, you can look for typography out on the street, you can look at signage, you can look at packaging. Just start to visualize what is going to reflect, again, your root personality and values of your brand. 4. Expressive Color: Okay, onward to color. I really like to start Visual Design by deciding my color. Is this brand light or dark? Bright or soft? Because the colors you choose create a strong nonverbal impression. So, think about the celebrity you might choose to represent your brand. Are they quiet or loud? Are they fresh faced or weathered? In your brand guidelines you would want a description of your general color scheme, whether it's pastels, bright colors, neutrals or whatever. So, as we get into the specifics, we need to understand our medium. So, the thing that's still blows my mind after years and years in the field is just RGB versus CMYK, additive color versus subtractive. That on the screen, red blue and green together make white. It's the light actually shining out of the screen and into your eyes, it's not the light shining onto the paper and being absorbed by the ink. So, I think of web design as an opportunity to use a lot of brighter colors that you don't have otherwise. CMYK can't do these bright Internet blues and greens that you can do in RGB. It's like free colors, you have to pay a lot of money and Pantone fees are in inks to get these particular colors in print. So, I think of what design a lot like artists working in light. It's like Dan Flavin making sculptures with light, James Turrell, these are some of the references for how I think about web design. One good idea is to keep a color wheel near you when you're trying to pick colors so that it jogs your memory, so that you're not just like blue, red, the colors that you can name but you're actually seeing all these weird in-between colors that don't have names. So, there's all kinds of different formats for color wheels, you can just search around the Internet and see which one speaks to you, and again look for one that's RGB that's actually made in a medium in which I'll be working. And look at one for a while and see what colors seems to represent your brand. I like to choose one color as my base color. So, see which color your eyes keep returning to. Color is a right brain thing, it's visual, it's not verbal, but I always like to go left brained and consider its symbolism too. So, you might think of all the things you've ever seen that were blue. How they make you felt? This is the aggregate symbolism of a color. And obviously there are cultural differences with color, so you need to understand that and research your audience. So, let's just go through some of the main families and their connotations as far as we know them in the west in order of popularity. These steps are all from Stephen Sidelingers color manual. The diagrams are from the color graphically speaking website and from a Kissmetrics color study. So, blue is the most liked color of adults, but it is only number five with children, which is funny. It's cool, it's calm, it's secure, it's classic. You will rarely, if ever, have a client reject blue. It's fairly legible on white or as reversed type. Red is the next most popular, it's warm, it's vibrant, it's strong, it's eye-catching, it's great for calls to action or as an accent color. You'll always get the most clicks on big red buttons. It's also supposedly appealing to the taste buds like sweet red fruit, which is why a lot of candy brands are red. It's legible on white, it's not so legible on black. Green is number three with adults but it's only six with kids. There's a big difference between yellow greens and blue marines, but in general you could say it's natural and lively and it's also fairly legible. Purple is number four overall, but it's the one color that has a strong difference for men and women. In one study 23 percent of women said purple was their favorite color but zero percent of men. It's often used to convey spirituality, royalty or relaxation like lavender. Yellow is number six with adults, it's cheerful, exciting and attention getting. In my experience it's very polarizing. People either love yellow or they hate it. If I want to use yellow for a brand, I always asked the client first, how do you feel about yellow? It's super legible with black which is why it's used in warning signs. Teal is our last color, which is included as a reminder look at in-between colors, is handy for the web, you can push it towards blue or green and match it to almost anything. It's soothing, it's clear and it's affable. Again, here's the study of purple was the one color with a major discrepancy between men and women. So, that's something to consider if you've been directed to not make the brand too feminine, but they're telling you to use purple as their brand color, you might have a little disconnect there. Orange is another one, it's number five with adults and number four with kids, it's seen as flamboyant, warm, and bright but in a 2011 study it was the least favorite color of 22 percent of men and 33 percent of women. And it's also the color seen up most often is cheap or inexpensive, which might have something to do with it. But it does seem to come in and out of fashion because it's a contrasting color to blue. So, it's used by brands who want to be seen as an alternative. There are some banks that use orange because all banks use blue. So, that's something to consider, but just notice if it feels right to you at this time in history. Color is also a way that you're bringing emotion to your layouts. So, here's a fun graphic of how different companies are picking color to convey different feelings. Take it with a grain of salt but there's a reason why so many banks are using blue, and it does add emotion to your designs or which might be why some people are scared of it. There also are some studies that say that women name a lot more variations in color than men do. So, if you're picking a lot of neutrals, you might have different people in your audience picking up on them or not. So again, I like to pick one color as my base. So, I think of that as like the main feeling that I'm trying to convey with my branding. So, say I pick this popular blue. You can stop there. If you just have one color with black and white, that gives you a lot to work with. Here's Mailchimps voice and tone guide and you can see that they're doing a lot with just one color. They actually are if you go down the left nav of this site they're using a different color for each section. So, it does create a little bit more liveliness with this rainbow of colors but for each layout, they're doing fine with just one. So, from your base color, if you want to go further in order of complexity here are some options, you could add tints and shades, you could add analogous colors, you could add contrasting colors, or you could even try discordant colors. So, tints and shades, 0-255 is a really good tool where it shows you here's some hex codes for colors tints and shades of that same color. And that's helpful because a color that's good for a button is not the same shade that's going to be good for a background color or for the border color. So, you often need in especially an app design versus site design, you often need more colors than you think you do and you need a lot of tints and shades of the same color. There's also tools that will suggest analogous colors, contrasting colors, combinations you wouldn't necessarily find on your own and that you wouldn't pick. This is kind of a brick red and like a tealish peacock blue, like you wouldn't think of these colors offhand but when you're switching into somebody's good tools that will help you find them. Ian Storm Taylor has a good article called "Never Use Black" about how you can use these tints and shades to reinforce your brand but the Facebook app is all shades of Facebook blue instead of black or medium gray. They're just using a different saturations. Again, even if you're do, you typically need more colors than you think you do. App design, you have highlights, you have alerts, you have errors, even in the sublime text themes there's still a lot of color going on even if you just think of it first your first impression is that it's just a grey App. Slack is a really nice example of color too that they use this plum shades of plum for their side nav with accents of this salmon color and light teal. So, you don't really notice it after you use it for a while, it just feels like evening light or something, but it really creates a really unique mood for this app. Here's another beautiful site from Urban Ministries of Durham, also using color to add a lot of emotion and beauty to very everyday cheap objects. Here's a site for tourism in Bruges. So, you'll see that they're using supersaturated lively color to convey the fun you're going to have on your vacation and how active this place is, how much there is to do. So the color is used to reinforce the feeling or the importance of the site. Again, big red buttons are always a clear call to action and here's one with a bold use of yellow as a background that gives you a whole it's a very different feeling than just a plain white background. XOXO is a conference for designers and other creative people and their initial site was as crazy purple or blue gradient that conveyed the idea that this is a place for creative people. Color often increases clicks. So, people who do banner ads will tell you this that the brighter you make them, the more clicks they will get. So, you can take that again with a grain of salt but adding color to your design will often increase clicks The last caveat is that of course colors don't look the same across platforms, you'll want to test them on both Mac and PC. On PC your colors tend to be a little bit more saturated, a little bit darker. Mac tend to be a little bit wider, can be a little bit washed out. So just be careful if you're using really light colors on a Mac and also be really especially with oranges and browns. I'll never forget a site I designed for a coffee truck and I proudly went to show it to someone on a PC and it looked awful. So, always you want to be careful with that anything in the yellow, green family. So, just for reference we're going to start making this assets file. So, in Illustrator, it's nice to have a big file with all the common pieces you're going to use for your site design. So, here's Teehan and Lax have released a lot of Photoshop templates and kits and here's an example in a long blog post they wrote describing the design process for medium, which is well worth a read. Here's an example of their UI assets file that they made. So, as you start picking your colors, paste them into your Illustrator assets file and start seeing how they fit together. So, go ahead and start a new file in Sketch, you want to use the web design template so it'll have the different art boards for each of your responsive breakpoints and you're going to create a color palette in the symbols page. You'll see two pages in the default document, there's one where you'll create your actual layouts and then there's a second one that contains all the symbols. If you're doing this in Illustrator you could create a separate assets file or just an assets or symbols art board in your file. You can also use some web tools like Kuler or ColorLovers to research and setup palettes if you want. 5. Expressive Typography: Next, we'll work on typography that expresses the personality of the site. So, how do we choose typefaces? Well, there are some typefaces that are just inappropriate. Practical typography has a nice example of that. A fancy script would be inappropriate if you're driving 80 miles an hour, and likewise, there's something that just won't be legible on screen. Legibility means that you can actually distinguish the shape of each letter. So, when you're looking at your layouts in Illustrator or another vector program they look all perfect, but then when you render them as a bitmap at 72 dpi, you start to see where the anti-aliasing trying to shade this pixel grid is not really doing the letter form justice. We're not working in stone, we're not carving letters in there with a chisel. We're painting them on paper. We have to understand our medium. We're not carving letters into stone with a chisel or painting them on paper with a brush. We're shading grids of pixels with code. Certain faces look awful on a 72 dpi grid. Anti-aliasing attempts to render roundness or strokes that are thinner than one pixel but it's not doing the actual letterform justice. The qualities that make Garamond or Bodoni special are lost at low resolution. A legible Web typeface tends to have straight forms, a large x-height, open counters and an even line weight. This is most important for body text labels and other small elements, a larger size that you have more flexibility. High resolution displays change all these rules but they're not universal yet so we still need to acknowledge 72 dpi. The pixel grid is also why you see so few italics on the Web. The diagonal line just don't look very good at 72 dpi. Lucy de grant doesn't even offer italics at all. Serif italics were designed as complimentary faces with a lot of distinct character. Sans-serif italics are basically just slanted versions. So, they don't usually give enough emphasis. When you're setting your typefaces and choosing fonts that are appropriate for your brand, just think back to the same topography you might have learned in print or graphic design. That if you want a line of text to read as a dividing line or for the capitals to stand out as geometric shapes, you might use all caps. If you want it to be more legible at small sizes or for someone with eyesight that's not so good, lowercase has the ascenders and descenders that give a more distinct silhouette that's more legible. Of course you might choose typefaces or fonts for practical reasons that a condensed font lets you fit way more words into the same space. Headlines can be a bit more adventurous because you're working with them at larger sizes. Chuck Walton has a really nice series of articles where he's playing with the headline. Different designs of the headlines for each article. Jason Santa Maria also explores unique editorial design for each article on his site, and including the series of candy grams here's one by Jesse Arrington where she spells out the headline in candy. So, remember that typography can also take place outside of the computer. If you're looking for type to reflect a certain period or a certain feeling, you can look at Jason side project called Typedia, where it's a whole encyclopedia and you can sort through typefaces by designer, by historical period, by style and really get a sense of a lot deeper level of information about a typeface. We're lucky now because we can now host these typefaces up on the Web. Before in the old days of the Web, we would have to export each fancy headline as an image and upload that to the server with the rest of our files but now there are a whole lot of companies that have figured out with the technical and the licensing requirements to do this for us. You can look at cloud typography which has Web fonts that look good even down to nine pixel italics. You can look at Typekit which has put together a lot of great lists for alternatives to common type faces or some of the crowd favorites. You can look at MyFonts where you can browse a huge library of Web fonts that you can host on your own server and then Google Fonts is a quick and easy way to use a lot of open source typefaces and include them on your site with just one line of code. Of course, there are cross platform issues with type two. So, on the left is our PC version of the same font that's on the right and you can see they almost don't even look the same. So, with every typeface that you choose, you really need to test it on a Mac browser and on different versions of Internet Explorer and on Firefox, older versions of Firefox, but thank goodness Typekit lets us test all these all in one place. So, that's another great place to start picking Web typefaces for that reason. You also when you're writing your CSS or specifying it for your programmer, you want to specify some fallbacks. So, before your Web font loads or in case it doesn't load, what would you use instead. So, these are called font stacks so I might say use Franklin Gothic medium but if that's not available used Franklin Gothic, bla bla bla, fallback to Verdana or something else. You want to of course choose typefaces that reflect the personality of your brand and the most important characteristics. So, think about how much personality a typeface can carry. Here's a great site called Thank a Type Designer about what if branding designers had just defaulted to system fonts and look at how different these logos would be. Would they really have the same universal and lasting appeal if they were just set in stock standard fonts? So, do some research and really think about how you can convey the values of your brand. Here's a site that does vintage China and so they're using hand painted titles to convey the hand-crafted charm of their pottery. BK Swiss or BX Swiss is using Helvetica to convey neutrality and modernism. Use All Five is using avant garde, sans-serif to show their modernity and using it with transparency to convey a sense of mystery. Essence is using didot to look fashionable and classic. Oscar health is using a slab serif to look human but still more Web savvy. I'm Not There, the movie used grunge typography which is anytime that you're chopping up or distressing the type to relay the films theme of dissolution. Then the last thing is once you've chosen some typefaces and you're working with the actual page layouts, there are some concerns for readability, which is how quickly or easily you're able to read the text. So, generally, there's a certain line length which is considered readable and some people say it's between 45 and 75 characters. Some people say you can go all the way up to 90 and reading speeds don't decrease but anything longer than that and it's considered to cause fatigue for the eye to have to travel all the way back to the beginning of the next line to find where to start. So, what you can do, this is a trick from Trent Walten again, is drop a marker character in after 45 characters, and then drop another one in after 75 or 90 and then as long as your line breaks in between those two markers you know that that's a good length for your paragraph. Then if you're doing narrower columns, you know that you can tighten up the leading but a wider column is going to need a little bit more leading because the eye has to have a little bit more space to make it back to the beginning of the next long line. If you're knocking the type out, you might need a lighter weight than on your normal text on a white background which is the opposite of print because again, the white is light shining into your eyes which is eating into the dark type where is as in if you were printing this layout, the black would be ink, that would be bleeding into the knockout type. So, it's the reverse. You want to ensure that there's adequate contrast to avoid eye strain. There are tools in the developer palette that'll help you test this once you have a HTML prototype but just try to use your judgment when you're doing mockups that it's not going to be hard for people to read. One last thing is that underlining is a holdover from the typewriter age. It reduces legibility because you're losing. If you squint your eyes, you can see that you can't see the descenders in this paragraph of text as well when it's underlined. So, underlines were only around for typewriters and you can use color, you can use boldness. There are other ways to indicate lengths and still have your site be very usable. Even Jacob Nielsen's research group which is the leading usability research firm has removed the underlines from their lengths. So, just as Google did recently. So, if anyone is trying to tell you you must underline your links, you can give them the Nielsen Norman group as rebuttal. Okay, so, now we're going to set up our type system so research and choose a couple of typefaces that might serve for your brand and then go into your symbols page or your assets file and test out some samples. See how those typefaces work as headlines, as paragraphs, as callouts. You might need more than one to serve different purposes. Also try them on buttons tabs and interactive elements. You could also try Typecast or Typekit to see how these faces will really look in the browser. 6. Powerful Images: The last major piece of our visual design is imagery. Well-chosen photographs can carry a design. Images tell your story across languages with speed and emotion. These photographs by Rosie Holtom of homeless people as they wish to be seen, totally changed the story in how you perceive the homeless community. But before you jump into imagery search, be sure you've gathered your thoughts. Go back to your brand guidelines and make some notes on the type of images your brand would capture. Would they be atmospheric backgrounds or personal portraits? Delicious still lifes or charming illustrations? Would you want to show aspirational lifestyles or maybe maps? And lucky you, the web is finally at the bandwidth where these images will load in milliseconds and not minutes. Http means hypertext transfer protocol which was all it could handle in the early days, but we're now seeing more and more sites tell their stories through images and even background videos like this one. If you don't have the time budget or access to custom photography, there are some resources online that can help a lot. But don't rule out the possibility of hiring a photographer and taking some professional and custom shots, they will serve you well for many years. In the resources file though, I've listed some of my favorite places for open source and re-usable photography. You can also use google images to search and filter the images on any of these open source sites by putting site colon and then url in front of your search terms. Photographers put a lot of work into their images. So again, make sure you have the right rights for the images you choose. But of course you're going to have to deal with some bad images. If you're putting together an event they might only have camera photos from last year, you might just have some wonky headshot and someone refuses to take a new one. So you're gonna have to deal with it. Number one is crop it. Try to find the best parts of the photo and just focus on that. You could also blur the whole thing and use it as a background photo and put some text on top. You can also come up with some particular photoshop filters or coloring styles that might make all the images on your site have a cohesive feel, or you can spend some time and retouch it. Make sure you budget for this because it is the most time consuming of any of these options. The other half of imagery is iconography. Look at symbols set for a great example of how easy this can be used to work into your designs. A simple set of semantics, so if you typed the word "love" it converts into a heart but a screen reader is still going to see the word love and be able to read that out to the blind. There's also services like IcoMoon where you can build your own icon font, if you're creating a custom set of symbols for a site. There's also Iconic which has a new set of icons designed with legibility in mind, and we're now getting the ability to use svg. So from illustrator if you design your own illustrations, you can actually save them as vector files and serve up those vectors on the web so you don't have to worry about bitmap resolutions as much. And just like typography, icons have legibility issues too. So make sure that your icons are rendering well exactly at the size that what you plan to use them. So, go find the images you're going to use in your site. You can research or shoot your photography and again I've provided a bunch of resources to find stock photos or open source photos in the resources list for this class, and then you would go ahead and retouch or crop or filter them as you're planning to for your site, so that your mockups have a realistic look. Go ahead and research or design your icons, to find the icons that you want to use, the icon font you might use and place all of that in your symbol's page or your assets art board so you can start seeing how it all looks together. 7. Responsive Design: All right, we've finished our visual assets and we're ready to move on with design. But hold on there before you jump right into page layouts because responsive web design changes a lot of things. Our background reading, if you haven't already gone through these books, is Ethan Marcotte's Responsive Web Design and Luke Wroblewski's Mobile First. So, what is this responsive web? Well, basically when we started having a million different devices to designed for, we started realizing that the things which looked good in our desktop layouts did not necessarily translate well into mobile. So, a beautiful gridded desktop website required a zoom, a scroll, and a tap to get to just the next page. So, responsive web design reflowing our layout to fit the container could make things just one click away. So, we started to think more about grids and more about reflowing layouts and how they would be appropriate for each device, but then we also had to deal with a multiplicity of new hardware and new devices every month. So, design processes changed as a result of this. I've moved to what I call Frankenstein layouts which are combinations of all the main pieces on the page. Other people have talked about element collages, which are a similar idea and it all comes from the fact that a site is so much more complex than our previous things. A poster, you wouldn't need a style guide for. It's one thing. You're totally in control. You send it off to the printer and it's done. A book, you had to start thinking about systems. You wanted a headline on one page to be the same style as a headline on another page, but sites are infinitely more complex. Content might be a promo on one page and then the full article on another page and then archived in another section. We need to have systems for all these different type styles and purposes and devices now. So, we had to start thinking about modular design that we were able to focus on the pieces but realizing that they were going to go into several different layouts. Some people came up with style tiles as a response to this. So, they're a little bit more specific than a mood board. A mood board tends to get approved people say "Yes, I like it, let's do mood board B," but then when you would come back with the actual site layout, they would say "That's not what I was expecting." So, a style tile was a little bit more specific where you would have an actual headline, you would have actual colors and images and buttons and UI assets on the page but it wasn't quite a full layout. So, these are a helpful step but again I think they're missing a little bit of specificity that helps both clients and us as designers figure out what our vision really is. So, Dan Mall writes about element collages and how he started doing them I think on Reading is Fundamental. So, here's an example of how he did them on the Entertainment Weekly redesign that is all the major pieces. Even before you know any page layouts or page requirements, you know that you're going to have an image of a celebrity and you're going to have a heading. So, you can design that section and the colors it might appear in. You might start to make some decisions that the magazines will appear silhouetted on a brightly colored background or what your buttons would look like, what your main sharing widgets would look like, what icons you're going to use. So, these are all the pieces together and as you can see it gives you a good idea of the personality of the website even before we're moving into layouts. Here's one that he did for TechCrunch which you can see on the left is the full version. It's very long. He's really getting into detail about a lot of different pieces of the website and on the right is up-close; the sharing widgets, the tags, the titles, the most important pieces of the site. So, element collages are not inspiration boards. Style tiles are not inspiration boards. You don't want to be screenshotting other stuff and pasting it into your layout because it's giving both the client and you a misguided perception of how far along in the process you actually are. You want to be doing these as your actual first drafts of the pieces of the design. So, this is an inspiration board where I've collected some colors that I like, some typography inspiration, some user examples, just some photo styles but then an element collage will be drawn from this. So, I've started to turn that into real typefaces I might use, real color choices showing how I might crop the photos, what font styles I might use and there's no layout. You can see that these are just collaged on the page. The client might say, "This is a little floaty." They might see it's a light, they might think of it as a layout but it's really just about you starting to design the various UI assets. So, here's another example of where I moved from a style tile which was helpful and I did three of these and they help the client get a sense of which color family they preferred and I also did comps to match each of the style tiles and then from that feedback, they picked one style tile and of course a different comp and so, I collage that into the next iteration was a Frankenstein layout. So, I call it Frankenstein just because it's like three pages all in one and in this case, it was actually it was the homepage plus a sign-up form, plus the user profile plus the merchant dashboard all in one. So, I was able to keep revising and polishing this design and then use it as my reference for all the subsequent pages throughout the site. So, the client understood that this was what all the pieces of their website were going to look like and I had a good frame of reference to make sure every subsequent page matched this initial Frankenstein page. But remember the point of these; why are we doing them? You're trying to get feedback. So, these are all different designers making up different types of deliverables that serve the particular project and allow them to get the feedback they need at that point in time. So, a style tile is appropriate if you just want to know if they like your colors or not. A Frankenstein layout is more appropriate if you really want to get some design feedback without having to design a whole website. If you work at an ad agency yeah, you're going to work with big clients and they're going to want to see fully finished concepts for- you might do three separate website designs and two of them will get thrown away. But smaller scale clients and designers don't have time for that. So, these are all attempts to get the feedback you need without having to do so much wasted work. Then also it's good because you start drafting these really important elements. So, they'll end up with six and eight and 10 rounds of revision versus just your standard; one mock-up and two rounds revisions that a lot of design contracts are used to. Okay, so now we're going to design our Frankenstein layout. You're going to go design a mash up of your most important pages, so you start addressing all the elements. So, in Sketch or Illustrator, you can start with your desktop art board if you want to have fun with the most complex layout or you can do your mobile art board if you want to have the most constraints. So, make a mock-up of your most important elements for your site; buttons, menus, tabs, headlines, paragraphs, call-outs, anything that's going to give you the best idea of how all those pieces are going to go together. 8. Solid Layouts: Okay. You finished your Frankenstein layout and got some feedback. Now, we're ready to crank out the individual layouts. So, think about the purpose of each page. What do you want the visitor to do? How are you going to convince them to do it? The wire frames or content outlines should provide a general idea of the information hierarchy, but it's the visual designer's job to make the priorities for each screen crystal clear. Think about the first impressions, someone is going to have with each screen and then think about what's supporting content you're going to add or design to follow that. Then, the main call to action, the most important thing in a lot of cases. It's all about attention, where your eyes go first, and then second, and then third. There are eye tracking studies that can help you understand where people look. So, here, the price is doing a good job of getting attention and also the face of the woman on the left. The headline looks like it's getting some action. But if you want this featured laptop deals to get some attention, they're not standing out. Here's an example of eye contact, and it's use, and it's importance on the page. People always look for the face on the page first. So, you can see here, they're zooming in on the baby. Then, they're looking over the headline, the supporting text, the product shot, and then on the logo. You can also trace the eyes in a linear fashion. So, here's where a user looked first, second, third, spent some time, and went across. So, think of the eyes as drawing a path on the screen. Is it a nice clear path or is it a bit schizophrenic? If they're reading, the eye path tends to follow in F lay out. So, they're going left to right in line by line down the page just as if you were reading a book. So, this is the pattern for both reading and skimming. There are various techniques you can use to lead the visitor's eye around the page. Eye contact being the primary one. You go first to the girl's face and then down through the center or lay out below. Contrast being another major one. You can't help, but look at this bright orange on the black background and then also the white email field on top of the orange background. Color especially, red, grabbing the attention and look at these little dots of red how they lead your eye around the page, the most important pieces. Then, adequate whitespace to give the eye somewhere to rest in between all these calls to action and all these focal points. You're drawing someone in with a strong focal point. In this case, it's an animated video, the wall it hangs in space and rotates. You're also using alignment. Here's a super minimal layout, but you still get a sense of your eye wants to travel along the top nerve or down the article call outs because of the way that they're aligned in a strict grid. You can also use the tool of scale. So, huge is launching with a huge H and leading your eye from there to all the secondary content. Because design is creating the interest, but then it's also trying to maintain the visitor's interest or direct it to somewhere else, and then recreate the interest once they start to get a little bored. Give any lay out the squint test. This is something that you do in art school and it's something that holds up in web design. Even when you squint your eye, you still be able to get a sense of what's the main call the action on the page. So, looking at some examples of different layout, you can see that the first impression of the paper app website is letting you know, yes, it's an iPhone app, but they're also doing some things with the imagery. So, they're showing a newspaper in the background to give you a sense of what this app is. It's like a newspaper. They're showing your morning coffees, so you can imagine it is part of your morning routine. Then, there's some secondary content. It's a sentence explaining the benefit of this app, and then a couple of calls to action, very clear and easy to find. This makes site is using their first impressions of creativity. You're seeing lots of children's drawings here and creative typography. It rotates in space, and then the supporting text is obviously following down in the center layout, and the call to action lower down on the screen. The Peek app is a calendar and so again, our first impression is we understand that it's an iPhone app, we're seeing that the user interface looks creative and unique, and then we're seeing some supporting content here is a video where we click on obvious play button to see the video, and our call action is to get it after we're convinced. Even if you're not using imagery, you can draw the eye with just typography. So, here are massive headline is conveying the distinction of this agency. Then, there's supporting content about all the details, and their areas of expertise, and then some small calls to action because they're still portraying a more formal brand. You're also guiding the eye through the underlying structure of the page. Most notably the grid. So, there are common grids such as the 960, which comes in a 12 column or a 16 column format, which are easy to use in both the visual design phases and the development phases. But there's also lots of tools now where you can design a custom grid to suit your content in particular. Gridpak s one. There's also a Gridset. So, you're able to really design from the content outward and not just fit your content into someone else's boxes. Make sure that you understand how grids are meant to be used. One thing it took me, I didn't learn in school was that you typically pad your content inside of the grid column, so that if you color that background, you're still going to have adequate margins between the text and the colored background. So, Khoi Vinh and Mark Boulton's PDF, it's a little bit old, but it's still a great explanation of why grids are good and how to use them as you're doing web design. Warby Parker is a brand that has beautiful design using the grid and again, it's a creative grid. So, this is a calendar. So, you would expect it to be a seven column grid reflecting the days of the week. But instead, the calendar section is eight columns and there's a ninth column of to the left for the month. So, it's a nine column grid, which gives it definitely a unique flavor. They're using it to structure a whole lot of imagery, and content, and graphics in a way that still feels organized and unique. Even if you're not drawing out every single grid line, the floating type can still have a sense of order and alignments. Here, the grid allows dynamic content to be filled in later and maintain a more dynamic layout, so that there's larger things grabbing attention and smaller things to look at later. Again, floating things still have an underlying grid. So, this Check my pipes headline is not flush with the logo, but it's aligned up with the underlying grid. So, you may not see all the grid lines, but websites that are built with grids have it have a sense of underlying structure. Again, Khoi Vinh is one of the leading proponents and masters of this technique. So, his site, which is imitated for years, was one of the early ones to really show beautiful use of a Swiss grid and typography. He's recently redesigned it, but still is someone to really follow, if you're interested in this tool. He did a whole example redesign of the Yahoo site a few years ago showing that even a chaotic and overstuffed home page can be made more organized with the use of an underlying grid. So, grids not only create this sense of order control, but they also make it easier once you're handing things off to a developer. If each of the pages you're designing is a unique layout, it's going to be a lot more work to build and maintain those pages. So, when you have this system, it's going to make things a lot easier down the road and especially with responsive design when you have to start figuring how these things will flow in different devices. The one caveat is they can create boring layouts if you're using them poorly. If you're just filling things into the same 3-column grid, you're not really getting the full advantage of the grid. It should be making your design simpler, but it should also be inspiring some unique layouts by inspiring you to place things in white space where they might or place things in spaces that you might not have thought of before. Then we also have to remember that we're designing responsive layouts. So, let's start with mobile. Because that's the one that's newest, but also increasing in importance. So, user projections are that mobile is about to outpace our desktop design. I have to sketch that. So, designing for mobile and for other devices besides a desktop computer, makes us think about space and layouts in a different way. So, on a desktop, the center of the screen is where people are mostly looking or maybe the left edge of the screen as they follow the left NAV down the page. But on a phone, it's easier to swipe to hit the bottom left-hand section of the screen if you're holding the phone in your right hand. So, that might be where you put main calls to action. If you're holding a tablet upright, it's the sides of the screen where is easier to hit. So, the placement of things on the page is affected by the device. Definitely read Global Moxie's books on this subject. He's been working and talking and sharing all his thoughts on this for years. The other thing to realize is that mobile designs are not a little cursor, a little arrow, but a big fat finger trying to hit these buttons. So, when you first start designing mobile layouts, you can't believe how big the buttons have to be. Apple recommends at least 44 pixels or 88 on a retina display as the size, but here's some guy testing and showing that the yellow area was where his finger was even bigger than the recommended. So, you don't have to make the icons themselves that big, but the clickable area or the tappable area needs to be able to deal with someone's actual finger. So, here's an example again of realizing that this input device is actually going to cover up the thing that the person is trying to touch. So, you saw a lot of changes when mobile started to become prevalent in design. So, you saw apps. You saw the buttons getting way bigger and easier to swipe. You saw buttons that were full width of the screen as we got more and more refined and as we understood what made good design on mobile. In apps like the human body by Tinybop really capture this sense of exploration and of gesture. That pinching and zooming are much more natural. That buttons, as Josh Clark says, buttons are hack. That it's just a way a device that we've used to represent clickability, but it's much more natural to grab things or to swipe things or to wipe things off your desktop the way you do on a real desk. So, there's a whole new vocabulary that people are learning. Here's Luke Lebrewski's gesture guide and this is just a piece of it. There are so many gestures that you can use on a native app. It obviously expands the interactive potential of your site or your app, but you have to then rely on your users to learn them and then you also have to rely on your developers to execute what's possible on a responsive website. So, a responsive website on mobile, definitely needs to allow for fingers and the use of gestures and swipes, but you also need to be informed as to what's possible only in native apps and what's possible in a responsive site. Remember, no hover states on mobile. This was a useful tool for many years in web design but no more. Because of course, you can tap and then reveal the menu and then they tap again to go somewhere, but you don't have this sense of someone randomly hovering over your content and discovering something hidden. Because they have to tap in order to see any hidden content. Google made this huge research study called The multi-screen world. So, you want to consider the context for each of these devices. So, you might pick up your phone because you only have a second and you don't want to have to go log into your computer or you don't want to have to walk across the room and pick up your computer. You might be trying to do a certain thing. You grabbed your phone because you wanted to take a photo and then you want to send it to a friend or then you want to upload it to your account. You might grab your phone because you don't have access to your computer or you're out on the street or in a car or at a friend's house and you might just do it because you're trying to relax. You don't want to open up the computer which represents work and your email, you want to just stay in more of a social mindset. So, think about the characteristics of each of these devices. That phones tend to be more one to one and it's more personal. Tablets tend to be maybe where you're browsing, reading magazines, looking at recipes and then laptops or desktops can be more about work for people. Then you might start something on your phone and use that as your collection device, but then finish the task on your desktop and that would be your organization device. So, here are some examples of how my layouts are starting to look. I started with mobile and I laid out my content for the yogas site. You can see it's mostly single column and I did a couple. I had one little bit where it's two columns and we decided to make the whole image the clickable area. So, people could just tap with their thumbs really easily. It's very gridded layout so then now it's easy to reflow over onto the desktop. I knew I wanted the main image, the introductory image to be bigger and then I still wanted the Peru retreat to be very highlighted. So, you can see that the hierarchy is getting preserved between the layouts. Then I can visualize how my tablet layout might work. Here's my three art boards in illustrator, but I might go back in and fill this and to try to decide, am I going to still keep all those four images together on the second row or am I going to try and break it into separate rows? So, do as much as you need to. Again, it depends on who you're going to be handing these off to. Here's an example where I just did the desktop and the mobile side by side. So, the desktop is on the left and the mobiles on the right. Here's the home page and the about page for this big site. This is a more complex layout. So, I had a little bit more to try and figure out about what to do with all this different content going from 4 up carousels to single carousels that kind of thing. So, it helped me with functionality to mark it up before I started coding it. It also got people on the same page about what they were going to see on each device. In the resources section of the site, there's a responsive illustrator template that someone else created. That's helpful if you want or you can just create your art boards to suit your own needs. So, starting from your Frankenstein layout, you're going to go page by page and from your wireframes, design these layouts. So, again the wireframe should show you how the other members of the team or maybe you yourself saw the hierarchies of the page, but feel that you want to make sure that the visual layouts look as good as they can. So, generally there's some rearrangement that goes on when you're moving from wireframes to visual design. So, start with your mobile screens first. Because mobile layouts tend to be single column. You can sometimes fit two or even three columns, but it's rare. So, it forces you to prioritize your content in a linear way, what's first on the page then second, then third, then fourth. So, I'd like to start with mobile and then I like to go all the way to desktop layout and try the other extreme. How am I going to take advantage of this huge screen? What am I going to do here? Again, it's not just about the shape of the canvas, it's about the context. What am I going to do if somebody is at work and visiting my site? What am I going to do if they're on their phone and they're visiting my site? Then you're going to repeat with all your main pages. I do just those two first for main sites. I'm often continuing on and doing the development as well. So, I'll do the middle breakpoints in code, but if you're handing off these pages to a developer, you'll need to go ahead and do all your tablet markups or whatever other breakpoints you decide to. Again, you can do as many breakpoints as you want. They're not particular to any device like the iPad or the Nexus, whatever. You want to think about when your content starts to fall down. When you're scaling video starts to take up the whole screen and not show any of the second row of content and so, that's when you had a breakpoint and revise your layout. So, work on your layouts. You can do all the mobile ones first if you want or just do one screen. The most important screen mobile and desktop and get some feedback and see how it goes. 9. Usability Testing: Okay. Now it's time to do some usability testing of our websites. When we get into our layouts, in our responsive layouts, it can be tempting or when we get into our layouts it tends to push us back into 2D design thinking. That we're worried about arranging this content in space. But we have to remember that web design is a changing medium that we're working in four dimensions that it's interactive that things happen. So, we want to go back and think about the interactivity of the site and judge our layouts from that perspective. So, what are the basic measurements? What are the basic things that make a website usable? Here's this 10 usability heuristics from Jacob Nielsen, who's the leading authority in this field, that we can look at to judge our layouts. So, number one you want to make sure that your system status is clear. So, confirmation screens. If someone clicks submit, they want to know that their order was received that they are either going to receive the item or they didn't. If your page is loading, you might want to let somebody know what is loading so that they understand why it's taking so long and they don't think it's their browser or their Wi-Fi. So, make sure that like there's system status indicators if you need them. Number two is that it matches their mental model. So, this comes down to again the labeling that you're using in your architecture. Hopefully, your planning phase cleared up some of this but your visual design also needs to reinforce it. So, Instapaper uses an inbox or an archive. Are you saving or are you uploading? What's the metaphor? What are the icons? Make sure that's all matching their model of what they're expecting. Number three is that users have control. So, this might mean that you're giving them a little bit of input into the design of is it bright enough for them? Is the font size big enough for them? Some apps offer night mode, if it's all about reading and it also relates to navigation. That they can get to the parts on the site that they want to get to. When you start plotting user experience, you can tend to plot it like a movie, as if you're scripting out screen by screen what they're going to experience. Yes, you're doing that for your user stories but then you also need to realize that people are going to branch off into other stories and change paths all the time. So, good navigation helps them to do that and let's them have fun and do what they want to do on the site. The fourth one is a kind of a pet peeve of mine which is icons being consistent and are they consistent from a usability perspective of like, are they illustrations or are they buttons? So, here you can see that on the tabs the icons are used here as buttons and on tabs. They're not used as illustrations. So that's something where I can know by, I can skim this page and I can know the icons I can click on those that's something functional. Number five is that you're trying to help them prevent errors and this is where visual design plays a big role. So, for example, the primary action, the main button is usually bigger, bolder, but the secondary action might not need to look like a button at all. In fact, if it's an undue or a cancel, you might not want it to be something that is too easy to hit. You also see it with things like in the planning of selecting a color for a blouse that if I can change the image to reflect that color, it decreases the likelihood that someone's going to order the wrong color by mistake. So, this something you can mock up in your designs or you can write a note to the developer to change the photograph when the user clicks that color swatch. The next thing is also that you don't want the user to have to do too much work especially, if they're on a phone and they're typing with their thumbs. So, if you can, if they're typing in a search field why not do an auto complete drop down that helps them select from a list of options and that doesn't make them type out all 50 characters of the description. Then again, you want to go through and revisit each of your user stories and make sure they're as efficient as possible. So, that can be both you reducing the total number of clicks it takes to get from A to Z, that you're not making them navigate through 10 screens to sign up and create an account in order to purchase a product on your site or it can mean that you're reducing the page load time. So, a lot of shopping carts like this site canopy they'll do like a layer so that the whole page doesn't have to reload in order for you to get more information about the product but you just do a quick layer that's loaded through Ajax. You can also acknowledge that some people like to browse using their keyboards. So left and right arrows can be enabled to page through a carousel or a slideshow or other buttons. You might have to teach your users those, but it's all about making it easy for them to do what they want to do and making those flows as efficient as possible. Also, try to just help your users just to focus on one thing at a time. So, if I'm here trying to decide which of these platforms I want the standard of the custom, you could remove everything else on the page because I really I'm just trying to analyze and make that decision based on the features and the costs and all these other things. So, I've got plenty of white space here. I've got a clear table helping me to understand the different options and everything else has been removed which is very helpful to me as a user. Then finally, your alert should be clear. So, nothing's more frustrating than, "Sorry system error, " And you have no idea how to fix it. So, these are some examples of helpful alerts that exactly how many characters are required in the password, which of the form fields are required. This is the stuff that often gets forgotten in static design mockups but if you're designing a web experience, there's so many states for each page. So, go back and try to edit and think through each of those interactions and how you can make them more clear. The last one is that getting help should be easy. So, people do get confused. No, you can't do the clippy, a little paperclip telling you how to use Microsoft Word nor would you want to. But you want to make help easy when people are looking for it. Put it in a standard place like the top nav or in the footer and then also realize that people have different manners in which they want to receive help. Some people love videos. Some people just want to pick up the phone. Some people want to write an e-mail or chat. So, it's nice if companies can offer all of those options. Again, your visual design would reflect what people like about each of those options. So, if I'm someone that just wants to talk to a real person, these photos of user faces are going to make me feel like I'm getting help more than someone who just wants to watch a video where a screenshot of a help tutorial or a product review would be a more appealing to them. Once more, review your layouts and judge the interactivity of each. It's our clickable by consistent styling or by where they're placed on the page. So, for example, links should be blue and underlined with a mantra for a long time. I disagree that they need to be underlined because it really reduces legibility, but consistent color is a good clue for interactivity. Again, icons are a particular thing of I should know as a user if it's just an illustration that's sitting beside some content or if it's a button that I need to click in order to get additional content. Nielsen Norman group is one of them. The evidence based user experience research firm. So, they have all kinds of studies and metrics if you want more data to support any of your arguments. The last thing about usability is that patterns are something that you want to consider. That intuitive design often means familiar that you're using standard placement for some of the basic functions. If you're looking for the search bar, you're probably looking up in the header of the page when people put it in the sidebar it's a little bit harder to find. Same thing with the log in. So, look at these standard patterns and consider if you need to innovate and break the mold on those or if it's something where you want to follow what's considered good practice. But likewise, you want to make sure that you're not just copying other websites. Some clients have trouble visualizing things and so they'll tell you "Do it like this." They'll just want you to copy directly a certain layout and you need to push back when it's appropriate to tell them that to look at more than one example of a pattern in order to prove that it's the best way to do it and that it's a general trend. But really like everything, you're trying to make your layouts content outward and you are trying to make them also interaction outward. So, think about your own particular cycles and use those to help determine which patterns are appropriate. Because we're all working with the same vocabulary of HTML elements, the same basic alphabet of HTML elements but we can combine them in a million different ways and so you always want to be increasing your vocabulary by seeing what's out there and seeing what's possible with new technology and new ideas. So, there are some great resources for help you to visualize and see how and see how these patterns might work. Brad Frost is super generous about sharing his work. He's created this whole library of responsive patterns. So, if you're just trying to visualize how your layout might reflow, here's some workable prototypes that you can look at and see which one seems appropriate because it is hardwork to design for a changing medium when you're using static tools and there are different design tools that try to replicate this, but at the end of the day, it's nice to use what you're familiar with and to get to code as soon as possible. This is my strategy for this. So, responsive patterns is one big resource. Pattern tap is another one where you can sort by that type of thing you're trying to create and see what type of ideas are out there. Hover states is a cool one too where it's lots of new and interesting interaction designs and then there's a user interaction library, where you can see examples animated of how you can soften these transitions, make them more dynamic, whatever you want to do to help you visualize. So, export all your mockups as PNGs. You want to sort them so that you have each break-point in one folder. So, all your mobile layouts will be in one folder, all your desktop layouts will be in another folder, et cetera. Then to do some usability testing, you can upload them to envision app and it's pretty clear, or pretty intuitive to use the app. You'll go through and upload each folder of PNGs and then you can create hotspots and make them clickable and then you can do some user testing. So, either sit next to someone and watch them pull up this folder in the app on your phone and watch them try and navigate or you can screen share, do like a Google Hangout and give them some scenarios, ask them to do the most important actions on your site and watch them as they try to do it. It's very enlightening and it gives you a totally different perspective on your design. So, try it out. You can also post your links to the Skill Share form and get feedback from each other and do some iteration on your website and see how it goes. 10. Cleanup and Documentation: Last lesson, Cleanup and Documentation. I just want to emphasize this process of iteration because it's such a major thing in web design. A web design is never finished. It's just like a child. It keeps growing and needing new clothes and the culture changes and the technology changes. So, you're always able to keep improving a website. That's one of the great things about web design. It's not like a book where you send it to press and then it's gone and you'd have to do another edition. But a website is always there and you can always tweak the files and tweak your designs and make them better. So, continually test and iterate and improve your designs. This is something that we don't realize about a lot of popular apps. So, iOS seven, when it came out was like a huge design but you can see each of these panel shows three versions of the screens and how they've continued to refine the language. It used to be full with the bar buttons and then they got smaller with rounded corners and then they became circles or some of the smaller secondary messages became tiny icons. So even Apple, one of the leaders in design has way more iterative design than we might realize. Here's an example of each of the iOS upgrades and how long they spent in Beta. What's interesting to me is just the total quantity of versions that they're doing that every two weeks basically, they're releasing new versions of the software. So, don't think of your website as this giant launch party, but think of each of these little iterations that you're releasing as a little test and you're getting a little bit of feedback and it's one stepping stone along the path. Back to Jakob Nielsen, he talks about each of these iterations. At first, you're just removing these interaction bugs and you're increasing usability. That's the main value at first but over time, when it starts to be really polished then you start to be able to really reconceptualize the interface as you go into further iterations and get another bump in usability as you start to really be willing to toss out maybe some of your favorite features and really rethink things. So, you want to fail faster. You hurry up and figure out what's not working when you iterate. So, you also avoid unnecessary work by doing that. You also reduce your risk because you're making smaller chunks. You're not working on a project for a year only to find out that nobody really wanted it in the first place. So, you're finding out your best features and what you want to focus on. So, focus on the details too with each iteration you get to put more and more polish and make your designs look better and better. So, if you talk about flat design, you might just think that's one way to do it but if you really start to zero in on the little tiny details, you'll notice a lot of particularities in the way you're implementing what you might consider a flat design. So, maybe there's bottom borders on some of the elements or its three-pixel corners versus five-pixel corners. You don't notice these things when you're just a consumer and a user of websites. But once you start to be a creator and a critic, you start to really zoom in on the details. Do Facebook's buttons have a drop shadow or not? Do they have a border or not? These are the type of things that you start to really refine through levels of polish looking at scale and looking at contrast over time. There's also a big phase of editing that goes into iterations. So, I love this Ellen Lupton quote of "Design is as much an act of spacing as an act of marking." So, it's about what you can remove and what you can not put on the screen. So, Mark Boulton has a great article on whitespace where he talks about like look at this layout on the left and novice designers tend to put everything in boxes. Everything needs to be anchored. We noticed that like when we remove some of those boxes, we fall into this photograph more easily and we're able to use typography a little bit more creatively to express some of the ideas. Basic whitespace is fine. This paragraph on the left is more of a story about what's important about this content, through a little bit of white space, a little bit of emphasis, the design starts to be more communicative. The other thing about web designs is again is we're designing systems, not posters, not page layouts that are locked down. So, hopefully, you figured out your branded guidelines in the first class but you also want to polish up your visual assets into a usable guideline. So, this asset's value started, go back to it and try to make it usable for other people not just yourself. So, here's an example of Jamie Oliver's brand book and of course it talks about his personality and the values. These are the things that are why you're choosing these particular colors or particular photographs. But you're also going to get into the details of how big are your margins, or your headlines, or your colors. So, try and specify what you've figured out in this design phase so that someone else can pick it up and the personality doesn't totally shift but that you're able to have some consistency across projects. So, think of it as a system, that it's not piecemeal type elements that you've placed around the page but it's a system of headlines and a system of related text. You can think about typographic sales. Tim Brown has written about modular ratios but we can tend to start designing with just the default font sizes from the palettes in our software tool. So, 72 or 60, 48, 36. But there's no reason you have to do that. You can look at the golden ratio, you can look at all sorts of mathematical and geometric ratios for examples of how your type sizes might relate to each other. So, go back and look at your headlines and make sure they're all consistent and then look at your relationships among your elements and see if they're harmonious. So, the last step in our design process is the document things so that the execution can be as close to our vision as possible. So, it's getting easier to do this. There's things like project parfait for Photoshop which lets you export the CSS straight from a PSD. The same thing with sketches that you can select any element and get the basic CSS attributes for that background color or that font size so that you don't have to go through an eyedropper things all yourself. So, go through and make sure your symbols or your assets page has all the main elements that you need. If you've designed everything except in h3, just go ahead and add a sample h3 in there so you have a cohesive system and then you're going to write the specs if you need them but if you're going to continue on an end, develop the site you would need to do it. You would be more concerned with exporting CSS. You usually want to have conversations with the developer at the beginning. So, talk to your developer, sorry, strike that last sentence, please. You're going to write specs if they're needed. Talk to a developer and see what they want. Sometimes they just want you to give them PSDs or give them a source files. So, either tell them about Sketch and how it works or see if they'd like you to do all the slicing and we'll talk about that in the third class too. 11. Explore Design on Skillshare: way.