Design Woop | The Web Design and Development Blog » Inspiration

Show me whatcha got! HTML 5 vs. Flash Showcase

Karen Myers — Wed, 21 Apr 2010 20:20:24 +0000

“HTML 5 vs. Flash” topic has been actively discussed in the global web dev circles lately. Apple devices don’t support Flash and this adds the fuel to the discussion fire. And while the advocates of the Open Standards are prophesying the near end of Flash, Adobe Flash fans are desperately defending their platform.

We decided to stay dispassionate and take a look at the current achievements of both platforms. In this post you can find a showcase of some well-designed websites that implement HTML 5 and Flash features at their best. This is by no means an attempt to put any of the platforms in a favorable light, but an endeavor to see what advantages each of them is actually able to deliver to the end-user at this stage.
Hopefully, the following collection will highlight the benefits of HTML 5 and Flash to you and give you some visual inspiration for your own projects as well.

Websites built with HTML 5

Eye Styles

Unique eyewear shop Eye Styles from Portland, Oregon shows wonderful rollover effects implemented by means of HTML 5.

Clearideaz

This is a personal portfolio of French designer Olivier Gorzalka. Very good markup can be observed on this site which is powered by WordPress, by the way.

Jamie Wright

By viewing the portfolio of the British web designer Jamie Wright in Google Chrome or Safari 4.0 you will be able to enjoy this vivid and colorful website to the fullest. The latest version of Firefox reveals the roughness of typography, while Opera breaks the text positioning altogether.

CatCubed

Unlike the previous website, Colin Fahrion’s HTML 5 powered personal blog feels best in Firefox 3.6 and Google Chrome.

Shannen Coslow

The portfolio of Pennsylvania-based designer Shannen Coslow is fully coded in HTML 5 and has an orderly structure and an beautiful, minimalist design.

Nathan Staines

The personal site of Starkers HTML5 theme developer Nathan Staines is simple and elegant. Besides a great implementing of HTML 5 markup it displays a stylish monochrome color-scheme with felicitous color inclusions.

Slim Kiwi

The site of the web studio Slim Kiwi has a unique and eye-catching design mostly due to the beautiful graphic elements used in it.

Go On Web

French web design agency Go On Web created its website with HTML 5 and used some lovely little interaction features.

Sheep in Disguise

Website of the web design and development studio Sheep in Disguise shows a neat layout and stylish typography, and of course, HTML 5 well using a number of the new structural elements.

New Zealand International Art Festival

Even though you can see some Flash components on this website, it still shows a solid implementation of new HTML standards and better browser accessibility might be a reason for the use of flash files here.

Cameron Chamberlain

In spite of being the most anticipated feature in HTML 5, video tag is still rare to see on live websites. Cameron Chamberlain’s personal site contains the new video element implemented using Video for Everybody.

Zoe Ann Baker

This website is clean and beautiful, big arrows pointing at post sections when you hover a mouse over menu categories are a nice touch.

We love 02 SCT

This website belongs to the community of graduate students of Jimei University (China), 2002 Computer Science and Technology.

Ella Design

This site shows a sleek use of HTML 5 and CSS 3, truly an eye-candy.

Narkoba

On Narkoba website you can find various audio samples, videos, snippets and other DJ music stuff. On a page Happy Love visitors can play with some audio and video elements which are quite fun despite being experimental. Thus, you can trigger audio loops directing the mouse at the white border rectangles and you can also launch video by typing “happy love” on the keyboard.

9elements.com Project

This is a sweet online experiment showing the great possibilities HTML 5 provides for audio & canvas. It loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen.

Flash Sites

Canvas

Canvas is a unique poster shopping website featuring an amazing user interaction process.

Burger King

Visitors of the Burger King website can literally customize it on the fly. Using three basic sliders you can control the subject area of the content to display. What a clever navigation solution!

PepperWorks

Website of the Polish media agency PepperWorks is done in an elegant, minimalist style. Great use of high-quality photos and fast loading provide a pleasant browsing experience.

Fynn

Another example of uncluttered and usable Flash website design.

magneticNorth

A creative navigation mechanism can be observed on magneticNorth website – a user can access the content drawing various shapes with the help of a mouse.

Simods Homes

Flash can work well for business and the site of the Australian construction company Simonds Homes proves this.

We Are All Fans

Flash can also be a good tool to render streaming content. This is well illustrated on the We Are All Fans website. Here portraits of selected Grammy-nominated artists are created in real time from social media content generated by fans across the web.

