Border Stylo's Making the Site

January 11th, 2010

0

It’s been just over a month now since we launched the latest redesign of borderstylo.com and to celebrate I am going to let you know a little about the design process behind it. When I say design, I don’t mean beautiful images and colors filling the page, instead I am referring to design as the organization of information and how the user interacts with this information.

When the average user interacts with a site they usually don’t pay attention to the design they are interacting with. They probably couldn’t tell you the difference between good and bad design outside the fact that they like one over the other. With that in mind, they probably have little understanding of what the design process is like, which is why I’m gonna share a little bit on the process I took with the borderstylo.com redesign.

When I first got word that I would be doing a redesign for borderstylo.com I knew I needed to find out what the heads of the company wanted to achieve with the site and who would be it’s audience. Doing so I learned that the blog needed to be the focus of the site. With the blog in the forefront we can better provide continuous and quality content to the media, developer and designer communities, our investors, and potential employees. With my questions answered I was able to start looking at our previous design and really see where it missed the new objectives and what changes needed to happen.

Since the primary objective of the redesign was to bring attention to the blog I started playing around with ideas on how the posts should be organized on the home page. We really wanted to show as many post previews as possible without it being overwhelming. After a bunch of sketches and conversations with a few others working on this project the new design started to materialize. The next step was to open up Photoshop and begin creating comps based off the sketches and notes I collected.

At this point in the design process I try to stick to a grid system so I know that my design is pixel perfect. I had been wanting to try the 960 Grid System for a while now and figured this would be the perfect project to test it out.

“The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.”

- http://960.gs

I originally decided to go with the 16 column grid of the 960 Grid System but I ran into a big issue with the layout of the post preview boxes on the landing page. I wanted to start with a row of two boxes, followed by a row of three boxes, followed by a row of four boxes but the sizing didn’t fit into the 16 column grid. So I ended up trying out the 12 column grid and the design fit perfectly within the grid. Each row of boxes had the perfect spacing between each box as well as achieving equal widths.

As you can see in the two screenshots, elements throughout the layout adhere to the 960 Grid System.

After comping, collecting feedback and iterating over general look and feel combined with the layout of the homepage and a few other pages I moved over to creating the HTML and CSS (also referred to as markup) for those pages.

Once inside the markup, I started building basic boxes in HTML and CSS that resembled the general layout design I created in Photoshop but leaving out all style outside of widths and heights of the boxes. Once the boxes were all in place as I designed them in Photoshop I began to give them visual style (colors, gradients, shadows, etc.) via CSS. I tried to style them as close to the Photoshop comp as possible without using any images but due to browser support of specific styling I would then have to slice up images (Crop out specific pieces from Photoshop and save them as images) and apply them via CSS.

After tackling the general layout I moved page by page implementing each feature’s markup and it’s piece in the overall site design. Once reaching the blog post page I had to jump in Photoshop again and think of how I wanted to accomplish a single blog post design. The most important part of this process with achieving good readability on the blog post content.

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”

- The Elements of Typographic Style by Robert Bringhurst

Keeping Bringhurt’s idea in mind and designing within the 960 Grid System, it made sense to make the blog content 6 columns wide (half of the 960px page width). This allowed for the content area to have about 70 characters per line and achieve the desired readability. We then decided to fill the other 6 columns with extra blog navigation to help users discover more content.

After a spending some time implementing the rest of the design on the other pages and doing some cross browser debugging we rolled out the site. This is a pretty quick run through of the very basic design process used on borderstylo.com and I look forward to writing more technically oriented posts in the future.

Tagged with: design, HTML, css, grid system, readability, typography

Related Posts

• Design Critiques for Non-Designers
• Adding Nodes to the DOM with Style
• Get in the Zone & Increase Productivity
• YAJ: Yet Another Javascript?

Author