Given that one of our most recent website builds was an e-commerce shop, we thought it appropriate to do a Focus post on a website of this kind. So, in our second Website Focus, we look at a French e-commerce store that sells a range of trendy and comfortable sportswear socks. Meet Archiduchesse.

Home Page

There is no messing around on this site. The front page immediately shows you what’s on offer with thumbnail images of the socks. More than that, they are colour co-ordinated so that there’s a beautiful transition through all the colours of the rainbow. Starting with a deep red item that fades gradually into pinks, then purple, through to blue and so on. It’s instantly noticeable and very pleasing on the eye. The designer of the site also very cleverly matches the tone of the shopping basket in the top right corner to that of the first red and pink socks, giving a nice tight-knit (:P) feel.

Visual flow makes the site very easy on the eye

But it doesn’t stop there. Even the size tabs beneath each image are matched to the colours of the products. This is a beautiful effect with the only slight drawback being that on lighter coloured garments the text colour doesn’t change to complement it. In some instances you can end up with white text on a light cream background, which can be slightly awkward to read. Overall though, the effect is very satisfying.

Not only do the tags show the available sizes in UK, European or US metrics (depending on what version of the site you’ve selected), but they are also only fully extended if the item is in stock in that size. If it isn’t, the tab is retracted. Clicking on the tab adds the product straight to your basket in the chosen size. Small but useful usability features.

Stock info displayed through tabs

The site also uses the classic tab effect for the main navigation. Something everyone is familiar with. But it’s extended further by using descriptive icons to represent the types of socks on offer.

Info Pages

When you reach the Info pages, you are presented with an image slider that displays images of the products at various stages of production. You feel like you’re getting an insight into what goes on behind the scenes, which is a good way to generate trust with your customers. Apart from this, there is little else on the page but the company’s mission statement. While I’m not a big fan of mission statements on websites, as long as they are as readable and user-friendly as this one, you can just about get away with it.

While the info page is bold and alluring in its simplicity, as a genuine shopper you’d still expect to find all the information regarding delivery and returns etc here. At least links to the appropriate pages. Instead this is all located in the footer, an area not as well recognised for housing important related info as the sidebar or main content area of the page itself.

However, in the footer, the links to the various delivery and contact details are displayed very nicely through monotone images that change colour on hover. The designer of the site has cleverly used one large image sprite in place of 6 smaller ones. This is a technique used to reduce the load time of the images and remove any split-second flickering that occurs when a user hovers over an image and is forced to wait while the hover-state image is downloaded.

Cool hover effect on footer images

Single Product Page

The single product pages are what really sell the products on this site. There is some excellent photography and a solid theme throughout. Each product has very similar shots – the product draped casually across a wooden model, the product as they would look as worn on a person, and then the product with the packaging that it comes in. They are slightly unconventional in that some photos only show part of the products and at extreme closeup, but for a product that relies largely on the aesthetic of comfort and texture, an obvious and appropriate technique.

Individual product pages show beautiful detail

The lighting is perfect – enough to show the products in great detail, and good enough to be able to stick the product text right on top of the image. No need for boxing out the text. A very nice technique, but only achievable with good understanding and co-operation of your photographer!

Again, the accompanying tags and tabs match each product’s colour. Excellent consistency.

Conclusion

Simple to navigate and gets straight to the point. The site focuses heavily on imagery and lets the products sell themselves. On top of that, they explain the reasoning behind their decision to sell directly to the consumer.

Archiduchesse pride themselves on their direct approach to selling – cutting out the middlemen and selling straight to the consumer. This is done to remove any costs involved with dealing with third parties such as wholesalers and retailers, and to counter the higher-than-average manufacturing costs in France. You get the feeling that if you bought from them, you wouldn’t just be getting a nice product, but you’d also be helping out a brave and independent little company as well. Rather than a large, faceless corporation. The whole brand has that safe and homely feel, and it’s aided by the neutral but satisfying design of the site. Most importantly of all – it makes you want to buy the products.

It’s a good sign that 15 pages in I was already considering exactly how I was going to get across the level of respect I have for this book. Turns out I’m not a good enough writer to fit in all the superlatives and similes without turning this into a sponsored review. It’s that good.

