There's methodology to our madness…

Ever wondered how we build functional, accessible websites that work?

1. Consulting

Site strategy is the forging of principles behind why the website is being developed, who will be using the site, what outcomes the user expects from the site, what outcomes and goals the client / business expects from the site and how best technology can be utilised to provide a successful outcome.
 

2A. Matrix/Site tree

Site tree is the website's organisational chart (masterplan) and provisions for all pages - current and future. As Blocks facilitates client-side management of the site structure, it's important to agree on the parameters up front (with clients) so the design team are clear on how best to handle navigation design. Site tree also identifies pages that are not content-managed, such as Flash® timeline or game etc. During development of the site tree, the team can identify the number of page kinds (template kinds) that will be required to complete the site. Often these are:

  • Home page
  • Text page
  • Text plus image(s)
  • List page
  • Forms page
  • Image Gallery
  • HTML email(s)
  • etc.

And often there may be some variations to templates to suit specific needs.

View an example of a site tree

 

2B. User paths/Scenarios

Scenarios are mapped through the site tree to test paths of interaction, and ensure these paths of navigation are planned for. Scenario kinds can be anywhere from 1 or 2 through to many depending on the complexity of the site/business.


3. Wireframes

Wireframing is the organisational planning of information on a page-by-page basis. Working with clients to plan and approve page content (before design begins) provides understanding of hierarchy and a clearer path for design. Wireframe examples are included in the scenario PDFs.


4. Design Development

Strategy, site tree, scenarios and wireframes allow the design team to approach the site with a complete brief. The best outcomes in site design occur when the design and build teams meet early in the timeline and discuss to ensure the vision and the reality of build are aligned. Repeating this through the design phase is always encouraged.


5. Content plan

The task of preparing site content is a large one, and it's best to get clients moving early. By working with clients to provide understanding of what content is required on a page minimises stress and the process becomes more efficient. Where viable, it's often beneficial to identify key pages within the site and prepare this content early so the design team can visualise the site with "real" content - allowing clients better ability to understand what they are getting, and allowing the designers to have clearer understanding of the challenges and opportunities at hand. Simple indication of word count, images, writing for SEO (search Engine Optimisation) are all important factors.


6. Design Refinement

Apply client changes for sign off


7. Create the Blocks instance [if required]


8. Markup [HTML/CSS]

With the design approved, the designer will hand over the PSD files for the front end programmer to create the HTML/CSS [and Javascript if required]. The timing on this will vary greatly pending the design of the site, however a competent programmer will produce one high quality template in between 4 and 8 hours including cross browser testing.


9. Implement site in Blocks 

Assuming the competent HTML programmer has become familiar with the Blocks API, each template will take around 1-3 hours to add Blocks code and functions such as Repeating Regions.


10. Blocks training [if required]


11. Template tweaks

Any changes in the site template can be tweaked before final step of the site going live. 


12. Site testing/Browser testing

Your website is tested to check for any last minute issues with format, layout and functionality. The site is also viewed in multiple Internet browsers to check for any compatibility issues. 


13. Go Live

 Your website is finished, active and available to be publicly viewed!