The Blues Maker

This is a funny Flash application you can use to compose your own blues song.

Converse

Converse online store is Flash-based, still the shopping process and website usability are on a very high level here.

Lego Click

Lego Click website contains information on art and creativity, mostly Lego-inspired.

Andreas Smetana

Website of the well-known photographer Anreas Smetana features an original navigation and full-screen photo galleries for the best visual impact.

Djeco

Website of the toy brand Djeco is a celebration of interactive design. Besides, it shows awesome illustrations and work with sound.

Plate Interactive

A good bunch of elegance and beauty in this one. After all, what else can be expected from a globally renowned interactive agency Plate?

F.One – Bandit 3 Most Wanted

Promo website of the kiteboarding brand F.One has a spectacular 3D designs and brings an excellent interaction experience to users. By the way, be sure to watch the video in the category Cinema – it’s a masterpiece indeed!

Adhemas Batista

The artworks of Adhemas Batista used to design his personal website are enough to give it a remarkable look.

As you might see, HTML 5 has a lot of wonderful features to offer and it’s surely worth anticipating. However, people declaring HTML 5 will kill Flash are grossly exaggerating. Why don’t we just try think more positively and assume that both Flash and HTML 5 will exist in harmony to the glory of the Web. After all, none of the platforms can be a solution to everything. Each of them is just a tool with a certain amount of capabilities and it’s up to you, dear designers and developers, to decide which tool will help to achieve the best results in your job.

Written exclusively for Design Woop by FlashMint, the top-class provider of flash templates and flash components.

Here are some related posts:

Thinking Outside the Box: Desirable Packaging Collection

Jared Thompson — Wed, 03 Mar 2010 12:12:02 +0000

Within graphic design there are several disciplines, within these one of the great ways to show uniqueness and style is in packaging design. Whether you become creative with; type, illustrations or the functionality of the packaging, you can really stamp your authority on a product. The packaging can often swing a consumers mind and make one product out-sell its competitors.

This roundup features several different types of products which all have unique packaging designs, all of which I find to be of the highest quality.

Chocolat Factory by Ruiz+

Death by Chocolate by Denise Frankle

Burgia Nen by Unidesign

Laurona Wine by Impossible

Lisa & Chad Wine by Meggan Cook

Prohibtion by Noah Love

Soy Manelle by Kian

Gotta Moo by Narani Kannan

Water Bobble by Karim Rashid

Palau Water by Tridimage

Works With Water by Elmwood

Vitamin Well by Neumeister

Rimi by Silver

Breakfast Smoothie by Heather Bradley

Infuzions by Parker Williams Design

Kat Von D ‘Saint + Sinner’ by Maesa Studio

Idea Paint by Jones

Here are some related posts:

Favourite Links 4

Stu Greenham — Mon, 01 Feb 2010 13:04:38 +0000

Week 4 is up and here are my favourite posts/links/freebies of the last 7 days. There are not much this week unfortunately I will make up for this next week!

jQuery Growl

Visit Source: http://labs.d-xp.com/growl/

Growl the popular software for Mac (and Windows now) has now been made into a neat little jQuery plugin allowing you to alert your users in the same manner the Growl software does.

Showcase of Buttons in Web Design

Visit Source: http://vandelaydesign.com

Vandelay Design posted this great article showcasing many button styles in web design. A great bookmark for inspiration when your struggling to come up with some of your own!

35 Beautiful E-Commerce Websites

Visit Source: http://www.smashingmagazine.com

Another showcase here this time E-Commerce websites. Smashing Magazine posted this beast displaying 35 beautiful E-Commerce websites. Another great bookmark!

60+ Free Clean, Simple Minimalist WordPress Themes

Visit Source: http://www.tripwiremagazine.com

Trip Wire posted this article showcasing 60+ free WordPress themes, mostly minimalistic in style. If your new to Web Design but want to start blogging etc then this is a great place to start looking for a sweet WordPress theme.

30+ PSD Files (Books, Notebooks, Magazines)

Visit Source: http://ledesigne.com

LeDesigned (A blog I recently started subscribing to as they are constantly pumping out great articles daily) posted this awesome article and a great resource containing 35+ PSD Books, Notebooks and Magazine files.

Superb Jquery CSS Image Effects and Tooltips Tutorials

Visit Source: http://www.designzzz.com

Designzzz pulled together this amazing post of jQuery plugin/effects. If your like me and always trying to find them cool plugins you’ve previously come across in the past but can’t remember where you saw them well this is one to bookmark!

