为自己设计是最难的
我想这是因为很难对自己的创作百分之百满意。我们是自己最挑剔的客户,经常问自己“这样够好了吗?明天后天我还会这样吗?”
也许诀窍在于用一种一双新鲜的眼睛和从很远的地方。对我来说,只有当我给自己足够的时间去创造一些东西的时候,这才有用。当我重新设计我的博客时,我确实这么做了——事实上,这花了我太长的时间。但我很高兴地说,我现在可以埋葬我感受了这么长时间的挫败感。
下面是我的博客重新设计过程的概述——什么可行,什么不可行,以及介于两者之间的一切。我希望对我的过程透明对任何考虑个人重新设计的人都有帮助。我们开始吧!
标志图标设计
早在2016年,我就为自己设计了一个标志,迈出了第一步。我想信里可能有些东西V。有一个标志的想法已经玩了很长时间。2015年底,我尝试了一下,但没有成功。实验阶段是最重要的,也是创造过程的核心——通常会带来意想不到的结果。
我尝试了很多东西,包括一些我的名字,但是我尝试的所有概念都不够强大。它们看起来要么像插图,要么更像包装标签。起初,我想把钢笔工具图标,矢量插图的链接。同样,我无法将这个想法转化为一个强有力的结果。我想要更简单、干净和现代的东西。
我决定把注意力集中在字母V的形状上,最终我找到了灵感。我100%确信就是这个。那种火花总是在意想不到的时刻击中我。
就排版而言,我不需要太多时间来决定使用哪种字体。我已经看上了布兰登怪诞很长一段时间,我喜欢它有某种相似之处中性面我之前用过的。尽管在我做出决定后不久,我注意到这种字体被经常使用,但我并不在乎。我只是觉得这是我的网站的完美选择,所以我决定坚持下去。
除了布兰登奇形怪状,我还用 当地的作为次要字体,因为我需要一个等宽字体,以防我想在我的博客文章中分享HTML或CSS标记。受到启发后贝瑟尼·海克的标本创作对于这种字体,我真的很想使用Native,不仅用于标记,还用于创建显示博文日期的标签。在我创作这个的阶段,我尝试了很多使用三角形的想法。这个想法是重复使用v图标贯穿我的设计。你会在页眉插图对于第一个主页设计的一个更深入的文章。在最终的设计中,我也用Native来表示我的教程中步骤的数字,以及五个推荐文章主页上的概述。
拥抱实验阶段
我在博客整体设计上迈出的第一步实际上是在几年前,当时我尝试为我的标题创建一个彩色的、吸引人的背景插图。
我被一种建筑物的照片我发现了惊人的图案、形状和颜色。在我的脑海里,我知道用这张照片作为一个网站的灵感有点疯狂,考虑到所有的波浪线。不管怎样,我必须尝试一下,然后再担心执行的问题,因为对我来说,这只是一个额外的挑战。添加到v图标与复杂的波浪曲线形成了额外的对比。
现在回过头来看这个,我也不确定当时脑子里到底是怎么想的。你看,我确实花了很多时间画这幅插图。它不是用某种快速智能效果弯曲成那样的。不知道,我一行一行地画了这条线但是因为我玩得很开心,所以我不介意额外的努力。
讽刺的是,我最终放弃了这整个概念。但是现在回想起来,尽管我在插图上花了很多时间,但我从中获得了很多乐趣,并且知道我可以在未来重新利用它。这些年来我学到的是你不应该总是相信你大脑的理性部分。相反,看看你的想法会把你引向何方,并欣然接受这一过程。实验阶段是最重要的,也是创造过程的核心——通常会带来意想不到的结果。
定义调色板
首先,我从定义调色板开始。至于我博客的内容,我唯一100%确定的是保持我的灵感流。在最初的设计阶段,我想我会继续写更多的东西图表的&网页设计,通过纳入我除平面设计之外的其他爱好,保持内容的广泛性:现代家居设计,自行车运动,以及音乐。我设想用一种颜色和图标来标识每个部分,如下图所示。
新的设计方向
回到绘图板,我决定进入一个完全不同的方向。受到一些人的启发后内墙装饰在Pinterest上,我决定这绝对是我想要继续前进的方向。几何形状和图案一直是我的事情,所以我创造了以下一套几何象形图我可以用它来定义我博客的不同类别
在我设计了一个新的标题后,我的灵感来自于我的logo中的线条,主页设计的基本概念是显示一个简单的博客文章流。每个职位将在它所属的部分的颜色风格,我也有灵感流帖子混进去了。只是我当时不确定是一个一个的给他们看还是2个4个一系列的给他们看。所以我仍然在思考如何实现这一部分...
对于文章页面,我想到了使用一个标题,无论它属于哪个部分的颜色,并可以选择用一个英雄图像替换平坦的颜色背景。至于文章页面的整体布局,我想要非常灵活的东西,使我能够在不同的布局块中显示我的内容——有点像杂志的感觉。如果我想做一些完全不同的事情,我想保留这个选项,例如能够使用分裂英雄头球或者可以选择使用自定义HTML和半铸钢ˌ钢性铸铁(Cast Semi-Steel)。
在专注于客户工作一段时间后,我回顾了我的重新设计工作,并意识到我不喜欢我创造的东西。我对整体设计不太满意,尤其是我博客文章的展示方式。我决定重新思考一切,以一种视觉上吸引人的方式将灵感流放在我的帖子顶部。这灵感流对我的博客文章整体来说是同样重要的,所以它肯定需要一些关注。在为我的博客内容进行了一些头脑风暴后,我确信我应该减少话题的数量,把注意力完全集中在装帧设计艺术,网页设计,以及灵感。
那时我决定使用这些新的图标和颜色。这些图标的灵感主要来自于流线型图标由…创造文森特·勒莫因又叫做Webalys。
灵感标题
当我需要灵感的时候,我通常会去找自己的灵感灵感流,拼趣,以及滴水不漏。我记得我很受鼓舞很酷的字母设计我看到了看起来像插图靠他们自己。这些启发我为我的灵感流创建了以下标题:
跟上这一势头
在设计了新的标题后,再次受到启发感觉很好,最终感觉我回到了正轨。我有一种很好的感觉,那个头球将会是我一段时间后回顾的东西,并且仍然喜欢它。为了保持这种势头,我创造了一个完整的字母表作为首字下沉为了我的文章。
尽管我觉得很有灵感,但我仍然必须改进标题设计,并思考我的主页的整个设计。我用简单的方形图案和彩色图案的混合创造了一个拼凑的背景插图几何象形图我之前设计了。起初,我做了一堆不同的正方形图案,然后我用它们作为拼图的一部分,最终得到了这个结果:
步入正轨:最终设计
我留出了足够的空间将我的V形图标放在顶部中间。我的想法是用这个作为我的主页标题。就在这个过程的后期,我决定用这个拼凑的插图作为背景图片,因为用它作为我的动画标志旁边的背景有点让人不知所措。
我还重组了我博客的不同部分,以便尽可能简单地浏览。现在只有两个部分:文章和灵感。在文章部分有子类别,如网页设计,装帧设计艺术,以及设计过程每一个都有指定的颜色,就像我之前计划的那样。因为教程是一个非常重要的文章类别,我决定将它添加到我的菜单栏中。在最后一个阶段,我也把颜色从芥末黄变成了紫色。芥末黄色有点太浅了,不容易辨认。
后来,当我已经在编写静态HTML模板页面时,我添加了反弹(CSS)动画。这样,我可以保持V形图标的背景,但不会占用太多的垂直空间,并增加了这个漂亮的噱头。有趣的是,在CSS中制作这样简单的动画是不需要Javascript的,如果浏览器不支持这个CSS,页面就会保持原样。
一边编码一边设计
不知道其他图形设计师,也是像我一样的网页设计师,在设计他们自己的网站时会遵循什么过程,但在我的例子中,我并没有在Adobe Photoshop(或者交互设计的神器,我目前的选择)。相反,我只创建了页面的片段或部分,其余的我直接用CSS创建。对我来说,这是完成设计最灵活有效的方式。
微调
在这个编码阶段,我仍然调整了很多细节,做了很多微调。如果你看看上面的主页设计,并与网上的进行比较,你会注意到版式并不完全相同。您可以在浏览器中查看所有内容,因此交互和所有内容都更加真实。
手机版
也是在这个阶段,我实际上考虑过将布局扩展到移动领域。也许有些人不赞成等这么久,但我确实一直在想基本的调整场景,因为整体布局也相当简单。只有主导航需要对最小的屏幕进行一些实际的思考。
我想避免使用隐藏菜单。我决定我可以用tuts的作为我的教程的缩写,只是灵感部分的滴管图标,同时保持事情足够明显。毕竟,主页也直接提到了这些部分,用颜色编码等等。
这就是我的整个设计过程。从你刚刚读到的,我敢肯定你可以告诉这肯定不是一个简单的设计过程。这实际上是相当混乱的,不像我可以简单地遵循和完成的清单。对我来说,这个设计过程更像是一个迷宫或谜题,我试图尽我所能把所有的东西拼在一起。
我对任何考虑重新设计个人品牌的人的建议是,对这个过程要有耐心。你可能会充实成吨的概念,但这并不意味着尝试它们是无用的。它们可能会激发你最终喜欢上的其他想法,或者你甚至可以用其他你意想不到的方式实现它们。试着享受过程,拥抱混乱!