第五章

创建视觉设计

发现帮助您定义、交流和实现设计愿景的技巧和工具。

杰夫Cardello
杰夫Cardello
?阅读时间
当框架就位,组织结构清晰时,就该进行视觉设计了。无论你为哪个品牌设计,它都会有一个由美学和声音塑造的身份。作为一名设计师,你的工作是通过你所做的视觉选择来传达品牌的本质。

头脑风暴,建立一个情绪板

这个情绪板由Studio-JQ结合不同的标志,颜色组合和图像来封装和呈现新的网页设计的视觉想法。

情绪板是图像、文本和其他视觉效果的拼贴,帮助我们更好地理解一个品牌。这是一种非正式的组合——没有内在的层次或组织需求。但当以格式塔的方式观察时,模式和主题就出现了。把情绪板放在一起可以帮助你在视觉上沟通那些难以描述的东西。

在你开始之前,让客户列出一个与他们的品牌相关的单词或短语列表。这应该是一个快速的练习,专注于品牌激起的直接感受或情绪。想想可口可乐、苹果和全食超市——这些品牌会让你想到什么?你的情绪板应该从自己强烈的想法和情绪列表开始。

想象一下,你正在为一家有机肥皂公司制作一个情绪板。这样一个品牌的情感身份是什么?你会最有可能的将唤起自然和DIY美学的元素组合在一起。也许是花的图片,柔和的颜色,或者是手写的文字。但根据品牌的具体目标、愿景和声音,你可能会发现视觉构建模块需要非常不同——这完全取决于你你的客户一起锻炼。

将这些不同的视觉效果放在一个地方可以让你看到更大的主题并产生想法。主题可能很难沟通,因为它们是抽象的——情绪板有助于客户而且设计师可视化品牌的本质,以及设计将如何传达它。

这更有组织的情绪板布莱恩·劳对于餐饮公司来说,图形、排版和颜色都是一个统一的主题。

创建一个样式贴图

这个样式由Josefina尼诺为一个提议的电子商务网站提供了一个干净和准确的设计元素的表示。

假设你在一个你不会说当地语言的国家走进一家快餐连锁店。无论是汉堡王、麦当劳还是肯德基,你都能立刻知道自己身在何处。

即使你不能商标,你会认出字体、平面设计和颜色。餐厅的室内设计也能说明问题。台面瓷砖、家具和墙壁颜色都是品牌视觉识别的一部分。一个网站的设计应该唤起同样的品牌认知度。

样式平铺是用于构建设计的可视化组件的集合。他们采用情绪板的大致轮廓,并将其转化为实际的构建模块。

风格瓷砖为网站的各种设计组件提供了视觉指南,包括:

  • 标志
  • 广告正文
  • 按钮
  • 调色板
  • 模式
  • 其他与品牌相关的视觉效果

可选:唤起品牌情感方面的词语和短语

在与客户的合作中,回顾激发情绪板灵感的词语和它可能产生的其他主题想法。像“优雅”、“值得信赖”和“古怪”这样的词都会让人想到非常不同的东西。考虑如何使用你的行业工具,如颜色、空间、类型等,在视觉上体现这些概念。

然后使用情绪板和单词列表创建(至少一个)样式平贴,以告知可能成为设计一部分的颜色、排版、按钮和其他导航元素的集合。

您甚至可能会发现构建样式块的多个迭代是有价值的,既可以用于您自己的迭代,也可以潜在地为客户机提供选项。有时你会展示一些想法不希望能够带领客户走向正确的方向。只要知道你应该准备工作从任何风格的瓷砖你现在!

客户希望成为这个过程的一部分。对于设计师来说,戴上船长的帽子全速前进是很有诱惑力的。毕竟,你是专家,对吧?当涉及到设计时,是的。但你的客户是品牌专家,所以安排时间和空间去倾听他们的想法。

当客户知道他们的投入很重要时,他们会对最终产品更满意。欧宝体育在线首页风格瓷砖和情绪板为客户创造了一个机会,让他们听到并观察他们的反馈形成最终的网站。

查看我们的自由响应式瓷砖如果你需要帮助的话。

构建一个元素拼贴

这个元素拼贴MDS展示了按钮在不同设备上的外观和功能。

你对互动元素或其他动态魔法有什么很酷的想法吗?元素拼贴是一个很好的方法来收集这些在一个地方,并有他们的外观和功能就像他们最终设计的那样.无论是带有花哨悬停状态的按钮,还是显示不同类型内容的创造性方式,元素拼贴都向客户端展示了网站运行时的工作方式。

元素拼贴画以半孤立的状态呈现网站功能的各个部分,这使得人们很难想象它们在更充实的布局中会是什么样子。元素拼贴是有帮助的,但不要太专注,也不要花太多时间在那些可能无法最终实现的功能上。最终,元素拼贴可能最适合作为一种个人便签,在那里你可以添加交互性和动画来充实你的风格贴片和/或情绪板中的元素,而不是作为与客户或同事的沟通工具。

开始设计

外观、感觉和视觉元素都得到了批准。现在是时候开始布局页面和集成内容了。

样式平铺让您有一个良好的开端。这样可以节省时间,并有一个更集中的设计,而不是一边工作一边解决问题。对于客户来说,不会有任何惊喜,因为他们已经熟悉了图形元素。

样式瓷砖是一个很好的起点,但如果在实际布局中有些东西不能工作,您总是可以进行更改。明亮的配色方案看起来如此惊人,实际上可能是压倒性的。而过于风格化的标志可能会在一个更简约的布局中分散注意力。你能够判断这些样式是否有效的唯一方法是将它们应用到实际设计中。

在视觉设计阶段,你将:

  • 布局图像、文本和其他内容
  • 创建菜单和其他导航组件
  • 确保内容和设计协同工作,以实现网站的目标
  • 细化设计和内容,并根据需要进行更改
  • 整合客户反馈

但在此之前,您需要将样式平铺工作转换为真正的HTML/CSS,以便在站点上使用。也就是……

创建一个生活方式指南

大多数品牌都有风格指南。任何做过一段时间的设计师都深入研究了Dropbox和谷歌Drive,希望找到最新的版本。即使你设法找到了最新的版本,事情可能已经发生了变化,因为指导方针被凿进了PDF(啊)。

制作易于更新和查找的风格指南的最好方法是创建一个活的风格指南。生活方式指南存在于网络上,与它提供指导方针的网站相结合。它通常是在线网站上的一个密码保护页面。在这里,所有的样式都集中在一个地方,可以立即更改和应用

这是这里的关键:当您更改Webflow样式指南时,共享修改过的类的每个元素都将更改自动更新.对于我们这些习惯了定义风格变化,然后实现它,然后更新指南的人来说,这是一个巨大的变化。

从生活风格指南中编辑样式可以让您在整个网站上进行更改。来自客户的反馈可以快速整合,生活风格指南显示了设计中不同的视觉元素在整个网站上的应用。如何在Webflow中建立一个生活风格指南将向你展示创建一个是多么容易。

按照排版、颜色和组件组织生活风格指南的各个部分,可以使编辑它们成为一种更有效的体验。

从千变万化的想法中产生出清晰的愿景

改进网页设计流程。尽早更清晰地交流想法。做好准备工作——绘制内容图,构建线框,构建视觉元素。跳过步骤是很有诱惑力的,但这只会在后面的项目中产生复杂性。

在工作和沟通过程中要一丝不苟。模糊性给未达到的期望留下了空间。当每个人都理解项目的愿景和目标时,他们更有可能对最终产品感到满意。欧宝体育在线首页

从模型开始?

如果你开始在Photoshop或Sketch等桌面设计应用程序中模拟你的网站,请查看我们的文章“从Photoshop到Webflow:如何将静态模拟变成实时网站,以获取有关该过程的详细指导和实用技巧。

分享

下一章标题

下一章介绍

作者姓名
?阅读时间
读一章
第一章

设定目标

建立一个成功网站的第一步是……定义成功。

杰夫Cardello
杰夫Cardello
?阅读时间
读一章

但有这么多输入,很容易忽视什么是重要的。模糊的期望会导致挫败感,并减慢这个过程。这就是为什么你需要尽早明确项目目标的原因。以及为什么每个人都需要分享相同的愿景才能取得成功。

了解网站的目的

Slack的主页清楚地知道它的目的:让你开始使用Slack。

当然,一个全新的、引人注目的网站总是积极的。但是,如果没有更深层的原因,投入时间和金钱来建造一个机器人可能会变成一项短期投资。

无论你是从头开始,还是完全重新设计,你都需要知道你想让用户从你的新网站中获得什么。你想用内容传达什么?需要编织什么样的行动号召?了解这些焦点是什么,这样你就可以设计出放大它们的设计。

网站不应该是数字前沿的一个孤立的前哨,而应该融入品牌更广泛的战略。它需要补充这一战略,同时也需要增加自身的价值。如果网站只是提供了一点轻松的娱乐,那也没什么如果那是你的意图。但最终,一个网站应该帮助填补客户所知道的和客户希望他们的客户知道的之间的差距。

发现问题并找到正确的解决方案

解决客户问题的方法可能不止一种。找到到达目的地的最佳方式是你的工作。

为了确定需要解决的问题,并找到正确的解决方案,您首先需要与客户和其他涉众进行沟通。

你必须有一个开放的对话,找出什么工作在他们目前的网站,什么不,以及他们认为不喜欢。内容扎实但可用性是一场噩梦吗?结帐过程是否如此痛苦以至于客户失去了销售?你需要了解你的客户认为网站的主要问题是什么,以及收集他们从使用过网站的人那里得到的反馈。

你也需要自己做调查。深入挖掘他们当前的网站,并记下所有需要升级的内容。不要只盯着哪里出了问题,也要考虑一下什么是有效的。你可以将当前网站的积极方面融入到你的新设计中。

