首页

品牌基因法做图标——实战篇

用心设计

我们今天来聊的是一个真实的工作任务,做任务的整个过程分为以下几个阶段:


1.收到任务

2.找参考

3.根据参考执行

4.感觉没有品牌性

5.根据品牌基因法提取基因

6.再次执行

7.棒棒哒


品牌基因法做图标——实战篇

用品牌基因法做图标设计,高级UI设计师才会的手法!(实战篇)

涛涛

1. 收到任务

我们每天都可能收到不同的设计任务,作为设计师,顺利的完成这些任务是我们最基本的能力,那我们今天要讲的任务是什么呢?

嘿嘿!一套天气图标。

认真的构思中…..

2. 找参考

算了,还是先看看别人都是怎么做的吧!

我找了一堆参考,随机选几个展示下,如下图(图片采集于花瓣网):

前端Boostrap系列之一:稀世珍宝:270款圆滑的 Twitter Boostrap 矢量图标

蓝蓝设计的小编



如果你不那么在意许可证,那么还有很多类似的字体图标库可以使用,最引人注目的是 Font Awesome。下载此字体时,你还会收到所有 SVG 格式的矢量图标,这样你就可以修改这些字体,使其更加完善,并贡献到 Github 上面。

 



一站式图标设计指南

用心设计

这是一篇由国外万粉dribbble大神Justas
Galaburda免费提供的图标设计指南,在国外的UI设计圈子里算是引起了不小的关注。与一些小伙伴所期待的可能不一样的一点是,这是一篇侧重于方法论方面的指南,涵盖了从设计第一枚图标开始到完成一整套图标所需要的一切,而不是一篇侧重于软件技术方面的指南。

一站式图标设计指南

巧夺天工!50枚来自Behance、DRIBBBLE的超精致图标

蓝蓝设计的小编

自从苹果iOS系统推出后,拟物化图标设计逐渐风靡全球(好吧!让我们暂时别提iOS7的扁平风),随着技术发展,设计师们也越来越厉害,图标做得愈加精致。如果你是一个移动界面设计师,或者你对图标设计感兴趣,那就千万不要错过接下来的这50枚精致图标!希望它们能给你带来创意与灵感。

多尝试,多练习,多模仿,你也可以的!
PS+AI制作精致可爱的毛线风格图标
在PHOTOSHOP中创建精细的工具图标

Minion App Icon by CreativeDash

iOS Icon by Eugene Zolotco


导航设计趋势!关于图标式导航的改进

蓝蓝设计的小编

不知不觉的,很多网页设计中采用了图标式导航(Navigation)——一般使用三道杠作为图标,用以导航。
这种导航的好处是节省空间,让界面更简洁。

图标式导航的案例

这是YouTube 图标式导航(移动版):

为导航瘦身!关于图标式导航的改进

这是Squarespace的图标式导航:


为导航瘦身!关于图标式导航的改进

AWARD的图标式导航不拘一格:

导航设计趋势!关于图标式导航的改进

蓝蓝设计的小编

不知不觉的,很多网页设计中采用了图标式导航(Navigation)——一般使用三道杠作为图标,用以导航。
这种导航的好处是节省空间,让界面更简洁。

图标式导航的案例

这是YouTube的图标式导航(移动版):

为导航瘦身!关于图标式导航的改进

这是Squarespace的图标式导航:

为导航瘦身!关于图标式导航的改进

AWARD的图标式导航不拘一格:

为导航瘦身!关于图标式导航的改进

问题所在

问题在于,点击图标式导航之后,图标本身没有任何变化。也就是说:操作缺乏反馈

 

学点新技能!玩转响应式图标设计

蓝蓝设计的小编

什么是响应式图标设计?

响应式设计主要讲的是布局,那么什么是响应式图标?响应式图标设计是一种根据屏幕尺寸来改变图标类型、从而达到更好可读性的设计。

图标为什么要响应式?

怎样阅读内容?时至今日,我们用来阅读内容的平台越来越多。设备、屏幕分辨率、浏览器、平台——我可以拿着5S+Safari+iOS7.0浏览网页,也可以拿着1020+Chorome+WP8浏览网页。

各种选择,各种搭配实在是太多了,这些都或多或少的影响了内容的可读性。而图标作为一种视觉语言,可读性非常重要。

图标设计,首先要满足易于理解。其次,图标的可读性必须高。在小尺寸的情况下,图标设计为了追求更高的辨识度/可读性,可以选择牺牲一点美感。

那么能不能美感、可读性兼得呢?图标设计的艺术便在于二者的平衡,取与舍。怎样设计,让不同尺寸的图标均能展现美感,同时又具备可读性?

我认为,需要根据尺寸范围进行图标响应式的优化

sizes

这个理念不是新的。对于栅格化图标来说,这种设计方法很常见。

界面图标创意设计教程

蓝蓝设计的小编

在网上看过很多设计师的图标制作过程,基本都是偏向技法的介绍.其实在图标设计过程中除了技法之外最重要的就是图标创意了,但这方面的系统介绍网上倒是很少.借这次实际的界面设计项目,来分享下我自己对界面图标制作创意阶段的方法的理解.并以丰富的图例来阐释自己的想法!以次作为图形界面设计师交流的引子!欢迎大家进来交流!

这个过程比较长,自己只能分阶段的准备好,发上来!快毕业了事情很多,多多谅解!
今天把部分草图放上来!创意说明后续准备.

第一部分:图标创意阶段

其实这个阶段之前还有个重要的步骤,就是创意准备.

根据项目需求,确定图标的风格,这在界面设计过程中,有风格评测的方法来确定项目是走什么风格路线.这也是项目前期用户研究的内容,有潜力的公司会制定"用户角色",

社交媒体共享图标在网页设计中的作用

蓝蓝设计的小编

剖析社交媒体图标

事实上,社交媒体图标可以理解为社交媒体、社交网络的标志以及说明的链接。

社交媒体图标可以表现出几个不同的功能。有时,它是社交网络中的公司资料页面/帐户的链接。通常情况下,你可以在它们的周围看到“跟随我们……”或“加入我们……”这样的字样。这些图标通常会被放在网页的顶部或底部,也可以放置在侧边栏。从经验来说,它们在整个网站都是可见的。

Lucius

Social media sharing icons influence web designs

日历

链接

个人资料

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

存档