Jason Fried and the David Heinemeier Hansson are the guys behind 37 Signals – an online suite of customer relationship and project management tools aimed primarily at web designers and developers. Their company consists of just 16 people, spread across 9 cities and 2 continents, yet it turns over millions of pounds in revenue every year. They don’t aim to please everybody in what they do. They please themselves by building products they believe to be truly useful. And in so doing, they please many, many more. Something they are evidently proud of.

Rework is the second book from 37 Signals, though this one is more of a manual than anything else. In its first week of launch it became a New York Times best-seller. And understandably so. Its chapters are littered with nuggets of useful, every day best practices and suggestions for running a sleek and successful business – whatever field you’re in. They actually make sense. Books like this run the risk of coming off as cheesy and unrealistic. But this one is nothing if not realistic. Keeping well clear of the ‘self-help’ and ‘motivational speaker’ genres, it carefully positions itself somewhere between ground-breaking white paper and, well…rant.

Something I particularly like about Rework is that everything discussed can be applied to any situation, work or otherwise. It’s written by web designers by trade, but spoken from the mouth’s of those who have been there, done it, disagreed, reworked it and written about it.

The chapters are short and punchy. There’s no lag, no filler and nothing unnecessary. Every paragraph makes sense and is about as succinct as you would want it to be. This makes it incredibly easy to read, whether you’re sitting down with it for a good session, or just dipping in and out on the train to work, like I did. I still finished it in 2 goes.

One of the biggest things I’ve taken from this book is that is that it doesn’t matter what’s gone before. It doesn’t matter that others have tried and failed. Their misplaced conceptions or ill-conceived ideas are what commit their ventures to failure. You create your own luck and in spite of others. You succeed because of you.

“Evolution doesn’t linger on past failures. It’s always building on what worked. So should you.”

Despite Seth Godin’s (American entrepreneur, author and public speaker) warning that some of it may make uncomfortable reading, I actually find it quite soothing to be told that there is more than one way to skin a cat. That just because we already have these processes and policies in place, we don’t necessarily have to abide by them if we believe there is a better way to achieve the same outcome or better.

Without wanting to give too much away, there are a couple more quotes that I have to share. On startups, new businesses and those that have always thought about it but never quite got round to it:

“When you want something bad enough, you make the time – regardless of your other obligations. The truth is most people just don’t want it bad enough. Then they protect their ego with the excuse of time.

Don’t let yourself off the hook with excuses. It’s entirely your responsibility to make your dreams come true.”

Ok, so talk of dreams coming true might’ve caused a few pairs of eyes to roll skywards and some of you will brush it off as more clichéd rubbish for the people not living in the ‘real world’ to chase. This is probably a clear indication that either you have everything you need….or you’re missing something pretty major in your life to strive for. You be the judge on that one.

On the subject of building a rockstar environment (one where all employees are highly skilled, highly devoted and near-miracle-working geniuses):

“Rockstar environments develop out of trust, autonomy, and responsibility. They’re a result of giving people the privacy, workspace and tools they deserve. Great environments show respect for the people who do the work and how they do it.”

Nuff said.

Conclusion

I felt genuinely inspired and invigorated from page three. Page one was blank and page two had the chapter title :). I only really need one word to describe it: loaded.

It’s loaded with bullshit-meets-reality scenarios. Loaded with paragraph after paragraph of pure and unadulterated truth. It scythes down all antiquated and inflexible structures that we have grown to be comfortable or accepting of and replaces it with workable, sensible solutions. Drop it on the boardroom table and it will go off in the face of those who persist in unnecessary formalities and needless protocol. It questions everything and offers more, to the point where I want to get wrist bands made up with ‘WWJFD?’ embossed on them, standing for ‘What Would Jason Fried Do?’.

I have found my bible. But I won’t be lending it to you.

Buy it yourself if you seek genuine enlightenment.

This is a new feature in our Thoughts section that I’m hoping to maintain and build on reasonably regularly. I’ve grown a bit bored of the common listicle post. You know the ones. 50 websites that use photographic backgrounds. 70 websites that use big, bold typography. 1000 websites that will increase the length of your toenails.

