These guidelines aim to make your website project a smooth and pain-free process by outlining the process of working with a web developer.
A website project involves closely aligning your needs and requirements with the web design and web development process. This document outlines these phases, what is expected and what you can expect, and provides recommendations for best practices in working with a web developer.
This page has information about the web design process.
Spec, estimate, and timeframes
If you’re reading this document then chances are that this process is already underway, and possibly at least somewhat complete.
Spec
The less we know about you and your requirements the more we would have to add on time for contingencies (unforeseen tasks), so to a degree it stands to reason that the more we know the lower the quote.
At the start we gather as much information as possible about your project to determine the scope of work, including – most importantly – a sitemap (a list of your website’s pages).
Estimate
We use your sitemap to estimate the number of hours for each page, template, or function of your website, then multiply the number of hours by our hourly rate to arrive at a total estimate of the cost. Then we wait to see if you’ve accepted our estimate.
You want to work with us? Great!
Timeframe
We use the number of estimated hours to determine the total estimated timeframe of the project, then we look at our schedule to determine a realistic deadline.
In order to ensure that your project is completed on time we have to make sure that it doesn’t clash with other projects.
Lastly we’ll provide you with a proposal and formal quote which includes a list of deliverables and timeframes. If we know what we need from you at this stage, then we might include that too, or else we’ll send that through when we know more.
We’ll also send our contract, and this document you’re reading now. Once you’ve approved the contract we’ll invoice for the deposit (usually 50% of the total). When that’s paid then the project may proceed. Exciting times ahead!
Design and development
The design phase
During the design phase you’ll work closely with the designer to create the look and feel of the website.
Using a program called Figma, the designer will use your text and image content to create mockups of the pages on your website.
These mockups, also known as prototypes, will look almost exactly like the finished website, but with some limitations, such as the fact that mockups have a fixed width, whereas a website responds fluidly to the width of the device it is being viewed on. Some interactions and animations may not be fully functional.
During the design phase you will have several opportunities to comment on the design and request changes.
The main benefit of using mockups is that they are much faster to create and modify than building or modifying an actual website.
Kindly ensure that you are fully satisfied with the design mockups before the conclusion of the design phase. It’s important to address any design-related concerns at this stage, rather than during the development phase.
The development phase
The developer uses the design prototypes to build the website. The prototypes have everything the developer needs, such as your logo, fonts, colours, some text and images, and measurements (width, height, spacing).
The development phase may involve less communication with the developer than there was with the designer, however larger or more complex projects may require more regular communication. We generally use email, but larger or more complex projects may benefit from project management software such as Trello.
The developer builds the website on a temporary domain, called a staging domain or staging URL.
Once the website is mostly built, the developer will ask you to review the work and comment where needed. The developer will perform the last round of modifications and adjustments.
After a final viewing and upon your approval the website is ready to be launched.
We move the website from the staging server to your server and domain, then apply some finishing touches such as adding Google Analytics tracking and a Google Search Console property and XML sitemap which lets Google know about the site.
Enjoy your new website 🚀
Snags and Pitfalls
Over the years we have eliminated most pitfalls by polishing and streamlining our processes. However the one that still sometimes occurs in varying degrees is when there is delay in supplying us with assets, and it causes delays which cause projects to clash.
TIMELY SUBMISSION OF ASSETS AND FEEDBACK IS CRUCIAL
Please ensure that all necessary assets and feedback are provided as per the agreed schedule. Any delays in submission could result in the project being temporarily put on hold. In such an event, resumption of work will be subject to the next available slot in our schedule. Please be aware that this could potentially be several months away, depending on our commitments to other scheduled projects.
Assets refers to things like text content, your logo, images, video, audio, PDFs, data, and anything else that we need from you to work on or launch the website.
Having said that ..
In practice we almost never have to put projects on hold. Despite often experiencing delays on most projects we have always endeavoured to make a plan, and have always met the deadline. But out of respect to our commitments to our other clients’ deadlines we have to reserve the right to put a project on hold if we don’t have what we need to complete it.
Because of the potentially serious impact caused by delays, we pay extra attention in ensuring that we understand your requirements, and proactively communicating with you about the process as it progresses.
We will work with you to determine what is needed from you and when it is needed, then provide you with a schedule for supplying us with what we need to proceed.
Here are a few important tips to ensure things go smoothly:
- Please ensure you provide us with all the necessary assets by the agreed date/s.
Assets may include text, branding, images, data. We will work with you to determine exactly what’s needed, then let you know when we need them by. - Please ensure that you are contactable during the project to answer queries from us.
We will do our best to let you know when your feedback will be needed in advance, but we may also have the occasional sporadic question along the way. - Please don’t make any major changes – such as adding extra pages or major functionality – to the project’s scope.
We don’t expect you to know everything about your requirements at the start – in fact the design phase is where clients often find out what they really want – so we make space for a certain amount of wiggle room here. Development is a more time-consuming process than design, so by the time the designs have been completed the project’s spec and scope should mostly be set in stone.
Significant changes to the scope will be billed and scheduled separately.
The rest of this document describes our processes in some detail, starting with defining the specification.
Web Development Assets: a summary of what we need from you
Things we may ask you to provide:
Information we may need from you
- A brief and / or web development specification document
- Timeframes / Deadlines
- A domain, with all relevant login credentials (unless we set this up for you)
- Hosting provider control panel logins
- WordPress logins
- FTP credentials
Depending, we can work with you to obtain these items.
File assets we may need from you
Please provide us with all requested assets. These may be:
- Your logo
- Style guide
- Sitemap
- Text
- Images
Depending, we can work with you to develop or obtain these items.
Availability
We may need to work closely with you to achieve your deadline, and in general we will need to be able to remain contactable during the entire process.
Summary of how we’ll work together
Platforms we prefer
Wireframing and Flowcharting
There are numerous tools for wireframing and flowcharting, but the best by far in our not-so-humble opinion is Plectica.
Prototyping
We generally use Adobe XD to share prototypes. Creating an account allows you to comment on the design prototypes we provide.
We’re also happy to use InVision, Sketch, or other prototyping tools.
For simple websites we may accept web designs as images, pdfs, Adobe Illustrator, or Photoshop documents.
Project Management
In general, we work with project management software during the development phase to ensure the process is very clear and smooth.
Tasks are arranged in To Do, Doing, and Done lists. For this we generally use Trello. If you’re not familiar with Trello, then please sign up and give it a try. It’s super-easy to use!
File / Assets Management and Sharing
We prefer using a shared DropBox folder to manage files and some assets. We’re also happy to use Google Drive.
In some cases, especially for smaller websites, WeTransfer, or even email might be fine for sharing some files and assets.
Documents and Spreadsheets
Although we’re happy to accept Word Documents for text, Google Docs and Google Sheets are much preferred because they allow collaboration and versioning.
Live Communication
Meet, Zoom, Skype, WhatsApp, Facetime, and good old telephone.
Websites
Yes, we are WordPress fans, but if you need a web-app-like experience we can develop custom non-WordPress websites.
Summary of what you will get from us
Standard deliverables
This is a standard list of deliverables from us:
- Design Prototypes
- Staging site – a website where web development takes place
- Live website – the final website
- Training – as required, in the form of a manual and live chat
Optional deliverables
Depending on your requirements, we may work with you to obtain these additional items:
- A brief and / or specification document
- Timeframes / Deadlines
- A domain, with all relevant login credentials (unless we set this up for you)
- Hosting provider control panel logins
- WordPress logins
- FTP credentials
- Your logo
- Style guide
- Sitemap
- Text
- Images
Table of Contents
