skip to main content
2019-11-18

Canossa Grand Tour Custom Build

Website with a touch of Italy, and some custom radio buttons for better UI

Intro

A custom design build for an Italian event company.

Website

A lovely custom design and some nice grid style layouts to dispaly the information.
gif

Registration

Before any details are entered, the client can choose a category to narrow down their choices. The default display of these choices are in a simple list.

This list does not look very pretty, feels quite flat, and is not easily scannable for information.

choices as a normal list

What we did instead was split out each choice into a more readable, and scannable format.
The information density is lower, and the content takes up more space, but it’s instantly scannable.
The hierarchy of information is much easier to understand.

css added to make choices more visually readable

And by splitting each choice out into its own card it increases the cues for focus / hover / active states that can be achieved.

css added to make choices more visually readable

And on mobile we stack the choices keeping the card metaphor.

css added to make choices more visually readable

This idea came from https://twitter.com/steveschoger/status/1024720091546562560/photo/1