20 Fonts Ideal for Big and Powerful Headings

Visit Source: http://webdesignledger.com

Another great post from Web Design Ledger to finish of the post! This post looks at 20 fonts that are ideal for big and powerful headings! Franchise and Nevis are my favourites!

Right thats it for this week, as I am off on holiday so got lots to do but next week I will have plenty for you!

Here are some other posts:

Guest Post: 50+ Beautiful Websites with Great Colour Schemes

Stu Greenham — Mon, 25 Jan 2010 11:58:53 +0000

Just a quick post guys! The guys over at Inspired Mag kindly asked me to write a guest post for their amazing website, which I did, titled 50+ Beautiful Websites with Great Colour Schemes and you can see the post here.

I am happy to say that several hours after the post went live it actually appeared on Digg’s homepage which is amazing! I would appreciate any help with the diggs / retweets / bumps / moo’s etc to help the post stay there.

Thanks again to Inspired Mag!

Here are some other posts:

Favourite Links 3

Stu Greenham — Mon, 18 Jan 2010 20:20:00 +0000

Time again for another round of fun and exciting links! We have free fonts, tutorials for image replacement, inspirational blog designs, comedy moustache mugs and a few more! If you have any you want featuring on next weeks roundup then let me know via Twitter (via @stugreenham).

Moustache Mugs!

Visit Source: http://www.peteribruegger.com

Safe to say this is on my next to buy list! I will no doubt be the coolest kid at work! Just need help deciding which one to go for?

20 Super Clean Fonts Perfect for Minimal Style Design

Visit Source: http://webdesignledger.com

Web Design Ledger posted this great article showcasing 20 great font’s that are especially good for minimalistic designs. Another great point to make is they are all free! Go Nuts…

Chomp iPhone App

Visit Source: http://chompapps.com

A new iPhone App that attempts to take on Apple’s app store genius feature. Called Chomp, it is based around giving you app recommendations based on the reviews you give other apps. Probably not the best explanation their but its free so give it a try!

Nine Techniques for CSS Image Replacement

Visit Source: http://css-tricks.com

Chris Coyier wrote this great tutorial article I came across looking at nine techniques for CSS Image Replacement. I myself was only aware of a couple of these so its good read for anyone who actively uses this technique to freshen up on possibly better methods of doing the same thing.

Better html anchor, a jquery script to slide the scrollbar

Visit Source: http://www.position-absolute.com

Great jQuery script that gives you a smooth page jump anchor effect replacing the standard jump to links. This is really cool and you will probably have seen in on various sites around, well now you can use it on your site too.

50 Most Amazing Beautiful Blog Designs

Visit Source: http://creativenerds.co.uk

Creative Nerds posted this article showcasing 50 inspirational blog designs. Some great sites here and one to keep on record when your looking for some inspiration yourself!

30 Gorgeous iPhone App Interfaces & Icons

Visit Source: http://iphone.appstorm.net

The Appstorm guys posted this article last week and for an aspiring future iPhone app developer (nice title indeed) its a keeper! The post looks at 30 apps all look amazing! Not only good for inspiration but there are some good apps I didn’t know about here so take a look!

Right thats it for this week but be sure to check back next week! Tweet me @stugreenham if you find any interesting articles that I can use or you think is interesting and I will take a look!

Here are some other posts:

Favourite Links 2

Stu Greenham — Sat, 09 Jan 2010 23:14:16 +0000

Right guys, continuing on from last week, here are some of my favourite links that I have seen in the last 7 days! Some crackers here and if you agree then help me out with a cheeky Tweet, Bump or Digg! You will find all the sharing links at the bottom of the post page. Heres my #2 set of links….

50 Beautiful Long Exposure Photos

Visit Source: http://www.pxleyes.com

Pxleyes have posted this amazing article showcasing 50 amazing photograph’s taken with a long exposure. As I am shortly heading of to get my first SLR today, I thought it was only right I included this post.

120 Tips, Tricks, and Tuts from 2009 Worth your Time

Visit Source: http://net.tutsplus.com

Nettuts+ published this mammoth of a post containing 120 tips, tricks and tutorials from last year. This is a great article and a fantastic resource!

Feet First

Visit Source: http://www.tomrobinsonphotography.com

Photographer Tom Robinson composed this great set of photo’s specifically of his and his partners feet whilst on travel. Sound’s odd, but every cool place they’ve been they have a shot and the gallery is immense! Soo jealous of where he has been!

