- 浏览: 122970 次
- 性别:
- 来自: 上海
文章分类
最新评论
你可能已经浏览过数百个网站,看过几十种设计风格的网站。如果你是个设计师,网页设计师或者交互设计,前台设计师,你有注意到那些设计趋势吗?有没有发现色带和标签的使用开始频繁起来。那么为什么大家都开始使用色带和标签呢?首先它可以让有的标题变得醒目起来,加上对比或者3D的效果,让整体富有视觉冲击性,然后其良好的可变动和灵活性加大了色带和标签的使用范围。你可以方便的将其融入到网页整体的任何位置。下面是我们展示给大家的一些优秀的色带和标签使用的网站,你可以从中获得灵感。
Ribbons
Letter Learner
The ribbon nicely frames the name Letter Learner here. Also, the page is laid out as a single column; the ribboned title encourages the user to start their journey at the top and flow down from there.
Ribot
Ribot’s ribbon is fairly subtle. The flourish livens up the page, while summing up the company’s focus in a two-word tagline. A perfect way to set expectations, because the company name does not tell us what it does.
Alex Pierce
With the text being so enormous on the home page of Alex Pierce’s portfolio, it would take a rather bold element to balance it out. In this case, the ribbon does a good job of setting off the header. I also love how the folded layer in the middle of the ribbon adds focus to the designer’s name.
Rockaholic!
On the rather unusual Rockaholic!, the ribbon directs the user’s attention down, playing nicely into the vertical scroll of the website and helping the user dig into the content.
Paris Jones
The delicious red of the ribbon makes the band name Paris Jones pop out here. Even though the text treatment is rather subtle, the bold pattern ensures that you notice it.
Blog en Bois
On Blog en Bois, the arrow effect of the ribbon is especially powerful, largely due to the contrasting dark behind the yellow. I find myself drawn back to the logo over and over again. It’s certainly a powerful way to engrain the brand in the user’s mind.
HTML5 Boilerplate
The popular website HTML5 Boilerplate uses ribbons to draw our attention to the most important action items on the page. I love that the ribbons do their job without having to say “Download here.” The combination of ribbons and labels tells us this is where to download the resources.
Cantilever Fish & Chips
The purpose of the ribbon is not so clear on Cantilever Fish & Chips. The detail about being “Open 7 days a week” would seem relatively minor, but presumably it’s an important distinction for this restaurant.
Wells Riley
Wells Riley is a perfect example of ribbons in service of aesthetics. The ribbons look great here and become the focus of the page.
Dhiraj Singh Karki
I always love designs that depart from convention. The portfolio of UI designer Dhiraj Singh Karki is just such a website. Here, the ribbon is used rather cleverly and does not pack nearly the same visual punch as on other websites. It blends right into the page and yet has enough style to keep the design from looking too simple.
Chipmunk
Chipmunk is a great example of how well a ribbon can work with organic elements. The ribbon around the primary navigation fits in perfectly with the rich illustrations below. It also keeps the navigation from getting lost among the powerful artwork.
Ryan M. Stryker
Once again we see the power of the ribbon to focus attention. Its central location and bold contrast ensure that you don’t miss Ryan M. Stryker’s name.
Tags
Ennea
Given that Ennea is a clothing brand, it’s no surprise that the tag here contains the logo and brand name. Sometimes a straightforward approach works best.
Philip Meissner Design
The tag contains the main navigation on Philip Meissner Design. Usually I would be put off by this unusual configuration of links, but the arrangement and colors here ensure that the links are super-easy to find.
Tinkering Monkey
What could be more important on an e-commerce website then guiding users to check out?Tinkering Monkey has a nice little bold tag to help users complete their purchase.
Parkbud
With all of the smartphone applications out there, the good ones need to communicate their key differentiators. Parkbud is free, and the bold red tag makes sure you know it. The tag is nicely tucked out of the way but always visible from the corner of your eye, reminding you that this tasty app is free.
Lense
Lense is a perfect example of tags combined with fabric textures. Notice first the textured denim background; also, the scalloped border under the main navigation feels very much textile-oriented.
Coreymade
While a small detail, I really love the way the script font makes the tag on Coreymadefeel more like a tag on a shirt than a normal website logo. And the pseudo-3D effect makes the tag really pop for the viewer.
Netastica
The tag on Netastica is mainly there to look pretty, although it still does contain important information and links visitors to the home page.
Ryan Havoc Taylor
The tag is in such a visible location on Ryan Havoc Taylor’s website that it does not need a lot of contrast to stand out. It works well with the flow of the website and performs its role effortlessly.
Ribbons and tags
In the final part of this showcase, we’ll look at websites that make use of both ribbons and tags.
ClearSpan Media
Ribbons and tags go very nicely together, as shown by ClearSpan Media. Here you’ll also find fabrics with patterns, stitches and subtle color variations. The two tags up top and the ribbon down below function as a kind of circle of interest for the user.
Krichevtsova Alexandra
While Krichevtsova Alexandra’s website is rather barebones in content, the tag and ribbon add extra life to key elements. You could enjoy this website without even knowing what the person does.
Wes Bos
发表评论
-
Specializing in the design and development of online platforms and applications,
2013-01-17 15:45 817SITEINSPIRE a showcas ... -
30个美丽的灰色网页设计灵感
2012-08-24 16:09 918对于设计师来说,每一中设计都是带着一种情感的表述。每一种 ... -
30+个人资料页面布局设计
2012-08-24 16:04 937互联网的每个角落都散落着社交网络的使用者。随着Faceb ... -
20个网页设计中有效图像的用法实例
2012-08-24 16:03 931网站的设计风格有很多种类,而如何给客户定位绝对是一个设计 ... -
101个简洁清爽的WordPress主题
2012-08-24 15:35 1567好的wordpress主题总会给你带来惊喜。无论外观和内 ... -
101 帅气的WP皮肤
2012-07-27 14:07 1148Free themes Free themes hav ... -
单页面网页设计
2012-07-26 15:09 1213Auxillary Design Co. Auxill ... -
50个专业设计图库
2012-06-14 14:02 706每个设计师都需要灵感。这种灵感其实俯拾皆是,理想地说,灵 ... -
全球品牌设计100强_网站链接
2012-06-04 09:26 809全球品牌设计100强_网站链接(创意赏整理) ( ... -
11个相似图片搜索网站(以图找图)
2012-05-18 13:28 1168你想凭着一张现有图片找出它的原始图片,或者是凭着一张小的 ... -
10个专业轻便的WordPress皮肤
2012-05-15 11:38 614Pure ThemeMin -
60个超实用华丽的GUI PSD设计包
2012-05-10 13:09 702在这个移动互联网时代,手机无处不在。科技让手机不仅仅只是 ... -
分享一个非常不错的彩色复古纹理包
2012-05-10 13:09 3775Ciara Panacchia是一位图 ... -
20+免费独特的名片模板
2012-05-10 13:09 720对于设计师来说名片有着重要的意义。优秀的创意和好的质感可 ... -
20个新鲜免费的标题字体
2012-05-10 13:09 704字体在设计中是重要的因素,甚至是整个设计的灵魂!大家肯定 ... -
设计电子邮件页面
2012-05-09 12:01 8081.) Percept 2.) Whisk ... -
25个即将上线Coming soon网页创意设计
2012-05-09 12:01 590虽然我们不鼓励在站点未完成前上线,不过针对于一些实际情况 ... -
40个创意404错误页面设计
2012-05-09 12:01 654网页设计者往往忽视错误网页的设计。因为游览者很少看得到, ... -
免费的无缝网站背景图案素材下载
2012-05-09 12:01 499我们可以在很多网站上看到,设计师们应用了非常漂亮的无缝背 ... -
公司团队页面的设计趋势和实例
2012-05-09 12:02 586在任何一个行业的背后,人才和公司本身一样的重要甚至超过公 ...
相关推荐
arcgis超级色带,可以符号化更多彩、更多风格的色带,直接添加即可使用
ribbon.js:使用HTML5 canvas在你的网站上生成色带的JS库,整个包只有1Kb。
制作色带图例简明教程,三步搞定色带图例。
色带通用表色带通用表
arcgis pro版的色带 可以添加到 arcgis 普通版中,包含 色带导入说明文件。
Arcgis色带,更加丰富!!截图仅展示十分之一的色带,实际拥有更多
色带型号通用表 色带型号通用表 色带型号通用表 色带型号通用表
富士通色带安装
ARCGIS色带,ColorBrewer.style文件。ColorBrewer.style,丰富美化色带。
呵呵很哈的安监科大厦是是过分乐观东方国际了国家的法规及国家开发国际的法规及
色带 型号 通用表 包含最新各大品牌针打色带通用列表 有了它 不用为找色带而麻烦了
通用色带对照表(针式打印机 通用色带对照表(针式打印机
matlab开发-新的色带多色标到这些色轴中。在同一组轴中(表面上)创建多个颜色映射和颜色条。
法高Fagoo P280e证卡打印机色带安装视频
常用的针式打印机更换色带,如发票机,出单机,点菜机等等
利用VBA 对近年经营过程中总结的兼容打印机 色带型号 速查
并列关系、对比关系,刷出的色带ppt图表
通过电阻的色带,计算阻值大小,各个颜色的代表的阻值,和计算方法
色带combox控件分享。重写Combox,实现读取颜色方案文件,或者自定义颜色方案。