Designated Spice Zones
“Success is in the details.”
Is what Steve Jobs said.
“Success is in the designated spice zones.”
is what he would have said if he was working on a Web System (and was alive).
It’s the little details that really make a web system sing.
Those little moments of surprise and personality set a site apart from its competitors, position it as a category leader, and make it a more accurate reflection of the business’s identity.
We’ve always called these moments of “spice.“
When it comes to spice, try to create things that are unique to your company and your brand. Avoid copying these elements from other sites. You’d be surprised how often people recognize this kind of “imitation is flattery.”
It can be easy to go too far. Animations, transitions, and other visual details look so good, there is a strong temptation in any new site project to max out everything with animation and motion.
While motion is critical to making a site feel modern, usable, and engaging, too much of it can make your site feel like an orchestra warming up. A lot of noise but no melody. This will hurt your metrics and hurt your long-term flexibility.
Strategically, you want enough spice to amplify your messages and convey your organizational identity, but not so much that it distracts from the message. If your visitors are paying too much attention to your spice elements, they aren’t going to follow the path to conversion.
We’ve found that some guardrails can help prevent overdoing it. We’ve identified what we call Designated Spice Zones as the primary areas where these moments add value without risking performance.
Mortar
The mortar refers to the visual connection between modules on the page.
In its most basic form the mortar shows up as color blocking and white space between component sections. This tends to make it very clear that we are moving from one module to the next and it makes it explicit that the site is composed of modules.
For example:
Other sites go to some effort to finesse the movement from one component to the next. Such as Stripe which makes use of diagonal lines and graphics and Tray.io which makes use of curves.
Others rely on a wide variety of content types to make things feel less like modules and more editorial.
CTAs
Your call to actions can be another great place for personality. When a user hovers over a button, there’s an opportunity for a little razzle-dazzle. The button designs themselves can exhibit personality as well.
But be careful. Always make sure your CTAs look a LOT like buttons. Any deviation from standards here can meaningfully impact the amount of times a CTA is clicked. For example, “ghost buttons”, illustrated below, perform much worse than more traditional button designs.
Page Transitions
Page transitions can add a lot to the identity and branded feel of a website. They carry a performance risk, though. Often it’s fast to just take the visitor right to the page. In the right contexts, though, page transitions can set the mood for what’s next.
Grace Notes
Grace Notes are the little flourishes that both showcase personality and signal that the team behind the work really cared about the details of the site. Typically grace notes will involve a bit of motion or surprise. Some examples below:
Footer
In Head to Toe, we talked about the role that the Footer plays in helping organize a site and guide your visitors. But the footer is also a great place to bring in personality.