前端观察 » 趋势

66个网页设计中完美的幻灯展示实例

神飞 — Wed, 10 Feb 2010 16:35:37 +0000

中文原文：66个网页设计中完美的幻灯展示实例
译自：66 Examples of Perfect SlideShow Presentation in Web Design
请尊重版权，转载请注明出处，多谢！

我最近注意到的一个非常有趣的趋势是在幻灯演示中展现关键信息。现代设计师喜欢尝试并观察用户如何与作品进行交互。尽管幻灯并不是一个普遍的趋势但是依然作为新的设计风格而不断涌现，而且越来越多的设计师注意到它并在他们的作品中使用，这种新的趋势开始崭露头角。

在本文中，你将发现各种高度创意的、漂亮的、独特的、以及最有灵感的幻灯效果设计。当然我们这里并不是要你跟随某种趋势，而是希望能够激发你的创意并启发你的想象力以创建你自己的独特的设计，因为你的网站(作品)代表你自己和你的品牌。

网页设计中的幻灯展示

事实上有很多在网站中使用幻灯和图片切换的理由，网站成功的关键因素之一是找到一种最聪明和有效的展示你的信息给用户的方法。之前，幻灯在企业网站的首页非常流行，因为它对于展示企业的信息和服务非常有用，但是现在它已经广泛的用于所有类型的网站了。鉴于它们对于网站的价值，幻灯通常被放在页面中最醒目的位置，这样可以给访问者的非常有冲击力的第一印象。

你或许也注意到，幻灯对于作品集网站也非常流行，因为用幻灯的方式展示你的作品显得非常有意义和有吸引力。

01. Kontoblick

02. Slidedeck

03. Mint

04. Apple

05. Boulevard

06. Delicious

07. Woothemes

08. Osdnetwork

09. Launchmind

10. Areyoufrank

11. Utah-maps

12. Nealite

13. Delugestudios

14. Sketchen

15. Sprinklepenny

16. Hellothemes

17. Hootsuite

18. Designsensory

19. Sling

20. Nclud

21. Icebrrg

22. Edit-studios

23. Ricoverdeo

24. Robalan

25. Xero

26. Pixelnovel

27. Violet

28. Notepod

29. Wufoo

30. Cakephp

31. Gapmedics

32. Tearoundapp

33. Bensky

34. Directdesign

35. Thrudigital

36. Threadless

37. Nosotroshq

38. Epicurious

39. Dailymile

40. Copimaj

41. Hyperxlocal

42. Behance

43. Getmiro

44. Glue.be

45. Valendesigns

46. Foodtease

47. Ncover

48. Tracermedia

49. Viget

50. Barackobama

51. Getzcope

52. Brooklynfare

53. Rapidxhtml

54. Saintjohnsbible

55. Foodnetwork

56. Expressionengine

57. Paramoreredd

58. Radiumlabs

59. Zunostudios

60. Creamscoop

61. Jameslaicreative

62. Vyniknite

63. Freeagentcentral

64. Fastcompany

65. Osmondinteractive

66. Nameourbaby

网站设计趋势: iPhones

神飞 — Sun, 20 Sep 2009 06:29:48 +0000

原文：网站设计趋势: iPhones
译自：Web Design Trends: iPhones
版权所有，转载请注明来源，多谢！

众所周知当前(甚至接下来的几年)最酷的东西是iPhone。不仅仅是因为iPhone看起来不错，它们在网站方面也很不错。而且，更重要的是，很多公司和团队为iPhone开发了很多很有用或有趣的App，当然iPhone的用户也会对他们的网站很感兴趣。事实上，针对iPhone的网站设计已经成为了另外一个趋势，虽然它的针对性不是那么广泛……

iPhone GUI PSD

首先给大家推荐一下Teehan+Lax的iPhone GUI PSD 文件，它包含了iPhone以及你制作你的iPhone界面时所需的所有元素。非常方便，PSD 格式。

使用iPhone的网站设计展示

Tea Round App

First & 20

Classics

June Cloud

Zumobi

Graphik

dBelement

Firetask

Tweetie

Bottle Rocket Apps

Snow Reports

WordPress

Paraply

Voxtopia

Mock Draft

Cellar

Satisfaction Remote

Bird Feed

Tapbots

Pokeseo

有人开发了中文版的iPhone应用，或者开发iPhone App的网站吗？如果有的话，提交给我们吧，让大家一起欣赏学习……

网页设计潮流之2009:路在何方?

神飞 — Wed, 02 Sep 2009 10:25:09 +0000

原文：网页设计潮流之2009:路在何方?
Translate From: webtoolkit4.me
版权所有，转载请注明出处，多谢！

大图片、大标题、素描/涂鸦、大自然和滑动。当然也有一些其它的“潮流”，不过我认为这些元素在现在的网页设计中使用的最多，并且在明年也会同样被推崇。本文中，我整理了一些前面提到的5种类型的网站。

