网页设计――七大必备类型

读者: 782    发布时间: 2007

原文: Web Design-isms 7 Surefire Styles that Work

If you are a web designer, these 7 design movements haunt you. It‘s a love/hate relationship. You think to yourself, “I want to create something that‘s never been done before,” but you feel spellbound because you know “what works.” Unfortunately, you also know that “what works” has been done a million times before. No matter how hard you and other creative-types strive to do something new, history has created a set of “classic” styles that basically remain the same, save some minor updating.

Take the world of fashion for example. Fashion is in one minute and out the next because we get bored of looking at the same things day after day. The same pattern will occur in web design. However, just as there are mainstays of good fashion, such as the little back dress, there are also mainstays of good web design. Every site may not fit into each of the categories exactly and some may be combinations of styles, but you‘ll get the idea.

1. Collagism – Make it un-perfect.

The inspiration behind the collage is to create something new out of old pieces. The collage style in web design consists of elements such as paper, tape and grungy or dirty textures. Drips, sprays, splatters and coffee stains are also hallmarks of the collage. This style has a sense of tangibility and is a counterpoint to the geometrically clean perfection that computers naturally exude. You’ve seen this style on everything from snowboarding sites, church sites and even network sites. The trick to this style is to break outside of the grid. Use background images to make things look ‘askew.’ Even though your text may have to be straight, you can trick the eye with background images that are not straight. This creates a sense of movement with organization.

Artists who inspire: USSR Posters on Flickr, Max Ernst, Peter Blake and Hannah Hoch

1.1 Collagist Art Example:

Pablo Picasso

1.2 Collagist Web Examples:

DotComedy

KC Revolution

Knoxville.org

2. Ornamentalism – Interior decorating.

Ornamental design can be similar to the collage, but the essence of the ‘fleur de lis’ and Art Nouveau ornamentation separate this style from the rest. It is often seen on the web in background patterns or framing elements. Ornamental design is inspired by architecture, where ornaments are applied as decorative accents from stone, wood, precious metals or plaster. The easiest way to incorporate this movement is through a monochromatic damask background pattern which is subtle yet dramatic.

Artists who inspire: Gustav Klimt, Alfons Mucha, Mikhail Eisenstein and Hector Guimard

2.1 Ornamentalism Art Example:

Alponse Mucha

2.2 Ornamentalism Web Examples:

Dara's Garden

Resist Today

.cubeclub-chemnitz.de/

3. Glossism – Reflective, isn’t it?

This is the most popular style on the web today. You’ve seen it everywhere; it best embodies the phrase ‘Web 2.0’ when referring to design. It includes gradients with jewel-tone colors that are so shiny you just want to lick your monitor. Reflections, gradients and glossy buttons are fundamental for this web design movement. This style is here to stay even though a lot of people are already sick of looking at it. It creates a sense of cleanliness and easily guides the user through an interface that also include bold jelly colors, sun burst shapes, badges, rounded corners and talk bubbles.

3.1 Glossism Art Example:

Dale Chihuly

3.2 Glossism Web Examples:

Friends Eat

Bacardi DJ

Big File Box

koko3

4. Wordism – Words Become Art.

This movement is inspired heavily by the print world and is predominantly seen as the digital counterpart of traditional magazines in e-zines. Its characteristics use an overall grid-like layout and powerful typography in lieu of decorations or design elements. The typography itself becomes a visual stimulant, making it almost unnecessary to add other photographs, illustrations or decoration. Inspiration for Wordism can be found in the poster artists of WWI and WWII, who used illustrations combined with bold typography. Modern graffiti art could relate to this movement as well.

Artists that inspire: Robert Indiana, Adolphe Muron Cassandre, and International Posters

4.1 Wordism Art Example:

World War II Poster Art

4.2 Wordism Web Examples:

Presidentielles

http://www.jrvelasco.com/

Ux Magazine

People

5. Futurism — Think Like a Trekkie.

This was one of the first design movements on the web, but it’s not often used today. In the future I could see this making a comeback — not in exactly the same way but with a new twist. This style is translated through geometric shapes such as computer circuits, motherboards and mechanical gears. In essence, this movement is a reflection of technology and what we might envision the future to be like.

Artists who inspire:deviantArt , Joe Pogan and Chris Foss

5.1 Futurism Art Example:

Donald Davis

