跳到主要内容

30个网页设计技巧,让您的生活更轻松

每个网页设计师都有一两个秘密。来之不易的工作流程,隐藏的黑客攻击和内部知识,是真实体验和分离伟大的东西的标志网页设计培训来自好。

在这里,我们设法说服一些网络上最繁忙的开发者和设计师分享他们最严密保护的技巧和提示。这是一个很好的集合。

拥有专业知识,您将发现众所周知的工具的秘密功能,设计行业嗡嗡作响的测试服务以及简化多平台页面设计的CSS技巧。因此,无论您是在线设计的初学者还是网络资深人士,您都必须在这里发现一两个改变您工作方式的提示。

更快的编码

01.用于浏览器重新加载的CodeKit

Web design secrets: CodeKit

CodeKit使您可以立即查看浏览器中的更改,而无需刷新

“如果你在Mac上,那么CodeKit是必须的,“Keir Whitaker说,他是联合创始人Viewport Industries。 “浏览器重新加载功能值得花费很少的成本。很难刷新浏览器以使更改生效的日子早已不复存在。”

02.应用全球变化

这是来自音乐家,制作人和网络开发者的编码提示Elliott Fienberg这可以帮助您在设计工作的早期阶段加快速度。使用通配符CSS规则 - 使用星号作为选择器 - 您可以将更改全局应用于整个页面。例如,要将页面上的所有字体更改为sans-serif,您只需要:* {font-family:arial,helvetica,sans-serif;}

在您完成设计过程中,这是一个很棒的设计师诀窍。当然,将它留在你的实时代码中并不是一个好主意,所以要小心谨慎地使用这个技巧!

03.设置花哨的轮廓

在“简单的天才行为”文件夹中提交此文件 - 克里斯托弗墨菲的一个提示Web Standardistas这使得跨平台设计变得如此简单。 “在处理媒体查询时,请用鲜艳的颜色设置轮廓,”墨菲说。 “例如:{outline:10px solid green / red / yellow / blue;}。这使您可以立即查看正在应用于您当前正在查看的内容的确切规则。“

04.检查你的人物数量

“每行45-75个字符通常被认为是安全的舒适阅读,”Trent Walton,创始人兼设计师说Paravel。 “有一个快速的技巧可以确保您的响应或流畅的设计支持这一点。在页面上放置一行虚拟文本,字符45处带星号,字符75处带星号。现在测试站点以确保它在这些参数中调整大小。 “

05.使用FitVids进行视频嵌入

HTML5简化了视频嵌入,但设计人员仍有两个问题。第一个是响应地调整视频大小,第二个是在不支持HTML5嵌入时确保调整大小适度降低Flash。输入FitVids,一个jQuery插件,为您处理所有这些。

处理图像

06. Smushit减少图像尺寸

Web design secrets: Smushit

Smushit使用优化技术从图像文件中删除不必要的字节

具有高度优化图像的网站加载速度更快,并且可以在更多设“SmushIt是一个减少图像文件大小的绝佳选择,“网络开发人员和微软宣传者说马丁比比,我们同意。你可能还想给Trent Walton的最爱ImageOptim一试。

07.将图像导出为8位PNG

Martin Beeby提出了处理PNG图像文件的老派建议。 “如果您将图像从Photoshop导出到PNG,并且它不需要是透明的,请尝试将其导出为8位PNG,”他解释说。 “在大多数情况下,图像质量不会受到影响,但会大幅缩小文件大小。”

08. PNGQuant用于图像转换

如果您想保持透明度并最小化文件大小,那么有一项服务可以提供帮助。PNGQuant可以将24 / 32bit PNG转换为8bit PNGS并仍然保持透明度。很喜欢你。

布局

09.使用GuideGuide

Web design secrets: GuideGuide

GuideGuide是Photoshop的列,行和中点面板

“最好的网站是专为网格设计的,”数字营销机构总监Rhys Little说即插即用。不过,每次在Photoshop中设置网格都会很乏味。他建议指南指南:“它使这个过程变得轻而易举,为您节省了大量时间来创建自定义网格。”

10.使用12列网格

来自Rhys Little的另一个提示:“通常情况下,使用一个可以被2,3和4整除的列的网格是一个好主意。因此,12列网格是最常用和最通用的网格之一。”查看960grid为更多适合网页设计的网格模板,适用于大量应用。

11.寻找色彩灵感

我们已经是Adobe Kuler的粉丝; Martin Beeby发现了一种我们没有想到的用途:“我是色盲的,所以当我把调色板放在一起进行一个项目时,我总能找到Kuler,”他解释道。他还建议色彩爱好者- 一个创意社区,成员分享配色方案,设计和想法。

网络排版

12.Typpecast印刷调色板

Typecast helps you build up a typographic palette quickly

Typecast可帮助您快速构建印刷调色板

类型转换,由贝尔法斯特设计机构的才华横溢的团队制作的应用程序面前,使设计印刷丰富的网站变得轻而易举。 “它可以让你快速建立和比较印刷调色板,”克里斯托弗墨菲兴奋地说。

13.将Typecast与Google字体一起使用

Monotype最近与谷歌联手推出新款,免费公开版的Typecast可以通过访问谷歌字体。它允许您选择Google Fonts网站上的任何字体,然后点击Typecast应用程序的链接。

从那里,您可以在任何长度的文本上使用该字体,并使用各种类型控件来通过字体大小,重量和行间距等调整来构建清晰,可读的类型系统。您的工作可以导出为生产就绪的HTML和CSS,或PNG文件,与他人共享或与comps合并。

