Foundation.mozilla.org: Update images in featured offerings

[xmatthewx]

@sabrinang & @taisdesouzalessa – lets try and get some real images in the 3 boxes below our hero on the homepage. I think these boxes are designed well to handle a bit of inconsistency that will be natural as the year proceeds. So, let's resist the urge to design for perfection.

[taisdesouzalessa]

@xmatthewx I did a stress test using different types of images and scenarios:

• real pictures from the subjects (not edited)
• mosaic pictures
• charts
• icons/illustrations

Here are the screenshots.

@sabrinang - awesome job in designing this system, it looks good in every scenario since the strength of the component is in its type and structure.

[xmatthewx]

Huge success! Thanks @taisdesouzalessa for the thorough test. Thanks @sabrinang for the site design that contains the noise so nicely.

For the prototype, I propose that we use all 3 from the second example above: blue fellows, red illustration, emojis. Work for you?

Cheers.

[sabrinang]

This is looking so great and thanks for stress testing. By seeing it all here, I think there is a point to keep the hero visual treatment simple (example: it may be simple line art rather than photo treatment) so it doesn't compete with the content below. It is visually successful and I think its due to the simple hero area to allow this to shine so I'll definitely keep this in mind.

[xmatthewx]

done!