Fashion Websites: Trends, Showcase, Interviews

Advertisement

Fashion is a cultural phenomenon. It’s so often transient, but at the same time one of the most polished mirrors of our time. Unlike other art forms and creative media, fashion is a mode of self-expression for all players involved: the designer makes clothes to express their personality, and the consumer wears them for the same purpose. Fashion also accommodates a number of other creative professions, such as photography, make-up and hair-dressing and Web design.

In this post, we’ll look at websites from the fashion industry. We spoke with two developers whose websites differed in style and implementation to find out the considerations involved in designing a website for a fashion brand. Further below, you’ll find a collection of smart websites done by clothing designers, photographers, make-up artists and other players.

With its look at trends and features in this niche, this post may come in handy for those of you working on a related project or who are simply curious to know how Web design is approached in this industry. Although we won’t discuss the clothing itself, fashionistas may find some use in it, too.

Some Trends On Modern Fashion Websites

Looking through the websites discussed in this post, we caught a few commonalities.

Full-Screen Photography

Photography is a powerful tool and is integral to fashion websites. Grasping how photography can impress the viewer and set the mood, many fashion brands use big high-quality pictures to dominate their websites.

Mexx
Like many other fashion websites, Mexx relies heavily on Flash and full-screen images. The design has no special features or gimmick; its uniqueness is in the content itself.

Screenshot

Story-Telling

The fashion industry works hard to create mental associations and set expectations on the part of its audience. The market is saturated, and companies look for new ways to grab the attention of customers. One way a brand does this is by going beyond merely presenting its clothes and instead bringing its merchandise together into a storyline and associating its product line with a certain lifestyle.

Louis Vitton Journeys
Louis Vuitton Journeys is a unique Web campaign sponsored by the famous fashion brand. It features exclusive stories about influential modern personalities. The latest journey, Encounter With Greatness, features quite a smashing get-together of three football legends: Pele, Diego Maradona and Zinedine Zidane. Unique content and interactivity through Facebook integration make the website an exciting destination.

Screenshot

E-Commerce Integration

Modern Web technology enables us to showcase and sell products at once, and equally well. Today, most fashion brands no longer divide their online presence between their product line and e-commerce, preferring to combine the two under one domain or using their online store as their official website.

Tiffany
Tiffany’s official website has a distinctly e-commerce design.

Screenshot

Big Names Are Inconspicuous

That the icons of fashion are so old-fashioned with their website designs is rather ironic. A quick look across fashion websites reveals that the more famous a brand, the more poorly designed its website. It seems these traditionally big names prefer conventional marketing channels and minimize their Web presence because of it.

Pierre Cardin
This website is definitely worth a visit, at least to see what a good design is not. Or perhaps that’s what they call avant-garde?

Screenshot

Interactivity and Social Media

Another trend is the increasing use of interactive features and social-network integration. Designers are taking advantage of the latest tools and techniques to allow visitors to “touch” their products and deliver exciting experiences. Live-action previews of apparel, webcam functionality, connecting and sharing via Facebook, even 3-D viewing mode: with all of these entertaining baits, becoming an online shopaholic is easier than ever.

Zoogami Eyewear
Zoogami presents its latest eyewear collection in a fun, amusing way. You need a Facebook account and webcam to experience it.

Screenshot

Different Web-Building Technologies

Although Flash still leads as the tool of choice for fashion websites, more websites based on HTML and JavaScript are appearing in this niche.

Airwalk
The website for footwear brand Airwalk shows JavaScript at its best. It delivers a dynamic and interactive experience with its variety of transitions and hover effects. The branding website is seamlessly integrated with the online store, and the company style is perfectly supported by the images and typography. Legwork Studio is behind the work.

Screenshot

Showcase Of Beautiful Fashion Websites

Below are some more examples of fashion websites. The websites were selected not because the brands are famous, but rather because they were attractive, their approach was creative and their interface uncluttered (though not every website necessarily exhibited all three characteristics).

Adidas Y-3
The website for this Y-3 spring and summer 2010 collection is hosted on Adidas’ corporate domain. The website features an innovative and sophisticated presentation of the products, implemented with the “live photos” effect. Designed by Sid Lee.

