插图式主页
最近,网站设计有一个新的趋势。
很多网站的首页,完全以一张图片作为主题,文字信息很少,只有几个主要链接,就像一张插图。我把这种主页称为"插图式主页"(illustration web design)。
Tripwire Magazine对这种设计做了总结,下面就是一些实例。
你可以看到它们的视觉效果非常漂亮,对访问者产生很强的粘性。而且,非常突出重点,诉求很明确,有效地达到了设计目的。
我觉得,这种设计是未来的潮流。十年前,Google亮相,首页上就是一个搜索框,别的什么也没有。十年后,设计师们开始觉得,除了搜索框,再加上一个图片主题,似乎更好。
=========================
1. 2ammedia是典型的插图式主页,上部是菜单栏,下部是三个主要功能,中间的一大块都用来做宣传。
![bg2010062304.jpg](http://image.beekka.com/blog/201006/bg2010062304.jpg)
2. dibiconference是一个互联网会议的主页,除了菜单栏以外,只放了一个购票链接,非常醒目。
![bg2010062305.jpg](http://image.beekka.com/blog/201006/bg2010062305.jpg)
3. culinaria是一家礼仪服务公司,主页简单到就是一张图和一句话。
![bg2010062306.jpg](http://image.beekka.com/blog/201006/bg2010062306.jpg)
4. alexantuna也是一个这样的例子。
![bg2010062307.jpg](http://image.beekka.com/blog/201006/bg2010062307.jpg)
5. krojacevaskola(网页设计公司)将一张暖色的照片作为背景,然后以两个大色块突出主要信息。
![bg2010062301.jpg](http://image.beekka.com/blog/201006/bg2010062301.jpg)
6. Josh Hemsley的个人主页,直接以脸部照片作为背景,很酷啊。
![bg2010062302.jpg](http://image.beekka.com/blog/201006/bg2010062302.jpg)
7. Gil De Los Santos的个人主页,也非常简洁漂亮。
![bg2010062303.jpg](http://image.beekka.com/blog/201006/bg2010062303.jpg)
8. Mike Condrick的个人主页,以三个色块突出主要内容。
![bg2010062308.jpg](http://image.beekka.com/blog/201006/bg2010062308.jpg)
9. Aneta Langerova的主页也很漂亮,但是Blog内容放在这么小的框里,实在很不利于阅读。
![bg2010062309.jpg](http://image.beekka.com/blog/201006/bg2010062309.jpg)
10. Alley Pfannekuchen的主页设计,一眼就能让人对这家餐厅产生好感,而且明白它的主要特色就是现代感。
![bg2010062310.jpg](http://image.beekka.com/blog/201006/bg2010062310.jpg)
11. marina yachting的主页就是一张图片,几乎看不出这是一个游艇俱乐部的网页,内容过分简洁了。如果左上角的徽标放大到100%高度,效果应该会更好。
![bg2010062311.jpg](http://image.beekka.com/blog/201006/bg2010062311.jpg)
12. the ship and the sea是一张关于大海和航行的CD,左边那两个数字是售价,点击进入购买链接。这个设计非常有现代感和艺术气息。
![bg2010062312.jpg](http://image.beekka.com/blog/201006/bg2010062312.jpg)
13. kawa.lviv.ua是咖啡馆。
![bg2010062313.jpg](http://image.beekka.com/blog/201006/bg2010062313.jpg)
14. psdchimp是一个分割PSD格式图片的软件,主页非常简单,左边是功能介绍,右边是一个卡通图片。
![bg2010062314.jpg](http://image.beekka.com/blog/201006/bg2010062314.jpg)
15. kmirza是一个提供版权服务的个人网站,主页上用一行大字说明了服务特色。
![bg2010062315.jpg](http://image.beekka.com/blog/201006/bg2010062315.jpg)
16. people82很规范的设计和布局。
![bg2010062316.jpg](http://image.beekka.com/blog/201006/bg2010062316.jpg)
17. Jasno i Glasno是一对夫妻的Blog,采用了卡通样式。
![bg2010062317.jpg](http://image.beekka.com/blog/201006/bg2010062317.jpg)
18. joby的个人主页,主要用来找工作,相信任何一个雇主都会不由自主,点进去仔细看。
![bg2010062318.jpg](http://image.beekka.com/blog/201006/bg2010062318.jpg)
19. ColouringCode的特色是右上角的Logo,下一步点击哪里,一目了然。
![bg2010062319.jpg](http://image.beekka.com/blog/201006/bg2010062319.jpg)
20. 690design是设计公司的网站,很简洁地列出了主要业务。
![bg2010062320.jpg](http://image.beekka.com/blog/201006/bg2010062320.jpg)
21. Lucia Soto的个人主页,突出了个人的姓名。
![bg2010062321.jpg](http://image.beekka.com/blog/201006/bg2010062321.jpg)
22. Stone Skipper是一个iPhone游戏,只要提供一个App Store的链接就行了。
![bg2010062322.jpg](http://image.beekka.com/blog/201006/bg2010062322.jpg)
23. Logo Design Monster是Logo设计公司。
![bg2010062323.jpg](http://image.beekka.com/blog/201006/bg2010062323.jpg)
24. Less Cruise是一次游艇旅行活动,突出了活动主题,以及时间和地点。
![bg2010062324.jpg](http://image.beekka.com/blog/201006/bg2010062324.jpg)
25. Paul Ramirez的主页很酷,除了名字以外,就没有文字了。
![bg2010062325.jpg](http://image.beekka.com/blog/201006/bg2010062325.jpg)
26. shark lab是水族馆的网站,非常好地突出了上方那段文字,使得访问者非读不可。
![bg2010062326.jpg](http://image.beekka.com/blog/201006/bg2010062326.jpg)
27.Jeannie Web是一家女性设计公司。
![bg2010062327.jpg](http://image.beekka.com/blog/201006/bg2010062327.jpg)
28. bam是一家设计公司,主页比较简单,但是颜色的对比效果比较强烈。
![bg2010062328.jpg](http://image.beekka.com/blog/201006/bg2010062328.jpg)
29. Kinetic Shadows的这个主页,很aggressive(进攻性的)。
![bg2010062329.jpg](http://image.beekka.com/blog/201006/bg2010062329.jpg)
30. Pigeon and Pigeonette是一本图画书的主页。
![bg2010062330.jpg](http://image.beekka.com/blog/201006/bg2010062330.jpg)
31. Creative People(设计工作室)的主页图片很奇特,令人印象深刻。
![bg2010062331.jpg](http://image.beekka.com/blog/201006/bg2010062331.jpg)
32. Alex Abramov(设计师)的个人主页。
![bg2010062332.jpg](http://image.beekka.com/blog/201006/bg2010062332.jpg)
33. Eric Johansson的主页很有特色,底部有一个拉动条,建议自己动手去玩一下。
![bg2010062333.jpg](http://image.beekka.com/blog/201006/bg2010062333.jpg)
UPDATE 2010.6.26
cnbeta有一篇《2010网页设计趋势》的译文,很好地总结了这种设计趋势的9个特征。
1)采用印刷式设计;
2)更多地采用衬线字体;
3)采用大字号的标题;
4)采用多列布局;
5)配图越来越大;
6)更多地用图表传递信息;
7)采用简约的设计;
8)单页布局,用一个页面表示内容;
9)巨型的留白空间。
===================
P.S.
一个告示。
上周,Feedburner被屏蔽,而我的Feed托管在上面。导致国内访问者无法打开,或者在Google Reader中点击后,出现提示:"抱歉,发生意外情况,阻碍了 Google 阅读器完成请求。"
我原以为,大家都知道怎么处理,就没提这件事。现在发现,还是有好多朋友不知道怎么办。
那么,如果你属于上面的情况,可以看看我新加的一个页面《Feed订阅方法》。
(完)
第一次接触彩蛋是微软的Excel里面的赛车游戏, 当时作者还上小学, 游戏资源很少, 微机室又不让随便装游戏, 于是小伙伴们经常打开excel找赛车游戏玩, 后来特地查了一下office各个版本的隐藏彩蛋, 真的是比office套件的软件数量都多,...
Github上10个超好看 可视化面板,后台管理页面有着落了 Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可以给开发者使用,那么有哪些优秀的开源免费的控制面板呢?我在 Github 上收集了一些优秀的后台控制面板,并总结得出 Top 10。
阮一峰 阿里技术专家。著名技术博客作者,技术方向为 React + Node,自由软件运动的支持者
相关文章
- 注册表-恶意首页追踪之旅(IE不能改主页)
- django(注册→登录→主页)增强版
- 主页被改为毒霸/搜狗的解决办法
- 仿百度壁纸客户端(二)——主页自定义ViewPager广告定时轮播图
- Android特效专辑(四)——APP主页框架TabHost绑定ViewPager的替换者TabLayout
- jQueryEasyUI创建菜单主页
- SAP 电商云 Spartacus UI Quick Order 主页的实现
- Cloud for Customer的主页加载逻辑
- Cloud for Customer的主页加载逻辑
- 插图式主页
- SAP 电商云 Spartacus UI Quick Order 主页的实现
- uniapp设置tabBar跳转后,其他页面跳转到主页、主页参数、接参(整理)
- Android 9.0 Setting增加返回主页按钮
- Android 11.0 12.0系统Settings主页去掉搜索框
- android 11.0 12.0Settings主页动态显示和隐藏设置项(一级菜单显示和隐藏)
- android10.0(Q) Settings主页去掉搜索功能显示不全解决方法
- android Q(10.0)Settings主页动态显示和隐藏设置项(一级菜单显示和隐藏)
- android launcher app主页屏蔽back键
- EazyUI主页框架搭建纯JS样例
- python-爬虫,实现输入关键字,然后爬取关键字主页代码并存储到mysql数据库
- chrome主页被篡改为360该溶液的导航
- chrome 浏览器主页被锁定 搜狗网址导航
- Vue3悬浮返回主页按钮设计与实现
- Android开发 欢迎页点击跳过倒计时进入主页
- 解决Chrome浏览器主页被hao123篡改
- 开启Tomcat管理注主页功能
- Chris Lattner‘s Homepage LLVM 大神主页
- 置顶!!!主页禁言提示原因:在自己论坛发动态误带敏感词,在自己论坛禁止评论90天