Listicle posts can be great for a quick source of inspiration, but sometimes you want a little more. Sometimes you want to know why the author thinks a particular website stands out from the crowd. A little more info than a name, an image and a link. So in these Focus posts I’ll be attempting to look a little deeper using just one website at a time. Today I’m going to focus on Cristiana Bardeanu’s 84 Colors website.

The 84 Colors website is all about personality. It has been around in its current state for a good couple of years now, but it has such a professional finish to it that it has stood the test of time extremely well and even now, manages to look fresh and modern. Cristiana’s website is extremely unique and it’s her level of detail and consistency of the nature theme that makes it fascinating. Below are just of a few of things that I’ve picked out as inspiring elements of her site that help show it off as one of the more impressive online portfolios. Cristiana is an artist, clearly and plainly.

Menu item hints

Menu items offer little hints

Each item in the main navbar has it’s own little hint that pops up when you hover over them with a little arrow and a small indication of what each page contains. Not essential, given the obviousness of the links, but a nice touch all the same.

Subtle use of Flash

Flash is used subtly and sparingly

I’m not a big fan of Flash in websites. But the 84 Colors website manages to seamlessly blend two very subtle areas of Flash into the rest of the site. These elements are so well implemented that they are almost hard to notice at first glance. If you can’t see which bits I’m talking about, take a look at the leaves in the top right of the page and the leaves and squirrel to the left. Perfect execution and another nice touch.

Good use of fonts throughout the site

Portfolio links use nice font

Cristiana uses a combination of attractive fonts and appropriate typography all through her website. Lucida Sans seems to be the most prominent typeface used and it’s used in every way you can think of. Large, small, bolded, italicised. I particularly like the way it is used on the Previous Project and Next Project links in the Portfolio pages. Another example of the great level of detail employed in this site.

Consistent theme

Elements of nature throughout the site

Lots of websites attempt the natural/environmentally friendly theme. Not all of them pull it off quite as stylishly as 84 Colors. There are plenty of little additions – grass, a squirrel, a butterfly, flowers, leaves, a spider and some nice textured background effects that collectively make this site so interesting to look at.

Bonus: a personal touch

A bold but commendable move

It’s refreshing to see a designer with the confidence to be open about ‘failed projects’. Though in this case I’m not sure failure comes into it. Cristana has enough confidence in her work to show the world what she can do, and how sometimes the client isn’t always right. It’s done with taste and grace, and no sign of bitterness or regret. Nicely done.

Conclusion

Out of all of these beautiful touches, the thing I enjoy most about this site, is Cristiana’s use of typography. I’m not a huge typography nut like some designers, but in this particular site I find it extremely easy to identify the different sections based on the typography and fonts alone, which is a definite indication of type being used properly. Good use of bolding, italics and a consistent colour palette make that all possible.

All of the details and all of the thought that has gone into the build and design of 84 Colors make for a very complete website that is hard to take your eyes off. It makes you wonder how people can still have a misplaced sense of importance when it comes to design. And this is why 84 Colors is the first site I have chosen to focus on.

Having recently launched a completely redesigned and re-branded WHD website, I thought it appropriate to highlight an issue that seems to affect a lot of web and graphic designers while the dilemmas and frustrations are still fresh in my mind.

As just about any designer (web or otherwise) will tell you; you are, always have been and will continue to be the hardest client you will ever work for. This is an unavoidable truth. The pressure to come up with something that perfectly fits the wants and needs of your users, shows an awareness of current trends but still projects individuality, separates your business from those around you striving to achieve the same goals, and that still manages to satisfy your own continually shifting desires time and again is a huge obstacle to overcome for even the most accomplished of designers.

Why is it so difficult to design for yourself?

Whether you run your own company, work as part of an agency or live by the seat of your pants as a freelance, your own site will be the biggest indication of your abilities to any prospective customers or employees. Websites are your domain. This is what you do. Your website is more often that not your stone-cold introduction and first impression, which is why you work so tirelessly to perfect it. But why is it so hard to design your own site?

Your own ambition and expectations

As a designer human being, you are always pushing yourself to be better. This is human nature. People are never satisfied. It’s natural to want your next design to be sleeker, leaner and more beautiful than the last. To continue pushing boundaries. To keep stepping up the ladder. Continued professional development is not an easy thing to master, particularly in an industry that changes and evolves as rapidly and unpredictably as web design.

Other people’s ambitions and expectations