100+ Seamless Patterns Great for Creating Website Backgrounds

Visit Source: http://webdesignledger.com

Web Design Ledger posted this article showcasing 100 seamless patterns great for creating website background. Some great resources here and a good bookmark to refer back to when need to find a good background.

40 Brilliant Type-Only Logo Designs

Visit Source: http://webdesignledger.com

Another one from Web Design Ledger, this time logo’s! A great set of type only logo designs and there are some really clever ones here! I think the branding one is amazing hence it been displayed below but take a look for yourself.

Tweexchange

Visit Source: http://tweexchange.com

This site looks interesting combining the hassle of having to search for both free Twitter usernames and free Domain Names into one nice search. Thinking of starting a project then this tool will become handy in helping you decide which domain to choose ensuring you can get the Twitter username too.

In-Field Labels jQuery Plugin

Visit Source: http://fuelyourcoding.com

Fuel Your Coding show you how to achieve inline form labels using jQuery. The link contains sample forms, including a tutorial of how to do it yourself and links to download the plugin.

Showcase Of Modern Navigation Design Trends

Visit Source: http://www.smashingmagazine.com

Smashing Magazine explore the latest navigation design trends in web design looking at many different styles with this article. A great source for inspiration and something I always struggle with so very handy for me!

Here are some related posts:

Favourite Links 1

Stu Greenham — Thu, 31 Dec 2009 13:34:12 +0000

I am going to start a set of weekly posts that will show you my favourite links I have found, been sent or have used myself at some point. Please, if you have time to take a few minutes to help spread my posts using the share links at the bottom of the page I would be very greatful! Right heres my #1 set of links….

New Growl Styles

Visit Source: http://fixedgear.ca

Christopher Lobay has posted two new notification styles for the popular Mac app Growl which can be downloaded for free.

10 Fresh Must Read Blogs For Creatives

Visit Source: http://www.inspiredm.com

InspiredMag have posted a great article showcasing 10 ‘Must Read’ blogs that are great for us ‘Creatives’. There are some great reads here and lots of useful resources worth bookmarking.

Exobotics

Visit Source: www.exopolis.com

A very clever site built in Flash that lets you build a robot (Cool I know) and then bust some moves with it to a nice dance beat. Give it a try, very cooly designed!

35 CSS-based Layouts that Look Awesome

Visit Source: http://net.tutsplus.com

Nettuts+ posted a article showcasing 35 awsum CSS based websites! Another great article to bookmark for inspiration at a later date. There is a whole range of differently styled sites here so something for everyone.

Outstanding Website Background Guide: 60+ Impressive Resources

Visit Source: http://www.noupe.com

Noupe’s article on Website Background’s offers tonnes of great links and resources for getting the perfect website background. There are plenty of Tutorials, Texture Packs and Links where you can get loads of free background tiles/images.

30 Website Navigations that Make You Wanna Click It

Visit Source: http://webdesignledger.com

Web Design Ledger (One of my favourite subscribed to websites) posted this awesome article showcasing 30 Websites with class Navigation menu’s. A great post and really good source of inspiration when building a design concept.

Hacked STOP Signs

Visit Source: http://www.urlesque.com

Great set of Stop Sign’s that have been modified and there are some funny ones! My favourite is “STOP! Hammertime!”.

Rio Ferdinand Online Magazine

Visit Source: http://www.rioferdinand.com

Not design related but a cool site anyways. Footballer Rio Ferdinand has started an online magazine which is a great read. He interviews different celebs each edition and covers alot of general stuff.

24 Ways: CSS Animations

Visit Source: http://24ways.org

Tim Van Damme posted this cool article on 24ways about CSS Animations, showing you how to create one yourself. A great read and this is definately going to be something that we will start to see more and more of.

7 Open Source And Free URL Shortener Scripts To Create Your Own

Visit Source: http://www.webresourcesdepot.com

Web Resource Depot posted this article reviewing 7 open source URL Shortener scripts that are all free. I went for Yourls myself but a handy link for anyone else wanting to get on the URL Shortening bandwagon :)

Here are some related posts:

20 Great CSS Design Showcase Websites for Inspiration

Stu Greenham — Mon, 07 Dec 2009 23:53:26 +0000

We’ve all had days where our creativity becomes non-existant and are in desperate need of some inspiration to get us kick started again. Fortunately for us we have a huge variety of choice when it comes to web showcasing which means inspiration is never to far away. Below are some of my favourites showcase bookmarks that I tent to turn to in those ‘desperate’ times.