1. Be Generous With Your Negative Space
- be generous with spacing between paragraphs and with the margins framing your blocks of text so that your shoppers can perceive your written content as “important” (we talked about “adding value” through visual hierarchy: well this is an example of “how it's done”) and “digest” it more easily
- put your call to action button into the spotlight by simply adding more negative space around it. It's that white space that will set it apart from the rest of the elements on your website and make it instantly pop out!
- dare “derailing” from the so very “trendy” and overly used web deign practice where you place a large image on your front page to draw attention to and you “suffocate” it by other elements crowded around it. Give this central, visually-arresting image a bit (jut a bit more, no need to exaggerate now) more space, white space, and you'll instantly balance out the whole layout and, moreover: your attention-grabbing central image will grab even more attention now with that “barrier” of negative space framing it!
2. Juggle With Different Sizes
3. Think Contrast When Choosing Your Color Palette
4. Grab Attention Through The “Static vs In Motion” Effect
- you add one or two discreet animations here and there, on key places on your website. And here we need to stress this idea of “discreetness”: your animations should be subtle; it's highly important that you don't go too far. It's quite easy to overdo it, you know, and instead of “cunningly” driving your visitors' attention towards the elements of major importance to you, to annoy them instead, to drive them off your website due to your too flashy, bling-bling animations. Not only that these “overly flashy” animations will annoy your shoppers, but they'll steal even the minimal attention away from the other elements on your website. And you don't want that!
- you add an auto-playing video. Again, be very cautious not to go for a too absorbing video that leads to nothing (no subscription, no purchase). One of the best practices in this case it to design pages around your video, that your visitors should be discreetly “tempted” to access.
- you go for a photo-video hybrid. They're such a popular trend in e-commerce web design these days! No wonder, for they put together the visual power of an image with the one of a motion, the latter being so discreet and idealy subtle. Therefore, it comes with the advantage of not outshining the neighboring elements. It's a type of motion-implying (visual hierarchy providing) technique which works wonders especially when applied on a visual that's already stealing the spotlight on your website (e.g. the large central image on your front page).
5. Set Up a Scanning Pattern
- they both start in the upper left of the website (where usually logos are placed), go all the way to the upper-right corner (so this explains why upper page horizontal navigation bars still rock) and it's from there that they go on separate ways
- in the F pattern the user's eye returns to the left side of the screen sort of mimicking the left-right-left-right eye movement specific to the act of reading (this is why this pattern is used predominantly on blogs). How is it useful on your e-commerce website? It enables you to nicely structure and display rows of images that shoppers can easily scan through. A “trick” you could use when adopting this pattern is to display secondary promotions on the right side of your website. It's there that the user pauses for a second or two before going back to the left side of the web page. So, “exploit” that short pause, so to say!
- the Z pattern is already an “emblematic” one for front pages. Here you have the upper row, then the attention-grabbing image in the center of the page, presenting the site's man features or showcasing its products/services, then the bottom row. It's an ideal pattern for pages centered around one single action: such as landing pages or one page presentation websites, but it can be effectively adapted to the specific needs of an e-commerce website.
6. Set Up a Rhythm Only To Break It In The Name of Visual Hierarchy
We do Web development
Go to our Web development page!