I’m not a designer but, I love wireframing. There’s an art to it, an art to the placement of elements on a page. It’s like writing a song. Sure someone else has to put the music to the words, but it’s the meaning behind the way the words have been arranged that defines whether it’s just short-term ‘art’, or something that will mean £££ and 🙂

Plus, I think it’s pretty important that any digital marketer, or by that same token, any marketer has a good understanding of why certain elements work or don’t work on a page, in an email, etc. Placement is everything.

Every time I come across an ‘element’ that has an impact on me (you know the ‘blink’ theory), it goes into the bookmarks folder. This is the same for Xanthos. Everytime we come across an element that’s working well, or that we understand to be meeting a Goal, we keep a note of it.

As of November 2013, here are a few elements of websites that I believe are working well. 14 websites reviewed in total!

H&M

The Header

Balance, clarity and elegance and there’s hardly any design. Because the navigation is plain, the logo and the shopping bag are what stand out most. Plus, it’s pretty easy to see that you can switch to using the site from another country.

 

The Individual Product Page

Who said you had to change the color of the buy button in order to draw attention to it? This, one makes you want to fill the bag! Again, another perfect execution of simple design that makes one area of the site stand out more.

 

Victoria’s Secret

The Header

AND the newsletter signup. This is one clever little element. In comparison to a company that places the newsletter signup form below the page or on a separate page, this is class and I have no doubt that it will and has increased the subscriber rate. What’s best is that it’s not intrusive and you can get rid of it easily – the little ‘x’ is nice and bold. And, if you ignore it, it doesn’t interfere with your browsing.

 

Amazon

I have to admit, Amazon has quite a few nice elements. Their site has been really well-optimised for ecommece sales, especially B2B sales, so if you’re looking for a bit of inspiration, this is a good starting point.

The Login Feature

My own name above the ‘Your Account’ dropdown. Trust me, this little touch always makes a difference. Plus it’s a good way to confirm I’m logged in AND that I’m logged in to my account.

 

The product name on the product landing page

What’s great about this is the amount of information displayed in a small space – the customer reviews, the specs, the shipping info and a big, bold price. This means I don’t have to go looking for any of the information.

 

Bath and Body Works

A plain ‘design-free’ navigation really lends itself to special offers and makes other features stand out more. In this example, the shipping information is very bold because the navigation is light. The same is true of the account and the shopping bag section.

 

Sephora

Header Area

Want to showcase a special offer? What about doing it ABOVE the navigation? It might look a little bit like an ad, but if you get the design right, you increase your likelihood of getting that offer picked up on!

 

Slideshow

Another nice feature about the homepage is the slideshow. It’s not full-screen like most websites and still means that you can easily navigate to other sections. Sometimes large slideshows take up too much space and take the focus away from the rest of the content.

Request for Feedback

And again, what better way to request feedback than to include a small, but obvious, out of the way link? Plus, when the feedback option pops open, it doesn’t take you away from the page you’re on and it’s short and even gives you the option of uploading a document. Very clever!

 

 

Cat Footwear

Footer

A bold link that includes the hashtag in the body of the link! A good way to get the most important information across. This way, even if people don’t bother to read the blog post, they will remember the hashtag. (In this case, the hashtag is likely included because it is the blog’s header). Still, a good idea.

 

Merck

Extra features

Why not think about incorporating accessibility features into your site? A print button, a share button and a text resizer button? These will make everyone’s life a LOT easier, especially the text resizer.

 

Mega Mega Navigation

This isn’t a ‘real’ term, but I’ve had to make it up because it takes ‘mega menu’ to the next level. This is a menu that almost functions as a mini-site and is a good idea if you really do have a HUGE amount of information on your website. Why not make the most popular/most frequented pages easy to find?

 

 

Waitrose

Footer

With the growth of mobile phone usage, people now EXPECT you to have a mobile version of your site. If you are one of the clever few that have accounted for this, make sure to let people know. Most people will expect to find a link to the mobile version of the site in the footer. Watirose have included theirs in the bottom-right corner.

 

Ocado

Navigation

Does your site or business have many aspects to it? Does each aspect have a navigation in it’s own right? What about putting your business in a virtual filing cabinet and separating those sections into folders, each with it’s own section? This is one of the few sites I have seen to do this.

A company like Amazon could make good use of such a strategy. Imagine if they had tabbed their website…amazon.com (for purchasing good); audible (for purchasing audio books); netflix (for movie subscriptions), etc.

This is also a good way to make customers aware of the different departments/services that you offer. And, in the case of Ocado, even keeps them on the same domain.

Random House

Navigation

What about thinking outside the box…or rather, inside BIGGER boxes? Isn’t this jut about the most appealing navigation you’ve ever seen? Plus, it tells you what to expect on each page. And it keeps the ‘little nav’ uncluttered.

Toppings

Newsletter sign up

Why have a SMALL newsletter signup when you can have a big one? If your goal is to grow your email list, and if this is where you do a lot of your successful marketing, this is a great idea. The newsletter signup on Toppings’ website spans almost the entire width of the page.

What’s also great about this signup is that you’ve got a list of the reasons to signup AND, you’ve got examples of the emails you will receive. No nasty surprises.

 

DK Books

Header/Offers

Competing with people that sell the same product on Amazon? Why not make your website’s selling point the fact that you get something EXTRA if you purchase from the company’s main site and not from a third party site like Amazon. DK are offering 30% off all books in the Christmas Shop.

 

Hobby Craft

Footer

Who said your footer had to be small? The great thing about a gigantic footer like this one is that you’ve got more space to showcase the important information. For Hobby Craft it’s the nationwide delivery, the ability to find your local store, information on delivery and accepted cards, logos that show the site is trustworthy, a newsletter sign up, page links again and…links to key social media platforms Hobby Craft is on!

Cost Plus World Market

Social/Header

Okay, so most companies put their social media links in the header or footer of their site. But, what about picking just one of them? What about targeting something specific, perhaps if you’ve got a campaign running? And better than that, personalize the link as this company has done for Pinterest. It’s MUCH nicer than a normal old ‘P’ link.

Get a website tune-up

If you think your website isn’t working hard enough; if you think you could be generating more sales or more leads, get in touch with Xanthos. We’ve got a special Christmas deal on and if you sign up before the 25th, you’ll get a discount of up to the value of £750.