Adjusting UI Based on Intended Focus

I've found the most difficult part of creating marketing pages is gaining and keeping a reader's focus. I still haven't perfected the formula, but I believe focus can be gained through creative writing, clean design, and proper placement on a page. This exercise digs into the design portion of that challenge a bit, looking at how visual hierarchy, color, spacing, and type can be adjusted based on how much focus you want to bring to that component on your page.

So here's the exercise... You're creating a marketing page for your product and want to highlight its features. I mean, who doesn't want to hear about your product's features? The rub is that your features component is going to compete for attention with other items on the page like pricing, user stories, testimonials, customer logos, comparison charts, infographics, etc. (you get the point). You need to decide how much focus "features" should receive and depending on what you decide, the UI for that component should change. The idea here is that you'd be able to quickly adjust any components to match the level of focus you want it to have on the page.

Go on, give it a shot. Just click one of the buttons. ☝️

As you can see, the desired focus you set would dictate colors, icons, and text placement. The content is the same across each variant and the design is clean in each layout (IMO), but the attention brought to the component changes based on how much focus you believe the item should get.

Related, but not shown in this exercise, is that giving more focus to one component like "features" would in turn reduce the focus given to another component (see list of potential components above). This is especially true if the components can be seen in the same viewport. In practice, the desired focus would also change this component's placement on the page. Perhaps it moves closer to the fold, but that's a debate we can have at a later date.

How useful is this exercise? TBD. Perhaps this is something that can help designers or non-designers create marketing pages at some point in the future. Perhaps it just dies here as a fun exercise in UX using JS and CSS. Either way, the animations are pretty and I learned a little along the way.

Credits:

This idea was spawn from some brainstorming with Todd Morey who shares a similar mindset around UI, design, dad jokes, and the Spurs.

The main image (fingerprint icon) and icons in the demo are from heroicons.