邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

【Web开发】12个Web 开发个人作品集网站推荐

Berrry 2018-07-27 08:39:27 阅读:16275

对于前端开发人员或网页设计师而言,建立个人作品集网站不仅可以在线展示自己的作品,也能体现个人的成就以及技能的专业度,从而给人留下深刻的印象。然而在追求内容创意、令人惊叹的布局同时,我们更应该考虑网站访客的实际体验,总体而言在创建作品集网站时有以下6个方面值得注意:


1.网页中是否有清晰的CTA按钮,方便用户了解更多关于你的信息?

2.网站的布局,是否有令人困惑或不明白的地方?

3.是否在展示个人才能方面,描述过于冗长?

4.网页是否花很长的时间来加载?缓慢的网页加载等同于面试时迟到,务必避免。

5.网页是否展示用户关心的核心问题,还是仅仅在无意义尽数个人往期成就?

6.网页是否能在手机端正常加载和显示?


与商业网站相比,个人作品集网站更注重个人的表达和独立的思考,不仅对于设计趋势有天然的亲和力,而且情绪的表达也更为清晰、直接。这里小编搜罗了12个最佳的Web开发个人作品集网站,无论是作为学习的素材、还是开阔眼界的作品,都是不错的资源,一起看看吧。


12个Web开发作品集网站赏析

1. http://www.rleonardi.com/

  • 设计师:Robby Leonardi
  • 背景简介:Robby是一名多学科设计师、技术爱好者,以及NBA球迷
  • 亮点:完美融合交互体验和童年时期的电子游戏界面,给人新奇又爱不释手的感觉

作品集网站1


正如你所见,这个网站看起来像是一个在线的电子游戏,进入后随着鼠标的上下移动,可以如打游戏般轻松了解Robby的工作经历及专业技能,这种有趣的互动设计会有种让人一直滚动页面直到“通关”的感觉。如果你想寻找一种新奇的方式,将看似枯燥但对个人十分重要的信息展示给用户,那么这个网站可以多借鉴下。


2. http://findmatthew.com/

  • 设计师:Matthew Williams
  • 背景简介:他是一名前端开发工程师,此外对UI效果、动画以及动态用户体验也热爱
  • 亮点:黑色主色调的单页设计,既美观、又给人干净的感觉

作品集网站2


如果你追求创意和美观,那么像这样的单页网站是很好的选择。这里Matthew的个人作品集网站采用了黑色的主色调,既时尚、也给人一种干净简洁的感觉。网站首页有一句简单的自我介绍,随着页面下拉会自动加载不同的栏目内容:专业技能、作品集、博客文章以及联系方式。从这个网站就可以看到他娴熟的开发和设计水平。


3. http://driesvanbroeck.be/

  • 设计师:DRIES VAN BROECK
  • 背景简介:一名动效设计师
  • 亮点:看似令人分心、实则充满小心机的动效设计

作品集网站3


如果按照一般的网页规则来看,这个网站中的动效无疑会让人容易分心,但随着鼠标滚动会不难发现一切都是“有迹可循”:轮播的图片会在通览全网内容后形成精美的布局排版,鲜艳的提示文字隐藏有作者的更多介绍,循环跳跃的小icon将用户的关注点自然吸引到网页中最重要的部分。总而言之,没毛病。


4. http://www.maltegruhl.com/

  • 设计师:Malte Gruhl
  • 背景简介:自由设计师
  • 亮点:“包罗万象”的网站,给人一种深深的迷幻和神秘感

作品集网站4


相信很多人看到这个网页的感觉,会有看到作者本人名字MalteGruhl同样的感觉,那就是很迷幻。无论是极简、艺术还是抽象似乎都不足以精确描述他的设计特点,唯有迷幻才更接近这个网站的设计精髓,随着页面往下滚动甚至会发现很多物理和化学等学科的影子,说不出的神秘和吸引感。


5. https://benbate.com/

  • 设计师:Ben Bate
  • 背景简介:产品设计师,经常与初创或大企业合作创造有影响力的电子产品
  • 亮点:网页设计一般,但文案和内容设计会让你眼前一亮


