文章摘要：
1.艺术家线上作品集案例
2. 上线了网站制作流程演示
作为一名艺术家，你希望自己的作品给观众留下深刻的印象吗？那么使用适合的网站制作工具会很方便，这样你可以建立一个自己的网站，展示自己的得意作品，并且将自己的网页设置得美观。精心设计的网页才有可能吸引新客户并增强现有的粉丝粘性。
一、艺术家线上作品集案例对于一个艺术家来说，技术可能不是你的强项。不过这样没关系，在不懂技术的情况下，你也可以通过个人网站建站工具，来快速生成网站。现在市面上的建站工具鱼龙混杂，新手尽量选择操作简单、零门槛上手、模板设计美观、知名度较高的类型，比如「上线了」，傻瓜式操作，而且模板设计感强，简洁欧美范儿，能起到很好的吸睛、展示效果。
上线了建站案例，禁止转载
上线了提供的各种艺术家网站模板，可以有效地突出你的作品并使你的才华广为世界各地所知。就像下面这些案例：
案例一：
如上图所示，Vincent Figliola是一位创意总监，最近从纽约搬到新墨西哥州，在不同的风景中追求艺术。他的网站展示了艺术家作品集网站应如何设计：简单，重点突出，个人风格鲜明，必要时可以使用视频来展示作品。
好的艺术家网站应从一开始就展示艺术家的作品。通过观看该网站访问者的影片，你会发现网站架设者精选了该艺术家的新作品。此外，访客还可以获得他的作品集的PDF版本，可以在网站上下载。对于正在积极寻找与之合作的艺术家的访客来说，这尤其有用。对于那些以后可能希望离线查看你的作品的人来说，你网站上的可下载的线上作品集可能会派上用场。
案例二：
如上图所示，汉娜·坎皮恩（Hannah Campion）的主页也非常不错，利用空白空间将视觉焦点吸引到她的作品上。她的作品充满了鲜艳的色彩和图案。这也说明了使用繁杂的背景可能会使访客感到不适，而巧妙地使用网格布局、留白则可以使网站更简洁，更突出。
案例三：
另外下图这个个人插画网站也不错，通过头图简单地介绍了自己之后，就用商城版块列出了自己的插画作品及价格。画师将自己的插画网站作为一个卖画平台，在网站上上架商品——自己的插画作品。然后，只需等待潜在顾客浏览并下单。这样的作品集网站对于想要接单的画师来说是非常方便的。
上线了建站案例，禁止转载
二、网站制作流程演示大家看了案例之后是不是非常心动呢，其实制作一个这样的作品集网站非常简单，不需要任何技术。直接在「上线了」注册账号后选择【创建网站】，再选择一个“个人”或者“作品集”类别的模板。
本展示页所提供的模板及元素仅供展示功能效果，未经授权不得应用于其他用途
点击模板进入后台编辑页面，在这里你可以添加各种功能版块。网站页面就是由各种不同版块做成的，如果做个人插画、作品集网站，你可以添加标题、网格、相册、大尺寸媒体、横向布局、纵向布局、商城、博客、联系方式、自定义表单等版块来展示作品，和访客沟通。
在左上角【风格】里，你可以更改网站的主题风格、字体、模板；在【设置】-【域名】里，你可以设置网站域名。你还可以在网站页脚添加社交媒体图标，链接到自己的微博、抖音、B站等各媒体平台，吸引更多粉丝。
上述全部做好并预览无误后，点击左下角“上线”就好。
这样一个作品集网站就做成了。做好后，你还需要好好设计，避免网站千篇一律，可以从这3方面入手：
（1）多样化版块布局
上线了网站的版块布局是可以修改的，也可以自由拖拽，顺序也可调整，你可以选择喜欢的布局，让网站更加个性化。
（2）个性字体
上线了支持有自定义域名的用户上传自定义字体，在编辑器里点击风格-字体，点开任一字体类型，从本地上传一个字体文件就好。
（3）多图展现
图片是体现网站个性和时尚的重要部分。现在人们越来越倾向于碎片化阅读，因此你的个人网站也不宜放太多文字内容，尽量多用图片和视频，让网站更有活力。
编辑导语：互联网时代，网站设计是一个老生常谈的话题，近期康奈尔大学对副业社区网站设计进行了案例研究，希望能够给你带来一点新思路，一起来看看吧！
今天为大家带来的文章是一篇来自康奈尔大学的学生所做的案例研究。设计思维是在设计界中一个老生常谈的话题。斯坦福设计学院将设计思维分成 5 大步骤：“Empathy 同理心思考”、“Define 需求定义”、“Ideate 创意构思”、“Prototype 原型实现”、“Test 实际测试”。作为设计师，如何把理论落到实地，通过设计思维来指导我们的设计，一直是一件很重要的事。作者运用了定义问题 —— 调研 —— 创意 —— 原型 —— 测试这一设计思维模型，向我们呈现了完整的设计流程，并录制了低保真原型测试的视频，非常值得我们学习。
在康奈尔大学，学生们除了完成学校的课业之外，经常会在空闲时间展开具有挑战性的创业追求。他们的目标是解决学校内外真实世界的问题。通常，这些创造性的追求被称为 “副业“。在过去的一个学期里，我们四名设计学生组成了一个小组，专注于改善康奈尔大学的学生寻找副业的体验。
康奈尔大学每年招生总人数经常在 2 万以上，其中有很多优秀的学生，他们的学习经验横跨工程、设计、商业等多个职能领域。然而，他们寻找副业项目合作伙伴的过程却不尽如人意，一直缺少一个能让他们轻松地找到其他伙伴，并自由地从事他们想从事项目的包容性社区。
因此，我们希望能够弥补这一空白，并创造一个能够将学生们连接在一起从事副业的产品。我们小组着手设计了 “CoCreate“—— 它是一个社区，康奈尔大学的学生可以在这里加入副业项目，关注他们感兴趣的类别，或者发布自己的副业项目，并寻找志同道合的小伙伴进行合作。
我在项目中担任的角色：UX 设计师、用户研究员。
正如下面所呈现的，我们的解决方案 “CoCreate” 让用户通过我们的平台来发现康奈尔大学的副业项目。
图1、在副业社区中与他人互动（关注一个分类、喜欢一个项目或者发布一条评论）
图2、申请加入一个副业项目
一、核心问题核心问题— 作为一名学生，当我想从事一个副业项目，往往需要一群拥有各种技能的人来合作，这样才能拥有合适的团队和人力资本，来完成这个项目。然而，要做到这一点往往很困难：
可能很难找到愿意投入时间的学生；很难找到一个刚好具有这个副业项目所需的各种技能的人；可能一开始没有关于项目具体的想法，想从别人的项目中吸取一些灵感。 二、背景调研我们访谈了几位从事过副业项目的康奈尔大学学生，并得到了一些关键的洞察。
1）学生们在开始从事副业的时候通常会在自己的朋友圈子中寻找熟悉的人—— 而这往往会限制他们无法找到潜在的优秀团队成员。
“主要是通过 Facebook 联系朋友，但也会想找其他队友”“找队友时先问朋友”2）在从事副业时，学生们受到的激励主要是学习和成长过程带来的成就感，相较于副业最终带来的结果，他们主要关注的是学到新的技能。
“喜欢团队的感觉……能和大家一起学习”“不在乎项目是否盈利 —— 更在乎学习”“想学习新技术并愿意学习新工具”“主要激励我的是能学习新技能”3）学生们希望团队成员是可靠的：善于沟通且具有良好的时间管理能力。
“寻找团队成员时，时间管理和沟通技巧很重要 ““（想寻找）良好的合作”“团队活力很重要 —— 这决定了我们能否相处”“（希望有）相似的价值观”4）学生们会根据他们将要开展的项目所需技能去寻找其他的学生。他们希望合作伙伴能有过人技能，从而使项目更易成功。
“寻找技术型人才”“寻找有相关技能的人”“喜欢掌握多种技能的小伙伴” 三、用户调研我们关注的用户群体是那些 身为创客并且有从事副业的愿望的学生—— 具体来说，就是那些难以找到一个好的点子或者合作伙伴的创客学生。我们团队希望更多地了解从事副业的学生过去的经历，因此我们拟定了访谈提纲，采访了四位学生。利用得到的访谈记录，我们制定了下面的亲和图[1]（Affinity Diagram）。
（[1]亲和图：是一种整理想法和数据的工作方法，即把收集到的事实、意见或构思等语言资料，按相互亲和性（相近性）归纳整理，以明确问题、统一认识、协调工作，帮助问题的解决。）
四、用户画像我们根据上面的亲和图拟定了一个名为 “James” 的用户画像，以反映我们在用户调研中得到的洞察。
1. 明确用户目标与需求我们首先将用户目标和用户需求分为不同的组别，如下表所示。
五、创意构思1. 头脑风暴经过团队的一番头脑风暴，我们将可能且可行的解决方案提炼为六个不同的机会点：
一个关于副业的社交媒体网络；一个连接技能资源的平台；团队版 “EdX“[2]；一个在康奈尔内部发布项目和寻找创业团队的 APP;一个寻找伙伴的副业网络;一个寻找合作伙伴的 APP。（[2]EdX是一个由麻省理工学院和哈佛大学创建的大规模开放在线课堂平台。它给大众提供大学教育水平的在线课堂及微硕士学位。）
因为我们已经开始提炼头脑风暴得到的想法，并将其设想为实际的解决方案，所以评估了目前市场上的各种解决方案。
六、市场调研我们在调研中发现了四种类型的产品，并在下面列出了每种类型的案例，以及每个解决方案存在的潜在缺点。
第一种：可以发布副业项目并招募合作伙伴的社区很难与潜在的小伙伴形成强烈的理解 / 联系；人们在社区中倾向于和身边的人一起工作，而不是在大学中寻找其他人作为合作伙伴。案例：Nomad 项目、Collaborizm、Quaranteam
第二种：训练营具有排他性，没有低准入门槛限于短时间内，且较仓促的项目进程，不适合长期研究案例：Origin、BKYD、Hackathons
第三种：互联网网站网站的主要内容不是针对副业，因此不利于发起副业项目。
案例：CuELinks、LinkedIn
第四种：当下正在开展的社区具有排他性；进入门槛高，要求有一定的工作经验或娴熟的技能。案例：康奈尔工程项目团队、康奈尔创意小组、Clubfest、eHub
七、我们的解决方案：共创利用头脑风暴得出的 idea 和对现有解决方案的评估，加以对用户需求的调研分析，我们决定为副业社区设计一个面向康奈尔大学学生的网站，名为 “ CoCreate ”。
CoCreate 解决的四个主要任务：
发现有趣的副业并加入；（图1）在副业社区中与他人互动（关注一个分类、喜欢一个项目或者发布一条评论）；（图2）发布一个副业项目；（图3）为自己的项目招募合作伙伴。（图4）图1、请求加入副业项目页面
图2、社区互动页面
图3、发布一个副业项目
图4、为自己的项目招募合作伙伴
信息架构：
纸面原型：低保真草图
这是我们低保真草图的视频展示，为了便于理解我们还添加了旁白。这种纸面原型是为了接收用户的反馈和识别用户所面临的各种困难，针对得出的痛点进行迭代。
用户反馈：
“加入项目” —— 社会关系和项目描述的界面：
用户并不在意一个人的关系网中有多少人，相反，用户关注的是这些人是谁。此外，用户点击 “请求加入”时，为了看到项目描述而来回翻页，这让用户感到麻烦，因此将项目信息放在消息输入旁边更合理。
“社区互动” —— 评论界面：
评论按钮看起来像一个搜索图标，可以用传统的评论图标来代替，如果在高保真原型中在产生混淆的时候可以将其直接删除。
“发布项目” —— 流程不清晰：
用户抱怨发布项目的流程很混乱，有时候把这一流程误解为在招募成员。这可能是招募功能区域划分不够清晰，因此我们利用了格式塔共同区域原则更好地将他们分开。
“搜索合作伙伴” —— 让寻找合作伙伴更容易：
用户反馈中提到在搜索合作伙伴时希望有一个更清晰的页面，以便更好地发现和找到要招募的人。
中保真原型：
在进一步分析了用户为我们的低保真原型提供的反馈后，我们根据建议进行修改并创建了一个中保真原型。
目标和指标：
在创建了中保真原型之后，我们又找到了四个用户来测试我们的原型。在进行可用性测试之前，我们建立了相关的目标和指标。接下来，我们开始对 4 个不同的人进行可用性测试。
可用性测试：
根据我们对四个用户的可用性测试，我们开发了一个 UPI（UX 问题实例，UX Problem Instances）和UDP（UX 设计问题，UX Design Problems）的列表，并整合到了一个 Google Sheets 文档中。
以下是我们考虑的一些主要 UDPs 和解决方案：
（1）用户对项目发布创建的流程感到困惑
解决方案：项目创建流程的任务完成顺序容易让用户产生疑惑，所以要将子任务分割到不同的屏幕上。
（2）用户在与个人和他们的个人资料互动时遇到了困难
解决方案：用户不理解该页面的目的，因此我们考虑的解决方案包括表明 “人 “页面是为了招募合作伙伴，将 “连接”改为 “相互连接”，并使个人资料页面看起来与其他网站上传统的个人资料页面更加一致。
（3）用户对于订阅项目类别感到困惑
解决方案：增加了更多的用户反馈，当点击图标时，清晰地显示出一个类别已被订阅，并告知用户订阅的类别将被添加到 “你订阅的类别 “中，并使项目组件在此页面和主页时保持一致。
高保真原型：
在进行了可用性测试之后，我们利用上面对 UPIs 和 UDP 的分析来改进我们的原型，开发了高保真原型。下面是我们最终的交互效果～
CoCreate 海报展示
最后，我们的团队一起为产品制作了一张海报！我们在课程中向 200 多名学生展示了这张海报，其中包括 40 多个团队的成员，这为我们整个项目提供了更宏观的概览。
八、未来的方向当然，我们不可能在一个学期内完成所有的内容，但我为我们团队所作的成果感到骄傲，我相信 CoCreate 在未来有巨大的发展机会。如果未来时间允许的话，我们准备下一步添加以下的功能。
设计个人资料的界面和流程，让用户可以有一个 “个人资料页”；设计一个 “分享” 功能，让用户可以轻松地在其他平台上发布或展示这些副业项目；打造用户加入项目后继续参与项目时的 “团队“ 功能和流程界面。 九、总结归根结底，最初发起这个项目是希望它可以 团结康奈尔大学的学生，创建一个包容的社区，共同解决具有挑战性的问题。我们希望降低从事副业的门槛，让每个人都有机会参与其中。
在康奈尔，有一些可以自愿参加的组织，要求学生通过申请程序来从事类似的项目。作为这些组织的成员，我明白这是一个以多多益善为原则的游戏 —— 当周围的学生都在致力于为世界做出改变时，他们就可以相互影响，从而创造出更多有价值的产品。我们希望每个人都有机会去做自己的副业，不管是创业想法、兴趣爱好，还是其他的什么。我也特别开心，在我作为产品设计师的成长历程中能有这样一次很棒的学习经历。
十、反思学习产品设计是一种很棒的体验。我一直遵循着这样的建议：与那些会挑战你并帮助你成长的人一起学习。我的队友帮助我把最好的一面展现出来，也教会了我很多关于用户体验设计的知识。INFO 3450 这门课程对理解设计思维非常有帮助，它通过一种全面的方式结合了用户体验设计的理论与实践。我很高兴能参加下一门课程（INFO 4400），同时也很荣幸担任春季人机交互设计（INFO 3450）的助教。
小组成员：Manan Modi、Ravina Patel、Rachel Zhang、Tia Montgomery
作者：Manan Modi；译者：吴鹏飞；审核：李泽慧、张聿彤；编辑：徐小淇
原文：
本文由 @三分设 翻译发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
大多数在行业中有影响力的知名企业，都会对企业网站有着较高的定位、较明确的职能和更加肯定它的价值，以至于不少企业把企业网站当作公司的年度资产的一部分，是公司发展战略中的一枚重要棋子。因此，塑造一个视觉高端、品质高级、好看又好用的企业网站绝非易事，但掌握了这13个精品网页设计作品的精髓，你会发现做个好网站有路可寻。
一个优秀的企业网站，通常会在网站版式设计、网站交互制作、网站文案编辑三个方面做到卓越。
NO.1
这个网站设计作品采用了四格平分布局的删格系统，对网站主体内容区域进行科学划分和找准对齐规律。其次是在网站素材用图方面，运用3D素材。网站主角的造型、质感、色彩与整站的背景色浑然一体，细腻、精致、轻奢。
NO.2
这个网站设计作品堪称经典。如果你是一个男性访客，请把注意力集中在右侧的浮层内容上。左侧的美臀和Slogan展示核心内容的一小部分。当然，这个水蜜桃臀部，确实是很迷人，吸睛。但作为健身美容纤体行业的官网，网站的主要职能是展示右侧的健身项目上，美臀只是一个氛围的衬托。
NO.3
左右布局结构，灵动的汉堡式折叠菜单，收纳了很重要的内容菜单。主KV区域的人物造型与文字的结合，与底部一分为二的色块结合，非常巧妙。
NO.4
高端网站设计师，在网站选图、配图、制图方面一定是有丰富经验的。这个网站设计作品的选图和制图能力超强。光是产品造型图就给网站加分了。其次是色彩的分布和版式设计很赞。整体氛围很高端、质感十足。
NO.5
这里是产品详情页的内容展示页。超大字体与超细字体的对比，本身容易产生艺术感，形式感和设计感。夸张的主角产品图，把整个画面的平衡感拿捏住了。
NO.6
这个网站设计作品的色彩搭配方案不错，文字字体与产品造型结合，形成遮罩的神秘效果。核心内容区域的居中视觉，与周边的公共框架的组件，形成整个首页首屏的视觉平衡。
NO.7
这个品牌网站设计作品，跟第五个作品在风格创作上有相似之处。夸张但不失细腻，质感但又有些亲民，不特意强调工业。文字一行四列的布局设计巧妙。
NO.8
这个奢侈品手表行业的网页作品，页面内容信息量很大。除了展示产品本身信息之外，还需考虑用户互动的部分。即便如此，信息的层级感很鲜明。
NO.9
简约但不简单。Less is more. 在这个极简主义的网页设计风格当中体现得淋漓尽致。请注意网站页面四个角的组件设计，分别是课程分类入口、菜单导航入口、SNS多媒体链接和Banner海报切换按钮。这种无形的、通透的框架视觉上形成一个矩形布局。而内容区域的主KV设计，手法简约，淡蓝色的圆形让人物的造型和动作、力量得到高度展现。
NO.10
Y-3, 休闲时尚服饰行业的网站设计作品。黑白色彩搭配方案永远那么经典，高贵。产品与交互的设计是这个作品的灵动的地方。
NO.11
这个是一个交互动效设计超赞的网站设计作品。在交互设计方面越牛的作品，网站的版式、界面及内容就越简洁。
NO.12
网站的版式、配色和一些小组件的样式设计大胆、创新，有突破。
NO.13
最后一个网站设计作品采用的是居中对齐的布局方式。深灰色的圆形与主角的结合，周边的一些内容的切换和布局与圆形搭配，很吻合。
好了，以上就是今天推荐给大家的13个高级网站设计精彩案例。通过这些案例的讲解，相信大家已经能感受到优秀网站设计的一些技巧和思路。