如今，随着线下和线上竞争的不断增长和多样化，企业必须比以前更具创造力和独创性，才能让客户注意到他们的报价并参与购买。因此，结合不同的营销技巧，新的开拓性技术和工具在这方面大有帮助。在我们的新案例研究中，我们将向您展示我们与其中之一的合作：欢迎查看 CSConnect 网站设计的创意故事，这是一种为营销提供沉浸式视觉体验的服务。
CS连接是面向消费品牌的 SaaS 移动营销解决方案。它展示了沉浸式体验营销平台，允许其客户创建和启动零编码的增强现实和购物娱乐活动。通过这种方式，它可以帮助不同的消费品牌适应电子商务的条件，因为它无法像在航行点那样覆盖与产品的实时接触，因此品牌可以更有说服力和更有吸引力地与客户沟通，展示他们的产品。
在讨论了客户的愿景和偏好，并对市场和目标受众进行了广泛的研究和分析后，该团队得出了一组适用于 CSConnect 网站的通用基本要点：
可变的字体样式以创建清晰而牢固的排版层次结构
强大的、可识别的品牌将在竞争中脱颖而出
将网站和品牌与竞争对手区分开来的颜色
清楚地展示产品功能
插图和图形，使品牌能够创造和突出自己的个人风格
在此细分市场中未广泛使用的网络动画将成为打动访问者和支持品牌知名度的另一种方式
直观和直接的导航和交互，对于不同技术水平的访问者来说毫不费力
干净、通风、整洁的布局，带有立即引人注目的 CTA 元素，以支持有效的转换
传统上，对网站或应用程序设计做出的最有影响力的决定之一是颜色和字体的选择，它们既可以支持功能，又可以设定品牌努力传递给自己的情绪和印象。
另一种安排内容的方法是对某些部分使用不同的背景颜色来分隔不同的信息块。此外，该设计还采用了突出的信息图表样式数字的方法。正如我们在文章中提到的网络可扫描性, 读者会下意识地将数字与事实、统计数据、大小和距离——潜在的有价值数据联系起来。因此，文案中包含的数字会引起读者的注意，而代表数字的词可能会在文案中被忽略。而且数字更紧凑，内容更简洁，扫描更省时。应用的方法意味着使数字比文本更突出和更引人注目，就像在信息图表中经常做的那样。
网络上的排版已经走过了漫长的道路。我们已经从一些基本的基于系统的字体到现在几乎无限的可能性。但所有这些选择都会给设计师带来一些挑战。
例如，对于我们在页面上加载的每种字体，性能都会受到负面影响。即使使用具有多种样式（粗体，斜体等）的单个字体系列，也需要多次调用服务器。当每一毫秒都很重要时，这可以真正开始在一个行业中加起来。
其中有可变字体的巨大前景。突然之间，没有必要加载六个字体文件来检索你想要的样式。相反，字体系列所需的一切只包含在一个文件中。它极大地提高了效率并且易于实施。
对我们排版工具箱的这一新增内容感到好奇吗？这是你需要知道的：
更灵活
虽然潜在的性能提升可能是可变字体最明显的特征，但还有更多值得爱的。另一个关键卖点是它们提供比传统字体更高的灵活性。
例如，可变字体允许设计者利用CSS转换。当字体从一种样式变为另一种样式时，这可用于创建一些超平滑的动画。链接和导航等元素可以变得更加有趣和独特。虽然它可能听起来像一个小细节，但这为我们提供了另一种改善用户体验的方法。
在同一个保护伞下，使用可变字体时也可以创建自定义字体样式。由于这些字体的构建方式，您不必满足于预制样式，如浅色或粗体。相反，您可以选择几乎任何介于两者之间的任何东西，或调整可用的字体轴以根据您的需要定制类型。
真正令人惊奇的是，像Font Playground这样的工具使这些调整变得非常容易。它们提供了一个可视化的UI，可以根据您的内容调整内容。您无需成为专家即可获得所需的结果。而且，它甚至会为您提供必要的CSS代码。
最重要的一点是，排版变得不那么僵硬，对设计师的解释更加开放。当然，如果您愿意，可以使用标准样式。但您也可以选择将自己的个人风格放在项目上。
使用Font Playground自定义可变字体。
还处于起步阶段
与几乎所有新技术一样，可变字体旁边还有一些星号。然而，这些限制更多地是它们存在的早期时间的产物，而不是致命的缺陷。
有限的选择
可变字体的数量似乎每天都在增长。尽管如此，与传统字体相比，可用数量仍然很小。
此时，Google Fonts并未在其标准库中提供任何可变字体。虽然，Amstelvar，Cabin和Nunito字体可通过Early Access计划获得。
但是有越来越多的替代资源。地方如V-字体和字体游乐场有足够的选择，以适应大多数项目的需求。而且，一些独立开发者已经开始出版他们自己的家庭。
在V字体调整可变字体。
有限支持
浏览器对可变字体的支持涵盖了大多数现代浏览器的较新版本。您将无法获得对Internet Explorer等旧版产品的支持，甚至不会支持较新版本的Chrome，Edge，Firefox和Safari。
这可能是也可能不是交易破坏者，具体取决于您的目标受众。当然，通过的时间越长，遗产支持就越不令人担忧。而且，可用字体的选择只会继续增长。
浏览器支持可变字体。
网络排版的恩惠
可变字体看起来可以将Web排版提升到更高的水平。设计师不仅没有被迫使用可用的风格，而且还有能力做更多事情。将其添加到简化的字体管理和提高性能，您可以获得几乎可以使任何项目受益的内容。
不难想象可变字体成为标准的未来。我们看到变量字体越多，就越难以看到传统产品如何保持相关性。
随着平面设计逐渐演变成不太严重的问题，它开始实施以前流行的设计趋势。阴影在这里是显而易见的发展，因为它们与最小的设计风格和平面设计元素形成鲜明对比。
在本文中，我们将回顾一些网页设计中最好的当前阴影实现。
接近残酷主义，Julian Buehler的网站使用阴影的巧妙3D形状，提供独特的深度效果。
结合旧式的反思，阴影给对象一种现实的感觉，并且肯定会成功地创造出独特而不寻常的东西。
Ustwo是一个更微妙的实现，它使用重叠文本与阴影一起创建分层效果。这导致增加了一些分离以及视角和视觉兴趣。
ATOLYE15巧妙地在白色背景下使用阴影来创建英雄部分透明度的错觉。这个最小的实现是微妙而有效的，并且是阴影如何增强网站设计的一个很好的例子。
更好的是在其设计独特的阴影被连接到的对象，创造有被其上放置的物品表的错觉。
Plasso是一个完美的网站设计。阴影尽量少用，但以完美的方式实现。他们只是优雅的主要CTA按钮和内容卡，创造了一个非常小但突出的设计，突出并带来了所有重要领域的关注。
Stripe以其出色的设计方向而闻名。随着它继续推出更多产品和功能，这个方向的延续包括丰富的令人印象深刻的阴影。
Smallchat在他们非常小而丰富多彩的设计中包含了阴影。它们增加了产品图像背后的对比，并帮助将其与书面内容区分开来。所有这一切，都为设计增添了一层吸引人的层面，并实现了出色的登陆页面。
Scaphold像上面的Better一样使用阴影在产品插图下面产生类似桌面的效果。在这个例子中，它使用了各种阴影样式，包括非常粗糙的边缘以及更柔和，更高的阴影，这些阴影产生了漂浮在空中的元素幻觉。
你最近注意到网页设计中有阴影的例子吗？在下面与我们分享！
在撰写提案之前，您需要做好自己的研究。仔细阅读他们的整个帖子，以确定几件事情：
他们的时间表是什么
他们的预算是多少（如果它甚至值得你花时间！）
他们最终要求什么产品
他们的目标受众是谁
他们需要或寻求什么技能
他们可能希望看到的以前的项目
一旦你完成了解析他们的请求的尽职调查，那么你可以着手编写一个适当的提案。虽然我们强烈建议您不要使用通用的复制/粘贴提案，但如果要制定提案的架构以使其更快写入，同时证明您了解客户的需求，则始终有一个好主意。
一旦你找到了工作，有一个像这样的标准表格可能是一个好主意，你可以发送客户表明你很专业，并且关心他们的投入。
我们推荐如下内容：
我是[ 他们 ] [ 他们正在寻找的具体词语，如设计师，作家或开发人员 ] [技能]和[ 与他们已建立的项目具体相关的工作或项目的经验]你可以在这里查看[ 提供你项目的链接 ]。我也有与[ 他们的目标受众以及您为他们写作的经验等 ]合作的经验。我可以[ 插入时间范围 ]为[ 您的价格点 ] 完成您的项目。
它不需要像这样，但是具有标准形式与回收相同的提案不同，因为您可以通过这种方式快速方便地找到相应的提案，因此您不需要花费几个小时就可以完成提案，同时还可以能够在您的提案中具有原创性和特定性。
不要忘了具体说明你的技能。你有5年的平面设计经验吗，还是你有专业写作学士学位？不要让他们筛选300页以上的技能 - 使其简单易读，但足够广泛，以至于他们看到你可以处理他们工作的每个组成部分。
记住客户也有工作要做。与他们沟通，确保你从他们那里得到你需要的东西。
您不必每周花40小时写一份提案，但如果您真的想要这份工作，您需要花费几秒钟的时间完成一些工作。
想想客户花了多少时间来制作他们的建议，并发布它来寻找人们来帮助他们 - 理想情况下，您应该花费大量的时间花费在自己的招聘信息上，就像您在提案中所做的一样。
让我们首先重申：不要复制和粘贴。是的，这是一种简单的方法，可以快速获取您的名字，但客户可以通过此方式看到。当你甚至没有提到他们的项目或者他们的项目可以提供什么价值时，最糟糕的进攻是。
您的客户可以在几秒钟内看到您的模糊通用提案。有时候，这是一个问题，客户会在他们的提案中要求自由职业者在提交之前在提案的开始部分放置“菠萝”或“独角兽”等词语，以确保他们已阅读并理解有关工作发布的所有信息。
展示你的作品！如果你没有太多的样品可以发送，特别是如果你刚刚开始使用，那么当他们提出要求时，为客户提供一些模型以提供给客户将是一个很好的时间和精力投资。更好的是，不要等待他们问 - 向他们展示！获取一个网站来引导您的客户参与您的建议。
重新设计一些你最喜欢的网站，为假公司制作一些标志，写一些关于任何事情的博客文章 - 这主要取决于你做了什么和你申请什么，但是确保你有什么证明你的东西可以完成这项工作。
这是至关重要的，不仅仅是说你可以在两周内完成工作。通过将他们的项目分解成更小的任务并为每个任务提供一个时间表来尽可能具体。例如，你可以说研究和头脑风暴将需要三天的时间，用一点时间与客户就你的想法进行交流，并将他们的反馈意见加入其中，并且线框图需要两天，等等。
客户不仅会感激您花时间充分考虑您的承诺和他们的需求，同时也会理解您明白他们要求的复杂性和细微差别。它将表明你对工作的认真态度，并将帮助客户更好地理解与你的合作将会是什么样子，以及项目的更大进程是什么样子。
请记住，作为一名自由职业者，你在销售自己和你的服务，你必须看到你自己，你的工作以及你作为一个企业所提供的东西。
不要让你的提案长达五页。保持简短，甜美，简洁和经济。你希望尽可能具体和狭隘，并且在解释你的过程和他们的项目时尽可能描述性，同时尽可能简洁，以便他们迅速而迅速地知道你是合适的工作自由职业者。
这样想一想：选择3个技能，挑选3个最近的项目，并将时间表分成至少 3个任务。现在出发，开始工作吧！
最大的收获？花在提案上的额外时间可以为您带来更好的合同，这意味着支付更高的工作机会更少。你可以更好地工作，减少工作量。
在社会上，成功经常被描绘成非常接近一个单一的定义。我们认为一个成功的企业家驾驶特斯拉并生活在最聪明的智慧家园。或者我们看到一个大镜头高管“生活”的富裕，就像他们说的那样。
但成功是一个非常个人和主观的事情。没有正确或错误的定义，因为它是我们心中的一个问题。我的成功措施可能与你的不同。但这是否意味着我们仍然应该采取同样的成就做法？
虽然像努力工作和诚信这样的特质将永远是共同的因素，我们如何处理我们的自由设计业务应该更好地反映我们个人对成功的定义。这里有一些方法来定制您的业务，以帮助您获得快乐的地方。
专注于正确的项目类型
对某些人来说，成功的一部分定义涉及到具体种类的项目。履行可能以设计非营利组织网站或最喜爱的运动的形式出现。其他人可能不关心行业太多，因为他们关心吸引大笔支付的项目。
关键是要弄清这些项目的类型，让你到达你想去的地方。从那里，这是一个营销自己的任何利益的利益的问题。
当然这比说起来容易得多。运行自己的业务的现实有时意味着不得不承担不一定符合您的成功愿景的项目。但是没关系 - 只要你不会陷入干扰你长期目标的东西。
事实上，除非您已经有行业联系，否则将您的业务指向特定类型的项目通常是需要时间的过程。但一旦你踏上门，就可以开辟各种各样的可能性。
想想你在哪里，何时以及如何工作
您的工作环境可以大大影响成功。当你想到这一点，这是一个影响和定义我们成功的领域。如果你从一个不想要的地方开始网站，那么做得更好很难做到。
但它也远远超出了位置。有一些情况，我们的成功的一部分不仅在于我们的工作，而且我们的工作时间。考虑三个最常见的：
作为家长和设计师
自由职业者，为家长谋生和为孩子们提供了一个很好的机会。就个人而言，它允许我让我的女儿上下班，并有机会与她花更多的时间。所以对我来说，在家工作的标准时间是正确的情况。除非绝对必要，否则周末通常是禁止使用的。
在初始业务设置方面，这可能是一个相当简单的安排。最大的挑战是，当天有中断可能会有点混乱。但是在家里肯定会比传统的办公室更容易处理混乱。
把“自由”放在自由职业者中
有许多设计师将他们的自由职业作为追求旅行或志愿服务等其他激情的工具。因此，自己工作时间的灵活性是很大的。实现这一点也是一个挑战。
工作奇怪的时间真的取决于你拥有的客户类型。一些演出要求您在“正常”营业时间内可用。而在办公室不到标准的每周5天也可以采取一些仔细的规划。
不过，可以做到这一点。这一切都是为了找到一个方程式，a）让你工作一个个性化的时间表; 和b）使您能够谋生。如果你真的很热衷于一些事情，你会发现一种方法使它一切正常。
打击大时间
寻找大票项目的人可能会比上述两种情况对自由职业有所不同。对于一个，更高层次的项目可能意味着与大公司合作。虽然有些客户可能会偏僻的会议，但其他人可能更喜欢亲自见到你。这意味着可能需要旅行或有会议空间。
这里另外一个重要的考虑因素是额外的工作量。即使你正在管理其他自由职业者，可能会有很多夜晚和周末充满工作（更不用说营销自己的时间了）。
如果这听起来像你的果酱，那么专注于过程效率可以让一切顺利进行。建立一个项目如何按时和预算完成的过程，以便您可以保持该货币兑换机。
进度缓慢时
作为自由职业者最好的方面之一是能够以自己的方式做事情。那是一个很大的责任。很容易陷入不好的习惯，最终会伤害你的生活和工作的机会，你想要的方式。
所以，如果你没有看到你希望的进步，可能是时候仔细看看你的业务运作。虽然运气不好可以发挥作用，但大多数情况下，您会发现这是您可能做的不同的具体事情。
在您的财务状况方面，请仔细检查您收取的费用以及您如何收取款项。特别是网页设计是价格上涨的行业。你想确保你没有收取太多或太少的收费。
网站设计是设计和创建网站的行为，它很快成为现代艺术形式。一个网站的设计往往是决定游客离开或停留的因素。
在20世纪90年代初，万维网推出后，网路上只有少数几个网站。20世纪末网站数量呈指数增长，今天有数亿个网站。每月增加数百万个新网站，大部分网站由网站设计师创建。
网站设计师通常负责网站的布局，配色方案和一般设计。设计网站不仅仅是使网站美观，而且。熟练的网站设计师还必须使网站易于浏览，所以访问者可以尽快找到他们需要的内容。网站设计师还必须知道如何帮助网站在搜索引擎中排名，以及在哪里放置广告，使其有效。
网站设计师通常是创意类型，但是也需要广泛的计算机知识。即使是使用简单网站设计软件的设计师，至少应该有一些计算机编程和编码知识。
大多数网站设计师每小时收费从20美元到50美元不等。该速率可以根据设计者的经验以及网站的复杂性而变化。一般的网站设计师通常可以期待每年大约5万美元。然而，网站设计师的薪水在很大程度上取决于他的技能和工作频率。
例如，一些更有才华和勤奋的网站设计师每年可以赚取超过10万美元。另一方面，业余或兼职设计师每年只能赚2万美元。
没有设定教育要求成为网站设计师，一些积极的个人可能只能通过自己学习设计和编程技能打破这个领域。网站设计是一个快速增长和竞争激烈的行业，然而，成功的网站设计师通常至少有几年的专上学校。
网站设计师需要具有艺术性和计算机知识。因此，大多数网站设计学位课程的重点是将数字媒体课程与电脑和网络编程课程相结合。至少网站设计者应该知道基本的网络编程语言，特别是HTML和CSS。
越来越多的传统大学正在提供网站设计方案，以及许多在线大学。对网站设计学位感兴趣的学生也可能考虑艺术学校以及技术学院。
网站设计和开发公司也定期聘请有才华的网站设计师获得学位。经验不足的网站设计师通常会开始作为助理或学徒，以获得宝贵的实践经验。他们帮助设计了几个网站后，往往能够提升自己的职业生涯并承担更具挑战性的项目。
网站设计师也可以作为自由职业者工作。这意味着他直接为需要设计网站的个人或公司工作。为了获得一致的工作，自由网站设计师通常需要拥有广泛和令人印象深刻的以前设计的网站的组合。
在快速移动的社交媒体平台，如Facebook和Twitter和新兴的移动智能手机和平板电脑之间，保持简单的在线的关键。好消息是：新的第三方工具的绒屑使重新设计你的网站的速度和简单性比以往任何时候都更容易。
这里有五个基本步骤，一个干净，简单和无压力的网站重新设计。
1.专注于网站的数据来优化您的功能。 彻底审核显示人们如何使用您当前网站的数据。保持简单的诀窍是找出你绝对需要的元素。
用什么：基本工具，如网站的流量日志和免费服务，如雅虎网站分析或谷歌Analytics（分析）提供洞察到你的网站的性能。但复杂的数据分析工具也可以证明是有帮助的。拉米拉达，总部位于加州CrazyEgg（起价为每月$ 9）创建显示您的网站的最频繁点击的部分可视化热图。这类网站的FiveSecondTest和UserTesting.com可以提供从实际用户对什么是工作，而不是与您的网站工作的定性分析。费用每月20美元，每个测试员39美元。
我们的目标：创建列表必须具备基于用户数据的功能。
2.突破你的网站应该和不应该做的。 有了正确的数据，企业应该能够消除许多未使用的功能。之后，将剩余的功能按照它们对实现目标的重要性排序，并开始布置页面的过程。
用什么：基于Web的头脑风暴，并概述工具可以创建符合新计划，粗糙的页面设计。总部位于旧金山的WorkFlowy（免费多达500存储理念）和德国的MindMeister（每月$ 4.99开始）的工具来规划内容流，功能集和基本布局。
我们的目标：创建一组页面布局是尽可能准确的，包括最重要的功能。不要担心，如果这一点没有什么比基本的联系信息，链接到社交网络和一个简单的品牌声明。
3.根据您的需要匹配正确的网站解决方案。最重要的业务内容通常可以适合少量的网站空间。因此，现在可能有一个深层的托管网站服务。这些托管服务不需要编码经验，而且可以管理从安全到升级的所有内容，并创建适合在平板电脑和其他设备上正常运行的移动设备适用功能。
用什么：简单的几乎与托管的网站总是更好。一个简单的登陆页面-链接到社交媒体-纽约的Flavors.me或西班牙的Dooid提供基本的，易于建立网站。
对于更多功能，如在线表单或产品照片库，更复杂的网络选项是必要的。曼哈顿的Squarespace（开始于每月$ 8），总部位于伦敦的Moonfruit（每月$ 6开头），以及基于爱沙尼亚，Edicy的（约$ 7.50，每月开始）提供的设计功能，易用性和性能的平衡。
其目标是：选择精益托管解决方案成为可能，并且一定要发展自己的网站用手机或平板电脑方便，以确认它的作品，因为它应该在这些设备上。重要的是，您的网站能够正确有效地展示给越来越多的移动互联网用户。
4.在您的设计中强调社交媒体。请仔细考虑在您的网站上放置社交媒体内容。通常，它的前面和中心，并提供你最动态的内容，包括博客文章，更新和视频。
用什么： Facebook的，Twitter的，Pinterest的和其他社交网络已经引发了山寨机行业，他们的工具集成到您的网站和移动设备的第三方应用程序。探索在社交媒体上分享您公司内容的方法，并寻找在Twitter上推广的功能，以及在Facebook上喜欢的功能。
其目标是：外包尽可能多的现场体验尽可能社交媒体和移动设备，同时还按照你的设计方案。
5.一旦开始运行，请严格测试您的新网站。决定如何衡量您网站的成功或失败。这将有所不同，但有用的指标包括电子邮件列表注册，额外的关注者和转化为电话或聊天会话。
用什么：有第三方工具的阵列来优化您的设计不同元素的表现。Optimizely（起价为每月$ 17），谷歌内容实验（免费在谷歌Analytics（分析）包），视觉网站优化工具（每月$ 49），SproutSocial（开始于$ 39）和Radian6的通过Salesforce的（免费启动Salesforce的用户，计划在开始每个用户每月$ 5）将社交媒体结合到数据分析中。另外值得一看是客户反馈服务，如Hively（基本计划是免费的，付费服务每月$ 15开始），提示游客回答有关使用你的网站他们的经验调查问题，这些问题。
其目标是：有一个明确的计划来追踪你的网站性能，并致力于管理所需的资源和更新新的设计。网络是一个永无止境的工作进展 - 你的新网站也是如此。
当客户来到你的网站 -无论是从网上搜索结果或在广告中的链接-网页，他或她的土地上被称为目标网页。这些可以是您的主页或您在网站上创建任何其他页面。由于这些页面可以随意转换成浏览器是至关重要的付费用户，这一点很重要，他们是最大的参与优化。
如果您担心您当前的着陆页可能是驱动游人流连忘返，而不是鼓励他们与您的内容进一步参与的，请考虑以下策略来优化您的着陆页：
1.创建自定义的目标网页。
请记住，你是不是仅限于一个单一的目标网页。您可以创建多个页面，每个页面定制特定类型的访问者。
理想情况下，一个登陆页面应该成为你的流量引荐源之间的桥梁 - 如广告或社交媒体链接 - 与您的网站的其余部分，提供了量身定制的个人游客的需求信息。例如，如果你运行一个付费点击（PPC）广告系列中的广告推广特定产品，然后放下你的访问者到你的主页，他们可能会觉得搞乱了。
更好的方法是创建或识别特定的目标网页，将提供这些游客正在寻找马上的信息。这可能是因为您的网站或复杂如创建每个你的PPC广告组的唯一登陆页面选择现有的特定产品登陆页面一样简单。颗粒越多，你去用这种方法，你可以更好的调整目标网页的信息，并呼吁到行动，个人游旅客。
当然，自定义目标网页不应该只针对PPC广告活动中使用。如果游客从客户的职位或其他可识别的源网站上的到达，考虑为他们创造特殊的着陆页为好。
2.拆分测试目标网页。
着陆页优化还没有结束，一旦你创建了定制页面访问者不同的群体。要真正提高你的网站的性能，考虑你个人的登陆页面运行的分割测试。对比测试基本上可以让您比较网页的两个或多个版本，以确定哪些元素或功能是最有效的。
请记住，大部分游客只花了几秒钟在新网站上决定是否与内容进一步参与或点击“返回”按钮。所以，如果您的目标网页正在形成，介绍你的新访客到您的网站的内容的其余部分的桥梁，这是至关重要的，这个页面尽可能地让新访客进一步调查一样引人注目。
要确定哪些目标网页的功能，更有效，你可以做A / B分割测试。修改目标网页上的小变量，然后随机服务的每个变化给游客在现场的环境。
测试变量可能包括：
到达网页标题的写法，字体，颜色和页面位置。
着陆页上使用的任何图像。
着陆页的设计，包括背景颜色，列大小或导航元素。
着陆页上所描述的具体利益。
您的目标网页的号召性的行动。
测试尽可能多的这些变量尽可能使用免费的谷歌Analytics（分析）“ 内容实验 ”计划。然后，用你的实验结果，使您的自定义登陆页面转换中的新访客到终身读者更有效。
3.尝试使用视频的目标网页。
如果您没有看到您是否想在纯文本的目标网页的结果，你可能想尝试不同的东西：视频着陆页。
视频着陆页功能单一的视频文件，而不是文本块。参与率往往比使用基于文本的互动元素的含量越高，所以你可能会抓住观众的注意力更好地被输送通过视频，而不是文字相同的信息。
制作视频的目标网页的最简单的方法是使用电脑的内置摄像头，并记录您的介绍与YouTube的视频录像机。一旦您的视频已被记录，它可以取代你的文字中可以嵌入到您的着陆页。这是一个简单而优雅的解决方案，以诱人的新访客的问题留在网站上更长的时间。
如果你决定使用视频的目标网页进行实验，让他们简短而中肯。简明地解释你的网站的好处和观众接下来采取的行动。此外，要注意您的演示文稿。衣着得体，在提供专业的或局部背景的位置，你的声音能量和电影说话。
把一点点额外的努力进入你的网站的登陆页面 - 无论是通过自定义的基于文本的页面或引人入胜的视频文件 - 将有可能使您的网站的性能差异。
成功的产品营销正在寻求从客户或用户的角度来看的产品和服务。以用户为中心的设计优化产品，为用户如何需要使用它们，而不是强迫用户改变他们的行为，以使用产品。
我们可以使用用户之间进行区分的一个重要变量是性别。有研究提供的证据表明有继承之间的差异 认知风格 的男人和女人-换句话说，一路男女思考，观察和记忆信息。
据西蒙·巴伦 - 科恩在剑桥大学发展精神病理学教授之间有男孩和女孩的行为在出生时细微的差别。虽然大多数女宝宝把大部分的注意力转移到社会刺激，如人脸和声音，大部分男生最注重的非社会，空间的刺激，如移动挂婴儿床上方的运动。
在其整个生命，雌雄个体继续在越来越复杂的方式来体现这些早期的性状。越来越多的证据表明，身体，男性自发地向制度化比女性做更大程度，而女性自发同情比男性更大。
其他研究也表明，工程数学，物理学和-所有这些都需要高度系统化的-更常见的男性职业，而女性则在从语音或面部表情的基调解码非语言的交流，拿起细微差别更好或判断一个人的性格。显然，这 并非 意味着所有的男人都systemizers和所有的女人都empathizers。
在Clicktale研究中，我们分析了这样男女搭配不同的网站进行互动。行为的差异进行了反复观察：下面的图片是从配方的网站上得到。从侧面由端鼠标点击热图呈现在这里，您可以看到网站访客谁在页面的各个部分点击率。男子在左侧热图，而妇女在右侧的热图所示。
乍一看，很明显，更多的妇女与顶部的菜单栏从事 - 点击进入各个类别，查看不同的食谱。此外，女性更可能点击左侧的图标，而不是仅仅停留在食谱。男人，在另一方面，往往是远在他们点击比较有限 - 他们寻找的正是他们追杀什么，然后离开现场当他们完成。
正如在页面中心看到由狭窄的“热”乐队，男人都集中在配方中的成分以及如何准备。妇女，在另一方面，浏览上下页越来越不太集中 - 由更广泛，更漫射的“热”带所见。
这两个热图证实，男性在表达其在网站上的行为更加系统化而女性更适合移情认知方式。
如果你阅读了今年早些时候出现的无数网页设计趋势报告，你可能会读到大型，英雄大小的电影院在所有地方的主页上的显着位置的承诺。那么他们在哪里？
虽然一些时尚前沿公司在他们的网站上使用它们，但电影已经大部分被降级为展示综合文章和网页。
我说足够了。现在是时候，电影院起来，并采取他们正确的地方作为他们注定要成为的网页heros。
为什么电影工作
追随网页设计趋势的想法只是因为它被预测从来没有真的让我兴奋。但是，如果你能真正开拓这样的趋势怎么办？如果它实际上有一个目的，并同时解决了一个问题？
当谈到cinemagraphs，所有上述陈述是真实的。虽然它已经被讨论，（甚至预测为网络设计的趋势），很少有网站实际使用它们。因此，他们甚至没有接近达到临界质量，所以他们仍然迷住大多数网络用户。
不是一个照片，不是一个视频，电影是固有的眼睛糖果，因为他们愚弄观众只是足够长，让他们再次看看。在A.D.D.时代我们生活在今天，任何你可以用来让用户暂停 - 即使只是一个瞬间 - 被认为是一个小胜利一个非常重要的原因：
你有他们的关注。
在网站上吸引一些注意力的一种特别有效的方式一直是视频。人眼喜欢运动。但一个大英雄视频（即使是一个短的）是如此庞大。当然，你可以压缩它的一英寸的生命，但然后它只是看起来...压缩。或者你可以独自留下，受到缓慢加载网页的后果。
但通过使用电影院，您可以节省大量的带宽，同时仍然满足运动的需要。事实上，你是在嘲笑，因为你可以利用电影院的新颖性方面 - 人们只是不经常看到他们，当他们做的时候印象深刻。
所以现在你知道为什么cinemagraph应该在网络上重要的地方，让我们采取一个高层次的观点，如何使一个生命。
Glendevon Motors在其英雄区域使用了一个电影院来传达一种心情，并在其竞争对手中脱颖而出，成为一个“高级品牌”。
选项1：使用先前存在的电影
有许多实例，当采购一个现成的CG是可以接受的，或甚至喜欢自己做。我会说，如果你能找到你所需要的，并在你的预算，获得它的权利，那么这是走的路。唯一的问题是：你在哪里找到它？
好消息是，你有选择。它们将在很大程度上取决于您的预算（或您的客户的），但是有很多来源。甚至有几个免费的选择。然而，如果你有八十块钱花，Shutterstock有一个相当不错的选择高清CG。
（提示：他们没有独立的影片段，因此您只需搜索“cinemagraph”这一术语，以及“视频”部分中的其他搜索字词）。
在我开始这篇文章之前，我必须处理一个语义问题。根据我的字典的字体是“一组一个特定的脸和大小字体；字体是一个特定类型的设计。在计算条件的字体是一个数字文件，存储所需的信息，以使'一个特定的人脸和大小'在屏幕上的一组。字体和字体是不同的东西，迂腐的设计师坚持认为你不使用的术语。你要知道这是在回答“你能使用任何字体/字体在您的网站上？“你要知道，当我把字体我是说像Arial或Times New Roman字体时，我指的是我所说的文件，你的计算机使用的渲染字体。这可能听起来微不足道，但我可以向你保证，这是相关的。
网页上使用的字体文件
当你浏览网页的字体（S）在网页上使用的是从您的计算机上的字体渲染。所以，如果你没有在您的计算机上的Web页面将显示你的系统的默认字体必要的字体文件。
因为不同的系统（窗口，苹果，苹果）有不同的字体，有极少数的字体，被认为是可供广大用户。这种字体被称为“网络安全”字体。你可能已经注意到字体相同的少数人在大多数网站使用。你限制这些选择了吗？默认情况下你是很有限，但有几个选项，允许你使用额外的字体。这里有几个：
在服务器上设置字体文件
您可以保证所有的访问者将有必要的字体文件，通过在您的网站的服务器上托管。您可以设置您的网站，所以字体是下载和使用您的访问者的计算机。大多数浏览器的工作很好。然而，它确实打开了一些许可证问题，因为大多数字体许可证不允许你在公共领域中提供一个字体文件，这是有效的你所做的。然而，字体托管服务，为您提供法律方面的照顾。这并不意味着你可以使用任何你喜欢的字体；你依赖于主机服务来承载你的字体。这个选择仍然是有限的，但要少得多，所以依靠用户在他们的电脑上。
字体为图像
如果你将它转换为任何图像，你可以使用任何字体的设计。这几乎满足所有许可证。但有2个主要的缺点：网站不能读取搜索引擎和文本是不适合“动态”的内容（由数据库或用户输入的内容生成）。
字体为闪光电影
闪光电影允许字体文件被嵌入，但不公开的字体可供人使用。有几个技术可以用一个小的闪光电影，用一个小的闪光的电影，以取代生活文本。这是一个很好的选择标题点是用大段文字或对某些背景不可取。
所以有几个选项，但所有的人都有其缺点。网络文件和字体从来没有被一个又一个的好朋友。在大多数情况下，你只需要做一个坏的情况最好的。
赔率是你看到字体真棒在使用上的一些网站，你频繁。这个网站的字体完全可以缩放矢量图标已经迅速成为最常用的工具，在网络设计师的阿森纳。在这个快速的教程中，我们将调用字体真棒图标，以帮助建立一个比较温和的垂直菜单栏，但首先让我们看看什么使字体真棒这么可怕…
可伸缩性-无论屏幕分辨率是什么样的图标都会很好地选择响应的设计。
CSS样式-如果你可以使用CSS样式，你可以将它应用到这些图标。
兼容-字体真棒发现其根源在推特引导，所以它与其他框架的作品。
许可证-字体真棒完全开源和GPL的友好，它可以在任何地方使用不受限制。
设置字体真棒
字体真棒，很容易建立在您的网站上使用的链接回到bootstrapcdn的CSS的CSS或上传到您的Web目录。这篇教程的目的，我们要链接到bootstrapcdn.com但是如果你希望使用的任何其他方法引用的CSS字体真棒，他们可以在这里找到。
添加字体真棒没有下载或安装任何事情是通过添加一个单一的代码行：
<链接href =“/ maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font真棒。min.css”rel=“样式表”>
在你的HTML的<head>标签之间。如果你是本地测试，你将需要更改代码行添加HTTP之上：
<链接ref=“http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font真棒。min.css”rel=“样式表”>
样式的菜单
现在你的网站已准备好的图标，让我们继续用下面的CSS创建一个垂直的导航菜单：
列表组{
margin-bottom: 20px；
填充左：0px；
}
* {
框大小：边框框；
宽度：65%
}
。列表组项目：第一子{
边框右半径：10px；
边框左上半径为10px；
}
a.list-group-item {
颜色：# 555；
}
列表组项目{
位置：相对；
显示：块；
填料：10px 15px；
利润率底：- 1px；
背景颜色：# c3c3c3；
边境：1px solid # 000000；
}
{
颜色：# 21b384；
文字装饰：无；
背景：无重复滚动0% 0%透明；
}
这类清单组现在可以用来创建一个基本的垂直导航菜单而不是我们使用一个无序列表。上面的样式给我们一个较深的文本的灰色背景，但你可以调整背景颜色，字体颜色，甚至添加到成品的悬停样式。
然而，空菜单，让我们在那里得到一些使用HTML导航元素。不要把这个放进你的页面，因为我们没有在这个代码中添加图标。
＜div class=“组”>
< class=“清单组项目“href =“#”>家</a>
< class=“清单组项目“href =“#”>关于我们</a>
< class=“清单组项目“href =“#”>搜索</a>
< class=“清单组项目“href =“#”>联系我们</a>
< / DIV >
添加图标
字体真棒图标可以添加到您的页面上的任何地方使用图标标记<我>。例如，如果你想添加一个铅笔图标，你需要插入下面的代码行：
<我班=“发”
这就告诉浏览器图标是从字体真棒，发，和图标的名称，以显示是铅笔，发铅笔。为我们的菜单，我们将添加<我>和< /我>标签，以及一个非破坏的空间，直接在菜单项。因为我们是与菜单项的工作，我们也会加入足总FW给我们的图标固定宽度。
＜div class=“组”>
< class=“清单组项目“href =“#”> <我class=“FA家fa-fw”> < /
我是家里的
< class=“清单组项目“href =“#”> <我class=“FA用户发FW”> < /
我>关于我们< / >
< class=“清单组项目“href =“#”> <我class=“FA搜索fa-fw”> < /
我>搜索< / >
< class=“清单组项目“href =“#”> <我class=“FA电话fa-fw”> < /
我，联系我们< / >
< / DIV >
你有它！最终的结果会是这样：
多做
有更多的你可以做与字体真棒图标从直接在<我>标签。你可以让它们更大，边框可以添加，图像可以旋转，你甚至可以告诉图标旋转。字体真棒网站的实例页面提供了关于如何在自己的页面上应用这些样式的说明。如果你想看到所有479个图标，随着他们的名字用在你的网页，查看列表作为一个方便的参考指南。新的图标正在不断地被添加到库中，所以确保你使用的是这个文档中最新的版本，以获得最从这个工具。
最新推荐