这个网站看起来像是Bootstrap制作的,虽然视觉设计尚不能算特别突出,但用心看他的文案和内容的设计倒是非常好玩儿。


6. http://www.elsamuse.com/en/

  • 设计师:Elsa Muse
  • 背景简介:法国时尚博主
  • 亮点:艺术家气质的时尚网站,大胆配色、教科书般的极简主义

作品集网站6


不得不说Elsa Muse的设计作品中多少都带有一些艺术特质,我们从网站中也能有所察觉。大胆的配色和近乎教科书式的极简设计,相信对于很多人来说都确实是打开眼界。


7. http://www.legworkstudio.com/

  • 设计师:Legworkstudio工作室
  • 背景简介:Legworkstudio是位于美国科罗拉多州的个人工作室
  • 亮点:从未见过的动画及交互体验

作品集网站7


网页的动画以及随鼠标滑动翻页的交互动效,使这个网站脱颖而出。相信很多人都会对主页上独特的手绘动画产生深刻印象,关键在于这些动画也不像之前见过的任何东西,比如:长者三只眼睛的女电报员?


8. https://www.loungelizard.com/

  • 设计师:Lounge Lizard
  • 背景简介:纽约的网页设计公司
  • 亮点:网站看起来既专业、又不落俗套,给人一种很放松的感觉

作品集网站8


想要让网站看起来既专业又有趣、而且不落俗套,其实并不容易,但LoungeLizard公司做到了。通过详细的品牌案例以及工作间照片的展示,这个以酒吧为主题的网站很好地完成了树立品牌形象、宣传产品口碑的作用。


9. https://www.wokine.com/

  • 设计师:Wokine
  • 背景简介:位于法国巴黎的网页设计公司
  • 亮点:使用“分屏”的视觉设计方法

作品集网站9


这个网站很好地遵循了很流行的视觉设计方法 – 分屏。整体设计十分简约,结合大量的间距和简单的配色方案,给人一种良好的视觉层次结构,对于网站的重要内容可以一目了然。


10. http://www.danielspatzek.com/Home

  • 设计师:Daniel Spatzek
  • 背景简介:自由图形及网页设计师
  • 亮点:运用大量的图形和动画技巧,将不可能变为现实

作品集网站10


这个网站中使用了大量的CSS技术和动画,让看似不可能结合到一起的事物变为现实,并且创造出一种很真实的动态体验。不同于大多数长页面的设计,这个网站的导航水平分布在上、下、左、右四个方向,一旦鼠标悬浮放置上去,会出现另外一种截然不同的排列方式。


11. http://seanhalpin.io/

  • 设计师:Sean Halpin
  • 背景简介:来自加拿大多伦多的网页设计师和网页开发者
  • 亮点:极具个性的小小世界


设计师Sean Halpin向我们很好地展示了,个人作品集网站不仅可以将工作经历和技能进行列举,还可以向其他人展示自己的才华和个性。整个网站看起来就是设计师自己的小小的绿色世界,在这个世界中,将自己可以如何帮助他人搭建网站娓娓道来。


12. https://www.denisechandler.com/

  • 设计师:Denise Chandler
  • 背景简介:一名女设计师,同时对于编程深有研究
  • 亮点:完美遵循网页设计4大基本原则,并有个性化元素

作品集网站12

网站完美阐释了设计的四大基本原则,那就是:对齐、重复、对比以及亲密。除了设计很有规范外,加入了很多个性化的元素,可以说只露触角的章鱼也很吸睛了。


结尾


以上,便是小编精挑细选的最佳网页开发个人作品集网站及赏析。不过话说回来,一份好的网页设计作品,除了需要设计师的灵感及天赋,更离不开一款好用的设计工具。作为国民原型设计工具,Mockplus不仅提供了丰富的网页设计项目例子供免费下载和查看,而且提供了大量封装的组件和UI元素,让你的设计如虎添翼,不妨试试看

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:748169314 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