Design and build a website in a day: Part one

So for my inaugural post on the Code Enigma blog I thought I would set myself a bit of a challenge.

I’m writing this paragraph before undertaking the challenge and this point I’m not sure of how this will turn out. It may be the case that this is simply quite stupid and can’t be done in the timeframe thus proving that web design is not to be taken lightly and a designer's estimates should be respected. Alternatively it could turn out that this is achievable, why are people charging so much for this stuff? Either way there should be a few talking points at the end of this exercise.

It would be pretty easy (and boring) to go down the route of “I need a website for Xcorp”, use a corporate blue palette, Bootstrap, insert picture of smiling business person, job done. So let’s start by setting out some guidelines.

Design and branding guidelines

  • Website will be based around selling a service of some sort
  • Company name will be two words created from a random word generator… First press only!
  • A logo, typography styles and colour palette are required
  • A design for the homepage including heading and footer styles is required

Development guidelines

  • A frontend framework such as Bootstrap or Foundation may not be used for anything other than just the grid components
  • There must be a sass workflow in place
  • The project must live in a git repo somewhere
  • A home, about, pricing and contact page with a working contact form is necessary
  • Site needs to be mobile responsive

Okay, that looks like a challenge. Oh also, just to be clear, this is a working day so eight hours is the limit to be more specific. So a few prerequisites on my end are to have all the software I will need installed including Ruby, Node and anything else that will require lengthy downloads or setting up.

 

Let’s do this

 

So using the random word generator at http://www.randomwordgenerator.com our company name is… Reliable Monster. Nice, I like it. This is obviously a company that allows you to rent one of their ‘reliable monsters’ for when you just can't forget something. Best man for a wedding and worried about losing that wedding ring? Heavy sleeper and have to wake up to catch that early morning train? You need a Reliable Monster. This is a thing now.

So colour palettes, I’m thinking fairly neutral for the backgrounds and larger picture layouts as we want to give the impression of being a professional and trusted company. I will use the logo and perhaps some more vibrant accent colours to give character and brand identity to the site. It would be nice to put together some quick illustrations for the little monsters but I might just do one for the logo and leave the others to the end if we have time.

So here is what I’ve come up with. We have the strong accent colours that one could associate with funky monsters and will also sit well against light backgrounds. I would normally match these with their respective Pantone references but let’s skip over that for now as we’re not worrying about CMYK colour palettes. I’ve also kept the grey from the accent palette as I much prefer the softer feel of a dark grey over black when reading on a screen. As a general rule of thumb, I use #333 over #000 for most projects. It also appears to render a lot smoother on lower pixel density displays but that’s a whole other blog. I’ve also grabbed a neutral colour palette that I can use for backgrounds and any other UI trimming. I’ll quickly sort the colours and create a reference chart for myself if I need to colour pick, grab hex’s or check a css variable on-the-fly.

Next up… We will need a logo and typographical styles. Since I’m pressed for time I will keep the logo typeface simple and use whatever Google font we choose for the site. I want something light and not so serious for the logo / heading font (this is a monster rental company after all) and something more professional and readable for the body font. 

So let’s go with Rancho (https://www.google.com/fonts/specimen/Rancho) for the lead typeface and Open Sans (https://www.google.com/fonts/specimen/Open+Sans) for the body.

I’ll jump into Illustrator for the logo, I want to create a little monster to sit with my logo and we definitely want to be working with vectors anytime we’re playing with logos! 

 

 

Whey, a logo. I spent a little longer than I wanted to here but I got to draw a monster, so umm, yeah. So we have a logo, typefaces and colours, let’s put all of that together and design a homepage using Sketch.

 

 

There we go, all straightforward enough! We have a necessity for a grid of some sort, vectors, background images, call-to-actions. Simple but effective right? Okay, all of that has taken me three hours and we haven’t even touched the build yet so a quick snack and straight to the terminal I think.

Right, I’ve set a Git repo up, and now to quickly set up a sass workflow. I’m using Gulp for my sass workflow along with Express to serve the site up. I would normally use Browsersync but I have had a few issues with it lately for some odd reason so will be skipping over it for now in fear of losing time. I am using ruby-sass, autoprefixer, minify-css and rename along with a watch task. I’ll have to press cmd+r but that’s not too much bother. I would also like to use handlebars or nunjucks here but hey, it’s only a 4 page static site, it’s not gonna save me too much time for this exercise (sorry Matt).

I think I’ll make another blog post in the very near future about how to setup a working frontend workflow in 10 minutes, watch this space!

AAAAAND TIME!

Check out the site here

So I stopped writing this blog as I started getting into the frontend, I did start to feel some time pressure toward the end but I did get it finished and functional. Although I have to admit that I have not cross-browser and device tested the site but in the interest of being open about what I was able to achieve I’ll leave the site as it is with any issues that may exist.

Nothing too interesting to say about the frontend but I did opt to use gridism (http://cobyism.com/gridism/) for the grid system and formspree (formspree.io) for the contact form.

I think I could have saved quite a bit of time by not writing this blog post as I was going through the design phase, bit of an oversight there, but overall I’m pretty happy being able to get it finished within the timeframe.

I’m not really sure what the main point to take away from this is but it does beg the question, as a designer, is there really a job too small? I’m not suggesting that anybody should be scrappily putting websites together in a day but removing the wait for content and sign off does make the process a lot easier to achieve. This was just one day too, so, yeah, there is a lot missing in terms of style guides, element styling, and testing but imagine what we could do with two or three days.

Maybe one thing it does say is that the current focus on user-centred, analytic design, with everything researched in depth, tends to make design ponderous. That may be essential for complex projects, where there are intractable problems to solve. But, there may also be projects where we don't need to overthink things, and we can just let a designer use some imagination and get it done.

Anyway, if you would like to pull apart the project then the repo is here. Safe.