Parallelogram
The first thing I did was to scrap both backgrounds and look for a new one. I still knew exactly what I was looking for, but didn’t feel like making one so I continued the search. This time I stumbled upon a perfect background right away and tossed it in the composition. If this is the background that will be used on the site I will have to prepare it for use by making sure it tiles correctly in the x and y directions.
One thing I did keep from the last version of the site design was the HTML code that was being used in the dark background. When you want to give the paper texture a newspaper feel you typically write out a bunch of text and invert it so it is backwards and then turn the opacity way down because newsprint is so thin when exposed to any light the text on the other side is visible through the paper. The problem is I don’t really want it to look like a newspaper, so the HTML code was dropped in later versions.
I changed all the text to Titillium and played with the weights. For now I was only using one font through out the whole design. This is also where I got rid of the icons in the side bar. I wasn’t sure what I was going to do with those yet, but I knew I didn’t want them over there anymore. Besides I liked the wide margins it now created on the sides of the body content. I changed the circle at the top that was around the contact button and turned it into a square. That was a catalyst for the remaining graphic elements.
The first thing that dawned on me was that the parallelograms I was using on the side and top of the logo were the original graphical elements and I should consider using that as the sites graphic motif. I was about to put squares back next to the main navigation but instead used parallelograms.
2010 Comp 3.1
2010 Comp 3.2
I started to put the parallelograms around the page. I added them next to headers and started to place them up at the top for the utility navigation. I was re-shaping them and playing with opacity and color.
I figured out what to do with the Facebook and Twitter icons, they were going into the top utility navigation. I dropped the mail list icon and made the link to our blog just another word in the navigation.
I drew a few more border lines here and there and darkened them up a tad. I darkened the main navigation text and changed a few of the headers. Those are still in the works, but I like headers that aren’t so literal. Instead of saying “Testimonials” say “The buzz”, or something like that. It’s more fun and interesting to be creative with your headers than literal, which can be dry and clinical.
2010 Comp 3.3
2010 Comp 3.4
Version 3 was feeling good, but it wasn’t quite there. The lime green color I was using in the style guide as one of the company colors was too close to the new green being used in the color coding, so I decided to ditch the lime green. Now the home and utility pages will use the dark gray from the style guide at the top next to the logo. That change effected the top utility navigation as well.
We also decided to move the client area from the footer and make a tab for it. That freed up one of the spots in the footer to use for something else. One thing we have tossed around was a “start your project” call to action where a user could download our client questionnaire or give us a call. This will be on all pages and follow that pages content, so every page ends by asking you to start your project.
So the “2010” tab got moved down to the bottom where it does make more sense, and the client area tab replaced it up at the top. Both these tabs are going to be fixed to the right side of the site no matter what size your resolution is.
Looking over the composition I noticed something wasn’t quite right. When I turned back on the grid I saw that I had broken it in a few places which made the page unbalanced. I moved the logo and navigation over to the left and nudged the top navigation back and forth until it sat right in the grid. It appeared the body had some adjustments it needed, but I figured I would leave that until I replace the Lorem Ipsum with the actual copy.
Adding the copy to the pages was next, so I could make adjustments to the body and get a sense of how the new copy will be laid out. I think it’s important to place and work with the actual copy because inevitably it will effect the page differently than Lorem Ipsum. I wasn’t sure exactly what I might do with the copy, how I might play with the layout of it, next week I should have all the copy placed in the six main pages as I get closer to a final composition.
2010 Comp 3.5
2010 Comp 3.6