如何用5个真正不同的步骤设计一个主页

本文是翻译,版权归原作者所有


优秀的主页设计是非常难的。在过去的十年,我研究了伟大设计师的作品,我学得越多,我意识到我知道的越少或越不擅长,甚至只是过得去。

撰写精良的文案,高雅的审美,对受众的深入理解以及连结他们的心理技巧——所有这些因素引发了优秀的设计。达到完美需要所有这些前提,甚至更多。

难上加难。

每个企业家的目标是建立一个由令人称赞的明星忍者设计师组成的团队,不过直到你有了认识、钱、或真正不错的运气,你才能凭借你具备的条件做到最好。

我具备的有:a)为Clubhouse建立营销主页的责任;b)上面提到的那些设计资格的起码理解。

本月,为了我们的即将上线的社区平台Clubhouse,我从头开发了一个营销主页。就本文讲,自从初稿以来,我就首次以此为荣。

我不是一名设计师,但是我想我愿意和还在为类似挑战而战斗的人们分享我是如何做的。

第一步:撰写文案

设计主页-文案

去理解你与其他人的产品关系的本质是一个漫长的过程;我甚至不确定有没有尽头。

注意,人们是如何思考的、什么对他们是重要的、你的产品或服务可能怎样走进他们的生活,这是你应该总是寻求更深入理解的工作。

总的来讲,人类是古怪的。我们都有自己的性格、优先级和在世界运行着的模型,为了创造伟大的作品,你需要体会,并为之奋斗。每天我都对人们如何使用、如何看待我们的产品感到吃惊。

所有这些预示着,设计我们主页的第一步就是撰写真实的文案。这是一种思想锻炼,强迫你深入思考 你在销售的东西和你想如何表达。

在到达截屏这一版之前,我用了很多草稿。当我通盘考虑的时候,我想讲述我们的产品,一个自然出现的结构,并体现在‘最终’版本里。它不是完美的,但是我觉得它足以让我开始布局了。

第二步:写HMTL代码

设计主页-迭代2

这个步骤我感到受了欺骗。我的超人力量事实上能够搞定这个东东,因此下一步就是直接跳到编码。

老实讲,这是我知道如何完成的唯一方式。我认为如果我花时间学习如何使用Illustrator或任何设计师实际在用的其它工具,那么我或许能够输出更好的结果。但是我做不到,因此开始写代码,并在此基础上,在页面上迭代。

这个版本看起来非常糟糕,不过无论如何我启动了。世界还在运行,我的工作也在保持运行,我们没有赢得任何设计奖励,但是我们也没有失去大片客户。更重要的是,首次忙于差不多两年的项目,我们正在让那个我们自己和想法接近大众。

当我第一次在浏览器输入我们的网页地址看到这个垃圾而不是空白着陆页时,我有种非常强烈的多巴胺兴奋感【注1】。我还有种强烈的欲望,不能让它如此糟糕。

第三步:迭代

设计主页-迭代3

我加了一些颜色,完善了一些文案,拆散了页面某些地方。这个过程,我基本上长达数小时坐在桌子旁边,焦急地盯着页面的呈现,偶尔做出修改,然后纠结于它们是否还要改善。

这个版本好些了。这肯定得益于形象化和通常的审美品位。我将其展示给的每个人都说了不少,但是这个阶段,我仍然坚持把内容处理好。

第四步:迭代

设计主页-迭代4

这是一个比上个版本要好的页头。没人想阅读大段文字来了解你的产品。用一个醒目的标题“Easily create mobile community apps”和本来的截屏幻灯效果可以立即抓住要点,这是非常不错的。

这是主要的,我在这里才感受到我们所具备的。重申,这个版本没有赢得任何设计上的奖励,但奖励不是这个页面的目标。

咨询功能的资源第一,愉悦的外表第二。

伟大的设计可以两者兼顾。如果你不得不选择其中一个,就让内容优先。

我认为,今天大部分营销设计弄乱了顺序而饱受其苦。如果你在这个过程中,从主题市场挑选现存的模板,或者做线框图,或者选择现成的照片,或基本上任何审美方面的东东开始,在你完全开发好之前,都是阻碍内容的方式。

换句话说,从内容出发,再增加审美。不要先弄一个优秀的设计,再往里面塞内容。

第五步:迭代

设计主页-迭代5

对于一个非设计人员设计的营销主页,我想,很不错了。

当我今天完成后盯着这个页面有好几个小时,它让我觉得,至少它不那么糟糕了。

为了引入一些高雅,我把时髦的、来自于音乐会的、模糊人群截图添加到了页头。还有,大众影像是关于我们社区软件一分钟演讲的背景。符合情理。

我对这个页面的文案感到骄傲。每个字,每个符号,都是经过考虑的。我不知道Jason Fried是否会祝贺我的写作,但是我相信它清晰地传达了我们在做的,那就是目标。

结论

Clubhouse的这个页面,和UI的各个地方,都一直是没有完成的作品。在看完本文之后,你是否访问了我们的首页,它不同于在第五步描述的功能。好的设计持续进化并渐趋成熟。

同时,对于我在第二步经过的版本,我深感欣慰。或许这强调了为什么我主要是一个工程师,不过重点在于它总是更加美好。启动没有完全成熟的东东,不要惊慌,尤其对付这些紧急的项目,总是要迭代。

译文:如何用5个真正不同的步骤设计一个主页 》| 腊八粥