Transcripts
1. Introduction: Hi, everyone. My name is Cristina Barson, and I'm a digital designer based in New York City. I'm also the co founder of Eat Design Sleep, which talks all about the ins and outs of the design world. I really love creating impactful and engaging digital experiences, and over the years I've realized that there certain key elements that are necessary and creating a strong digital presence and thinking responsibly is definitely one of them. For the past 15 years, I've had a chance to work with some amazing brands everything from fashion, beauty, travel, health and wellness brands, as well as international sporting events and non for profits. And with each project, I realized the importance of thinking responsibly from the beginning and how it impacts the overall digital experience. So in this class, we're gonna bring your user interface to life on different device touchpoints. Using sketch, I'm gonna guide you step by step through my process of thinking responsibly. We're going to go through everything from how to organize your content for different devices, prototyping your designs, creating responsive grids and you I elements, as well as coding your site and dealing with development teams in cases where you're handing off assets for your class project, you're going to take a design screen of your choice and translate it into desktop tablet and mobile formats. Having basic knowledge of sketch photo shop in illustrator would be helpful. But don't worry. I'm gonna go through everything you need to know with each lesson. And I'm also going to suggest different resource is to help you along the way. Don't forget to follow me as I plan on creating more lessons on you. Are you X being a digital nomad and freelancer? And I really encourage you toe upload your projects to the gallery so that you can get feedback from myself and your fellow students. We really can learn so much when we share what we do. By the end of this class, you're gonna walk away with a wealth of knowledge around responsive design and know how to easily apply it to your next website project like a probe. So let's get to it by going to our next lesson where we quickly talk about what responsive design is
2. What is Responsive Web Design?: So what is responsive Web design? It's essentially, when a designer creates a Web page that responds to or resize is itself. Depending on the type of device the site is being viewed on to provide users with a seamless user experience. As designers, it's our job to make sure users have a consistent experience, no matter what device they're on at the end of the day are W. D is really a mindset, and not just a technique. Some other key benefits is that it saves time and money, since you don't have to maintain separate sites for each device. It's also great for your sights S CEO because having a single your girl helps Google create a more concise picture of how your site is doing. So it's not surprising that Google has officially recommended R W D as their preferred method for building mobile sites. As designers, we want to provide three device break points, desktop, tablet and mobile. The developers job is to make sure the design is fluid and that any issues that might occur are figured out. So now let's move on to our next lesson, where we'll talk about a mobile versus desktop first approach
3. Which is best Mobile or Desktop first?: so there are two main responsive design strategies to choose from when thinking about your Web projects. The most traditional is a desktop first approach. This is where you're gonna take all your content and lay it out with the expectation that it's going to get viewed on a desktop. This is great for content rich sites in sites where you know the majority of users are going to be viewing it on a desktop. The other approach is mobile first or content for strategy. This is where you're gonna do a bit of research and structure your information toe only have the most essential content and basically trimming away whatever's unnecessary. Nowadays, a lot of people prefer to go with the mobile first approach, but I think it really depends on the project you're working on. A swell is what you're comfortable with. It's a good idea to do a bit of research to figure out which approach is best. Looking into sight analytics. Seeing where most of the hits are coming from, is it mainly dust Top Mobile? Also looking into the product itself Is it a product that people are mainly going to be using on a desktop versus Mobile. Also doing a bit of user research is really helpful, asking questions to potential users and customers to see what their preferences. All these questions and research are gonna help you figure out what the best approach is when designing your Web project. Another great way of organizing all this information is to create a content outline, which is what we're gonna talk about in our next lesson.
4. Content is King - So Let's Start Here: If you're not working with the U X writer, then this is when you'll need to do some research, look at site analytics and ask certain questions so you can start to understand what the purpose of a sites page will be. It could be hard to lock down the final content of a site when working with certain clients . But don't get too hung up on this work with what you've got to create the flow. I've found that creating a content outlined for each page of my site helps me stay organized. Shows my clients that I'm focused on the message first and results in less mistakes. Over the course of a project, you can download my content outlines in your project. Resource is, there's an outline for each of the devices will be working with. This is a great place to write down page titles, body copy, sub headlines, image and video captions and meta info. I also like to quickly sketch out where this content will live on that particular device. After you finished creating your outlines. Now it's time to start prototyping your designs
5. Wireframing and Prototyping: So let's go over the basics. Ah, wire frame is a static, low fidelity layout of your product. It doesn't need to focus too much on the details. It just shows the overall framework for designers and developers to follow. Ah, prototype is mid to high fidelity design that looks very similar to the finished product. It's interactive and clickable and can be used for testing. There are pros and cons to each method, and what you decide to do will depend on your client timing and budget For basic wire framing, You can just use pen and paper to sketch out your ideas. I've included some low fidelity wire framing templates you can download in the project. Resource is, you can also create wire frames on a number of different tools, like actual R p mock plus just in mind as well as photo shop and sketch. Some great prototyping tools are Balsamic Atomic and Adobe X'd, amongst others. Some of these convey pricey, but most offer a free trial for you to try out have included a list of tools that you can choose from in the project. Resource is whichever method you choose. Laying out the overall idea of your site, whether low or high fidelity will help clear up any issues and make designing your responsive site. Ah, much smoother process.
6. Basics of Designing in Sketch: so I really love sketch. For years, I was using Photoshopped toe layout, my Web designs. But since sketch came out, I've exclusively used it for my digital projects because it's really made for this sort of work. When you go to sketch dot com, you'll see that specifically made for people who are creating software websites and product designs. They have tool kits, vector editing and so much more. You can download a free trial on their site to try out and then buy it if you like. So after you download sketch, you'll then open the program up and you'll see this pop up. Appear where you can start a new document. Go back to recent files are used one of their pre made templates. For now, let's start a new document. So when sketch opens up, you'll see a panel on the left, tools on the top and a panel to the right, which changes based on what you've clicked or doing. At that moment, you'll also notice the huge white art board or workspace in the middle where your designs will live. You can also customize your toolbar by going up to the top here and right clicking and clicking on customized toolbar. This will give you all the different tools that you can choose from, and you can pick and choose what you want to add into your toolbar. You can always go back to the toolbar default at any time, so you're really meant to work in art boards and sketch. The beauty of sketch is the ability to have many art boards or screens in one document versus working in a program like Photo Shop, where you have to turn on and off layers and are usually only working with one screen at a time. It really gives you a holistic view of your project and is great for especially large projects with a lot of working parts. So to make an art board, you can easily hit the letter A on your keyboard. Or you can go up to the insert tab on the upper left and scroll down Toe art board. As you can see, a bunch of different presets have appeared on the right hand side. You have Apple devices, android devices, responsive Web and paper sizes. For now, I'm going to choose one of these presets as you can see immediately, the art board has appeared on our workspace and to the left. Here we see that these air the layers. So right now, if I want to change the name, all I have to do is double click on this layer and put in the name that I'd like. If you want to move the art board, you can just hover over it and click and just drag it anywhere you like. If you want to make a duplicate of it, you just hold down option, and it will make a copy for you. And as you can see, the layer has appeared here, and I can go ahead and rename it now to add images or type to your art board. Just go to the insert tab in the upper left and choose from the drop down panel. You can choose shapes and text as you can see with shape. All these different shapes appear. You choose Vector pencil. You can choose Teoh, insert text or an image. Let's say for right now I'm going to choose a shape. Let's choose a triangle. So, as you can see, the cursor now has a triangle attached to it. and you can use shift to hold down and make a proportionate triangle. After creating the object to the right, you can see we can change the color so I can add a border or I could take it away. I can change the colors so there's a couple of different ways you can customize. I can add shadows in her shadows or blurs if I'd like, so you can align your shapes any way you like. So let's say we click on two objects and we go to the upper right over here and we can see we can align to the left of center to the right. We can align to the top mid or to the bottom. We have a couple different options. With that, we can also create shape textiles and something called symbols. But we'll talk more about that later in our lessons, so you can also align your shapes any way you like. So let's say we click on two objects. We can go to the upper right and we can align our object to the left to the middle to the right. We have a couple different options with this. Another cool feature is the pinning and re sizing option. So let's say right now I'm just gonna highlight these three shapes. I'm gonna hit command G to group them. And then I'm gonna go here to the right where it says re sizing and I have some options. I can pin toe edge. I can fix this to size, and this is just gonna give us a little preview on the right here. And so now let's say I have to change my art board. My objects are going to stay within my art board, and this is really great because it gives us a little bit of a general responsive nature to our designs. Now we briefly spoke about layers, but, as you can see on the left were in page one, and you can have multiple pages in your file just by hitting the plus symbol, and this will add more pages. You click here and you can scroll through your different pages. You can also adjust where your layers are, so you can just click on them and move them any way you like. It's really up to you. The great thing about this is that your pages were really helpful with large projects. So, for example, Page one could just be your wire frames. And Page two could be your high Fidelity mock ups, so it's really helpful. So another great thing about Sketch is that they have a great developer community that has created some wonderful plug ins, which are a lot of times free to use and that can really enhance your projects throughout these lessons. Also, just plug ins that can help your process along the way. You can prototype. You can add stock images. Lauren Gibson create color palettes. It's really endless. The Options sketches an easy to use program for the digital designer, and I highly recommend it. Download the free trial and let's start creating are Responsive Grid in the next lesson.
7. Creating a Responsive Grid: So before we begin laying out our site design and sketch, we first want to create a responsive grid. This is really going to be so helpful for us along the way. So here have created a new sketch file and we're gonna go to the upper left insert tab and scroll down to art board. On the right hand side, you're going to see a bunch of different presets pop up that you could choose from or you can create your own custom art board. On the right hand side, you can change the pixel dimensions, so I wanted to be 10 84 by 2000. You can change this at any time. Also, in terms of device dimensions. This is where the research that you did for your content outline will be really helpful. So now I'm just gonna go over here and rename this art board Just toe have my files more organized, and we're gonna go to the upper right to the view tab and scroll down toe layout settings here. You're going to see our columns are activated, which is what we want. Total with is 9 60 pixels, which is great, and then for the offset. It's really dependent on how big your art board is. You can increase and decrease this as you like. I prefer to keep it at zero and centered. And then you can also specify the number of columns you want. And for my desktop, I wanna have it at 12. Now, just to clarify these red bars are the columns and the spaces in between are the gutters. Right now, my column with is at 60 pixels wide and the gutters are at 20 pixels. Got her on the outside is just letting us know that there is an actual gutter of 20 pixels on either side of our grade. Now, you can also incorporate Rose if you like, But for this project, we're gonna keep it deactivated. And then you can also have your grid filled in, or it could be a stroke outline. You can also change the colors. I prefer to have it in this lighter red. And if you think you're going to be using this grid often, you might want to make it a default. After that, we're just gonna press OK, and now we have our desktop grid ready to go So now that we've created are responsive grid for desktop, I've gone ahead and created the tablet and mobile versions as well. So for tablet, we now have a nine column grid and for mobile, a four column grid. Keep in mind to have your margins on either side of your grid to create space around your designs and also in cases where you might have to edit your art board. After you've created your grid, for example, let's say you have to change your mobile from 3 22 4 14 We just go here in the right hand side and change our art board dimensions. And then we go up to view layout settings, and then we're just going to hit center and OK, and then we're set. So there you have it. We now have our three responsive grids for our three device break points, and in our next lesson, we're going to start laying out our entire site in sketch
8. Laying Out your Design in Sketch: Okay, so now let's lay out our designs and sketch. This is when you can use a screen that you've designed where you can use the one I've created for this class, which you can find in the project. Resource is we'll use our grid as a base for our content on. We're going to refer to our wire frames or prototypes to dictate the layout of our designs . For this project, I've created a simple travel website home page, and I'm going with the mobile first approach. So I've begun to lay out my design with only the most essential information. Let's start with our knave. We want to make sure our navigation is simple. Ah, mobile screen has a limited browser window, so keep your knave menu short and concise, all dropped on. Options should fit on the screen. We don't want users to have to scroll down along menu. It should have no more than 5 to 6 options featuring the most common queries or services that would bring someone to your mobile site. So here I have these knave items and in tablet and desktop, I've expanded the knave so that the menu is exposed. We also want to make sure that our main content or calls to action are above the fold. Above the fold means the viewable space on a Web page when it first loads. Nowadays, it's hard to predict where the fold will be, since there's such different device sizes, people are viewing sites on. Some designers have done away with the fold altogether, since people are more accustomed to scrolling, and they tend to focus more on creating a design that will entice their users regardless of the screen size their browsing on. I still think it's a good idea to think about the full for your projects here. I've marked my fold with these pink lines when determining an average fold. Most Web designers agree that for the most common monitor browser combination of 10 24 by 7 86 pixels, the fold line is at around 1000 pixels wide and 600 pixels tall. Your site analytics can also tell you the most common screen dimensions your visitors air, using new dimensions, gain in popularity all the time, so it's best to do a bit of research on mobile. The important content still needs to be higher on the page. But more importantly, the pages should be designed to entice users to scroll so that they don't miss important content. As I moved to the tablet and desktop views, I'll start toe, add on more features or what's called progressive Enhancement. For example, in Mobile, I only have one featured post, but in desktop and tablet I've added two extra posts. Another example is for the our services section in Mobile. I've only kept the type and had no imagery to keep it simple. But for tablet and desktop, I've added a background image to create some visual interest. So as I move towards larger devices, I start to ADM or content and features to keep the user engaged. So now that we have the basics, let's talk about optimizing our images type and user interface elements for the best results.
9. Optimizing Images, Type, and UI Elements for Best Results: So let's talk about the best way to optimize your images. I like to use Photoshop to edit and retouch my photos. Whichever program you decide to use, you want to make sure that you size your images appropriately. Unlike print, having the largest resolution in size won't be an advantage, since an image that's larger than necessary will cause your site toe load slower. So I only go as large as you need to. Also, you remember your images should be RGB and 72 d P I. It's also best to save for the Web to keep your file size down. There's several different ways you can bring your images into sketch. You can go to the insert tab and choose the image you want to import. You can copy and paste your image into sketch. Another cool feature of sketch is the ability to do an image fill. This is where you can import your image as a fill in the box to the right. When it comes to type best practices to not go below 16 pixels size wise on any device, we want to make sure that our type is readable on all devices. Also keeping your line length to around 45 to 65 characters is best. Sketch has a great feature where you can create textiles that if you change it in one place , it will change anywhere else. It's applied. So, for example, let's say I wanted my headline to be an open sands condensed at 16 pixels in black. I basically fill in the requirements to the right, and then I go up towards words as textile and I'll name my textile navigation style and then now have created my own textile. Now I can apply this textile toe, other parts of my sight. Now, if I wanted to change that textile, all I would do would be I click on the text that I want to change. Let's say I want to change the color of my text to a blue and I want to change the typeface now to Proxima Nova. So I make those changes and then I'd go up to textile and I would basically just update that style, and that will change all the type anywhere else in the site where that style has been applied. This is so helpful when working with large projects with many types styles for your user interface elements. You might be used to creating your vector graphics and Adobe illustrator. But sketch is a vector bee's program so you can easily create them in sketch if you'd rather not bother with Illustrator in case you don't know a vector graphic is made up of points lines and curves related to one another using mathematical formulas. This is really helpful when making your graphics large or small because they'll hold their integrity in cases where you have a vector logo or something you want to import from illustrator. All you have to do is save out as an SPG and imported into sketch in the same way you would an image. Also, another thing to keep in mind is that we want all our you I elements to be at least 44 by 44 pixels so that they could be accurately tapped with a finger. Another great feature in sketch is symbols. Symbols enable you to use and reuse an element across a project, keeping a master symbol that automatically updates other instances of the symbol when changes air made to it. So, for example, will create a video play button and sketch. I create my circle in my triangle within sketch and pick the colors I want, Uh, and then I'm going to turn them into a symbol by right, clicking right onto the layers and create symbol. I'll now name my symbol, and this will be stored in the library. Now you can see the symbol has changed onto my layers, and I can now import the symbol into other parts of my design. So you go up to the insert, scroll down to documents, and you'll see that your symbol is stored there. If you want to edit your symbol, you just double click on the object. It will bring you into the library, and here's where you can modify your symbol. So let's say I want to change the colors, make my play, but in black with a white arrow and it's now updated in every instance in my file sketch also has an array of plug ins. You can play with some that you can try our craft by envision, which is a free suite of plug ins that have asset libraries and real data that you can add to your designs. Prada wire is a great prototyping tool to try. Looper is a sketch plug in that helps automate the duplication of groups and layers and map generator 2.0, helps you create beautiful maps and interfaces. Try them out. They can really enhance your sketch files. So now you're ready to start laying out your design and translating your content into these three device touchpoints. Don't forget to upload your finished designs onto the project gallery. In our next lessons will talk about quoting your site and handing off assets to development teams.
10. Coding your site for RWD: so the basic building blocks to quoting your site are HTML and CSS. Let's chat quickly about the three main principles of R W D. Fluid grids are the backbone of responsive design. A site built on a fluid grid is based on percentages. So let's say you're working on a site that's a maximum with of 9 60 the device uses a maximum browser window with of 12 89 60 by 12. 80 equals 75% in your CSS script. You then take this percentage and apply this to the appropriate properties like you're with and margin. Media queries defined the various break points so that CSS can be applied when specific conditions are met. For instance, when designs are too large or too small. Media queries air used to detect the site with and the CSS will rearrange the site content . Flexible images are images and videos that skill depending on the screen resolution, they're being viewed on, For example, using this CSS command for the with this tells the browser that the image should be a maximum with of 100% of its pixel value, while keeping the height as is that it should scale according to its container. Some great resource is for learning to code are linked. Unlearning, which was formally lynda dot com Code Academy, tuts Plus W three schools and CSS Tricks Sketch, also has some handy plug ins to help code your site as well. Like Launchpad, which enables designers to publish sites directly from sketch, no coding needed. Market Tech is a sketch plug in that helps you generate HTML pages from sketch files where you can get measures and CSS styles directly and slinky. It allows you to export sketch files as ready to send HTML email templates.
11. Handing Off Assets to Developers: So sometimes, when working on certain projects, you may be asked to hand off your site assets to a development team. It's always a good idea to have a conversation with them first, to find out what they need in order to have a successful and efficient handoff. Some questions to ask would be if they need images at two X or three X for retina displays . It's also a good idea to go over any interactions you might have had in mind for the site. If they do need two X and three X size images, you can easily export them right from sketch. So when you're in sketch, you're gonna click on the graphic her image that you want to export and go to the right hand side where it says Make exportable. You'll then click on the plus symbol, and as you click it, you'll see one x than two x and three X will pop up. You get to choose what type of file format you wanted exported to you. Click the little slice tool that's right above it and then go down to the lower right and you'll export the selected sizes that you want I also like to deliver a digital style guide to the team. It's basically a resource that houses all the information about your company's color palette, images, icons, type and other brand styling decisions. It's used as a single point of reference for all team members to refer to when creating content for your site so you can create your digital style guide in in design. Or you can also create in something like Zeppelin, which is a plug in where you can hand off assets. And it essentially creates a style guide for developers to follow. Just by uploading the pages and symbols of your sketch file, you can also make comments and get feedback with anyone you share your project with On Zeppelin. It's been a great asset in my digital toolbox. Some other plug ins to try our measure, which creates specs for developers and sink sketch Plug in, which holds your textiles layer styles and color palettes in a Google sheet that can be instantly shared. Well, there you have it. You now have all the basic knowledge you need to create a successful, responsive website in sketch, So now it's your turn. I can't wait to see what you create
12. Conclusion: So I just want to thank you guys for coming along with me on this ride and learning about responsive web design. I hope by the end of this class, you come away with the confidence and knowledge to think responsively moving forward with your Web design projects. Please upload your projects onto the gallery. I'd really love to see what you've created. And also, if you have any comments, reviews, please just post those up. Also, don't forget to follow me. I plan on creating other classes in the future that are based around you. Are you X as well as being a freelancer amongst other topics. So until next time
Christina Barsan, Digital Designer
