首页

9个免费的响应式网页设计模板

蓝蓝

随着PC端、平板、智能手机等终端的发展,设备环境(系统平台、屏幕尺寸、屏幕分辨率等)更加复杂,网页展示需要考虑到各个终端的具体差异。

因此,响应式网页设计受到了大家的推崇。通过文中的9个免费的响应式网页设计模板,希望能帮大家了解这种技术以及提高工作效率。

1、TXT

这个模板有一个主页页面以及一个博客页面。可分为一列或两列,你可以根据自己的意愿进行设定。侧边栏的个数也可以自己自由设定。(演示 | 下载

1-TXT

 

2、VERTI

一个基于HTML5和CSS3的模板。可以分列,同时提供博客和主页的模板。(演示 | 下载

Verti

20个引人注目的3D Flash网页设计

蓝蓝

20个引人注目的3D-Flash网页设计

如果我说要给你看一个3D flash网站,那么你脑海中想到的第一个关键字会是神马呢?酷!炫!亮瞎?是的,这些似乎已经约定俗成成了flash网站的夸奖词。Flash可以用于web页面组件的设计,同时也能开发互联网应用。Flash设计可以看作一种艺术形式,由于它具有其惊人的设计及动画表现。除了坑爹的网速会诟病外,但它本身绝对是让人无法抗拒的。那么今天就让我们来欣赏20个引人注目的3D Flash网页设计

1. 2Brand:

2Brand

2. Coca Cola:


Coca Cola

 

10大创意教你玩转网站背景设计

蓝蓝

如何选择一种最恰当的网页背景是网站设计中最常见的问题之一。 通常网站设计者都已准备好网站内容,而且版面布局大多也基本敲定。但背景要么是令人厌烦,要么是让人眼花缭乱,让设计者迟迟不能确定。

今天,我们将介绍几个实际网站来启发你的灵感,看看如何设计趣味而又令人感兴趣的网页背景。收藏本文,当你再次阅读时,你定会被某一个背景设计所迷恋。

1. 素描设计

这种设计在几年前就变得比较流行,而且一直持续到现在。这灵感来源于在笔记本上的涂鸦乱画,就像你十几岁时在英文课上所作的那样。每一部分都是些粗糙的素描表现,页面看似是非常随意的创意集合,而它们都以不同的旋转方式散布在页面各处。NotchStudio就是很好地应用了这种创意,并且以非常柔缓的方式表现出来。

1

即使你本人不善长绘画,这种创意也是相当容易实现的,是因为这些涂鸦通常都是些非常基本的设计。如果拥有一部Wacom或iPad平板电脑,你就可以相当容易地描绘出你自己的图片或者某种意义上能够反映此类风格的书写文本。还有很多免费字体如Pointy,可以帮你不费吹灰之力就可实现让人赞不绝口的素描。

2. 精细文稿设计风格

纸张的质地纹理总能激起设计者的激情,而且为所有年龄所适用。目前这种创意已不像几年前那样风靡,但是它还是会带给你一种非常微妙的效果:如果你没有看到它,那会让你非常地想念。

你注意到Beautiful Type所用的纹理设计,它既没有偏离主题也没有过分夸张,而是将一个原本看起来就很好的网站更是锦上添花。

低调内涵:20个优雅网页背景纹理欣赏

蓝蓝

合理运用素材,利用纹理绘制精美绝伦的网页背景。

Read the full post

尽管极简设计和扁平化不提倡使用纹理。但是设计无绝对,很多情况下,纹理的质感,能让整个网页提升好几个层次。

纹理能够营造一种复古氛围。本文收录了20个网站,全部在纹理运用上颇有心得,可以看看他们的设计细节。

赶紧整理整理你所下载的资源包,动手实验一个吧!

相关推荐:
《9月优设笔刷+纹理+字体+界面组件干货大集合》
《超赞!上千套华丽丽的点、线、面纹理大集合》
《10大创意教你玩转网站背景设计》

Orchard Keepers

Orchard Keepers

 

Postable

Postable

35套扁平化风格网页设计UI组件和图标

蓝蓝

扁平化设计是指舍弃渐变、阴影、高光等拟物化的视觉效果,从而打造出一种看上去更加平面的界面设计风格。扁平化的网页设计更适合用于需要同时支持多种屏幕尺寸的响应式设计技术中。今天,我给大家带来35套用于扁平化设计图标设计网页设计元素,记得分享和推荐啊!

Flat Free UI Kit

Flat Icons and Web Elements for UI Design-26

我要下载

Apple devices – Flat icons (PSD)

Flat Icons and Web Elements for UI Design-1

我要下载

Mobile Flagships with PSD

Flat Icons and Web Elements for UI Design-2

30个漂亮的全屏大背景网页设计

蓝蓝

 

近些年来,图片作为背景填充整个屏幕的设计越来越流行,曾经只有时尚潮流网站或者摄影类站点才会特别依赖富有冲击力的影像,但是现在几乎任何类型的网站都有可能采用这种大图片作为背景。不论是印刷精美的杂志、海报还是广告,大图片一直以来都能强有力地抓住人们的注意力,因此将类似的方法应用在网站设计中就显得别有趣味。

以下30个网站均采用了大图片作为背景的设计风格,希望能给大家带来不一样的设计灵感!

Aspect Photography

View the full website

Studio AIRPORT

View the full website

Yoke

View the full website

 

 

40个漂亮的单页网站设计欣赏

蓝蓝

最初单页面网站的设计风潮可能是由知名的网站设计师引起的。他们想要以简洁创意的方式让自己的作品公之于众。久而久之,单页面网站设计在创意上实现了巨大的飞跃。不管是时尚,App,还是动画,游戏,现在全网都盛行这一趋势。
单页面网站设计容易实现,但是如果想让你的设计成为大热,一定要确保它适合这种多页少字的设计模式。在你开始设计之前,最好要记得专注于主要内容,其他的烦恼分心的部分通通去掉,就算是你最好的点子,如果不切合主题,也要忍痛割爱。

网站导航是主要设计要素之一。用放大镜效果创建漩涡型按键,使站点引人入胜,同时也告诉用户如何使用。导航要显眼易懂这样用户才能轻松的浏览你的网站。不管是视差漩涡,服帖的动画还是简洁的菜单,你都能发现非常酷的效果。

下面我们为大家展示40种极具现代感,将单页网站设计发挥到的非常漂亮的例子。尽情的欣赏吧,希望会给你带来灵感!这些设计让人难以忘却,引人瞩目的图像绚丽多彩,内容干净整洁,实乃创意经典之作。

Fannabee

one-page-website-fannabee

Browser Awareness Day


one-page-website-fun

20款免费和创新的PSD网页设计模板

蓝蓝

 

如果你是一名设计师,经常都需要ui设计网站设计,如果有现成的 PSD 网页设计模板可以使用的话,您可以快速的制作出精美的网站作品。 所以,这篇文章专门整理了20款免费的 PSD 网页模板设计,你可以免费下载这些网站布局模板进行编辑和修改,也可以通过这些免费的网页 PSD 模板获取创作灵感。

 

Showcase – A Free Website PSD Template

Showcase - A Free Website PSD Template

———————————————————————————————————————————————————

Business Website Template Design

Business Website Template Design

———————————————————————————————————————————————————

网页设计中背景的创意风格与设计趋势

蓝蓝

正确的背景风格可以为整个网站确定基调。我们搜集了一批使用大幅图像、明亮颜色或出众图案来作为背景的
优秀网站,希望从中探寻当下网站的流行设计风格。

什么样的背景最适合你的网站,这并没有一定之规,但确实有一些共同的要素:
互联网背景的内容应该有目的性。
背景应该与你的品牌风格一致。
背景之上的文字内容应该易于阅读(无论是颜色、反差还是尺寸大小。) 背景的主题在整个网站内应该连贯一致。
背景应该能很快下载并且不会让你的网站变得缓慢甚至卡死。
现在的流行趋势是什么?

就像服装和发型会变,网页设计的风格也在变。对于背景来说,趋势的变化尤其突出。
目前,大量的网站在首屏采用了大图。一些背景是清晰、写实的(如照片和插图),而另一些则可能是抽象隐晦的。大尺寸的、虚化或模糊的图也随处可见。

网页设计中优化图片的6大技巧

蓝蓝

网页设计中优化图片的6大技巧

@南辰_designer  平面设计和网页设计是两个截然不同的领域,这两个领域有不同的设计需求、设计实践和设计方法。

例如,在网页设计中更常使用基于像素或栅格的文件格式,诸如JPG、GIF或PNG。相反,在平面设计领域像logo这样的图形可能会用到不同尺寸,因此使用最多的格式则是EPS和AI这样的矢量格式。然而,用于网页的矢量格式,如SVG或HTML5 Canvas则不能广泛应用,也不会被所有浏览器所支持。

另外,用于web端的图形有基于它们自身的相关处理方式。其中一条便是你要时刻注意文件的大小,因为你需要使你的网页加载越快越好。作为一名网页设计师,你应当尽量减少HTTP对图像的请求次数——无论通过减少图片的使用数量还是将它们整合成CSS sprite——以及确保你选择了正确的图像格式,使其在图像大小和质量间得以平衡。

Photoshop是平面设计师和网页设计师使用的行业标准工具。以下是你在创建web端使用图像时的一些简单的小技巧。

1. 将图片保存成Web所用格式

在网页设计中,你必须确保你的图像大小越小越好。当然,当你想要图片完好显示时可以抛弃这条原则。
在Photoshop中创建图像的完美方法便是平衡质量与文件大小。
网页设计师经常犯的一个错误便是使用“另存为”命令,而不是使用“存储为Web所用格式”。

2702d5d227fdbb0be2cd35ac6a37f76f 网页设计师必须知道的6个小技巧

“存储为Web所用格式”可以将图像保存成基于网页设计优化过的格式,包括图像质量、图像分辨率、浏览器兼容性和文件大小。

这一命令会有一个对话框,你可以用来微调你的图像。当你调整图像的设置时,它会显示出文件的大小和图像的质量。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档