2021年个人网站设计趋势

你上次更新设计作品集的时间是什么时候？ 如果你像我一样“懒”的话，可能已经有一段时间了。 保持一份新鲜的“作品档案”是向潜在客户展示你的专业以及技能的好方法，并且在回顾年度作品时可能会对你有所帮助。

如果你在投资组合设计方面落伍了，或者总体上你需要一个新的投资组合站点，那么在即将开始的2020年会是一个绝佳的机会，可以使用时尚的技术和视觉效果来创建。

利用设计趋势所创建的现代设计可以给人留下深刻的印象。 作品集同时也代表了你的专业和技能，因此，明智地设计！ 以下是关于2020年我们认为你需要注意的设计趋势，让我们来看看吧。

1.主页简介（Homepage Bios）



并没有特别的规则规定了你的个人简介必须放在投资组合网站的“关于”页面上。 组合设计中最强劲的趋势之一是在首页上就展示你的简介内容（至少是其简短版本）。

这是一种很好的方式，可以从一开始就告诉人们你的工作。 用户无需进入特定的详情页面才能了解你的具体工作。

你可以在这里创建关于个人的简介，甚至突出显示你所提供的各种项目和服务。 Bill Chien的网站设计中，通过在首页上使用类似电影中滚动的报幕来展示自己的个人简介内容。 从某种意义上说，他的简历很简单，但是展示了他的创意。

2.大量的互动/交互（Lots of Interactivity）



增强设计的交互体验应该列入你的清单。

这些设计项目中的大部分在视觉上都是吸引人的，充满了动效，丰富的色彩和可点击的元素，或优化悬停效果使其更加独特。 使用效果和设计技术可以提供无限可能。

高度互动的设计优势之处在于，它可以展示一些高级的UX技术。

面临的挑战是，有时设计可能会变得有些混乱。 确保跟踪用户的行为和参与度，如果你因此流失了访问者，那么这可能并不适合你（这对于在其他项目中部署类似技术也是一个很好的测试）。

3.不寻常的设计模式（Unusual Design Patterns）



关于新的设计模式的设计也正在发展和接受测试。 导航元素，遮挡文本，甚至尝试更多的动画效果都是很常见的。

这种趋势可能会流行，因为它为设计师提供了一个机会，让他们有一个小小的空间来测试技术和效果。 这样做的好处是，这种趋势推动了我们对不可知的设计以及创意的实践以及优化。

上面的示例同时使用了一些视觉趋势和不寻常的模式。 屏幕轮廓的字体被部分遮盖，颜色球的动画悬停状态以及屏幕边缘采用垂直样式的导航。

趋势使你考虑设计规范，以及在实际工作中更新对它们的看法。


4.黑和白（Black and White）



黑白设计通常带有色彩强调作用，目前也是设计中非常庞大的一个类型。

最大的影响因素可能是黑白设计模式使人们最容易看到作品，作品通常是彩色的。 它使你希望希望被注意的内容在屏幕上出现时得到更多关注。

与这种黑白趋势配对是另一个常见因素，作品集内容不会直接显示在首页上，用户必须单击以找到它们。


5.现代字体（Trendy Typography）



使用合适的字体绝对是一个设计成功与否的关键之一。 无论你使用的是趋势字体类型元素（例如上面的轮廓线）还是仅仅是漂亮的字体，这种趋势都不会马上过时。

字体技巧将帮助你的作品集脱颖而出，并帮助其他人了解你的工作。

通过浏览你的投资组合网站，潜在的雇主和客户通常会对你的创意印象深刻。 几乎每个设计师都希望被视为具有强大的技能和设计创意的人。 使用现代的字体肯定很合适。


6.高效的效果（High-Performance Effects）



由于网页设计师，摄影师和其他创意人员正在利用他们的作品集来展示自己的能力，因此向更高性能的设计要求有了明显的提高。

这些高性能设计中包含了吸引用户的JavaScript效果，动画和交互。