我们很容易被小细节所迷惑。但现在不是谈细节的时候。你和客户都需要把注意力集中在网站将要实现的目标上,以及你将如何实现这一点。

通常客户会认为他们完全理解问题,并有一个可靠的解决方案。有时候,他们没有方向,只有一种需要改进的直觉。作为设计专家,我们的工作是探索各种选项并推荐最佳解决方案(如果做不到这一点,就推荐一个不错的解决方案)。

当我在零售公司工作时,我是一个团队的一员,负责整理公司的环境可持续发展报告。他们一直在做的是打印一份50页的综合报告,结果是一堆纸一点也不绿色。

我们的解决方案?将这份50页的报告精简成一本涵盖重点的小册子,用再生纸打印,用大豆墨水打印,并提供网站链接以获取更多信息。从而解决了一个他们自己都不知道的问题。

作为设计师,我们拥有专业知识,能够为项目中涉及的已知和未知问题提供解决方案。

了解你的听众

Evernote清楚地知道,它的用户都是充满创意的人,他们有一百万个想法,不想忘记任何一个。

了解你的目标用户将指导你在整个设计过程中,通过迫使你回答一个简单的问题来简化决策:

这对我们的观众有用吗?

你的客户应该有人口统计信息,如收入、性别和年龄(如果没有其他地方的话,在他们的Facebook页面分析中)。你还需要了解他们的消费习惯:

  1. 他们还会购买其他什么商品和服务?
  2. 他们会访问哪些网站?
  3. 他们沉迷于什么形式的媒体?

了解这一切将有助于你创造出与他们的其他消费者体验一致的设计。

如果所有网站都有一个共同的目标,那就是与受众建立联系。通过更多地了解你的谈话对象,你就能更好地有效地联系到他们。

写一份有创意的摘要

当项目目标确定后,就是时候整理创意概要了。我曾见过它们短至一段,长至你的毕业论文(读者数量与长度成正比)。

无论你的简报有多冗长,你都必须写出一份有创意的简报,这样你、客户和其他参与项目的人都能理解它的细节。创意概要需要定义项目的人员、内容和位置,列出范围以及完成每个目标需要做什么。

定义成功

当你到达终点线时,你知道吗?

不定义成功是什么样子的,你永远不会知道你是否成功了。

衡量成功的一些方法比其他方法更明显。人们理解数字。当他们看到流量和销售额上升时,他们知道自己已经取得了某种成功。

一些客户已经知道他们将如何决定成功。我曾经有一个客户,他帮助运营一个非营利组织,想要一个完整的网站重新设计。她的成功标准:

  1. 提高搜索排名
  2. 他们手工制品的销量增加了

事先知道这两个目标让我的工作变得容易多了。我花了巨大的大量的时间用于研究和编写seo优化的内容。我还找到了一个更好的电子商务平台,让他们为自己的库存拍摄新的高分辨率照片。

销售额增加了,她的组织在大量搜索词的第一页出现。她很高兴,我也很高兴。这个项目成功了。

当你定义项目成功时,不要做出不切实际的承诺。对于这个非营利组织的努力,我解释了他们目前网站上的内容是如何无效的。我从来没有夸大过我要做什么,但我确实解释了它会比他们现有的更好。事实确实如此。

当然,“成功”也可以不那么具体。提高一个品牌的声誉并将其与竞争对手区分开来是很难衡量的。但如果你正确设定客户的期望,他们就能在成品中看到这一点。欧宝体育在线首页(如果做不到这一点,你可以随时对现有客户进行NPS调查,以评估他们对新设计的反应。)

每个参与项目的人都需要知道他们将如何决定项目的成功。当每个人都对成功有一个共同的理解时,你们就能评估和认识到你们所有努力工作的效果。

设定目标

您可以根据可交付成果和负责创建它们的人员来定义任何项目。但如果目标受众没有明确的目标,没有人会知道为什么他们正在构建这些可交付成果。

当人们理解为什么,他们也会更好地理解如何去实现他们的目标。在项目开始时找到这些目标,这样你就能在项目结束时取得成功。

第二章

定义项目范围

或者,如何处理范围蔓延,让你的项目保持目标,只做你有报酬的工作。

杰夫Cardello
杰夫Cardello
?阅读时间
读一章

突然之间,客户对你能做些什么来使项目成功有了更好的了解,是的,这将涉及一些你之前没有谈到的额外工作。你努力工作,但客户现在想改变方向,让你所做的一切都白费了。你本以为可以一蹴而就的事情,却变成了在犹豫不决的小道上蜿蜒前行的旅程。

欢迎来到范围蠕变的奇妙世界。

什么是范围渐变?

当你和你的客户都对项目有一个清晰的理解时,你可以避免范围蔓延。

你可能在某个地方听说过这个术语。但它是什么呢?

当一个项目的发展超出了最初商定的范围时,你就有了范围蔓延的问题。项目的发展是可以的,但如果它让你为了同样的钱做更多的工作,那么这就是一个问题。

这里有一些处理它的方法——在它把这个项目变成一个活生生的噩梦之前。

在合同中定义项目范围

用清楚的语言列出你将提供什么服务,以及如何向客户收费。

我们知道,你是个自由职业者。你享受每天的自由生活,就像今天是休闲星期五一样。你的工作时间不是传统的朝九晚五。你喜欢保持“冷静”。

不幸的是,被非正式可能意味着让你自己面对失望、沮丧的客户。这是非常unchill

在与客户和其他利益相关者开了几次会之后,你应该对项目及其目标有一个非常清晰的概念。现在是把你们讨论过的关于项目的所有重要细节都写出来的时候了以书面形式

详细说明你要做和不做的工作

明确你将提供什么服务。用你的语言直接而详细地说明你将如何向客户收费,无论是按小时收费还是整个项目的固定价格。

例如,你可以这样定义作用域:

我将建立并发布五个网页,包括:

  • 首页
  • 关于
  • 服务
  • 联系
  • 博客

这些页面的内容将由客户端由XX/XX/XXXX提供。如果在该日期前没有提供内容,则项目时间线将需要延长。

每页最多可进行3次设计修订。额外的修订将按X美元收费。

你还需要详细说明将要涉及的工作类型合同,比如过度的修改,以及你将如何为这些“额外”服务向客户收费。

要继续上面的例子,你可以添加以下内容:

添加到上面列表中的任何页面都将使项目时间轴增加1周。可以为上述任何页面或任何其他页面制作内容,每页收费500美元。

申请作品集使用权

如果你愿意,你还应该询问是否可以使用你为自己的作品集所做的工作的例子,如果他们同意,在合同中注明这一点。在这一点上保持灵活是很重要的,假设您想要这个项目,因为一些客户可能会同意您使用工作示例,只要省略他们的公司名称,或者只要作品集页面有密码保护。

为客户创造了一些很棒的东西,但后来却发现你不能将其用于你的投资组合,这是一件令人沮丧的事情。

包括杀死费用或首付

有时候客户会决定取消你已经开始的项目。也许决定把时间和金钱花在其他事情上。

为了保护自己不失去你所做的工作,特别是如果你同意为这个项目支付固定费用,你需要包括一笔终止费,或者要求预付定金。

这样你就不会因为投入时间而一毛钱都没有了。消灭费可以是总费用的一定比例,也可以基于你在取消之前所做的所有工作。

起草合同是一项艰巨的任务。但请记住,它不需要充满法律语言。保持简单直接。在你们签字之前,要确保你的客户完全理解。

如果你不知道从哪里开始签订自由职业合同,请阅读我们的文章“设计合同如何帮助你管理客户,”查看AIGA的(非常详细)设计服务协议标准格式或者进行调整免费平面设计合同来自火箭律师。

为范围蠕变做好准备

让您的客户知道在项目范围之外会考虑哪些服务。

一开始只是对单个登陆页面的更新,后来变成了对其他几个页面的一些调整。然后它变成了一个完整的设计大修-整个网站。

如果你是按小时收费的,这可能会很好——只要它不占用你已经承诺给其他客户的时间。否则,你要做额外的工作,却没有额外的报酬。

同意做额外的、没有报酬的工作并不“好”

我们都想要通融,让客户满意。但是当我们开始同意做合同中没有包括的事情时,我们只是在鼓励坏习惯——比如客户认为额外的任务是意料之中的。作为自由职业者,我们的工作之一就是确保他们不会这么想。

合同使你不用做额外的工作而得不到额外的报酬。如果客户需要更多的东西,比如电子邮件活动或修改他们的社交媒体内容,你可以在合同中添加更改请求条款。对于合同之外的任何事情,这样的条款可以确保你的努力工作得到报酬。

为交付成果和付款设定最后期限

这就是为什么有一个可交付成果的时间表很重要。如果你已经同意了一个时间表和固定的费用,你需要准备好如果时间表延长。每个时间表都应该有一些回旋的空间,但作为一个自由职业者,你必须小心地保护你的时间——尤其是当你有其他客户排队的时候。

除了项目的时间表,还需要有一个付款截止日期,以及如何提交付款的说明。这有助于减少困惑,并确保你能及时得到你应得的。

为反馈和编辑安排时间

当你创建项目时间表时,一定要为反馈周期留出空间。

反馈周期需要有限制,即使只是为了保持你的理智。

许多客户没有意识到设计变更的整体含义。看似很小的编辑,比如重新定位图像或更改字体,很容易导致大量更改。

这与时间线的重要性有关。为修改分配时间,并指定你要修改的类型。例如,如果客户试图在网站设计项目中偷偷地进行品牌重塑,只要你的合同是明确的,你就有权利说不。

另外,请记住,随着项目的进展,某些更改会变得更加困难。在早期重组内容可能很容易,但是当整个站点地图在QA阶段之前发生变化时——好吧,那就完全是另一回事了。这就是为什么你的合同应该为可能影响整个项目的后期变更做出规定。对超出时间线的修改收取额外费用,可以防止你免费做过多的编辑,如果你的客户倾向于吹毛求疵,也可以让他们受到检查。

