Take Back The Web/Campus Campaign Page Template for Content

LucyeoH-zz commented 8 years ago

Goal:

To have a template for static content on the takebacktheweb.mozilla.community site!

Info:

Style Information:

Please use the design from the rest of the website #35

Deadline:

April 8th at the latest

Tag:

[Design Needed, Developer Needed, Question, Staff Support Needed]

LucyeoH-zz commented 8 years ago

One potential idea for the template!! (Excuse my lack of design and/or drawing skills)

anistuhin commented 8 years ago

Commenting for updates, will be working as developer when the graphics are done. @yofiesetiawan and @elioqoshi a quick look on this will do I think, as they already got a the landing page, and @seeam might not be available for some days as he's having exams.

tripad commented 8 years ago

I am +1ing myself here for helping on the front-end code part of it.

yofiesetiawan commented 8 years ago

hi.. this is what i'm proposing...

05-cc-inside

LucyeoH-zz commented 8 years ago

Hey @yofiesetiawan this is awesome and SO fast!!

Two initial thoughts:

All the colours are cheerful but a bit distracting. I wonder if we could have the main background colour for the content be white, and then use one of the blues as a highlight box?
What if the top two boxes are merged into one with overarching descriptor area and then the two bottom boxes stay separate so the screen wasn't split screen both vertically and horizontally?

Thanks again!

Lucy

yofiesetiawan commented 8 years ago

hi, please check.. 06-cc-inside

Ryuno-Ki commented 8 years ago

Commenting on https://github.com/mozilla/Community-Design/issues/56#issuecomment-205412526 - there's a "Subscribe"-Button in the right pane (above the participants) if you just comment to get notified on further comments, @tripad ;-)

LucyeoH-zz commented 8 years ago

Hey Yofie! That's definitely closer!

What if we kept the "hero" at the top small, like you had in your first one.

And then put all three boxes against a white background. With a thing blue line dividing them?

Trying to think of a way of making it a bit cleaner so the content can stand out and it can work for pages where we have a lot of writing ;)

Lucy

yofiesetiawan commented 8 years ago

Hi Lucy, if you can share the text content you want to put there, i can better imagine how it should look...

LucyeoH-zz commented 8 years ago

Hey Yofie! So this template needs to be useable for 6 pages (so we need to have lots of space for writing and pretty plain).

1 page - for more info about the Campus Team Role 1 page - for more info about the Local Coach Role 3 pages - 1 page each for the impact areas (x3) 1 page - FAQ about Campus Campaign

yofiesetiawan commented 8 years ago

Can you also send the text content for example, page for Campus Team Role? You can write it and draw it on paper...

LucyeoH-zz commented 8 years ago

Hey! Here is some of the written content we'll be including in the page.

LucyeoH-zz commented 8 years ago

My thought is that the top bit is the hero with the page title like you already have. And then the rest is white background with clean blue lines that don't go all the way across but just divide the space kind of minimally.

Does that make sense? Sorry for being complicated!!

yofiesetiawan commented 8 years ago

Hi,

Please check.. 07-cc-inside

or 08-cc-inside

LucyeoH-zz commented 8 years ago

@yofiesetiawan these are BEAUTIFUL! I like the second one best. Can you send the files we need? Thank you! Thank you! Thank you!

phinity commented 8 years ago

@yofiesetiawan, This is awesome! I have time next week to set this up on the community site. Here are some suggestions I think can improve on this general direction. It would be great to see some or all of this in photoshop design, if possible.

General:

The paragraph body copy font-size is set to 16px and line-height 24px for readability. This is what we ended up with on the homepage and we should be consistent.

Hero:

I think the headline should be vertically centered between the nav/tab and the bottom of hero.
Maybe just little taller and center the image so the peoples faces aren't cut off?
Word-case please, so just the first letter of each word is capitalized.
The font weight looks different than the home, can we go with the same treatment on the homepage: Open Sans extra-bold, instead of just bold.

Content area 1: "Roles & Responsibilities"

The centered text treatment is nice but I think we’ll have more content that needs to be readable. Left aligned text that spans multiple paragraphs is important. This will also lend to "generic content" pages we may have on the site like a FAQ page and maybe even blog posts.

Content area 2: “Commitment” / "How to apply"

The content1 area above and the footer below are both white so this area seems to not stand out enough. Can we try a light gray background instead of a border or maybe even color(s) from the hero for background color with white type?
Can we use the same rounded button treatment from the homepage for consistency.

Thats it. Thanks so much for your awesome work here! I can add a note in the source for you. :]

phinity commented 8 years ago

@yofiesetiawan The one thing would be helpful to see in the design, if I had to pick one, is the updates to the Content area 2: “Commitment” / "How to apply"

yofiesetiawan commented 8 years ago

Hi,

Thanks @phinity for the clear guidelines. I managed to maintain the consistency. Please check.

Download PSD https://dl.dropboxusercontent.com/u/4450713/mozilla/GitHub/09-cc-inside.psd.zip

mozilla / OpenDesign