第四章

把内容放在第一位

创建内容,关系到你的听众是你的网站成功的关键。

杰夫Cardello
杰夫Cardello
吗?阅读时间
内容应该在设计过程的核心。了解你所拥有的,或想要包括,形状布局和流程。没有任何形式的结构化内容,构建网站将是一个更耗时的和令人沮丧的过程。

为什么内容很重要?

帮助人们,帮助业务。

leo Burnett,广告传奇

内容就是给一个网站的意义。它吸引人们,让他们了解一个网站的目的并采取行动。它回答潜在客户的问题。

内容是像一个引擎,没有它,你必须是一个空,无用的外壳。

内容是品牌的故事的话,视频显示一个产品是如何工作的,以及博客文章探讨的想法。欧宝体育在线首页内容不应该事后或一大堆的销售的说话。我们的网站有更好的表现,当我们经过深思熟虑后,测量我们的内容需要与设计沟通和它是如何工作的。

内容和搜索引擎优化是互惠互利的

组织不能匹配内容创建和推广内容可能会发现自己失去营销者学习SEO的基本知识。

兰德·菲什金Moz的创始人

web爬虫程序的内容就像一个灯塔,它标志着网站的相关性和提供信息的网站web爬虫需要排序和等级。一种内容的方法,重视SEO会导致更好的搜索排名和更好的用户体验。

SEO不应该重了。一起捣碎短语和关键字会导致写作的强迫和困惑。内容需要有用的和真实的同时还提供web爬虫程序需要一个网站排名。

研究的关键是写作内容的搜索引擎优化。花点时间查看相关网站和期刊。跟客户和其他主题专家。了解常用的单词和短语。

在线关键字工具可以生成单词和术语不会立刻浮上心头。Google AdWords关键词规划师和WordStream是伟大的资源来研究相关的关键字和短语。

Google AdWords关键词规划师
Google AdWords关键字规划师有助于提供可能被忽视的关键字。

如果我是写我知之甚少的东西,像飞钓,Google Adwords关键字规划师将是一个巨大的帮助。一些条款是没有头脑,比如“钓鱼竿”和“钓鱼绕线轮。”其他人,像“飞将供应”和“飞将材料,“不是我自己想到的。

注意“Avg。每月搜索”和“竞争”列。较低的关键词竞争,但高搜索量,像“鱼飞”在上面的列表中,可以做很多事情,从而提高自然搜索排名如果正确目标在你的网站内容。就因为有很多竞争和付费广告并不意味着你就应该忽视这些短语。编织成你的内容将进一步加大其相关性。

记住要挑剔什么短语和单词你从这些工具。确保你的内容仍然是有用的和明确的。客户端或主题专家审查的搜索优化的内容,然后将它设计。确定什么是你写准确,适合现场的声音。

内容应该是设计的基础

当我们知道一个网站的最终目标,我们拍的内容需要满足这些目标。看看现有内容,看看是否有什么缺失或不清楚。

组织这些内容会通知了每个页面,使创建一个站点地图容易得多。使用定义良好的站点地图可以拯救你的团队从无用的设计和浪费时间。从必备内容和站点地图将帮助您的团队看到不同类型的内容组合在一起,用户将如何相互作用并导航网站。

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

内容的方式汇集了设计师和作家。两个领域的需求和限制会影响工作的每一个角色。内容创造者和设计师能够产生更强的工作当他们共享一个共同的目标和了解各个部分协同工作。

模型内容再写

“但是我已经做了一个网站地图和线框图。我为什么需要一个内容地图吗?”

因为到目前为止,你所做的一切吧!为什么停止了?

网站地图帮助我们想象一样的导航、内容地图给了我们一个指南内容的流动,特别是在CMS。内容地图显示我们在每个页面的具体内容,这些思想如何与更大的整体。信息体系结构将更加坚实的基础,当内容已经被组织。

如果你的设计有任何形式的web-app-like功能,或者如果你有混乱的无组织的内容,内容模型可以帮助弄清楚其中的含义。它可以帮助你完善你的信息之前工艺一个标题。

内容模型应该从宏观版本显示的主要类型的内容没有任何相关细节。假设我们网站卖书,会有一个页面致力于新版本:

宏观内容模型提供了一个内容类型的高级概述网站将包含,以及这些类型相互关连。

这个宏视图显示我们如何将这些组件组合在一起。点击一个标题的新版本时,我们会得到一个页面的特定的书,以及类型,作者和出版商。假设我们想要仔细看看每一个块的内容和类型的信息和元素包含。我们扩展这些微内容模型。

微观内容模型添加网站内容类型包括细节,进一步充实。它还提供了指导领域需要包括在你的Webflow CMS集合!

现在我们可以看到更多类型的内容需要在每一页,就像作者传记作者块和给定类型的背景信息。创建一个微内容模型也向我们展示了其他内容的机会,像书为每个类型的建议。

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

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

事实上,工作内容模型将偿还大当你开始构建CMS集合。这是因为细节你在宏观模型直接转化为字段添加和/或集合Webflow CMS。

例如:假设你正在构建的网站在上面的图进行建模。你创建一个名为书籍的收集,开始分配领域。“英雄形象”显然映射到一个图像领域。标题名称字段将被捕获。体裁、作者和出版商所有显示为宏观层面的内容项目,所以他们会每一个需要一个自己的收藏,而这本书收集可以通过引用和/或多引用字段引用。

方便的,对吧?在这,看看我们的文章”,为什么你的设计过程和内容应该开始吗。"

世卫组织和创建内容

我们已经强调是多么重要的一些想法之前任何像素在设计内容。但谁将创建这些内容呢?

最好的情况是,你的客户有一个团队的作家。这些词书呆子知道需要沟通以及如何与观众在他们理解的语言。他们写作的主题专家和大师的工艺。但是这个梦想的团队——的作家往往只是一个梦。

不是所有的客户都有内部的资源内容的团队。小企业主可能把这个责任在自己身上,或者委托给家庭成员的创意写作类或两个。不幸的是,这可能意味着在质量部门内容不足,导致整个项目受到影响。开始你的项目审计的现有内容(如果有的话)和评估其质量。

然而创建内容时,不要推一个像素至少一个粗略的框架的内容。没有明确的目标的实质和目标网站,每个人都将不满的过程及其结果。

预期的质量内容需要清楚。如果你的客户不是一个作家,没有一个可用的,你有两种选择。要么离开房间的预算来自己创建的内容(如果这是一个技能),或雇佣一个职业作家,你信任。

但是客户不承认好写吗?如果他们喜欢一个作家和他们不会让步吗?

我的技巧向他们展示作品的内容。找到一个编写良好的竞争对手网站的简洁,并指出复制并呼吁行动的力量。显示你的客户的关键词和短语编织整个网站SEO游戏强。

有人可以是一个精明的生意人,不知道质量写的样子。帮助你的客户理解用善良和尊重————好复制的价值及其潜在影响收入和品牌知名度。

包括客户端在写作过程

如果你是一个自信的作家和编辑,包括你的客户在内容创建过程。

讨论的内容类型所需的项目是一个很好的起点。从宏观层面:信息用户正在寻找什么?他们需要知道公司或产品,不是显而易见的吗?欧宝体育在线首页观众的误解是什么?这些主题将帮助的项目符号列表通知内容你需要工作的类别和/或创建。

采访关于细节的客户需要回答这些问题,做笔记或记录会话!客户可能会更好地解释事情当他们说话和感觉的压力解释。他们的措辞可以非常有用的最终内容,引起我们的注意。如果客户渴望贡献自己的副本,让他们给你简短的段落或句子,解释每个块的主要部分的内容。你或作者可以把碎片成强大的内容挤满了搜索优化和引人注目的标题。

一些客户将有足够的写作技巧。如果有时间,车间所写。如果他们往往是冗长的,与他们一起工作更简洁。或者他们挂在营销陈词滥调?这也是可控的。

任何作家都可以成为更好的指导下一个熟练的编辑器。如果你习惯在这个角色,就去做吧。只要确保你是补偿你的时间。

内容让人们参与

内容是为什么人们访问一个网站。设计呈现这些信息存在于有组织的方式和添加功能和风格。有内容在过程的早期开发的设计意味着可以塑造。这个中心允许设计突出内容,带来更好的用户体验。

分享

下一章的标题

下一章的介绍

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

设定目标

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

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

但有这么多输入,很容易就忽略了什么是最重要的。模糊的期望导致挫折和可以减缓这个过程。这就是为什么你需要清楚你的项目的目标。为什么每个人都需要共享相同的愿景是成功的。

知道这个网站的目的

松弛的主页上清楚地知道它的目的:让你开始松弛。

