With Flash you can do more than just displaying videos. You can create stunning visual experience and offer your visitors incredible user interaction. Although Flash is definitely not the favourite medium for usability and accessibility advocates, it has its advantages and it empowers the Web with functionalities which make it an incredibly interactive medium. With Flash designers can achieve results which simply aren’t possible with (X)HTML and CSS.
The results can be creative, impressive, beautiful and fascinating. Under two conditions: 1) if designers find the right mixture between graphics, animation, video and sound and 2) if designers follow the guidelines of usability and user interaction.
However, since there is a number of things that can go wrong in Flash, it’s easy to get it wrong. In fact, there are thousands of examples where it is the case. In Flash any experiments with navigation and layouts are possible and in most cases it’s extremely hard to find a creative yet intuitive approach. Flash is commonly used by designers, agencies, advertisers and interactive web sites, and not on the sites where simplicity and quick access to information are important.
In this post we present 65 examples of outstanding Flash designs with excellent use of graphics, visual elements, interface design and graphics motion. This showcase (mostly) presents “pure” web designs; we’ve tried to avoid Flash-based games and advertising.
Mistake #1: Use Of Flash To Imitate (X)HTML/CSS Link
Flash shouldn’t be used if the designer tries to imitate (X)HTML/CSS-presentation. Long texts shouldn’t be embedded in Flash movies, because it’s harder (if possible at all) to work with the embedded text once you need to. Cubamoon1 is a perfect example of how this is done wrongly. The completeness of the design is enviable, its beauty irresistible, Flash-effects are stunning. However it’s really hard to work with the content of the site. Visitors can’t open links in new windows and the text can’t be selected and copied.
Flash’s strength lies in its ability to showcase unusual visual solutions, including graphic motion, videos and sound. Make use of them if you really want to achieve a stunning visual design, instead of imitating “conventional” web-presentation.
Mistake #2: Navigation Is Unintuitive Link
Whatever decisions developers make for the design of their navigation menus, the result has to fulfill three significant requirements: it has to be intuitive, easy-to-use and work properly. Whether the design is Flash-based or not is not that important.
The navigation is possible with the wheel which needs to be dragged. That looks easy, but it isn’t. Where is the grey zone between usability and creativity?
Using too creative approaches designers risk to confuse or even disturb visitors. The freedom for experiments with Flash may lead to unusual solutions which aren’t necessarily understood by all visitors.
Therefore designing in Flash never assume that the navigation can be arbitrarily complex and that visitors will take time to explore it. Users don’t like to wait. And if they don’t understand how the site works they leave. This is simple. And may cost you your money and your efforts. Be willing to compromise. Use creative approaches, but always take your visitors into consideration.
Mistake #3: Pop-Ups Are Still Used Link
That’s just wrong. Flash designers need to understand that pop-ups shouldn’t be used any longer. Almost every browser blocks opening windows. Tricks and convincing arguments don’t help any more. Use the screen size your visitors use. In most cases you don’t need more.
What is your favorite?
3D-Experience, Video-Effects Link
Visiting the agency’s web-site you actually visit their agency. Clean images, great use of video features.
Video motion, Multimedia, Navigation. Tell your visitors your story. Excellent portfolio site. Excellent use of Flash.
Open up the containers to navigate. Beautiful.
Impressive visual experience.
Would you like a guided tour through this building?
Outstanding effects with videos and camera lenses.
Listen to what the suitcase says.
OK, this is a shop. But what is happening here, the models are interacting.
Flip the book to navigate. Impressive 3D-effects.
Visual Elements Link
Learn how to make a good first impression.
Crazy, interactive, unusual – creative!
Clean and interactive presentation at its best.
The portfolio is presented as a box of chocolates; every item can be picked, previewed and added to the lightbox for later.
Follow the infinite red line (click on the screen first).
An agency’s web-site doesn’t have to be boring. These guys seem to be hilarious.
Portfolio designed as a… bus.
Excellent photography and visual elements.
The dropping down heaven. Every block is a single drop-down menu.
The Funnel Design Group. A classic.
Clean, Clear and Simple Link
Calm, peaceful, beautiful.
Silent, but so clean and elegant.
Calm and so beautiful. 3D-interaction in the Chromazone universe.
Minimalistic and beautiful, a portfolio.
User Interface, Navigation Link
Navigation with colored stickers.
Tremendous graphic design, and beautiful navigation – flashy!
d’strict uses some kind of a bubble-lupe as site’s primary navigation. To navigate you have to drag the bubble upon the layout. And no, the design is based neither upon grids nor upon columns. Explore.
A circular navigation.
Click on the ribbon and it flashes right to you preloading the content you’d like to see.
Drag & Drop navigation
So beautiful, so elegant, so clean and interactive.
What could it be? Well, this is an image gallery. Unusual navigation – you need to be really desperate about your navigation to come up with this method.
Where is the navigation? On the right side at the top of the layout. To browse through categories you need to “switch a channel” like you would do it in your radio set. Nice idea from Switzerland.
Moon Palace offers a quite imaginative navigation.
Pick the category from a set of discs. Interesting navigation, and also beautiful.
Yammat: Navigation with elastic bands.
Another interesting concept by Limbus from France.
Beautiful navigation and interesting presentation. And we really love big typography.
…we also love lemons by the way.
Kashiwa Sato loves color palettes. Do your eyes too?
This damn pencil can make you nervous.
OK, this is scary. And not beautiful. But the use of visual elements on Marilyn Manson’s official web-site is… well, unusual.
Self-portrait of a quite different art.
Pixel-based Flash design created with the attention to smallest details. Unfortunately, there are sometimes too many pixels. Flash keeps the pixels alive – nice approach.
He doesn’t exist. Monoface’s face shuffle. We simply couldn’t resist.
Mohamed Yosry uses Flash in his own way. Not stunning, but unusual.
Kimm Saatveldt presents his portfolio in a rather unusual way. Place the mouse in the middle of the page to navigate.
HBO Voyeur. A classic you really need to have seen — at least once in your life.
Why not? Web-site as a newspaper.
Flash design from the 90s. Old, but still impressive. This text editor software is actually still in use.
- 1 http://www.cubamoon.com/
- 2 http://www.cubamoon.com/
- 3 http://www.selftitled.ca/
- 4 http://www.kurtstallaert.be/
- 5 http://www.cafesonique.com/launch/flash.php
- 6 http://agencynet.com/
- 7 http://okaydave.com/
- 8 http://www.designsul.pt/
- 9 http://www.pixelgasoline.com/
- 10 http://www.bkinteractive.com/
- 11 http://www.hungrysuitcase.com/
- 12 https://www.cicatriz.se/
- 13 http://www.sectionseven.com
- 14 http://www.wmteam.com/
- 15 http://www.ownyourc.com/
- 16 http://www.piotrowskimichal.com/
- 17 http://www.janholoubek.com/
- 18 http://zoomquilt.org/
- 19 http://www.aksident.be/
- 20 http://www.oddodesign.com/
- 21 http://prismgirl.org/
- 22 http://www.koalition.com/
- 23 http://www.brantt.be/
- 24 http://www.jonathanyuen.com
- 25 http://ff0000.com/
- 26 http://www.chromazone-imaging.co.uk
- 27 http://www.sonjamueller.org/
- 28 http://www.thibaud.be/
- 29 http://www.javierferrervidal.com/
- 30 http://www.dstrict.com/
- 31 http://www.a-i.tw/root.html?lang=en#pos=17
- 32 http://www.swoo.ca/
- 33 http://www.filippasmedhagensund.com/
- 34 http://www.enjoygreenergrass.com
- 35 http://www.brantt.be/
- 36 http://www.petepenicka.ch/
- 37 http://www.moonpalace.fr/
- 38 http://www.yammat.com/
- 39 http://www.limbus.fr/
- 40 http://www.thomasedison.org/
- 41 http://www.citrus7.com.br/
- 42 http://kashiwasato.com/
- 43 http://www.leoburnett.ca/
- 44 http://www.marilynmanson.com/
- 45 http://www.hmtmx.com/
- 46 http://www.mediamonks.com/
- 47 http://www.mono-1.com/monoface/main.html
- 48 http://yosry.com/flash/
- 49 http://www.kimm.no/
- 50 http://www.conceptm.nl
- 51 http://www.wordperhect.net/
Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.