十六个令人难以置信的投资组合网站

I love looking at personal / portfolio websites for inspiration. Unlike company or agency websites, personal websites often have a lot more personality and creativity. I’ve been collecting a folder of bookmarks of my favourite ones and wanted to share them.

我喜欢在个人/投资组合网站上寻找灵感。 与公司或代理网站不同,个人网站通常具有更多的个性和创造力。 我一直在收集我最喜欢的书签的文件夹,并希望与他们分享。

Now that we’re all at home a lot more, I know many UX designers are updating their portfolios and case studies. If that’s you, you can use the below list for inspiration.

既然我们已经不在家了,我知道许多用户体验设计师正在更新他们的产品组合和案例研究。 如果是这样,您可以使用以下列表来激发灵感。

These 16 sites are presented in no particular order. They are all UX / product design portfolios, apart from a couple of developer websites and blogs. All have amazing standard of design and great readability.

这16个站点的显示顺序不分先后。 除了几个开发人员网站和博客以外,它们都是UX /产品设计产品组合。 所有产品均具有惊人的设计标准和出色的可读性。

  1. Meagan Fisher (https://owltastic.com/)

    梅根·费舍 ( Meagan Fisher) ( https://owltastic.com/ )

    Meagan uses two colours throughout to keep the whole site feeling really on-brand. This is paired with a cool space/astrology/astrolabe theme. I love the subtle rotational animations throughout the site. I also love how simple it all is — it’s a one-pager, where the case studies link out to Medium write-ups and the CTAs scroll to the contact form at the bottom. So clean!

    Meagan始终使用两种颜色来使整个网站真正具有品牌形象。 这与酷太空/占星/星盘主题配对。 我喜欢整个站点中微妙的旋转动画。 我也喜欢这一切多么简单-它是一页纸,案例研究链接到Medium文章,CTA滚动到底部的联系表格。 好干净!

  2. Jay Clark (https://jay-clark.co.uk/)

    杰伊·克拉克(Jay Clark) ( https://jay-clark.co.uk/ )

    I recommend Jay’s site to everyone as a master-class in writing a simple case-study. There’s no bs: he focusses concisely on the value he brought to the project and the measurable impact resulting from that. He just dives right in. From a design perspective, I also love that the middle section of the three has an alternate colour background, which helps break it up from being a long wall of text.

    我向所有人推荐Jay的站点,作为大师班编写简单的案例研究。 没有缺点:他简洁地专注于为项目带来的价值以及由此产生的可衡量的影响。 他只是潜入水中。从设计的角度来看,我也喜欢三者的中间部分具有交替的颜色背景,这有助于将其从一长串文字中分解出来。

  3. Gabriel Contassot (https://www.gabrielcontassot.com/)

    Gabriel Contassot ( https://www.gabrielcontassot.com/ )

    Just opening this site again now, I forgot how damn

    现在只是再次打开这个网站,我忘记了该死的

    elegant it is. The copy is also great, it very quickly gives you a sense of what Gabriel is like; he’s a: “French guy with an eye for graphic design and anything digital.” My favourite thing here is the custom cursor, and how it interacts with the pictures and the initials at the top.

    优雅 。 副本也很棒,它很快就会使您了解Gabriel的模样。 他是一个:“法国人,非常注重图形设计和任何数字化。” 我最喜欢的是自定义光标,以及它如何与图片和顶部的首字母进行交互。

  4. Arjun Menon (https://arjun1am.com/)

    Arjun Menon ( https://arjun1am.com/ )

    Arjun has a beautiful site with great typography, and really detailed (but still very readable) case study write-ups. You can tell the site is well-coded too: there’s a ton of cool interactions, including a 3D iPhone, a magnetic cursor and cool loading transitions between thee pages, but it still loads quickly and none of it lags.

    Arjun的网站精美,排版精美,并且案例研究非常详尽(但仍很可读)。 您可以看出该网站的编码也很不错:存在大量有趣的交互,包括3D iPhone,磁性光标和页面之间的酷加载过渡,但它仍然快速加载,没有任何滞后。

  5. Jenny Wen (https://jennywen.ca/)

    温珍妮 ( https://jennywen.ca/ )

    I love Jenny’s case studies. The feature case study for Dropbox Paper’s Templates is so well-presented. It takes you on a journey of scoping out the feature at an MVP level, iterating on it and getting feedback, all the way through launch and learnings-after-launch. The user flows and mockups are perfect for following along, and the clean and minimal layout and type helps you stay focussed on the case study.

    我喜欢詹妮的案例研究。 Dropbox Paper模板的功能案例研究非常详尽。 它需要您在MVP级别上确定功能,迭代并获得反馈的过程,贯穿启动和发布后的学习过程。 用户流程和模型非常适合跟踪,而简洁,最小的布局和类型有助于您专注于案例研究。

  6. Paavan (me!) (https://paavandesign.com/)

    Paavan (我!) ( https://paavandesign.com/ )

    Ok, I had to sneak my own site into this list! I coded this site from scratch and recently ported it to use Eleventy. I’ll be doing a behind-the-scenes write-up soon which goes through the design, the code, the animated portrait and all the easter eggs. (Try the Konami code!)

    好的,我不得不将自己的网站潜入该列表! 我从头开始对该网站进行编码,最近将其移植为使用Eleventy。 我将很快进行幕后写作,包括设计,代码,动画肖像和所有复活节彩蛋。 (尝试使用Konami代码!)

  7. Leandro Fernandez (https://leandrofernandez.webflow.io/)

    Leandro Fernandez ( https://leandrofernandez.webflow.io/ )

    Leo’s site is just, super super clean. It shows how great you can make a site with just black, white, a great sans-serif font (Leo uses Inter) and some emojis sprinkled through. It also shows off how great of a site you can make using Webflow. I love the split-scrolling in the experience section of his about page.

    Leo的网站非常干净。 它显示了仅用黑色,白色,出色的sans-serif字体(Leo使用Inter)和一些表情符号就能制作一个网站的效果。 它还显示了您可以使用Webflow打造的网站的优势。 我喜欢他的About页面的“体验”部分中的拆分滚动。

  8. Max Stoiber (https://mxstbr.com/)

    马克斯·斯托伯 ( https://mxstbr.com/ )

    Again, Max’s site is incredibly clean. Max works at Gatsby, and has worked on some huge open-source projects. The timeline section for his appearances at conferences is really cool, but the bit I love most (and the reason I found his site) is his blog layout. The way his name elegantly changes to <mxstbr /> when scrolling is also really cool.

    同样,Max的网站非常干净。 Max在盖茨比工作,并从事一些大型开源项目。 他出席会议的时间轴部分确实很酷,但我最喜欢的一点(也是我找到他的网站的原因)是他的博客布局。 滚动时,他的名字优雅地更改为<mxstbr />的方式也很酷。

  9. Joshua Comeau (https://joshwcomeau.com/)

    约书亚 ( Joshua Comeau) ( https://joshwcomeau.com/ )

    Josh’s site is another that I found via his blog & his amazing long-form blogposts on different tech topics.. And man-oh-man, this site has

    Josh的网站是我通过他的博客以及他关于不同技术主题的令人惊奇的长篇博客文章找到的另一个网站。

    everything. He’s got a floating 3D avatar, great little dark mode and sound toggles; the squiggly underlines on the top navigation are great, as are the interactive tooltips and Venn diagrams; there are sparkles and sick emphasis fonts and a non-stop confetti party when you sign up to his mailing list. It’s all GREAT. It really shows off how to make a fun site with a lot of personality, that is also serious enough to have detailed, intelligent and informative posts about tech topics. I love it.

    一切 。 他有一个浮动的3D化身,很棒的小暗模式和声音切换; 顶部导航上弯曲的下划线非常棒,交互式工具提示和Venn图也是如此; 当您注册他的邮件列表时,会有火花和令人反感的字体和不停的五彩纸屑聚会。 都很棒。 它确实展示了如何创建一个具有很多个性的有趣网站,并且它也足够严肃,可以提供有关技术主题的详细,智能和翔实的帖子。 我喜欢它。

  10. Brittany Chiang (https://brittanychiang.com/)

    布列塔尼·蒋(Brittany Chiang) ( https://brittanychiang.com/ )

    Brittany’s site has an amazing dark colour theme — but what I really love about it is the

    布列塔尼(Brittany)的网站有一个惊人的深色主题-但我真正喜欢的是

    storytelling. By having it as numbered sections (i.e. 1. about me, 2. where I’ve worked, 3. what I’ve built) she takes the reader on a journey about her life and work. It also has some great interactions: the tabbed section of where she’s worked is real nice, and all the colour overlays disappearing on hover are great.

    讲故事 。 通过将其作为编号部分(即1.关于我,2。我工作过的地方,3。我所建造的),她带给读者关于她的生活和工作的旅程。 它还具有一些很好的交互作用:她工作的位置的选项卡部分非常好,悬停时消失的所有颜色覆盖都很好。

  11. Jordan Joseph (https://jordanjoseph.co/)

    乔丹·约瑟夫 ( https://jordanjoseph.co/ )

    Jordan’s website is beautiful, and a really great example of what it’s like to have an elegant and luxurious design that is still clean and modern, without defaulting to black and white, sans-serif ‘tech person’ website. Jordan also has really great case studies!

    乔丹的网站很漂亮,这是一个优雅而豪华的设计,又干净又现代的感觉的很好的例子,它没有默认使用黑白无衬线“技术人”网站。 约旦也有非常好的案例研究!

  12. Benoît Grélard (https://benoit.works/)

    BenoîtGrélard ( https://benoit.works/ )

    This

    这个

    is one of those clean minimal ‘tech person’ websites, but I like that Benoît has taken the simple idea of using a tilt to give the whole site a bit of personality. See: the link hover box-shadow styles and the divider lines on the background.

    干净的最小的“技术人员”网站之一,但我喜欢Benoît采取的简单想法,即通过倾斜使整个网站更具个性。 请参阅:链接悬停框阴影样式和背景上的分隔线。

  13. Jordan Singer (https://ibuildmyideas.com/)

    乔丹·辛格 ( https://ibuildmyideas.com/ )

    Jordan’s site is direct, almost to the point of showing off. Even the URL is straightforward. Having each screenshot in an iPhone-shape instantly tells you these are apps Jordan has made and launched.

    乔丹的网站是直接的,几乎是炫耀的。 甚至URL也很简单。 将每个屏幕截图都显示为iPhone形状会立即告诉您这些是Jordan制作和发布的应用程序。

  14. Emme Clark (http://www.emmeclark.com/)

    艾美·克拉克(Emme Clark) ( http://www.emmeclark.com/ )

    Each case study on Emme’s website starts with the same setup: the basics, and the challenge. This makes reading through each case study really satisfying, as she sets the scene really well. I also LOVE her tagline: “

    Emme网站上的每个案例研究都以相同的设置开始:基础知识和挑战。 这使她对每个案例研究的阅读都非常满意,因为她的场景设置得非常好。 我也喜欢她的口号:“

    Unlike most palindromes, I’m also a product designer.

    与大多数回文法不同,我还是产品设计师。

  15. Matt Kump? (http://kump.co/)

    马特·库普? ( http://kump.co/ )

    Sometimes, less is more.

    有时候,少即是多。

  16. Imran Chaudhri (http://imranchaudhri.com/)

    Imran Chaudhri ( http://imranchaudhri.com/ )

    Imran did 20+ years at Apple and has now founded the design company

    Imran在Apple工作了20多年,现在已经成立了设计公司

    Humane. This one is baller. I won’t spoil it; go check it out.

    人道的 。 这个是鲍尔。 我不会宠坏它。 去看看吧。

翻译自: https://uxdesign.cc/sixteen-sick-portfolios-4159b3e2c235

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值