摹客
产品
下载
对于前端开发人员或网页设计师而言，建立个人作品集网站不仅可以在线展示自己的作品，也能体现个人的成就以及技能的专业度，从而给人留下深刻的印象。然而在追求内容创意、令人惊叹的布局同时，我们更应该考虑网站访客的实际体验，总体而言在创建作品集网站时有以下6个方面值得注意：
1.网页中是否有清晰的CTA按钮，方便用户了解更多关于你的信息？
2.网站的布局，是否有令人困惑或不明白的地方？
3.是否在展示个人才能方面，描述过于冗长？
4.网页是否花很长的时间来加载？缓慢的网页加载等同于面试时迟到，务必避免。
5.网页是否展示用户关心的核心问题，还是仅仅在无意义尽数个人往期成就？
6.网页是否能在手机端正常加载和显示？
与商业网站相比，个人作品集网站更注重个人的表达和独立的思考，不仅对于设计趋势有天然的亲和力，而且情绪的表达也更为清晰、直接。这里小编搜罗了12个最佳的Web开发个人作品集网站，无论是作为学习的素材、还是开阔眼界的作品，都是不错的资源，一起看看吧。
正如你所见，这个网站看起来像是一个在线的电子游戏，进入后随着鼠标的上下移动，可以如打游戏般轻松了解Robby的工作经历及专业技能，这种有趣的互动设计会有种让人一直滚动页面直到“通关”的感觉。如果你想寻找一种新奇的方式，将看似枯燥但对个人十分重要的信息展示给用户，那么这个网站可以多借鉴下。
如果你追求创意和美观，那么像这样的单页网站是很好的选择。这里Matthew的个人作品集网站采用了黑色的主色调，既时尚、也给人一种干净简洁的感觉。网站首页有一句简单的自我介绍，随着页面下拉会自动加载不同的栏目内容：专业技能、作品集、博客文章以及联系方式。从这个网站就可以看到他娴熟的开发和设计水平。
如果按照一般的网页规则来看，这个网站中的动效无疑会让人容易分心，但随着鼠标滚动会不难发现一切都是“有迹可循”：轮播的图片会在通览全网内容后形成精美的布局排版，鲜艳的提示文字隐藏有作者的更多介绍，循环跳跃的小icon将用户的关注点自然吸引到网页中最重要的部分。总而言之，没毛病。
相信很多人看到这个网页的感觉，会有看到作者本人名字MalteGruhl同样的感觉，那就是很迷幻。无论是极简、艺术还是抽象似乎都不足以精确描述他的设计特点，唯有迷幻才更接近这个网站的设计精髓，随着页面往下滚动甚至会发现很多物理和化学等学科的影子，说不出的神秘和吸引感。
这个网站看起来像是Bootstrap制作的，虽然视觉设计尚不能算特别突出，但用心看他的文案和内容的设计倒是非常好玩儿。
6. http://www.elsamuse.com/en/
不得不说Elsa Muse的设计作品中多少都带有一些艺术特质，我们从网站中也能有所察觉。大胆的配色和近乎教科书式的极简设计，相信对于很多人来说都确实是打开眼界。
7. http://www.legworkstudio.com/
网页的动画以及随鼠标滑动翻页的交互动效，使这个网站脱颖而出。相信很多人都会对主页上独特的手绘动画产生深刻印象，关键在于这些动画也不像之前见过的任何东西，比如：长者三只眼睛的女电报员？
8. https://www.loungelizard.com/
想要让网站看起来既专业又有趣、而且不落俗套，其实并不容易，但LoungeLizard公司做到了。通过详细的品牌案例以及工作间照片的展示，这个以酒吧为主题的网站很好地完成了树立品牌形象、宣传产品口碑的作用。
这个网站很好地遵循了很流行的视觉设计方法 – 分屏。整体设计十分简约，结合大量的间距和简单的配色方案，给人一种良好的视觉层次结构，对于网站的重要内容可以一目了然。
10. http://www.danielspatzek.com/Home
这个网站中使用了大量的CSS技术和动画，让看似不可能结合到一起的事物变为现实，并且创造出一种很真实的动态体验。不同于大多数长页面的设计，这个网站的导航水平分布在上、下、左、右四个方向，一旦鼠标悬浮放置上去，会出现另外一种截然不同的排列方式。
设计师Sean Halpin向我们很好地展示了，个人作品集网站不仅可以将工作经历和技能进行列举，还可以向其他人展示自己的才华和个性。整个网站看起来就是设计师自己的小小的绿色世界，在这个世界中，将自己可以如何帮助他人搭建网站娓娓道来。
12. https://www.denisechandler.com/
网站完美阐释了设计的四大基本原则，那就是：对齐、重复、对比以及亲密。除了设计很有规范外，加入了很多个性化的元素，可以说只露触角的章鱼也很吸睛了。
结尾
以上，便是小编精挑细选的最佳网页开发个人作品集网站及赏析。不过话说回来，一份好的网页设计作品，除了需要设计师的灵感及天赋，更离不开一款好用的设计工具。作为国民原型设计工具，Mockplus不仅提供了丰富的网页设计项目例子供免费下载和查看，而且提供了大量封装的组件和UI元素，让你的设计如虎添翼，不妨试试看。
摹客，支持Sketch/PS/XD/Axure设计稿交付、自动标注切图、全流程协作。助力设计师和产品团队高效工作！
摹客协作
摹客RP
摹客DT
摹客超级版