当然,一个全新的,引人注目的网站总是积极的。但是投入的时间和金钱来构建一个可以变成一个短期投资如果没有更深层次的理由这样做。

不管你是从零开始,还是你做一个完整的设计,你需要知道你想要什么用户远离你的新网站。你想沟通的内容吗?什么叫行动需要编织在吗?理解这些焦点是什么所以你创建一个放大的设计。

一个网站不应该是一个孤独的数字前沿哨所,但应符合一个品牌的整体战略。它需要补充这一策略以及增加自己的价值。它很好如果网站只是提供一片毛茸茸的娱乐如果这是你的意图。但最终,网站应该帮助填补差距的客户知道,和你的客户希望他们的客户知道。

识别问题并找到合适的解决方案

可能有一个以上的方式来解决客户的问题。你的工作找到最好的方法。

识别需要解决的问题,并找到合适的解决这些问题,首先需要与客户和其他利益相关者。

你必须有一个开放的对话框来找出他们当前的工作网站,没有什么,他们认为不喜欢。内容坚实但可用性是一个噩梦吗?是客户的结帐过程很痛苦,失去销售?你需要了解你的客户考虑网站的主要问题,以及收集反馈他们已经从那些已经使用了它。

您还需要自己做调查。深入挖掘现有网站,注意一切需要升级。,不要只关注是错的——考虑工作。你可以把当前网站的积极方面融入你的新设计。

很容易就会因为小细节而误入歧途。但这不是细节的时候。你和客户需要把注意力集中在网站完成,你将如何实现这一点。

客户经常会认为他们完全理解这个问题,有一个可靠的解决方案。有时,他们会没有方向,只是直觉,他们需要改善。设计专家,我们的工作就是探索选择和推荐一个最优解(和失败,一个体面的解决方案)。

当我在零售企业领域工作,我是一个团队的一部分负责整理公司的环境可持续性报告。他们做印刷是一个全面的五十页的报告,导致一堆纸是绿色。

我们的解决方案?修剪成小册子,覆盖了五十页的报告,用再生纸印制,大豆油墨,与网站的更多信息的链接。从而解决问题,他们甚至不知道。

作为设计师,我们有专业的解决方案为已知和未知的一个项目所涉及到的一些问题。

了解你的听众

Evernote显然知道观众是充满创造性的人有一百万个想法,,不想忘记的。

了解你的目标受众将指导您整个设计过程,简化决策通过强迫你回答一个简单的问题:

这是有用的对我们的观众吗?

你的客户应该人口信息,如收入、性别和年龄(在他们的Facebook页面分析,如果其他地方)。你也需要知道他们的消费习惯:

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

知道这一切将帮助你创建一个设计符合他们的其他消费体验。

如果所有的网站共享一个目标,它与观众。通过了解你在说什么,你会更好地有效地接近他们。

写一个创意简报

当项目目标,是时候创意简报。我看到他们跑一段短,只要你的毕业论文(读者数据长度成正比)。

然而冗长的你是,是至关重要的组装一个创意简报,这样你,客户,和其他所有人参与该项目了解其细节。创意简报需要定义何人,何事,何地,铺设范围和需要做什么来完成每个目标。

定义成功

你会知道终点线,当你到达那里吗?

没有定义成功是什么样子的,你永远不会知道你实现它。

一些成功的措施比其他人更明显。人们理解数字。当他们看到流量和销量上升,他们知道他们获得成功的一种方法。

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

  1. 改进的排名在搜索
  2. 增加他们的手工制作的商品的销售

知道这两个目标预先让我的工作容易得多。我花了巨大的的时间在研究和写作SEO-optimized内容。我还发现一个更好的电子商务平台,让他们把新的、高分辨率的照片,他们的库存。

销售增长和她的组织使得许多大容量的第一页搜索条件。她很高兴,所以我这个项目是成功的。

当你定义项目成功,不要不切实际的承诺。对于这个非营利组织工作,我解释了什么是他们当前的网站上不是有效的。我从来没有超卖我要做什么,但我确实解释它如何会比他们更好。这是。

当然,“成功”也可以少一点混凝土。提高品牌的声誉和区分他们从竞争很难衡量。但是如果你正确设置你的客户的期望,他们将能够看到成品。欧宝体育在线首页(如果做不到这一点,你可以运行一个NPS与当前客户调查来衡量响应新的设计。)

每个人都参与这个项目需要知道如何决定它的成功。当每个人都有一个共同理解的成功,你都可以评估和识别的影响,所有的辛勤工作。

设定你的目标

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

当人们理解了为什么,他们也更好的理解如何实现他们的目标。找到这些目标在项目的开始,这样你就可以获得成功。

第二章

定义项目范围

或者,如何处理范围渐变,保持您的项目目标,只做你的工作得到报酬。

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

突然,客户有一个更好的主意你可以做些什么来让这个项目成功,,是的,需要一些额外的工作你不谈论。你努力工作,但客户现在希望改变方向,让你所做的一切浪费。你认为是一个连续发射已经变成了一个曲折的旅程通过优柔寡断的乡村道路。

欢迎来到这个美妙的世界范围渐变。

范围蠕变是什么?

当你和你的客户共享一个清晰的理解的一个项目,你可以避免范围渐变。

你可能听说过这个词。但是,它到底是什么呢?

当一个项目的增长超出了约定的开始,你手上的范围渐变。项目发展没关系,但是如果它让你的位置为同样的钱,做更多的工作那是一个问题。

这里有几种方法来处理它之前,把这个项目变成了一个活生生的噩梦。

在你的合同定义项目范围

制定明确的语言你会提供哪些服务和客户端将如何被起诉。

我们知道,你是一个自由职业者。你每天享受生活的自由,如果星期五便装日。你工作以外的传统9 - 5所示。你想让事情“寒意”。

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

之后会见客户和其他利益相关者,你应该非常清楚的项目及其目标。这是时刻把所有重要的细节你讨论这个项目以书面形式

详细工作你会和不会做

定义你会提供哪些服务。是直接和详细的你的语言,使其清楚你客户,是否它是一个每小时费用或一组价格为整个项目。

例如,您可以定义范围如下:

我将建立和启动五个网页,包括:

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

这些页面的内容将由XX所提供的客户端/ XX / XXXX。如果内容不提供的日期,项目时间需要延长。

每一页3设计修改。额外的修改将收取$ X的速度。

你还需要详细的工作类型将会下降合同,如过度修正,以及如何将比尔这些“额外”的客户服务。

继续上面的例子中,你可以添加以下:

任何页面添加到上面列表将增加1周的项目时间表。以上内容可以产生任何页面,或任何其他页面,每个页面的速度500美元。

要求组合使用的权利

如果你想,你也应该问你是否可以用你所做的工作的例子,为自己的投资组合,如果他们同意,注意这个合同。灵活是很重要的在这一点上,如果你想要这个项目,一些客户可能会没事和你使用的工作样本,只要他们的公司名称是省略了,或者只要投资组合页面是密码保护。

是一个游手好闲的人创造一些伟大的为客户,后来才发现,你不能用它来你的投资组合。

包括杀死费或首付

有时客户会决定取消一个项目你已经开始。也许决定把时间和金钱奉献给别的东西。

保护自己免受失去你所从事的工作,特别是如果你同意支付一笔固定的项目,你需要包括杀死费,或者要求首付。

这将保护你从离开在你的口袋里没有一分钱的你。杀死费可以总费用的比例,或者是基于所有的工作你已经完成取消。

它可以是一个艰巨的任务写了一份合同。但请记住它没有完整的法律语言。保持它的简单明了。确保客户完全理解它之前,你都把你的签名。

如果你不知道从哪里开始自由合同,读我们的文章”如何设计可以帮助您管理客户合同”,看看AIGA的(详细的)标准形式的协议设计服务或者适应这自由平面设计合同从火箭律师。

准备好范围渐变

让你的客户知道服务将被认为是在项目范围之外。

什么开始作为一个着陆页面的更新变成更多的调整在几个其他页面。然后它变成了一个完整的设计改革——整个网站。

如果你收取每小时率,这可能是伟大的,只要不是吃到时间你已经致力于其他客户。否则,你将会做额外的工作,没有加班工资。

同意做额外无偿工作没有“好”

我们都想成为适应和让我们的客户满意。但当我们开始同意不履行合约的事情,我们只是鼓励的坏习惯——比如客户认为额外的任务仅仅是意料之中的事。我们的自由职业者的工作是确保他们不认为。

合同可以节省你做额外的工作没有得到额外的工资。如果客户需要更多的东西,像电子邮件活动或改变他们的社会媒体内容,您可以添加一个变更请求你的合同条款。等任何超出合同的一个条款可以确保你支付你的辛勤工作。

