A Few Beers = A Design.
South East Cycles is my best mates bike shop, so over a few beers we sat down and talked about what he (Brendan) wanted in a website. The brief was something simple, presented a professional look, outlined how people could contact and find them and what they offered. Pretty straight forward and what most business are after in a simple website. As this was a brand new business, we also spoke about brand colours and logo design ideas.
We came up with a plan and some basic sketches of a logo and site layout. I got Brendan to create a listed of website he liked and didn’t like. Of the websites he liked, I asked him what he didn’t like about these sites. Of the sites he didn’t like, I asked what he did like about them. I’ve found this approach gives perspective of what a client really likes and dislikes. If you can tell me what elements you like about a website you don’t like, it gives me a stronger understanding of what matters to you in a design.
To The Design Program.
With the likes and dislikes list in hand, it was off to Fireworks to knock up a few mock site layouts and logo designs. The brand colours Brendan picked where orange and dark grey. I think these colours really rock together, the list showed Brendan also liked the feeling and mood a dark site gives.
Brendan and I often joke while out on a ride and have come up with names for other cyclist. “Crank Spanker” and “Sprocket Jockey” are just a few of the G rated names we have come up with. Being a bike shop, I drew inspiration from my bike and Brendan’s favorite name “Sprocket Jockey” for design ideas. Using the front chain ring as a starting point, I played around with shape and colour and came up with the orange sprocket. Once the sprocket was positioned I used one of the many online font foundries to find a font we liked.
I Love That Old Bike.
Every July it’s Tour de France time, a 3 week-long epic that covers over 3,500kms and goes over some of the biggest mountain ranges in France. Both Brendan and I love this race but it’s not just the racing that we love, it’s the country side. I’ve never been to France but the TV coverage of the race is amazing, the little towns along the way and rolling country side is spectacular. It’s these little towns that inspired the background image and this set the mood for the rest of the site. We loved the old school bicycle learning against the wall outside this Italian shop. Yes it’s not French, but the Tour does go through Italy on occasions. The image captures what Brendan loves about cycling, the freedom and simplicity of the bike design which hasn’t changed over many many decades. It’s this simplicity which is used in the layout of the site, a header area, a main content area, a sidebar and a footer. A very basic and simple layout but it works and a huge amount of websites world-wide follow this layout design.
HTML and CSS Coding
Once the layout was agreed to it was onto the coding of the site. I used HTML and CSS2 with a few CSS3 rules for adding the custom shop font and some gradients and box shadowing. I didn’t want to go over board with the CSS3 styles as at the time of the site being coded it was still in its early days. A common best practice in using these styles is it should enhance the design but not impact it if the browser doesn’t support it.
Testing was done prior to deployment and it works well in Firefox, Chrome and Safari. Like most sites Internet Explore doesn’t play nicely with some of the styles used in the CSS. As I said earlier, the CSS3 styles I used had a graceful fallback or didn’t impact on the site layout and maintained read ability.
I Wanna Do My Own Update – Moving to WordPress
A couple of months after the site was deployed, Brendan came to me asking if he could do his own updates. He hated bugging me every time he wanted to update something and didn’t want to learn HTML at all. This was cool with me as I really wanted to get my hands dirty with WordPress. After many hours researching WordPress and watching a few video tutorials (thanks Chris Coyier you’re awesome!), I created a custom WordPress theme for South East Cycles.
After the theme was completed and the site was migrated to WordPress, I popped over to see Brendan and walk him through updating his content. After an hour or so (and a few more beers) of tutoring he was up and running. This is what I love about WordPress, Brendan admits he is not the best with computers, but WordPress is easy to learn and he is more than comfortable updating his site now.