How and when to use HTML5 features.
On Redesigning My Site
Following my last blog post on introducing my new website, I’ve decided to write a new post on the redesign, this time taking a more technical approach in order to explain the decisions taken at different stages. The idea for doing this came about after Smashing Magazine offered a web design challenge to its readers. This offered the audience the chance to write a blog post justifying the design choices made on designing one of their web designs, which is exactly what this is.
Although I didn’t write a proper brief for the redesign, I knew what the site needed and where the old one had failed. I wanted a website which attracts new clients and portrays myself as a designer who creates designs at the highest standards.
I started by doing research on local sites since this was my primary target audience. It was very clear that the majority of local websites that I looked at featured high contrasting colours, heavy gradients and some animations. Fancy jQuery sliders being the most popular – many a time just for the sake of having a slider. After putting down a few wire-frames on paper, I tried to design a similar website.
A few days later while looking at my site, I just couldn’t relate to it. It felt like it didn’t belong to me. Although I designed it with the user in mind (i.e. the potential client), I somehow ignored the fact that this also needed to represent myself and my work. While my designs are generally clean and simple with a focus on typography, what I had created was a showcase of jQuery sliders and drop downs which weren’t going to make my site any better. This was only going to attract the wrong projects. Wrong because I didn’t wish to work on such projects.
Back to the drawing board, and I found myself stripping down my site to bare minimum, keeping nothing but the essentials. No fancy sliders and no drop-downs.
Choosing The Grid
The 960 grid provides an excellent framework to build websites and it’s also one which I’m most familiar with. I knew I needed a flexible grid for the different pages on the site, so a 16-column grid was the ideal choice for this kind of job.
First Impressions Count
The homepage needs to leave a good impression with my users. A typographic hello message, a short introduction about myself, a featured work section, links to my social network profiles, links to latest blog posts and a Twitter feed; all of which gather everything you need to know about me, or almost at least.
Look and Feel
Thanks to the recent developments in web typography, it was no longer an excuse not to have beautiful type on a website. I wanted to emphasise this in the design since it needed to represent me... (did I say I love typography?)
After looking at a few web font providers, I decided to go for Typekit due to their simple approach to installing fonts on websites and the vast choice of fonts they have to offer.
Setting the type on a baseline grid, I chose Meta-Serif and Proxima Nova for typography throughout the site. Meta-Serif makes a great legible type for body text, and Proxima Nova contrasts well when used as a lede or for some of the hyperlinks and buttons. The baseline grid helped in providing rhythm throughout all the pages, regardless of the font size.
The About and Blog section feature a slightly bigger font size for the body text. This decision was mainly based on personal taste. I’m used to reading articles on Readability, and I like the way the text is displayed in their default setting. When reading long articles, I found that bigger fonts do a better job by putting less stress on the user’s eyes.
Green is the Colour of Passion
Not really. Or maybe it is for me. Or is it? It’s the colour I decided to brand myself with, and it’s stuck with me for the past two years. The grey compliments well and type just looks simply beautiful in it. I used different values of grey for the body text, depending on the importance of that specific content within its page. At first thought I also considered using green for hyperlinks but they needed something more distinct, hence I opted for blue, which is also a conventional colour when it comes to hyperlinks.
In the Footer
The new site also has two added sections; the Design Depository and a Downloads section. Although I’d like to promote these sections as much as I can, I believe that they are secondary to the rest of the content as my primary users are potential clients with little or no interest at all in these sections. Therefore, the footer section is the right place to hold links to these sections.