创建可交付的最后期限和付款

这就是为什么有一个时间表交付事项。如果你同意时间表和一组费,你需要准备好如果时间被延长。每一个时间表应该包括一点回旋的余地,但作为一个自由职业者,你必须保护你的时间仔细,尤其是当你有其他客户。

随着项目的时间表,也需要有一个付款的最后期限,并说明如何提交付款。这有助于减少混乱和确保你会得到你了。

安排时间反馈和编辑

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

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

很多客户不知道更改设计的总体影响。看起来像一个小编辑,如重新定位一个图像或改变字体,很容易引起雪崩的变化。

这关系回到一个时间表的重要性。分配时间的修正和指定什么类型的变化你会工作。例如,如果客户端试图重塑偷偷放入一个网站设计项目,你将在你的权利说不,只要你的合同是明确的。

另外,记住,随着项目的发展,某些变化变得更加困难。重组的内容可能是容易在早期,但是,当整个网站地图的变化就在QA阶段——好吧,这是一个完全不同的故事。这就是为什么你的合同应规定可能会影响整个项目的后期更改。收取额外的费用变化,超出时间轴将保护你从做过度的免费编辑和控制你的客户如果他们往往吹毛求疵。

当然,你需要找出谁的反馈将被过滤。识别一个人交流编辑将简化程序,并迫使利益相关者在相同的页面上。有多个人们给你的反馈可能导致冲突的想法和泥泞的项目的目标。

停止蠕变

为一个项目很容易超出你计划和承担自己的生活,像一个怪物打破一个疯狂科学家的实验室。为了避免诅咒你无意中创建,创建与你的客户设定界限——沟通是避免范围渐变的关键。当你和你的客户有一个相互了解的工作,这个过程将变得更加容易。

第三章

创建站点地图和线框图

学习什么时候以及为什么创建站点地图和线框图,并得到一些详细的建议关于如何创建它们。

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

从一个网站地图

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

你有没有飞机窗口望出去,看到一个全新的细分的轮廓成形下面吗?这就像一个站点地图:一个结构需要构建的足迹信号,从30000英尺。

站点地图提供了一个网站的层次结构和图显示了每个页面都属于这个层次。

(注意:在这篇文章中,我们讨论了网站地图网站规划和沟通工具,而不是文字XML站点地图你会创建帮助搜索引擎蜘蛛爬行你的网站——尽管规划工具应该基本上定义XML站点地图将包含)。

当你构建你的层次结构,是至关重要的,你不断地引用您的项目的目标。这是因为该网站的层次结构需要反映,为实现这一目标作出贡献。

例如,如果您正在构建一个电子商务网站,一个你的目标无疑是出售产品。欧宝体育在线首页因此,你的站点地图应该将产品指数和页面或层次结构的顶部附近,所以欧宝体育在线首页游客可以立即看到他们需要去实现你的目标和他们的:买东西。

创建站点地图

你可以按照几种不同的方式方法的设计你的站点地图。你要选择你的方法基于两个特质:

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

换句话说,它需要能表达你想要表达的信息的方式是清楚你的听众。

例如,下面是3共同创建一个站点地图的方法,以及每个是最好的传达的信息:

1。列表

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

指数

——设计师

- - - - - - CMS

——编辑器

——举办

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

这是很好的交流页面主题和相对的层次结构。你可以立即看到的页面设计师,CMS,编辑,主持,和客户都收到相同级别的地位,与特定客户故事,在一个较低的水平。

这是什么所以善于沟通用户这些页面之间的路径。没有指示,例如,设计师,CMS,编辑器和主机出现下拉标签所有功能在网站的主导航。或者每一个页面链接到网站的主页。

使一个列表格式方便,比如一个页面库存,但是你不想交给一个客户说,“这是人们如何将浏览的网站。”

2。水平图

希拉里·皮特的站点地图(这部分的顶部)是一个水平图,可能最熟悉的形式的网站地图。

喜欢,它抓住了网站的高级视图。不像列表格式,它更清楚显示页面之间路径/经验,正如你所看到的在检验流程运行在地图的中心。

使它更好的交流工具,层次结构和人们如何将客户浏览网站和其他非技术人员。虽然作品优美的技术上倾斜!

值得注意的是,皮特的网站是一个电子商务商店,它提供全面的库存的网站页面。可能有一个或一千个不同的产品页面,不管这张地图,作为产品页面将几乎肯定会通过动态模板或处理欧宝体育在线首页UI工具包,从产品流指数产品细节不太可能因产品而异欧宝体育在线首页。然而,如果有产品类型需要不同的内容模型,要注欧宝体育在线首页意这些。

3所示。垂直图

垂直图基本上就是一个水平图其翻倒在一侧。因为从左到右流意味着进步(在文化阅读流从左到右),垂直图是最有用的更包含映射的经验,如特定的用户流量,或更具体的结构区域的站点。

皮特的购买流程部分的水平图是一个很好的人选一种垂直图(事实上,垂直图,嵌入水平)。

陷入困境的你的地图吗?尝试一种卡!

如果你和你的客户已经明确定义项目的目标,有一个好的机会,构建你的站点地图会很自然。但在更大的项目,和详细的内容,您可能需要打破一个久经考验的工具:卡片排序。

运行一种卡,只是收集你自己,你的客户和其他利益相关者一起亲自(或数字)。然后写下你所有的页面索引卡片上的名字和协作排序分类对你有意义。一旦完成,创建一个站点地图基于排序的卡片和由少数成员(理想情况下)运行它的目标受众,以确保它是有意义的。

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

网站地图工具

任何有框的设计工具,箭头,和文本编辑功能的构思时可以帮助你完成工作。但它有助于(很多)使用工具,这些方框和箭头预先存在的元素(通常称为模板)。

这里有几个站点地图元素加载所附带的工具:

为什么你需要线框

如果一个站点地图提供了你的整个网站的蓝图,一个线框代表了单个页面的蓝图(或一组页)。这就是你会看到如果你可以把你的网站地图,然后放大,提高单个页面的高级地图。

网站地图,一个线框捕获层次结构。但是这一次,单个页面层次结构是有限的,因此定义的相对重要性流过页面内容。

与原型相似,线框图可以在各种水平的忠诚。基本上一些线框图最终设计,完成最后的字体和大小,照片样品,甚至生产就绪的副本。欧宝体育在线首页其他人更示意图,坚持一组黑白盒和斑点,内容有一天会出现。

因为广泛的形式,重要的是要清楚地解释你的涉众的最后你的线框图。

德里克·克拉克创建这个线框,它显示了页面布局的基本元素,但仍通信的最终设计将如何的外观和功能。

花一些时间来回顾这个线框从内容的角度来看。实际上有很多含义,要么需要变成了内容标准,或修订内容标准记住!

例如:

  • 大标题类型意味着文章不能有超过6或7字
  • 卖弄风骚的文章可以相对较长,这可能有助于减轻上述限制
  • 每一篇文章都需要突出一幅图像
  • 滑块标题需要由于类型的大小
  • 有一个“乡村切换器”在右上角,这可能意味着需要翻译网站内容。设计有重大影响,在德国6或7字标题可能是更长的时间比一个用英语写的

这只是开始。

给利益相关者就足以让正确的想法

维吉尔Pana简单的手绘线框图捕获最终设计的本质。

别以为一个线框原型。线框图提供一个示意图表示,与图形和内容(通常)剥夺了,显示的基本结构。原型,另一方面,应该提供一个工作版本的最后一个站点(虽然精确度的,范围广泛的)。

线框允许利益相关者了解内部的单个页面,网站将流程和功能。因为没有一个线框设置在代码中,利益相关者可以自由在你开始之前请求翻天覆地的变化设计。

线框以可视方式传达网站的结构,每个人都能理解。类似可以复杂的状态变化来描述不熟悉的人设计,而是一个线框可以澄清,用一个简单的视觉或两个。

需要明确一件事之前你告诉任何人你的线框图是它们代表什么。

很明显任何观众,这些线框图代表最终的产品是如何的外观和功能。欧宝体育在线首页保持简单明了,所以每个人都可以想象这个项目会带来什么。简单的灰度形状应该足够了。

如果有疑问,注释

因为你的线框是一个web页面的示意图,您可能需要包括任何额外的notes /注释,可以澄清这些经验。

看看下面的线框图。作为一个设计师,你毫无疑问立即认识到灰色圆和四个破折号作为标志和导航链接。但大多数客户不知道他们在看没有“导航”callout !

一个GIF动画编译几线框图由克里斯·班尼斯特

就我个人而言,我喜欢标签线框部分的线框,只要我能想出一个清晰的、简单的名称。我刚刚见过太多利益相关者误解一节的目的,并有误解扭曲他们的反馈,跳过这简单的加法。