使用大标题的网站设计

使用大图片的网站设计

受大自然启发的网站设计

使用素描/插画的网站设计

使用滑动效果的网站

就这些了。你认为如何？你认为哪些趋势更加流行而本文中没有提到的？

网站设计趋势：绿色和可再生网站设计

神飞 — Wed, 17 Jun 2009 02:29:49 +0000

原文:网站设计趋势：绿色和可再生网站
译自:Web Design Trends: Green & Renewable Websites
版权所有，转载请注明出处，多谢！

最近可再生、新鲜、有机、绿色等词语被使用的相当多，而且越来越多的品牌和企业加入到了‘绿色’的大篷车(这当然是件好事情了)。

这些关键词让我自然而然的联想到了相关的网站。用正确的色系，使用大自然的元素比如草地和树木，添加一些精细的纸张背景以及使用手绘图形或文字，你也可以设计一个清新的‘绿色’ 网站。

1. Jiri Tvrdek

2. Organic Supermarket

3. Sprout Box

4. Recycle Now

5. Ecoki

6. Green Globe Ideas

7. Green Web Awards

8. Edenbee

9. Silverback

10. Carbonica

11. Red Brick Health

12. Mint

13. Osvaldas Valutis

14. Opera Mage

15. Glocal Ventures

16. enviRenew

17. Plant With Purpose

18. Bikevasion

19. 53 Mondays

20. Envira Media

网站设计趋势：水平条

神飞 — Wed, 20 May 2009 09:48:49 +0000

过去几年，在网站设计中使用水平条已经成为一个不断增长的趋势，现在，这已经成为一种典型的网站布局了。使用水平条不仅仅能为每个页面区域提供特定的容器，也可以穿越用户的屏幕。这在考虑到特大的屏幕的用户是非常有用，它可以预防主要内容丢失在单调颜色的汪洋大海之中。

水平条可以是单色的，但是通常会使用渐变色彩或阴影效果，这样看起来会更加柔和和成熟，处理的好还能给人很醒目的感觉。

AndrewBradshaw.com

Thuiven.com

TonyGeer.com

MailChimp.com

CampaignMonitor.com

LifeTreeCreative.com

StyleDivision.net

EthixStudios.com

MediaTemple.net

TasteTrend.com

MacaMontreal.com

ESOrganizers.com

UzairUsman.om

Nitobi.com

Emiralo.com

Everywun.com

AsanteDev.com

RobertMarriott.com

WPUnlimited.com

JunoWebdesign.com

TechnoPhobia.com

RightBanners.com

Ekklesia360.com

Branded07.com

TwiggleGraphics.com

OnWired.com

ClearMediaWebsites.co.uk

SureFireMedia.com

WakeInteractive.com

FlingMedia.com

Deaxon.com

DesignChuchi.com

译自：line25
原文：网站设计趋势：水平条
版权所有，转载请注明出处，多谢！

网站设计趋势：插画角色

神飞 — Thu, 07 May 2009 15:29:51 +0000

译自：leemunroe.com
原文：网站设计趋势：插画角色
版权所有，转载请注明出处，多谢！

插画角色现在是一个非常流行的设计趋势，就像我在我写给Six Revisions的文章中所总结的那样: 5种令人印象深刻的头部设计（中文在这里）。它们给你的网站添加一些有趣的角色和一种友善的感觉。

这里列出来我最喜爱的插画角色网站。

Silverback App

Mail Chimp

Fatburgr

Cyclops

Old Loft

Branded 07

The Alamo Basement

Freelance Switch

Veerle

Ellis Lab

Project Vino

Ryan O’Rourke

Schneeballschl8

Candy Cult

Spinen

在网站设计中使用白色：技巧和趋势

神飞 — Sat, 25 Apr 2009 17:01:26 +0000

Translate From:use-of-white-in-web-design-tips-and-trends
原文：在网站设计中使用白色：技巧和趋势
版权所有，专注请注明出处，多谢。

当你想到白色的时候，你的脑海中会出现什么？白色是最简单、优雅、平和的色彩。在网页设计中使用白色常见于很多博客、在线作品集、电子商务和其它类型的网站中。白颜色也主要用于字体颜色、背景色、链接颜色、图片及更多地方。尽管如此，如果你认为白色系网站对用户没有吸引力，那就大错特错了，你会震惊的……网上的一些最棒的网站用的是白色。本文中，你会发现灵感和使用白色设计网站的技巧。

简约漂亮的网站

简约的网站看起来是很赏心悦目的。当你使用白色创建白色的背景色的网站的时候，让它保持整洁。美丽将会不言而喻的。看一些使用白色作为背景色的大公司网站，比如flickr, iStockphoto, Makeuseof, Apple。下面的网站大都是极简的，但是它们展示了如果使用白色来呈现内容和一个网站自身的潜力。

