网页设计 & 灵感 » 圆形元素在网页设计中的最佳实践

圆形元素在网页设计中的最佳实践

发表于: 网页设计 & 灵感. 评论
Sponsor

在几何图形中,我觉得圆形是最漂亮而又耐看的图形,所以将圆形元素应用在网页设计上也很不错哦,以前我们设计网页大多都是使用方形、直角,使用用圆形比较少,但现在CSS3的出现,使用圆角、正圆都是很简单的事情。

今天设计达人网为大家分享26个使用圆形元素的网页设计作品欣赏,通过下面的例子,你可以参考他们如何使用圆形元素来完成交互和内容展示等等。

总结下网页设计中使用圆形元素的特征:

  • Logo、菜单、主内容、icon图标使用圆形
  • 风格统一(你可以细致到文字也是带一点圆的)
  • 可以在圆形元素上创作,让它更加有动感

使用圆形元素的网页设计作品欣赏

Rendez Vous

Rendez Vous是一个时尚的餐厅网站,使用大背景的网页设计,其中有3个主要的圆形元素的展示内容。

使用圆形元素网页设计欣赏Rendez Vous

Zervice

Zervice网站展示的内容使用圆形,菜单、云也使用了圆形元素,风格十分统一,再利用视差效果来实现交互,使网站除了好看之外还变得更有动感。

使用圆形元素网页设计欣赏Zervice

Circulo da Comunicacao Digital

Circulo da Comunicacao Digital 网站十分简洁,中间直接一个大大的圆形来展示主内容,但这个圆形是经过美化的哦!

使用圆形元素网页设计欣赏Circulo da Comunicacao Digital

Rezon

使用圆形元素网页设计欣赏Rezon

Ayre Hotels

使用圆形元素网页设计欣赏Ayre Hotels

Kikk Festival

使用圆形元素网页设计欣赏Kikk Festival

Jet Peppers

使用圆形元素网页设计欣赏Jet Peppers

CVUT

使用圆形元素网页设计欣赏CVUT

Like there is no tomorrow

使用圆形元素网页设计欣赏Like there is no tomorrow

Ousback

使用圆形元素网页设计欣赏Ousback

Fannabee

使用圆形元素网页设计欣赏Fannabee

Wooddecker

使用圆形元素网页设计欣赏Wooddecker

Janko at warp speed

使用圆形元素网页设计欣赏Janko at warp speed

Fabrizio del Gaudio

使用圆形元素网页设计欣赏Fabrizio del Gaudio

Das Pinke Zimmer

使用圆形元素网页设计欣赏Das Pinke Zimmer

Ripcord Graphics

使用圆形元素网页设计欣赏Ripcord Graphics

Stedesign

内容、菜单、LOGO都使用了圆形元素,风格统一

使用圆形元素网页设计欣赏Stedesign

Five Tailors

风格统一是很重要的,很多网页设计师都没注意这一点,下面Five Tailors网站也是使用圆形元素来设计,Logo、作品展示以及网页小图标都是圆的,另外这网站的背景也很好看啊。

使用圆形元素网页设计欣赏Five Tailors

Soap Media

其实不一定要使用正圆,像下面这个网站它使用了手绘风格的圆形,看上去很Q很好看

使用圆形元素网页设计欣赏Soap Media

Wildlife

我们也可以在圆形上发挥下想像力,让它变得更有活力

使用圆形元素网页设计欣赏Wildlife

Sergio Pedercini

不同大小,不同色彩的圆形元素组合出来的网页作品,原来是那么的漂亮。作品十分细致,连文字也使用了圆形。

使用圆形元素网页设计欣赏Sergio Pedercini

Andefined

鼠标移到网页的圆形元素上产生交互

使用圆形元素网页设计欣赏Andefined

Duotones

使用圆形元素网页设计欣赏Duotones

London Calling

使用圆形元素网页设计欣赏London Calling

We love code

看来很多设计师喜欢用圆形来展示作品集

使用圆形元素网页设计欣赏We love code

Ideematic

使用圆形元素网页设计欣赏Ideematic

最后最后

可以看出,网页设计中很多元素可以用圆形来代替,而且出来的效果很非常漂亮,接下来你的下个项目也会使用圆形吗?欢迎在下面留言处跟大家讲讲你的想法。

via: http://designmodo.com/circular-web-design/

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }