For every type of design, there are just as many designers. Some designers only work with print design, others with web design, and others with package design, fashion design, interior design…the list goes on and on. Others may work with additional types of design, resulting in some overlap from their original area of study into a new area, but that doesn’t come without learning that new industry first. Before designing websites, my area of study was print design. There was some overlap between the two, but ultimately there was a lot to learn about ways that they varied. So here are the top 6 things I’ve found to be the most important when switching between print and web design.
1. Step into the user’s shoes to help you design for user friendliness.
Starting out as a print designer, I will admit, my very first web page design needed some help. It was a hard mindset to get into at first. Print design was my bread and butter, and I wasn’t sure how to turn that mindset off. You’re on the web constantly and see a myriad of web pages and layouts with all of their parts and pieces. They are developed and combined in a such a way that facilitates accessibility to you, the user, to make the process of visiting the site smooth and enjoyable. Just as it’s important to keep certain elements consistent in print design, like page numbers and the section head in a magazine for example, the same holds true for web design. All of the needed elements may seem obvious when you’re surfing the web and navigating sites yourself, but you don’t quite realize how useful all of those little buttons are, all of the elements you really need, and how important it is for everything to be in its place until you are given the task of arranging information yourself in the most user-friendly way.
It leads to a whole lot of asking yourself, “…okay, and now what?” For example: so you start with the home page, laying out the elements in hierarchical order. The user clicks on a banner link at the top of the page to see details about newsletter. What happens when they get to that page? The newsletter is posted on that page, but what if they want to read a different edition of the newsletter? “…okay, and now what?” Are there breadcrumbs at the top of the page that lead them back to the newsletter archive? Is there a sidebar that lists other editions for them to flip back and forth between? What do you need to add to that page to allow the user to view all of the information and easily navigate through that topic as well as additional topics, but without overwhelming them? It’s very important that as you work through a design, you put yourself in the user’s place and ask yourself a lot of questions that the user might have, in order to make sure there are no questions about how the site works, should be navigated, where information is, etc., when the user gets to it.
2. Know the grid, love the grid, and most importantly USE THE GRID.
This is especially important if you are not going to be coding your own designs. This means you can’t just throw all of your parts of a site in a Photoshop document and expect it to always look exactly the same when your developer is done with it, especially if it is a responsive site (but we’ll get more into that later). I struggled with this a little at first too, mostly because I didn’t quite understand the grid in the beginning. The grid I understood, a classic 3×3 print design grid, is different than the Bootstrap grid I’ve come to know and love. So I saw a bunch of lines but wasn’t sure which ones were gutters and which were columns that I could design in. So while everything may have been aligned to a grid line, it wasn’t always the correct one. It was obviously explained to me shortly after and made more sense, and then it really started to click with me after my first time coding a website. Having to put my design into production, I finally understood how some parts of the layouts I developed wouldn’t work. And so it helped me create better designs.
3. Keep your mockups nice and clean.
Along with using the grid to keep your layout clean, it is also important to make sure you keep your documents nice and organized. Name your layers, use your groups, even color-code if you can. I usually make the header and footer red, so it’s just a quick mental refresher that those two groups don’t get changed from page to page. Then my content groups are the remaining orange, yellow, green, blue and/or purple. There is nothing more frustrating than opening a file that has seventeen copies of “Layer 23”, footer elements mixed in with the header elements, and every image name “Vector Smart Object.” It’s document chaos and ultimately slows down the developer and even you, or any other designers that may be intercepting your work, should updates need to be made at a later time.
4. Practice consistency in navigation and elements.
Part three of keeping clean and organized documents involves ensuring that your elements stay consistent throughout the site design as well. As I said earlier, you want to make the experience for your user as easy as possible. If you have a section that is repeated throughout the site, make sure it stays in the same place. A common place to find breadcrumbs for example is in the top left of the page below the navigation. If that’s where they start, that’s where they should stay. Right away, when your user clicks on those breadcrumbs to navigate a site, they will expect that they should go to that area to navigate their next item. If the breadcrumbs suddenly move to the right side of the page, or the bottom below the content, it will cause confusion and not make for a good user experience. Also keep your headings consistent. If you list out the title of the page at the top, it’s good practice to keep the same font, style, size, color and weight. The same goes for sub headings. Basically any type of heading element that is repeated in a specific area of the page throughout the site should have a consistent look.
5. Know your audience’s viewing preferences and design accordingly.
With print design, what you see is what you get. I think that was the hardest thing to get used to when switching to web design. No matter how pretty your design is, you have to consider that the user has the ultimate control over how it will be viewed. Screen resolutions are all over the place, so it’s key that you know your target audience and how the site will mostly be viewed. With mobile devices making up such a large portion of the traffic these days, if the site you’re designing is viewed mostly on mobile, it’s important to make sure the mobile looks just as good as the desktop. The desktop size seems the closest to designing for print, so I think it’s easy to get caught up in pouring your heart into that and letting the mobile view fall by the waste side a bit since it’s smaller and simpler. But it’s important to design for various devices. This is the only way that you can ensure you have the best control over how your design will be viewed throughout all sizes.
6. Design for content variation.
It is important to make sure that content looks good in your design, but you should also make sure that it isn’t focused around your design. If you have the content from the start, that’s great – design with it. But be prepared for it to change later on too. And if you are using dummy filler text, make sure that your design will look good whether there are 2 lines of text or 2 paragraphs of text. It seems like more often than not, it is usually the case that we insert a couple of paragraphs of lorem ipsum, when in reality whoever has the final say in content may only have a couple of sentences. So make sure that your design won’t look too empty if the final content is less than what you had planned for, and vice versa.
