有创意的关于我们网页页面设计

所属分类: 网页制作 / 应用技巧 阅读数: 213
收藏 0 赞 0 分享
Unique “About”-Pages
A great way to distinguish yourself from the crowd is to have a truly unique about page.
Dustin Curtis has taken a truly unique approach to the about page. What he has created is a death clock of sorts; a timeline of his life up until now and to beyond. It’s an about page that truly speaks to the designer’s capabilities and creativity. It accomplishes the most important thing about a website and a great about page - it’s something you won’t soon forget.
Screenshot
While the content is slight, the “Floating Asian Kid” gag below is cute. Move your mouse around the graphic to see why. It is both memorable and unique
Screenshot
Quomo has taken a very unique approach to the about page - a series of full-body action shots on a horizontal carousel.
Screenshot
Jared has taken a very clever approach to the self portrait (quite literally).
Screenshot
Mark has put his face on Mount Rushmore.
Screenshot
Guðmundur has used big typography and an interesting perspective for his portrait.
Screenshot Big Photograph
A large photograph of yourself can leave a lasting impression in your users minds if it’s done well.
The more we use computers to communicate, the less face-to-face interaction we get. This is why David DeSandro’s about page is so effective. His headshot is as big as any I’ve seen on an about page makes you really feel as thought you’re meeting a real person rather than some web designer on some website. Once the introduction is made, you can easily connect up with David via his social networking presence or the handy contact form below his picture. It’s worth noting his about page is well organized as well.
Screenshot
Janis’ about page is short on copy but big on artistic design. You get a good impression in short order.
Screenshot
Subtraction.com, in addition to being one of the coolest domain names ever, is a picture perfect study in minimalism. Khoi chose an incredible picture for his about page and organized his biography into an easily digested format. It doesn’t hurt that he threw his adorable black lab in there for good measure.
Screenshot
Screenshot
Aside from having an incredibly awesome domain name (unstoppablerobotninja.com), Ethan has a great about page too.
Screenshot
#p#
 Well Organized
The best about pages we found were the ones that had a lot of information but were excellently organized, making them easily digestible. When faced with the task of creating an about page, it’s easy to get overwhelmed and put it off indefinitely because the subject you are dealing with is yourself. It is a subject we know more about than anything else and it can be difficult to know just how much and how little we should tell the world about ourselves. A good about page must be informative without being too wordy.
Jason is Creative Director for A List Apart and it’s clear why. He has pioneered the idea of the “fast design direction” approach to updating websites, a method where instead of doing a major re-design of a site after a long period of time, each article or update gets its own unique design. David and Dustin from above use the same sort of system. Jason’s about page is clean, organized, and personable. We can see at a glance what he has written elsewhere, what he’s about, and what he’s capable of.
Screenshot
Joseph makes sure to give thanks and credit where it’s due on his about page.
Screenshot
The 2-column layout used by Travis neatly encapsulates everything about who he is and what he does. You can easily scan for the information you need.
Screenshot
SimpleBits has always been an inspiration to many web designers and it’s no surprise Dan Cederholm’s about page is one of the best organized and informative out there.
Screenshot
Jon Tangerine is a master of typography. The first time I visited his site I was amazed at what he was able to accomplish without the help of sIFR or other font rendering engines. His about page is a joy to view. Every section is deliberate, informative, and attractive.
Screenshot
Douglas Bowman is a creative director for Twitter and has been working on the web for as long as its been around. His about page is succinct and entertaining. We as graphic designers get exactly what we want in the section devoted to previous design iterations of his website over the years. Check out his footer when you’re on the about page, too, for a bit of cleverness.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Bubs has quite a lot of information but it’s neatly categorized and amusing.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
#p#
 Front and Center
Some designers have gone as far as making their about pages their home pages.
Toby’s about page is actually his home page, which for a personal website (and formal name as his domain name) is a great idea. After all, if we’re visitng Toby’s site for the first time it’d be nice to know who the designer is. He also flips the large portrait concept on its head by giving us a large silhouette where it’s supposed to be.
Screenshot
Jason Reed uses an excellent hand drawn illustration portrait as his about page centerpiece, and his about page in turn is his website’s centerpiece and the first thing you see when you land on jasonreedwebdesign.com. His professional details are neatly organized into a horizontal accordian and there’s no fluff - just the most important information one might want to know when considering Jason for a freelance project.
Screenshot
This website is hard to ignore not only because of its striking yellow background, but Bjørn’s organization of information.
Screenshot
Vlad has a very distinct goal in mind with his site and he accomplishes it with great typography and layout.
Screenshot
Kyle pokes fun at the traditional folio site with his one-page offering. You can easily find out all about him and his internet presence.
Screenshot
#p#
 Direct
