Archive for the Web Design Category

Progressive Enhancement with Flash

pef

As promised, here’s the presentation from yesterday at RIApt AUG, on a 30 minutes talk about why you should care about Progressive Enhancement and how it can be applied to websites developed with the Flash platform.

The sample code (with SWFObject, SWFAddress and XSLT samples) is also available for download.

Update: As Marcos rightfully points out, the Slideshare link isn’t that “accessible”. So here’s a PDF or ODP for download.

Mr Strings

Fallon London and B-reel have worked together to relaunch the Cheesestrings brand, with a entertaining campaign site at mrstrings.co.uk.

mrstrings

The joyful playground invites kids to create their elastic and cheesy characters and place them in the Meadow, a world where one must find clues and avoid several traps. Beautiful illustrations along with well thought character physics will surely be delightful to the core audience, and the sounds reminded me of the also wonderful World Of Goo. Which is my way of saying that i love a well crafted kids website.

24ways.org, a web design advent calendar

During this month, some of the most established names in web design and development have been publishing a daily article at 24ways.org, keeping the tradition of previous years.

24ways

From Jeffrey Zeldman to Drew McLellan (not to be mistaken with Drew from Marketing Minute), the 24 articles are one of the best web design resources created this year, with solid tips from beginner to advanced for web professionals or just to impress your friends.

Highlights to the articles by Jason Santa Maria on Making Modular Layouts and a art direction beginner class by Mark Boulton. A edgeofmyseat.com production, it was edited by Drew McLellan and Brian Suda, with design by Made by Elephant.

Fly A Baloon – the browser as a theater

Head over to www.fly-a-balloon.be
Don’t resize your browser.
Watch what happens.

One of the best examples on how to use the browser and web technologies as a creative medium. Simple javascript effects and carefully synced video can do wonders for your interactive experiences.

Start Wearing Purple

Yahoo spreads some Gogol Bordello love to the web on their new website Start Wearing Purple.




http://startwearingpurple.yahoo.com/

The hotsite intends to celebrate not only Yahoo’s official color, but also “that unique, charmingly eccentric side of all of us“.  With some fun purple trivia, purple gadgets and a whole purple set of mind (whatever that is), the site does a great job on bringing back Yahoo’s culture, that has been in so bad shape lately, after the failed Microsoft deal.

One of the most interesting parts of the site are the videos prouced by agent Todd (of ImprovEverywhere and Frozen Grand Central fame). Several people were filmed in a Manhattan elevator, with a new performer getting on at each stop and singing Bordello’s “Start Wearing Purple”. I’ll leave you with the reactions:

Lapin Illustrations

Digital creativity isn’t always about the computer. The return of the Moleskine gave hand drawn communication a new home, with the web embracing this analog form of expression, from Google Chrome cartoons to SXSW SketchNotes.

One of my favorite evangelists of this new communion of web and drawing is Kevin Cornell. Besides his work for A List Apart, he has also some great sketchbooks. It’s not often you get to see these kind of works on the web, so it was nice to discover Lapin, a French art director with works for Heineken, Vueling and several magazines.

His impressive city sketchbooks, beautiful pencil and watercolor illustrations, are an unordinary departure from the usual holiday photo album.

Go check this week’s selected website: Les illustrations de lapin

If you’re interested in visual note taking, i recommend Drawing on the right side of the brain or Rapid Viz. Other books i haven’t read but also highly recommended are Understanding Comics or the more recent Back of The Napkin

10 Web Design Galleries you should know about

For those times you need a visual brainstorm:

  • The FWA

    (Favourite Website Awards)

    theFWA
    Awarding sites since 2000, it’s probably the most famous web design gallery of them all. Created by Rob Ford, it features the ribbon-famous SOTD (Site of the Day), Site of the Month, People’s Choice Award and the most coveted Site Of The Year. It is now a full feature web publication, with interviews, articles and even a video channel at FWATheater.

  • CSS Mania

    CSS Mania
    Probably the biggest CSS web gallery, with over 11000 entries. Tip: if you’re looking for references on a particular industry, just browse the topics.

  • DarkEye

  • Dark Eye
    With impressive metadata features, we can search at Dark-i by color or keyword. If you’re a web designer, you’re encouraged to create a gallery and promote your work.

  • NetDiver

    Netdiver
    More a webzine than a gallery, but covering trend categories such as Flashware, Imaginative or Powagirrrls.

  • StyleGala

    SyleGala
    It used to have the best selection of all CSS galleries, but now it’s rarely updated. Nonetheless, you can find there all the CSS classics, from Jason SantaMaria to Marius Roosendal.

  • Best Web Gallery

    Best Web Gallery
    Maybe not the best, but it sure is one of the most crafted ones, with a quite useful thumbnail preview on each selected website, and comments on each entry.

  • Design Charts

    Design Charts
    Not truly a gallery, and not always about webdesign, but always with the hottest new work

  • Webcreme

    Web Creme
    Covering both CSS and Flash web design, it’s one of my favourites, thanks to the the clean layout and RSS with thumbnails.

  • Straightline

    Straightline
    The new kid on the block, from Japan

  • Daily Slurp

    dailyslurp.jpg
    The companion gallery to Design Meltdown, a blog discussing themes and trends on webdesign. Both websites are managed by Patrick McNeil that has just published his new book, The Web Designer’s Idea Book.

Gringo.nu kicks some semantic ass !

My favorite Brazilian agency revamped their website with some (not) serious shit, on a fullscreen video where we’re all invited to teach and learn vocabulary. It’s like a speed course on swear words, that are collaboratively shared amongst the visitors.

Gringo.nu (entry)

Gringo.nu (works)

The thing gets really nasty, so get your camera ready and help Gringo to grow their vocabulary. If you understand Portuguese, they also have a blog, with some interesting behind-the-scenes stories.

Gringo.nu (blog)

They really get their audience, not being afraid to push the language, even on a semi-corporate website (they were probably expecting some nsfw uses of the video experience). And most important of all is their overall message: it’s ok to fail.

Jaeger-LeCoultre Reverso

Swiss company Jaeger-LeCoultre showcases their 75 luxury watches limited edition on a new website for La Reverso Gyrotourbillon 2.

Jaeger-LeCoultre

Nothing really outstanding, but it’s a first for me posting a website on luxury items (maybe i just can’t afford this kind of stuff !? ). They did however a really nice work on the video, with an almost documentary film on the second part of the site, with the watchmakers history since Anthony LeCoultre and the manufacturing process, directed by Thibault Castan. And they got the embeddable video right (via DailyMotion), which you know, i find ridiculously obvious. Check below:

A work by DDB Paris.