给网页设计师的A-Z清单

WebFX总裁。Bill在互联网营销行业有超过25年的经验,专门从事SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

A-Z列表的网页设计网页设计和开发有很多技术方面,要掌握所有复杂的内容是非常困难的,这已经成为我们不断增长的行业的一部分。这个A-Z列表试图将字母表中的每个字母分配给我们作为制作网站的专业人员工作的一个重要方面。在这个列表中,你可能会遇到你已经知道的术语,或者你可能从未听说过的东西,但无论如何,我建议每个人都应该至少对这些特定的项目有基本的工作知识。

有些东西更倾向于设计,有些则更倾向于前端开发,但所有这些都为你构建的网页提供了自己独特的好处。

A代表无障碍

可访问性是我们工作中最重要的方面之一,因为许多人在浏览网页时存在缺陷,需要使用非传统的网站访问方式,如屏幕阅读器和输入辅助设备。可访问性也与通用设计有关;可以在各种情况下使用的设计,如移动设备或旧浏览器。虽然没有明确的定义,可访问性的范围有多广,但已经产生了一系列的最佳实践,以帮助某些条件(如视觉、听觉和运动障碍)。

如果您还没有意识到这些问题,那么非常值得进一步研究。A代表无障碍网页内容无障碍指引是开始研究可访问性主题的好地方。许多国家的法律对可访问网站的需求产生了影响,因为政府试图让公民平等地获得信息技术。

大多数网页设计师只要遵循网页标准和最佳实践,就可以在基本层面上实现可访问性标准,这些实现通常会提高网站的质量,即使对身体健全的网站访问者也是如此。Web可访问性是一个相当复杂的主题,需要时间和经验来充分学习,但知道您的产品提供了普遍的访问,这额外的努力是值得的。

B代表浏览器

每个能上网的设备都有软件,可以让用户看到你那些可爱的页面。浏览器就是那种软件,它是网络体验中最重要的元素之一。现在大多数浏览器都是统一渲染站点的,但是老式浏览器却不一样IE6可能会给你带来问题

B代表浏览器如果你看到有人使用ie6,你不妨放弃所有的希望!虽然有数百种浏览器存在,但至少有五大浏览器你应该关注的:Internet Explorer, Mozilla Firefox,谷歌Chrome, Apple Safari和Opera。网页设计师将所有这些浏览器安装在他们的工作机器上进行测试并不是一个坏主意。

此外,还建议在移动设备上进行测试(使用它们的本机浏览器)。

C代表CSS

CSS是样式化HTML元素的主要方法。它让一个无聊的页面看起来很有视觉冲击力。C代表CSS酸性测试显示浏览器的css标准兼容性。

跨浏览器兼容性是CSS的一个问题——所以验证代码、了解所有可以使用的选择器、属性和值并考虑浏览器的需求是很重要的。如果你正在考虑扩展你的CSS知识,以适应未来标准兼容的浏览器,如Chrome, Safari和Firefox,现在是学习如何逐步增强你的网页设计的好时机CSS3

D代表调试

有时候你的代码并没有按照你想要的方式工作。调试的需求只会随着我们现在使用的网络语言的范围、我们设计的更复杂的风格以及混乱的浏览器数量而增加——现在包括移动网络-我们需要支持。确保你的代码正常工作(并且工作得很好)已经成为所有设计师都应该具备的技能。

D代表调试Firebug是一个很棒的浏览器扩展,用于调试前端源代码。能够外科手术般地解决渲染问题需要对所使用的语言有深刻而深刻的了解、耐心、经验和批判性思维技能。

