From start to finish, my working process to create a website consists of the following steps. I have used examples from the website project UKRI THE INTERDISCIPLINARY CENTRE FOR CIRCULAR METALS for Brunel University.
1. Taking the brief
In-house brief
In house projects start with a team meeting. Requirements are discussed every team member provides valuable suggestions and feedback. Depending on the project requirements further questions may arise such as; payment provider costs, profit margins, budgets, feasibility and API integrations.
Client brief
An initial meeting with the client is essential to kick start the project in the right direction. I use a form in which I ask a range of questions for the client to answer. Often times clients are not clued up on websites and appreciate my feedback. This gives me a chance to get to know the client and the business, and anything else that might be useful in my aim to provide you with the best results possible.
Key information to extract from the client is; Do they already have a brand identity? Or are they a startup and require logo and branding to be created from the ground up? Do they wish to rebrand? Will they provide content? Do they require a copyrighter? What kind of website are they after? This could be a simple informative website or maybe they require ecommerce functionality, user registrations, subscriptions services or something more complex.
Essentially I need to make sure that key elements of the user experience is well established and mapped out from the get-go.
In-between step – Holding page
Not always needed, but sometimes the client may require a holding page. In this case I need to ensure that all necessary content for the holding page has been established. There and then a quick mockup design layout is discussed with the client, and then coding starts immediately if urgent.
A clean, mobile responsive holding page can be coded using HTML and CSS in a matter of a few hours. An example of one that I have coded for this project can be seen Here
2. Wireframing
Wireframing is essentially creating the blueprints for the website. Planning out where each of the elements sit, and how they will respond to different screen sizes. Upon approval of the client I move on to the design stage.
3. Design & QA
For the design process I usually combine images + html, css and javascrip to create desktop view previews. I start with the front page, usually I prepare between two and three designs.
Before sending anything to the client a thorough QA check is necessary, from both myself and other members of the team.
The two below examples are designs approved by a very happy client.
4. Development
For this step my first task is to log into the hosting provider and setup a hosting package and setup the website core. This process differs from project to project depending on who looks after the domain name. If the client already has a domain registered I will ask for login details so that I can update the DNS A Records. MX records may also require updating depending who is handling the email addresses.
Next I will upload the WordPress files and create a new MySQL database and Database User. I always advise to install an SSL certificate at this point, however sometimes we need to develop the website on a testing domain first and wait until website launch.
Once I have finished setting up wordpress I prepare and optimise the website assets along with a brief for the website developer. Always ensuring that everything is crystal clear in terms of font families, sizes, animated elements and hover effects. In many cases I assist the web developer when working with wordpress, suggesting which plugins to use and how to setup other settings.
I often check back with the web developer to see how they are getting on with creating the template.
5. Testing & QA
After the website is fully populated with content it is time to test it on different devices. I insist that all websites be tests using services such as browser stack, as well as locally on our smartphones, tablets, Mac, Windows. On both PC and laptop.
6. Go-Live
A preview link is sent to the client. Either a testing URL or the website is taken out of maintenance mode. Once the client is happy the migration process begins if necessary. This would usually involve moving the files to the correct location and updating the website url via the wordpress settings or database. An SSL certificate may also need to be installed at this time. Once everything is in place it is always wise to go through the website again to make sure that there are no insecure content warnings and that everything is functioning after migration.