当然,你需要弄清楚这些反馈会被谁过滤掉。确定一个人与您沟通编辑将简化流程,并迫使涉众在同一页面上。让多人给你反馈可能会导致想法冲突,使项目目标复杂化。

停止蔓延

一个项目很容易超出你的计划,并拥有自己的生命,就像一个怪物从疯狂科学家的实验室挣脱出来一样。为了避免诅咒你无意中创建的作品,与客户设定界限——沟通是避免范围蔓延的关键。当你和你的客户对所涉及的工作有一个共同的理解时,这个过程就会更容易。

第三章

创建站点地图和线框

了解何时以及为什么要创建站点地图和线框,并获得一些关于如何创建它们的详细提示。

杰夫Cardello
杰夫Cardello
?阅读时间
读一章

从网站地图开始

希拉里·皮特的网站地图将电子商务网站分解为最基本的构建模块。

你是否曾透过飞机窗外,看到一个崭新的小区轮廓正在下方成形?这有点像一个站点地图:从3万英尺的高度看,这是一个需要建造结构的足迹。

站点地图提供站点层次结构的图表,并显示每个页面在该层次结构中的位置。

(注意:在这篇文章中,我们讨论的是网站地图作为一个网站规划和交流工具,而不是你创建的XML网站地图来帮助搜索引擎蜘蛛爬行你的网站——尽管规划工具本质上应该定义XML网站地图将包含什么。)

在构建层次结构时,不断引用项目目标是至关重要的。这是因为网站的层次结构需要反映并有助于实现这一目标。

例如,如果你正在建立一个电子商务网站,你的目标之一无疑是销售产品。欧宝体育在线首页因此,你的站点地图应该将产品索引和页面放置在层次结构的顶部或附近欧宝体育在线首页,这样访问者就可以立即看到他们需要去哪里实现你的目标和他们的目标:购买东西。

创建站点地图

您可以通过几种不同的方式来设计站点地图。你需要根据以下两点来选择你的方法:

  1. 捕捉你需要捕捉的信息的能力
  2. 传达你需要传达的信息的能力

换句话说,它需要能够传达你想要传达的信息以一种让你的听众清楚的方式。

例如,以下是创建站点地图的3种常见方法,以及每种方法最擅长传达的信息:

1.列表

列表格式是一个简单的有序或无序列表,使用嵌套来传达层次结构。下面是一个基于部分核心Webflow站点的例子:

指数

——设计师

- - - - - - CMS

——编辑器

——举办

  • 客户
  • Groupon
  • 新的故事
  • 可能的
  • 自由职业者

这对于交流页面主题和相对层次结构非常有用。您可以立即看到,设计器、CMS、编辑器、主机和客户的页面都获得了相同的突出级别,特定的客户故事位于更低的级别。

这是什么最擅长交流的是这些页面之间的用户路径。例如,没有迹象表明,设计器、CMS、编辑器和托管都出现在网站主导航中一个名为“功能”的下拉菜单下。或者这些页面都链接到网站的主页。

这使得列表格式对于页面目录来说很方便,但你不会想把它交给客户说,“这是人们在网站上导航的方式。”

2.水平图

Hillary Pitts的站点地图(在本部分的顶部)是一个水平图,可能是最熟悉的站点地图形式。

与列表一样,它捕获了站点的高级视图。不像列表格式,它更清楚地指出了页面/体验之间的路径,正如您可以在贯穿地图中心的结帐流程中看到的那样。

这使得它成为更好的沟通层次结构的工具,以及人们如何将站点导航给客户端和其他非技术人员。虽然它对技术倾向也很有用!

值得注意的是,由于Pitts的网站是一个电子商务商店,它提供网站页面的全面清单。可能会有一个或一千个不同的产品页面——这对这个映射无关紧要,因为产品页面几乎肯定会通过动态欧宝体育在线首页模板或UI工具包,从产品索引到产品细节的流程不太可能因产欧宝体育在线首页品而异。但是,如果有些产品类型需要不同的内容模型,则欧宝体育在线首页需要注意它们。

3.垂直图

垂直图基本上就是一个倾斜的水平图。因为从左到右的流程意味着进度(在从左到右阅读流程的文化中),垂直图对于映射更包含的体验非常有用,比如特定的用户流程,或者站点更特定区域的结构。

Pitts的水平图表中的购买流程部分将是垂直图表的一个很好的候选者(事实上,有点像一个垂直图,嵌入在水平图中)。

网站地图遇到麻烦了?试试卡片分类吧!

如果你和你的客户已经清楚地定义了你的项目目标,那么很有可能构建你的站点地图就会变得非常自然。但在较大的项目中,以及那些内容详细的项目中,您可能需要使用一种可靠的工具:卡片分类。

要运行卡片排序,只需将您自己、您的客户和任何其他涉众聚集在一起(亲自或以数字方式)。然后在索引卡上写下所有的页面名称,并将它们分类为对你们所有人都有意义的类别。完成后,根据排序的卡片创建一个站点地图,并(理想情况下)让一些目标受众运行它,以确保对他们也有意义。

一旦你确定了站点地图,你就可以深入你的线框,在那里轮廓会变得更加具体和详细。

网站地图工具

任何拥有方框、箭头和文本编辑功能的设计工具都可以帮助你在思维导图时完成工作。但是,使用一个将这些方框和箭头作为预先存在的元素(通常称为模板)的工具是有帮助的(很大)。

下面是一些预加载站点地图元素的工具:

为什么你需要线框

如果站点地图提供了整个网站的蓝图,线框则代表单个页面(或一组页面)的蓝图。如果您可以使用站点地图,然后放大并增强该高级地图中的单个页面,就会看到这种效果。

像站点地图一样,线框捕捉了层次结构。但这一次,该层次结构仅限于单个页面,因此定义了内容在页面上流动时的相对重要性。

与原型相似,线框图可以有不同的保真度。基本上是一些线框最终的设计,包括最终的字体和大小,样本照片,甚至是生产就绪的副本。欧宝体育在线首页其他的则要简单得多,坚持使用单色框和斑点的集合,内容将在某一天出现。

由于保真度的范围很广,所以向涉众清楚地解释你的线框到底有多最终是很重要的。

Derek Clark创造了这个线框,它只展示了页面布局的基本元素,但仍然传达了最终设计的外观和功能。

花点时间从内容的角度回顾一下这个线框。它实际上有很多含义,这些含义要么需要变成内容标准,要么需要按照内容标准进行修订!

例如:

  • 大标题类型意味着文章不能超过6或7个单词
  • 文章标题可能相对较长,这有助于减轻上述限制
  • 每篇文章都需要突出显示一张图片
  • 滑块标题将需要因字体大小而短
  • 右上角有一个“国家切换器”,这可能意味着需要翻译网站内容。这可能会对设计产生重大影响,因为用德语写的6或7个单词的标题可能比用英语写的标题长得多

这还只是开始。

给利益相关者足够的信息,让他们得到正确的想法

维吉尔·帕纳的简单手绘线框图捕捉最终设计的精髓。

不要把线框误认为原型。线框图提供了一种示意图式的表示,去掉了图形和内容(通常),显示了基本结构。另一方面,原型应该呈现最终站点的工作版本(尽管保真度也可能很大)。

线框图允许涉众看到网站中的各个页面是如何流动和运行的。因为线框图中没有任何代码,所以在你开始设计之前,涉众就可以自由地要求大幅度的更改。

线框图以一种每个人都能理解的视觉方式传达网站的结构。对于不熟悉设计的人来说,像状态改变这样的东西可能很复杂,但线框可以用一两个简单的视觉图像来阐明这一点。

在向任何人展示线框之前,有一件事需要弄清楚,那就是它们到底代表什么。

对于任何观众来说,这些线框都应该是显而易见的展示最终产品的外观和功能。欧宝体育在线首页保持事情的简单和清晰,这样每个人都能看到项目将会带来什么。简单的灰度形状就可以了。

如果有疑问,请注释

因为你的线框是一个网页的示意图,你可能会想要包括任何额外的注释,可以带来清晰的体验。

看看下面的线框。作为一名设计师,毫无疑问,您马上就认出了灰色圆圈和四个破折号作为标志和导航链接。但是如果没有“导航”标注,大多数客户端都不知道他们在看什么!

一个动画GIF编译了一些线框图由克里斯·班尼斯特创作

就我个人而言,我喜欢标记线框部分在线框中只要我能想出一个清晰、简单的名字。我只是看到太多的利益相关者误解了一个部分的目的,并让这种误解扭曲了他们的反馈,从而忽略了这个简单的添加。

站点地图和线框可以帮助你在内容上有一个良好的开端

先有鸡还是先有蛋?谁在乎呢,重要的是蛋黄。设计就像把内容放在一起的外壳。

无论一个设计看起来多么伟大,它都无法弥补其内容可能已经腐烂的事实。

线框图有什么帮助?告诉我们需要什么内容,以及每个部分应该占用多少空间。因此,线框应该直接从网站的内容策略中流出,显示每个页面上的内容层次结构,以及每个页面如何适应整体策略。当作者在这样的地图上工作时,达到他们的目标就变得容易得多。

这并不是说你需要从主页开始。事实上,很多人认为你的主页应该是最后的你创造的东西。

那么你还能从哪里开始呢?用最重要的内容——也就是对项目核心目标贡献最大的内容。

这个网站希望促进网上销售吗?然后,你需要确保每件产品都有一份精心撰写的品牌描述,以及潜在买家想知道欧宝体育在线首页的所有规格。这对构建您的产品集合所需的CMS字段大有帮助!欧宝体育在线首页

你的网站是更大的品牌重塑的一部分吗?确保你知道你的项目如何适应品牌重塑,并且你有所有你需要的资产来传达这个新的公司形象。

