面向网页设计师和开发人员的25大浏览器工具

这篇文章首次出现在问题218.net杂志 - 世界上最畅销的网页设计师和开发者杂志。

建立一个精心设计和令人难忘的网站是一个复杂的过程,需要设计师充分参与 - 从找到最初的灵感火花,到迭代设计和构建,到测试和获得反馈。这听起来很辛苦,而且确实如此,但好消息是可以获得帮助。在本文中,我们提供了我们工艺工具的鸟瞰图,为您提供了一个选择,您将发现在设计和开发过程的每个阶段都非常有用。

考虑到所需的全系列基于浏览器的工具,我们的目标超出了普通和预期,以确保您的想法不仅不同,而且适合目的。结果列出了25个非常有用的应用程序,围绕典型的工作流程设计并考虑以下基本项目阶段:

  • 收集灵感
  • 设计和建造
  • 测试和收集反馈

所以,不用多说,让我们开始做生意吧。

收集灵感

我们的第一部分重点介绍项目的开始:寻求灵感,通过剪贴簿开发视觉语法,产生想法并通过草图和线框图赋予它们潜在的形式。很容易陷入一种陈旧的陷阱,反复出现之前的情况。更智能的方法是调查视觉景观,识别既定的设计模式并收集视觉灵感,然后再继续 - 掌握一个想法 - 构建原型,测试和迭代。有许多工具可以帮助您完成这项工作;这些是我们的一些最爱。

虽然我们不提倡“维京”方法(掠夺网络寻找灵感并毫无意义地模仿他人的工作),但我们鼓励采用合理的方法来实现
确定既定和新兴的设计模式。这些是您可能从中学到的问题的先前确定的解决方案,并作为对手头任务的响应的一部分进行整合。

1.模式点击

模式点击,由Squared Eye的Matthew Smith提供,将自己推销为“有组织的网页设计系列,包括用户界面的灵感和创意”。正如史密斯所说,它是一个“CSS画廊替代品”,重点是寻找灵感并从别人的方法中学习。当用作流程的一个被考虑的部分时,它是组织设计模式的有用工具,使您能够收集界面设计示例,管理它们并通过标记或集合过滤它们。

数字剪贴簿

在过去的好时光中,设计师们随时随地收集剪贴簿以收集视觉灵感。如果纸质剪贴簿对你来说似乎有点老了,那么很多数字剪贴簿工具正在出现,使你能够使用网络媒介而不是纸张来收集灵感并构建视觉参考资料的集合。

2. Gimme Bar

我们是崇拜者Gimme Bar,一个美丽的社交剪贴工具,由Fictive Kin的Cameron Koczon设计[也见我们的采访卡梅伦]。正如Koczon所说,Gimme Bar“会将你的大脑粉碎成一百万块,然后将这些大脑碎片分散到整个宇宙中,就像某种大脑超新星一样”。使用它之后,我们可以证明这个事实的真相。

Vizuali

我们也有一个情有独钟Vizuali,另一种剪贴簿工具,由我们在贝尔法斯特的硕士生Kyle Gawley创建。通过一个方便的书签导入您的视觉灵感并按照集合(例如,每个项目)组织您的内容,Vizuali目前处于测试阶段,但即将推出。我们强烈建议您申请邀请。我们还建议你留意Gawley--他绝对是一个值得关注的人。

4.连接素描

如果你是那种相信纸上作品的设计师,那么连接-A-素描保证会吸引你。应用程序背后的想法简单而优雅地执行。从笔和纸开始,然后将图纸上传到网站以“连接草图”。顾名思义,该网站使您可以拖放草图并在它们之间建立链接,从而快速轻松地创建快速,低保真的原型。 Connect-a-Sketch非常适合在设计阶段开始时松散迭代的想法。

5.模仿鸟

采用不同的快速原型制作方法,只知更鸟使您能够使用预定义元素快速创建模型。通过使您能够将元素和页面链接在一起,并共享结果以促进无缝协作,它减轻了创建模型的负担,加速了原型设计过程。

Mockingbird是一种付费应用程序,提供各种级别的服务,按使用情况定价,因此您可以按项目使用它,并仅为您使用的内容付费。如果您处于项目构建的早期阶段,那么值得考虑快速迭代思路并收集早期原型反馈。

设计和建造

有了一个想法,一系列原型建立和测试,并从客户端获得支持,任何项目的下一阶段都将转向设计和构建。在本节中,我们将考虑可以简化项目这些方面的工具。我们重点介绍一些工具,使您能够将设计从低保真,功能原型转移到更高保真的成品。我们的建议包括开发网格系统的工具,任何设计的支柱;排版,对于建立信息层次至关重要;图像布局,在没有图像的情况下(让我们面对它,什么时候你知道客户提供一切,包括图像,在前面?);最后,工具可以帮助您记住语法,帮助您轻松完成生活。

