Andrew Whittle
Independent Digital Graphic Designer

All the latest news

New projects, industry news, reviews and more.

Nov 3, 2014

Lets talk about workflow and presenting website visuals

As we are all aware gone are the days of producing visuals in Photoshop, presenting key pages to the client and then slicing in Photoshop and building a website, typically called of the waterfall process.

Over the past year or two designers have all had to adjust their workflow process to take into account Responsive Website Design (RWD). Even harder however is trying to educate clients of our new approach and why its important as clients still expect to see visuals. As we all know though, it can be very time consuming and costly for a client if they want to see how a website will look on various devices.

So how do we change our workflow? There is a lot of talk of designing in the browser and although this does have its advantages it should not be the starting point. Should we start in Photoshop or with a static wireframe? What about sketches? Truth is, there are so many ways of approaching a web project, just like each project and client is different and there for me lies the answer. Approach each project depending on the client, budget and timescales.

I do however believe we should aspire to stick to an ideal workflow but adjust where?necessary. Below is how I now approach each website project and I?try to involve my?clients every step of the way.

How I approach my workflow

As you can see there are a few stages prior to starting the design work in Photoshop or Illustrator, most notably the HTML wireframe. I use the?Zurb Foundation?framework for this stage?because I can then re-use?the code as final production code, unlike a static wireframe or online tools such as?UXPin, which I have used before.

I have also started to design my working visuals in Illustrator rather than the traditional Photoshop. There are many reasons for this but the main advantages are that it saves time not having to deal with multiple Photoshop layers, its easy to setup different sized artboards for desktop, tablet and mobile and its easier to export SVG's rather than having to rely on the limited vector tools in Photoshop.

Once the client has approved the design I make it clear that the visuals are just that, a visual. I take the visuals to the next stage by applying the design to the earlier wireframe developed in Zurb Foundation. I build out all of the key pages as static (non-CMS) pages so that the client can click through each page. I also encourage client's to view the site on mobiles and?tablets so that we can identify any UX issues or content flowing incorrectly at certain break points. Once this has been approved I can then integrate the?fronted into which ever CMS is being used or hand over the files to a developer for further bespoke programming.

So there you have it, that is my current workflow I have adopted to my digital projects.

In the New Year I plan to work with agencies looking at improving their digital workflow as?in-house workshops. If you would like more information on the workshops please feel free to?drop me an e-mail.

comments powered by Disqus

Blog catorgories

All posts
Marketing Advice

Receive my eNewsletter

If you would like to grow your business through effective design and marketing, register to receive my monthly eNewsletter. Note: Your details will not be shared with any third party companies.

Kind words from my clients

?Andrew has recently designed and developed 3 different websites for me 1 of which has already launched and is performing extremely well in terms of conversion rates.

In terms of the process from start to finish, I had an idea of features that i wanted on my site but I had no idea of the layout. Andrew gave me his own recommendation on what he thought would work well in order to make the customer journey as simple as possible and based on our current conversion rates he's got it quite spot on.

Andrew provided me with daily updates regarding the progress of the site from the design phase to the site build. In total the length of the project was just over 2 months. The website has passed all security checks and although the site is just 1 week old has surpassed all our forecasts and projections. I would highly recommend working with Andrew, his designs are aesthetically excellent and he has mastered simplifying the customer journey and has helped me get off to a flying start with my new business. ?Ocean Capital Ltd -

?Andrew has been great and guided me through the process of development to completion...

If I have had any questions he has been prompt and completed all tasks in good time. He has a good eye for details and I have asked him to help me further with my development of training and other materials for my business.?Embryarch Ltd -

?Having recently brought our website into the 21st century, I can thoroughly recommend the work of Andrew. He is professional, friendly, and a pleasure to work with.?MG Caravans -

?The service received from Andrew is fast and efficient. Andrew always interprets the brief accurately and delivers a first class service. I have worked with Andrew for several years and would have no hesitation in recommending him.?Aura Health & Beauty -

?We would like to thank Andrew for our new CMS website and the help, support and guidance whilst creating it. Andrew is approachable, friendly and didn?t talk in technical jargon which we didn?t understand. Andrew is always there for help and support to answer even the silliest of questions. Once again a big thank from everyone at Nutshaw Kennels.?Nutshaw Kennels -

?Andrew listened to what I needed and provided me with a fresh new website, identity and leaflet. He guided me through the process of getting my website online and now I rank page one on Google. I would highly recommend Andrew.?Jacqui Rostron -

andrewwhittle1 RT @penberthyarns: New handspun yarn fresh off the bobbin. In my Etsy shop soon! #handspunyarn #handspinner #handmade #cornwall https://t.c…