Website Design & Development

Our 4D Approach

4d
01

Our Approach

Covered Resolutions

We design & develop stunning, functional websites and apps that resonate with the user, this means not only do they look the part.. they convert. Our in-house team of highly skilled designers & developers provide a turn-key solution to getting you seen online.

Our websites are coded using semantic HTML5/CSS, bolstered by a powerful CMS. Optimised for SEO purposes, each page is designed to adapt to the size and orientation of the screen using CSS3 media queries, resulting in compatibility across desktop, tablet and mobile devices.

02

Our 4D Process

We use a tried and tested method on a website build of this size. A fundamental approach to ensure we deliver a first class product. Each stage of our approach is broken down into a timeline with deliverables, this allows for sign-off at the completion of each stage and ensures efficiency due to constraints in time.

Define

  • On-Boarding
  • Project Planning
  • Competitor Analysis
  • Audience Evaluation
  • Brand Review
  • Brainstorming

Design

  • Brand Guidelines
  • Voice, Tone & Style
  • UX
  • Wireframes
  • Creative Design
  • Template Creation

Develop

  • UI
  • CMS/E-Commerce
  • Content Migration
  • Technical Review
  • User Testing
  • Onsite SEO

Deploy

  • Analytics
  • Hosting
  • Maintenance
  • Training
  • Go LIVE
  • Evaluation

Select a tab below

Define

On-Boarding
To lay the foundations of the project with required information including the set-up of communication platforms, shared drives and folder architecture. We begin with a focus group to outline the websites functional needs and aid in organisation set up.

Project Planning
We use Trello as a simple way to manage each stage of the project, a tool for collaboration and proofing. This stage allows us to breakdown the project roadmap and ensure we are all on the same page.

With the information provided, we set up a list of goals, milestones towards completion, taking into consideration our timeline.

Competitor Analysis
We look at competitors and/or websites of a similar quality. We spot emerging trends in the market to allow us to stay ahead of the competition and stand out amongst the crowd.

Audience Evaluation
We collaborate with user insight to identify their needs and what drives them. This aids in content creation, branding and user journey.

Brand Review
To study what is readily available and how we take it to the next level. We look at the current brand identity, colours and font pairings to create consistency in our design.

Brainstorming
Using insight from our brand review, this stage is to look at art direction, content ideas, imagery and more.

Design

Brand Guidelines
The foundations of your new website. We begin our digital phase creating the building blocks that will flow through the sites pages. This is a great tool for to help gain a visual picture of the sites finer details and can be used both internally and externally for lots of different types of content.

Voice, Tone & Style
The voice and tone of websites gives the first impression within seconds. Style comprises how the content and design complement each other and enable your visitors to decide how they feel about your story.

UX
User experience design is the process of developing and improving the quality of interaction between a user and all facets of a company. We begin by creating a sitemap, our model of the website's content and userflow. We will create a hierarchical list of pages with mapped sections and links.

This stage is designed to help both users and search engines navigate the site.This stage also focuses on content collation. Using our predetermined folder system, we will begin building out the content which will gradually be fed into the sites build.

Wireframes
This is our structural layout of the sites content, a basic frame to which we inject our branding guideline and content. We pay close consideration to the content creation stages and how it will be laid out best within the site to maximise engagement.

Creative Design
We will then take all the information and design created and begin feeding it into the wire-frames of the site to mock-up how the website looks and behaves. This includes a full round of reviews before signing off and moving into the build of the site. (Please see our Project Terms)

Template Creation
Once the design of the website has been signed-off, we then begin to create templates for each individual page of the site. We begin with the homepage, bringing the page to life with interactive elements.Brand Guidelines

Develop

UI
User Interface design considers the look, feel, and interactivity of the product. It’s all about making sure that the user interface of a product is as intuitive as possible, and that means carefully considering each and every visual, interactive element the user might encounter. We will think about icons and buttons, typography and color schemes, spacing, imagery, and responsive design.

CMS Integration / E-Commerce
To give you the ability to control all content on the website, we build bespoke CMS collections tailored to suit your needs, these will include form layouts to enter information on news and actions. Using information from our Technical Review, we will create a seamless interface to minimise maintenance time and maximise efficiency when updating the site internally.

Content Migration
Once our CMS build is complete, we then begin filling in space with actual content.  The stage will provide full scope on website content management as we work with you and your team in uploading the necessary information.

Technical Review
To gain technical guidance on in-house platforms and system set-up. We will include a level of consultation to ensure the platforms in use allow best efficiency in our work. We will also optimise and domain names, DNS settings and email platforms should they be in need.

User Testing
At this stage we launch the site on a temporary (password protected) link. We conduct A/B testing internally to ensure the website is fully functional. We run through the site together as a team and as part of a full review, will note down final tweaks and sharpen the edges.

On-Site SEO
Scroll down or click here for more info..

Deploy

