Needs a properly designed docs/landing/demo page

[cobyism]

At the moment the docs is just a couple of lines of HTML. Instead, this really needs to be a properly designed landing page.

Some goals for the docs page, in no particular order:

• Prompt people to try out the shapeshifter buttons on the docs itself.
• Be a site that responds well when people do try out the different viewports.
• Explain the philosophy behind the project—i.e. why and how it should be used within design workflows.
• Clearly illustrate the keyboard shortcuts (this should probably be part of the actual UI too, so a cheat sheet can be brought up at any point without disrupting the currently viewed page).
• Explain common issues (x-frame-options, reloading just iframe instead of whole page etc.) maybe?
• Show people how to download, install, and begin using shapeshifter in their projects
• Encourage people to contribute to the project themselves.

There’s probably a few other things to consider, but that’d be a great start.

As for a logo, I came up with the idea of using a folded-paper fortune teller thing as a metaphor for what shapeshifter is/does. One of these things:

I started playing around with a top-down view of a fortune teller as the logo for shapeshifter:

It still could do with some tweaking, but it’s good enough for now and I quite like it as a metaphor. If anyone has feedback or other thoughts on what the docs/landing page could be, please leave a note—I’d love to hear what you think 😄