Ideas Pietro

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

---

Brand Identity

Yesterday, after a long discussion about the evolution of MooTools on IRC, I got a more precise briefing about what will become the whole project in the future. For this reasons, I have to revise my previous proposal.

Logotypes

Final Sketches

With this approach I consider the original MooTools logo as a sort of "company" while the various projects as "products", using the original logo for the MooTools trademark and a different font for each product. So MooTools will separate from the original association with its famous framework of the past and acquire a completely new connotation.

Old Drafts

Demo with another font:

• http://www.pietrogregorini.com/mootools/logotype-new-demo.png

Tests with several fonts:

• http://www.pietrogregorini.com/mootools/fonts.png

Logotypes made with MooTools font:

• http://www.pietrogregorini.com/mootools/logotype-rough-v2.png
• http://www.pietrogregorini.com/mootools/prime-demo.png

Project Icons

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.

• http://www.pietrogregorini.com/mootools/iconography-sample.png

Containers

There are several ways to link the logotype to its own icon. Here are a list of various approach I tried:

• Icon without any container: http://www.pietrogregorini.com/mootools/prime-alone.png
• Icon inside a circle: http://www.pietrogregorini.com/mootools/prime-demo.png
• Icon inside a square: http://www.pietrogregorini.com/mootools/prime-square.png
• Icon inside a circle with MooTools screwdriver: http://www.pietrogregorini.com/mootools/prime-two.png

Colours

Colours No. 1

For consistency with the old identity, the violet/gray colour could be maintained and used for all the new projects.

• http://www.pietrogregorini.com/mootools/colour1.png

Colours No. 2

Since each new package could be considered as a standalone tool, it is possible to characterize each of them with an unique colour, while using just shades of gray for the MooTools general brand. This proposal get rid of the current violet/gray colour for the name project, that could be used instead - for continuity - to represent the Framework.

• http://www.pietrogregorini.com/mootools/colour2.png

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.

• http://www.google.com/webfonts/specimen/Source+Sans+Pro
• http://www.google.com/webfonts/specimen/Source+Code+Pro

---

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.

• http://www.pietrogregorini.com/mootools/homepage.png
• http://www.pietrogregorini.com/mootools/homepage_alt_lighter.png (Alternative)

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.

• http://www.pietrogregorini.com/mootools/docs_alternative.png

Style No. 3

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

• http://www.pietrogregorini.com/mootools/docs_v3.png

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:

• http://www.pietrogregorini.com/mootools/docs_cleanup.png

• Website style study: http://www.pietrogregorini.com/mootools/docs.png

• Mobile style study: http://www.pietrogregorini.com/mootools/web-320.png