What if you designed an innovative and stunning building, but forgot to check if it’s physically possible to build it? What if you didn’t make sure it could be built within the client’s budget and timeframe?
In web design, there’s a difference between a site that works in theory and one that works in practice — and understanding this difference is the key to a successful project.
At Alley Interactive, we differ from other agencies in that our design processes happen after we’ve made fundamental technical decisions for a project. Rather than having a project land on the lap of a developer after it goes through non-technical hands, we have a technical point person involved with each project every step of the way.
After working on many large site builds, here’s what I’ve learned to focus on when assessing a design:
Fonts
Most modern websites use special fonts embedded through CSS or through a font service like Google Webfonts, Typekit, MyFonts, Fontdeck, Font Squirrel — I could go on. But they’re not without drawbacks.
- Be aware of the license and costs. If you use a service like Google Webfonts, you know it’s legal and free, but if you go rogue and want to embed another font, check that font’s license. In pay services like Fontdeck, the costs vary based on site traffic. Your font choice could cost your client thousands of dollars, so know what you’re doing.
- Loading external fonts slows a website down, so you should weigh the value of adding a font against using traditional web-safe fonts that don’t affect your site’s performance.
- If you’re embedding multiple fonts, choose all your fonts from the same service. Having to load fonts from two or more services is significantly slower than loading two or more fonts from one service.
- Embedded fonts won’t ever look the way they do in your beautiful Photoshop comp. Some font services like Google Web Fonts and myfonts.com allow you to see the font live in a site, so before you lock it in, look at it in different browsers and operating systems.
- Be consistent with your colors, sizes, and typography. If you deviate on your consistencies, make notes about it.
- Avoid changing a font’s kerning, tracking, scale, and shift and never use alternate glyphs.
Design details
Design interactivity like hover and active states. What should happen in the navigation when an item is hovered-over? What should the sub-menus look like? What should a basic link look like on hover? Include these states as separate layers in your Photoshop file.
Design to infinity, and include repeatable patterns when necessary. Let’s say your photoshop canvas is 1200px wide, and you have an 1100px-wide website, with a graphical background behind it. What will that background look like if the user has a 27″ monitor and they can see over 2,500 pixels of width?
If the site is to be responsive, be sure to include design direction for what elements will look like in a smaller, condensed, or simplified state.
Documentation and labeling
Label your Photoshop layers, and be descriptive.
For some more “destructive” (uneditable once set) features in Photoshop include the value in the layer name, e.g. “Dropdown container: 5px radius.” Try to use the same radius throughout your design.
Create a style guide. This document is a great place to store information, such as “heading font is Open Sans Condensed Bold, 30pt, 40pt leading, color #111111” or “rounded corners are all a 5px radius.”
Include a PSD with the typography of every basic HTML element with:
- 6 levels of headings
- Links (include hover state, too)
- Basic paragraph (mind the leading/line-height as well as spacing before and after the paragraph)
- Quotation
- Bulleted lists
- Numbered lists
- Tables
Increasing your own knowledge
Familiarize yourself with all the potential layouts the site will need to have. Learn some basic HTML and CSS, so you know what’s possible and what isn’t. It will carry the added benefit of giving you great ideas for your future projects!
Research real-world content and design with edge-cases in mind. In your design, your example heading could be only 10 characters long and it looks gorgeous. But what happens if the user adds a new page where the title is 50 characters long?
Social media
Sharing widgets (Facebook “Like” buttons, Twitter “follow” and “Tweet” buttons) often can’t easily be redesigned. Furthermore, sometimes this behavior is a violation of the service’s terms of use agreement. Try to avoid redesigning this functionality, or if you do, first check the service’s implementation guide to see if you’re allowed to do so. Next, check with a developer to see if it’s possible and if it’s easy.
Keeping the developer in mind
Don’t rasterize or flatten your Photoshop layers. It’s better to “Convert to Smart Object,” which allows the developer to access the core information, like a font’s size, weight and leading.
Don’t redesign form checkboxes, radio buttons, or select dropdowns unless you check with the developer first.