5.2 Futurism Web Examples:

Xmen

WA007

Michelin Man /Forward

6. Minimalism – Less is More.

The minimalist movement was a response to the abuse our senses took from early web pages when busy backgrounds, blink tags and rainbow colored text were the norm. "Minimalism" is a term coined by the art and literature circles to describe a movement toward extreme simplification of form and color. Minimalism, as it relates to web design, focuses on usability, aesthetics and letting the content be the star. This kind of design doesn’t have to be boring. In fact, proper use of white space gives a site a level of sophistication that is often missing from sites that have every little space crammed with something.

Artists who inspire: Artcyclopedia, Frank Stella and Ellsworth Kelly

6.1 Minimalism Art Example:

LG Williams

6.2 Minimalism Web Examples:

The Big Noob

RikCat

Dotkraft

Store.Vorsat

7. Retroism — A Blast from the Past.

Retro design can draw from anything in the past, such as the illustrative look of the 50’s, the flower power of the 60’s, disco of the 70’s or even the cool pop art of the 80’s. Mainstream styles and graphics of these eras were restricted by the limitations of the technology of the day. Retroism takes advantage of the iconic looks that these limitations created. The VW Beetle is the perfect example — compare the 1961 Beetle to the new convertible of the 2000’s. When using this style it’s a good idea not to over do it. There can be too much of a good thing.

Artists who inspire: iso50, Crazy Labels and Bastard Graphics

7.1 Retroism design Example:

VW Beetle 1961

VW New Beetle

7.2 Retroism Web Examples:

Elton Tom

Sottocosto Ska

Lana Landis

Fake French

Design may evolve, but the basics remain the same.

The world collectively shifts its visual thinking of what’s considered “in.” You see this collective thinking in everything from the colors we use to paint our walls to the shapes of fashion that adorn our bodies. Even though things are always evolving, basic movements will remain the same. So the next time you’re looking for inspiration, just go back to the basics and add your own twist. The 7 design-isms listed above are not the only design movements of the web; many have yet to be defined or even discovered. These design-isms may very well be the little black dress of web design — everyone uses them because they work — but with a little creativity it’s still possible to make them your own.

译文: 网页设计――七大必备类型

如果你的一名网页设计,你会遇到7种必须遇到的设计类型。这会给你一种又爱又恨的感觉。你对自己说:“我一定要创意出以前从未有过的新的类型作品,”可是你却又非常不自觉地沉迷在使用曾经被反反复复使用过无数次的方法。无论你多么努力,也无论用那些创造性的方法试图去创造新的东西,过去已经创造出了一系列经典的类型,而这些经典的类型基本上都很相同,只是进行了一些小小的改进。

就拿时尚来说。时尚每分钟都在改变,因为人们厌倦了每天都看着一样的事物。同理,这样的想法也会发生在网页设计行业。就像在时尚界有许多主流的经典设计,比如小黑裙,网页设计中也有很多主流的设计。每种设计都不可能完全适合每个种类,有一些是很多种类的组合。

 

1.抽象拼贴派-不完美中的完美
抽象拼贴的灵感来自利用旧物创意新的事物。网页设计中的抽象拼贴包含许多元素,比如纸,纸带,破旧的布料。还有一些东西的上面被滴到或者溅到了一些污渍,咖啡渍,这些都是抽象拼贴派的特点。这个派别给人一种实在感,而这种实在感与用电脑制作出来的干净完美的感觉形成了鲜明的对比。你可以在包括滑雪板,教堂,互联网在内的许多地方找到这样的设计。这一设计的秘诀就是它超越了传统设计的界限。利用背景图像来使旧的东西看起来很新。比如你的课本被弄脏了,这个方法可以使你的课本看起来并不脏。这种方法是多种方法的一个组合。
设计师:USSR Posters on Flickr, Max Ernst, Peter BlakeHannah Hoch

1.1抽象拼贴派作品:
Pablo Picasso


1.2 抽象拼贴派网页作品:
DotComedy
KC Revolution

Knoxville.org


2.装饰派-内部装潢
装饰设计跟抽象拼贴很相似,然而作品“fleur de lis”和Art Nouveau将二者区分开来。这种设计可以在网页的背景或者框架中找到。装饰设计的灵感来自建筑。从古时候开始,装饰设计就出现在石块,木头,珍贵的金属或者灰泥上。最简单地去体现装饰设计的方法就是将一块单一色调的缎布稍做装饰,使它看上去很生动。
设计师:Gustav Klimt, Alfons Mucha, Mikhail Eisenstein 和 Hector Guimard

 

