已加载全部内容

Arun.is 网站改版:回归现代主义平面设计

链接
分类
文章灵感设计2022-04-30 10:00:00
简介

Arun Venkatesan 的网站 arun.is 改版,抛弃圆角,回归现代主义平面设计,设计灵感源于视觉搜集而非庞大的 design system。

相似条目

笔记

Beta

文章页头标注网站由 Astro v5.17.2 生成,表明当前 arun.is 2.0 已采用 Astro 作为构建工具。

arun.is 早期使用 Cactus 作为静态站点生成器,后迁移至 Gatsby。

arun.is 曾长期使用 Gatsby 构建,经历多次版本升级;Gatsby 提供阅读时长估算与字数统计功能,作者在此基础上做了少量优化。

文章中作者使用 Figma 插件将 Google Sheets 中的调研反馈导入进行可视化整理,并在其设计系统文件中新建页面尝试排版与字体组合。通过反复迭代 Figma 画板,逐步建立起黑白灰、线条与字体层级统一的视觉语言,最终作为 Tailwind 配置的参照基准。

作者在两周 redesign 计划启动前,将整理好的待办事项在 Linear 中创建为项目与 issue,以便后续设计与开发流程更顺畅可追踪。该工具帮助其在有限时间内保持专注并按优先级推进 arun.is 2.0 的各项改动。

本文中 Inter 是网站标题和正文的主要字体,作者尝试过衬线字体后最终决定保留 Inter,并通过不同字重区分层级,以此刷新整体视觉而不造成突兀变化。

IBM Plex Mono 被选为代码、键盘快捷键和等宽文本的字体,作者认为它与 Inter 既保持关联又形成区分,适合在 arun.is 2.0 中展示技术内容。

暗黑模式是读者最常请求的功能之一。本次 redesign 中作者重新设计色彩体系,使每个组件都能轻松在明暗模式间切换,并解决了此前配色与维护难题,提升了阅读舒适度。

作者数月前完成从 Tachyons 到 Tailwind 的迁移,利用其高度可定制性将 Figma 设计系统参数直接写入配置,实现与设计稿完美对应。文中称其比 Tachyons 强十倍,并支持暗黑模式等新特性,为 2.0 改版奠定基础。

GraphQL用于查询博客文章等内容数据,并将查询结果传入展示组件。作者将处理GraphQL查询输出的重复逻辑提取为通用工具函数,其中包括通过正则表达式移除标题排版问题的实用方法,以降低代码重复并提升可维护性。

作者通过节日问卷收集反馈,结果导入 Google Sheets,再用 Figma 的 Google Sheets 插件同步到设计稿中进行视觉整理与优先级排序。

本文中 Inter 是网站标题和正文的主要字体,作者尝试过衬线字体后最终决定保留 Inter,并通过不同字重区分层级,以此刷新整体视觉而不造成突兀变化。

IBM Plex Mono 被选为代码、键盘快捷键和等宽文本的字体,作者认为它与 Inter 既保持关联又形成区分,适合在 arun.is 2.0 中展示技术内容。

本文中 Tachyons 是作者过去五年主要使用的函数式 CSS 工具包,曾助力快速从设计稿转为原型。但因难以定制、更新停滞且缺少暗黑模式等新特性,最终被放弃。作者为适配自身断点和宽度与之反复斗争,促使其转向更灵活的替代方案。

作者认为此前带阴影与圆角的网页应用风格与站点内容不符,因此决定回归其最喜爱的现代主义平面设计风格。通过收集灵感并提炼极简灰度、大尺寸细字重等元素,最终形成新的站点视觉系统。

作者长期推崇函数式 CSS,因其让设计过程更接近直接排版而非编写代码,能最快将 Figma 稿转为可交互原型。Tachyons 与 Basscss 均为其实践载体,后因定制局限转向 Tailwind。

作者数月前完成从 Tachyons 到 Tailwind 的迁移,利用其高度可定制性将 Figma 设计系统参数直接写入配置,实现与设计稿完美对应。文中称其比 Tachyons 强十倍,并支持暗黑模式等新特性,为 2.0 改版奠定基础。

旧版博客的“热门”排序曾模仿 Hacker News 与 Reddit 的重力算法,但因更新频率低导致该选项与“最新”效果近似而被移除。作者在 2.0 中简化了排序选项以提升可用性。

文章提到《Roots and Wings: Peter Schreyer: Designer, Artist, and Visionary》一书回顾了 Peter Schreyer 的作品,他是德国最具影响力的汽车设计师之一。该书被作者列为收集设计灵感的来源之一。

Polestar 的品牌设计语言被作者列为主要灵感来源之一,其在印刷品、网站与车载界面间保持的高度一致性给作者留下深刻印象。作者特别借鉴了它大量使用灰度与大而轻的字体排版方式,以此更新 arun.is 的视觉层次。

Stockholm Design Lab 为 Polestar 打造了跨媒介统一的设计语言,作者称其表现极为出色。该设计团队对灰度与字体的一致运用,直接启发了 arun.is 2.0 的配色与排版策略。

IEEE Spectrum 的 Pentagram 改版被作者作为另一灵感来源,其使用线条、微妙圆角与少量色彩点缀的方式被重点关注。作者长期阅读该杂志,此次重新审视其视觉更新,以丰富自身站点的细节表现。

本文中 Pentagram 负责 IEEE Spectrum 的 redesign,设计方向更贴近前沿科技主题。作者特别留意其线条运用、细微圆角处理以及偶尔的色彩点缀,并将其作为 arun.is 2.0 的灵感来源之一。

Gestalten 出版了 Peter Schreyer 的作品回顾书籍,书中采用简洁网格与巧妙排版,营造出既现代又贴合实用主义作品的视觉风格,成为 arun.is 2.0 设计参考。

Gwern Branwen 的网站结构直接影响了 arun.is 新博客页的设计。作者借鉴其顶部展示近期与热门文章、随后按主题分类的布局,并用 Figma 梳理出自己的主题层级体系。

本文中Reddit被用作“HOT”排序系统的参考模型,该机制借鉴了基于重力算法的热度计算,与Hacker News类似。由于网站内容更新频率较低,这种排序方式与“New”选项效果接近,作者在2.0版本中移除了该功能以简化博客归档页面的排序选项。

Basscss 是作者在 Tachyons 之前使用的函数式 CSS 工具包,同样服务于快速原型开发阶段。文中仅提及这一使用历史,未展开具体优缺点或迁移细节。

本文介绍 arun.is 网站自 2016 年创立以来的最大升级,即 2.0 版本 redesign。作者回顾了从作品集到近百篇博客和新闻通讯的发展历程,并说明了新版在视觉设计、信息架构、导航、阅读体验及底层技术上的多项改进。

作者在 2017 年将为 Carrot Fertility 的自由职业转为创始人角色,随后退出自由业务并移除案例研究;最近离开该公司以休整并投入 arun.is 2.0 的 redesign。

Visual Studio Code是作者开发arun.is时使用的代码编辑器。在2.0重构中,作者打开该编辑器检查代码时发现了大量技术债务,包括组件中逻辑、标记与样式的混杂。作者据此将部分文件拆分为逻辑层与样式层,并提取可复用工具函数。

旧版博客的“热门”排序曾模仿 Hacker News 与 Reddit 的重力算法,但因更新频率低导致该选项与“最新”效果近似而被移除。作者在 2.0 中简化了排序选项以提升可用性。