I’ve recently launched this small website for Nest Kitchens, a bespoke kitchen company based in North-West Leeds.
This site itself is very simple, it’s very much a showcase site to show what Nest can do for their customers. I’m quite interested in kitchen design and all aspects of interior design so from that respect it was a good project for me to be involved in. I thought it would make an interesting post to talk about the process behind the site…
Let’s get started
Nest came to me with a clear brief and something of a rarity – the copy was already written, any web designers reading this will know that almost never happens. As Nest are heavily involved in interior design they had a really strong vision of how the site should look and function and it was my job to realise this.
The best laid plans
There were a few things I knew before starting on this project. I knew the client wanted the ability to edit the content, I knew the scale of the site and as a result I already had Perch in mind to deal with the content editing. I also knew the client wanted the site to function across all devices (who wouldn’t want this in this day and age though?).
What no sketches?
Ordinarily I will produce some very loose sketches of possible layouts for any web project that I’m involved in, these sketches aren’t for anyone but me – it’s a quick way to work out whether I think a layout will work for the project or not. With the content written, the structure for the pages in place and the client having a very strong idea of the design style, this time I bypassed the sketches this time and went straight into Photoshop.
Did you say Photoshop?
With more and more designers adopting a design in the browser approach I have to say, it’s not an approach that I use as a starting point. I still use Photoshop to form the initial visuals, I do this because it’s the tool I’m most comfortable with and I can realise my concepts faster this way. I almost always send my initial visual to a client when I’ve progressed it to a single page rather than following the route through to multiple pages first. I do this because over the years I’ve found it to be the smoothest path. At this stage I’m looking for a client’s general feeling toward the work that I’ve done. If the feedback is good, then I’ll progress the visual to cover other key pages/areas of the site.
Time for some code
In the good old days, I would complete all the visuals in Photoshop before starting work on any code. These days I jump into the code a lot earlier. With the client happy with the first visual I then progress the visuals and start coding at the same time. This allows me to show the client some working HTML and actually it’s just a really nice balance jumping between creating static visuals and working code. If you hit a sticking point on one, you can jump to the other to keep the momentum going.
It’s at the this point that I’ll start adding some small animations and neat little CSS touches that really polish the site. There’s a few elements on the Nest site that are hugely lifted by committing the time to do this: the rollover animation on the logo, the highlights on the home page, the custom scroll bar – have a play and see what you think.
Plugging in the CMS
With the client now happy with the visuals and also having seen how the site reacts in a browser, it’s time to start plugging Perch in to give the client the ability to edit content. It’s almost a retrospective approach but this is what I like about Perch, it fits perfectly into my workflow. This is the point where a client typically doesn’t get to see much progress as a lot of the work is now behind the scenes. Again this is another reason why I like working this way – rather than spending time mid project on the admin area, I like the client to be fully behind what they’re buying into and have seen as much of site as possible before I’m doing this type of work.
It’s now time to get all the content into the site. I split this with the client as I think it’s a great way to show them how to actually use the admin area and just get comfortable playing around with the site. Once the content is in place – it’s time to go live!
So that’s pretty much the process that I took with the Nest site and typically my process generally follows that form give or take a few things that may change depending on the scale or the project.