52
WEBSTYLES WEBCANDY FROM THE UNDERGROUND

WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Embed Size (px)

Citation preview

Page 1: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

WEBSTYLESWEBCANDY FROM THE

UNDERGROUND

Page 2: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

GOTHIC ORGANIC STYLE

Page 3: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Organic: uses human forms, plant forms, organic shapes and textures as building blocks

Gothic: death rock, black clothing, self mutilating performance art, cadavers, decay, dark backgrounds

Page 4: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Guggenheim New York

Guggenheim Bilbao

Page 5: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Entropy8.com by Aurelia Harvey:webmuseum

.dk: http://wm.re-cph.com/39

Page 6: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE
Page 7: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Analogue Background Textures.

Foreground Images with Irregular Borders.

Transparent Animated Gifs.

Controlled Window Sizes.

Intentional Exploitation of Vertical Scrolling.

Page 8: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

GRID-BASED ICON STYLE

Page 9: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Respect for Bauhaus Design

Fetish for maps, charts and graphs

Exploit the limits of the web for fun and profit

Found objects

Page 11: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Melding Photography with Grid-Based Layouts.

Using Chartjunk as Design.

Page 12: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

LO-FI GRUNGE STYLE

Page 13: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Color bleeding

Smudges

Irregularities

Dirty

Pre-digital underground poster

Anti-Grid

Page 14: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Der kr ves QuickTime og ᄒ ᆰet TIFF (ukomprimeret)-komprimeringsv rkt j,ᄒ

for at man kan se dette billede.

Control skateboards, deck graphics 1998

By Miika Saksi http://www.sueellen.org

Page 15: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Mesoa by gamedesigner and webdesigner Jukka Merikantos, 1999 sampling and montage – inspiration: David Carson and 1990’ies magazines Emigre and Beach Culture.

Page 16: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Scanlines.

Brushes for Smudges.

Motion Within a Collage

Page 17: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

PAPER BAG STYLE

Page 18: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Cartoonish

Playful

Seemingly sloppy design

Colorless palette

Asymmetrical fonts

Scanned sketchbook drawings

Paperbag texture

Page 19: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE
Page 20: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

King Kipplehttp://funnygarbage.com

1996 Dada-aesthetics - newspaper cut up, sketches, gif animations and humor

Page 21: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Christopher and Matthew Pacetti:

/http://www.p2output.com

http://www.stereomedia.net/

Page 22: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Paper Bag Textures.

Intentional Misalignment and Sloppy Boundaries.

Judicious Color Usage.

The Nomadic Navigation Bar.

Page 23: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

MONDRIAN POSTER STYLE

Page 24: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Advantage of negative space

Bold blocks of color

Full screen

Minimalistic

Page 25: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Piet Mondrian, Compositions 1930

Page 26: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

http://www.bauhaus.de/

Page 27: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Joshua Davies: http://www.once-upon-a-forest.com/

About his colors: http://www.apple.com/pro/profiles/joshuadavis/

Der kr ves QuickTime og ᄒ ᆰet TIFF (ukomprimeret)-komprimeringsv rkt j,ᄒfor at man kan se dette billede.Der kr ves QuickTime og ᄒ ᆰet TIFF (ukomprimeret)-komprimeringsv rkt j,ᄒfor at man kan se dette billede.

Der kr ves QuickTime og ᄒ ᆰet TIFF (ukomprimeret)-komprimeringsv rkt j,ᄒfor at man kan se dette billede.Der kr ves QuickTime og ᄒ ᆰet TIFF (ukomprimeret)-komprimeringsv rkt j,ᄒfor at man kan se dette billede.

Page 28: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Holistic Browser Window Design.

The Frames Solution.

The Full-Screen Flash Solution.

The Fixed-Size Solution.

The Pop-Up Window Solution.

Navigation Integrated into Overall Page Design.

Intentional Color Palette.

Page 29: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

PIXELATED PUNK ROCK STYLE

Page 30: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Media aware webstyle

Off-putting

Disorientation

Annoying

User-unfriendly

Dada

Abstract

Surrealistic

Page 32: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Rogue Multimedia.

Full-Screen Control.

onmouseover Functions.

Big Old Ugly HTML Text.

Page 33: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

SUPERTINY SIMCITY STYLE

Page 34: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Pixel Picassos:

Low-res video game designers from the 1980’ies - darlings of the modern web design underground

Page 36: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Tiny Pixelated People, Buildings, and Objects.

Pixelated Fonts.

Extreme Compartmentalization.

Page 37: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

HTMininimaLism

Page 38: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Guru Jakob Nielsen

Beauty from the code

Effective communication

Clean, uncluttered look

Quick loading Gifs

No-nonsense attitude

Page 39: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

http://www.gettyimages.com

http://www.useit.com/ Jacob Nielsen

http://www.facebook.com/

http://www.apple.com/

Der kr ves QuickTime og ᄒ ᆰet TIFF (ukomprimeret)-komprimeringsv rkt j,ᄒ

for at man kan se dette billede.

Page 40: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

DRAFTING TABLE/TRANSFORMER STYLE

Page 41: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Bold conglomeration of 3D shapes floating in seminegative space.

Futuristic sci-fi look

Inspiration from instruction manuals and small print disclaimers

Cryptic navigation elements

Edgy and aggressive

Page 42: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Mike Young’s http://www.designgraphik.com/

Page 43: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE
Page 44: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Arkitekt Zaha Hadid

Page 45: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

3D Modeling Software. 3dsmaxOpen Source: Blender 2D til at skabe 3D: Auto-Illustrator

Tiny Illegible Type.

Page 46: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

1950s HELLO KITTY STYLE

Page 47: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Funky amalgam of Japanese comics, Swiss marionettes and 1950ies chrome metal campers

Amy Franceschini

3D bubble people

Surrealistic environment

Retro futuristic from the 1950ies

Page 48: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

FutureFarmers i 1950er Hello Kitty Style

Page 50: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Milkyelephant.com

Page 51: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Tiny 3D Bubble People/Large 3D Text.

Rounded, Organic Borders.

Pastel Palettes.

50s Fonts/50s Art

Page 52: WEBSTYLES WEBCANDY FROM THE UNDERGROUND. GOTHIC ORGANIC STYLE

Kilde:

Curt Cloninger: Fresh Styles for Web Designers. New Riders, 2001

http://lab404.com