Screenshot

Burberry
Every item in Burberry’s apparel and accessories collections is presented in a unique way on the company’s website. Here, you can see the “live photo” effect, similar to the one implemented on Adidas’ website; Burberry does a twist on it, though, by adding 3-D rendering. The design agency, KOKOKAKA, aimed for interactivity and hit the target, wouldn’t you agree? The website also includes an HTML-based e-commerce platform, so it’s a good example of how HTML and Flash can be effectively combined.

Screenshot

Amanda Wakeley
A simple yet elegant website that serves as both an online store and a branding home for Amanda Wakeley. Design by Pod1.

Screenshot

Anja Gockel
The website of German fashion designer Anja Gockel has a clean and contemporary look. This is achieved mostly through high-quality photography, an uncluttered layout and clean typography. A special treat for fans: three desktop wallpapers available for free downloading, something rarely seen on fashion websites. Website design made by Macologne.

Screenshot

Jay Jays Dance/Off
Dance/Off is an online catalogue for the new line by youth fashion brand Jay Jays. Its highlight is the interactive video available for viewing in 3-D. Visitors can enjoy a dynamic dance show and then just click to freeze the action and explore the outfits. Creative agency Visual Jazz did a great job of creating the fun and engaging product presentation.

Screenshot

Diesel
This website looks quite normal for a company that has developed a habit lately of inviting everyone to “be stupid.” Perhaps taking up a good half of the main with a large cloud of images and adding some Italian content here and there might seem strange, but given its habit, Diesel can probably get away with being a bit… well, cuckoo in its design.

Screenshot

24 Teeth by Lacoste
This minimal and light design splendidly matches the style of the 24 Teeth footwear line by Lacoste.

Screenshot

Reserved
The website of Polish clothing brand Reserved has an atmospheric Flash-based design. The full-screen slideshow on the main page works great at inviting visitors to check out the latest collection. “Live photos” are used here, too, officially making this a trend. Some content is available only in Polish, even after you switch the language selector to English, similar to the Diesel website. Another trend? Hopefully not.

Screenshot

Walter Van Beirendonck
Now here’s a Belgian approach to fashion websites. The design relies heavily on boxed tables and red. The timeline section has some bugs; still, the website is worth checking out, if only for the illustrations. Designed by Emmy Mees.

Screenshot

Werkstette
Werkestette’s website is based on content. The simple and intuitive navigation enhances the impact of the large photos. The website was created by Pelle Martin and Felix Nielsen.

Screenshot

You
Simplicity and an intelligent use of colors make the website of Italian creative studio You a beauty.

Screenshot

Anti Sweden
Anti Sweden is the tribute of Norwegian design collective Anti to black metal, jeans and Norwegian identity. Remarkable graphic design and typography earned the Anti Sweden website a spot in this showcase.

Screenshot

Faith
The Faith clothing line is the brainchild of the Italian fashion designer Federica Sasella. Large photographs and cloth textures give the Faith website a pleasant look and feel. Designed by Effective Studio.

Screenshot

Daffy’s
Daffy operates a network of low-price clothing stores geared to varied consumers. Bright colors, big eye-catching pictures, transitions and easy navigation make for a comfortable experience of browsing for bargains.

Screenshot

Prada
This website focuses on imagery; the latest Prada collection is presented as an original mix of photos and illustrations. One nice feature is that most pages open in their own pop-up windows that can be moved around the screen, allowing visitors to compare products.

Screenshot

Josh Goot
On the website of Australian fashion designer Josh Goot, visitors can play with the fuzzy surreal background, which creates a nice visual effect as the mouse moves around the screen. The interactive full-screen mode for images lets you examine the outfits in details. Tick off the checkboxes for aesthetics and functionality.

Screenshot

Lasse Pedersen
This website is for hair and make-up artist Lasse Pedersen. The big pictures and typography are best viewed at full screen. Developed by Pelle Martin and Felix Nielsen.

Screenshot

