Mark Steiner

Bay of Plenty Multiple Sclerosis Society

< | >

Bay of Plenty Multiple Sclerosis Society - Website

Project Details

Client: Bay of Plenty Multiple Sclerosis Society

Date: July, 2012

Role: Art Direction, Design & Development

Launch Project >


Custom Theme built for Wordpress.

Building on the knowledge gained in their first Web Design course, the second year Diploma in Design [ Graphics ] Web Design students were challenged to redesign and develop a CMS driven website for a charitible or not-for-profit organisation of their choice.

This site, built transparently during class, served as a vehicle to demonstrate general process and best practice.
A traditional workflow was showcased in its entirety, from thumbnail sketches and wireframes to pixel–perfect Photoshop visuals, from static html and css pages to a complete WordPress theme.

Conceptual Development

Multiple Sclerosis, New Site Map


Reconfigured Site map [ detail ].

The exsiting site was deconstructed and information regarding target audience, purpose and site specific functionality was captured. A site map was developed to ascertain the scope of the site and facilitate cleaner navigation between sections.

Conceptual Thumbnail Sketches


Selected thumbnail sketches.

Initial layouts and concepts were sketched out and iterated through based on the imporance of available content before being formalised as wireframe diagrams.

Design Development

Photoshop Mockup


Photoshop mockup with and without grid.

The refined outcome was then constructed as a high fidelity mockup in Adobe Photoshop, where colour, texture and type considerations were explored. During this process the grid system and various measurements are finalised.

Logo Refinement

Ms Logo Development


Original [ left ] and redesigned logo [ right ].

The original logo was at odds with the new design, the round shoulders of the 'm' and non aligned terminals of the 's' suited a softer, less structured site. The redesigned logo takes its cues from strong, rectangular shapes, with both letterforms emerging from square blocks. The separations within each letterform are symbolic of the scarred myelin sheath that interrupts the electrical impluses travelling along the spines nerve fibre.

More Projects