Skip to content

Ideas Pietro

Jump to bottom
pietrogregorini edited this page Mar 23, 2013 · 57 revisions

Here are my ideas for the redesign of MooTools identity and website. If you wish to contact me for some feedbacks, please contact [email protected]

Brand Identity

The Concept

In the past the MooTools brand and colour palette was used to identify the Core/More JavaScript framework. Since in the future the framework will be a minor feature, there is the need to separate from the old identity and create a completely new one, acquire a completely new connotation.

So in this new concept the original MooTools brand acquire a completely new connotation and will become a sort of "company" brand, while the various projects developed by the team, framework included, as main "products".

Colour Palette

Since each new project could be considered as a standalone tool, I suggest to characterize each of them with an unique colour, while using just shades of gray for the MooTools general brand.

Colour Palette

Brand & Logotypes

MooTools Brand

MooTools Brand

Icons & Logotypes

Each new project will have its own icon and logotype. The icon badge will be used even to represent dependencies between the libraries. The logotype is pretty minimal: it is constructed from the font I suggest to use in the whole site – Source Sans Pro – in its ExtraLight weight, slightly modified – the letters are horizontally stretched by 110% – using a precise kerning between the letters.

Icons & Logotypes

Iconography

Here is a list of possible objects that could be used to represent the concept/functionality behind each project. These icons are not the final result – just copy & paste from various dingbats fonts – but used to give a suggestion of symbols for the projects.

Website

Web Design

Instead of begin to design the homepage (which will be definitely the easy thing, and could even not follow completely the style of inner pages) I prefer to start from the core of the website: the documentation. Here are two new examples I did following the guidelines given by the team. I hope to hear new feedbacks about these, to finish them off.

MooTools Homepage

The MooTools homepage should be just a simple list of all projects handled by the team. In my mind I imagine a smoothscroll vertical navigation between the various projects. Clicking one of the box (everything should be clickable, from the project name, to the description, until the "discover more" call-to-action) the user will be directed to the project homepage.

Style No. 2

This draft is made instead using the current official violet/gray MooTools colour. Anyway the same style could be applied even with "one different colour for each project" approach.

Style No. 3

Even this draft is made using the current official violet/gray MooTools colour. It uses a different approach from navigation (vertical).

Fonts

The website should use a @font-face webfont, backward compatible with common system-based fonts in various operating systems. I suggest to use Source Sans Pro for headings and contents, while Source Code Pro font for code samples. Both are well-crafted webfonts made by Adobe and released as Open Source, available even through Google Web Fonts service. They features several weights which could be used for enhance the visual appeal of the website.

Outline

Since each project could be considered as standalone product, it should have its own homepage, documentation and tutorials. The current MooTools framework (Core + More) will become a product on its own, at the same level of Prime, Agent, Slick etc. So my suggestion for a possible website structure will be the follow:

MooTools Homepage /

  • Framework /framework
    • Core /framework/core
      • Core Docs /framework/core/docs
    • More /frameworks/more
      • More Docs /framework/more/docs
  • Prime Homepage /prime
    • Prime Docs /prime/docs
    • Prime Tutorials /prime/tutorials
  • Etc.

Old Stuff

Here is a collection of old images I published in this page, just for reference:

Colour Palette

Logotypes

Web Design

Clone this wiki locally