6.可变网格系统

正如每位经验丰富的设计师所知,在项目开始时考虑的可靠,可靠的网格系统可确保设计顺利展开 - 从长远来看节省时间。可变网格系统由SprySoft设计并基于960网格系统,是一种快速,轻松地生成CSS网格的无缝解决方案。

只需输入列宽,列数和装订线宽度的值,变量网格系统负责其余部分,为您的站点生成基础CSS网格。同时允许固定宽度和流体宽度,这是获得网格基础的一个很好的起点。

7. Typecast

虽然它目前处于测试阶段,类型转换看起来可以大大简化Web字体的设计过程,在浏览器中本地提供实时印刷反馈。 Typecast由贝尔法斯特Front的优秀人员开发,帮助设计师使用真实内容和丰富的网页排版。它可以在浏览器上下文中实现设计决策,同时减少对Photoshop或其他编辑器的依赖,这些编辑器将从可以看到类型的最终上下文中删除一步。

如果您想预览它的功能,请使用“&ampersand”这个词进入仅限受邀者的测试版。

8. Placehold.it

毫无疑问,我们都开始着手设计并建立一个项目的阶段,并承诺,当我们都知道地狱冻结的可能性更大时,图像,从不介意其余的内容,是“在路上,诚实地”。 。

好吧,好消息是工具如Placehold.it使您能够继续进行设计,而无需等待项目的资产。

基本上是一个用于最终确定布局的图像占位符服务,Placehold.it只需添加一些简单的标记就可以创建各种颜色的图像占位符,从而使用自定义占位符文本。即时生成通用占位符图像,它是完美的,直到上述客户端贯彻内容的承诺并获得完成的图像给您。

9. FlickrBomb

另外,如果您的设计的“颜色”需要它并且您很乐意使用一些jQuery运行,那么您可能还想尝试一下FlickrBomb,它使用一些标记魔法来替换昔日的灰盒占位符与更相关的图像,从Flickr自动绘制。

10. CSS3 Generator

除非你是一个样式表专家,否则你无疑 - 就像我们其他人一样 - 努力回忆最新的CSS声明而不会出错。没有恐惧:CSS3生成器是一个完美的工具,可以帮助您避免手动编制所有那些讨厌的CSS声明,而不是内存。
通过支持供应商前缀,并且有助于提供浏览器支持指示器,它非常值得一个书签,以减轻生成复杂CSS声明的痛苦。

测试和反馈

即使是经验最丰富的设计师也会遇到问题,他们的设计没有按预期显示。在这些实例中,您的第一个调用端口应该是确保您的HTML和CSS有效。如果不是,浏览器渲染将是无法预测的。随着HTML5和CSS3的出现,XHTML日的严格心态可能已经改变,但这并不意味着你应该将验证宝贝与洗澡水一起扔掉。在我们的最后一节中,我们会考虑确保您的标记有效的工具,并让您的项目签署。

11. HTML5验证器

在W3C游戏之前,HTML5验证器就像规范本身一样,正在进行中。由Henri Sivonen开发和维护,它使您能够检查HTML5文档在结构上是否合理。使用有效的HTML文档可以更轻松地解决几乎所有问题的古老格言仍然适用,即使您处于最前沿。

12. W3C的CSS验证器

与HTML标记一样,可以通过验证来阻止怪癖,错误和不一致。唯一的警告:W3C的CSS验证器仅验证CSS级别2.1,这意味着您所有新奇的CSS3属性,供应商前缀,媒体查询等将显示无效。

13. CSS使用

从头开始为每个项目开始样式表既不实际也不可取。但是,从以前的项目开始,你可能会遇到很多困难。CSS用法是一个Firefox扩展,它提取并存储您正在查看的页面上的所有CSS选择器,检查是否有剩余。它还在页面之间存储数据,构建不再需要的声明列表。

14. Onotate

在您的设计上签名通常涉及到来回发送文件,无休止的电子邮件通信,绝望的电话和破译长期遗忘的笔记的噩梦般的过程。Onotate由贝尔法斯特工作室Rumble Labs提供,简化了流程。

上传屏幕截图,让您的同事和客户对您的工作进行注释,审核和讨论。在线移动批准和签收过程可以节省时间......很好。

浏览器扩展

如果浏览器没有内置的内容,许多浏览器都可以扩展它们。 Firefox长期以来一直是浏览器开发的主要原因之一是它的扩展集合。虽然竞争对手正在迎头赶上,但Firefox仍然具有一些经典必备品。

15.萤火虫

没有开发网站萤火几乎是不可思议的。在恶劣的旧Firebug时代调试,编辑和监控页面性能的过程包括花费数小时搜索特定错误,编辑,保存和重新加载页面 - 更不用说使用模糊的命令行工具来检查您的网页效果。使用Firebug编辑HTML,可视化CSS,配置JavaScript和探索DOM - 所有这些都是实时的 - 每天节省数小时。

