首页

应该如何驾驭黑色?请看这20个强大的黑色系网站

蓝蓝设计的小编

瞧吧!现在到处都是明亮的设计照亮我们的屏幕,有时甚至亮瞎到我们的眼睛!大伙应该都感同身受,接近节日或者年底的时候,以红色为主色调的设计稿常常可以让我们看到昏厥,还有那些色彩斑斓的促销专题。

那么今天,我们要好好和大家来推荐一些低调内涵的网站,而这些设计者们也正采取了与热闹相反的路线:但他们依然创造了强大的网站,通过黑暗柔和的色彩!这些设计有一种诱人的存在,它们用黑白捕捉人的记忆情感。

这篇文章我们倾力推荐了20多个美丽的黑色系网站,微妙的色调和戏剧性的黑白图像一定会让你陷入这一场低调奢华的视觉盛宴里,来尝尝吧:)

另外也希望大家带着问题去欣赏这些网站,这些设计师是如何把黑色设计的更有国际范?如果是你来,布局、素材、辅助色又会怎么选用呢?

我们也为您准备了其他色系的优秀文章,推荐您也有空一起来看看哟。
《配色秘要:奢华低调有内涵的米黄色》
《超赞!网页设计色彩剖析之瞩目红(附百枚网页案例)》
《浅谈色彩学:以红色为主的色彩配色》

 

MoreSleep

MoreSleep

Apple Mac Pro

Apple Mac Pro

Rook

超赞!25例交互体验极佳的网页设计

蓝蓝设计的小编

25 Modern Web / Interactive Websites Design Examples

本文介绍的案例均使用了的HTML/CSS 以及 JS 技术,从视差滚动到响应式设计,实现了良好的交互性,为用户提供更好的浏览体验。我们来快速阅览一下吧。

推荐阅读:
《网页设计新趋势!25例出众的响应式导航设计》
《让网站更生动!那些在网页中完美运用视频元素的案例》
《不要落伍!来和小伙伴一起学习响应式网页设计》

 

Melbourne Remote Control Tourist

的远程旅游体验,这个概念不错吧!

Melbourne Remote Control Tourist

Melbourne Remote Control Tourist

20个优秀的国外扁平化网页设计作品

蓝蓝设计的小编

扁平化设计为印刷品、网页和移动操作系统的设计带来了新的变化。扁平化设计最核心的地方就是放弃一切装饰效果,诸如阴影,透视,纹理,渐变等能做出3D效果的元素一概不用。所有元素的边界都干净利落,没有任何羽化,渐变,或者阴影。

更少的按钮和选项使得界面干净整齐,使用起来格外方便。可以将信息和事物的工作方式更加简单直接的展示出来,减少认知障碍的产生。越来越多的公司正在效仿,比如下面这些:

 

Who Wanna

10.flat websites

Very-Make


18.flat websites

23个最具影响力的网页设计博客

蓝蓝设计的小编

花了大量时间在网上搜集行业里高质量网页设计的博客,不过话说回来,高质量可信的资源确实挺稀缺的。

 

CSS-Tricks

CSS-Tricks是Chris Coyier公众博客,专门讲一些有关CSS的话题。不过近几年来,CSS-Tricks有了下面一些扩展:

Chris和Dave Rupert一起创造了ShopTalk 播客,在里面可以讨论所以有关网页设计和开发的事情。
Chris 出过几本书,做了一个 Lynda.com的Wordpress主题课程,并且他还创建了一个The Lodge的课程教人们学习如何制作一个颇具现代感的网站。
超多很酷的项目,像 CodePen,HTML-Ipsum, Quotes on Design 。Chris真是个超有想法的人。

csstricks-web-design-blog-top-blogs-follow

CSS-Tricks 是 Chris Coyier 2007年建立的,总部在美国怀俄明州的密尔沃基,至今网站月页面访问量达270万。

网站亮点(这个网站的独特之处是什么?):

名人效应——Chris Coyier 是这么网站的精神领袖,他的个人风格贯穿于项目始终,是众多设计师的楷模。向他学习,同他一同去冒险吧!

关注App设计!20个漂亮的扁平风格移动端界面

蓝蓝设计的小编

现在扁平化风格在网页设计方面已经有许多优秀的范例了,比如这22个超赞的扁平化设计经典案例就有很多我们可以借鉴学习的地方。但是移动端的界面设计扁平化风格较少,所以今天从BehanceDribbble收集的这一组移动端的扁平化设计就该好好看看咯,学习一下它们优秀的细节和配色吧 : )

如果你对扁平化风格的网站更有兴趣,那么推荐阅读:
一组赋予你扁平化配色灵感的网页设计
怒赞!2013扁平化设计终极指南
专属扁平化设计的PS色板(配色库)

 

uiGo Colors – iOS Flat UI Bundle

 

8个获取手机应用程序设计灵感的网站

蓝蓝设计的小编

曾经,CSS 画廊非常流行,网页设计师们会定期访问这些网站获取灵感。现在仍然可以方便迅速找到令人兴奋的东西(例如 Dribbble 和 Behance 对设计有很大的帮助)。

对于移动应用程序设计,存在类似的画廊,我相信他们会更加有用。这是因为如果不安装移动应用程序,灵感更难获得,也更需要时间和努力。这12个画廊有很多漂亮的应用程序用户界面,并进行了很好的分类。赶紧收藏吧!

优设好文:
强烈推荐!你应该到这里寻找网页设计灵感

Creattica – Mobile Interface

Creattica 是一个灵感画廊,展示最好的网站设计,标志设计,平面设计,摄影,作品。

