As in any project, preparation is your key to success. Here I share some of they key processes we use to ensure successful project delivery.

Development Kick Off

Before you dive straight into coding any new website, it is a good idea to have a 30 to 60 minute sit down with the development team to make a plan. Ideally, the product owner  should be at the meeting to answer any questions you may have. They will probably have been at all the client meetings and will have more in-depth knowledge than anyone else about what the site should achieve in terms of user journeys and functionality.

development-meeting

Hopefully, you’ll have seen the designs beforehand. It is a good idea to use this session to identify any issues you see and discuss with the team how you’d solve them. For example, if the designer has opted for an off canvas fly out menu since the last iteration , you could discuss how you’d build it.  You might find someone in the team has built one before, so they could take on the job.

Print the Designs

This kind of goes hand in hand with the development kick off but this stage should only really involve the front end development team.

I think this is a good step to take before embarking on the site build because print outs can be laid out to get a clearer view of the bigger picture.  You can’t easily do this using applications like Sketch, Photoshop or Invision. You’d either have to zoom out so far to see all the designs, or you may only be able to see one page template per browser window.

Viewing a webpage in a tactile form can also give you a different perspective and help you hone in on elements which you might otherwise miss. Being able to make annotations is also helpful.

Print the designs

Here at Hallam, we tend to annotate our print outs, then use them to help divvy up the work load and stick them on a whiteboard. We then refer to them during subsequent meetings throughout the build process. Once a template has been built and signed off, it gets removed from the whiteboard, which gives us a clear view of what we have left to build.

Obviously, we should all minimise the amount of printing we do, so be sure to use a recycling bin once you’re done with the designs!

Identify Common Elements

One of the principles we have embraced here at Hallam is that every design we create shouldn’t be made of completely bespoke templates. Instead, they should share common design elements that can be built separately and then inserted into the templates where they are needed.

I’m not saying that page templates shouldn’t have custom elements on them but this should only be the case when necessary. For example, a website with a Radio Interview Training page and a Television Interview Training page doesn’t need two templates when they are both essentially “training template” pages.

Common elements also create a better user experience because people aren’t bombarded with new things to discover at every turn.

Once you’ve worked out all the main elements of the site, you can then write them onto a whiteboard, make tickets and assign them to the various team members. Then when you come to putting the pages together you can just “slot” in the various parts into the templates and create them much more quickly.

Build First, or Style and Build Together?

This is something that we have experimented with in the past and at the moment we build and style templates at the same time.

In the past, we used to build all the page template structures and elements without using any css at all (barring any layout styles associated with either Bootstrap or Foundation). Then once we had the whole site built, we would go through and style all the templates and elements. This method certainly makes sense from a production line point of view. You wouldn’t paint a car’s body work before fitting it to the chassis, inserting the engine and putting in all the fixtures. With this method ,you separate function from style. In the initial build phase, you are interested in making sure the site works from a functional point of view before considering what it looks like.

Instead, we have switched to the “design and build” camp  so we can create a shippable product. In other words, we could go live at any stage because the site works and looks good. In effect, with the “design and build” method you still build the template without styling but as soon as you’ve finished laying it out you go through and style it. You don’t park it to one side and get on with building the next template.

The Basic Kitchen Sink

Here is something that would fit in with the “design and build” method. It involves styling some elements, such as typography, adding the site brand colours and perhaps adding the button styles to the master settings.scss file. It is amazing what styling these elements can do to a site straight away. You immediately have a website that no longer looks like a Foundation boilerplate site and you get a real sense of progress by simply spending perhaps 30 minutes writing a few CSS rules.

Frame the Site

My personal preference is to style the header and footer early on because it helps frame the site and create a canvas to continue styling and building the site. It makes the site look more like the finished product. However, a shippable site can still have an unstyled but functioning navigation and footer.

Conclusion

We all have our own ideas about how to take a website design from Photoshop into the build process and the above just happens to be the way we like to do things.

One thing I really do believe is vital though is to make a plan before opening up your development environment. Whether you are a freelancer working alone, or part of a large development team making a plan is a sure fire way to work more effectively and quickly.