E是民族志(Ethnography

让我们面对它,你的网站最重要的组成部分是那些花时间浏览你的页面的访问者。的主题民族志而且,在更大程度上,社会学是基于理解你的受众的需求。它包括通过学习和研究收集有意义的数据,以确定一个网站的最佳设计。

E是民族志(Ethnography统计数据,例如来自W3Counter的统计数据,可以帮助您了解受众。虽然你可能认为所有人都是相对相同的,我们之间的文化差异影响我们的设计被感知的方式。社会学是值得学习的,即使只是一个基本的层面。

F代表Flash

不管你喜欢还是讨厌,Adobe的Flash已经是一项广泛应用的网络技术,已经存在多年了。而HTML5短期内(如果有的话),它作为快速构建丰富、响应性和交互性内容(例如基于网页的游戏和动画序列)的工具的目的不会消失,如果你正在考虑在你的网页设计中使用高度交互性的网络媒体,那么了解这项技术是如何工作的是值得的。

F代表Flash闪光支持良好,可以轻松禁用或卸载。如果用户的浏览器不支持Flash,那么确保你的网站能够正常工作是很重要的。许多人选择禁用Flash,苹果最近也禁用了Flash取消禁令设备中的技术。

Flash是一种优秀的web技术设计最佳实践在心里的。

G代表图形

没有图像和图形的网站会很无聊,知道如何创建有用和迷人的图像是一个网页设计师必须具备的技能。G代表图形图片是网络的重要组成部分。从web的早期开始,在HTML文档中嵌入图像的能力增强了应用于页面布局的视觉美学水平。

图形通常用于以视觉形式而不是文本形式最好地呈现的事物。例如,图表可以增强读者理解呈现给他们的数据的能力。

H代表HTML

如果你建网站,你需要知道超文本标记语言.就是这么简单!自从网络出现以来,结构语言就已经存在了。

HTML是用来标记你的内容的,以强调它的语义意义。H代表HTML使用W3C之类的服务验证代码标记验证服务是个好主意。虽然跨浏览器兼容性对于HTML来说并不是什么大问题(除非你要扩展到HTML5或为XHTML使用适当的mime类型),但验证代码并为正确的工作使用正确的HTML元素仍然很重要。

HTML通常是网页设计师和开发人员的起点,是我们网站最基本的组成部分。

I代表交互设计

在互联网的早期,网页是静态的。我们已经进化过去那个无聊的时代,现在我们的页面充满了可以移动的东西,响应用户的动作,并为我们的访问者提供丰富的组件,以改善他们的体验(例如web表单和实时信息小部件)。

交互设计关注的理念是网站应该是功利的。I代表交互设计让访问者与你的网站互动需要一个有吸引力和有用的体验。无论你是使用民意调查,建立联系方式,还是举办论坛,了解坚实的交互设计原则都是值得追求的。

J代表JavaScript

JavaScript往往会吓跑网页设计师,因为它比他们更熟悉的简单标记语言(HTML)要复杂得多。然而,JavaScript在制作现代网站,特别是web应用程序方面确实发挥了重要作用。当事件触发时(如点击),JavaScript通过异步、实时更新网页来增强用户体验,这种技术统称为Ajax

JavaScript还提供了流畅的交互性和流畅的效果,目的是改进交互任务。J代表JavaScriptJS框架,比如jQuery帮助敏捷开发。JavaScript确实有它的局限性(有一个很好的理由,因为它可能被用来利用用户计算机中的漏洞),它可能并不总是在用户的浏览器上可用,因为它可以被禁用。

就像Flash一样,JavaScript的最佳实践是web页面应该在没有JavaScript的情况下可用和可访问。

K代表关键词

好了,这一点扩展了我们的网页设计a - z列表。然而,关键字确实在搜索引擎优化和网络营销中发挥着作用,这与网页设计有关。市场营销对你建立的网站项目的成功有着难以置信的影响。

K代表关键词营销你的网站可以在页面上,页面外,甚至完全离线。虽然市场营销看起来像儿戏,但它远比你看到的要复杂。广告,搜索引擎优化,会议,聚会,赞助,社交网络,病毒式推广,PPC,优化网站标记,分发免费赠品,提供一个链接到你的网站,还有许多其他的方法。

了解关键词,了解SEO和营销,会让你占上风。然而,这些都是本质上的将成为你所建网站的一部分如果你遵循网页设计和网页开发最佳实践。

L代表局限性

虽然网络技术在相对较短的时间内迅速发展,网页设计师在他们可以在网页上做的事情总是有局限性。限制因素也可以是非技术相关的,比如一个人的技能和项目的预算。虽然网络正在发展,但它仍然相对年轻,不能做我们希望它做的所有事情(即使当我们使用它时)突破界限经常)。

L代表局限性重要的是要确保所有东西都能优雅地降级,没有例外。处理限制,如何克服限制,是一个网页设计师的重要组成部分。教育、实验和经验对你的职业发展起着至关重要的作用。

即使是最成熟的专业人士也需要开放的思想和对他们已经知道的东西的怀疑,这样他们才能继续前进保持领先

M代表元数据

网页设计中最被低估的元素之一(很少有人会考虑)是元数据的概念。本质上,主题背后的概念是提供描述信息内容(关于数据的数据)的材料。在web结构中,元数据的一些最著名的用途是Meta标签、RDF数据和专门构建的微格式。

M代表元数据生活中有比HTML更重要的东西,你可以玩转微格式了。通过在文档中包含元数据,您不仅可以以一种可以被网络蜘蛛更好地索引的方式描述页面(就像图书馆使用索引来查找您正在查找的书籍一样),而且还可以在页面上标记信息,使其具有额外的意义和实用功能。举个例子电子名片可以针对浏览器、应用程序(如电子邮件客户端)和设置为识别该约定的服务进行编码。

N代表导航

网页设计的另一个重要组成部分是导航和信息架构的概念。一个网站可能包含数百个,如果不是数千个页面,这就提出了一个挑战,即如何确保人们可以找到他们想要的东西。知道如何组织和组织信息是一项需要学习的关键技能。

N代表导航信息体系结构有助于帮助用户找到他们想要的东西。评估(和使用)面包屑、搜索功能和内容分类等东西的价值是网页设计过程的重要组成部分。

O代表客观性

通常,网页设计师会犯这样的错误,即创造出反映自己偏好而非用户偏好的体验。谁能怪我们呢?如果你不是听众中的一员,你就很难对他们产生共鸣。

保持客观和处理你所从事的专业工作是一种技能,没有手册,但仍然需要学习。O代表客观性你的设计不是基于你认为的漂亮(否则事情会变得丑陋)!在你开始制作一个网站之前,你需要知道你要制作什么,为什么要制作,以及谁会使用它。

研究通过数字进行设计,知道一般可用性指南而且了解如何有效合作客观地说,这只是创建网页设计所涉及的一些事情。不要让自己的偏见控制项目,这通常会让你做出合乎逻辑的考虑,让你的客户和用户更大的需求感同身受。

P代表心理学

在所有与用户体验设计相关的领域中,心理学可能是最有趣和最有用的。一个人在网络上所做的一切都与他们的行为和思维方式有关。知道如何与这种行为互动将使你的网页设计获得最大的成功。

P代表心理学对人类行为的研究可以帮助你识别对颜色的情感依恋。如果你还没有真正思考过心理学,而你正在以设计网站为生,那么学习心理学是非常值得的,至少在基本层面上,以与设计相关的方式。例如,你可以学习如何格式塔心理学可以应用于网页设计。

设计的大多数方面以及我们所定义的美都是通过心理学来描述的,就像我们可以“训练”访问者以适应特定的界面一样。

Q代表质量

任何企业的一个重要组成部分是质量控制的概念。成为一名成功的设计师意味着你需要对你的手艺充满热情和关怀。在这样一个竞争激烈的市场中,保持一套标准、做符合用户最大利益的事情以及确保你生产的产品符合需求的需求是至关重要的。

无论你是设计师还是程序员,不仅要遵循规范,还要树立自己的理想,这种能力是值得重视的。Q代表质量为什么有人会发布不合格的作品?确保你为你的项目设定了高标准。

每当我制作一个网页设计时,我都有一个完整的清单和要求,在项目最终“全部清除”之前,它需要满足。为你自己的工作制定一些像样的标准需要一点时间——而且必须是个人的主动性。然而,一旦你有了,你就可以继续发展和完善你的流程,不仅节省时间,而且还确保你为自己建立了一个关心工作质量的可靠声誉。

R代表可读性

如果有一件事是巴斯光年式的重复(即“无限远!”),那就是这个概念“内容为王。”没有内容,你的网站毫无价值。内容不仅仅是文本和文章,比如你现在正在阅读的这篇。

它是网页应用的营销文案,是行动号召按钮的文字选择,是放置完美的视频演示,或者是利用视觉学习的令人惊叹的信息图表。因此,确保你的内容尽可能有趣、易读和用户友好是鼓励定期访问的可靠方法。R代表可读性内容为王,确保内容易于理解和可见是你工作的一部分。

可读性的一部分是信息设计的主题,以一种吸引访问者的方式布局你的内容。能够设计和编码一个网站很重要,但可用的内容也很重要。

S代表服务器端

JavaScript是一种很棒的客户端语言,但是服务器端脚本对于现代网站来说也是必不可少的。它能做客户端脚本不能(或不应该)做的所有事情。保存用户输入、检索和处理数据库数据以及页面模板只是几个基本示例,说明服务器端脚本是我们产品的一部分。

S代表服务器端有很多语言和服务器端框架,例如Rails,可供选择。显然,大多数人都知道某种形式的服务器端脚本,但对于整个后端业务逻辑领域的初学者来说,了解服务器端脚本的基本功能对于了解其可能性和局限性是很有价值的。

T代表印刷术

@font-face获得更广泛的支持,以及web字体的标准,如WOFF被牵着走,过去束缚着网络排版正在慢慢消失。但正如彼得·帕克的叔叔所警告的那样,“权力越大,责任越大。”随着我们在网页上设计字体的方法越来越多,理解排版的需要已经成为网页设计师工作中越来越重要的一部分。T代表印刷术人们在网上使用很多字体,但是没有人应该使用Comic Sans字体

如果你还没有字体和排版的工作知识,现在是时候开始了。它不仅对设计和内容的视觉描绘有重要的影响,而且最终还将为您提供对页面美学的额外控制级别。

U代表可用性

确保你的网页设计以用户为中心,用户友好是一个相当大的挑战,特别是当你为不同的网络用户设计时。可用性你的用户不想要更多的问题,他们想要的是解决方案——而你的工作就是尽可能轻松地满足他们的需求。U代表可用性给你的访问者一个流畅的体验是一个成功网站的一部分。

与交互设计、可访问性、信息架构、用户体验、人为因素等联系在一起,可用性在现代网页设计中的广泛性和重要性无需进一步强调。

V代表来访者

没有网站访问者,网站还有什么意义?你可以拥有宇宙中最棒的网站,里面有令人兴奋的内容,揭示时间旅行的秘密,但如果没有人阅读它,你的网站也可能不存在。虽然不要贬低内容的重要性,但设计的一个关键技能是让你的网站吸引眼球(并保持他们在那里)。

V代表来访者一个社会社区将鼓励人们继续访问一个网站。以用户为中心的设计的许多方面都侧重于鼓励社区参与,因为它确定了将人们与网站情感联系在一起的必要性。然而,除了社交方面,识别你的访问者并与他们合作使网站更好也是有用的。

这与社会学、人种学和同理心的主题有很好的联系。

W代表Web标准

字母“W”在万维网上可以代表很多东西,以至于很难决定讨论哪个项目。然而,web标准的想法强调了我们行业中许多人珍视的核心原则。了解各种语言和标准(以及它们是如何工作的)是该领域的每个专业人员都应该熟悉的事情。

W代表Web标准严格遵守规范可能会很耗时。从HTML到Python,网络上使用的每一种语言都有自己的一套规范,这些规范概述了语言应该如何使用(以及在什么上下文中)的建议和最佳实践。遵循这些标准可能很棘手,因为它需要大量的阅读、耐心和动机,但如果你想掌握一门语言,如HTML、CSS或Ruby(在Rails上),你就需要习惯遵循这些标准,并保持你的知识是最新的。

X代表XML

有一种语言有如此多的用途,但在我们的行业中经常被推到一边,它就是XML。它在语法上比HTML更灵活,在其独特和多功能的用途上几乎就像一把瑞士军刀。从软件UI设置,非sql本地数据库,第三方服务(如Twitter)的公共api,站点地图以及像RSS这样的联合格式——它已经成为网络开发的主流。

X代表XMLRSS是一种用XML编写的内容联合语言。奇怪的是,尽管XML是如此持久,但它通常并不被认为是需要了解的核心需求。但是,请记住,随着web的不断发展,对XML的需求只会增加,以满足我们多样化的数据需求。

Y代表“是!”

网页设计和开发通常由一系列的选择组成。懂得如何说“不”是一项非常重要的能力。知道什么时候说“是”也很重要。

虽然这在我们的列表中似乎是一个相当模糊的内容,但如果你考虑到当你制作一个网站时,你会不断地处理微观决策,因此,你作为一个网页设计师的能力在很大程度上取决于你如何做出判断和决定。Y代表“是!”知道什么时候说“是”和“不是”是至关重要的。虽然这仍然是我们工作的重要组成部分-我们要接那个客户吗?

我应该使用PHP吗?它是否优雅地降级?-学习决策技巧,并将合理的判断过程与项目结合起来,这与学习代码、内容、设计或理论一样重要。

糟糕的决定会导致网站建设不佳,而好的决定会节省你的时间、金钱和压力。

Z代表拉链

最后,我们来看看字母表中的最后一个字母,以及除了压缩(或文件压缩),还有什么其他选择适合这一节。减少带宽消耗的能力有很多好处,包括减少数据传输成本,加快访问者的页面加载速度,以及与缓存结合使用时,减少HTTP请求。Z代表拉链缓存是减少带宽使用量的另一种有用方法。

知道如何优化你的内容和代码是一回事,但是能够从你的图像中挤出每一个不必要的字节,知道如何小心地平衡质量和文件重量也是至关重要的。学习优化网站资产是一个基本的技能,没有一个初出苗头的网页设计师想没有。

字母汤

网络是一个不断发展的平台,新的技术、技术和范式似乎经常出现。但幸运的是,我们可以谨慎地选择战斗,只学习对我们和我们的项目真正重要的东西。所以现在你知道了你的ABC,是时候走出去了,也许更深入地研究你觉得作为一个网页设计师会对你有好处的主题。

相关内容

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!