~ 7 min read
The process all starts with a phone call where we aim to fully understand your requirements. Web development is a broad and complex sector and so there is a large range of possibilities for each project. If you have a detailed project brief or RFP, then we will need this first along with signing an NDA if required. We’ll then ideally discuss the project requirements with you in detail, before preparing any quote. We may also ask for a bullet point site map or a link to an existing site or competitor to better determine and understand what sort of site you’re after and what the competitor landscape looks like. The level of functionality and complexity in a project determines its cost and time; it is not always dictated by the number of pages. During the discovery phase, we want to figure out the core functionality of the site and see whether the brief covers all of the variables that will need to be researched. For example, if we get a request for a marketing site with a private login area, we’ll need to scope out exactly what this login area entails. It could be a simple staff bulletin board or it could contain a CRM system, employee database, invoicing and accounting integration.
We’ll also discuss technical solutions for the project, such as whether the site should be built with WordPress, ProcessWire, Laravel or another content management system (CMS) or framework. The choice made here can have an impact on the site design and planning, as well as the time it takes to develop. API integration, marketing tools and other third-party elements all require planning and research. We’re more than happy to take a look at any preferences or requirements you may have for a suitable development platform, this could include SaaS platforms like Shopify for example.
During the discovery phase, we will make sure that you’re up to date on the latest website trends and how they can be used to help your new website stand out from the competition. We can go over the benefits of Three.js, Canvas, SPAs and other relevant technologies.
Our goal at this stage is to get a comprehensive understanding of your project and sketch out the technical approach we'll use. Another important consideration will be the amount of design work required for the project. We’ll make sure the project brief contains all of the design items, whether it’s a new brand or logo or a brand refresh.
We’ll put together a proposal for you once we have gathered all of this information. This is a 30-40 page PDF document that covers everything you’ll need to know about your project. From our suggestions to the site's features and technological solutions to a description of the project cost and timelines. Once you’ve signed this proposal, we’re ready to start stage one which is planning & design.
Our first task in planning out a project is to put together the sitemap and the core objectives. We use a program called Coggle to accomplish this. Coggle is a collaborative mind mapping tool that helps us to visualise the site structure. We’ll also list any 3rd party integrations for the project and visually display where each integration interacts with the site. We’ll show which pages will drive the core objectives. For example, if the main core objective of the site is lead generation then we would show how the homepage, contact page and services pages would achieve this objective through call to action triggers.
The goal is to compress what we know about your project into a focused brief; in other words, a small number of objectives that the site structure and user interface must achieve. This allows us to map out the entire site and see if any changes need to be made before moving on to the next phase of planning, wireframing the site.
Wireframing is done with the help of a tool called Figma. Figma is a collaborative interface tool that allows us to draw a site schematic whilst allowing for direct feedback on the wireframes. We'll start by wireframing some menu and homepage items and brainstorming UI/UX concepts. This is often quite an interactive process with multiple iterations and options explored and discussed as the wireframe moves forward. Once the menu style and homepage structure have been agreed upon, we will then move on to wireframe the remaining inner pages of the site. This involves careful research into which UI would best suit the style of the site being developed.
Every single page of the sitemap will be wireframed, using placeholder text and graphics. The goal of this is to finalise the site’s content logic, structure and functionality. As Figma is a collaborative and interactive tool, we’ll often go through multiple revisions of the wireframe to ensure that the site is tailored exactly to the brief and the core objectives. The wireframes will also be reviewed by the wider development team to ensure that any potential technical challenges are identified and evaluated before being incorporated into the designs.
The design process, which is often done concurrently with the planning, varies from project to project. It frequently includes items such as:
Based on the style and design brief established during the planning meetings, the design process will set out to create a highly engaging and aesthetically appealing site. We’ll begin with brand exploration, in which we’ll take your current branding and apply it to a web design setting. This allows us to get a feel for how your brand can be best portrayed digitally. Colour palettes, typography, photography, spacing and general layout approaches will all be covered. We’ll often explore new concepts to represent the brand at this point, and we’ll bring them to you with the goal of improving the company’s overall digital presence.
The scope and approach to the design process are bespoke for each project, however, it usually follows a set process, we only move to the next design item once the previous component has been approved. We will never just go ahead and design a whole site without seeking approval at each step. Stage one design involves the following elements:
Once each stage of the above creative steps has been completed, in line with the structure and layout of the wireframe, we are ready to move to stage 2 front-end development.
Note all design work is presented through our very own Review Tool:
We’ll take the Photoshop files from stage one and turn them into a combination of HTML5, JavaScript and CSS. This, too, can be subject to change and fluctuation based on the project and the technical solution chosen.
To ensure that the site functions and renders effectively across all forms of media, including modern smartphones and tablets, we will employ a responsive framework like Bootstrap.
We'll provide you access once the development for this step is finished so you can check out the responsive web design (RWD) performance and interactivity of the code. At this point, we will conduct extensive RWD testing to guarantee that each module works across multiple browsers and mobile devices. We'll be ready for back-end integration and development after this testing is completed.
The scale and complexity of this stage will be influenced by the web development framework chosen for the project. Our team can recommend a number of open-source platforms, frameworks and content management systems for your project. The technical solution is often chosen during the planning stage of the project.
We'll likely use one of two frameworks, ProcessWire or Laravel unless we're using a pre-built content management system like WordPress. You can learn more about them by clicking here.
Security is of paramount importance at ID Studio. We protect our Laravel projects against the OWASP top 10 security risks and run these projects through a rigorous penetration test after development.
We will send you access to the beta site once the development step is completed. This is the entire site, which has been pre-populated with content from the designs and is ready to be filled with real content in preparation for launch.
We will provide training videos and workshops to train you on the CMS so you’ll know exactly how the system works in order to keep your website fresh, relevant, and up to date. At this stage, we’re preparing to get the site ready for launch, this will involve:
Prior to launch, we’ll go over the entire site to ensure that all of the content has been correctly added. For ProcessWire sites, we have developed a health tool that checks for remaining placeholder text and broken links. When this tool is engaged, you will see these areas highlighted in red on the site. Once this is all complete, the DNS settings are updated and we will install the SSL certificate.
