Implement new homepage design

[smarziano]

The design for the homepage is completed via issue #803.

Content

Hero image

Look What I Can Do! There is no limit to what your child can accomplish. Jumpstart your child's education with Chicago Early Learning!

Enter your address (work, home, or somewhere else!) to find a preschool or early learning program convenient for you and your family. [Search box] [Search button] [Use current location]

Below hero

“Every child in every neighborhood deserves a quality education and that must begin in their earliest years.” - Chicago Mayor Rahm Emanuel

Important update

No update... add placeholder text.

Programs block

Explore our early learning programs! Children who participate in high-quality early learning experiences are better prepared for success in kindergarten and beyond. [Learn more]

Application block

What is the preschool application process? Are you ready to apply for a preschool program for your 3- or 4-year-old? Learn about the process here or call (312) 229-1690 with your questions. [Learn more]

City resources block

Early learning doesn’t only take place in a preschool classroom. Chicago offers a variety of stimulating children’s activities to get kids learning, moving, and playing. Learn more about what is offered by city agencies and organizations. [Learn more]

Latest news

Latest news [Placeholder text-- I would only show two examples]

Newsletter

Stay up to date on Chicago Early Learning! Subscribe to our email and text lists. Subscribe me!

Notes

• The only change to the design is that our partners wanted to see the important update block in orange or yellow instead of blue so it will stand out more.
• We are waiting on placeholder text items
• We are waiting for the application process video to add

[theandrewbriggs]

@amynicole @jenmakes I'm not seeing that push-pin svg ("Use your current location) in the icons folder Amy sent me earlier, do either of you have that?

[smarziano]

This is a design update based on https://github.com/smartchicago/chicago-early-learning/issues/821#issuecomment-317570799. Our partners initially wanted to add the partner logos into the footer but since they are not easily added, they would prefer to incorporate the "Partners" section that was in an earlier homepage design (#803). My thought is that it would go between the City Resource and Newsletter sections. cc: @amynicole & @jenmakes

[smarziano]

Photographs to use:

• [x] Replace the blue "Important announcement" box with this image:
• [x] Add this background image to "Early learning doesn’t only take place in a preschool classroom."

[smarziano]

@amynicole and I went through individually and noted some updates to the design of this page. We then divided it up between high priority and lower priority items for desktop. I also created a section with mobile updates that need to happen, but I understand that this is still a work in progress.

Higher priority items

• [x] Add Partners section with City, CPS, DFSS logo (see #803)
• [x] Add important update content (#835)
• [x] Tagline “Look What I Can Do!” appears smaller on staging than in design; remove caps; align left
• [x] Mayor quote block is missing confetti asset
• [x] “Important update” banner should only take up part of the block; left-align
• [x] More space around text on the “Important update” text
• [x] Adjust crop and gradient of image on City Resources block
• [x] Quote from the mayor should be: 22px tall, 30 px line height, color #9B9B9B
• [x] Important Update headline should be Montserrat Medium
• [x] “What is the application process” should be Medium weight font
• [x] “Watch: Video Title” should be Monsterrat Regular, 16px and should have more padding between text and video
• [x] “Early learning doesn’t only take place…” should be Monsterrat Medium, 36px, 44px line height
• [x] News item headline should be Montserrat Medium
• [x] News item text should be Italic

Lower priority items

• [ ] Hero image looks tight meaning that there is not as much space at the top of the little girl’s head
• [ ] Text, search box and buttons on the hero image looks wide
• [x] “Use your current location” text is not centered vertically in button
• [x] Move envelope asset to the left side of the text
• [ ] Each content section should have about 50px more padding on top and bottom

Mobile styling

• [x] Hero image needs adjustment
• [x] Picture of little boy with director's megaphone might need to be removed on mobile because it does not have that side-by-side association. Thoughts, @amynicole?
• [x] Asset of little science girl (currently missing) should probably be moved to above "Explore our early learning programs!" block
• [x] Update styling of image city resources block "Early learning doesn't only..." to make it easier to read text
• [x] Update "Continue to Application Login" text to "Continue Application" to save room

[smarziano]

There were a lot of improvements made with last night's commits (https://github.com/smartchicago/chicago-early-learning/compare/f0769f31a206...ddffa0fbf637), and I went ahead and checked off the items from our last comment that were completed. Please see above.

Here are some other final tasks that should be completed:

Desktop

Higher priority

• [x] Search drop-down is not acting like we currently have it (which might be because of it being on staging)
• [x] Replace second "Important Update" text with "Chicago Early Learning Parent Conference"
• [x] Science girl illustration is too big in this block. What are sizing guidelines? (@amynicole)
• [x] The photo for the blog content under "Latest News" is pretty big. What are sizing guidelines? (@amynicole)
• [x] Remove last "Subscribe!" line in newsletter block and hyperlink "Subscribe to our email and text lists."
• [x] Update text "Meet all our partners and learn more about the Chicago Early Learning Portal." to "Meet all our partners and learn more about Chicago Early Learning."
• [x] Update search bar help text to read "Enter an address, site, or zip code"

Lower priority

• ~The "I" in "Look What I Can Do!" appears a bit small than what we have on our live site~
• ~White font on yellow background for "Register Today" button is hard to read. Is there a better option for this block? (@amynicole)~
• [x] Should the "Early learning doesn’t only take place in a preschool classroom" text be align left like the previous blocks? It is the only text that is centered. (@amynicole)
• [x] News item headline appears a little big. What are sizing guidelines? @amynicole: "The news item headline is the right size, but the line height is too small. It should be 32px for the lineheight."

Mobile (iPhone 6)

• [x] The hotline phone number appears over two lines
• [x] Place video under "What is the preschool application process?
• [x] The image in the "Early learning doesn't only take place..." block is repeated

[theandrewbriggs]

I made the news item larger because there's only one, it looks weird small and alone. It's a col-6 but I can turn it back into a col-4.

[amynicole]

@smarziano @theandrewbriggs regarding the checklist above:

Science girl size looks right to me. We have it as 300px wide in our comps.

The designs for blog content have photos at 370px wide and 200 px tall. @theandrewbriggs let me know if you need me to crop assets.

The colors on buttons don't match our comps. We changed the colors slightly from the brand standards provided by the marketing firm, as those colors make it difficult to achieve legible body text on the bottom. We pushed the colors darker, to provide better contrast with white labels. The yellow buttons are still the hardest to read, which is why we use them the least. The other buttons don't look great on orange– which is why I was hoping we could push them away from using orange for this section. How much wiggle room do we have on this?

I know the city changed some colors on the page, but I would like the "Explore our Learning programs" section to more closely match our design– green button, blue headline. The way we're using the color palette now is not balanced between the cool and warm colors, and feels heavy and aggressive.

We have the "early learning doesn't..." section center-aligned in our comps. It fits the space nicely, but doesn't match the rest of the sections. I am fine with it either way.

The news item headline is the right size, but the line height is too small. It should be 32px for the lineheight.

[smarziano]

@amynicole I think we can make slight adjustments to the yellow to ensure that we can read the text. Do you think making the important update box yellow could be an improvement? They really wanted to see this in yellow/orange.

Regarding your other changes of the font colors/buttons, I agree with those decisions. Can you list the changes for @theandrewbriggs to make here?

Let's keep the "Early learning doesn't..." block center-aligned.

[amynicole]

We're changing the first section to be on blue instead of orange. We're making the important update tag yellow.

[amynicole]

Button Styles:

Green top: #81C639 Green Shadow: #A3D65E Yellow top: #FFC010 Yellow Shadow: #821 F3B300