Norwich Shotokan Karate Club

The brief was to create a new identity and website for NSKC. The club has been teaching Shotokan Karate for over 25 years. The client sought an interesting, contemporary, attractive and informative website to encourage students to come and train. The intention was to give the organisation a unique online presence and promote traditional pragmatic karate.

 

Audience

New students, who would like to take on the challenge of learning an authentically taught martial art. The website should also appeal to people with previous training experience and engage all audiences in the historical and philosophical side of karate, alongside self- defence, fitness and self-development.

 

Response

 

Working closely with the NSKC instructors, a new logo marque was created based around the Japanese kanji symbols for ‘Jutsu’ & ‘Do’. ‘Jutsu’ is the physical, practical and tactical element of training and ‘Do’ is the life-enhancing element. This distinguishes the core philosophical beliefs of the club. A distinctive black, white and red colour combination was used to create a striking look and feel.

Modernist flat graphics reflect the pure, clean nature of the martial art. The design incorporates Karateka figure silhouettes to add visual highlights. Stylised photos with a raw edge add atmosphere to website. The written content is clear and accessible to all audiences. The website is easy to use and works seamlessly across all media devices.

 

Result

 

The new NSKC website is a success. It has been well received and has proven popular with new traffic and contact enquiries. The instructors’ involvement in the creative process of the new website has encouraged them to explore other possibilities in online promotion (e.g. Facebook, Youtube). The number of new students joining the club has steadily increased.

 
degreeshowpublication

Website Prototyping

 

The medium of pen and paper allowed for exploration of ideas prior to digital editing. This enabled an overview for how the whole website would fit together and behave. Various elements were worked on individually before being combined. Prototyping is a good way to share and bounce ideas around with the client and explore the narrative and flow of the website.

 

Wireframes

 

This step considers dynamic elements, visitor interactions, content real-estate and spacing. Important features such as placement of H1 tags, strap-lines and visual hooks were examined with the aim of keeping the audience engaged. 

Everything within the wireframe designs becomes more detailed, influencing how elements sit in the browser and how they interact with fold marks and screen resolutions. The functionality CTAs and user journeys were then refined.

 

The Look & Feel

 

Functionality and user experience of a website is a fundamental necessity. Similarly, brand identity on- and offline is equally important, especial if the subject matter focuses on a community or niche market. The design language must be consistent and raise interest throughout.

Decorations, frills and UI elements were kept to a minimum to avoid distraction and kept the focus on the content. Image placements were designed for maximum impact. All animations and transitions use a subtle fade effect in order to harmonise the movement and zen of the website. Finally a sticky-header was implemented to increase easy use of navigation across all devices.

 
  • Key Skills:
  • Art Direction
  • Identity
  • Illustration
  • Logo Mark
  • Photography
  • Print
  • Production
  • UX, UI & IA