Victor Costa的网站设计是如何创建高性能设计的典型示例。 当它打开时为用户提供一个选项——标准或高性能。 作品集充满了互动元素，淡入淡出和滚动动作以及动画。 这些技术与他在自己的简历中引用的元素相匹配，不仅是对过去工作的展示，还指示了他还可以为客户做些什么。


7.充足的空间（Plenty of Space）



这是一个越来越多的设计不断涌现采用的一种流行趋势，同样，它也正在进入投资组合设计中——元素和对象之间有足够的空间。

这种趋势似乎源于确保设计能够在移动设备上适当地分隔项目并具有足够的分接空间，但是额外的空间在桌面屏幕上也看起来不错。

Lotta Nieminen的作品集站点就是这种设计的完美范例。 超大的页眉空间几乎占据了屏幕的三分之一以上，而图像之间的垂直和水平空间也非常宽。 每个元素都独立放置，夸张的间距使每个项目空间都可以独立吸引用户注意，这对于具有多种不同类型图像的作品集设计来说尤其有用。


8.时尚的界面设计（Groovy UI）



将简约风格的设计与时尚的用户界面效果相结合，可以创建出令人赞叹的产品组合。 视觉的简单性和复杂的交互之间的结合可以使用户感到惊讶，并使他们更长时间停留并浏览更多页面。

上面的示例中，你可以查看每个项目组合如何在停止之前以干净的涟漪效果滑动到屏幕上。 光标也会移动改变形状，表示单击元素可以使用户以各种方式浏览每个项目，而不仅仅是阅读设计的组合方式。

时尚的用户界面，可以让用户在不知不觉中花更多的时间来了解你。


9.大字号（Large Typography）



字体和语言可以完美地介绍你的作品（和作品集）。 多数人了解Tobias van Schneider可能是基于他的设计或他的视频内容，但是你是否希望他的站点主页主要是文本？

在计划项目或项目执行时，字体往往是最常被忽略的设计元素。 我们大多数人都非常关注视觉效果或动画效果。

这个例子说明了为什么如此多的设计师选择具有强字体的作品集。 在深入了解视觉效果之前，它可以设定正确的语调——你知道他的工作和网站的内容（此选项还可以突出他在处理包含大量文本内容的设计中的实力）。


10.不像作品集的作品集（Portfolios That Don’t Look Like Portfolios）



作品集设计的最大趋势之一是制作看起来像完全是另一类网站的作品集。

Robin Mastromarino的作品集网站设计看起来更像是时装设计师或从事时尚类型工作的网站，具体取决于你首先查看的是页面中的哪一部分。 它既美丽又简单，最令人印象深刻的是每个项目都有自己发光的空间。

细微的提示可帮助用户理解设计中的要素，例如标题上方的小数字和下方的日期。 此外，该滑动元素还指示了通过项目的标题向左或向右滚动。

这种样式的其他优点是，作为设计师，你不必提出全新的东西来炫耀你的作品。 对于大型的“艺术”类项目，完成的结果是重点，而不是创建全新的工作。


11.全屏动画导航（Full-Screen Animated Navigation）



这段时间以来，许多设计师更多选择一屏的作品集样式。 如今，由于缺乏合适的导航方式，大部分已经转回到多页项目。

主页可导航到各个项目以及这些项目中具有动画效果的页面，从而为用户提供更加身临其境且完全互动的体验。

它建立了一个不错的用户体验，可能使客户希望看到类似的技术，并且是强调你在数字领域中进行创作的能力的好方法，即使你展示的所有项目都不能反映出这一点。


12.分屏模式（Split-Screen Patterns）



分屏模式已经流行了一段时间，即使不使用此功能，也有越来越多的投资组合正在使用此设计。 之所以起作用，是因为元素的配对有助于将用户吸引到整个屏幕上，以帮助他们了解面前的所有内容。