Lisa Shahno
Moscow-based designer Lisa Shahno puts herself on the fashion map with these geometry-inspired designs. Her website accords with the style, too: the sparseness of the design complements the photographs and geometric logo well. Website designed by Kostya Sasquatch.

Screenshot

Moschino
On the splash page of Moschino’s website, you can choose between the main website, the official online store or the page for the current campaign. At first sight, the three sub-sites aren’t very visually consistent. But it doesn’t feel like a serious problem, maybe because the funny goose mascot creates a link between the sections. Made by Netway Italia.

Screenshot

Miss Sixty
The design for Miss Sixty’s website is bold and provocative, in no small part because of the abundance of red on the black background. The online store is slightly calmer.

Screenshot

Keds
“The Original Sneaker” celebrates its over 90-year history. The website is a treat for the typophile.

Screenshot

Cheap Monday
This well-known producer of street-style jeans, Cheap Monday, has an interesting history. You can learn all about it on the company’s website, which has a simple “bloggy” design that matches the underground values of the brand.

Screenshot

Under The Hood: Interviews With Two Developers

To get a better idea of what characterizes the process of designing a fashion website, I spoke with people at two design agencies that have relevant portfolios. One of them is the Swedish digital agency Nute, which developed a website for the fashion and art project Uniforms for the Dedicated. The other team is the Indian agency BC Web Wise, which designed a website for apparel creator Allen Solly.

I thank both teams for taking the time to do interviews for this article.

Uniforms for the Dedicated

Screenshot

Uniforms for the Dedicated (UftD) shows an innovative approach to fashion branding by combining men’s fashion, music, art and film. All of these and an online store are skillfully presented on UftD’s website, which was designed and developed by Nute Digital Agency. Like the fashion brand itself, the website is diverse and successfully combines HTML, Flash, JavaScript and an e-commerce platform into an enjoyable browsing experience.

Daniel Ruuth, creative Web developer at Nute, was kind enough to share details of the creation process for UftD’s website.

Question: What is involved in designing a website for a fashion brand?

Daniel: I think designing a website for a fashion brand is like designing a website for any other lifestyle product. The main thing is to display the products—the clothes in this case—well and in a context in which the viewer gets an overall feel for the product. A piece of clothing is so much more than a textile and a color: it’s a mood, a statement and an expression of the person wearing it.

We have a great connection with our client, and because of this we know how important the context, the feeling and the underlying story of each garment are. This is what we need to communicate to visitors. They need to be able to see themselves in the clothes. Besides this, of course, users want to be able to “get” the material, so close-ups and/or photographs that help you understand the motion of the garment are important.

Question: What goals did the client set for you?

Daniel: The website was combined with an art installation. The goal was to launch the website to keep the rings on the water moving. Along with that, we had the goal to increase website traffic by 40%, which we did.

Question: Could you give us a brief overview of the stages of creating the website?

Daniel: We had a start-up meeting with the clients to discuss this year’s campaign. At the meeting, we gathered key concepts and any ideas they had. After that, we start working on a presentation of our suggested approach; this is where we showed them the initial hand-drawn sketches (which were poorly detailed on purpose to keep the client from locking in on the details).

Screenshot
Some sketches from the original hand-drawn story board.

Daniel: That idea and those sketches got tossed around for a while before we got to the next point: the mock-up. Here, we did a simple mock-up (watch this concept test movie for the UftD website). Once that was completed, we did the final sketches, got them approved and then went about starting the actual production.

Question: What tools did you use? Particularly, what were your reasons for not using pure Flash, which seems to be the most popular platform for fashion websites?

Daniel: We put the idea first. The technique is not what’s important. If the idea must be realized with Flash, we’ll use Flash. If it can be solved with plain HTML, we’ll use HTML. If we need to work with Web cameras and streaming services, well, then we’ll use that. We try not to think of “how” right from the start, but rather of “what.” We have a great team here at Nute, so whatever idea we come up with, we usually have someone who can make it happen.

The tools we used in this production were AfterEffects, Photoshop, Flash and Coda. The online store implementation was built on the Magento e-commerce software.

