Words by Colin GoodmanSeptember 5, 2017
After the initial planning phase of a new project that consists of showing wireframes and getting designs signed off, the project will then move into development. This post details how the development team at Atomic Smash plan the development of a new project and what tools are used to help move the project along.
The first stage of planning development is to review all the designs to help get an idea of what elements are global, along with thinking about the SASS and ACF structure of the website. To get a good overview of any project we use Invision or maybe choose the more old school way by printing out all the designs of all of the templates and leaving notes as we go.
Invision is a powerful collaboration and workflow platform where you can upload wireframes/ designs and invite the client to view them. This is a powerful tool as you can leave various comments on any uploaded content to make sure nothing is being missed during development, and any questions you have could be communicated through the comments system. Having physical print outs can be just as useful and bring one major advantage in that you can have all the designs laid out in front of you in A4 size, Invision allows you to see an overview of all the designs but not at A4 size. Which ever method is chosen by the developer who is assigned the project and comes down to their personal preference, if Invision is not their preferred choice it will already have been utilised in the initial planning phase of the project in getting the designs signed off.
I personally find having the prints out laid out in front of me more useful and efficient as I can quickly go to any template, and will be able to compare numerous designs against each other. While analysing the designs it gives me the opportunity to think about how I will structure my SASS and ACF, laying down a good road map to follow and implement while working on the project.
The next stage of planning is to depict all of the elements we highlighted during the analysing stage and record these in Gitlab, then register them to relevant milestones. We create milestones for all of the elements within the website that we believe need to be recorded so we can monitor the progress of them, these elements tend to be the header and footer along with all of the templates.
A milestone will consist of all the elements that need to be developed to make the necessary block up, so taking the header for example the milestone will contain issues such as logo, main navigation and so on. The screenshot below shows how we tend to setup our milestones within all our projects.
Now that the milestones have been setup, we can now come up with time estimations to help us track that we’re on target. We tend to just record all of our milestones within a spreadsheet and put our estimations against each element. The developer assigned to the project will come up with the initial timings ready for the review stage.
After the timings have been recorded we get together as a team to review what the developer has done during this phase of planning. During this review we get an idea of what the developer has planned for the WordPress infrastructure, this is a really important phase as there have been times where initial ideas would’ve been altered to work better within WordPress resulting in saving us a lot of time and unnecessary additional work.
The last phase of planning is getting the project setup and ready to start development. Firstly we setup the code repository for the project and download our custom theme which we will build upon throughout the development of the project.
Once the repository and theme is setup we change various aspects of the theme to better suit the project we’re working on. This can cover such things as SASS variables, included files and removing unwanted functionality for the specific project. This can be considered to be a bit of theme house keeping, once complete the project is now ready to transition into full development and we can create another awesome WordPress website.