A few of the about pages had very deliberate goals.
Jonny gets straight to the point with a mission statement and a brief summary of who he is.
Screenshot
Nick has created an extremely professional about page, complete with testemonials, great portrait, and a press kit to boot.
Screenshot
Suzy sums up herself up well in one sentence, goes into depth for those who are interested, and gives straightforward information about her capabilities and availability.
Screenshot
Dan has a clever portrait and a great succinct description of his talents and abilities complete with his resume and a link to contact him.
Screenshot
Screenshot
Screenshot
Screenshot
#p#
 Minimalist
A minimalist approach can be a great way to convey important information about yourself without distracting the user.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Garret actually acknowledges the fact that his about page is more popular than he first thought it would be, citing this as the reason for giving it more attention.
Screenshot
Screenshot
Screenshot
Screenshot Drop-Down
A few of the about pages we found were actually accessible not from a traditional page but an ajax driven drop-down modal. It’s a great way to make the information about yourself easily accessible to anyone from any page without forcing users to navigate away from the page their currently reading.
Brynn’s about page is always easily accessible via a drop down effect. This also doubles as her contact form.
Screenshot
Screenshot
#p#
 Business Card Websites (BCW)
Made By Elephant’s Tim Van Damme recently started a trend he coined Business Card Websites (BCW), or specialized contact/about pages for individuals that are heavy on ajax and great design. Once Tim got his BCW online other designers started following suit. BCW’s are a great place to send people if they want to get an overview of your social networking presence, portfolio and capabilities, contact information, etc. We have a feeling we’re going to start seeing more of these pop up in the near future. Here are a few of the best we’ve found so far:
Tim has three tabs on this BCW which tell you how to find him on the net, who he is, and how to get in touch with him.
Screenshot
Rogie King runs Komodo Media, and his BCW retains some of the design elements he uses there. Great consistency.
Screenshot
Michael’s BCW has a stunning underwater effect with appealing organic treatments.
Screenshot
Matthias blogs over at kremalicious.com and has also chosen to keep his design consistent across his BCW.
Screenshot
Daniel has taken a minimalistic approach that works quite well. It’s clean, simple, to-the-point, and friendly.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
There you have it: 60 beautiful and effective about pages from personal websites, blogs, and portfolios. Hopefully this will inspire you to revisit their about pages and come up with some unique and innovative ways of representing yourself on the web.
更多精彩内容其他人还在看

sitemesh教程-页面装饰技术原理及应用

Sitemesh是一种页面装饰技术:它通过过滤器(filter)来拦截页面访问,据被访问页面的URL找到合适的装饰模板等等,感兴趣的朋友可以了解下哦
收藏 0 赞 0 分享

浏览器可以注册的事件小结

我们在网页制作中经常会用到浏览器事件,这里简单的整理下方便需要的朋友
收藏 0 赞 0 分享

从image/x-png谈ContentType(s)

今天在做一个文件上传的功能的时候,发现我总是上传不了png的图片。经过调试发现,应该是在ContentType的地方判断失误了。后来百度了一下发现一个有意思的现象,我发现png的图片的ContentType并不是我在注册表中看到的image/png,而是image/x-png
收藏 0 赞 0 分享

窗口中的各种距离/滚动距离的精确计算汇总

平时在项目开发中,没少跟边距,位置,坐标什么的打交道,悲剧的是,如果你对这些东西没有非常清晰的概念,编码的时候会非常痛苦,到处找资料寻求距离的精确计算,接下来本文提供一个示意他,希望对你有帮助
收藏 0 赞 0 分享

web的各种前端打印方法之CSS控制网页打印样式

使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措,接下来介绍CSS控制网页打印样式是如何实现的
收藏 0 赞 0 分享

响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

现在移动设备越来越普及,用户使用智能手机、pad上网页越来越普遍,但是传统的fix型的页面在移动终端上无法很好的显示。因此,Ethan Marcotte提出一种响应式web设计的概念,响应式web设计的英文为Responsive Web Design,简写为RWD,感兴趣的朋友可
收藏 0 赞 0 分享

响应式WEB设计学习(2)—视频能够做成响应式吗

除了图片以外,还有一种常见的多媒体形式是视频。有时在web设计中,根据需要会在页面中加入视频,视频大小的自适应单靠CSS本身似乎是做不到的,感兴趣的朋友可以详细了解下
收藏 0 赞 0 分享

响应式WEB设计学习(3)—如何改善移动设备网页的性能

究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢?这些元素应该做何处理以提升页面在移动设备中的整体性能?是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢?带着这些疑问开始本文之旅吧
收藏 0 赞 0 分享

网页设计必备手册 216网页安全色大全

网页安全色是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的颜色集合(调色板或者色谱),也就是说这些颜色在任何终端用户的显示设备上都是相同的效果
收藏 0 赞 0 分享

网页设计中设计出有层次感的界面的经验介绍

很多网友常说自己的网站为什么色彩上总是有问题,总是看起来没什么精神,没办法吸引人注意。观察了一些网友们设计的网站发现他们在用色上不够大胆,同时也缺乏对色彩层次的理解。
收藏 0 赞 0 分享
查看更多