Screenshot
The UftD online store is clean and elegant, creating a comfortable shopping experience.

The biggest part of the production was creating the movie/environment (see a screen dump of our AfterEffects project; quite a few layers).

Screenshot
Some of the frames from the movie for UftD’s latest campaign, 1020 Trickery Lane.

Question: What do you think makes this website a win?

Daniel: We strive to tell the user a story. Whether it’s a huge CMS-based company website or a campaign website like the one for UftD, there’s always a story to tell. In this case, it’s easier to see what I mean by “story,” because the website could actually be interpreted as a film, going from point A to point B. Our first concept was like a script for a movie.

What makes this website a win? Well, perhaps it’s a win because we are able to entertain users while they view all of these awesome garments by UftD in an exciting environment. But more importantly, I think this website is a win because it’s right where the audience is. This would not be a good website for a Donna Karen collection, but it’s a great website for a brand like UftD.

Question: What feedback have you gotten from the client and users about the website?

Daniel: The client is more than happy, and the online buzz for the website speaks for itself.

Allen Solly

Screenshot

Allen Solly is an apparel brand from India that offers mostly semi-formal and casual wear for men and women. The brand’s official website is based on Flash; eye-catching illustrations and an interactive 3-D environment convey well the spirit of the 2010 collection and engage the target audience. Unlike most fashion brand websites, Allen Solly’s has a contemporary and uncluttered design.

To learn more about the process of creating a website for Allen Solly, I got in touch with the agency responsible for the design, BC Web Wise. The founder, Chhaya Balachandran Aiyer, and the studio’s leading designer, Naim Shaikh, kindly agreed to answer my questions.

Question: What is involved in designing a website for a fashion brand?

Chhaya: Imagery is critical. The design has to showcase the fashion statement. It has been commonly implemented in print and on TV before. The idea is to extend this fashion statement to the Web, taking advantage of its interactive capabilities. I think we did it with the use of Papervision3D and bringing alive a 3-D rendition of the print campaign.

Question: What goals did the client set for you?

Chhaya: The message of Allen Solly’s latest release was as follows: “We’re bringing modern art to modern fashion, doing summer style like nobody else. Our new range of youthful work and casual wear lets you live life 3-D in a 2-D world.” Our goal was to create a Web presence that reflected this idea in the best way.

Naim: In short, the client’s brief sounded like this: “This is our new collection. Do your best with this.” We then got full freedom to do our creative work.

Question: What tools did you use? Particularly, why did you choose Flash, which seems to be the most popular platform for fashion websites?

Naim: Flash and Photoshop were used to make this website. Usability is very important to us. I feel that many fashion websites are too cluttered, with weak usability, and we tried to avoid this. For Allen Solly, along with the main Flash version, an alternative HTML website is available, which helps with search engine optimization and gives choice to visitors who don’t have Flash enabled.

The creative artwork done by Ogilvy for Allen Solly’s print campaign was very cool, with a 3-D effect and illustration style. We adapted it for online.

Screenshot
The illustrations on the Allen Solly website were initially designed for the print campaign of the same name, designed by Ogilvy & Mather Bangalore.

Question: What, in your opinion, makes this website a win? What feedback have you gotten from clients and the audience?

Chhaya: An intuitive front end and sleek execution. Honestly, everyone has simply loved it.

Naim: It was a very big project for us. It is very big for me on a personal level, too. The website has received the most positive response and has been featured in various design communities.

(al)

↑ Back to top