你不需要一次完成所有的写作。相反,你应该专注于确保你的UI一眼就能被理解,即使只是在某些方面那里会有什么

例如,你可以有一些标题来引导人们进入页面内容,然后用占位符字体填充剩下的部分BLOKK或者是流字体.确保每个部分都有标签来显示内容的位置,这样客户就不会被填充内容分心。

内容形状设计

内容的原始材料会影响页面的外观和导航。图片来自Flickr用户PerzonSEO

内容包含了网站上的所有内容。无论是解释产品的视频,展示应用程序如何工作的动画,还是非营利组织的关欧宝体育在线首页于页面,每个元素都是为了传达信息或讲述故事。你不需要在你设计之前,把所有这些内容都准备好,但这确实有帮助。

我们已经讨论了线框如何塑造内容。但这也可以在另一个方向上起作用。同样,你不需要完成所有内容。但是如果你有一个你想要包含的所有内容的大纲,你可以根据这个大纲创建一个站点地图和线框。

即使知道类型网站需要的内容将帮助你提出一个网站地图和线框。这些内容不需要充实,但知道会有一个博客,一个客户寻求报价的联系页面,以及一个关于公司历史的页面,将帮助你弄清楚所有内容需要如何组织。站点地图将网站分解为最基本的组件,线框则提供了每个页面包含内容的更多细节。

但如果你已经准备好了充实的内容,那就把这些内容放到线框中,看看它是否合适。如果手头的内容超出了专用空间,则可能需要进一步划分。然后,您可以将这个额外的页面添加到线框中,并调整内容组织。这对设计师来说比事后做要容易得多。

了解你的SEO

搜索引擎优化不应该是事后才考虑的事情。因此,在你坐下来开始绘制网站地图和线框图之前,用客户想要瞄准的关键字列表武装自己,并相应地塑造网站的结构和组织及其内容。

线框图阶段可以是开始SEO工作的好地方,因为你可以在没有完全开发内容的情况下完成它。如果页面上没有这些单词,你可以专注于关键的SEO元素,如标题、元标签和导航元素。这些seo化的线框可以为最终内容的创造者提供一个很好的大纲。

当你提前投入工作时,这个过程会变得更容易

网站地图和线框图为网站奠定了基础。当你准备好并考虑网站的目标、架构和用户体验时,你就会有一个目的驱动的过程。当通往成功的道路上扫清了障碍,这条路就会走得更快。

第四章

把内容放在第一位

创建对你的受众重要的内容是你网站成功的关键。

杰夫Cardello
杰夫Cardello
?阅读时间
读一章

为什么内容很重要?

对人有帮助,对生意就有帮助。

-广告界传奇人物利奥·伯内特

内容是赋予网站意义的东西。它吸引人们,让他们了解网站的目的并采取行动。它可以回答潜在客户的问题。

内容就像一个引擎——没有它,你所拥有的只是一个空洞的、无用的外壳。

内容是讲述品牌故事的文字,是展示产品如何运作的视频,是探索想法的博客文章。欧宝体育在线首页内容不应该是事后才想起来的,也不应该是一堆花言巧语。当我们深思熟虑并衡量我们的内容需要传达什么,以及它如何与设计一起工作时,我们的网站表现得更好。

内容和SEO是互惠互利的

在内容创建和推广方面无法与之匹敌的组织可能会发现自己输给了学习SEO基础知识的内容营销人员。