People expect you to be on top of every trend and modern movement in your field. After all, this is your profession. You are a web designer therefore anything people see on the web, they expect you to be able to recreate or improve upon. What these people often fail to take into account is the size, experience and budget behind the teams that produce these enormously popular and well-built websites.

Industry respect and recognition

The web design world is an extremely competitive one. Gaining any degree of respect or recognition from the community can be exceptionally difficult. As a new or aspiring designer you might find yourself in the position I was in with version 1 of WHD – chasing approval of my work from every avenue available to me. I had a particular appetite for web design and CSS galleries. My site found it’s way into over 50, which was remarkably satisfying at the time. But I soon realised that there’s more to it than that. Having your work featured is a great feeling, but what does it actually do for your business? How does it help you improve as a designer? Apart from the initial burst of SEO goodness garnered from these little bundles of joy that are web galleries, there is reasonably little to be gained, yet you run the risk of becoming sidetracked and placing way too much importance on what your peers think of your work, rather than your clients. You should be looking beyond this. Don’t chase recognition, good design will always be recognised. Focus your energies on improving yourself and what you do.

Choice paralysis

This is a concept I was first introduced to by Paul Boag when he spoke about the difficulties users are often faced with on eCommerce websites that have too many options or products. But the concept stretches further than this. I’m a chronic procrastinator. I think about everything. I think way too much. I think about what I’d like to do, how I’d like to do it, the possible pitfalls and potential benefits of every aspect of every action. This leaves little time for doing. When designing your own site, you are limited only by your imagination. As empowering as that might sound, when you are sitting in front of a blank Photoshop canvas, it can be excruciatingly painful attempting to get those first marks on the page. What style will you go for? What resolution will it suit? What font will you use? What kind of imagery? Two column layout or three? The possibilities are endless.

What can you do about it?

There are various ways to jog yourself out of this black hole of indecision. Hopefully one of them will work for you.

Treat yourself as another client

This is the first thing most designers will tell you to do if you ever mention that you’re having issues working on your own stuff. The theory being that if you take out your own emotional attachments and work like you would on anybody else’s site, you’ll produce better and more efficient work than you would otherwise.

Browse web galleries

Web galleries are the perfect way to gather inspiration and ideas. They are choc full of the latest, most eye-catching and well-built designs. A good indication of what is considered good or exciting design. Here are some of my favourites that I will regularly visit if I feel in need of an inspiration boost:

• www.bestwebgallery.com
• www.thebestdesigns.com
• www.webcreme.com
• www.cartfrenzy.com
• www.smashingmagazine.com

Relax

This will not be your last site redesign. You can always change it. People handle pressure differently. Some people thrive under it, while others will crumble. But it’s always worth remembering that this is your website, therefore you can change it any time you wish.

Think differently

It’s very easy to get bogged down with one particular area of the site. You can end up investing a lot time in something that was meant to be very quick. If you get stuck for too long in one area, try to tackle other areas of the site. Inspiration is an extremely unpredictable emotion and hard to control. So when you feel on top of your design game, you need to use it. You can’t afford to get stuck in one area and lose your motivation.

Shake things up

Sometimes you just need to break your cycle. Being in the same place all the time can lead to the same thought processes, even the same working patterns. Take a walk, change your surroundings. Work out of your home or office. Try coffee shops, parks, anything but your regular place of work. You might be surprised with what you come up with if you push yourself to work differently.

Example: On the way home from work every day I have a 20 minute slot on the train in which I sometimes try to break out the laptop and hit Photoshop with whatever I’ve got before I have to pack up and get off the train in a mad rush. It’s a slightly strange feeling rushing everything, but I find it forces me to just get something down on paper as it were. For me personally, getting started is always the hardest part so this works well for me.

Conclusion

Inspiration and creativity is integral to what we do as designers, yet they are some of the hardest qualities to keep firing on a continual basis. Added pressure from yourself or others can make it next to impossible to feel energised and motivated for your project and can easily lead to burnout if you aren’t careful. The trick is to use it to its fullest when it’s available to you. And when it’s not, to better understand how you can trigger it. Everybody is different. Find what works best for you.

When are you at your most creative and what are your tried and trusted methods for getting inspired? Leave your thoughts in the comments below.