免费获取策划方案多一份参考,总有益处

重庆网站设计

Website design

案例778

重庆网站设计

向他们展示你的资产——把设计交给开发人员的提示

来源:派臣科技|时间:2020-07-09|浏览:

你一直在做你最新的设计项目,客户已经批准了你精心创造的数字概念。现在是时候把这些设计变成现实了,你有一个开发人员排队去做那件事。

你的任务完成了,对吧?不完全是。你要确保你的开发人员有最好的开端,以便创建你想象的网站。

安排一次与开发人员面对面的会议,讨论项目的细节和目标,这将有助于调整您的期望,并使概念背后的意图更加清晰。很有可能他们会问你一些问题,要求你提供一些你还没有想到的东西!

这也不是一件一劳永逸的事情,随着项目的进展,开发人员会遇到一些问题或需求。选择一个可以轻松讨论的沟通渠道将极大地帮助你们。

注释你的概念

开发人员可能看起来像魔术师,他们给你的网站带来生活,但他们不是千里眼!在需要高级功能的地方注释你的概念,可以减少歧义,更有可能使你的酷,古怪的想法成为现实。如果这是一个特别不寻常的特性,您可能想要找到一个做类似事情的网站或代码沙箱的例子。

这是一个Figma的注释工具的例子,用来为开发者做注释。

Figma和Sketch都有注释功能,使注释更加简单,也允许多方注释。如果要处理pdf文件,还可以通过adobeacrobat使用注释工具。

指定基本知识

现代前端开发的基础是干巴巴的。有些人可能会争辩说,关于代码的思考是非常枯燥的,但是我们并不是在讨论这个问题——在这里,dry代表不要重复自己。大多数开发人员会从定义变量开始处理项目:什么颜色,字体大小,网格列…任何可以重用的东西!好的、一致的设计遵循同样的原则——尽管这是一个很难开始的习惯。

提示:如果在项目开始时就采用这种心态,那么定义变量总是会更容易!

颜色

制作一个样式指南,指定你在设计中使用的颜色。想想它们的逻辑应用,以帮助路标显示它们作为变量是如何工作的——例如,你在段落文本、超链接和背景中使用了什么颜色?您是否考虑过用颜色来传达状态信息,比如成功、警告和错误?

字体

你在你的项目中使用过哪些字体?你使用的字体大小是否一致?如果您还没有,可以考虑一个基于比例的类型规模—我喜欢使用ModularScale来帮助您。

基本的HTML元素

想想这些基本的html标签的通用样式:

按钮和链接呢?当鼠标悬停、聚焦(使用键盘上的tab键)或禁用时,它们应该做什么?

表单、字段和输入

表单字段应该是什么样子的?提交表单时是否需要进行验证检查?复选框和单选按钮怎么样?

你不可能完全覆盖所有的可能性——让你的开发人员使用一些常识来填补空白,并在他们有任何问题时向他们提供帮助。用John Maxwell和你阿姨家办公室墙上的贴纸的话来说,团队合作让梦想成真。

Favicons通常被认为是浏览器标签栏中出现在网站标题左侧的小图标。如今,你网站上的favicon的应用已经非常广泛了,出现在谷歌搜索结果和应用瓷砖中。还有额外的主题选项,比如可以定制谷歌Chrome Android浏览器栏的颜色。

使用像realfavicongenerator这样的生成器站点,可以让你在做决定时不那么痛苦,允许你上传所需的特定图形,为Windows Metro tiles和macOS Safari pins创建图标的轮廓,并将所有内容打包到易用的文件和代码中。

压缩你的照片

没有人希望在慢速连接或使用数据计划时加载20MB的图像——提前计划并缩小图像尺寸,使它们可以用于web的生产,这是有好处的。如果你担心图像压缩会损害你的图像质量,不用担心——在质量严重受损之前,你可以使用图像压缩。

首先降低图像分辨率——对于批处理作业,我使用Adobe Photoshop的图像处理器脚本将图像缩小到适合1920 x 1200像素。

另外,如果你在一个静态的项目中工作,将使用特定的图像只在特定的地方——你可以使用你的设计软件(几乎所有主流UI软件允许你做这个现在)出口你的图片在2 x支持设备与高像素密度大小。

我还将我的图像颜色配置文件转换为SRGB,以确保大多数现代显示类型的一致性(这是可选的)

然后,我将新缩小的图片以80%的质量在imageOptim上运行。一般情况下,我的目标是将我的图片压缩到300kb以下——如果有任何图片压缩后仍然明显超过这个目标,我将再次以70%的质量运行这些图片(尽管我不推荐低于这个水平)。

别忘了你也可以为png做这个!在imageOptim中启用PNGCrush可以让你显著减少png的大小…不过要准备好,这需要一段时间。

使您的向量svg易于使用

如果您的设计包含使用vector软件创建的图形或插图,则可以在web上作为SVG文件使用。通常,这些文件会比jpg或png小得多。您可以导出图形在大多数(如果不是所有)矢量软件在这种格式。

您还可以选择使用imageOptim或SVGOMG压缩SVG代码而不牺牲质量。您的开发人员可能已经使用了一个脚本,该脚本在处理用于生产的站点时自动执行此操作,因此有必要提前询问一下。

检查你的执照

如果你使用的是高级字体,确保你已经购买了webfont许可证,这样你就可以把正确的文件交给开发者。我建议早做而不是晚做——尽管不经常,偶尔web版本的字体会有与桌面版本略有不同的边框,这让开发人员在以后的工作中非常痛苦。

如果你一直在使用库存照片的样本(或者如果你一直在疯狂地从谷歌图片中找到任何你能找到的),确保在你上线之前一切都是干净的。确保你购买了授权的照片,如果你想使用某些照片需要署名,让开发者知道这一点。

留言

返回顶部

君
重庆网站建设重庆网站设计向他们展示你的资产——把设计交给开发人员的提示