Skip to content

MooTools.net redesign

pietrogregorini edited this page Apr 10, 2013 · 29 revisions

See this thread on the Mailing List:

https://groups.google.com/forum/?fromgroups=#!topic/mootools-users/fz2dbZE-iOk

Requirements

  • Useful documentation search
  • Alphabetic table of page contents on each page

Design guidelines

The design should be as simple as possible to avoid pains. Get to the fucking point should be the idea behind the new product(s) websites. This should be nothing too complex, lots of whitespace, and a logo. That's it. A few examples:

What Valerio said:

Let me share with you my personal vision of how this all should look.

The website should be very simple. Refer to the wiki for examples. We're in 2013 and we don't need complex layouts. We need a page with TONS of whitespace. Minimal. We need a css framework so that this all will be responsive / maintainable. I don't want to spend everyone's resources on complex designs. The whiter the better. The simpler the better. Faster to code, faster to design, easier to maintain. Having said that, I'm open to different layouts ideas other than menu-on-left-content-on-right. But, to me, the default templates are more than enough.

As for the logos, as cool as all these sparkling designs are, we don't really need OSX-style icons for every project, and the mootools "font" is not really suited for sub-projects. As I see it, it should be a very simple font, like helvetica neue, and MAYBE one 2d symbol for each package. I really like the ideas on the icons, however. As discussed on #mootools-dev it would be cool to have badges-like circles (like the (P) one) to represent dependencies. Elements (previously internally known as nodes) has that molecules-style thingie that we should use for the symbol. moofx, the mage hat looks like a super awesome candidate or the wand. In any case lots of stars! And prime, I have no idea. the wallee-like robot is incredibly cool. Perhaps a bit difficult to represent in a black and white 2d outline.

We're in the year of flat square 2d outlined designs. Leave the drop shadows, rounded corners and shiny gradients to apple.

CSS Frameworks

Ideas

Fonts

On the lines of Helvetica Neue light

Note: a good open source font, similar to Helvetica (though not quite the same) is CartoGothic.

MooTools Logo

Clone this wiki locally