2.1 装饰设计派作品:
Alponse Mucha

2.2 装饰设计派网页作品:
Dara's Garden
Resist Today
.cubeclub-chemnitz.de/
3.闪亮派-一种反射的效果,不是吗?

这种类型的设计是当前网页设计中最为流行的一种。到处都是,它充分展现了“Web 2.0”的设计。上面有成梯度形宝石一样闪闪发光的色彩,让你不自觉地要去触摸你的显示屏。反射,颜色梯度,和发光的按钮是这种网页设计的主要组成元素。这种网页设计类型如今依然广泛存在,尽管许多人已经看厌了这种设计。这种设计通过界面上面包含许多宝石一样的色彩,阳光形状的光线以及象徽章,圆角,气泡状的效果,给用户一种干净,轻松得到指导的感觉。

3.1闪亮派作品:
Dale Chihuly
3.2闪亮派网页作品:
Friends Eat
Bacardi DJ
Big File Box
 koko3

4.文字派-文字艺术
这个方法的灵感来自于印刷界。在E时代,这种手法经常出现在传统杂志中,其特点是布局全部运用网格状字体和印刷体,从而取代了装饰或者设计元素。印刷字本身成为了焦点,不必要添加任何的图标,照片或者装饰。世界大战期间的海报设计者就在海报上运用粗体印刷字进行图解。当代涂鸦艺术也同样涉及这种方法。
设计师:Robert Indiana, Adolphe Muron Cassandre, 和International Posters


4.1 文字派作品:
World War II Poster Art

4.2文字派网页作品
Presidentielles
http://www.jrvelasco.com/
Ux Magazine
People

5.未来派-尽情想象
这是网络中最先出现的一个方法,但并不常见。总有一天这种方法一定会复兴,不是按照原有的方法,而是有所创新。这种方法通过象计算机电路,主板,机械齿轮等各种几何形状进行变换,是技术水平的展现,也是我们所期望的。
设计师:deviantArt , Joe PoganChris Foss
5.1 未来派作品:
Donald Davis
5.2 未来派网页作品:

Xmen
WA007
Michelin Man /Forward

 

6. 极简派-简单至上
极简派主要是针对早期网页混乱的背景,闪烁的标签和五彩缤纷的颜色。极简派这个术语充满着艺术和文学的色彩。极简派崇尚极度简单的形式和颜色。极简主义主要应用于网页设计,它强调实用性,美观性,注重内容。这样的设计并不单调。相反事实上,合理的使用这样的方法使我们看到一个干净的页面,而不是网页的每个角落都堆满了内容。
设计师:Artcyclopedia, Frank Stella 和 Ellsworth Kelly


6.1 极简派作品:


LG Williams
6.2极简派网页作品:

The Big Noob
RikCat
Dotkraft
Store.Vorsat

7. 复古派-昨日重现

复古派设计的题材可以从过去的任何事物中搜集,比如对50年代的回顾,60年代的和平与爱情,70年代的迪斯科,甚至80年代的波普艺术。由于技术水平有限,那些时代的主要作品和图解都不是很完善。复古派正是利用了这些被限制了的事物。汽车甲克虫就是最好的例子。将1961年生产的甲克虫和现在的甲克虫进行对比。这样的方法,再好不过了。
设计师:iso50, Crazy Labels Bastard Graphics

7.1 复古派设计作品:
VW Beetle 1961
VW New Beetle
7.2 复古派网页设计作品:
Elton Tom
Sottocosto Ska
Lana Landis
Fake French


设计可以更新,但是基本要素是相同的。

世界不断变换。你可以看到不断变换的事物,从墙壁的颜色到引领时尚的服装。尽管事物都在不停的变换,所有这一切的基础却是相同的。所以下次你需要妙计的时候,只要回归基本要素,再加上自己的一点小灵感就可以了。以上7点并不完全,许多东西还需要我们去探索,发现。这些设计类型很好地体现在作品小黑裙上。这些方法每个人都在运用着,因为它们真的很实用。但是如果没有一点创造力,也绝不可能创作出自己的作品。