Xavier Cusso使用具有出色视差滚动效果的分屏设计在项目之间移动。 拼色屏幕设计有助于强调网站的创造性，而中间的元素是要查看的项目组合。 它将投资组合和项目设计区分开来。

这是处理大型项目的好方法，同时在项目组合设计中能够保持你的个人风格。


13.极简风格设计（Minimalism-Inspired Design）



极简风格的作品集的最好之处在于，它为设计提供了充足的空间。 实际投资组合的设计变得相对不可见，因此所有焦点都集中在你希望人们看到的元素上。


14.超大的首页英雄图（Oversized Homepage Headshots）



使用超大的人物图像是一个正在不断被尝试使用的趋势，尤其是对于开发人员和交互设计师而言。

这种投资组合趋势可能流行的原因可能是因为你很难直观地展示作品，你能突出显示代码吗？

使此项目设计起作用的诀窍是要有一个良好的形象。 它不仅仅只是展示。 它需要你对此充满正确的感情，然后将其与合适的字体配合使用，以使你清楚地知道这是一个投资组合网站以及你的工作。 将所有这些信息保留在滚动条上方，以使访客有机会在设计中不断移动。


15.模块化网格（Modular Grids）



似乎从未消失的一种组合设计趋势是使用模块化网格来展示项目。 这是一个很好的功能，因为你可以在单个画布上“浮动”不同项目的图像。

Kimi Lewis在她的网页设计中证尝试一种不同的样式。 这种设计要大得多，而不是用很多小方块来展示项目。 它将方形和水平方向的长方形图像混合并匹配到一个超大的网格中。

用户从一开始就对每个项目都有良好的感觉。 超大的网格图像添加元素之间的一些夸张的间距是一个需要注意的诀窍。 每张图片上还有一个漂亮的悬停动画，带有项目的名称和类型，可在你单击之前提供更多信息。


16.明亮有趣的美学（Bright, Light Aesthetics）



没有人说设计一定就必须是无聊的。 尽管这些设计中很多都是深色或白色的，主要是因为这些颜色使查看项目变得容易，但明亮，有趣的颜色选择也可以使用。

Denys Mishunov的作品集网页设计就是利用色彩和插图脱颖而出的一个很好的例子。 明亮的配色方案引人注目，插图是超大的形象图使页面变得有趣。

当你从事前端，JavaScript，培训等类似的工作时，一点点创意就可以提供很大的帮助。 它不仅有助于吸引用户，而且还可以说明你的工作风格和设计理念（这可以帮助你找到合适的客户）。


17.颜色叠加（Color Overlays）



主页设计是创建投资组合最具挑战性的事情之一。 你如何以诱使用户实际点击的方式预览工作或项目部分？

答案可能是部分掩盖工作。 在预览图像链接上使用有趣的颜色叠加是鼓励用户单击项目在视觉上吸引人的方法。 这样一来，你就可以在网站的不同部分保持一致的外观和风格，从而使你的首页更整洁，并确保一个页面的加载不会太繁琐且加载缓慢，为你提供了在点击之前突出显示项目内容的机会。

Heather Shaw的作品集之所以起作用，是因为每个项目都如此不同，但是通过彩色叠加，使首页具有连贯的感觉。 由于带有客户名称和项目类型的标签，用户还知道他们将要查看哪种项目。 这是一种高度可导航且易于理解的格式，在视觉上很有吸引力。


18.简化展示（Streamlined Project Showcase）



投资组合的外观和风格更加简化，。 仅显示少量重点项目可能会有好处。

它确保用户仅看到你希望他们关注的内容，而不会分心。

Stefanie Bruckler使用模块网格格式，在包含充足空间上展示的项目却较少。 此外，所有内容均位于主滚动条的下方，该滚动条具有极简风格的名片样式设计。

外观精致优雅，为这位设计师的工作定下了鲜明的基调。

总结

仍然还没有准备好重新设计你的投资组合吗？ 尽管这是一个创意项目，但无论你是为公司工作还是作为自由职业者，这也是对你的业务的投资。