站点地图和线框图帮助你得到一个在内容

什么先有鸡还是先有蛋?谁在乎,重要的是蛋黄。设计就像shell一起保存的内容。

无论多么伟大的设计看起来,它不会弥补的事实,其内容可能会腐烂的。

线框图帮助如何?通过展示我们需要什么内容,大约多少空间致力于每一个部分。线框应流直接从您的网站内容策略,在每个页面显示内容的层次结构,每个页面如何适应总体战略。当作家正在从这样一个地图,达到他们的目标变得更加容易。

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

你从哪里开始呢?最重要的内容——即。,that which contributes most to your project’s core goals.

这个网站希望促进网上销售吗?然后你需要确保每一个产品都有一个编写良好,新的篇章描述,加上所有的规格欧宝体育在线首页潜在买家想知道。这对构建CMS领域你需要为你的产品集合!欧宝体育在线首页

是你的网站更大的品牌再造的一部分吗?确保你知道你的项目符合“重塑,而你所有的资产需要沟通这个新公司的身份。

你不需要做所有的写作。相反,专注于确保UI是可以理解的,乍一看,要是而言会去那里

例如,你可以有一些标题东方人们页面内容,然后用占位符填写其余字体BLOKK或者是流字体。确保每个部分标签显示内容将去哪里,这样客户不分心的填充内容。

内容形状设计

原材料的内容影响外观和将导航的页面。图像通过Flickr用户PerzonSEO

内容包括在网站上的一切物质。无论是视频解释产品,动画显示一个应用程序是如何工作的,或者一个非营利欧宝体育在线首页的关于页面,每个元素沟通有一个消息或讲述一个故事。你不需要所有的这些内容在设计之前,但它确实有帮助。

我们已经讨论过一个线框如何塑造内容。但这也可以工作在另一个方向。再一次,你不必完成所有内容。但是如果你有一切你想要包括的大纲,您可以创建一个站点地图和轮廓线框图的基础上。

即使知道了类型网站的内容需要将帮助你想出一个站点地图和线框。这个内容不需要充实,但知道会有一个博客,一个联系人页面为客户寻求报价,和关于公司的历史的一个页面将帮助你找出所有需要结构化。sitemap分解一个网站最基本的组件和一个线框给更详细的每个页面将包含什么。

如果你准备好完整的内容,把这些内容到你的线框,看看它适合。如果内容超过专属空间,您可能需要进一步划分。然后您可以将这个额外的页面添加到线框和调整内容的组织。这是对一个设计师的容易方法后的事实。

知道你的搜索引擎优化

搜索引擎优化不应该马后炮。在你坐下来开始之前站点地图和线框图,武装自己的关键词一个客户想要的目标,和形状的结构和组织相应的网站,其内容。

