Mock

Okey Main Page SVG Mock Created with Sketch (http://www.bohemiancoding.com/sketch)

Designer Guidelines

Minimalistic Purity

Everything should be clean and minimalistic, near to schematic. If the scene/picture elements is not a part of a game tham why we should keep it? Try not to introduce details if they aren't needed.

Inheritance of the Design

You should keep original logo and player images untill you have simpler and better ones. Better to fit existing style and try to make it simplier.

Consistent

Try to hold in your mind overal kakaranet experience while you designing page. The page elements composition should be balanced, responsive, scalable. Try to avoid page wholes and questionable elements.

Coloright

Color palette should be consistent. You can use http://colorscheme.ru as inspirational and checking resource. Color accents should be given to game and site elements.

Process Pipeline

Vector SVG Game

The page should be initially designed in the vector editor: Xara, Corel, Adobe Illustrator, Sketch, Inkscape etc. We are not interested in raster images because we are developing plain 2D cartoon-like gaming experience. Try to keep original file clean with naming all elements. Repeating elements should be grouped. No copy paste is allowed.

Modern Technologies

We use only modern technologies. No jQuery for faster initial load. SVG vector graphics for tracking movable objects and animations. WebSocket channel transport. Binary Messaging.

Proper Object Naming

Doing so will allow us to keep contignuous integration between designer, developer and project coordinator. Developer should know the object names on early stages to make elements live and responsive. We are creating SVG based game and each SVG object (and its detalization) should be approved and really needed.

Animations

Possible JavaScript animation, like table scrolling or bar placehorder resize should be prototyped on early stages. Elements amination forms an unique experience that can be analyzed only in motion. Until motion no resolution could be given.

Schedule

1. SVG pictures 2. JavaScript animations (card moves, elements motions) 3. JavaScript Game Protocol (our help) 4. Finalization