Ideas Pietro

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.

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

Brand & Logotypes

MooTools Brand

Icons & Logotypes

---

Website

Web Design

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.

Project Homepage (Prime)

The project homepage (in this demo, the "prime" homepage) will be a simple overview of the project, with direct links to documentation and tutorials, a download button and relative GitHub repository to bug reports and contributions.

• Real mockup here: http://www.pietrogregorini.com/mootools/prime.html

Dependencies Badges

Project badges could be used, as requested, to describe library dependencies.

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

Various icons in the site could be made using a dingbats font. In this way there is a less bandwidth usage and the icons will result crispy even when zoomed in high resolution screens.

• http://www.entypo.com/

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/documentation
    • Core Download /framework/core/download
  • More /frameworks/more
    • More Docs /framework/more/documentation
    • More Download /framework/more/download
• Prime Homepage /prime
  • Prime Docs /prime/documentation
  • Prime Tutorials /prime/tutorials
  • Prime Download /prime/download
• Etc.

You can find an updated outline here:

• http://www.pietrogregorini.com/mootools/site-structure.png

---

Old Stuff

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

Colour Palette

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

Logotypes

• MooTools Bi-Colour Brand: http://www.pietrogregorini.com/mootools/brand.png
• Logotypes Alpha 1: http://www.pietrogregorini.com/mootools/logotypes_icons_badges.png
• Logotypes Alpha 2: http://www.pietrogregorini.com/mootools/projects.png
• Iconography: http://www.pietrogregorini.com/mootools/iconography-sample.png
• Logotype with Cyclone font: http://www.pietrogregorini.com/mootools/logotype-new-demo.png
• Test of fonts for logotypes: http://www.pietrogregorini.com/mootools/fonts.png
• Logotypes made with MooTools font: http://www.pietrogregorini.com/mootools/logotype-rough-v2.png
• Logotypes made with MooTools font: http://www.pietrogregorini.com/mootools/prime-demo.png
• Icon container A: http://www.pietrogregorini.com/mootools/prime-alone.png
• Icon container B: http://www.pietrogregorini.com/mootools/prime-demo.png
• Icon container C: http://www.pietrogregorini.com/mootools/prime-square.png
• Icon container D: http://www.pietrogregorini.com/mootools/prime-two.png

Web Design

• MooTools Homepage: http://www.pietrogregorini.com/mootools/homepage_alt_lighter.png
• MooTools Homepage Old Palette: http://www.pietrogregorini.com/mootools/homepage_oldpalette.png
• MooTools Homepage with full-colour badges: http://www.pietrogregorini.com/mootools/homepage.png
• Prime Homepage: http://www.pietrogregorini.com/mootools/prime_homepage.png
• Prime Homepage Old Palette: http://www.pietrogregorini.com/mootools/prime_homepage_oldpalette.png
• Docs Style A: http://www.pietrogregorini.com/mootools/docs_cleanup.png
• Docs Style B: http://www.pietrogregorini.com/mootools/docs_alternative.png
• Docs Style C: http://www.pietrogregorini.com/mootools/docs_v3.png
• Website style study: http://www.pietrogregorini.com/mootools/docs.png
• Mobile style study: http://www.pietrogregorini.com/mootools/web-320.png