Eightyone Design Logo

Eightyone Design launches a brand new website

Eightyone Design Launches brand new website and blog

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). 

Old Eightyone Design Website Homepage

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.

New Eightyone Design Website Layout Sketch

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.

Old and revised Eightyone Design Colours

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. 

Alternate Website Design for the Eightyone Design Site

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.

Another design concept for the new Eightyone Design Website

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. 

Distressed and grunge version of the new Eightyone Design website

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.

Graphical elements to add a sense of branding to the Eightyone Design website

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.

Eightyone Design Fat Footer Design

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.

Posted by Steve

Share this: del.icio.us / Digg it / StumbleUpon / Tweet This / Share on Facebook

If you enjoyed this blog article you can subsribe to FREE updates from our graphic design blog by email or RSS

Posted on Sunday, March 29th, 2009 at 3:42 pm
Posted In Graphic Design, News, Web Design | Tags: , , , , , , ,

7 Responses to “Eightyone Design launches a brand new website”

  • Sander says:

    Simply love it! I really like the way you kept the previous design but managed to create a complete new look & feel. The post-it like images on the homepage are great. Browsing through the website now, good luck!

  • Very impressive re-design. Great work.
    Hope you won’t mind a bit of constructive criticism from me 😉

    – the logo in the header should be linked to the home page, even though you do have Home link in the menu
    – I don’t think it’s a good idea to have the same font size for all Heading tags. I think it’s better to have the H1 for the headlines bigger than sub headings in the post. Right now you have all headings set with 1.5em.
    – the letter spacing in the headings is a bit too tight for my taste.
    – I would add a bit of line-height space in paragraphs.
    – the textarea box in the comments stretches beyond the white content area (viewing on FF 3.08/Mac), I think you need to set the # of cols < 80 that you currently have.

    Other than that, I love the bg texture, colours, post-it images. Thanks for the write up, I’m always curious to read how other designers tackle their site’s re-design 😉

  • Tracey Grady says:

    Hi Lu and Steve, well done on your redesign. It can be a huge undertaking. You’ve maintained the visual branding associated with your design company, and the layout has a better flow.

    I agree with inspirationbit’s feedback. I also think the green colour of the links lacks contrast against the white background, making it very difficult to read.

    However I think this is a marvellous redesign; I especially like the diagonal stripes in the top right and bottom left corners. They really break up the horizontal/vertical blocks visually and they add a dynamic feel while keeping the design simple.

  • Love the new design! Love the clean look at the colors used. I think it’s really cool how you displayed the portfolio pieces and raised all of the corners.

  • David Airey says:

    Much fresher and brighter than before, which I think is a very positive step.

    Vivien offers some great tips, and, amongst others, I second her thoughts about the overly-tight letter-spacing on headers. I think you can improve legibility with more space.

    Tracey picks up on a good point, too, and that’s the contrast of the light green links. I reckon darkening them down a touch will again improve legibility.

    All the very best.

  • Wow. The new site looks sharp. You did a great job. It fits with the brand elements you have already established and builds upon them in a positive way. I love the subtle paper texture as the background; nice touch. You did a wonderful job. I hope that the new site helps to grow your business and meet your goals.

  • Steve says:

    Thanks for all your feedback.

    Sander,

    Thanks for your nice comments. As I said, your view can sometimes get clouded when designing for yourself so it is great to hear some nice comments regarding the website redesign.

    Inspirationbit,

    Of course we do not mind constructive criticism, in fact, that is what we were after.

    – Logo linking to the home page – totally agree and that was an oversight on our part which was meant to be updated prior to the site going live.

    – Heading tags – I can see your point and will look into having a sliding scale of sizes for these.

    – Letter spacing – a few people have said this, It actually looks much better in certain browsers but in FF it does look quite tight!

    – Paragraph line height – not sure I agree but will experiment with this.

    – Comment text area – again, a few people have reported this so I will fix asap.

    …and thanks for the nice comments regarding the design.

    Tracey,

    Again, thanks for the nice comments. I agree with the low contrast of the text links. This is again an oversight on our part. When we were choosing a new green colour we also chose a text link colour as we had noticed that these can be hard to read. We then forgot to use it!!

    Regarding the stripes, We wanted some sort of graphic to be reminiscent of the old sites branding. We probably worked on over 10 different graphics for the top right section of the site, most of which were much more complicated than the one we chose. However, after staring at it for too long I was not sure it did want we wanted it to but following some good feedback I am starting to change my mind.

    Shannon,

    Thanks for the positive feedback. I too like the raised corner effect of the portfolio images. Great site by the way, Just had a look around.

    David,

    Thanks for coming and having a look. As I said to Vivien, the letter spacing can look worse in certain browsers so I will look to address this. Please see my previous point to Tracey regarding the text links – I have a darker version of our green colour for use on text links which I will implement shortly.

    James,

    Thanks for your kind comments. I too hope the new site helps to grow our business!

Leave a Reply