Foundation Site: Image & Text Components

MozillaFoundation / Design

For all issues related to design at the Mozilla Foundation.

http://mofo.build/design

11 stars 5 forks source link

Foundation Site: Image & Text Components #315

Closed sabrinang closed 1 year ago

sabrinang commented 5 years ago

Description

Audit the current image/text components on the site and how we can align cut out overlap styles (proportion of cut and ratio of image) by referring to new blue sky ideas. Mockup new ideas in context of existing site and collect feedback. After successful review, we can prepare for implementation.

Image & text components to consider:

various widths
- full, narrow, mobile
various multiples
- 4, 3, 2 or 1 cards for the width of screen
- no card style
- horizontal, vertical stacking
how it works on white, light grey and pattern backgrounds
recommended usages

natalieworth commented 5 years ago

Notes: This page includes examples of updated imagery (photography + illustration): https://redpen.io/zyb1715539e7379499

Ideally:

untreated photography (in terms of no color overlays or filters)
primarily use photography over illustrations (maybe 70% photography, 30% illustration?)
bright/ high contrast/ high res photos
I think we should leave it fairly open-ended for illustration interpretations so it doesn't feel too repetitive on the homepage/ primary nav pages
for smaller/ less traffic illustration creation: * need to update and add an illustration file/ assets for quick 1-off images

kristinashu commented 5 years ago

I think the only things left to do here would be the provide guidelines on how much the white cutout box overlaps an images and when (and then update sketch file and production site to match this).

kristinashu commented 5 years ago

@mmmavis could you please let us know what rules devs are using to set the white cutout boxes (desktop and mobile) and then we'll update sketch to match?

Homepage

Participate

Primary banner

MozFest

mmmavis commented 5 years ago

I'll get back to you next week as this requires some investigation 😂

mmmavis commented 4 years ago

(Assigning myself this ticket so it shows up on my GitHub issue queue. Will unassign myself after)

mmmavis commented 4 years ago

I tried adding annotations to screencaps of the components above but it's just taking too long especially we have mobile/medium/desktop views to annotate. If our ultimate goal is to update Sketch file, @kristinashu it would be a lot easier if I could work with a designer side by side to update the Sketch file directly.

kristinashu commented 4 years ago

Makes sense, definitely don't spend too much time on it! Can you just give us a better sense of how you built it? Are the proportions fairly consistent across on the site? How did you do it: is it a percentage or ratio or fixed number?

mmmavis commented 4 years ago

I'm not sure which part we are talking about here. Is it the height of the part where the image box and the content box are overlapping? Or in terms of how much narrower the content box is compared to the image box?

I did a quick check and it seemed like devs implemented the design using fixed number (px or rem or em).

mmmavis commented 4 years ago

Related to this Pulse ticket: https://github.com/mozilla/network-pulse/issues/1152

sabrinang commented 4 years ago

Cutout styles that currently exist on MoFo properties that can align: https://redpen.io/p/fm185fad786e096c2f

kristinashu commented 1 year ago

Closing this ticket since it is very old.