Give the home page some design love

GarthDB commented 9 years ago

Hey @locks could you post some screen shots of websites you like and we can start some moodboarding on github issues.

GarthDB commented 9 years ago

Just collecting existing work. mustache-home-r00

una commented 9 years ago

maybe we should break this up into smaller issues -- i.e. documentation, typography, layout, colors, styleguide, etc.

I do like the type provided in the last screenshot

GarthDB commented 9 years ago

I just thought we could start with some moodboarding first, loose vague stuff to start with, then start new more specific issues and goals from there.

GarthDB commented 9 years ago

that was for you @una

una commented 9 years ago

True, true -- thats a good start for sure

locks commented 9 years ago

Here's an e-mail I sent in a previous attempt:

Hello,

As mentioned on Twitter we're looking to give http://mustache.github.io a brand new coat of paint. There are some ideas but nothing too concrete, so everything is up to discussion.

First of all, here are the current websites for some related projects:
- http://handlebarsjs.com/
- http://twitter.github.io/hogan.js/
- http://icanhazjs.com/
- http://pvande.net/Milk/playground.html

We're looking to keep it simple, but a bit more appealing than the current state :P Some of the ideas being spitballed:
- Interactive tutorials inspired by http://coffeescript.org/
- Making the whole front page editable (an "Edit Page" toggle or some such) https://rawgithub.com/bobthecow/dc72ad126d58a09644bc/raw/a4d154bacd898a2d4655d28fff01c9e20a894f0a/gistfile1.html#demo
- New logo
- "Spec Complaint" sticker/logo
- Keep the list of implementations, but expand it to include multiple per language. Maybe multi-column, with some relevant stats? (travis/code climate)
- Statusboard with implementation spec compliance status

GarthDB commented 9 years ago

This is an amazing place to look for open design inspiration http://beautifulopen.com/

locks commented 9 years ago

@GarthDB the goal is to get featured there when we're through ;)

locks commented 9 years ago

To complement the e-mail above, here's what I'd ideally like to see:

Homepage
Status board
Documentation
Implementation-specific page. These would be, for example, themed with the implementation language associated colors (Ruby -> red, JavaScript -> yellow(?)).
Logo — I'm waiting to hear back from an artist.

How the first three points are structured is up for debate.

una commented 9 years ago

Current status as a reference:

screen shot 2015-02-03 at 11 26 08 am

bobthecow commented 9 years ago

@una Looks great. :shipit:

raghunayyar commented 9 years ago

I can help with developing a CSS style guide btw, have done this before. I know that comes later, just keeping myself in the loop.

joeybright commented 8 years ago

Hi all, I'm a designer that's interested in contributing to this project. Before I do, has there been any work on this that hasn't already been posted to this thread? I wouldn't want to re-do any work that's already been completed.

una commented 8 years ago

Yay! Go for it!

Sent from my iPhone

On Jul 18, 2015, at 8:58 PM, Joey Bright notifications@github.com wrote:

Hi all, I'm a designer that's interested in contributing to this project. Before I do, has there been any work on this that hasn't already been posted to this thread? I wouldn't want to re-do any work that's already been completed.

— Reply to this email directly or view it on GitHub.

joeybright commented 8 years ago

mustache_landing_page_v0

I jumped right into the design process to riff off of what has already been completed. I decided to post this here (unfinished) to get some initial feedback. If this doesn't work for whatever reason, I can go back to the drawing board and start with some moodboards as @GarthDB suggested. So, if anyone has feedback please post it!

una commented 8 years ago

Awesome start!

Things I LOVE:

the {{}} that open/close the site (so cute, so clever)
the dark theme code input box
content heirarchy (title, brief, links to github, example, supported languages)
I really like the clean feel and typography choices

Additional ideas:

color-coded a bit better for mustaches syntax in the code box
link to Github again at the bottom of the page
allow for the example in multiple languages (a toggle that lets that section show a ruby example, for instance)

bobthecow commented 8 years ago

Agreed on all above. The problem with toggling between examples is that this is live code: changing it changes the output. As it is, the example is raw JSON data, not even javascript. It's non-trivial to get ruby (or fake ruby) running in a text box in the browser, especially since this is going to be hosted on github pages, not on a specialized server that can have sandboxes for executing code :)

joeybright commented 8 years ago

mustache_landing_page_v01 Progress!

Added syntax highlighting (let me know if you like the colors/if the syntax highlighting looks correct). Have yet to try toggling between languages here, that's next.
Added all of the supported languages/implementations. I know that is was mentioned here that it'd be nice to being able to list multiple implementations for each language. However, I don't think that's really feasible, at least for the landing page. My gut feeling is to have each supported language link to a section of the docs that lists all of the implementations in that languages. I think that would keep the landing page lean(er) but allow multiple implementations to be listed.

Feedback is welcome and appreciated!

una commented 8 years ago

I don't know how I feel about the grey bar with some of that navigation -- im assuming its sticky?

But I love everything else!

dasilvacontin commented 8 years ago

@bobthecow Why Ruby? Couldn't we use JS for compiling/rendering the templates on the client?

bobthecow commented 8 years ago

That was in response to:

allow for the example in multiple languages (a toggle that lets that section show a ruby example, for instance)

dasilvacontin commented 8 years ago

Oh, sorry :smile:. There's not much point on doing that, I think... What for? Showing that some implementations have features not included in the spec? In the spec's website?

joeybright commented 8 years ago

@una It would be sticky. Do you not like the style of it or do you just not like that it's there?

