首页

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

蓝蓝

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

图标式导航的案例

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

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

这是Squarespace的图标式导航:


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

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

来试试响应式设计!25例优秀的响应式网页设计赏析

蓝蓝

通过我们长期对设计类网站的发掘,总结出了一个现象,那就是很多关于响应式设计的文章只给出了桌面版的网页设计,却没有提供移动版网页设计的对比,这在我们看来,多少显得有点不够专业。

于是,我们在这里收集整理了25例优秀的响应式网页设计,均有桌面版和移动版的对比。在方便您阅读这篇文章的同时,您不妨也思考一下灵活性这个主题。
对了,如果您还不够了解响应式设计,请至我们这篇文章《经验分享:响应式排版中的基础知识》回顾学习。

 

Whisperism

Responsive Websites

 

World Wildlife

Responsive Websites

 

Naspa

Responsive Websites

超赞!精致典雅引人注目的黑色系网站设计

蓝蓝

Hotel Bourg Tibourg

有同学喜欢玩黑白配,但是却一直不得要领,总设计不出让人眼前一亮的佳作出来?今天就让我们来这些优秀案例里找原因。

深色的背景看起来具有神秘感,能提供前景元素、背景元素的高度对比。有了黑色的铺垫渲染,任何一个色彩都可以轻易在它之上焕发光彩。
那么怎么才能更好的在网页设计中运用深色背景呢?想要成为一名”高级黑”设计师吗?先来欣赏本文的绝赞范例吧。

The Blue Cube

外观整洁干练,对照鲜明。黑色背景凸显了白色文本。

The Blue Cube

 

灵感创意!15个整洁的小型网页设计

蓝蓝

作为一名网页设计师,有时会使用很多不是必需的元素或者大量的复杂色调来使页面脱颖而出。这样做往往会使页面看起来太过花哨和分散用户的注意力,无法突出页面的内容。大多时候你会发现使用简单的设计方法就会达到很好地效果。因此,今天我们收集了15个新鲜的用简约风格设计的页面来启发大家的灵感。

相关推荐:
《11个超炫的视差滚动网站欣赏(附神器推荐)》

《awwwards上推荐的20个拥有创意布局的网站》

Arko

畅游VC-优设截图

Orchard Keepers

畅游VC-优设截图

网页设计过程思考:更优雅的微信第三方设计

蓝蓝

更优雅的微信第三方设计

@米田的天空最近比较忙,整理作品的速度明显放缓了许多。今天总结些前段时间做的微信第三方网站。要清楚,它是网站不是单独的一个网页。需要考虑更多是整体性的问题。

在拿到项目时,首先需要冷静下来。而不是急着去动手,大部分同学肯定都理解了解其缘由。这边要说的更多是前期先看看相似对手的情况。因为视觉设计相对于产品功能,是最容易拉开差异感的部分。或许一套不同的视觉策略就能让产品迅速脱离大部分同类作品走出来。

 

大部分的普遍

大部分的微信第三方,和似乎都不太注重展示部分。即视觉部分,隐隐有些暴发户的感觉。而且现在做这块的公司似乎已经有当年做团购的景象。多,十分多,最后迷失在一片片营销的海洋里。

做为设计师,先跳出来观察下。其实我们会惊讶的发现,这些站的普遍性都是为你做个微信mini站,就是所谓的新时代营销。最核心的功能基本也是一致,如下:

  • 智能导航(调用地理位置地图接口)
  • 在线支付
  • 全景看图(自由图片组合)
  • 抽奖营销活动

随便打开搜索”微信 营销 专家”,一堆类似微信第三方网站。现在很多的创业者也在做类似的项目,总之,就是很多很多公司做着类似的尝试。当然,国内任何的领域基本都是同时存在上百个同类的项目,能真正运营下去到最后也只有3-4家而已。

自己随便打开其中一个站点,发现其推广的核心点,也是如上述说的一样,功能部分的几乎所有的微信第三方都做着差不多的事情。如果你随便打开这个网页,你觉得你会主动去联系他们么?在很多相似产品存在的情况下。

10款设计师必备的响应式网页设计工具

蓝蓝

随着便携设备用户的指数级增长,网页设计师采用响应式设计作为多平台布局解决方案,不但节省了设计师的时间,而且从长远角度来讲,响应式设计能够为用户提供更舒适的操作环境。
如果你毫无经验,不知从何开始,那么这份工具列表将大大的帮助你,能够让你的布局更有“弹性”。

Simple Grid

 Simple Grid-Responsive Web Design Tool

Simple Grid是难以置信的CSS框架,无所限制的栅格布局,支持不同大小的屏幕。

Susy

Susy-Responsive Web Design Tool

Susy “语义变焦”的栅格系统,无需额外标记和特殊的类,很方便使用Sass的人。

Tiny Fluid Grid

