Sorry for the lack of blog posts and Twitter updates lately but we have been hard at work getting our new online graphic design portfolio and blog completed. It has taken us 7 months to develop, build and launch the new Eightyone Design website and we thought we would share with you the process we went through to design the site as well as some alternate designs, thought processes and other discussions along the way!
August 2008
Back in August 2008 we decided we needed to address our website and re-think our online presence. We had built the website site in two stages starting with the main portfolio section of the website which was predominantly flash based. Then, after about 6 months of the site being live we introduced our graphic design blog which was built using the fantastic WordPress platform. Two years on we felt the Flash based portfolio section no longer showcased our design work as well as it could. We had also introduced some static HTML pages very early on mainly for SEO purposes but also for any users that did not have the required flash player installed. This combined with the blog meant that the site felt very disjointed.
We were therefore positive we wanted to update the site but what would the best way to go about it? So we did what all bloggers do in this day and age and wrote a post about it (When is it the right time to re-design your website?) and asked for feedback! We were very lucky to get many valuable comments which allowed us to come to the following conclusions regarding the new site:
1. It should be HTML based rather than Flash based.
2. We should utilise the excellent WordPress platform for the whole site as opposed to just the blog.
3. The main emphasis of the site should be our graphic design portfolio (the existing site did not show any examples of our portfolio on the home page and as such the user had to look for examples of our work).
4. The new site should encourage interactivity.
We were so grateful for the feedback we received and would like to say a big thank you to all of those who took time to comment, it most certainly allowed us to view the site in another light (you can see the complete list of comments we received here).
Getting started – Layout
Based on the four bullet points above we were able to create a list of pages and a storyboard for the site. We felt that any potential clients visiting a designers website would want to see examples from their portfolio. We therefore ensured that featured projects were the main focus of the homepage. We also wanted our contact details on each of the pages as well as a links to social media sites where people can find us to be on every page. We have been running a series of blog posts on website footer designs and so felt we had to make an effort to create a functional footer to store all these links and information.
The blog section of the site would have a slightly different layout and contain additional left hand navigation to guide users through our various posts.
Branding and style
Once we were happy with the layout it was time to asses the branding and style. We decided that we were happy with the majority of the branding for Eightyone Design and the main reasons for changing the website were to improve usability and functionality. We wanted to keep our logo and colour schemes but we wanted the site to have a much cleaner and simpler style.
In looking at the various pieces of promotional literature as well as the existing site we decided to change our lime green colour slightly. We did not want to move completely away from our existing colour scheme but felt that a slight shift would give the redesign the lift it needed. We also felt that the existing green had become, over time, slightly too luminous. After a great deal of time staring at many, many green colours in pantone books and playing with colours schemes on the macs, we decided to go with pantone 382.
Website design concepts
We then set to work designing a visual for the site using photoshop. I am sure everyone has experienced the painful process of designing for yourself. We lost track of the amount of times we got so far with a design concept only to change our minds and start again.
We began our efforts using elements from our existing website. This included the grey patterned backdrop and the white separating lines. After a few concepts it was clear this was not working so we started once again.
We then experimented with adding textures and shadows in order to give the site some depth. We liked the idea of raised objects sitting on the backdrop and felt this would help to emphasis certain areas of the site. After a few more concepts we started to make progress. The raised sections of the site were working well but we felt that adding too many of then (see below) once again detracted from the featured portfolio prices.
After a quick and odd detour to a grugy based style (I had something in my head and had to do it just to get it out of my system to move on! See image below) we finally settled on a light textured backdrop in grey with white raised polaroid style image holders to emphasis certain content and give the site some depth.
To add a sense of our branding to the site we started working on some graphical elements to add to the site. Once again we revisited our existing promotional literature and branding as inspiration and added some bold stripes to the top right hand side of the design. The stripes took their style from the lines that make up our Eightyone Design logo. However, some variation in the line weight helped to give the site a fresh look using existing branding in a new way.
For the footer we utilised the darker grey colour from the backdrop of our existing site (which is also used in a lot of our print literature) to once again add a link back to our original styling. The footer was made 100% of the width of the screen in order to make the site work well on larger screens. It once again included a small graphic element opposing that of the header.
The build
To build any WordPress based website or blog we usually start with Elliot Jay Stocks free Starkers Theme. This is a free theme Elliot has developed which as all the CSS striped out allowing you to insert your own styles in order to build the site. However, as the time of writing this, the theme has not been updated for use on WordPress 2.7 and as I had just upgraded we decided to create our own Starkers style theme from the default WordPress template. Once we had stripped out all the bits we didn’t want we started building our new Eightyone V2 theme.
This was fairly straight forward apart from a lot of time being spent on the stripes graphic in the header of the template. We wanted this to sit to the far right of the screen but when we tested this on a small browser window it was sitting under some of the text content (especially on the blog pages) which made the text not very readable. To overcome this we placed a limit on how far across the page the graphic would come meaning if you were viewing the site on a small screen you would only see a proportion on the stripes. However, users viewing the website on larger screen would see the full width of the graphic.
To work on the site locally (meaning we could leave the old version of the site online) we used the fantastic MAMP application to install WordPress on one of our macs. We then created a new theme and copied our database from the current Eightyone Blog to the local machine.
To create the different styles of the pages on the site we used a combination of page templates and custom fields. The page templates were used for the different types of pages (i.e the two column layout of the home page) and custom fields were used to create the portfolio project pages like this or this.
Once the site was live I then used an excellent Permalink Redirect plugin which meant I was able to change the structure of the site from /%year%/%monthnum%/%postname%/ to /%postname%/ which is something I have wanted to do for a long time. The plugin is really easy to use and very effective.
Feedback and testing
Overall we are really pleased with the new website, we feel we have kept to our key objectives and the design is clean, simple and resembles our previous style and branding with a fresh look. You can compare the new website design with the old flash based version here.
We recently wrote a post on why a graphic designer is never satisfied in which we talk of the use of social networking sites to gain feedback of design projects. We stated this is a bad thing as a designer should be confident in their skills in fulfilling the clients objectives in the most effective way. However, when designing for yourself you can sometimes become somewhat clouded in your judgement so we are now asking for your feedback on the new Eightyone Design website. What do you like? What do you hate? What improvements would you make? Have you noticed any bugs or problems with usability?
Your comments and feedback are greatly valued and we really do take everything onboard.