Creattica - Mobile Interface

Lovely UI

收集各种移动界面元素,启动画面,按钮,导航,通知等等各种组件的设计。

lovely_ui

让网站更生动!那些在网页中完美运用视频元素的案例

蓝蓝设计的小编

视频有着不算短的历史:最早是电影,然后是电视,现在出现在我们随身携带的手机、平板上。网页中也很早便出现了视频。最开始的时候是Flash格式的视频和动效。而现在除了Flash之外,我们还有HTML5和其它选择。说简单也简单,只需要在网页中嵌入几段代码,就能实现视频效果。但实际上,视频要想用的出彩,并不容易。

视频的进化

过去的网页设计,如果想要加入视频,同时还保证整体美感,不是很容易。我们来和现在做个对比。

过去:因为优美的网页设计必然需要高清高质的视频,若想拍摄好的视频,那么需要昂贵的硬件支持。
现在:相机设备越来越平易近人,手机拍照效果也越来越好,拍摄高清视频不是什么难事。

过去:若想在网页中添加动画片的,需要懂一点Flash知识或者动作脚本知识,或者干脆雇人。
现在:数不清的软件和工具,能够帮助你实现目标。

我们再来想想YouTube,创立于2005年。YouTube是广受大众欢迎的视频网站,在其中用户可以上传自己拍摄的视频片段。现在,即便是一些公司,也利用YouTube来发布产品预告。

我的看法是,YouTube催进了互联网视频的进化。他们让视频病毒式的传播于互联网中。YouTube的理念前无古人:任何人都可以发布视频、分享喜爱的视频,不论视频拍摄者水平的高低、经验的多寡。更平易近人。

现在的互联网视频

时至今日,我们的技术越来越先进,手段越来越丰富,我们甚至可以抛弃Flash.HTML5技术可轻松实现视频播放。技术越先进,我们的设计便越方便,可设计的空间也越大,用户体验也自然更好。

那么,在网页设计中加入视频的好处是什么呢?

视频元素有哪些用处?

视频的使用方法有很多,均能够提高用户的浏览体验。一图胜千言?没错,那么只要播放流畅、加载迅速,那么视频的传达能力完全可以超越图像,从而提高整体设计水品。

不过设计前还是要理性思考一番:添加视频,利大于弊,还是弊大于利?

倘若是视频可以更好的传达想要传达的信息,更好的传递品牌、产品、服务的信息,那么便采用。

倘若添加视频后,同时引入了一些不利于浏览的元素,这时候便该谨慎取舍了。

10个增强Web字体排版的jquery插件

蓝蓝设计的小编

虽然Web字体版式技术在各种定制化字体解决方案(比如@font-face, Google Fonts)的支持下一路蓬勃发展,但是在我们在设计和桌面app开发中仍然对其缺少精准的控制和把握。还好有一系列的强大功能jquery插件帮助我们解决这个问题。这篇文章详细介绍了近10个最流行的Web字体版式插件,它们允许我们润色字体版式并创造出更多超级酷的效果。
不得不说,网站本身也创意十足,个性满满哟:)

Lettering.js

Lettering.js example

Lettering.js 是最简单最流行的网络版式插件之一。通过分拆每个文本,并将每个字母放在定制好的<span>中,该插件能够让你精准的操控标题版式。使用它小心的调整你的字距或者添加各式各样的CSS,从而让每个单词都有超级赞的效果。

 FitText.js

FitText.js example

交互式网站设计很好用,它允许内容根据用户的查看终端的大小自动调整。自然地你的web文本随着查看它的浏览器或者终端大小变窄而自动收缩,但是某些情况下会使题目和标题变得有点难看,尤其是由于文本自动缩进或者多出新的一行等情况。这就是FitText.js插件的功能,它能够使你的标题像一张回应式图片一样调整大小,单词不会出现跑到新的一行的情况。

想学响应式设计?来看史上最全的响应式设计资源库

蓝蓝设计的小编

想学响应式设计?来看史上最全的响应式设计资源库

响应式设计起源:Ethan Marcotte在2010年写了一篇响应式的文章,宣扬这种新式的网页设计思想,经过3年的发展,响应式设计得到了众多设计师的认可。

本文的目的在于为大家集中推荐一些最有价值的响应式设计资源。包含了CSS框架、在线工具、准备阶段的工具等等。

推荐阅读:
《不要落伍!来和小伙伴一起学习响应式网页设计》
《来试试响应式设计!25例优秀的响应式网页设计赏析》
《年终特典!当下最热门的网页设计趋势总结》

CSS 响应式框架

这一部分主要介绍了一些的CSS响应式框架,更轻量,而且兼容性也不差。(Foundation,Skeleton是较为老式的CSS响应式框架)

Girder
Girder 使用了Sass silent classes (占位符,输出时不会体现)在HTML中组织内容,标记能够额外处理一些表象类(presentational classes ),比如 “unit_1of4″, “small-2″, “grid4″.

responsive-design-1

15个华丽丽的模糊大背景网页设计

蓝蓝设计的小编

推荐:网页设计趋势案例:15个华丽丽的模糊大背景网页设计
现在大模糊背景图像在网页设计中越来越受欢迎,
高斯模糊的加入不仅创建了一个朦胧弥漫的效果,
具备高端观赏性的同时,
它还可以强制性引导用户关注主要信息内容,大大提升了信息的易读性。
一起来欣赏这15个网站吧:)

HappyTables

View the website

Tiny Factory

View the website

Do

View the website

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档