Buffalo-Web Design & E-commerce

Jeff Doe

Rustin Jessen

Sushi & Robots

Qindex Web Design Magazine

使用白色的插画

手绘设计、插画、卡通人物和破旧风格的设计是最新的网站设计趋势。网页设计师和图形设计师通过此类插画和艺术品来展示他们的创意。这里有个说法来夸耀白色：当画家开始绘图时画布是白色的，或者说插画师绘制一个角色的时候，他们是从一张白纸开始的。最终出来的是美丽的。白色是所有漂亮的东西的基础。下面的网站展示了创造性的使用白色卡通角色和手绘艺术的效果。

Things That Are Brown

使用白色加亮其它颜色

你可能认为简单朴素的网站就像彩色的网站一样令人兴奋，不过你可能错了。请注意，白色可以让其它任何浅颜色和亮颜色呈现出其深度、明度和饱和度，那些颜色比如红色、蓝色、浅绿色、粉色以及其它亮色会看起来比较专注和舒适。因此，如果你计划在链接、菜单和按钮里面混合其它颜色，请慎重，不要搞的看起来很乱。这里是一些网站，它们让白色和其它颜色搭配的很和谐，而且看起来比较有吸引力。

Tim Jarvis- A Base Reference

Hello Lucky

总结

这里简单总结一下使用白色设计网站时的一些简单的技巧：

为链接使用浅色或亮色
尝试将其保持尽可能的小
让内容易于领会
不要乱放广告，如果你一定要放广告，请不要使用不同的背景色。
不要使用小字体
创意为王！

网站设计趋势：设计师的自画像

神飞 — Thu, 16 Apr 2009 15:40:09 +0000

今天我们为大家推荐的设计趋势是：设计师的自画像。通过浏览大量的网站设计，你可能也看到了一个又一个设计师的插画化的自画像，它们都是那么的与众不同，那么很令人惊叹，而最重要的是，每个自画像都折射出了设计师的个性。

话说，这是神飞注意很久的一个设计趋势了，相信每个人都想搞一个自画像放到个人博客上显摆一下或作为头像吧，那么，就参考一下这些优秀的设计，自己搞一个吧……当然，如果你有好的设计，请与我们分享。
本文列出其中一部分自画像，查看全部，请访问www.creativeopera.com/

David Arazim

Maximilian Bartel

Michael Baumrucker

Marc Grabanski

Li Chin Low

网站设计趋势：立体盒子

神飞 — Mon, 13 Apr 2009 07:49:23 +0000

这是一个正在逐渐流行的创意的趋势。事实上它非常容易实现，只需要增加了一个额外的元素和独特的设计。

让我们看一下该如何实现立体盒子的效果吧，然后，我们将会给大家展示一些很好的例子。

准备

先准备好你的页面和图片，我们使用这张图片：

我们简单的将HTML写成这样:

1
2
3

<div id="container">
	<img id="logo" src="logo.png" alt="Lee Munroe"  />
</div>

CSS样式可能会是这个样子的:

body{background:#999;}
 
#container{
	width:960px;
	background:#fff;
	margin:20px auto;
	padding:10px;
}

下面是一个效果预览：

设置为相对定位

当我们定位logo的时候，我们希望它的位置是相对于容器的，因此使用相对定位：

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
}

将它定位到盒子的外面

现在你需要做的就仅仅是定位logo，将其水平定位，让它从容器中突出出来。

#logo{
position:absolute;
left:-15px;
}

现在，我们就可以看到，logo已经显示在盒子之外了。

15使用立体盒子的创意网站欣赏

Change in Command

Icon Designer

Yoast

Twiistup

The Design Superhero

Eric Ryan Anderson

Rock Werchter

Freelance Suite

Hipsterist

CreamScoop

Bright Kite

From The Couch

DesignM.ag

Matt Mullenweg

网站设计趋势:极光和繁星

神飞 — Thu, 12 Feb 2009 02:24:00 +0000

或许这个趋势是在Apple Leopard OSX系统发布之后才开始流行起来的，它(OSX)是一个很棒的极光/繁星设计的代表。在你的网站的背景或头部添加这样的简单的效果可以让一个黑色调网站活跃起来，起到画龙点睛的作用……

下面是20个使用这种效果的网站展示：

1. 45royale

2. Skylar Anderson

3. Dale Anthony

4. Elite by Design

5. Fernando Sergio

6. Dorian Castro

7. 365 Days of Astronomy

8. Studio 7 Designs

9. Exceptional

10. Abduzeedo

11. Oakes Design

12. Brian Wilkins

13. Kitfolio

14. Rawkes

15. Evan Eckard

16. You Love Us

17. RJ Designz

18. Revyver Labs

19. Mail Chimp

20. Tennessee Winter

英文原文:http://www.leemunroe.com/web-design-stars-aurora/
翻译原文:http://www.qianduan.net/?p=4898