promo
Design

With the prolific use of site templates, many sites are beginning to look the same.

Do you want to stand out from the crowd?

sykotik sites can design a custom template just for you!

Together we can draw up a design brief, fully discussing logos, design elements, dynamic elements, layout preferences and overall goal of the intended site.

With the creative cannon on a full charge, sykotik sites can "fire up" a template to meet your requirements.

 

Here is an example of a recent project.

Brief:

Create a site for English Karate Associations

Obvious focus:

  • England
  • Karate

This design brief was very loose, so it gave a lot of scope.

Basics:

Colours:

Simple colours were the order of the day.

Red, White and Blue.

The colour choice was pretty obvious, it fulfilled criteria for both focus points

England : Red, White and Blue - Colours of the Union Jack.
Karate: Red and Blue are used in competitions to denote each competitor.
    i.e. 
      Red - Aka
      Blue - Ao.
      White - Karate Gis are predominately White

Design:

EKA-Design-SketchSo out comes the pencil and pad and a sketch of the template was drafted.
This makes it easier to visualise the design quickly and accurately. 

All the key elements are placed and extra notes are made for additional information,

e.g. dynamic layered textures on the Header and "Latest News" box.

 

 

 

Layout:

EKA-Modules-SketchAs I was using Joomla as the content management system, next was the layout of the content modules.

Joomla uses these elements to place the content on the page and the template is wrapped around them.

This completely seperates the content from the design, fantastic!!

Again, a simple pencil sketch gets the results in a very short time.

 

 

The Template:

EKA-Design-Mock-UpNow the real work begins.

Using Adobe Fireworks, the design is built up in layers to give an accurate example of the final output.

At this point, the design is essentially just an "image" of the site. A preview can be sent to the customer for review.

Any changes rquired by the customer can be made.

 

 

 

 

 

Results:

EKA-CodeNow the Template is dissected into slices and code is written to piece them back together as the Joomla template.

Dynamic elements are coded in.
e.g. in this design, the texture on each of the Header and the Latest News boxes are randomly selected from five possible textures.

This is a subtle touch ,and may even go un-noticed by the end user, but it does add a little flair to the simple design.

CSS styles are also implemented for various parts of the design,

e.g.

The module boxes have been created with 4 main colours.

 

Header Textures:

Header-Texture

 

 

 

 

Latest News Textures:

Latest-Texture

 

 

 

 

 

Dynamic elements can be triggered by all manner of criteria, e.g. time, date, random, geo data, etc.

The final results are uploaded to a server for customer review and when satisfied , the site can be made live.

Below is the process from start to finish showing the initial "rough" sketch, through to final site.

EKA-Design-InitialEKA-Design-Mock-UpEKA-Design-Final

 

You can visit this site @ http://www.englishkarateassociations.co.uk

 

Clinton : sykotik sites