Craft no.
15

Cssfox 5.
Web designers' community

α. Visual identity: Logo. Icons. Stamp. Star. Badges. Certificates. Typeface. Color palette. β. Website design: Wireframe kit. Similarities map. User flows. UI. γ. Website development: PHP. MySQL. JS + JQuery.
Apr 16 - Aug 18
Enjoy

Cssfox is my favorite creation and the most complex project I have ever worked on independently. I started to design the fifth version of the community site in April 2016 and finished it in October 2017 – it took a year and a half! Today is July 27, 2018, and the version is still at the development process.

We started developing this version at the end of 2017. Oleg stated that it is a completely new site, there just one thing that remains untouched: the DB; but even the table titles were corrected following the changes in the site structure. Hopefully, by the end of the summer we will be able to launch the new version of the community portal.

Special thanks to Drew and Oleg for their great and professional work and to my wife Limor for her endless support.

Table of contents:

Visual identity

Cssfox mark readjustment 2018

Cssfox mark readjustment

March 2018

Mark with the final spacing for the icons.

With final spacing for the icons

Comparing the new and the previous versions.

Comparing new and old versions
Comparing new and old versions

Community mark concept

The mark is a combination of the letter "C" – first letter of the Cssfox name and the word tail (tale).

Cssfox community mark concept

July 2018

Three circles of the logo represent three stages of the community awards process – Nominee, Favorite Fox, and Winner.

Three steps of community mark concept

Community mark


Cssfox community of web designers’ identity mark will be mainly used in combination with the logotype and the word community. It will also be used as an icon, especially for small sizes.

Cssfox community mark

January 07, 2017

Mark with word community (custom lettering)

It will be used mainly at the centres of the canvases. The word “Community” will use Cssfox’s custom type created for the version three of the website.

Cssfox mark with word community

Realistic illustration of the mark with word community.

Realistic illustration of the Cssfox mark with word community

Star

Cssfox community star

January 26, 2017

The star created from the tail-tale part of the community mark. There are some ideas behind the number four, that currently cannot be explained, as we are preparing a surprise :)

Tail-tale star construction.

Creation rules for community star

Stamp

Cssfox community stamp

January 11, 2017

Realistic illustration of the Cssfox's stamp.

Realistic illustration of the community stamp

Design process. Selected stamp design options.

Working on community stamp

Selected icons

Icons for the page statistics section – likes, shares, views and comments.

Cssfox community selected icons

January 12, 2017

Web designers community selected icons

January 13, 2017

Logotype

Web designers community logotype

Illustrator. Creation rules.

Creation rules for web designers community logotype

Mark, logotype and site description

Web designers community Mark, Logotype, Site description

Realistic illustration of the mark, logotype and custom lettering (Oleg Tserluk).

Realistic illustration of the web designers community Mark, Logotype and Site description

Slogan. Custom lettering

You Deserve It!

Web designers community slogan with custom lettering

Favorite Fox (FavF) certificate

Web designers community Favorite Fox certificate

Realistic illustration of the FavF certificate.

Realistic illustration of the community FavF certificate

Fox 6 Winner badges set

As strange as it may sound, but the Cssfox jury decided to give the Fox 6 award to the WebTalkTo 9 thus making me the winner on community site I created! This winner badge will be forever featured on the WebTalkTo version 9 website.

Web designers community winner badges

February 02, 2017

Wireframes

Web designers community version 5 wireframes

August 2017