Tiny Grid-Responsive Web Design Tool

Tiny Fluid Grid 很棒的网页应用,能帮你选择栅格系统。一旦完成后,提供CSS文件下载。

Variable Grid System

Variable Grid System-Responsive Web Design Tool

Variable Grid System依据960栅格系统,能够自动产生布局,在调整后,提供CSS文件下载。

Responsive Web Design Sketch Sheets

 Responsive Web Design Sketch Sheets

Responsive Web Design Sketch Sheet 标记很方便,可以方便的选择不同方案中元素的放置位置。

Style Tiles

Style Tiles-Responsive Web Design Tool

可以通过该网站制定完美的响应式设计流程。

 

 

网页设计新趋势!25例出众的响应式导航设计

蓝蓝

响应式设计是当前网页设计的趋势,针对不同的设备,提供布局解决方案。
而且很多技术狂人正在不断的进行各种实验,争取让响应式设计越来越好。

响应式设计的难点是导航菜单。可不能像缩放页面那样缩放导航菜单。在设计之前,要谋划好导航菜单在手机、平板、桌面上的布局。

更多超炫的网站:
《想让网站动感十足?试试网页设计中的韵律线条》
《想设计自己的网站?先来看这15个优秀设计师的酷站》

本文收集了25例出众的响应式设计,大家可以使用响应式在线测试工具Responsinator来看看,他们的导航菜单,是怎样设计的。

Ableton 

Music production with Live 9 and Push | Ableton

 

在网页中设计导航菜单的三个原则(附案例)

蓝蓝

导航菜单可能是网页设计中最重要的部分了。每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息。好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息。

而且导航栏也是整体布局的重要组成。

总结一下,导航栏的重要性。

1. 浏览完Logo后,导航栏是用户第一个看到的组件。
2. 导航栏的作用是引导用户。
3. 导航栏的作用也类似于索引,快速帮助用户找到所需信息。

想让导航栏更加优雅、美丽、响应式么?看看导航栏设计的三大要点吧!

 

1) 别再让导航胖下去了,给导航减个肥

导航菜单重要性不言而喻。一些设计师往往使用一些繁杂的装饰来做突出。其实大可不必,通过字体、悬停效果、留白可以设计出简约、优雅的极简主义风格导航栏,看看下面的案例。

Design Instruct

minimal navigation bar
 

Sugar Rush

Clean Navigation Bar Design
评论(0) 浏览(3293)

表单设计的就应该就像个温柔有礼貌的服务生

蓝蓝

表单设计的就应该就像个温柔有礼貌的服务生

表单应该就像个温柔又有礼貌的服务生。想象你走进一间超级市场,走过两旁堆满商品的走道之后,左转右转,看到你想买的果酱并且挑选了两罐放在购物袋中。

终于你走向结账柜台,一个笑容甜美的收银人员对你温柔的问好,并接过你手中的果酱,告诉你价钱,帮你包装,然后找给你零钱和发票并且愉快的说再见。

表单设计的就应该就像个温柔有礼貌的服务生

现在你来到一个购物网站,在首页看到许多特价商品,你点选了食品的分类选项,来到果酱的分类。稍微看了一下果酱的介绍文章,然后点击鼠标把果酱放到购物车中,并点选结账:结果出现的是一个冷淡又死气沉沉的表单(Form)。

表单绝对是网站中用户和系统互动的最主要的元素,网站透过表单向用户提出问题,用户则透过表单向网站表达他的想法。标单又可以细分成三种元素:1、说明目的的标签;2、提供响应的输入方块或选单;3、以及提交表单的按钮。表单的设计就可以想象成一个称职的服务生,他的服务应该要符合下面几个项目:

想让网站动感十足?试试网页设计中的韵律线条

蓝蓝

网页设计中,横向和竖向的直线非常常见,利用整齐的线条可以打造出有序的视觉路径以及信息层级。
当然,有些时候,可以不按理出牌,设计一些倾斜的线条,让你的网站不拘一格,更加与众不同。

打破传统布局,创造动态的自由视感,让构成更加复杂——无论是利用简约的几何图形,或是精致的倾斜图像。
让你的设计更具吸引力,不妨试试斜线。

Paseo Itaigara

形状感很强,整体设计的很成功,显得并不杂乱。菱形无处不在,拼嵌式的菱形,装饰性的菱形,按钮的菱形,很好的主题一致性。

Paseo Itaigara
 

Impero

交互式网站,积极的氛围、极简的色彩。设计师利用两组对角线(粗细交织)打造了视觉路径。

Impero
 

Alpina

强烈推荐!利用视觉滚错,加上美轮美奂的照片。来感受这趟视觉盛典吧。流畅优美的照片美景。斜线分割的很巧妙(试想用直线风格,效果不会这么到位)

Alpina
 

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档