2020年制作了新版本的作品集网站，也就是您现在看到的这个网站。我将用这篇文章简单阐述本次作品集网站的设计理念以及特点。

整体风格和主题色

这次的作品集力求打造简单清爽的版面， 并使得整个作品集网站呈现一致感。这些可以通过统一的简单排版风格（网格布局+内容瀑布流）和极简配色（红+灰+黑）来实现。

主题色使用偏暗的红色，避免网站过于鲜艳，同时和文章站（www.kamilet.cn）达成颜色一致；辅助色使用灰色，和黑色的文字形成不太强烈的柔和对比。

网站中部分辅助内容也采用同样的配色思路，利用主题色（或白色）完成辅助元素设计（客户Logo、软件图标和社交图标），以此实现页面的颜色协调统一。

尽管对客户Logo使用主题色或许不符合VI标准，但此处并非商业或宣传用途；另外实际服务对象有时并非企业或组织整体，而是其中的某部门，这样做也可以达到一定的品牌规避的作用。

移动响应和特效

全站采用移动响应设计，以确保合理的显示效果。按照常见分辨率，将设备划分为电脑端（PC端）、平板端（Pad端）和手机端（Phone端）三种类型，对不同设备进行了针对性的细节优化。

比如首页的关于作者部分，在很多细节处做了响应式处理：

在许多位置设计了鼠标悬浮动效，以增强作品集的互动性。当然，在平板和手机上，可能只有支持悬浮触碰的设备才能看到这些特效吧。

• 
  Adobe Illustrator
• 
  Adobe Photoshop
• 
  Adobe Lightroom
• 
  Adobe After Effects
• 
  Adobe Premiere Pro

比如在首页“创作工具”的部分，就有上面这样的悬浮旋转特效（上面的例子仅作展示，超链接已经删除）。而在关于页面的“合作案例”部分，则有下面这样的悬浮显示详情的特效（仅支持电脑端和平板端）。其他位置的特效请在本站自行探索！

上海市民体育大联赛
平面广告设计、现场展品设计、活动道具设计

波奇网
活动策划包装、现场展品设计、晚会现场主控

慧读国际
活动策划、品牌包装、网站设计、网站搭建

松下电器
活动策划包装、平面广告设计、公众号运营

中塑包装
网站设计、网站搭建

特殊页面和缺省页面

部分特殊页面进行了针对性设计，以实现理想化的展示方式。比如“设计和管理的站点”页面，由于要展示不同尺寸的预览图，采用了表格式布局。而“室内弱光摄影”等图片较多的影集，则采用了网格布局以充分利用高分辨率设备的宽度。

对于首页、关于页等特殊用途的页面进行了专门设计，以实现对复杂内容的合理排版，同时保证页面的移动响应能力。

在404页面、搜索结果为空、空文章类型或标签等“无内容”的页面，设计了迎接引导和内容推荐模块，保障用户在网站内获得比较流畅的浏览体验。

使用工具

• Adobe Illustrator（元素素材设计）
• WordPress（网站框架，页面设计）
• Notepad++（页面代码撰写）