14.字体Squirrel免费的网络字体

免费的网络字体已经成熟。同字体松鼠Google Web字体和CSS3的@ Font-face属性一样,没有必要忍受上一代网页设计师如此挣扎的排版问题。这是我们最好的一些免费的网络字体周围。

规划完美的网站

15使用Dropbox进行版本控制

Web design secrets: Dropbox Pro

Dropbox Pro可用作简单的版本控制系统

凯尔惠特克建议使用Dropbox Pro作为一个简单的版本控制系统。除了拥有100GB的存储空间外,您还可以在30天内对文件进行版本控制。惠特克说:“绰绰有余地帮助你解决那些'意外'删除问题。”

慢下来

视觉创意人员习惯先制作素描本。 Aidan Martin,高级设计师异化数字,说我们都需要放慢速度。 “不要从设计开始:采用基于场景的方法,”艾丹说。 “坚定地建立用户的目标,绘制他们的旅程,然后围绕这个建立设计。”

17.将您的网站放在便利贴上

Elliott Fienberg问道,你的设计理念是否符合便利贴吗? “我喜欢做的一个练习是将你的核心内容写在一张小纸上,就像便利贴一样,”他说。 “这将帮助你弄清楚什么是真正重要的,什么可以省略。这些小纸片模拟了目前大多数用户的注意力。”

18.规划用户流程

想知道如何处理其余的Post-it? “你可以通过计算一系列便利贴上的用户流程来扩展这个练习,”Elliott Fienberg补充道。 “我保证你的项目将更加专注。”当然还有其他便签,包括虚拟关于Windows的粘滞便笺在OS X上粘贴

Photoshop工作流程

19.明智地命名您的图层

Web design secrets: Photoshop layers

在命名Photoshop图层时尽可能具有描述性

Rhys Little提供了一些关于分享的提示Photoshop中团队内的布局。他的第一个建议是:“在命名Photoshop图层时尽可能具有描述性。在创建新图层时需要一秒钟,以便为其提供一个其他人能够理解的简单名称。这将节省数小时的法医工作。 “

20. Bin备用层

Rhys Little补充说,在Photoshop设计中丢掉任何额外的图层。 “如果你想保存那些额外的图层,以防万一'那么只需要存档一个你要保存的图层的版本,”他说。您的主文件将仅包含开发人员和其他设计人员需要访问的层,从而最大限度地减少混淆。

21.标记文件夹

“确保你创建一个包含项目中使用的所有字体,图像,徽标等的ASSETS文件夹,”Rhys Little继续说道。 “并确保相应地标记这些单独的文件夹。”

22.保持名称一致

Rhys Little还建议您维护一致的命名方案,其中当前站点设计文件始终具有相同的名称,而不是逐步命名文件。然后应将旧文件放到存档文件夹中。例如:
ARCHIVE
WEBSITE.PSD

23.将一切保存到服务器

“请记住将您的工作保存到服务器上,”Rhys Little补充道。即使你花了一个下午来调整文件; “如果您正在共享文件,您需要确保即使您不是,也可以随时使用您最近的作品。”

让客户满意

24.使用Pinterest作为情绪板

Web design secrets: Pinterest

Pinterest是与客户开始合作情绪板的好方法

虽然我们在谈论让客户站在你这边,但我们都知道客户喜欢Moodboards。它们是快速收集元素并为客户提供线索的好方法 - 甚至让他们参与初始设计过程。入门最简单的方法?创建一个共享板Pinterest的并邀请您的客户解决。

25.从一开始就让客户参与进来

“让客户尽可能早地参与整个设计过程,”Aidan Martin说。 “永远记住,他们最了解自己的业务,只有将这些知识与自己的知识相结合,才能开发出真正成功的数字解决方案。”

26.专注于原型设计

使用原型设计工具尽快在客户面前获取设计的早期版本。这可以像Fireworks原型一样简单,也可以像制作的功能线框一样复杂Balsamiq工作室。 “在使用Photoshop之前让那些人签字,这将使你的工作变得更加容易,”自由网页设计师敦促说加文·艾略特

提升你的职业生涯

27.寻求帮助

Web design secrets: Trello

使用免费的协作工具(如Trello)在遇到困难时寻求帮助

如果一份工作需要你尚未掌握的高级技能,不要害怕寻求帮助。使用免费的协作工具TrelloRedbooth你甚至不需要在同一个国家!

28.在停工期间处理您的投资组合

“不要等待其他人要求你尝试新事物或挑战你,”开发商Ben Howdle说Wapple.net。 “在工作之间的停工期间,当你完成投球时,你应该总是创造新的投资组合工作。越有创造力,越好。”

29.对新挑战说“是”

Ben Howdle还有另一个保持工作流程的策略:即使它在你的舒适区之外,也要工作。 “接受挑战你的工作可以帮助你发展和扩展你的技能,而不是任何教程。而截止日期是在工作中学习的强大动力。”

30.从Dribbble获取反馈

还记得批评会在大学时有多大帮助吗? “检查像这样的地方Dribbble对于灵感,“敦促Ben Howdle。这是一个设计师的社交网络,在那里你可以分享正在进行的工作并得到同行的评论。有时需要另一位设计师告诉你哪里出错了 - 或者说对。

话:卡尔霍奇

像这样?阅读这些!

你对网页设计的成功有秘密吗?不要自私,在下面的评论中与他人分享!

话题

CSS


翻译字数超限