18F / fec-style

DEPRECATED See https://github.com/18F/fec-cms for fec.gov's code
Other
12 stars 8 forks source link

Visual styling for "Missives" individual page templates #455

Closed jenniferthibault closed 8 years ago

jenniferthibault commented 8 years ago

Based on wireframes in https://github.com/18F/fec-cms/issues/410

jenniferthibault commented 8 years ago

I've loaded the desktop views into an InVision mockup here: https://gsa.invisionapp.com/share/MY89RFSRZ

Sticking with @onezerojeremy 's theme of slick & straightforward, I adjusted the layout to be aligned on the left instead of center justified, for more consistency with our grid styles. I think this still works as a whole because without any right- or left-side resource panels, it feels distinct from Registration & Reporting pages and other text-based pages.

I'm interested in the idea of including small profile photos of the page authors and contacts, because I think it's important to show the people behind the institutions (and helps eliminate specific contact pages). Even though these photos don't necessarily exist right at this moment, the number of folks we'd need to gather photos of is small enough that I think it's very feasible.

Last, I was initially interested in exploring how to brand these template pages independently, so that each was kind of special. As I went on, I became less sure that this was the way to begin, since the pages are still being shuffled around in the IA. It is important, however, to have a quick, sure way of knowing what category each template is in, so I've used our tag style here to include the page type above the title. Feels clean and clear to me, and will let us explore more specific visuals later on if we need to. I'd prefer not to venture into icons until we know more about how these pages relate to each other in the IA.

jenniferthibault commented 8 years ago

cc @emileighoutlaw & @noahmanger ^

jenniferthibault commented 8 years ago

In the event that action needs to be taken on these files next week, here is the zipped sketch file for these pages, (including mobile layouts for each page template).

betaFEC-missives.sketch.zip

onezerojeremy commented 8 years ago

and here is the ixd annotated version! missives-styled-ixdannotated.sketch.zip

jenniferthibault commented 8 years ago

This was demoed last week and 👍 'ed. Moving to implementation with the micropurchase