心得

如果想成为一个优秀的前端开发者，我觉得浏览大量优秀的网站是必不可少的。除了提高自己的审美以外，还可以欣赏到许多特别优秀的交互效果，这样不仅可以迅速提高自己的技能，还可以丰富自己的想象力。当然这一切都需要具有一定的基础才行。我觉得借鉴相比于模仿，最大的区别是可以融入自己的思考，学习前端大神们构建网站的思路，分析他们如何实现优秀的交互效果，揣摩他们如何思考用户体验等等。

什么是优秀的网站

我个人觉得一个优秀的网站应该具备以下几点：

（1）结构清晰，导向明确

（2）体验优秀，交互敏捷

（3）新颖个性，风格独特

界面自然十分重要，它决定了用户下一秒的去和留，但是这是UI设计师的功劳，我觉得前端开发者在实现网页设计图的时候，应该融入自己的思考，把一张张平面的美图变成多维度体验的网站。此时简洁明了的页面结构和优雅细腻的交互效果，成为了衡量用户体验的重要标准。

分析优秀的网站

最近发现了一个国外很酷的网站——toolofna。模仿它，学习它，借鉴它，也是件很酷的事情。

1、tool页面（主页）很简约大气，酷炫的全页视频加上联动的文字，这在国内十分少见，第一眼就抓住了我的心。

2、work页面主要是滚动面板＋旋转图片+优秀素材

3、vr/360页面同样简洁明了，采用高素质背景图来区分模块，达到导向明确的作用

4、directors是我最喜欢的页面，首先是一道闪电划破黑夜，然后呈现简约明亮的背景，凸显文字的锐利清晰。然后是自然细腻的交互动画，黑白分明，黑红点缀，色彩简洁不失优雅

5、awards页面主要是数字滚轮

6、about页面比较简单，主要是内容和背景图之间的色彩搭配，符合整个网站的主色调

7、contact页面主要是字体滑动效果

借鉴优秀的网站

面对这样一个优秀的网站，首先要先平复一下激动的心情。我觉得借鉴一个优秀的网站，先看它的页面结构，toolofna页面结构十分简洁，以上页面基本都是一个个小模块搭建起来，就跟搭积木一样，不同的搭配擦出不一样的火花。然后是交互效果，每个交互动画都可以分解为一个个小小的demo。只要认真分析，都可以自己独立做出来。最后是色彩和字体，虽然这是美工或者设计师的领域，但是我觉得学习就得要多多益善。

导航栏——toolofna
http://blog.csdn.net/iamcgt/article/details/72863303

tool——toolofna
http://blog.csdn.net/iamcgt/article/details/72864735

work——toolofna
http://blog.csdn.net/iamcgt/article/details/72865021

vr/360——toolofna
http://blog.csdn.net/iamcgt/article/details/72870499

directors——toolofna
http://blog.csdn.net/iamcgt/article/details/72871123

awards——toolofna
http://blog.csdn.net/iamcgt/article/details/72870871

contact——toolofna
http://blog.csdn.net/iamcgt/article/details/72870931

总结

虽然我只是个“小学生”，但我觉得前端开发，不仅仅是页面的修修补补。任何领域都有它高深莫测的一面。前端也好，后台也罢，都需要彼此紧密合作，才能做出一个优秀的作品。如果说不久的将来是大数据时代，我认为前端也会有一席之地，尤其是Node.js和微信小程序的出现，使我相信前端有无限的可能性。

toolofna

http://toolofna.com/#!/home

如何借鉴一个优秀的网站相关推荐

html中网站片头制作利器,制作一个优秀的网站它应该注意哪几点
如何才能让网站更优秀,更适合W3C标准及具有良好的用户体验,这是很多网页制作人员都面临的问题,也是大家都想知道的东西,netgather站长在长期的实践工作中终结了下面几点,希望能给大家带来帮助,不 ...
网络推广——在网络推广的道路上如何成为一家优秀的网站建设公司
对于需要网站建设的企业来说,如果想要找一家足够优秀的网站建设公司进行委托,不仅可以为企业省时省力,还能让企业网站在日后的优化运营过程中,进一步助力网站达到事半功倍的优化效果.那么对于一家网站建设公司来 ...
用一年的时间，依靠SEO创造一个成功的网站
以下内容是一位SEO前辈(站长世界的创始人Brett Tabke)写的,这篇文章在我最初学习SEO时,深刻得影响了我,给我了足够的自信.希望对你也有所帮助. a)准备工作和建立内容. 在你注册域名之前 ...
16个优秀外国网站教你网站设计[zt]
大家都希望自己的网站特别又好看,其实自己设计的东西才是自己最喜欢的,网站也是,我相信大家对基本的代码是掌握的,但离成为一个优秀的网站设计师还有一段距离,不要紧,只要有了好的指引,好网站咱们自己也可以设 ...
崇尚个人英雄主义很难铸就优秀的网站设计公司
一个优秀的网站设计公司都不是自己一个人做出来的,而往往是由一个团队乃至几个部门共同努力的结果.曾经的互联网崇尚个人英雄主义,如今已经很难了,再没有人会说只要靠个人就可以做出一个非常优秀的网站设计公司, ...
一个好的网站设计如何影响内容营销
一个网站从颜色到风格的选择,会存在不同的网站设计版本.一个优秀的网站可以带动相关的营销,当然,一个糟糕设计的网站也会导致潜在客户关闭浏览器并寻求其他业务.所以我们来说说网页设计怎么影响到内容营销的. ...
谷歌教你25招构建一个优秀的移动网站
谷歌公司的研究人员聆听了119个小时用户对移动网站的抱怨,了解到构建移动网站的精髓. 最近,来自谷歌公司和AnswerLab的研究人员主持了一场长达119小时的用户测试会议,他们每天都会让用户访问10 ...
如何策划一个有价值的网站
(速途网专栏作者:项少波)大家好我是向少波,上回写了一篇<如何衡量一个网站是否有价值>,文中主要提到三点:品牌,服务,盈利.看过很多网文在提到网站价值这一块时都以网站流量,pr,以及各种 ...
怎样成长为一个优秀的 Web 前端开发工程师？
链接:http://www.zhihu.com/question/19554845/answer/16755476 来源:知乎首先,优秀的Web前端开发工程师要在知识体系上既要有广度和深度!做到这两 ...

如何借鉴一个优秀的网站

心得

什么是优秀的网站

分析优秀的网站

借鉴优秀的网站

总结

toolofna

如何借鉴一个优秀的网站相关推荐

最新文章

热门文章