作品集设计理念
2020年制作了新版本的作品集网站,也就是您现在看到的这个网站。我将用这篇文章简单阐述本次作品集网站的设计理念以及特点。
整体风格和主题色
这次的作品集力求打造简单清爽的版面, 并使得整个作品集网站呈现一致感。这些可以通过统一的简单排版风格(网格布局+内容瀑布流)和极简配色(红+灰+黑)来实现。
主题色 #dd4f4f
辅助色 #555 非固定
主题色使用偏暗的红色,避免网站过于鲜艳,同时和文章站(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++(页面代码撰写)