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.

We draw on the Design Thinking, Lean and Agile methodology which starts with a deep understanding of your needs and develops a digital product engaging clients up front in the development cycles and accelerating product improvements throughout the process. Our unique methodology incorporates Human-Centred Design into our tried-and-tested 4D Process.

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

Define

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

Design

  • UX
  • Wireframes
  • Art Direction
  • Concept Design
  • UI
  • Brand Guidelines
Develop

Develop

  • Front-end Build
  • CMS
  • Animation & Interaction
  • Technical Setup
  • User Testing
  • Onsite SEO
Deploy

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.

Workshops
Using insight from our Define stages, we will conduct workshops to brainstorm art direction, content ideas, IA refinement & more.

Design

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 (IA), our model of the website's content and userflow. We will create a hierarchical list of pages with mapped sections and links designed to help both users & search engines navigate the site.

This stage also focuses on content mapping. Using our predetermined folder system, we will begin building out the content which will gradually be fed into the sites development.

Wireframes
This is our structural layout of the sites content, a lo-fidelity frame providing an overview of the content hierarchy and placement. This stage provides a bridge between content collation & creative design and how best to maximise user engagement.

Art Direction
To build up an early vision of how your site may look & feel, we create bespoke moodboards that help resonate with both ourselves & the end-user alongside examples of best-in-class UI.

Concept Design
Following our homepage wireframes, we begin to explore the elements of your new brand. We will think about icons and buttons, typography and color schemes, spacing, imagery, and responsive design.

This includes several rounds of review before moving into full UI. (Please see our Project Terms)

UI
Following sign-off on  direction, we move through each individual page of the sites design. User Interface design considers the look, feel and interactivity of the product. It’s all about making sure that the userflow is as intuitive as possible,  we carefully consider each interactive element the user might encounter.

Brand Guidelines/Styleguide
Following completion of our UI stage, we will formulise a coherent brand guideline for your site. Our bespoke visual guidelines are built into your site and act as a great tool for efficient design practice both internally & externally.

Develop

Front-end Build
We deliver our pixel-perfect front-end whilst optimising it’s scalability to respond beautifully across all devices. During this process, we create a simple code system (CSS) alongside components that provide seamless content management control.

CMS / E-Commerce
To give you the ability to control all content on the website, we build bespoke CMS collections tailored to suit your needs. Using information from our Technical Review, we will create a seamless interface. This process includes several workshops in which we define key areas suitable for CMS while providing a holistic view and approach of the whole site.

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.

Animation & Interaction
As a key part of our front-end build process, we continue to explore how best to engage the user through animation & interaction. We include additional opportunities to review & refine how elements on the page behave.

Technical Setup
Focused around functionality & communications, our technical setup includes the integration of 3rd party plugins such as dynamic maps, social media feeds, forums or multilingual setup.

User Testing
At this stage we launch the site on a temporary (password protected) link. We conduct 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, complete 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 create data dashboards 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 support.

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 campaign.

Evaluation
We finalise by bench-marking the project and open discussion into website growth both by size and traffic. We also offer additional ways to amplify your brand through Digital Marketing, PPC & SEO.

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
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
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
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
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
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
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
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.

Design
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...