16. Firebug Lite

Firebug确实是一个不可或缺的工具,它已经在Firefox之外冒险,可以在一个版本中使用适用于各种其他浏览器的轻型版本

17. Web Developer工具栏

Web Developer工具栏另一个必备工具,体现了大量的工具,在设计和开发网站时都是必不可少的。打开和关闭CSS,JavaScript和图像,显示有关页面上元素的所有可想到的信息,填写,启用和禁用表单,查看生成的源 - 这些以及大约100个其他功能可在您的指尖,包的所有部分。这里列出的工具数量众多,是Firebug的完美伴奏 - 事实上,这两个工具对于业内人士来说应该是强制性的。

18. Colorzilla

并非所有扩展都有数百个功能:有些功能只关注一项特定任务。Colorzilla使您能够从页面的任何位置选择颜色并以各种格式复制它,以便以后在CSS样式表或所选的图像编辑器中使用。您甚至可以放大页面以获得恰到好处的颜色选择,并创建并保存您手工挑选的调色板供以后使用。

调试工具

最初,有Firebug,浏览器制造商看到它很好。 Firebug产生了类似的工具,直接进入其他浏览器的核心,不需要扩展。它衡量了Web标准的巨大进步,大多数浏览器现在都使用自己的内置工具来帮助开发我们的网页。

19.网络检查员

内置于Safari中网络检查员比它的竞争对手更漂亮,但这并没有使它更有用。虽然网页设计社区中的一些声音似乎偏向网络检查员,但陪审团仍然不清楚美观是否使其更难使用,或者它是否只是表现不同。时间线窗格 - 使您能够看到Safari加载CSS,JS和其他资产的方式和时间 - 是一个很好的功能,可以帮助您找到需要改进的区域。

20.蜻蜓

Opera浏览器的一部分,蜻蜓是一个体现通常嫌疑人的调试环境;它使您能够调试JavaScript,浏览DOM,预览图像和其他资源,调查本地存储,cookie等等,所有这些都在使用Firebug的任何人熟悉的界面中。考虑到Opera丰富的移动存在,Dragonfly还为移动平台提供远程调试也就不足为奇了。

21. IE开发人员工具

所有这些工具的关键在于调试,不用说你最好在发现错误的浏览器中进行调试。提示IE开发人员工具。它可以作为旧版Internet Explorer的下载,但是从IE8开始,它内置于浏览器中。与Firebug运行类似的功能,如果您需要调查特定于IE的行为,它是最好的工具。

22. Chrome开发人员工具

最后但同样重要的是,编写在Google Chrome或其开源版Chromium上运行的应用程序的开发人员可以使用一系列优秀的调试工具。code.google.com/p/chromedevtools/

小书签

世界各地的才华横溢的设计师正在开发书签,让我们的生活更轻松。 Bookmarklets非常棒,因为它们专注于一件事,而且只关注一件事。这些是我们的一些最爱。

23. WhatFont

有多少次你发现自己在一个网站上有一些华丽的排版,问“这是什么字体?”下一步通常是查看源代码或深入研究Web开发人员工具。不再。WhatFont可以轻松地在任何页面上发现该类型的秘密。只需单击一个书签,WhatFont就可以在任何给定时间识别光标下的内容。

24. ReCSS

Bookmarklets非常适合边缘案例。您可能不会发现自己需要重新加载页面的样式表,但如果您这样做(假设您正在开发动态应用程序),ReCSS正是你所需要的。

25. X射线

如果您对浏览页面排版不满意,X射线使您能够检查整个框模型:页面任何元素的宽度,高度,位置,边距,填充和继承层次结构。尽管可以通过更强大的工具(例如Web Inspector或Firebug)获得该功能,但有些情况下这些功能过度 - 当书签正是您需要的时候。

一种尺寸并不适合所有人

在他的文章'真正的网页设计应用程序“,杰森圣玛丽亚认为需要一个”真正的“网页设计应用程序,并说:”我们这些在这里工作的人应该拥有复杂的原生工具来完成我们的工作。“这是一种值得回应的情绪。然而,这是否必须是一个万能的工具,就像万能药一样,一举解决了我们所有的问题?

现实情况是,在一个具有如此多方面和不同专业领域的行业中,一刀切的方法可能有点过于严格和不切实际。

我们都有不同的需求和网络 - 因为它有机地倾向于做 - 通过丰富的工具满足这些需求,所有工具都可以自由地实现。每个设计师或开发者都有不同的要求现在令人兴奋的是,现在是寻找构建您自己的定制网页设计工具箱的组件的最佳时机。

换句话说,我们在这里列出的工具只是提供的工具的一小部分。一个研究点,您将立即拥有自己的定制工具箱。



翻译字数超限