Design and build a website in a day: Part two

In the second part of this series I look at challenging myself further with a real website on the line.

My last attempt at this I found to be an interesting and pretty rewarding challenge to undertake. It allowed me to gain another perspective on my design and front end workflow while working to a very tight deadline revealed which areas required more of my time and attention and hey, it was fun!

For the second round of this series I want to push the boundaries a little. Last time (if you haven’t read it yet by the way then I would suggest doing so before this) proved to be a possible challenge within the confines some pretty relaxed rules. Ultimately there is always going to be a big difference designing an imaginary website for a silly blog post and designing actual work for an actual client that is selling an actual product to their visitors. So after speaking to a gentleman at the Heart (Headingley Enterprise and Arts) centre we agreed that I would spend a day redesigning, with the potential of massacring, his website and also getting those designs developed into a state ready to be handed over for WordPress integration.

I’m not going to write this as monologue of epic proportions - as I raced against time finishing designs, 30 seconds after my estimated timeframe, while frantically setting sass variables - I'll just go ahead and spoil the ending now… No. No I did not get it done in a day. I did not fail too miserably though, at least with a full set of designs completed and a substantial chunk of the front end.

The original Heart Centre website design

The original website design


The redesigned homepage
Less red, more welcoming

My vision for the new Heart website design involved simplifying the site with better use of white space, more readable text and overall creating a more inviting page for visitors.

So ultimately creating a new design for a clients’ website forced me to think a lot more about the design decisions I was making. Why it is better to go with a more minimal, full width layout? Why should the navigation be presented like this? How is this going to work as a WordPress theme?

The redesigned venue page
The site grid takes into account the inclusion of existing WordPress image galleries and events tickers

This brings me to a point that I have boring people with for the past few years, designing by habit vs designing with logic. I’ll try and keep this brief as not to bore you with it too, but as a web designer, more specifically when undertaking the visual design side of web design, it’s really easy to draw on other projects and trends when putting your artwork together. For example, your site needs navigation, the default reaction is top-right or left to right from the site logo as a horizontal set of links. We over-use large background images and reuse the trending webfont over and over again.

Sometimes these are the right things to do, it may work perfectly for the site you are creating, but my point is to not just default to design trends and personal habits… Think about your decisions, why does using Open Sans on this site make sense? Why are you using a big lead image on each page? Every one of these design decisions influences the relationship users will have with the company you are designing for and just because something is used a lot doesn’t mean that it is right.

These extra considerations are the reason for me, unfortunately, failing the challenge this time round. Client work does require more care and, although I have been doing this for a pretty long time now, I will still always try to second guess my work and reasoning.

There were a few things that held me up which could have been avoided with better planning however. Asset creation was a pain in the arse that could have been avoided, along with a little bit of image sourcing. I did not acquire svg versions of the logos used on the existing Heart website and so had to create those myself which did cost me a little bit of time.

The redesigned venue page

I also set up my front end workflow pretty much from scratch, which is a fairly time consuming thing to do. I think getting a set of blank workflow templates, and acquiring all of the site assets beforehand, may make this challenge achievable but for this round, I concede.

I’ve created a repo for the site as it sat at the end of one day into the project, the front end is not fully completed, as you will see, there are quite a few holes, hacky fixes and a tump of responsive issues, but I am pretty happy with the design phase overall (the full resolution comps and Sketch source files can be found in the DESIGN folder).