As I am sure any front-end developer can attest to, there are a lot of “small bits” (and maybe some large ones) that we as designers forget to create, or just simply overlook. This can include functionality like hover effects that maybe unclear, or even just basic design elements that are not explicitly described. In agile development, some of this would be taken care of through user stories, but at the end of the day, there are still things like “what does the favicon look like?” that sometimes get forgotten.
Below is a checklist of all the forgotten bits and general web design features we need to make sure to consider and describe.
The Forgotten Bits
1. The Favicon
Might as well start at the top of the page. How many times have you gone to a site and seen a WordPress, Drupal, or whatever other CMS’s default icon in your browser window tab? Too many times, that’s how many. This is such a small thing, literally, that it often gets forgotten. 16 x 16, save as an optimized for web .png and send it over. Remember it is going to be super small, so make sure your lines are thick enough.
2. Site Logo
Whatever logo you have designed (or been given) needs to show up well on desktop, mobile and as a square avatar for social media. When you are designing where on your home page the site logo is going to live, keep this in mind. Heck, provide the three options to your developer from the start, it will save both of you a considerable amount of time.
If you have 2 layers of navigation on your desktop view, make sure to think about how this is going to work for mobile. Is it going to just translate to a drawer menu with the “hamburger” icon; will users click and layered navigation will just expland down the page? Do you have an upper navigation with search bar that you need to keep for whatever reason? Just make sure you have considered these things when you are designing, and make notes of how you want the navigation to play out across devices.
4. Hover Effects
So you just finished designing your awesome navigation and menu system—now what happens when someone hovers on desktop? Is there a block that appears in a color with your link on top? Is there a drop-down menu? How many layers deep does it go? (Please say 1 or 2 max…I think we have moved past where deep drop-downs are even useful and not just cumbersome.)
Hover effects for inline links are also important to consider. Maybe your link changes color, just gets more bold or has a simple underline. In any case, you need to show or describe this somewhere in your design or notes.
5. Header Image or Slideshow
Do you have a header image or slideshow at the top of your page? If yes, what are the dimensions? Your client will need to know this. Also, keep in mind that if your header image/slideshow and the images on the rest of your site are inconsistent dimensions, your front-end developer should be alerted sooner than later. There are a lot of plugins/modules/tools that make photo-cropping/sizing, etc. easy these days, but it needs to be a conversation with your web team from the start.
Also, remember that slideshows need some visual queue for moving to the next slide like arrows, dots or thumbnails. What do these look like? Do they only appear on hover?
How does your slideshow translate to mobile? Does it have big blocks of text on top? Where does that text go? Usually below the image, but consider removing the slideshow on mobile altogether…there maybe a better way to show this content that is more effective.
Last thing about this: make SURE to optimize your images. That means “Save for Web & Devices” in Photoshop and if it is a .jpg you are making, try looking at it in the 2 or 4-up mode and compare everything from 50% to 80%. As long as it does not look grainy, keep moving it closer to 50%. The smaller the image, the faster the load time. That being said, you also need to consider retina displays. So you will need a version of your images that is 2x the ‘pixel density’ of what you optimize for all other screens.
6. Column widths and Gutters
I always start designing from a responsive, boot-strap grid. It is really important for your column and gutter widths to be consistent and responsive/mobile friendly. Even though your elements are ultimately going to move around the page depending what device your site visitor is using, you don’t want your design to get all jumbled. When choosing your basic column width, consider how that is going to look on a small iphone screen. Having super narrow or wide columns is probably not going to translate well.
Basic Features & “Atomic” Elements
7. Header Labels & Body Text
Headers vs. main body text are often different fonts, but their sizing still needs to be considered in relation to one another. Especially, when you are asking your developer to pull sizes from the design into CSS. Start with your body text and then plan your header sizes up from there. If you have typography training, think in terms of your “x” height…don’t just choose random sizes. Yes, you want to play around a bit so it looks good, but also remember that you need this to be mobile friendly, and thus sizes need to be proportional to one another. Here are the sizes and proportions to consider.
Body Text: Often around 14-18px, sometimes larger these days. Make sure you are choosing web safe fonts from trusted resources like Google Fonts, Font Squirrel, Adobe Font Kit, etc. You do not want the font you choose to look super different across browsers.
H4: This is probably a sub-sub heading and maybe the same font as your body text, just all caps, bold with a color change. Consider its line-height in relation to the rest of your body text.
H3: This maybe a normal section heading so could have a font change or just be 2x as large as your body text. Again, consider line-height and its style (bold, caps, color, etc.). Make sure these are consistent and documented.
H2: Probably your page title. It is often 2.5 -3x the size of your body text, depending on your overall visual language. Is it centered? ALL CAPS? Does it have a color change or other visual element added like a horizontal line above, below or to the sides? Again, make sure it is consistent across your page templates.
H1: This may be only used for a “Call to Action” or some other unique element that you want to be LARGE…but it still needs to be thought about and described. This can be 3-4x your body text…but really it is up to you. I feel like this is the most “personal preference, design specific” heading tag.
Give your website consistent buttons. It is ok for them to change color a little (ie. 1-3 colors if we are using them for different types of “call to actions,” but keep their font, size, and shape consistent. You want to train visitors from the beginning to “click here” and you don’t want them to have to relearn that on every page load. You also don’t want your front-end developer to have to create a million custom buttons. They need to be able to do it once, probably some time towards the beginning of their CSS creation, know what the button does on hover, where it links to through your user story and how far from other elements on the page it should be.
9. Form Fields
Even if you are not including forms right now, you need to include this in your design somewhere. It will be needed at some point and you don’t want it to just be stuck in there. You know what that will look like? Bad. Make sure you have created some form field, its label and how far it is from the next line’s field. Also, consider what error responses are going to look like. If you are using a CMS like WordPress or Drupal, there will be a default built in, but make sure that the basics are ok with you.
Unordered, ordered and defined lists need to be considered since ultimately, the chances of you handing over a site that does not use bullet points anywhere seems highly unlikely. So consider this, what shape are your bullets? What is their line-height? Are they indented? If so, how far and on one side or both?
11. Pull Quotes
So these are not always used, but still important to consider. Especially, since when they are not designed, they end up looking “not so great.” Make sure you have set the rules for the quote itself, the byline/person’s name, the sizes and style of these different elements and how much line-height is between them.
Your website design is critical to raising more money online. But, some of the solutions are simpler than you might think…
That’s why Rootid put together this comprehensive guide to demystify the technologies and strategies that will help you raise more money online. Check it out.