——兰德·菲什金(Moz创始人

对于网络爬虫来说,内容就像灯塔一样——它表明了网站的相关性,并提供了网络爬虫对网站进行排序和排名所需的信息。内容优先的SEO方法会带来更好的搜索排名和更好的用户体验。

SEO不应该过于严厉。把短语和关键字混在一起会让你的写作显得勉强而令人困惑。内容需要是有用的和真实的,同时仍然提供什么网络爬虫需要排名一个网站。

研究是编写搜索引擎优化内容的关键。花点时间浏览相关网站和期刊。与客户和其他主题专家交谈。找出常用的单词和短语。

一个在线关键字工具可以生成那些不会立即出现在脑海中的单词和术语。谷歌AdWords Keyword Planner和WordStream是研究相关关键字和短语的很好的资源。

谷歌AdWords关键字规划
谷歌AdWords关键字规划器有助于提供可能被忽视的关键字。

如果我写的东西我不知道,像飞钓鱼,谷歌Adwords关键字规划师将是一个巨大的帮助。有些术语很容易理解,比如“鱼竿”和“钓鱼卷轴”。其他的,比如“飞绳用品”和“飞绳材料”,都不是我自己能想到的。

注意“平均每月搜索量”和“竞争”栏目。低竞争,但高搜索量的关键词,如上面列表中的“鱼蝇”,如果在你的网站内容中有适当的目标,可以大大提高你的有机搜索排名。仅仅因为付费广告商有很多竞争并不意味着你可以忽略这些短语。将它们编织到你的内容中会提高内容的相关性。

只要记住对你从这些工具中提取的短语和单词要挑剔。确保你的内容保持有用和清晰。在将搜索优化的内容放入设计之前,让客户或主题专家对其进行审查。确保你所写的内容是准确的,并且语调适合这个网站。

内容应该是设计的基础

当我们知道一个网站的最终目标时,我们就能了解到实现这些目标所需的内容。查看现有的内容,看看是否有遗漏或不清楚的地方。

组织这些内容将告知每个页面上的内容,并使创建站点地图变得容易得多。使用定义良好的站点地图可以使您的团队避免无用的设计和浪费时间。从必须的内容和站点地图开始,将帮助您的团队了解不同类型的内容如何组合在一起,以及用户如何与站点进行交互和导航。

学生指南网站设计网站地图由Janna Hagan
站点地图,线框图,详细了解网站的内容需求将使设计过程更加高效和集中。学生指南网站设计网站地图由珍娜·哈根提供了一个很好的例子。

内容优先的方法将设计师和作者结合在一起。任何领域的需求和限制都会影响这些角色的工作。当内容创造者和设计师拥有共同的目标并理解所有内容是如何协同工作时,他们便能够创造出更强大的作品。

在编写内容之前对其进行建模

“但我已经制作了站点地图和线框。为什么我需要一个内容地图?”

因为到目前为止,你做的一切都是对的!为什么现在停止呢?

与站点地图帮助我们可视化导航流的方式相同,内容地图为我们提供了内容流的指南,特别是在CMS中。内容地图向我们展示了每页上的具体内容,以及这些想法如何与更大的整体相关联。当内容已经被组织起来时,信息体系结构将有一个更坚实的基础。

如果你的设计有任何类似web应用程序的功能,或者你有一堆杂乱无章的内容,内容模型可以帮助你理解它。它可以帮助你在构思一个单一的标题之前提炼你的信息。

内容模型应该从宏版本开始,宏版本只显示主要的内容类型,不包含任何相关的细节。假设我们有一个卖书的网站,会有一个页面专门介绍新书:

宏内容模型提供了站点将包含的内容类型以及这些类型如何相互关联的高级概述。

这个宏观视图向我们展示了这些组件是如何组合在一起的。当点击一本新书的标题时,我们会看到一个页面,上面有具体的书,以及流派、作者和出版商。假设我们想要仔细研究每一个内容块以及它们所包含的信息和元素的类型。我们将在一个微内容模型中对每一个进行扩展。

微内容模型为您的网站将包含的内容类型添加细节,进一步充实网站。它还提供了关于你需要包括在你的Webflow CMS集合中的字段的指导!

现在我们可以看到每个页面上需要的更多类型的内容,比如author块上的作者传记和给定类型的背景信息。创建微内容模型还向我们展示了内容的其他机会,比如每种类型的书籍推荐。

内容建模如何支持你的CMS设计工作

现在,我知道你可能会想:这是设计过程中的另一个一次性产物!但我向你保证,你的模型绝不是一次性的。

事实上,当你开始构建CMS集合时,为你的内容建模的工作将会带来巨大的回报。这是因为您在宏模型中添加的细节直接转换为Webflow CMS中的字段和/或集合。

例如:假设您正在构建上面图表中建模的站点。您创建了一个名为Books的集合,并开始为其分配字段。“Hero image”显然映射到一个图像字段。Title将被name字段捕获。类型、作者和出版商都显示为宏级内容项,因此它们各自都需要一个Collection, Book Collection可以通过引用和/或多引用字段引用该Collection。

方便的,对吧?要了解更多信息,请查看我们的文章。为什么你的设计过程应该从内容开始."

谁和什么创造内容

我们已经强调过,在设计中移动任何像素之前,对内容有一些了解是多么重要。但是谁来创造这些内容呢?

在最好的情况下,你的客户有一个作家团队。这些词汇迷知道需要传达什么,以及如何用他们能理解的语言与听众沟通。他们是话题专家,也是写作技巧的大师。但是,拥有一个作家团队的梦想往往只是一个梦想。

并不是所有的客户都有内部内容团队的资源。一个小企业主可以自己承担这个责任,或者委托给一个参加过一两个创意写作课程的家庭成员。不幸的是,这可能意味着质量部门的内容不足,导致整个项目受到影响。通过对现有内容(如果有的话)的审计开始项目,并评估其质量。

无论内容是如何创建的,都不要忽略任何一个像素至少内容的大致框架。如果不清楚网站的内容和目标,每个人都会对过程和结果不满意。

对内容质量的期望需要明确。如果你的客户不是一个作家,也没有一个可用的,你有几个选择。要么在预算中留出空间自己创作内容(如果这是你的技能),要么雇佣一个你信任的专业作家。

但如果客户不认可好的写作,该怎么办呢?如果他们幻想自己是作家,却不肯让步怎么办?

我的诀窍是向他们展示有效的内容.找一个写得很好的竞争对手网站,指出文案的简洁和号召行动的力度。向您的客户展示贯穿整个网站的关键字和短语,使其SEO游戏强大。

有些人可能是一个精明的企业主,但不知道什么是高质量的写作。帮助你的客户理解——带着善意和尊重——好的文案的价值,以及它对他们收入和品牌知名度的潜在影响。

让客户参与到写作过程中来

如果你是一个自信的作家和编辑,让你的客户参与内容创作过程。

讨论项目所需的内容类型是一个很好的起点。从宏观层面开始:用户在寻找什么信息?关于公司或产品,他们需要知道哪些不明显的信息?欧宝体育在线首页观众的误解是什么?这些主题的项目列表将有助于告知您需要处理和/或创建的内容类别。

就回答这些问题所需的细节与客户面谈——并做笔记或记录会话!客户在交谈时可能会更好地解释事情,而不是在书面解释时感到压力。他们的措辞对最终的内容非常有用,所以要注意。如果客户急于提供他们自己的副本,让他们给你发一些简短的段落或句子,解释每个内容块的主要部分。您或作者可以将这些片段组合成强大的内容,并使用搜索优化和吸引眼球的标题。

一些客户会有足够的写作技巧。如果有时间,讨论一下他们写的东西。如果他们倾向于啰嗦,那就让他们更简明扼要。或者他们被营销的陈词滥调所困扰?这也是可以管理的!

任何作家都可以在一个熟练的编辑的指导下变得更好。如果你喜欢这个角色,那就去做吧。只要确保你付出的时间是有补偿的就行。

内容让人们沉浸其中

内容是人们访问网站的原因。设计的存在是为了以一种有组织的方式呈现这些信息,并添加功能和样式。在过程早期开发内容意味着可以围绕内容进行设计。这种关注使设计能够突出内容,并改善用户体验。

第五章

创建视觉设计

发现帮助您定义、交流和实现设计愿景的技巧和工具。

杰夫Cardello
杰夫Cardello
?阅读时间
读一章

头脑风暴,建立一个情绪板

这个情绪板由Studio-JQ结合不同的标志,颜色组合和图像来封装和呈现新的网页设计的视觉想法。

情绪板是图像、文本和其他视觉效果的拼贴,帮助我们更好地理解一个品牌。这是一种非正式的组合——没有内在的层次或组织需求。但当以格式塔的方式观察时,模式和主题就出现了。把情绪板放在一起可以帮助你在视觉上沟通那些难以描述的东西。

在你开始之前,让客户列出一个与他们的品牌相关的单词或短语列表。这应该是一个快速的练习,专注于品牌激起的直接感受或情绪。想想可口可乐、苹果和全食超市——这些品牌会让你想到什么?你的情绪板应该从自己强烈的想法和情绪列表开始。

想象一下,你正在为一家有机肥皂公司制作一个情绪板。这样一个品牌的情感身份是什么?你会最有可能的将唤起自然和DIY美学的元素组合在一起。也许是花的图片,柔和的颜色,或者是手写的文字。但根据品牌的具体目标、愿景和声音,你可能会发现视觉构建模块需要非常不同——这完全取决于你你的客户一起锻炼。

将这些不同的视觉效果放在一个地方可以让你看到更大的主题并产生想法。主题可能很难沟通,因为它们是抽象的——情绪板有助于客户而且设计师可视化品牌的本质,以及设计将如何传达它。

这更有组织的情绪板布莱恩·劳对于餐饮公司来说,图形、排版和颜色都是一个统一的主题。

创建一个样式贴图

这个样式由Josefina尼诺为一个提议的电子商务网站提供了一个干净和准确的设计元素的表示。

假设你在一个你不会说当地语言的国家走进一家快餐连锁店。无论是汉堡王、麦当劳还是肯德基,你都能立刻知道自己身在何处。

即使你不能商标,你会认出字体、平面设计和颜色。餐厅的室内设计也能说明问题。台面瓷砖、家具和墙壁颜色都是品牌视觉识别的一部分。一个网站的设计应该唤起同样的品牌认知度。

样式平铺是用于构建设计的可视化组件的集合。他们采用情绪板的大致轮廓,并将其转化为实际的构建模块。

风格瓷砖为网站的各种设计组件提供了视觉指南,包括:

  • 标志
  • 广告正文
  • 按钮
  • 调色板
  • 模式
  • 其他与品牌相关的视觉效果

可选:唤起品牌情感方面的词语和短语

在与客户的合作中,回顾激发情绪板灵感的词语和它可能产生的其他主题想法。像“优雅”、“值得信赖”和“古怪”这样的词都会让人想到非常不同的东西。考虑如何使用你的行业工具,如颜色、空间、类型等,在视觉上体现这些概念。

然后使用情绪板和单词列表创建(至少一个)样式平贴,以告知可能成为设计一部分的颜色、排版、按钮和其他导航元素的集合。

您甚至可能会发现构建样式块的多个迭代是有价值的,既可以用于您自己的迭代,也可以潜在地为客户机提供选项。有时你会展示一些想法不希望能够带领客户走向正确的方向。只要知道你应该准备工作从任何风格的瓷砖你现在!

客户希望成为这个过程的一部分。对于设计师来说,戴上船长的帽子全速前进是很有诱惑力的。毕竟,你是专家,对吧?当涉及到设计时,是的。但你的客户是品牌专家,所以安排时间和空间去倾听他们的想法。

当客户知道他们的投入很重要时,他们会对最终产品更满意。欧宝体育在线首页风格瓷砖和情绪板为客户创造了一个机会,让他们听到并观察他们的反馈形成最终的网站。

查看我们的自由响应式瓷砖如果你需要帮助的话。

构建一个元素拼贴

这个元素拼贴MDS展示了按钮在不同设备上的外观和功能。

你对互动元素或其他动态魔法有什么很酷的想法吗?元素拼贴是一个很好的方法来收集这些在一个地方,并有他们的外观和功能就像他们最终设计的那样.无论是带有花哨悬停状态的按钮,还是显示不同类型内容的创造性方式,元素拼贴都向客户端展示了网站运行时的工作方式。

元素拼贴画以半孤立的状态呈现网站功能的各个部分,这使得人们很难想象它们在更充实的布局中会是什么样子。元素拼贴是有帮助的,但不要太专注,也不要花太多时间在那些可能无法最终实现的功能上。最终,元素拼贴可能最适合作为一种个人便签,在那里你可以添加交互性和动画来充实你的风格贴片和/或情绪板中的元素,而不是作为与客户或同事的沟通工具。

开始设计

外观、感觉和视觉元素都得到了批准。现在是时候开始布局页面和集成内容了。

样式平铺让您有一个良好的开端。这样可以节省时间,并有一个更集中的设计,而不是一边工作一边解决问题。对于客户来说,不会有任何惊喜,因为他们已经熟悉了图形元素。

样式瓷砖是一个很好的起点,但如果在实际布局中有些东西不能工作,您总是可以进行更改。明亮的配色方案看起来如此惊人,实际上可能是压倒性的。而过于风格化的标志可能会在一个更简约的布局中分散注意力。你能够判断这些样式是否有效的唯一方法是将它们应用到实际设计中。

在视觉设计阶段,你将:

  • 布局图像、文本和其他内容
  • 创建菜单和其他导航组件
  • 确保内容和设计协同工作,以实现网站的目标
  • 细化设计和内容,并根据需要进行更改
  • 整合客户反馈

但在此之前,您需要将样式平铺工作转换为真正的HTML/CSS,以便在站点上使用。也就是……

创建一个生活方式指南

大多数品牌都有风格指南。任何做过一段时间的设计师都深入研究了Dropbox和谷歌Drive,希望找到最新的版本。即使你设法找到了最新的版本,事情可能已经发生了变化,因为指导方针被凿进了PDF(啊)。

制作易于更新和查找的风格指南的最好方法是创建一个活的风格指南。生活方式指南存在于网络上,与它提供指导方针的网站相结合。它通常是在线网站上的一个密码保护页面。在这里,所有的样式都集中在一个地方,可以立即更改和应用

这是这里的关键:当您更改Webflow样式指南时,共享修改过的类的每个元素都将更改自动更新.对于我们这些习惯了定义风格变化,然后实现它,然后更新指南的人来说,这是一个巨大的变化。

从生活风格指南中编辑样式可以让您在整个网站上进行更改。来自客户的反馈可以快速整合,生活风格指南显示了设计中不同的视觉元素在整个网站上的应用。如何在Webflow中建立一个生活风格指南将向你展示创建一个是多么容易。

按照排版、颜色和组件组织生活风格指南的各个部分,可以使编辑它们成为一种更有效的体验。

从千变万化的想法中产生出清晰的愿景

改进网页设计流程。尽早更清晰地交流想法。做好准备工作——绘制内容图,构建线框,构建视觉元素。跳过步骤是很有诱惑力的,但这只会在后面的项目中产生复杂性。

在工作和沟通过程中要一丝不苟。模糊性给未达到的期望留下了空间。当每个人都理解项目的愿景和目标时,他们更有可能对最终产品感到满意。欧宝体育在线首页

从模型开始?

如果你开始在Photoshop或Sketch等桌面设计应用程序中模拟你的网站,请查看我们的文章“从Photoshop到Webflow:如何将静态模拟变成实时网站,以获取有关该过程的详细指导和实用技巧。

第六章

最终测试和评审

通过全面的发布前审查,确保您的下一个网站发布顺利进行。

杰夫Cardello
杰夫Cardello
?阅读时间
读一章

检查设计

家具设计师Jé-Rôm的网站展示了视觉元素的仔细放置如何导致复杂的布局。

在开始测试功能之前,先看一下设计的视觉元素。你是否使用了正确的final-final-final标志?有新照片要换吗?你有没有加大行动号召的字体?

设计过程几乎总是涉及大量的反馈和建议编辑。很容易错过一些东西。但当网站上线时,正是这些小细节会让你的受众高兴或沮丧。因此,保持一个编辑和更改的运行列表-并确保它们在发布前得到解决。

检查不一致之处。每页的字体样式和大小应该相同。我们很容易忽略字体错误或正文太大了一点。毕竟,你已经盯着这个设计很长时间了。

让其他人检查一下你可能错过的不一致和细节。

在这个阶段,决策者应该对设计的外观感到满意。有一些小的调整和编辑是正常的,但如果有良好的沟通和合作,在这一点上不应该有任何大的变化。

如果你得到了更耗时的编辑建议,在处理它们之前评估它们的潜在价值。

这些改变会改善用户体验吗?他们会推迟网站的上线吗?

如果推荐的内容不能提高可用性或改善网站的视觉美感,那么可以拒绝。保持专业,但要清楚为什么有些编辑是不必要的——尤其是在设计过程的最后阶段。

注意细节

回顾过程是发现错误的时候。

当谈到网页设计时,有很多细节需要考虑和检查。特别是对于商业或电子商务网站。核实诸如营业时间、菜单上的营养信息、地址和电话号码等信息是很重要的。

电子商务网站需要为每件产品提供准确的照片和描述。欧宝体育在线首页打开你订购的东西的盒子,却发现它看起来不像,这总是一件令人沮丧的事情在所有比如网站上的内容。

在网站上线之前,确保作为公司及其产品品牌专家的利益相关者看一看。欧宝体育在线首页询问你的客户应该由谁来进行审核,并确保审核人员清楚时间线。

测试集成的功能

本电商网站由格雷格Dlubacz具有干净的布局结合易于遵循的指示,使购买自行车你想要一个顺利的过程。

集成可以包括购物车、时事通讯注册和报价请求表单等等。

测试站点中任何需要收集数据的部分(并确保您已经收集了数据设置SSL!)如果表单提交到电子邮件地址,请确保它是正确的。与客户反复核对邮箱地址。

表单应该有明确的说明和字段。让没有参与公司或项目的人填写测试表格并就他们的经验给出反馈是个好主意。

结帐过程也是如此——让几个人仔细检查故障和不明确的地方。我们中有多少人因为过程太复杂而放弃了购物车?从运输选择到付款选择,一切都应该检查。确保所有内容都定义清晰,易于操作。

在启动之前,了解您的客户计划接受哪种电子支付。他们是否已经建立了PayPal或Stripe ?如果没有,确保他们解决了这个问题——在最后一刻收集信息来建立一个账户可能会是一个令人讨厌的延迟。

检查你的链接

链接是一个主要的功能块,您需要检查它们。不要忘记创建404错误页面——让它成为你的标准协议的一部分。这一点很容易被忽视。

手动检查每个环节可能会让人不知所措。好消息是——你不必这么做!使用链接爬虫工具,如W3C检查程序尖叫的青蛙.两者都可以快速扫描坏链接,并确保内容是可访问的。

确保你的设计是跨浏览器兼容的

你的设计需要在每个浏览器中都有相似的功能、外观和用户体验。每种浏览器都有自己的优点和局限性。如果你的设计只在一个平台上运行良好,那么使用其他平台的访问者就会感到沮丧。

您可以下载所有流行的浏览器并在每种浏览器中测试您的设计,但这将耗费时间。有跨浏览器兼容工具,使这一步快速和简单,如Browsershots浏览器沙箱,Browsera

检查不同设备上的设计功能

确保你的设计在任何设备上的用户体验都是非常棒的。

人们在一天中使用不同的设备来访问内容。有人出去购物,用手机查附近的咖啡店。之后,他们一边在笔记本电脑上订购鞋子,一边看Netflix。你的设计应该在每个屏幕上都是无缝的。响应式设计的实际应用导致网站提供了更统一的体验。

检查导航、按钮和其他交互元素在不同尺寸的屏幕上仍然有效。在不同的设备和网络速度上测试设计。如果加载很慢,看看你的高分辨率图像和动画是否影响了网站的性能。过多的动态元素也会影响可用性。

你不太可能得到每一个主要的设备进行测试。惊喜-有几个应用程序可以做到这一点!Browserstack谷歌移动器,以及其他工具可以让你看到你的网站在不同的移动设备上是如何运行的。同样,Webflow允许您在构建时在不同的屏幕上预览站点。

要注意的是,没有模拟器能完美地再现所有设备上的体验,所以一定要在尽可能多的真实设备上进行测试。你不可能拥有所有的设备,但你的朋友、同事和客户也可以在这里伸出援手!

看一下内容

你省略的越多,就越能突出你留下的东西。

-亨利·格林(小说家

在这里重写一个段落或在那里重写一个句子(可能)不会对最终设计产生重大影响。希望你至少有一个粗略的网站草稿之前您开始了设计过程,并在整个过程中对其进行迭代。在设计时考虑内容可以让你做出深思熟虑的决定。对副本的调整总是可以稍后进行,甚至在网站上线之后。

但这并不意味着你应该在发行前跳过全面的内容审查。一个简单的拼写错误或语法错误的句子都会严重影响观众的感知,所以要确保你的文字和你的设计一样精致。

确保你的内容是有用的,易于浏览

尽管内容创作者对此感到悲伤,但人们不会像阅读一本书一样来阅读一个网站。他们想进去,得到他们想要的信息,然后出来。让这成为可能来取悦他们。

方法如下:

  • 使用描述性标题
  • 句子结构简单,每段不超过三到四句话
  • 用项目符号列表将相关的想法或项目分组
  • 删掉那些没有意义的文案
  • 检查你的文案是否简洁,吸引人,并与品牌的声音保持一致
  • 校对语法和拼写错误
  • 从第二和第三双眼睛那里寻求帮助,帮助你发现可能令人尴尬的错误
  • 找个有经验的编辑检查一下你的稿子

好消息:更多的工具!海明威语法而且可以帮助你进行编辑。他们还会教你一些写作技巧。

养成良好的SEO习惯

希望一些精心研究的SEO关键词和短语都被精心编织成内容。您还应该确保代码自始至终都有适当的标题和段落标记。每个页面都应该包含元标题和元描述。

元标题应该定义页面的焦点。只使用相关的关键字,特别是在描述的开头,并将内容控制在70个字符以内。元描述应该稍微长一点,但要控制在160个字符以内,并以与你的目标受众相联系的声音书写。

当你的网站出现在搜索结果中时,通常会出现元标题和描述。这可以帮助你的受众知道他们找到了一个符合他们需求的网站。谷歌使用元标题来正确排列您的内容,因此它应该反映您的页面的本质。H1标签还有助于排名,让网络爬虫更容易确定你的内容的目的。确保这些标签是特定的。

元描述对网络爬虫来说并不重要,但它们仍然很重要。一个好的元描述告诉人们他们已经找到了他们正在寻找的东西。在描述中使用与标题相同的主要关键字。谷歌将在您的描述中显示的搜索查询中使用的单词加粗。这也有助于你的受众看到你的网站匹配他们的搜索。

准备升空

下一步:成为明星。

当一切都经过测试和审查后,是时候展示你的辛勤工作了。

只要有一点耐心和大量的准备工作,您的设计就可以投入使用了。花时间检查和测试你的网站是你设计过程中的一个重要步骤。不要让急躁——你或你的客户的急躁——迫使你在准备好之前就发布。

确保你的工作反映了你的想法和投入。利用这些经验教训,让你的下一个项目做得更好。

第七章

发射

在遵循我们所概述的7步设计过程后,你可能会认为你的工作在发行后就完成了。我在这里告诉你:不是的。

读一章

如果你是自由职业者,你通常会把这一步留给你的客户。如果这是你的合同性质,那完全公平。但是,通过指导和支持你的客户在他们的网站上线,你不仅会加深你对那些你所服务的人的价值,而且还会给他们一个很好的理由来留住你。这是一个创造经常性收入的好方法。

另一方面,如果你是一名内部设计师,你的营销团队就有可能拥有这些基础。但我个人可以证明,营销人员几乎总是对新的发布想法持开放态度。另外,当他们确定迭代、测试和改进的机会时,他们几乎肯定会来找你,所以你最好做好准备。

考虑到所有这些,这里有一些技巧可以帮助你在即将到来的发行中获得最大的成功。

考虑“软”发行

这就是[网站启动]的方式。不是砰的一声,而是轻轻的一声。

-我,转述t·s·艾略特,因为我觉得很有趣

早在2016年,我的一位葡萄酒推销员朋友邀请我去旧金山一家名为The Progress的餐厅吃饭,这家餐厅是米其林星级州鸟类供应餐厅的姐妹餐厅。我知道这将是一次很棒的经历,原因有很多,其中最重要的是,这就是我朋友的行事风格——但我确实做到了没有你不知道我是怎么进来的

我们进去的时候,它死去的空.对于一家旧金山餐厅来说,这通常不是一个好兆头。

但随后我的朋友漫不经心地回头说道:“他们正处于测试发行阶段。今晚只招待朋友和家人。”

突然间,我觉得自己像一片特别的小雪花。

接下来,我们就坐在一张漂亮的再生木桌旁。(我知道,我知道;我的眼睛也在转。)就在餐馆老板的旁边。然后他继续通知我们我们要吃什么。和喝酒。

我有多么愚蠢的咧嘴笑

我写这篇文章不是为了自吹自擂,而是为了强调“软”或“测试”或“安静”发行的力量。

的幂

那晚在进步酒吧,我觉得.好像我突然变成行家了。与餐馆老板,美食评论家,大人物打交道。

当然,这一切都是幻觉,但仍然是一种诱人的、沉浸式的幻觉。如此强大,我(显然)还在谈论这家餐厅。不仅是因为体验本身,还因为食物是多么的美味。从那以后,我再也没有黑过他们的门,但我知道我已经给他们送去了几十个顾客。

我只是小小的我。但他们把我变成了一个强大的小型营销机器。

对于那些为网络而构建的人来说,好消息是:你也可以利用这种力量。

创造稀缺性

软测试发行之所以如此有效,是因为它们创造了一种稀缺性,将原本平淡无奇的体验变成了一种罕见的、备受追捧的体验。

这有三个相互加强的效果:

  1. 富人(那些可以接触到的人)感到被认可和/或振奋——也就是说,高兴
  2. 因此,他们想要传达这种独特的体验,用有机的口碑来补充你的其他营销努力
  3. 穷人(那些没有接入的人)突然比以前更想要接入,或者是第一次

几年前Gmail的发布或许就是最好的例证。我的意思是,仔细想想,一个新的电子邮件应用程序并不是你所说的那样令人兴奋的,对吧?它是一种公用事业,就像电一样是必须的。

要让这样的事情令人兴奋,你需要一个真正的革命设计。和/或一些人为的稀缺……

现在你可能在想,“等等,约翰。我只是在这里建一个宣传册网站。我们所做的只是呈现信息。我们该如何创造这种稀缺性呢?”

这个问题的答案不在于网站本身,而在于你所呈现的信息。几乎没有遗址存在只是呈现信息。即使你的网站只做这些,你也有机会创造稀缺性——只要信息是新的、独特的,甚至是真正高质量的。

写电子书?让特定的人提前访问,并要求他们做宣传。展示研究结果?第二节,和第一节一样。

然后你可以为任何类型的网站做一些事情:

寻求反馈

无论你是想完善你的视觉或交互设计,清理你的内容,还是只是获得用户对整体UX的输入,你都可以通过征求反馈来充分利用你的发布前计划时间。

在许多方面,这提供了与创造稀缺性相同的好处。你仍然在表彰一些精选的人,并给他们机会与他人分享他们的经验。如果这些人是与你网站目的相关领域的专家,他们的分享可以帮助你为你的发布做一点宣传。如果他们是真的印象深刻,你甚至可能得到一个或两个闪光的证词的网站!

但这不是你在发布前寻求反馈的目的。这只是锦上添花。真正的好处来自于利用他们的反馈来改进你的网站。

如果你很好地利用了他们的意见,他们很可能会当真正开始的时候,我倾向于支持你。

请负责任

对于软发行,有一件事要记住:不要随便邀请任何人。你的史蒂夫叔叔,尽管他一直很有趣,但可能不会让你的新作品集引起轰动——当然,除非他在设计界很有名。

相反,专注于你的利基市场。要志存高远。优先考虑那些最有可能产生重大影响的人,如果他们选择评论或分享你的新网站。

只是不要太下流。避免冷冰冰的电子邮件,而是通过各种社交网络建立联系。当然,一句简短的“嘿,@有影响力的家伙,看看[你的网站]”可能会让你一无所获。同样地,跳到一个链接到你的网站的相关线程——除非它真的增加了对话。

首先建立网络。有了一个稳固的网络,合适的人自然会注意到你分享的内容,并选择自愿分享。即使他们不这样做,当你以后直接分享网站时,他们至少会有一些上下文为什么

网络是靠声誉经济运行的。忽视这一点,后果自负。

跳过测试发行?尝试一些挑逗!

即使你没有完全投入到软发行或封闭测试中,你也可以通过戏弄即将到来的内容来围绕(重新)发行进行宣传。

你可以很容易地分享正在进行的UI工作的截图,用动图展示令人惊叹的主页动画,并在Medium上写定位声明,解释你在做什么——更重要的是,为什么要做。或任何第三方出版物在你的空间。

推出一家新餐厅和它的网站?联系当地的美食作家和杂志。一款针对编辑的新网络应用?确保不同的Facebook编辑小组知道它的到来。

你明白了:与那些可能喜欢它的人分享诱人的内容,你就会大肆宣传。

上市:正式发布

当然,发行日是启动你的营销机器的时候。

如果你在科技太空,你的发射日活动可能包括,但不限于:

  • 通知电子邮件给所有当前用户-和领导
  • 在你所有的社交平台上发布(Twitter, Facebook, Dribbble, Reddit等)-认真考虑推广这些来扩大你的受众!同时,一定要提到有影响力的个人和品牌,无论是直接还是间接的,比如通过提供证词、反馈等。
  • 聚合网站上的帖子比如设计师新闻,网页设计师新闻等。
  • 在您的专用博客上发表长篇文章
  • 在媒体上发表长篇刊物(及/或任何有关的第三方刊物)
  • Product Hu欧宝体育在线首页nt上的一篇文章-查看他们的在Product Hunt上发帖的指南欧宝体育在线首页详细信息

如果你不是在技术领域,上面列出的几个平台五月与你无关。但是网络是如此的庞大,任何利基社区都会有它的博客、论坛、聚合器等等,所以只要为你插入正确的名称和地点。

不管怎样,基本原则仍然成立:沟通对你的听众他们在哪里,在你能负担得起的地方,以各种方式。

但宣传并不是发布当天唯一需要担心的事情。还有一些需要考虑的事情:

害怕崩溃

通常情况下,一个新产品、新服务或新网站会大欧宝体育在线首页张旗鼓地推出,结果却在意想不到的流量面前崩溃。

在较大的组织中,您通常可以依靠工程来解决这个问题。对于一个较小的组织,通常不太担心崩溃,但您可以随时联系您的托管提供商以获得提示和帮助。

如果你参与了市场营销,你可以通过仔细考虑公告时间和批量发布公告邮件来帮助防止崩溃。像MailChimp这样的工具会自动给你批量发送邮件的选项,减少数百万次访问同时到来的可能性。

当然,没有什么是完美的,所以你也要有应对崩溃的计划,如果它来了。

密切关注业绩

除了正常运行时间这一基本性能指标外,您还希望监视人们访问您的站点时所做的事情。

谷歌Analytics和许多其他工具可以提供人们访问页面的实时和事后数据,他们探索的多页面流,甚至转化率——所有这些都可以做一个为各种决策提供信息,从网站如何呈现和组织内容,到如何吸引不同的受众。

只要记住你将在发行当天收到的样本数据五月是有偏差的。大量的访问可能会带来许多不适合你的产品的人,这将对转化率、留存率等产生负面影响。

所以虽然你可能会注意到你需要解决的问题尽快-就像主页上的错别字-其他数据可能需要更多的时间来正常化,然后才能进行更改。

更密切地关注公众的反应

并非所有数据都来自谷歌Analytics。你将收到的一些最重要和最有说服力的反馈将来自公开的推特、Product Hunt上的评论、Facebook对话等。欧宝体育在线首页

所以,要注意人们在说什么——积极的和消极的——以了解你的信息、产品/服务和设计的哪些部分有用,哪些没用。欧宝体育在线首页

如果人们对功能X感到困惑,那就重新审视你传达它的方式。如果人们对你在发布内容中没有突出的内容感到特别兴奋,也许这方面需要更多的关注。

人们甚至可能你的手神奇的内容。我可以很高兴地承认,我有好几行表现最好的文案都是直接出自客户之口。

别忘了庆祝

综上所述,别忘了留点时间来庆祝。那些香槟可不会自己喝掉的!

发布后:在网络上,你的工作永远不会结束

快进到发布后的第二天:你的香槟宿醉-你现在可以证明是最糟糕的善良-已经褪色,你在回顾昨天的数字。

希望你对所有营销的反应和效果感到惊讶。你可能也会非常失望。

但无论你如何对分析做出反应,重要的是专注于你的下一个游戏。

回顾你最重要的指标

你早在发行前就知道自己想要移动哪些指标。所以看一直往回对于你的项目目标,定义为设计过程的第一步,并冷静地审视重新发布对这些数字的影响。

如果你做了达到或超过一个特定指标的目标,祝贺你!你实现了你的目标。现在寻找做得更好的方法——或者考虑其他的目标。

如果你没有达到或超过一个目标,是时候在这个目标上加倍努力了。也许你关于如何移动关键指标的假设是错误的。或者也许它起作用了,但没有你想象的那么好。

考虑以下假设场景,你的关键指标是转化率:

目标:转化率提高到15%

假设:目前只通过电子邮件注册的流程让那些不想花时间完成我们的注册流程的人望而却步。

建议的解决方案:添加一个通过Facebook注册的选项。然后使用个人资料信息预填几个字段在入职过程中。

结果:部分成功。注册率提高到12.5%。

部分成功并不是最糟糕的事情,但显然你还有成长的空间。所以开始假设为什么添加Facebook注册并没有像预期的那样发挥作用。在这个阶段,对可能的原因做一些内部检查是可以的。

假设: Facebook注册选项在视觉上不够明显。Facebook注册似乎太有侵略性了。Facebook注册需要太多权限。用户需要更多的社交注册选项。我们最大的观众其实是在推特上。

希望其中一些假设可以立即被驳回。举个例子来说,如果你的大部分用户都是在Twitter上,那么创建一个Facebook注册选项可能就没什么意义了,对吧?

你的其他假设可能需要对现有数据进行一些审查。热图应该能够告诉你Facebook注册选项是否不够明显。对注册流程中的退出点进行分析可能会告诉你这个选项本身是否没有吸引力——例如,如果人们点击了“通过Facebook”按钮,但没有完成,那么可能你要求的数据太多了。如果他们看到了却没有点击它,那么这可能就是一个错误的平台!

在本例中,添加Facebook注册选项似乎至少在一定程度上起了作用。所以增加更多社交注册选项可能会有所帮助。

但数据可能显示注册人数有所增加没有这个选项有很大的帮助。在这种情况下,是时候回到绘图板来弄清楚是什么了真的帮助。

一旦您隔离了关键指标变化背后的原因,您就可以开始设计和内容测试来解决问题。

如果你重新设计,仔细分析

渐进的改变总比雄心勃勃的失败好

托尼施瓦茨

前一节的最后一点强调了一个重要的问题,在回顾重新设计、重新品牌和重新发布的发布后分析时要记住。

当您从头开始时,所有数据都是干净的和新的。没有什么可以与之进行比较——相反,它为未来的测试提供了基准。

但如果你的最新发布是由任何形式的重塑引发的——重塑品牌、重新发布、再设计——你手上就会有一些混乱的数据。

你变了很多事情基本上不可能将任何上涨或下跌归因于任何一个因素,除了大修本身。可能是新的或修改过的标题。可能是修改过的注册表格。也可能是所有新的元素一起工作,就像你梦想的那样协同和谐。

因此,选择重新设计在功能上等同于从头开始。至少从数据分析的角度来看是这样的。相对于之前的设计,你无法得出任何关于原因的结论。

迭代,迭代,再迭代

量两次,切一次

-可能是你爷爷

当然,没有行动,分析是没有意义的。

因此,一旦您确定了需要影响的指标,以及您认为将解决这些指标的更改,就该开始迭代了。

注:我没有说重新设计

因为你不想把孩子和洗澡水一起倒掉。您当前的设计提供了一个基线。为了理解什么比基线更好或更差,您需要创建一个替代方法,并在与基线的比较中测试替代方法。要做到这一点,可以创建一个简单的“这个或那个”测试:将您的流量划分到两个页面之间,并查看您提出的修复方案是否确实更好。

但你可能会想,为什么呢?

我明白了。我们天生就会发现问题,然后根据直觉告诉我们的“正确”来解决问题。

但是,让我们假设您继续前进,启动重新设计的注册流程,并退出旧的注册流程。直觉告诉你新的解决方案就是它“应该”的样子。

重新设计确实如此更糟糕的是.内脏0,世界1。冒险多,无所得。

对于一般的登录页面来说,风险不是很高,特别是如果您使用Webflow。使用我们的版本历史记录功能,您可以相当容易地迭代、启动和恢复。但如果你致力于一个注册流程,那么“发自内心”的重新设计很有可能以相当昂贵的代价结束,并且没有带来任何回报。

所以先测试,后推。结果出来了。

第八章

Webflow如何适应现代网页设计过程

网页设计过程不是静态的。你建立的网站类型和你使用的工具都塑造了你的工作流程。所以这里是Webflow CMS支持的设计过程的另一种观点。

读一章

为了探索这两种截然不同的方法——以及我们目前正在经历的过程中的巨大转变——我将借用珍自己的术语,但对她的#howidoit标签提出不同的观点。然后,我将展示如何将Webflow用于这两种方法——但它是如何在设计过程中真正蓬勃发展的。

“正常”的过程

珍·西蒙斯采用了“正常”的设计过程——一种仍然有一些铁杆追随者的传统路线。

在Jen看来——我敢说,我们其他人也一样——“正常”的网页设计过程是这样的:

  1. 计划。
  2. 见面。
  3. 线框。
  4. 电子邮件的pdf文件。
  5. 说话。
  6. 修改线框图。
  7. 绘制“移动”的pdf文件。
  8. Photoshop。
  9. PDF。
  10. 批准。
  11. 构建。
  12. 船。

就像匿名戒酒会一样,也需要12步。(如果我不认为这是非常不恰当的,我想在这里开个玩笑,用一路走来的类似数量的失败来开玩笑。但我不会。)

现在,我们可以深入研究并分解这12个艰巨的步骤,但我将节省所有的闪回和抽象一点。从本质上讲,“正常”的网页设计过程是一个循环过程,设计师反复地:

  1. 制定策略
  2. 模拟了
    大概是Photoshop或Sketch,但重要的是不管它是什么格式,它都是HTML / CSS / javascript。
  3. 分享
  4. 审查
  5. 修改
  6. 重复

直到站点被批准、建造和运输。

正常设计过程中值得注意的元素

为了理解为什么人们对标准设计过程越来越不满,有必要探讨一下上述过程中不太理想的元素。

“正常的”设计过程是桌面优先的

无论现在的“桌面”是什么,很明显,这个过程优先考虑的是桌面,而把“移动”(也就是所有其他设备,坦率地说,这些设备正变得越来越广泛使用)降级为事后的想法:12步中的第7步。

当你考虑到这一点时,这是相当奇怪的——尤其是对于一个如此依赖于我们的“用户”以及他们如何体验我们的工作的行业来说现在,手机已经成为我们“消费”互联网的主要工具。

根据ComScore的数据,手机已经成为我们探索数字世界的主要媒介。

正常的设计过程是一次性的,而不是可回收的

这个“正常”过程的另一个引人注目的方面是它强调工件的创建,这些工件是:

  • 一次性
  • 摘要
  • 静态

换句话说,我们花了很多时间来绘制pdf文件概念模型用于我们正在构建的网站、应用程序和数字产品——而不是基于互联网的东西:H欧宝体育在线首页TML、CSS和JavaScript。

这是一个讽刺。在这里,我们正在为人类有史以来最具活力、最具互动性的媒体而构建……并通过基于规则的静态模型来实现这一切没有什么与互联网的运作方式有关。

最好的情况下,其中大部分最终都被铭记在我们的投资网站上,最坏的情况下,我们的垃圾桶里。

哇,好玩。

在正常的设计过程中找不到内容?

乍一看,你可能不会注意到这一点,因为这是一种缺席,而不是存在。但到底内容在哪里,你知道,这是大多数网站存在的目的-加入这个过程?!

这完全是个谜。这可能有助于解释为什么设计师(以及设计过程中的所有其他合作者)越来越厌倦这个“过程”。

现在转向……

全新的网页设计流程!

西蒙斯很快就按照她对“正常”过程的定义发了第二条推文,标签是#howidoit。但她可能会给它贴上#新设计过程#的标签。

这是它的样子:

  1. 计划。
  2. 见面。
  3. 指甲内容模型。
  4. 构建在CMS之上。
  5. 添加真正的内容。
  6. 看。
  7. 说话。
  8. 铅笔和纸。
  9. 构建。
  10. 看。
  11. 视觉风格。
  12. 船。

仍然是12步,但这是一个完全不同的游戏。让我们来仔细看看是如何做到的:

新的设计过程是内容优先或内容建模优先

而不是跳跃到最终网站的早期可视化-“正常”过程在第3步线框图中所做的-新的设计过程侧重于内容

注意,它不是以写作内容,但与建模它。中详细介绍了内容建模过程为什么你的设计过程应该从内容开始,但总结一下:内容建模侧重于识别三件事:

  1. 必需的内容类型
  2. 内容类型之间的关系
  3. 各个内容类型的结构

当你为你的下一个网站的内容建模时,确保你的内容类型和结构满足网站用户的需求。所以不要想着“如果我们有X内容类型不是很酷吗?”,从用户的角度考虑什么才是“酷”。

例如,如果你正在创建一个食谱网站,用户需要:

  • 食谱
  • 成分
  • 指令

所以,尽管在你的网站上拥有世界上所有主要菜系的广泛历史可能很“酷”,但它不应该是优先考虑的,因为它不符合受众的需求和期望。它可能提供一种方法使你的食谱网站从激烈的竞争中脱颖而出,但这不是你所说的“餐桌赌注”。

新的设计过程使用真实的内容

而不是使用精心策划的长度lorem ipsum以确保漂亮的,三个字的标题从来没有Wrap,新的设计过程包括尽快用真实的内容充实网站的数据库。

这不仅可以帮助你立即识别设计问题和边缘情况(如过长的标题),还可以鼓励你与你的设计应该迎合的内容创造者产生更大的共鸣。

新的设计过程将视觉造型留到了最后

也许令人惊讶的是,直到发布之前,您才会深入了解设计的视觉样式方面。

这样做的好处是允许设计由内容来塑造,而不是事后试图将内容硬塞进视觉风格中。由于绝大多数网站的存在都是为了呈现能够推动行动的内容,这种方法将重点放在了它应该放在的地方:内容以及如何最好地呈现内容。

那么,Webflow如何融入这个设计过程呢?

当我不为Webflow写内容时,我会运行我们的各种社交账户,包括Twitter,所以我兴奋地引用了Jen的评论:

巧合的是,使用@webflowapp CMS的一个极好的方式。

但回想起来,我应该说"巧合的是,这是使用@webflowapp CMS的绝佳方式。”

因为实际上,这是理想的建立网站的方法Webflow CMS.我们的许多作品都遵循了这个过程,包括用于原型的WebflowWebflow vs. WordPress,甚至Webflow专家

这是因为Webflow CMS为您提供了强大的,功能建模网站内容的方法(必然)涉及大量的电子表格和图表。

相反,你在Webflow中创建内容模型通过集合,所以你不仅在抽象建模的内容,但实际上创建一个工作数据库,可以驱动你的网站的每一个元素。这意味着你不是在创建“另一个一次性的产品”,而是一个真正的可交付产品——它不仅可以指导网站的创建,还可以指导网站的长期维护。

一旦你通过集合创建了内容模型,你就可以开始输入你网站的真实内容,并开始围绕它进行设计——从线框到高保真,无论你想要什么样的保真度——立即。

更好的是,你可以开始点击你的网站,搜索边缘案例,机会,并获得整体用户体验的感觉。这是非常强大的,因为它让您以一种具体的方式体验内容模型,就像最终用户一样,因此您有时间对信息架构和整体UX进行调整。

要有一种非常真实的感觉作者你正在积累的经验。

当你在构建CMS网站时,你不仅仅是在为网站的访问者创造一种体验,你也在为作者创造一种产品——一种内容管理和发布工具,应该基于他们的编辑职责和风格的细节。欧宝体育在线首页因为你将直接在CMS中工作,不仅充实网站,而且创建内容,你有一个与网站观众建立共鸣的黄金机会而且它的作者-那些将做真正的工作,不断创建,再创造和完善网站的人。

更多关于如何设计一个伟大的作者体验,请查看我们的为内容创造者设计的5个技巧

准备好看看Webflow可以适合您的流程了吗?

那就试试吧。它是免费的开始

Baidu
map