文章, 随笔杂谈

作品集设计理念

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

整体风格和主题色

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

主题色 #dd4f4f

辅助色 #555 非固定

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

作品集设计理念 - Wordpress, HTML&CSS, Adobe Illustrator - essay, article

作品集设计理念 - Wordpress, HTML&CSS, Adobe Illustrator - essay, article

作品集设计理念 - Wordpress, HTML&CSS, Adobe Illustrator - essay, article

作品集设计理念 - Wordpress, HTML&CSS, Adobe Illustrator - essay, article

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

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


移动响应和特效

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

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

PC端:完整显示。
PC端:完整显示。
Pad端:缩减了模块距离,将小标题的冒号隐藏。
Pad端:缩减了模块距离,将小标题的冒号隐藏。
Phone端:纵向排列,水平居中。
Phone端:纵向排列,水平居中。

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

  • 作品集设计理念 - Wordpress, HTML&CSS, Adobe Illustrator - essay, article
    Adobe Illustrator
  • 作品集设计理念 - Wordpress, HTML&CSS, Adobe Illustrator - essay, article
    Adobe Photoshop
  • 作品集设计理念 - Wordpress, HTML&CSS, Adobe Illustrator - essay, article
    Adobe Lightroom
  • 作品集设计理念 - Wordpress, HTML&CSS, Adobe Illustrator - essay, article
    Adobe After Effects
  • 作品集设计理念 - Wordpress, HTML&CSS, Adobe Illustrator - essay, article
    Adobe Premiere Pro

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

上海市民体育大联赛
平面广告设计、现场展品设计、活动道具设计
波奇网
活动策划包装、现场展品设计、晚会现场主控
慧读国际
活动策划、品牌包装、网站设计、网站搭建
松下电器
活动策划包装、平面广告设计、公众号运营
中塑包装
网站设计、网站搭建

特殊页面和缺省页面

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

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

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

使用工具

  • Adobe Illustrator(元素素材设计)
  • WordPress(网站框架,页面设计)
  • Notepad++(页面代码撰写)