色带跟标签在网页设计中的使用更新时间: 2014-01-05 01:56:05 责任编辑: Author_N1
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’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.
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.
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.
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.
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 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 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.
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.
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.
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 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.
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.
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.
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.
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.
- • 用vc++6.0多文件编程，为什么老是显示异常
- • 初学者 之 配置开发新环境
- • VI中的多行剔除与复制 [转载]
- • 请教程序Jquery来实现级联列表，为什么没反应
- • 最热网友收藏：40种网站设计常用技巧(2006年第51周) - web开发自学
- • java 泛型 -
- • Java中的排序(一) - 技术代码资料库
- • mysql install - 朗志工作室同步博客------主博客http://lexus.cnblogs.com
- • slf4j使用 - Deans
- 在输入输出控制方法中，采用（ ）可以使得_程序异常
- 运行Apache Mahout的Taste Webapp例子 - 修炼中。。。 _程序异常
- Linux/Unix 下设置应用程序定时自动重启(以resin为例) - 漫漫长路,憩息港湾.(深水鱼) _程序异常
- （转）SQLite入门与分析(三)---内核概述(2) - 小白的思考 _程序异常
- 报表解析数据库中的html内容 - 轻剑寂寥 _程序异常
- 卖家必知 参加淘宝一元拍的五大要素_程序异常
- 初学者 之 配置开发新环境_程序异常
- VI中的多行剔除与复制 [转载]_程序异常
- 最热网友收藏：40种网站设计常用技巧(2006年第51周) - web开发自学 _程序异常
- java 泛型 - _程序异常
- Java中的排序(一) - 技术代码资料库 _程序异常
- mysql install - 朗志工作室同步博客------主博客http://lexus.cnblogs.com _程序异常
- slf4j使用 - Deans _程序异常