线框图阶段可以成为一个伟大的地方开始你的搜索引擎优化工作,因为你可以做到没有干扰来自充分发展的内容。没有页面上的所有这些话,你可以专注于关键SEO元素(如标题、元标记,导航元素。这些SEO-ified线框可以作为一个伟大的创造者的大纲最后的内容。

当你把在工作之前,这个过程变得更容易

站点地图和网站线框图奠定基础。当你准备把思想放在网站的目标,建筑,和用户体验,你会有一个目的导向的过程。当成功的道路已经扫清障碍,它使更快的旅程。

第四章

把内容放在第一位

创建内容,关系到你的听众是你的网站成功的关键。

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

为什么内容很重要?

帮助人们,帮助业务。

leo Burnett,广告传奇

内容就是给一个网站的意义。它吸引人们,让他们了解一个网站的目的并采取行动。它回答潜在客户的问题。

内容是像一个引擎,没有它,你必须是一个空,无用的外壳。

内容是品牌的故事的话,视频显示一个产品是如何工作的,以及博客文章探讨的想法。欧宝体育在线首页内容不应该事后或一大堆的销售的说话。我们的网站有更好的表现,当我们经过深思熟虑后,测量我们的内容需要与设计沟通和它是如何工作的。

内容和搜索引擎优化是互惠互利的

组织不能匹配内容创建和推广内容可能会发现自己失去营销者学习SEO的基本知识。

兰德·菲什金Moz的创始人

web爬虫程序的内容就像一个灯塔,它标志着网站的相关性和提供信息的网站web爬虫需要排序和等级。一种内容的方法,重视SEO会导致更好的搜索排名和更好的用户体验。

SEO不应该重了。一起捣碎短语和关键字会导致写作的强迫和困惑。内容需要有用的和真实的同时还提供web爬虫程序需要一个网站排名。

研究的关键是写作内容的搜索引擎优化。花点时间查看相关网站和期刊。跟客户和其他主题专家。了解常用的单词和短语。

在线关键字工具可以生成单词和术语不会立刻浮上心头。Google AdWords关键词规划师和WordStream是伟大的资源来研究相关的关键字和短语。

Google AdWords关键词规划师
Google AdWords关键字规划师有助于提供可能被忽视的关键字。

如果我是写我知之甚少的东西,像飞钓,Google Adwords关键字规划师将是一个巨大的帮助。一些条款是没有头脑,比如“钓鱼竿”和“钓鱼绕线轮。”其他人,像“飞将供应”和“飞将材料,“不是我自己想到的。

注意“Avg。每月搜索”和“竞争”列。较低的关键词竞争,但高搜索量,像“鱼飞”在上面的列表中,可以做很多事情,从而提高自然搜索排名如果正确目标在你的网站内容。就因为有很多竞争和付费广告并不意味着你就应该忽视这些短语。编织成你的内容将进一步加大其相关性。

记住要挑剔什么短语和单词你从这些工具。确保你的内容仍然是有用的和明确的。客户端或主题专家审查的搜索优化的内容,然后将它设计。确定什么是你写准确,适合现场的声音。

内容应该是设计的基础

当我们知道一个网站的最终目标,我们拍的内容需要满足这些目标。看看现有内容,看看是否有什么缺失或不清楚。

组织这些内容会通知了每个页面,使创建一个站点地图容易得多。使用定义良好的站点地图可以拯救你的团队从无用的设计和浪费时间。从必备内容和站点地图将帮助您的团队看到不同类型的内容组合在一起,用户将如何相互作用并导航网站。

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

内容的方式汇集了设计师和作家。两个领域的需求和限制会影响工作的每一个角色。内容创造者和设计师能够产生更强的工作当他们共享一个共同的目标和了解各个部分协同工作。

模型内容再写

“但是我已经做了一个网站地图和线框图。我为什么需要一个内容地图吗?”

因为到目前为止,你所做的一切吧!为什么停止了?

网站地图帮助我们想象一样的导航、内容地图给了我们一个指南内容的流动,特别是在CMS。内容地图显示我们在每个页面的具体内容,这些思想如何与更大的整体。信息体系结构将更加坚实的基础,当内容已经被组织。

如果你的设计有任何形式的web-app-like功能,或者如果你有混乱的无组织的内容,内容模型可以帮助弄清楚其中的含义。它可以帮助你完善你的信息之前工艺一个标题。

内容模型应该从宏观版本显示的主要类型的内容没有任何相关细节。假设我们网站卖书,会有一个页面致力于新版本:

宏观内容模型提供了一个内容类型的高级概述网站将包含,以及这些类型相互关连。

这个宏视图显示我们如何将这些组件组合在一起。点击一个标题的新版本时,我们会得到一个页面的特定的书,以及类型,作者和出版商。假设我们想要仔细看看每一个块的内容和类型的信息和元素包含。我们扩展这些微内容模型。

微观内容模型添加网站内容类型包括细节,进一步充实。它还提供了指导领域需要包括在你的Webflow CMS集合!

现在我们可以看到更多类型的内容需要在每一页,就像作者传记作者块和给定类型的背景信息。创建一个微内容模型也向我们展示了其他内容的机会,像书为每个类型的建议。

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

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

事实上,工作内容模型将偿还大当你开始构建CMS集合。这是因为细节你在宏观模型直接转化为字段添加和/或集合Webflow CMS。

例如:假设你正在构建的网站在上面的图进行建模。你创建一个名为书籍的收集,开始分配领域。“英雄形象”显然映射到一个图像领域。标题名称字段将被捕获。体裁、作者和出版商所有显示为宏观层面的内容项目,所以他们会每一个需要一个自己的收藏,而这本书收集可以通过引用和/或多引用字段引用。

方便的,对吧?在这,看看我们的文章”,为什么你的设计过程和内容应该开始吗。"

世卫组织和创建内容

我们已经强调是多么重要的一些想法之前任何像素在设计内容。但谁将创建这些内容呢?

最好的情况是,你的客户有一个团队的作家。这些词书呆子知道需要沟通以及如何与观众在他们理解的语言。他们写作的主题专家和大师的工艺。但是这个梦想的团队——的作家往往只是一个梦。

不是所有的客户都有内部的资源内容的团队。小企业主可能把这个责任在自己身上,或者委托给家庭成员的创意写作类或两个。不幸的是,这可能意味着在质量部门内容不足,导致整个项目受到影响。开始你的项目审计的现有内容(如果有的话)和评估其质量。

然而创建内容时,不要推一个像素至少一个粗略的框架的内容。没有明确的目标的实质和目标网站,每个人都将不满的过程及其结果。

预期的质量内容需要清楚。如果你的客户不是一个作家,没有一个可用的,你有两种选择。要么离开房间的预算来自己创建的内容(如果这是一个技能),或雇佣一个职业作家,你信任。

但是客户不承认好写吗?如果他们喜欢一个作家和他们不会让步吗?

我的技巧向他们展示作品的内容。找到一个编写良好的竞争对手网站的简洁,并指出复制并呼吁行动的力量。显示你的客户的关键词和短语编织整个网站SEO游戏强。

有人可以是一个精明的生意人,不知道质量写的样子。帮助你的客户理解用善良和尊重————好复制的价值及其潜在影响收入和品牌知名度。

包括客户端在写作过程

如果你是一个自信的作家和编辑,包括你的客户在内容创建过程。

讨论的内容类型所需的项目是一个很好的起点。从宏观层面:信息用户正在寻找什么?他们需要知道公司或产品,不是显而易见的吗?欧宝体育在线首页观众的误解是什么?这些主题将帮助的项目符号列表通知内容你需要工作的类别和/或创建。

采访关于细节的客户需要回答这些问题,做笔记或记录会话!客户可能会更好地解释事情当他们说话和感觉的压力解释。他们的措辞可以非常有用的最终内容,引起我们的注意。如果客户渴望贡献自己的副本,让他们给你简短的段落或句子,解释每个块的主要部分的内容。你或作者可以把碎片成强大的内容挤满了搜索优化和引人注目的标题。

一些客户将有足够的写作技巧。如果有时间,车间所写。如果他们往往是冗长的,与他们一起工作更简洁。或者他们挂在营销陈词滥调?这也是可控的。

任何作家都可以成为更好的指导下一个熟练的编辑器。如果你习惯在这个角色,就去做吧。只要确保你是补偿你的时间。

内容让人们参与

内容是为什么人们访问一个网站。设计呈现这些信息存在于有组织的方式和添加功能和风格。有内容在过程的早期开发的设计意味着可以塑造。这个中心允许设计突出内容,带来更好的用户体验。

第五章

创建视觉设计

发现的技巧和工具,以帮助您定义、沟通,并实现你的设计构想。

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

头脑风暴,建设moodboard

这个moodboardStudio-JQ结合不同的商标,颜色组合,和图像来封装和现在的新网页设计视觉的想法。

Moodboards的拼贴图像、文本和其他帮助我们更好地了解一个品牌的视觉效果。这是一个非正式的组合,没有内在的层次结构或组织的必要性。但从格式塔时,模式和主题。把moodboard一起帮助你传达视觉能否则很难描述。

在你开始之前,客户放在一起的一组单词或短语与他们的品牌。这应该是一个快速运动关注品牌的直接感受或情绪煽动。认为可口可乐、苹果、和天然的食物——这些品牌带给心灵的关键字是什么?你moodboard应该开始有自己的强烈的思想和情感。

想象你放在一起的moodboard有机肥皂公司。什么样的情感认同这样的品牌是什么?你会最有可能的放在一起唤起自然的元素和DIY的审美。也许花的图片,柔和的颜色色板,块手写文本。但根据该品牌的具体目标,愿景,和声音,你会发现视觉构建块需要非常不同的——这完全取决于你和你的客户一起工作。

在这些不同的视觉效果在一个地方让你看到更大的主题和生成的想法。主题很难沟通,考虑到他们的抽象——moodboards帮助客户端设计师想象一个品牌的本质和设计将如何沟通。

这更有组织性moodboard布莱恩·劳对于一个餐饮公司关系图形、字体和颜色到一个统一的主题。

创建一个样式瓷砖

这种风格瓷砖的Josefina尼诺提供一个干净、准确的代表提出了电子商务网站的设计元素。

假设你漫步到一个快餐特许经营在中国,你不会说语言。无论是汉堡王、麦当劳或肯德基,你会立即知道你在哪里。

即使你不能道,你会认识到排版,图形的设计和颜色。餐厅的室内设计也会告诉。工作台面瓷砖,家具,和墙的颜色都是品牌的视觉识别的一部分。一个网站的设计应该让同样的品牌认知度。

风格瓷砖是可视化组件的集合用于构造设计。他们的广泛的中风moodboard和转换成实际的构建块。

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

  • 标志
  • 广告正文
  • 按钮
  • 调色板
  • 模式
  • 其他brand-related视觉效果

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

与客户合作,请参考回的话鼓舞了moodboard和任何其他可能生成的主题思想。“优雅”、“信任”和“古怪”想起非常不同的事情。考虑如何直观地体现这些概念使用的工具贸易:颜色,空间,类型等。

然后创建(至少一个)风格的瓷砖使用moodboard和单词列表通知一组颜色,排版,按钮,和其他导航元素,有可能成为设计的一部分。

你甚至可能会发现它的价值构建多个迭代的风格瓷砖,都为自己的迭代,可能给客户选择。你有时显示几个想法不希望可以引导客户正确的方向。只知道你应该准备工作从任何风格瓷砖你礼物!

客户想要一个过程的一部分。诱人的设计师把船长的帽子和犁全速前进。毕竟,你是专家,对吧?当谈到设计,是的。但是你的客户品牌专家,所以听到他们的想法建立在时间和空间。

当客户知道他们的输入问题,他们就会感到更快乐,之后,最终的产品。欧宝体育在线首页风格瓷砖和moodboards为客户创造一个机会能听到并观察他们的反馈最终形状的网站。

看看我们自由响应风格瓷砖如果你需要一些帮助起步。

构建一个元素拼贴

这个元素拼贴画的MDS展示如何按钮和功能在不同的设备上。

你有很酷的想法交互元素或其他动态魔法?元素拼贴画是一个很好的方法来收集这些在一个地方,让他们的外观和功能他们会在最后的设计。是否这是一个按钮和一个奇特的悬停状态,或创造性的方式揭示不同类型的内容,元素拼贴画显示客户端东西将工作在这个网站是如何生活。

元素拼贴画呈现各种片在半封闭状态,一个网站的功能,可以使人难以想象他们如何会与实际内容布局的内容更充实。元素拼贴画是有帮助的,但不要太集中,花太多时间在功能可能不会做出最终的削减。最终,元素拼贴画可能是最适合作为一种个人便条簿,在那里你可以添加交互性和动画来充实样式瓷砖和/或moodboards的元素,而不是作为一种沟通工具与客户或同事。

开始设计

外观、感觉和视觉元素都被批准。现在是时候开始布局的页面和整合内容。

风格瓷砖给你一个头开始。你将会节省时间和更集中的设计而不是工作的事情了。客户端不会有任何惊喜,因为他们已经熟悉的图形元素。

风格瓷砖是一个很好的起点,但你总可以改变如果不工作在实际布局。明亮的配色方案,看上去如此惊人的可能是压倒性的。,过于程式化的标志可能是分散在一个更简约的布局。唯一的办法你可以告诉如果这些风格是将它们应用于实际设计工作。

在视觉设计阶段你会:

  • 布局图像、文本和其他内容
  • 创建菜单和其他导航组件
  • 确保内容和设计共同努力实现网站的目标
  • 精炼的设计和内容,并根据需要进行更改
  • 结合客户反馈

但在你到达之前,你想要你的风格瓷砖工作转化为真正的HTML / CSS站点上使用。即。,to …

创建一个生活风格指南

大多数品牌风格指南。任何设计师做了一段时间已经深入了解Dropbox和Google Drive希望找到最新版本。即使你设法找到最新版本,事情可能改变方针以来被凿成PDF(哈哈)。

最好的办法让一个容易可更新和可发现的风格指南是创建一个生活风格指南。在网上存在生活风格指南,结合网站它提供指南。这通常是一个密码保护页面在活动网站。在这里,所有的风格居住在一个地方,在那里他们可以立即改变和应用

这里的关键是:当你改变你的Webflow风格指南,修改后的类将每个元素自动更新。对于我们这些用来定义一个风格改变,然后实现它,然后更新指南,这是一个翻天覆地的变化。

编辑风格的生活方式指南让你整个网站进行更改。来自客户的反馈可以快速集成和生活风格指南显示了不同视觉元素设计整个网站在全球范围内应用。如何构建一个Webflow的生活风格指南将显示你是多么容易创建一个。

有部分的生活风格指南由排版,颜色,和组件使编辑一个更有效的经验。

从一个万花筒的想法是一个清晰的愿景

提高网页设计过程。更清楚地表达想法的早期。做准备工作——地图内容,构造线框图,建立视觉元素。人们很容易忽略的步骤,但这只会创建在项目的后期并发症。

是一丝不苟的在你的工作和你的沟通过程。模糊性余地的未满足的期望。当每个人都理解这个项目的愿景和目标,他们更可能满意最终的产品。欧宝体育在线首页

从一个模型吗?

如果你开始嘲笑你的网站在一个桌面设计应用像Photoshop或草图,看看我们的文章”从Photoshop Webflow:如何将静态模拟成生活的网站“对于这一过程的详细指导和方便的技巧。

第六章

最后的测试和审查

确保你的下一个网站推出了全面试生产评审顺利。

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

检查设计

家具设计师的网站Je-Rom显示了如何精心布置的视觉元素导致复杂的布局。

在你进入之前测试的功能,看看设计的视觉元素。你使用正确的final-final-final标志吗?有新照片交换吗?你在呼吁行动增加字体大小吗?

设计过程几乎总是涉及到大量的反馈和建议编辑。很容易错过一些东西。但是这些小的细节,将喜悦或阻挠你的听众当网站上线。所以保持跑步的编辑和修改,确保他们在发射前得到解决。

检查不一致。字体样式和大小从一个页面应该是一样的。很容易忽略一个不正确的字体或正文这一点太大了。毕竟,你一直盯着这个设计很长一段时间。

有别人的网站寻找不一致和细节你可能已经错过了。

在这个阶段,决策者应该满意的设计看起来如何。有轻微的调整是很正常的,编辑,但如果有良好的沟通和协作,不应该有任何重大变化。

如果你要更费时编辑建议,评估他们的潜在价值才能解决这些问题。

这些变化将改进了用户体验?他们会推迟网站推出吗?

没关系,如果有什么建议不会提高可用性或提高一个网站的视觉审美。保持专业精神,但要清楚为什么有些编辑并不是必要的,特别是在最后阶段的设计过程。

注意细节

评审过程的时间赶上你的错误。

有很多细节思考和检查时网页设计。尤其是对一个企业或电子商务网站。验证是很重要的事情像是手术时间,营养菜单信息,地址,和电话号码。

电子商务站点需要为每个产品准确的照片和描述。欧宝体育在线首页这总是一个游手好闲的人打开一盒已订购的东西,却发现它看起来不在所有喜欢的网站。

确保利益相关者的公司及其产品的品牌专家一看在网站上线之前。欧宝体育在线首页问你的客户应该做这个检查,确保评论家是十分清楚的时间表。

测试的功能集成

这个电子商务网站的设计格雷格Dlubacz提供了一个整洁的布局结合后续指令,使购买你想要的自行车平稳过程。

集成包括购物车、通讯信号,和报价请求形式——所以,所以更多。

测试的任何部分的网站,需要收集数据(并确保你建立SSL!)如果一个表单提交的电子邮件地址,确保它是正确的。与客户和仔细检查电子邮件地址。

形式应该有明确的指示和字段。这是一个好主意的人没有参与公司或项目填写测试表格和提供反馈他们的经验。

一样的结帐过程——有几个人经过寻找故障和歧义。我们中有多少人放弃了购物车,因为这个过程太复杂?从航运选项付款选择需要检查一下。确保一切是明确定义的、易于导航。

在发射前,找出什么样的电子支付你的客户接受的计划。他们已经贝宝或条纹设置吗?如果不是,确保他们解决,收集最后信息设置一个帐户可以是一个恼人的延误。

检查你的链接

链接是一个主要的功能,你需要检查。别忘了创造404错误页面,使这个标准协议的一部分。这一个可以容易忽视。

手动检查每一个环节能承受得起。好消息——你不需要!使用链接爬虫工具W3C检查程序尖叫的青蛙。都将迅速扫描坏链并确保内容的访问。

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

你的设计需要的功能,并提供类似的在每个浏览器的用户体验。每个浏览器都有自己的优点和局限性。如果你的设计只适用于一个,访客使用别人会沮丧。

你可以下载所有流行的浏览器和测试您的设计在每一个,但这需要耗费大量的时间。有跨浏览器兼容的工具,使这一步快速和容易,Browsershots,浏览器沙箱,Browsera

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

确保你的设计的用户体验是神奇的不管什么设备的查看。

一天中人们使用不同的设备来访问内容。某人的购物和检查细胞附近的咖啡的地方。之后,他们订单的鞋子在他们的笔记本电脑在Netflix上迎头赶上。你的设计应该是无缝的在每一个屏幕。响应的实际应用设计导致的网站提供了一个更加统一的体验。

检查导航、按钮和其他交互元素保持功能在不同的屏幕尺寸。测试设计在不同的设备和网络的速度。如果是缓慢的时候,看看你的高分辨率图像和动画是影响网站的性能。动态元素过多也会影响可用性。

这是不太可能你可以得到每一个主要设备进行测试。惊喜——有几个应用程序!Browserstack,谷歌移动器,和其他工具让你看看你的网站将函数在不同的移动设备。再次,Webflow让你预览你建立你的网站在不同的屏幕。

注意没有模拟器完美再现了每一个设备上的经验,所以一定要尽可能多的实际设备的实际测试。你不可能每一个设备的手,但你的朋友,同事,和客户也可以伸出援手!

看一下内容

你离开了,你强调你离开。

发展绿色、小说家

重写一个段落或句子(可能)不会对最终的设计产生重大影响。希望你已经——至少——网站的副本的草稿之前你开始设计过程,重复整个过程。在设计时考虑的内容让你做出深思熟虑的决定。调整副本总是可以使以后,即使在网站上线。

但这并不意味着你应该跳过一个彻底的内容审查之前发射。一个简单的错误或者语法支离破碎的句子可以严重影响观众感知,所以确保你的话一样擦亮你的设计。

确保你的内容是有用的和容易扫描

内容创造者一样悲伤可能是,人们不来网站看像一本书。他们想要,他们正在寻找的信息,出去。高兴的是他们通过使这一切成为可能。

方法如下:

  • 使用描述性的标题
  • 写句子和简单的结构限制段落三个或四个句子
  • 集团相关的想法或项目在项目符号列表
  • 摆脱副本不添加意义
  • 检查你的副本简洁、动人和符合品牌的声音
  • 校对语法和拼写错误
  • 得到帮助从一组第二和第三的眼睛帮助捕获可能令人尴尬的错误
  • 问一个熟练的编辑器来查看你的副本

好消息:更多的工具!海明威,语法可以帮助你编辑过程。他们也会教你一些写作技巧。

实践良好的SEO习惯

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

元标题应该定义页面的重点。只使用相关的关键词,尤其是一开始的描述,和保持在70个字符。meta描述应该是一段时间,但保持在160个字符,并撰写的声音,与你的目标受众。

当你的网站出现在搜索结果中,这是元(通常)出现的标题和描述。这有助于你的听众知道他们已经发现了一个网站,匹配他们的需求。谷歌使用meta标题排列正确你的内容,所以它应该反映页面的本质。H1标签也有助于排名和方便web爬虫程序确定内容的目的。确保这些标签是特定的。

Meta描述web爬虫真的不重要,但是他们仍然重要。一个好的元描述告诉他们已经找到他们要找的人。使用相同的主标题中描述的关键字。谷歌搜索查询中使用会大胆的话,出现在你的描述。这也有助于你的听众看到你的网站搜索匹配。

准备发射

下一步:明星。

当一切已经测试和审核,是时候展示你的辛勤工作。

的耐心和大量的准备,你的设计是准备好了生活。让时间来审查和测试您的网站在设计过程中是重要的一步。不要让急躁——你或你的客户把你推出之前准备好。

确保你的工作反映了思想和奉献你投入它。使用的经验教训,使下一个项目你解决更好。

第七章

发射

文科设计过程后,我们概述了后,你可能会认为你的工作是发射后完成的。我来告诉你:它不是。

约翰摩尔威廉姆斯
约翰摩尔威廉姆斯
吗?阅读时间
读一章

如果你是一个自由职业者,你可能通常离开这一步你的客户。完全公平的如果这是你的合同的性质。但通过指导和支持你的客户在他们的网站上推出,你不仅会加深你的价值你服务,但也给他们一个很好的理由让你护圈。这是一个绝佳的方式创建经常性收入。

如果你是一个室内设计师,另一方面,这些基地覆盖你的营销团队。但我可以亲自证明营销人员几乎总是乐于接受新推出的想法。加,他们几乎肯定会来你当他们为迭代识别机会,测试,和细化,所以你最好做好准备。

记住,这里有一些提示,以帮助你的是即将推出。

考虑到“软”启动

这是(网站发布)的方式。没有爆炸,而是(耳语)。

加,套用t。s。艾略特,因为它令我很好笑

早在2016年,葡萄酒销售我的朋友邀请我去一家旧金山餐馆吃饭叫进步,妹妹米其林星级州鸟规定。我知道这将是一个伟大的经验,原因众多,最重要的是,它就是我的好朋友——但我滚没有知道我是什么。

当我们走进这个地方,它是死去的空。不是一个好迹象的科幻餐厅,通常。

然后我的朋友随便扔在他的肩上:“他们在软启动。朋友和家人只有今晚。”

突然我觉得这样特别的雪花。

下一件事我知道,我们围坐在一张长,漂亮,回收木材表。(我知道,我知道;我眼睛都要睁不开了。)旁边的餐馆老板本人。然后继续通知我们我们将会吃什么。和喝酒。

我有这样一个愚蠢的笑容

我写这篇文章不是humble-brag,但突出的力量“软”或“测试版”或“安静”。

β的力量

那天晚上在进步,我的感受。我就像突然的鉴赏家。交往餐馆,美食评论家,有权势的人。

所有的幻觉,当然——但一个诱人的和身临其境的幻觉而已。如此强大,我仍然(显然)谈论这家餐厅。不仅因为经验本身,而且食物是多么宏伟地好。我不是黑暗的以来的门,但我知道我打发他们几十个客户在我的地方。

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

好消息对于那些构建的web是:你也可以利用这种力量。

创造稀缺性

软/ beta发布工作的原因是他们创造一种稀缺资源,将通常的经验转化为罕见,受欢迎的一个。

这三个相辅相成的效果:

  1. 富人(那些访问)觉得承认和/或上升——即。,很高兴
  2. 富人想这稀薄的经验交流,补充你的其他与有机口碑营销努力
  3. 穷人(那些没有访问)突然想要获得比以前更多,还是第一次

这也许是最好的几年前推出Gmail。我的意思是,当你想想看,一个新电子邮件应用程序并不是你所说的令人兴奋的,对吧?效用——必备,如电。

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

现在你可能会想,“等等,约翰。我只是构建一个小册子网站在这里。我们做的是展示信息。我们如何创造稀缺呢?”

答案网站本身之外,在你提供的信息。一些网站存在只是呈现信息。甚至如果这就是你的网站,你有机会创造稀缺性——只要信息是新的,独特的,甚至是真正高质量的。

写一本电子书?给人们选择早期访问并要求简介。展示研究结果?第二节,与第一个相同。

然后有一些你可以做任何网站类型:

寻求反馈

是否你想要改善你的视觉和交互设计,清理你的内容,或者只是让用户输入你的整体用户体验,你可以充分利用你的试生产计划时间征求反馈。

在许多方面,这提供了相同的利益创造稀缺性。你还纪念几个选择的人,让他们与他人分享他们的经验的机会。如果这些人是一个领域的专家与你的网站相关的目的,他们的分享可以帮助争取一点炒作的发射。如果他们真的印象深刻,你甚至可以得到一个闪亮的证明或两个网站!

但这不是你的目的寻求发射前反馈。它只是蛋糕上的糖衣。实际上真正的好处来自于利用他们的反馈来改进你的网站。

如果你好好利用他们的输入,他们可能会倾向于给你真正的启动开始时支持喊一声。

请负责任

有一件事要记住软启动:不要只邀请任何人。你叔叔史蒂夫,他总是有意思,可能不会让你的新组合推出一闪——除非他在设计世界的大,当然可以。

相反,专注于你的利基。和高目标。优先考虑的人最有可能产生重大影响,他们应该选择评论或分享你的新网站。

只是不要卑劣的。避开寒冷的电子邮件,而不是通过各种社交网络建立连接。当然,一个简短的“嘿@influenceyguy查看你的网站在这里”可能会给你带来任何好处。同上,跳上一个相关的线程和一个链接到你的网站,除非真的增加了对话。

首先建立网络。有了坚实的网络,机会是正确的人自然会通知你分享和选择自己的共享协议。即使他们不,当你以后直接分享网站,他们至少会有一些上下文为什么

网络上运行经济的名声。忽略自己的危险。

跳过软启动吗?尝试一些急转弯!

即使你不会总在一个软启动或关闭测试,您可以开始构建炒作(重新)发射仅仅通过戏弄即将发生的事。

你可以很容易地分享截图的正在进行的工作界面,提供的惊人的主页和gif动画,和编写定位语句解释你所从事的工作,更重要的是,为什么——媒介。或任何第三方发布在你的空间。

推出一个新餐馆和它的网站吗?打击了当地美食作家和杂志。一个新的web应用程序编辑吗?确保各种Facebook群组编辑知道它的到来。

你会发现这样一个场景:诱人的内容分享给那些可能会喜欢它,你会建立炒作。

上市:正式启动

当然,发射天的时候开始解雇你的营销机器所有的汽缸。

如果你在科技空间,你的发射当天活动可能包括,但不应限于:

  • 宣布所有当前用户的电子邮件和领导
  • 文章对你的各种社交平台(在Dribbble上Twitter, Facebook, Reddit,等等),并认真考虑促进这些扩大你的听众!也要提到品牌影响力的个人和帮助,无论直接或间接,如通过提供一个证明,反馈等。
  • 文章在聚合网站像设计师新闻、网页设计师新闻等。
  • Longform出版专门的博客
  • Longform出版物中(和/或任何第三方相关出版物)
  • 一篇文章在产品打猎欧宝体育在线首页——看看他们指南发布产品打猎欧宝体育在线首页的详细信息

如果你不是在科技的空间,上面的列表中提到的几个平台可能是与你无关。但是网络是如此庞大的任何利基社区将有其博客,论坛,新闻聚合器,等等,就插入正确的名称和地点。

不管怎样,基本的原则仍然是:沟通你的观众他们在哪里,在许多方面,你可以负担得起的地方。

但是传播这个词并不是唯一担心推出一天。一些其他的事情要考虑:

担心事故

通常,新产品、服务或网站将推出大规模宣传,欧宝体育在线首页只有崩溃面对意想不到的流量。

在较大的组织中,通常可以依靠工程来弥补这个问题。与一个较小的组织,通常不太关心崩溃,但你可以联系你的托管提供商的提示和帮助。

如果你参与营销,可以帮助抵御崩溃通过仔细考虑宣布时机,通过批处理你的通知邮件。像MailChimp的工具会自动给你选择批量发送,减少数百万的访问的可能性。

当然,没有什么是完美的,所以你也要计划来处理事故,应该来了。

密切关注性能

超出了正常运行时间的基本性能指标,你也会希望监视的人做什么当他们到达你的网站。

Google Analytics和许多其他工具可以提供实时和事后数据页人访问,多页面流他们探索,甚至转化率——所有这些都可以做通知所有的决策,从你的网站如何呈现和组织内容,如何吸引你的各种各样的观众。

只是记住,您将收到的样本数据发射的一天可能是有偏差的。大量的访问能带给很多人不是好适合你的产品,这将产生负面影响转化率,保留等。

因此,尽管你可能会注意到你需要解决的事情尽快——这样的错误在主页上的其他数据可能需要更多的时间在你做出改变之前正常化。

保持一个更加关注公开回应

并非所有的数据来自谷歌分析。一些最重要的,告诉你会收到反馈将来自公共微博,评论产品搜寻、Facebook对话等。欧宝体育在线首页

所以注意人们说的——积极的和消极的——了解你的消息的哪些部分,产品/服务,和设计工作,哪些不喜欢。欧宝体育在线首页

如果人困惑特性X,重温你的消息。如果人们似乎特别兴奋,你并没有真正突出在发布内容,也许这方面需要更多的关注。

人们甚至可能从字面上你的手神奇的内容。我可以愉快地承认,超过我的一个表现最好的副本直接来自客户的嘴。

别忘了庆祝

所有上面的说,别忘了留点时间庆祝。那些瓶泡沫不会喝自己!

推出后:在网络上,你的工作是永远做不完

Flash向前发射后的第二天:你的香槟宿醉——你现在可以证明是最糟糕的——已经褪色,你回顾昨天的数字。

希望你征服的反应和你所有的营销的有效性。你也可能很失望了。

但是你反应分析,重要的是关注你的下一个游戏。

回顾你的最重要的指标

你认识长期以来在发射前你想移动什么指标。所以看追溯您的项目目标,定义为设计过程的第一步,冷,硬看看重启这些数字的影响。

如果你做了达到或超过特定的目标指标,恭喜!你实现你的目标。现在想办法做得更好——或替代目标需要考虑。

如果你没有达到或超过一个目标,是时候会变本加厉,目标。也许你的假设如何移动的关键指标是错误的。也许它工作,但不如你想象。

考虑下面的假设的情况下,你的关键指标是转化率:

目标:转化率提高到15%

假设:目前email-only注册流不鼓励人不想花时间去完成我们的新员工培训的过程。

建议的解决方案:添加一个选项通过Facebook注册。然后使用概要文件信息预填写新员工培训过程中几个字段。

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

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

假设:Facebook注册选项不够直观明显。Facebook注册太入侵。太多的Facebook注册所需的权限。用户想要更多社交注册选项。我们最大的观众实际上是在Twitter上。

希望其中一些假设可以予以驳斥。例如,如果您的最大受众实际上是在Twitter上,建设一个Facebook注册选项可能没有很大的意义,对吧?

你其他的假设可能会采取一些回顾可用的数据。热图应该能够告诉你如果Facebook注册选项不够明显。下降点注册流程的分析可能会告诉您是否选择本身缺乏吸引力——例如,如果人们点击“通过Facebook”按钮,但没有完成,那么也许你要求太多数据。如果他们看到它,没有点击它,也许这是完全错误的平台!

在这种情况下,添加Facebook注册选项似乎工作,至少。所以添加更多社会注册选项可能会有所帮助。

但数据可能显示,注册人数增加没有重大的帮助选项。在这种情况下,是时候回到绘图板找出真的帮助。

一旦你孤立的关键指标的变化背后的原因,你可以想出设计和内容测试来解决问题。

如果你重新设计,分析谨慎

增量变化比雄心勃勃的失败

托尼施瓦茨

前一节的最后一点强调一个重要问题时要记住回顾投放分析重新设计,重新树立和改版。

当你从零开始,你所有的数据是干净和新鲜。没有什么比较它——它不是为未来提供了基准测试。

但是如果你最新推出引发的任何形式的改造,重塑,重启,重新设计——你有一些混乱的数据。

你变了很多事情它就基本上是不可能的属性上升或低价交易任何一个元素,而不是改革本身。可能是新的或修改后的标题。它可以修改注册表单。也可以是所有新元素,一起工作的协同和谐你的梦想。

因此,选择重新设计是功能与从零开始。至少从数据分析的角度。工作或不工作,你不会真的能够得出任何结论的原因,相对于以前的设计。

迭代,迭代,迭代

两次测量,一次减少

你的爷爷,可能

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

所以一旦你确定了你所需要的指标影响,以及你认为解决这些指标的变化,是时候开始迭代。

注意:我没有说重新设计

因为你不想把婴儿连同洗澡水一起倒掉。你当前的设计提供了一个基准。理解比基线工作好坏,您需要创建一个替代方法和测试替代相比,基线。为此,创建一个简单的某个测试:把你的两个页面之间的交通,和看看你的提议解决确实更好。

但whyyyyyy,你可能会思考。

我得到它。我们连接到看到问题,然后解决这些问题,基于我们的直觉告诉我们什么是“正确的”。

假设你继续推出重新设计注册流程和旧的退休。一切到你的直觉告诉你新的解决方案是“应该”的方式。

并重新设计更糟糕的是。肠道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中或草图,但重要的是,无论格式的,它是HTML / CSS / javascript。
  3. 分享
  4. 审查
  5. 修改
  6. 重复

直到网站批准、构建和装船。

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

要理解为什么有越来越多的不满标准设计的过程,这不是值得探索的一些元素的过程。

desktop-first“正常”的设计过程

无论“桌面”甚至是这些天,很明显,这个过程重视桌面,把“移动”(即,所有其他设备,坦白说越来越广泛使用)马后炮:12步骤7。

这是非常奇怪的,尤其是对一个行业的怜惜与我们的“用户”,以及他们如何体验我们的工作——当你考虑了吗移动现在坚定地“消费”互联网的主要工具。

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

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

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

  • 一次性
  • 文摘
  • 静态

换句话说,我们花很多时间画作为pdf概念模型的网站、应用和数码产品我们建筑——而不是交付成立于互联网的东西:HTML欧宝体育在线首页、CSS和JavaScript。

那里是一个讽刺。我们建筑最具活力、互动中人类有史以来…和做一切基于规则,通过静态模型没有什么与互联网是如何工作的。

其中大部分供奉,在最好的情况下,在我们的投资组合的网站,而最坏的情况,我们的垃圾桶。

哇,好玩。

内容是…在正常设计过程无处可寻?

你可能不会注意到这个乍一看,因为它没有,不存在。但是见鬼的内容——你知道,大多数网站的东西存在——进入过程? !

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

,把…

新的网页设计过程!

西蒙斯很快跟着她的定义“正常”的过程与第二个微博标签# howidoit。但是她可能已经和# thenewdesignprocess标记它。

这就是它看起来像:

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

还是12个步骤——但这是一个完全不同的球赛。让我们仔细看看:

新设计过程内容或内容建模

而不是跳最后的早期可视化网站——“正常”的过程与步骤3中线框图,新的设计过程关注的内容

注意,它不会开始写作内容,但是建模它。我详细内容建模过程为什么你的设计过程和内容应该开始吗,但总结:内容建模侧重于确定三件事:

  1. 要求内容类型
  2. 内容类型之间的关系
  3. 结构的内容类型

模型你的下一个网站的内容,确保你的网站内容类型及其结构满足用户的需求。而不是思考”不是很酷的如果我们有X内容类型?”,考虑将“酷”从用户的角度来看。

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

  • 食谱
  • 成分
  • 指令

为了“酷”,因为它可能有广泛的历史世界主要菜系在你的网站上,这不该是一个优先级,因为它不与观众需求和期望一致。它可能提供一种方法来区分你的菜谱网站的激烈竞争空间,但它不是你所说的赌注。

新的设计过程中使用的内容

而不是使用精心策划的长度lorem ipsum确保美丽,三字头条新闻从来没有包装,新的设计过程包括充实网站的数据库与实际内容尽快。

这不仅可以帮助你识别设计问题和边界情况(如太长的标题)马上,它还鼓励更大的同情内容创作者设计应该迎合。

新设计过程让视觉样式

也许令人惊讶的是,你不要太深入设计的视觉样式方面直到航运之前。

这是它的好处允许的设计内容,而不是试图整个内容都塞进后的视觉风格的事实。由于绝大多数的网站存在内容驱动的行动,这种方法强调的地方应该是:在它的内容以及如何最好地礼物。

所以…这Webflow如何融入设计过程吗?

当我不写内容Webflow,我运行各种社会账户,包括Twitter、所以我兴奋地引用珍的评论注意:

巧合的是,一个极好的方式来处理@webflowapp CMS。

但现在回想起来,我应该说,“巧合的是,一个极好的方式来处理@webflowapp CMS。”

因为在现实中,这是理想的建网站的方式Webflow CMS。和这是一个过程我们之后的作品,包括Webflow的原型,Webflow与WordPress,甚至Webflow专家

这是因为Webflow CMS给你一个强大的,功能模型网站内容的方法(一定)涉及大量的表格和图表。

相反,你创建内容模型内部Webflow通过集合,所以你不仅造型抽象的内容,但实际上创建了一个数据库,工作可以推动你的网站的每一个元素。这意味着你没有创建”只是一个一次性的工件,“但是一个真正的可交付成果——这不仅会指导网站的创建,而且其长期维护。

一旦您创建了内容模型通过集合,你可以输入你的网站的实际内容,并且开始设计,不管你想要什么级别的忠诚,从线框到高保真,立即。

更好的是,你可以点击你的网站搜索边界情况,机会,了解整体的用户体验。这是超级强大,因为它可以让你体验内容模型的具体方法,作为最终的最终用户,所以你有时间做出调整的信息架构和整体的用户体验。

得到一个非常真实的感觉作者您正在构建经验。

当你构建一个CMS的网站,你不只是创建一个体验网站的访客,你也为作者创造了一个产品,一个内容管理和发布工具,应该基于他们编辑的细节和风格。欧宝体育在线首页因为你会工作直接在CMS不仅充实网站,但也创造它的内容,你已经有了一个黄金机会建立网站的受众产生共鸣它的作者——将做实际工作的人的不断创造,重建和改进网站。

设计一个伟大的作者的经验,看看我们5关于设计内容创作者的技巧

准备看Webflow可能适合你的过程吗?

然后试一试。它是免费的开始

Baidu
map