Hero graphic standards and hierarchy #301
Comments
|
I know this is a more general discussion about how hero images are used, but I wanted to comment specifically about the Owning a Home hero. Typically we show things front facing or top down, but Owning a Home has a slight 3D element in it that gives a sense of depth. I like this, but if we stay with something like this, the extruded part of door handle should be flipped to the left side. Here's the current image (there's also a closed door version, but the handle angle is the same):
We can see where the siding connects with the door frame. Something like this:
We can also see the thickness of the door handle, exaggerated here:
If we put them together though, the angles don't match:
To try to make sense of it, my brain flips the siding so it looks upside down. Here's an exaggeration:
To fix this, all we'd need to do is move where the thickness of the handle is shown to the left side.
When facing straight forward it would look something like this:
|
|
George, I'm in awe of the work you put into this, but... does it change things if the door is being pushed in? Most front doors open into the house. |
|
Thanks Scott. Sure, that's a factor, but if the door were open to the amount that you would see the right side of the handle, there would be a very large black opening in the hero. With the door ajar, the angle of the door and the siding should be about the same. And it would definitely apply to the version @nataliafitzgerald shows above with the closed door. |
|
Just a note on the siding, it's looking more like mini-blinds. Beveled siding doesn't have nearly that much pitch. Here's an example of how it's installed and an illustration that more closely matches the iso-metric style |
|
Also, @Scotchester, if the door was pushed in more than just being ajar, there would probably need to be a shadow cast onto it from the door frame. |
|
@jimmynotjim - Yeah, my comps were super rough and only meant to show the basic idea. I think the siding looks good in the original. |
|
Hey @designlanguage I made the original door way back. I think @stephanieosan and @mebates have iterated on it though. Maybe reach out to them for their latest source files this may be a quick fix if you have the time to address it. |
|
Hey @ajbush - Yeah, it should just be a small adjustment. Thanks, I'll reach out. |
|
I'm excited for some hero standards! It's like the wild west! So, @nataliafitzgerald and I were talking, and she threw out 350-375px as a nice hero height. Owning a Home right now is using the (very random) 250px, which I agree is too short. We even have trouble fitting in enough copy at that height, sometimes. We're using a "secondary" hero style for our Rate Checker page, which Natalia screenshotted above. It's our major tool, which is why we gave it the extra treatment of having the circle illustration. The circle is 200px diameter. It's an H1 with an H4 paragraph (but I think the H4 is regular instead of medium?) We also plan to use the same style for our second major tool, Loan Comparison.
All of our other lower resource pages don't have treatments up top, just title and intro sentence or two. |
|
Great points about the current illustration, but we've wandered a bit off topic for this issue. I think we need to focus on creating a standard and hierarchy for all our hero images to follow. We shouldn't be critiquing them them individually, but as a collection that presents a unified voice from page to page. I am less familiar with all the use cases each team is working with. But it seems like it should be fairly easy to gather current examples, setting guidelines for how they are used and, if nothing else, setting specific size dimensions for each use case. The hero images should follow a basic "template" for size, layout, text size (text length), and illustration style. |
|
It would be nice to include standards about how these convert to mobile as well. Some of that conversation is going on over here: #296 (comment) |
|
Ahh @stephanieosan you beat me to the punch, but with much more useful information :) |
|
Here is a post summarizing the thinking that FJ has so far around hero type and styles. This is based around our current use cases for the types of content and use cases we have in the About Us section and will influence our thinking as we move forward into other sections of the refresh. GH issue post can be found here
|
|
Here we go! @huetingj and I are trying to work out a standard for hero graphics as we design the next iteration of OaH's hero graphic. Generally the "card" style of FJ hasn't worked well for our consumer facing pages. This has lead me to think of the heroes this way. Maybe we have two styles, one for our more consumer-focused, consumer guides pages and one for industry-leaning audiences:
Eventually I think it would be great to have some guidelines about when to use a hero or not, what kinds of illustrations belong on what levels of pages, etc. But for now, we're focusing on that top-left box and trying to get the type and spacing for that use case settled. We had an initial conversation with Natalia, where we talked through some basics:
So, I mocked these up, exploring different heights:
One thing to note is that Flapjack is recommending using hero for calls to action rather than just introductory space. This would mean we'd want to consider how links get included: This introduces some problems, because it would limit what colors we can use as our background color. Very few colors are accessible with the blue link text (probably not even the one pictured above). We need to explore alternatives more. We may need links to be black in heros, or we could use buttons, but those can pull visual attention away from the content and hero because they're so dominant. For the Owning a Home hero specifically, I've been looking at how different illustrations work with the type. Here are three directions. This brought up some good questions, like:
Tablet
Mobile
|
|
Have been working on updating the beta landing page hero that we brought up a while back. It's one of our few current examples with illustrations. It has always been a unique instance for FJ as it does not feature a piece of content/resource but acts as more of a introduction. For blogs/newsroom/(and soon) events the place card hero is set up as our default. The standards we have for our heros thus far (can be seen in the FJ design template):
Things that have informed/shaped our approach:
|
|
We need some cross-project strategy re: information architecture / UX. We can workshop this issue during the Regroup Design Manual working session. |
|
In our working session next week, let's also address whether we should include the arrow minicon at the end of links in hero sections. This is the final detail in issue #264 |
|
Sounds good @benguhin I'd also like to continue the conversation about the card style for illustration heroes. As we move toward defining our hero standards, I'd like to push for reserving the card style for photo and video heroes. The more we can avoid boxing out content, the better. When we do box out content there should be a solid reason behind it, for example, allowing us to place text on top of a video or photo background. I have always encouraged all designers to try out the card style first when they approach their project specific heroes and I have tried it on all of the pages I have worked on as well. Unfortunately, I have yet to see the card style used successfully in an illustrated hero (outside of FJ) and even on Flapjack it seems to have its challenges. Before we continue trying to make it work for illustrated heroes, we should take a step back and discuss why we should be using it for these use cases at all. And, we should consider the alternatives that are currently working across the board. Related to this conversation, is the topic of how we deal with illustrations, and whether we create full scenes, have objects bleed off the page, create still lives, or top facing compositions. My thought is that the creation of scenes for heroes is an outgrowth of our motion graphics video work. As we move forward, we should reserve the creation of scenes to motion graphics videos. For our web and print illustrations we should use either front or top facing object compositions, as outlined in the Design Manual. |
|
Next steps: UX is taking this on! During their weekly meeting. They'll update the designers in the next Design Manual Meeting. @kurzn will take this on |
|
I wanna queue this up for Monday's meeting. There has been lots of discussion about hero standards for the KBYO pages, so we should definitely discuss this as a group. @kurzn do you think you will be able to update us on any new developments from the UX perspective? |
|
@Dnpizarro Yes! I will have the full recommendations to discuss at our meeting next week! The UX team has had conversations and are in a good place to hand this over to vis design. |
|
Awesome! Thanks @kurzn , look forward to hearing the recommendations! |
|
@nataliafitzgerald can we setup a time to discuss next steps for how the graphic designers can now pick up the work done by UX to resolve some of the visual standards? For reference, the document @kurzn presented at our last meeting is below: https://docs.google.com/document/d/120S1FyRaIAefcVgODGhnaO99ycigH_-5_4cI5KAfE4A/edit |
|
@Dnpizarro - Yes, can you find a time on my calendar? |
|
Hi, @Dnpizarro and @nataliafitzgerald! This is one of OaH's assigned design manual issues. We've started strategizing and are going to do a deep dive on Thursday to look more at use cases and what that means for visual design, illustration strategy, etc. We'll reach out soon to schedule a meeting with you to talk more about direction, so be on the lookout for that. @stephanieosan @sonnakim @emiliecfpb @kurzn |
|
Hi @huetingj I've been chatting with @nataliafitzgerald about this as well. I just sent out a calendar invite for this Friday. We have a Design Manual meeting on Monday so I wanted to get everyone together to discuss this issue so that we can provide some clear updates for that meeting. |
|
@Dnpizarro Can you include me on that invite as well, please? Thanks! |
|
Hey @Dnpizarro that time doesn't work for me. I'm writing you an email right now. |
|
We're closing this issue out and redirecting the discussion to issue #348 . |
As I look across the landscape of our website (and micro-sites) I have noticed a lack of consistency in how we design our hero graphics. Digging a little deeper I see that the issue is more complex than this and points to the absence of a global visual and content strategy/map for our current site. As we build new product sections, individual teams are coming up with solutions that make sense for their products, trying their best to make global considerations. But ultimately we are left with a landscape that lacks consistency.
The current landscape
In looking over the landscape there are a number of inconsistencies. In creating a standard and hierarchy, the first step would be to consider where we can create greater consistency.
Some of current inconsistencies (opportunities for greater consistency) include:
Type size and weight
In some heroes we use the Display header and in others we use Header 1. There isn't a hero hierarchy reason for this distinction. It has more to do with what fits. With that being said, we seem to be trending toward the H1 hero headline.
Height
The height of our hero graphics is inconsistent. I suspect that we are basing the height on the length of the content. It seems like it would make more sense for our heroes (at each level) to be a consistent height. Content could be written to fit the space and if it's too long we could work with the product owner to cut it down or rearrange it on the page.
Illustration approach
On our current site, I found a diversity of illustration approaches including front facing illustration object still life no bleed (Paying for College), front facing illustration/object still life with bleed (Paying for College), zoomed in front facing full bleed (OaH), isocons in circles (HMDA), no illustration with button (Submit a complaint), top facing objects on a table (Paying for College), circle illustration (OaH secondary hero page). Flapjack has explored the top facing objects on a table approach, the full scene/full bleed approach, and the front facing objects approach.
Here's the landscape:
Some points to consider:
What hero levels do we need?
Flapjack has done a lot of mapping out/thinking about the types of heroes that will exist in the future state of consumerfinance.gov, see issue 17 In order to start addressing our current content and the content that is being built out and released now, it would be beneficial to start to think about our hero landscape on a more global level (to include present and future states of the website).
Website homepage hero
FJ's card hero style could be tested but I suspect that some adjustments would be needed to fit the content. In the past we have received push back on updating the homepage hero so I suspect that a full update to the FJ style may not be in the cards. If only a light refresh is possible, we could rather easily come up with a stop gap that is at least true to our basic hero graphic style - and include our current color palette and fonts. The existing hero style is now more than three (going on 4) years old, includes a gradient, a blue that is not in our palette, and Georgia.
Consumer products
There are a number of consumer products (and pages) in various stages of development. Owning a Home, Social Security, and the intermediaries pages all include various hero spaces. Already built our consumer products would include Ask CFPB, Know Before You Owe, Paying for College, Submit a complaint, etc.
Using our current hero style as a starting point, could we come up with a global approach for our consumer product heroes?
Other pages?
In the future state of cf.gov there are heroes for additional pages.
Conclusion
I can propose some hero standards but first I wanted to bring people together to discuss this. I know that Owning a Home, Social Security, and Intermediaries are all working on pages that touch on the need for a hero hierarchy and some hero more concrete standards. At minimum I would like to start to get some of our existing hero standards zipped up and captured in our Design Manual.
The text was updated successfully, but these errors were encountered: