首页

一组惊艳的后台管理界面设计欣赏

蓝蓝设计的小编

蓝蓝设计其实在最早做设计的时候,就是设计银行的客户关系管理系统以及电商网站的后台管理界面

做那种界面的时候,和设计网页的感觉不一样。因为得考虑的不只是美观,更多应该在操作体验及视觉舒适度上下足功夫。

这种界面会成为管理员长时间驻留的地方,会有很多数据表格。如果我们的配色太鲜艳或者太暗沉,都会让使用者遭受眼球上的磨难。

而且一些按钮和操作焦点没有做好区分和规范,那都会是致命的。

关于界面中的交互,这里蓝蓝设计送上前辈们留下的一句金句,非常经典,也很好记:

1、操作前可以预知;
2、操作中有反馈;
3、操作后可撤销;

不管怎么样,这三句话,你可以牢牢记住。这是只可意会不可言传的。等到你钻研达到一定程度了,自然就会明白咯。

而视觉方面的注意事项,其实大家都知道,依然是不要超过三个颜色。这点大家虽然都知道,可是在实际设计的过程中,会不知不觉的用多一些颜色出来,而且还潜意识说服自己:“这个加上也不错,干脆就用上吧。”整套设计稿出来,全局观察的时候,结果就有些混乱,干扰到数据的主视觉区域了。

好吧!今天就为大家带来speckyboy上收集整理的一些dribbble上的精华作品。我相信,这些作品惊艳到你甚至临摹不过来,不信可以试试哟:)

Device Dashboard

mobile ipad device admin dashboard photo

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

蓝蓝设计的小编

视频有着不算短的历史:最早是电影,然后是电视,现在出现在我们随身携带的手机、平板上。网页中也很早便出现了视频。最开始的时候是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

不要落伍!来和小伙伴一起学习响应式网页设计

蓝蓝设计的小编

响应式设计现在已经成为网页设计师学习的焦点。优设哥发现群内有很多相关的讨论了,这说明我们平时接触该类案例越来越多。
你会渐渐发现,我们身边越来越多的企业和客户关注到响应式网站,作为勤奋的设计师,我们怎么能不对它进行了解呢?

响应式网页设计考虑到多平台、多种屏幕尺寸的情况,能够优化多种设备的网络浏览体验。
当你不知道用户使用什么设备,不知道用户的屏幕尺寸时,若想达到较优布局,可以采用响应式设计
在进行响应式设计时,要专门针对内容进行设计,优先考虑在不同环境下内容的适应性。

相关推荐:
《年终特典!当下最热门的网页设计趋势总结》
《学点新技能!玩转响应式图标设计》
《经验分享:响应式排版中的基础知识》

响应式网页设计

过去,上网需要一台电脑,一个猫。
现在呢,手机、平板、电视都可以上网。

实现响应式设计的几种常见方法

Responsive Web Design, 由Ethan Marcotte编写, A Book Apart出版,对响应式设计的原则进行了详尽的阐述。

多种设备均能支持联网,有利有弊:

好消息是,我们可以随时随地登入互联网。
坏消息是,设计师的工作量成倍的增加了,而且用户变得越来越挑剔,越来越不耐心。
在这种大环境下,响应式设计变成了主流。

响应式设计所带来的挑战

进行响应式设计,挑战有很多。
首先,设备种类、屏幕尺寸多种多样。小、中、大各种各样。其次,倘若你是开发者,你会明白从技术角度上,响应式设计实现起来也不容易。

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

蓝蓝设计的小编

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

HappyTables

View the website

Tiny Factory

View the website

Do

View the website

找不到灵感瞧瞧这几个激活思维的技巧

蓝蓝设计的小编

 找不到灵感瞧瞧这几个激活思维的技巧 三联

  你是否正在或曾经面临着下面类似的问题:

  大黑:icon基本上都是长这样子的啊(如语音icon通常就是麦克风)!!还能画成什么样!!

  又要写文案了,想来想去,除了一开始想到的那几句文案,就再没有想到其他的。

  头脑风暴时,别人总能很快地写出一堆东西,但自己却憋不出一个点子来。

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

蓝蓝设计的小编

25 Modern Web / Interactive Websites Design Examples

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

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

 

Melbourne Remote Control Tourist

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

Melbourne Remote Control Tourist

Melbourne Remote Control Tourist

Portfolio

展示了设计师 Bradley Haynes的作品,他来自旧金山

奔放洋气!8种杂志封面设计方法

蓝蓝设计的小编

传统纸媒衰落了?不要紧,电子杂志正当时,所以说,学习杂志封面设计技巧并不过时。
杂志封面相对来说空间充裕——8到11英尺,你需要在这样大小的空间里面合理排布文字,安置照片/插画。

你的目标只有一个:快速向读者揭示本期杂志内容
这里呢,我总结了设计师们都该知道的8种杂志封面的设计方法。

相关推荐阅读:
《2013年万圣节优秀广告设计评析》
《推荐!优秀书籍封面字体设计》
《怎么做海报?环法自行车赛100周年海报设计案例解析》

文字排布:深色字配亮色背景,亮色字配深色背景

给平面设计专业学生的建议

蓝蓝设计的小编

给平面设计专业学生的建议

来自Studiomates工作室的Frank Chimero是一名知名的平面设计师,一名作家,《设计的形状》一书的作者,他的客户包括《纽约时报》、《连线杂志》、Nike、Facebook、星巴克、时代华纳、《商务周刊》等。有一位匿名者问Frank能否给平面设计专业的学生提点建议,于是他在自己的博客上发表了自己对平面设计的一些看法。虽然是写给平面设计专业学生的,里面提到的想法同样适用于其他设计领域的学生和从业者。以下为摘要:


fc

设计不等于为客户效劳。

紫色在设计中很难处理。老师在课堂上教给你的不是福音。大部分决策都是模糊不清的,所有东西都在正确性与适合度之间徘徊。

当你对别人说话或者听别人说话时,看着对方的眼睛。最好的老师把课堂当做车间,最坏的老师把课堂当做课堂(照本宣科)。

如果你画得没有别人好,或者软件没别人用的溜,或者没有钱买办公用品,或者没有别人使用的工具,那么通过多动脑思考打败他们。思考是免费的,你只需投入时间和换位思考。

最好的沟通者都擅长送礼物给别人。

床头常备两本书:一本小说,一本非小说。

日历

链接

个人资料

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

存档