Here's a version w/o it: mustache_landing_page_v01

andresgalante commented 8 years ago

Is this issue still open? If you guys need help to continue with @joeybright work or just to implement it into a html/Css template let me know.

raghunayyar commented 8 years ago

Btw, given the current situation of the website and how famous mustache is as a framework, I really think that this issue needs to move much faster.

bitzl commented 8 years ago

That's true, @raghunayyar. I'd be also available for help (development, testing,...).

una commented 8 years ago

I'm a bit over capacity for doing a bulk of work, but I can help with anything you need (design crit, implementation details, etc.) Lets just start making this thing :)

andresgalante commented 8 years ago

@raghunayyar @bitzl @una I'll have some bandwidth next week. If it's ok with you guys I'll send a PR with the implementation.

locks commented 8 years ago

Hello everyone, thanks for the activity in here! I thought I had commented a while back, but seems I forgot to actually post. I thought I was going to have a bit of time to start implementing but I didn't get anywhere. I'm willing to start iterating on this, so we can hopefully address the documentation/implementation-specific page next :)

GarthDB commented 8 years ago

I’m doing a workshop at the end of Oct at FOWD on design in the open; We could work on this project during that time if it isn’t already finished.

— Sent from Mailbox

On Fri, Sep 25, 2015 at 6:05 AM, Ricardo Mendes notifications@github.com wrote:

Hello everyone, thanks for the activity in here! I thought I had commented a while back, but seems I forgot to actually post. I thought I was going to have a bit of time to start implementing but I didn't get anywhere.

I'm willing to start iterating on this, so we can hopefully address the documentation/implementation-specific page next :)

Reply to this email directly or view it on GitHub: https://github.com/mustache/mustache.github.com/issues/57#issuecomment-143197899

joeybright commented 8 years ago

I'm available to make any additions/edits to the landing page if we want to do another few rounds of iteration before implementation. I can also clean up and post the .sketch file for the design when someone starts implementation so they can get their hands on the assets.

raghunayyar commented 8 years ago

@joeybright you can upload the sketch file imho. Let's start implementing it. I am very sure implementation will also have a discussion cycle regarding the libraries, grid system, preprocessers to use and stuff. So, it's better that we just start it right away. I can help out with the implement this weekend itself.

joeybright commented 8 years ago

https://www.dropbox.com/s/ffg7yy469r1kiys/mustache.sketch?dl=0 - Dropbox link to the .sketch file for anyone who wants to edit it or begin development.

raghunayyar commented 8 years ago

@joeybright awesome, how do I proceed now? Can you add me to the org and I can create a branch or I fork it out, that would be inconvenient though.

joeybright commented 8 years ago

I don't have access to the org., so I'd be the wrong person to ask about that. I would imagine if you want to get building sooner than later, forking the repo would make the most sense.

raghunayyar commented 8 years ago

@joeybright I am afraid but you will have to upload the zip file with the assets somewhere. My Sketch license is expired. I have clone the repo, will be pushing out changes real soon.

locks commented 8 years ago

I have created a redesign branch that you can send PRs against so we can get this party started :) That way I can merge in several PRs, and then merge that into master so the site always works.

raghunayyar commented 8 years ago

@locks I have made an initial commit on my fork''s master, just fyi. Link : https://github.com/raghunayyar/mustache.github.com @joeybright I am waiting for the assets. A PSD will also be good.

razetime commented 8 years ago

I'm from Open Source Design. Seems like the website layout is already prepared. Why not implement it?

dasilvacontin commented 8 years ago

@razetime I guess we are waiting on @raghunayyar, since he already started working on it. He doesn't have Sketch though.

joeybright commented 8 years ago

I don't have Photoshop and haven't had time to put together proper specs for @raghunayyar. It's still going to be some time until I'm able to get to that. So, if @raghunayyar is going to be developing the site, he's waiting on me.

If someone wants to either take over development or transfer my .sketch file to a .psd for @raghunayyar, that would speed things up.

razetime commented 8 years ago

@joeybright If you don't have Photoshop, use photoshop CS2, which is free of cost, but old. https://www.adobe.com/support/downloads/detail.jsp?ftpID=3446 Or use the open-source GIMP http://www.gimp.org/, which is similar to Photoshop.

raghunayyar commented 8 years ago

@joeybright good news. I got sketch now. I have made a PR but its a WIP. @joeybright can you tell me which highlightJS skin are you using there? Or is it custom?

joeybright commented 8 years ago

@raghunayyar Nice! No highlightJS skin used. Just picked colors I liked haha.

raghunayyar commented 8 years ago

Btw: here is my pull request again : https://github.com/mustache/mustache.github.com/pull/72. Its ready for review apart from the Try it Out Section. I think I will need someone with better JS skills to get the syntax highlighting in the textareas.

viankakrisna commented 8 years ago

hi, i really like the new design for the github page. But can we keep the supported languages at the top? One thing that I really love about mustache is how portable it is. And I think it is a good idea to keep the list of supported language at the top. :)

chiraggmodi commented 8 years ago

is this still ongoing? any help needed?

una commented 8 years ago

Help is appreciated if you wanna submit some sketches or designs @chiraggmodi :) it looks like this hasn't been worked on it a while

chiraggmodi commented 8 years ago

okey will work on some design.

pablonoel commented 8 years ago

@chiraggmodi if you need any help, I would love to give you a hand

mustache / mustache.github.com

Give the home page some design love #57

I'm willing to start iterating on this, so we can hopefully address the documentation/implementation-specific page next :)