Analytics
Full set-up via Google Analytics and Search Console to track site performance and in-depth user analytics. We will create a data dashboard to easily monitor the websites success.

Training
We will provide a full day training to ensure your teams confidence in using the platform to manage content. We do allow additional time in training should it be required and offer a 24/7 helpline for ad-hoc questions and answers.

Hosting
Our hosting gives you access to the fastest and most scalable hosting technology. With over 100 data centres and servers, when you publish with Disruptive, your files are distributed across the globe in a content distribution network (CDN) powered by Amazon's AWS Web Services.

Maintenance
Our after-care service includes unlimited technical support/bug fixing per month.

Go LIVE
Full website launch and promotion.

Evaluation
We finalise by bench-marking the project, to open discussion into our additional services on content marketing, external SEO and social media.

03

Creative Development

When it comes to branding, we focus on emerging-trends to ensure a long-term site design inline with your Brand Guidelines.

Branding

Each project includes a bespoke Visual Guideline, our way in digitising your Brand Guidelines.

During our Define stage, we will gather the necassary brand assets and develop them into your new website. Our process includes Think Tank sessions in which we decide on Art Direction taking into consideration your industry and emerging trends.

We use Google's file sharing services as a way of collaboration meaning we can link assets to 'live' folders and easily share with you and your team.

Fonts

Taking into consideration existing Brand Guidelines, there will be a keen focus on font pairings to ensure information is presented in an easily eligible manner.

Great typography can have a dramatic impression on the user and it's important that it has a true feeling of authority and full eligibility when read.

Imagery

A picture speaks a thousand words and we're believers in customer trust, this is why we advise all our clients to povide proffessional imagery in high resolution. In theme with the site, we can create bespoke filters to match your vibe.

When lack of imagery becomes an issue, we can provide guidance in sourcing the best stock whilst retaining brand value.

Animation/Interaction

The right choice of animation will strengthen the mood and identity of the brand whilst ensuring the site has a modern appeal, inline with the latest trends.

Interactive elements aides in customer journey, signalling the user where to click, scroll and progress. This practice is especially helpful for mobile sites, where screen space can be limited.

Colour

Whether we're working with an existing pallete or starting from scratch, we combine colour theory with business.

The colours we agree upon will create emotion and influence decision making. The pallete will form part of our Visual Guideline and through reptition of these colours, strenghten the brands awareness.

Copywriting

Clients are expected to provide finalised copy for the relevant sections of their site. We work with you to ensure the message we're putting across is in the correct manner and offer guidance on tonality and structure where necassary.

We also work with a talented team of freelance writers and can provide different avenues to project your voice to the masses.

Platform

Our custom built CMS allows for the easy upload of existing content. Adding new content is as easy as filling out a form. You can even write new content right on the page to see exactly how it will look once published.

Atomic Design

We love the finer details that lay the foundations to the site and pay keen focus to atomic design. From Icons, Buttons, Animation and more, our fully bespoke sites offer a unique blend of Interaction to aide in User Journey and Storytelling

Following our Sitemap, we provide review stages on each page build outlined in our Project Terms below.

04

Search Engine Optimisation

All our web pages and site structure is coded using high quality cross-browser compatible semantic HTML5/CSS markup using appropriate headings/tags (H1, H2, H3, p, etc.) to denote the structure of pages and hierarchy of key content.

Our on-site SEO activity includes the following;

  • Alt tags for all imagery
  • Meta Titles & Descriptions for all Static & Dynamic pages
  • Schema Data and Imagery for all Static & Dynamic pages
  • Friendly (clean) URLs and appropriately named site folder structure
  • 301 Redirects to retain SEO authority when migrating from a previous website/server
  • Set-up & Integration of Google Analytics and Search Console
  • The ability to integrate 3rd party SEO tools for tracking and goal purposes using custom code
  • SSL Encryption
  • Web-crawler block on private pages
  • HTML Mark-up
  • Optimised page load speed
05

Hosting & Maintenance

Hosting

Our hosting gives you access to the fastest and most scalable technology. With over 100 data centres and servers, when you publish with Disruptive, your files are distributed across the globe in a content distribution network (CDN) powered by Fastly and Amazon Cloudfront. Which means fast page loads for all your visitors — no matter where they come from.

Our hosting is packed with features that make running your site easier:

  • SSL Certification
  • SEO management
  • Custom forms
  • Password protection
  • Custom integrations
  • Visual design & publishing platform (The Editor)

Maintenance & Support

Our after-care service includes a full day's training and unlimited technical support/bug fixing per month. We also provide our clients tailored packages to suit their business growth including retainers and phased updates.

Our maintenance includes:

  • Backups and versioning
  • Security patching
  • 3rd-party security review
  • Visual design & publishing platform (The Editor)
IO

Start your Project with us
Let's get Disruptive!

Follow the link below, fill out our Website Onboarding form and a member of our team will be in touch shortly...