Pushing Pixels For Better Designs

Because I taught myself web design, there are some really basic design principles I missed out learning early on. A couple years after I started making websites, I started designing for LevelTen and was fortunate to work with some very talented designers.

At that time, I used to just slap things on a page and sometimes things lined up or were evenly spaced, and sometimes they just fell how they fell. During comp reviews, I started studying organized design and critiqued the designs I had created to learn the glorious wonders of alignment and spacing. This post shares what I learned and what I preach.

If your design feels somewhat cluttered or unorganized, push some pixels and spend time organizing your design. Here are four useful tips: 

Space things evenly

For example, if you have some text in a box in your sidebar, it’s usually a good idea for the text to be equal distances from the top and side. It’s a simple habit, but makes the box look balanced and uniform.

Align elements on the page

If you have a page full of boxes, a logo, some headlines, some text, all roughly in the same position you should be lining up the edges as much as possible. When designing, I spend as much time using Photoshop guides and aligning page elements as I do on the actual creative aspects. The more you practice aligning and the more you look at how other people and designs do it, the better you’ll get.  Soon, it becomes instinctive and you’ll find it starts driving you insane when people don’t align things properly.

Use a grid system

Grid systems help align content on design concepts and also help the programmers when it’s time to implement the theme. I typically start with the 12-column 960gs Photoshop template. I’ve found that by using the 12-column system and keeping columns equal, website development speed increases because there is less styling for mobile. Most mobile layouts seem to fall into place with minor tweaks if designed correctly.

Become OCD about font sizes and families

A rookie mistake is to go crazy with typefaces and mismatch sizes, fonts and colors. While variation is good, you also want consistency. It’s best if you have 1-3 typefaces that are used throughout the site.

A very useful hint when designing websites is to create your mock-ups with ALL planned font sizes types and families within your mock-up. Pay close attention to detail with H1, H2…, block quote, banner headlines vs. page headers, etc. This ensures consistency throughout the site and can act as a branding guideline for the project.

Also, don’t forget to use web-safe or embeddable fonts that can be displayed on the site using Google Fonts, Font Squirrel or Type Kit. 

Closing:

Stick with these very simple rules. Your clients, your team and your boss will thank you for it. Once you’ve mastered the art of alignment, you can begin adding elements that aren’t aligned to make your designs more interesting. Know the rules, then break them!

Photo by: Mark Robinson