create redesigned front page focusing on NGLY1

[Former user]

also needs a section with "archived campaigns"

First assigning to Ginger for design...

[g tsueng]

Tried to incorporate elements from the NGLY1 redesigned site while maintaining Mark2Cure's thematic distinction to build on the idea of Mark2Cure as a partner for the disease community being targeted in the campaign. Top area is a carousel of two images, hence the two versions. If we end up with more than one video, we may consider using a carousel for the vids as well.

Bitbucket has been acting weird today, so the images aren't uploading properly. You can find them here: https://docs.google.com/file/d/0B4I4dLIBkIcjMF8teG1lQ0NIT3M/edit https://docs.google.com/file/d/0B4I4dLIBkIcjTk5UOGxuVi1KWGs/edit

Feel free to suggest improvements

[g tsueng]

Throw back at me with any improvements/suggestions

[Andrew Su]

@gtsueng looks great! I'm not even sure we need the second page on the carousel (and the technical complexity that it brings). So unless you're passionate about it, I'd say we can move forward with just the v1 above. The only thing I'd add is a link for "read more" (or something like that). Presumably we'll have a blog post that goes out when we launch that will describe more about what we are trying to accomplish, who Bertrand is, etc etc...

[g tsueng]

Not passionate about the carousel, not if it takes more time. Good idea... on the 'about this campaign'. Could easily be a blog post or an NGLY1-specific Mark2Cure 'About' page.

Planned to put 'about this campaign' closer to 'previous campaigns' since they naturally group well, but felt that 'previous campaigns' is of the least importance, while 'about this campaign' is of much greater importance. Going by how people read (left to right, top to bottom), I placed them accordingly.

[g tsueng]

I actually started by putting the about link in the Bertrand paragraph, but it was hard to make it look like a link without writing 'click here to learn more about' which then became too wordy for that space. I tried having it right above the video, but I think as an image, the video pulls your attention, causing you to gloss over this important section, hence it ended up right beneath the vid.

[Former user]

• The second image and the START NOW button can't be lined up like that, how does it respond dynamically?
• White text should have a single color back. The blue or purple may work but #0cf is not enough contrast for users
• Where are the high resolution versions of these images? Are they licenses for use?
• The light blue for the section headers: "Learn More", "Experiment Progress", "About this Campaign". etc... does not provide enough contrast, I can hardly read it on the retina screen. What is wrong with the current darker red?

General comment, there's way too much going on on the homepage with this proposal. Less is more and I don't know where / what to read while looking at this.

I would strongly suggest we simply stop using Photoshop to mock the landing page as it doesn't work for web. @gtsueng http://bohemiancoding.com/sketch/ is a program that's intended to account for web elements / browsers for design specs that I use and find extremely useful. Would be happy to get you setup with that

[g tsueng]

• There never was an intention to have the START NOW button line up with the background image, so don't worry about making it do that.
• Use a darker version of #0cf like #0099bf or #00667f
• The high res images are in google drive: https://drive.google.com/#folders/0B4I4dLIBkIcjclg5bVdfQTYwSjA (Bertrand.jpg, Might Family.jpg, or NGLY1 background.svg) Cristina Might sent them to me for us to use on our site so I think we're clear on the license.
• There's nothing wrong with the current pink, but since this is for the NGLY1 community, I wanted this version to be thematically linked to the future NGLY1 site: https://www.dropbox.com/s/o9iygmlio08jj1w/02_02_15_NGLY1_SITEMAP_ammend.pdf?dl=0 (citizen science in #0cf on that site, patients/patient stories in pink)

[Former user]

Closes #85

→ <<cset 8f026350dd4f>>