Landing Page

[epan]

What a person will see if they first come to the site.

Should have

• Brand
• Brief feature description
• Inputs to get started

[andrewdanks]

Need to keep it very minimal.

Logo, One line caption, Origin field, Destination field, Go button, and perhaps some "teaser" picture to show what the app would look like.

Perhaps auto fill origin field with their current location.

[epan]

Good idea on the origin field with the current location! How do I attach images here? http://cl.ly/image/0N0U1p090U1F

[epan]

@kmiyashiro @dhchow @ericxtang @slinlee what do you guys think of this wireframe? We can slot in 3 images of the final UI illustrating each feature: http://cl.ly/image/0N0U1p090U1F

[slinlee]

Sounds good. What goes under 'Make it easy as pie'?

On Wed, Oct 24, 2012 at 1:28 PM, Eric Pan notifications@github.com wrote:

@kmiyashiro https://github.com/kmiyashiro @dhchowhttps://github.com/dhchow @ericxtang https://github.com/ericxtang @slinleehttps://github.com/slinleewhat do you guys think of this wireframe? We can slot in 3 images of the final UI illustrating each feature: http://cl.ly/image/0N0U1p090U1F

— Reply to this email directly or view it on GitHubhttps://github.com/andrewdanks/reroute/issues/8#issuecomment-9755197.

[dhchow]

Looks good to me!

[epan]

Under there is the idea that you can modify the route itself.

I had other lines of text but they were long. "Make it easygoing" etc. Obviously totally open to suggestions for text and anything.

On Wed, Oct 24, 2012 at 1:43 PM, slinlee notifications@github.com wrote:

Sounds good. What goes under 'Make it easy as pie'?

On Wed, Oct 24, 2012 at 1:28 PM, Eric Pan notifications@github.com wrote:

@kmiyashiro https://github.com/kmiyashiro @dhchow< https://github.com/dhchow> @ericxtang https://github.com/ericxtang @slinlee< https://github.com/slinlee>what do you guys think of this wireframe? We can slot in 3 images of the final UI illustrating each feature: http://cl.ly/image/0N0U1p090U1F

— Reply to this email directly or view it on GitHub< https://github.com/andrewdanks/reroute/issues/8#issuecomment-9755197>.

— Reply to this email directly or view it on GitHubhttps://github.com/andrewdanks/reroute/issues/8#issuecomment-9755713.

Eric

[kmiyashiro]

I like it. I'm not sure if it's just the wireframe limitations, but it seems really busy, I didn't see the start/end bar at first. I think it will look better on a page.

On Wed, Oct 24, 2012 at 2:37 PM, Eric Pan notifications@github.com wrote:

Under there is the idea that you can modify the route itself.

I had other lines of text but they were long. "Make it easygoing" etc. Obviously totally open to suggestions for text and anything.

On Wed, Oct 24, 2012 at 1:43 PM, slinlee notifications@github.com wrote:

Sounds good. What goes under 'Make it easy as pie'?

On Wed, Oct 24, 2012 at 1:28 PM, Eric Pan notifications@github.com wrote:

@kmiyashiro https://github.com/kmiyashiro @dhchow< https://github.com/dhchow> @ericxtang https://github.com/ericxtang @slinlee< https://github.com/slinlee>what do you guys think of this wireframe? We can slot in 3 images of the final UI illustrating each feature: http://cl.ly/image/0N0U1p090U1F

— Reply to this email directly or view it on GitHub< https://github.com/andrewdanks/reroute/issues/8#issuecomment-9755197>.

— Reply to this email directly or view it on GitHub< https://github.com/andrewdanks/reroute/issues/8#issuecomment-9755713>.

Eric

— Reply to this email directly or view it on GitHubhttps://github.com/andrewdanks/reroute/issues/8#issuecomment-9757745.

[andrewdanks]

Good caption!

• Just "Visualize route safety" should be sufficient, since we already convey it's about bikes in the caption, right?
• What about "Adjust it to your skill level" ? or is it too long?
• "Play it in realtime" ?

All together: Visualize route safety. Adjust to your skill level. Play it in real time.

Still needs some work, either way. But the actual wording isn't as important as the design and usablity of the app

Any thoughts on a color scheme?

[andrewdanks]

And if we get the origin location automatically, maybe we should focus the destination field, so it's more like:

Where to?

< origin location here > <--- this is less focused, but emphasized that it can be edited

< destination text field > <-- this part is focused

[ Route me!]

lol, my ascii mockups don't come close to what you have :P

[epan]

Added images to the wireframe!

[epan]

Some alternative concepts @kmiyashiro

[epan]

Hey @kmiyashiro can we use a different effect without the bar on the bottom for the background image, like:

body {
    /* set up a background image */
    background-image: url("../images/cookie-monster.jpg");

    /* the follow is the code to have the image display as a full page */
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover; /* the next 3 lines are "browser prefixes", they are necessary to include for CSS3 techniques */
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Maybe even the top will look ok with white text for the title? And I'm using the name WiggleMap everywhere :P

[kmiyashiro]

TODO: Create cute tiled graphic for bottom when blank.

Wiggle path? Sharrow?

[kmiyashiro]

https://www.dropbox.com/s/wc9yrrzreqopff4/new%20landing.png

[epan]

I think we have a clean page now. Great start! :ok_hand: