I’ve wanted to redo the look of my website for about a year now and have finally finished a new look that I’m reasonably happy with. With this redesign, I had a few goals in mind.
Goals of the Redesign
Create a responsive design
By leveraging the power of media queries, the browser is able to adjust the layout and typography, based on the width of the browser viewport.
Use a grid system to set the type
Typesetting was based on a 13px vertical grid to maintain the flow of the text throughout an article. All elements, including headlines and lists, take up a multiple of 13 in vertical space.
Use Typekit for custom fonts
Web fonts are finally a viable method of changing your site’s fonts without the hassles and downsides of previous methods: sIFR, Javascript replacement a la Cufon, and others. I wanted to experiment with Typekit to see what kind of impact using a different font has on a site. A very significant one!
Things I Learned
Love the single-column layout
My initial design had two columns, which created a lot of useless empty space on the right-side where the sidebar was located. However, the content of my site doesn’t really need the second column, so I removed the additional column. As a result, the layout pulled together nicely, become simpler and more elegant. Single-column layouts might be a luxury only smaller sites can use, but they really allow the focus to center purely on the content at hand, rather than distracting the reader with various other articles.
Grids as a guideline
Grids are a great starting point for layouts because they let you quickly prototype the frequently used elements of a site: the logo, navigation bar, content section, sidebar, and footer. However, sticking too strictly to the grid starts to make a design feel too rigid. In future iterations of the design, I’d like to style some elements that break out of that rigidity without breaking the flow of the content.
Experiment with web fonts
We’ve finally reached a new era where the majority of our web audience is using modern browsers with decent standards support, allowing us to use increasingly more technologies that blur the lines between print and screen typography and layout. This is extremely exciting because it enables us developers and designers to present our messaging and content more effectively and creatively than ever possible.
Conclusion
This is a very exciting time for web development, with lots of really great technologies coming out that open up new avenues for both designers and developers. Also, the openness of the web development community is amazing. There are many fantastic resources out there that greatly ease the development and design processes, giving us more time to spend on creating a unique experience for the most important people – our visitors.
Resources:
ZURB Foundation: Rapid prototyping and building framework
Typekit: Web fonts provider