Julia May is a freelance writer now working with FlashMint, the top-class provider of Flash templates.

  1. 1

    Awesome article, thanks!

    I think it’s a great idea to interview designers, alongside with showcases. It’s always interesting to know who’s behind the good design and what’s the story of the particular website creation.

    0
  2. 4

    Very nice collection.. thanks for this article..

    -6
  3. 5

    Fashion site with e-commerce integration
    http://www.moimoibarcelona.com

    -2
  4. 6

    Nice collection. I prefer the Walter Van Beirendonck website. :D

    3
  5. 7

    Its interesting to see that most fashion website are based in Flash…..

    0
    • 8

      Unfortunately most of them do not work on mobile phones.

      0
      • 9

        I would highly doubt any of them care if they work on mobile.

        It’s all about “big”, “High-end” showcases in that world, not meant to be viewed on a phone.

        0
        • 10

          Actually I disagree. These Fashion people are EVENT fanatics and probably use their Mobile Devices (ipad, iphone) more than the average person. They don’t sit in offices or cafe’s… I believe the biggest reason they use flash is because they are dependent on making ‘ripples’ when it comes to marketing… if it doesn’t have sound or move, their audience is bored.

          1
        • 11

          It is easy enough to create an alternate mobile site that matches their branding. One more piece of marketing material isn’t going to phase them. :P

          0
  6. 12

    Interesting showcase. How about a showcase about different fashion blogs around the world?

    1
  7. 13

    just a glance at Pierre Cardin’s website and I was like…really? this is what smashing brings as an example? Then i read the whole paragraph…

    0
  8. 14

    looks like diesel’s is the only worthwhile of the bunch. Also it is terrifying to see million-dollaz income companies sporting ass-ugly sites (yes, mr. Cardin, I am talking about you!)

    0
  9. 15

    Zur mexx-Seite: Flash ist nicht gut, aber Heike Makatsch dafür um so mehr.

    0
  10. 16

    Should also take a look at http://www.etonshirts.com/

    0
  11. 17

    Love Diesel and Allen Selly :”) But I for sure didn’t expect Pierre Cardin’s website to be that awful. But again, maybe they don’t need to sell anything online or spread company image (because they’re too famous already) so they’re not that adamant about website design : ?

    0
  12. 18

    Thanks for the great post!
    You may want to include http://www.cover.dk and http://www.eurowoman.dk in the showcase.

    0
  13. 19

    Great collection. One more fashion site for this collection http://www.talbots.com/online/home_page.jsp

    0
  14. 20

    Funny because Louis Vuitton is absolutely the worst website coming from an ecommerce perspective.

    0
  15. 21

    That mexx boy is cute! wanna give him a hug :)

    0
  16. 22

    Nice selection here, the burbury site stands out to me as a great example of grid based design.

    0
  17. 23

    Hey, does anyone know a good automated generating traffic tool?

    1
  18. 24

    nice to see an indian site here! Allen Solly! yaayyy! CONGRATULATIONS!

    1
  19. 25

    Fashion websites are among the worst designed sites on earth (next to hotel websites). They use Flash (still) which you cannot see on an iPhone or iPad. They are difficult to navigate. It’s like they hired narcissistic web designers who care solely about displaying their “genius”. They load slowly, too. The interfaces are terrible! I have no idea who set the standard for this type of website because it’s everywhere.

    2
  20. 26

    Awesome article with so many great examples!

    Fashion is finally getting more into online marketing than ever before. Some upscale, luxury brands are still reluctant to delve into Fashion 2.0. But more and more and jumping in.

    For example, Hermès – I Love My Scarf has an awesome new website that integrates social media and video in an engaging, fun way. And, Gucci offers a cool e-commerce site with video and social media support. In fact, the fashion web is enamored with the short film to promote their brand online. It’s an exciting time for Fashion 2.0!

    0
  21. 27

    I am very happy to see work from india featured here. Allen solly is a very cool and unique website, 3 cheers for the team

    1
  22. 28

    Wow…it’s really interesting “I love fashion” and this very good work.

    0
  23. 29

    the diesel site has one of the most innovative videos i have ever seen. it is both unique and very use able.

    0
  24. 30

    As always.. .great

    0
  25. 31

    Congrats BC Web Wise!! Awesome work Naim Shaikh.

    2
  26. 32

    nice one, thanks

    -3
  27. 33

    nice concepts. I think the fashion brand I work needs updates a little.

    1
  28. 34

    Great collection

    0
  29. 35

    Nice collection…

    thanks
    shiva

    0
  30. 36

    You’ve made a great work! Thanks for so stunning showcase.

    0
  31. 37

    Great post. Interesting to see what the latest trends are. http://www.legavenue.com has a really nice mix of skins/themes going on for each collection.

    0
  32. 38

    Designing a “stunning” fashion website with no Flash is always a challenge because the fashion industry is very much about visual seduction. We’ve heard clients talk about fluidity and motion, and Flash seems to be the easiest way to achieve this. Then came the iPad and the CEOs got one and complaints start coming in on how come they can’t see their beautiful sites on the iPad.

    For one of our clients, Marina Rinaldi (http://marinarinaldi.com of MaxMara Fashion Group), we built a Flash site with XSLT layer in order to allow the client’s internal team to update the site via XML through their CMS. This was 2 years ago. Before iPad. It was a very happy coincidence that the Flash website rendered beautifully on the iPad. Yes, it may be a pain to code this way but the reward was well worth it.

    Next step will be HTML5, CSS3 and jQuery? I don’t know but it’s a challenge that should make the next generation fashion websites oh so exciting.

    p.s.: I’m not a developer. I’m just a creative who want better results for my clients. So don’t flog me for possibly using the incorrect technical statements.

    3
  33. 39

    Why isn’t the Wrangler Bluebell site on this list?
    http://www.wrangler-europe.com/en/bluebell

    1
  34. 41

    Julia is sooooooooooooo beautiful ;)

    2
  35. 42

    you’ve forgiven SIXPACK website, a really strange stuff

    -1
  36. 43

    UK kids fashion site with e-commerce integration http://www.noaddedsugar.com/ their look book is pretty cool too.

    0
  37. 44

    for fashion trends news and gossip there is also our blog : smokingdesigners.com

    0
  38. 45

    What a great article! Interesting to see where fashion blogs will head as well.

    LelaLondon.com

    0
  39. 46

    Great article but you guys forgot about truereligionbrandjeans.com and guess.com

    0
  40. 47

    Quote: “Some content is available only in Polish, even after you switch the language selector to English, similar to the Diesel website. Another trend? Hopefully not.”

    Unfortunately English-based sites have been doing this to the rest of the world for years. Looks like the rest of the world is just dishing it back : )

    But, since many of these sites are hard to navigate and seem to want to frustrate you, having parts of the text in a language you don’t speak seems to fit. After all, it’s all about marketing and the “feel”, not usability, right? Lawlz.

    0
  41. 48

    Hay una que es poco creible. Por mas buena que sea la composición fotográfica, el que estén Maradona y Pelé juntos jugando al metegol es practicamente imposible… jaja.

    0
  42. 49

    Again, so thorough and helpful.

    0
  43. 50

    Very nice article, am in really need for inspiration and reading this article help me much!.,
    Just need more time to click all those links =D
    like the louis Vitton! =)

    Thanks Julia May and Smashing Magazine

    0
  44. 51

    Thanks for sharing this post.I like this post.It has many good collections for designers.

    0
  45. 52

    Benson Mensah-Bonsu

    October 16, 2010 7:24 pm

    The Fashion industry is the most innovative when it comes to web design. There are no rules. My team a Sketchworks (http://www.sketchworkspro.com) are currently doing the unconventional with our ecommerce sites. Only major designers approve of sites like this. Check out my client’s site http://www.marcclark.com

    0
  46. 53

    I’m your fan really.
    I’m tellin’ you. :)

    0
  47. 54

    thanx for the great inspirations!!

    0
  48. 55

    So, is there another alternative to what t3-Technologies used to offer with the same cost-effectiveness?

    0
  49. 56

    I have noticed lately that quite a few fashion sites are using single scrollers across the products page to display a lot of products in one easy scroller – that is quite common now. Mix that with clean and minimal design and voila :)

    http://www.heretics.co.uk do it very well, with a usable slider too

    0
  50. 57

    Thanks for all your valuable labor on this website. Betty takes pleasure in going through research and it’s simple to grasp why. My partner and i hear all relating to the compelling mode you offer simple techniques through the blog and as well increase contribution from visitors about this subject matter then our simple princess is undoubtedly understanding a lot. Enjoy the rest of the year. You have been carrying out a superb job.

    -1
  51. 58

    very beautiful. and elegance

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top