1404994268
54376659@qq.com

设计它来构建它:在为Web设计时需要考虑什么

对我而言,Photoshop越来越成为一个原型或蓝色印刷工具:它基本上只是一个创作的画布。当谈到网站的实际构建时,我真正从模型中取得的东西是我无法用CSS创建的东西,剩下的只是一个地图来指导我。

好的,所以我开始使用CSS来设计和创建浏览器中的所有东西 - 我不记得上次我把Photoshop布局和图层拼凑成了我的精灵。对我而言,Photoshop越来越成为一个原型或蓝色印刷工具:它基本上只是一个创作的画布。当谈到网站的实际构建时,我真正从模型中取得的东西是我无法用CSS创建的东西,剩下的只是一个地图来指导我。

多年以来,使用Photoshop,Fireworks,Illustrator或任何其他图形应用程序设计网站的过程就是模拟它,确保一切看起来完美,然后将它切成片并放回到一起 - 就像拼图一样。CSS已经基本上使这个过程过时了,你可以通过CSS来完成这么多事情,你以前只能在Photoshop中完成。而使用CSS3还有更多的可能。

由于在浏览器中的设计现在更加可行,所以在设计逼真的模型时要考虑一些事情,这将使网站的构建更加快捷和简单。

只是一个侧面说明,当我在下面讨论这些考虑事项时,我已经添加了一些很好的例子,即使用最少的Photoshop(甚至是任何)Photoshop插件来构建的实时网站。这些例子可能不直接适用于主题,而是整个文章。

网络上有数不胜数的真正伟大的字体,我们都想用我们发现的一些惊人的字体来产生影响或声明。但是网页设计的一部分是为用户设计的,并确保页面上的所有印刷品都是可读的和可访问的。在设计之前,请考虑Web上的字体是安全的还是可行的,并尽量避免通过HTML / CSS / JS难以重建的字体。

按钮可能是开发者存在的祸根。设计可以使用CSS或Javascript创建的按钮是一个好主意。这有很多好处:活动文本,自适应按钮,没有图像加载,没有更多的按钮精灵,没有更多的大小特定的背景图像混乱。无图像按钮可以节省大量的时间在开发,所以在Photoshop中创建一个超级奇妙的按钮之前,考虑是否它的超幻想设计可以在CSS中实现,如果是的话,如果不是这样,如果没有,给你的开发人员几个大披萨和红牛一案。

有了这么多不同尺寸的显示器,从320×480到2560×1440,你需要考虑你将如何弄清楚你的设计将以多种不同的尺寸呈现。响应式设计是一个棘手的野兽,所以为了简化设计过程,在开始之前问自己这些问题:

并不是所有的网站都会用于较小的移动设备,但考虑网站的标准1024×720高达2560×1440是一个好主意,你甚至可能需要考虑如何看待你的设计水平和垂直。但最重要的是要记住,设计需要是可行的网络 - 避免水平滚动条!

没有更多的切片,没有更多的拼图。使用任何标准网站,您唯一需要的真实图像是徽标图像,也许是纹理和任何内嵌内容图像的重复背景图像。在大多数情况下,现在可以使用CSS创建任何曾经需要图像切片的东西。CSS渐变,圆角,转换和无数其他CSS选择器可用于重新创建这些类型的图像。

正如你在Photoshop中创建一个杰作,只要问自己是否所有的元素都可以用CSS创建。CSS是一个非常强大的工具,令人惊讶的是,大多数在Photoshop中创建的设计元素都可以很容易地使用它来复制。在开始剪切图片,按钮,规则或者其他设计之前,先试着弄清楚是否可以先用CSS创建它们。这可以使发展从长远来看变得更容易和更有活力。您的设计中的某些元素可能永远无法用CSS重新创建,因此请尽量减少这些元素。

不要设计一些超大,复杂的背景图像,需要在四十个不同的部分切片,以便能够快速加载。不要设计一个1280像素宽的网站。不要设计一个网站不可行的网站。熟悉显示尺寸,图像限制,文件限制以及网络的一般限制。

网络是一个非常开放和灵活的地方,你可以创建任何你想要的东西,但是在你开始设计之前,你需要考虑一些自然的限制。只要确保你没有尝试去创造一些无法建立的东西。如果你不知道什么是开发的限制,那么每隔一段时间编写一个网站是个好主意,这样你就可以熟悉网络上可以做什么和不可以做什么。我个人认为,每个网页设计师都应该能够编写他们设计的HTML / CSS 。

在为网页设计时需要考虑的一件事是你可以随时更改它。网页是非常容易更新,你基本上只是一个上传从链接任何关于你的设计。不要花太多时间坐在Photoshop前面试图完善设计。把网络当作一个可编辑的画布,它不像打印设计那样僵硬,你必须确保当你把它发送到打印机时,所有东西都是像素完美的。

底线是你正在为网络设计。尽管我们认为印刷设计和网页设计是一样的 - 事实并非如此。它有自己的一套问题和自己的限制,所以最好熟悉它们,并熟悉通过HTML / CSS / Javascript代码可以完成什么。而只是为了笑笑,尝试设计一个建设一个网站,而不用打开Photoshop,我想你会惊讶于什么可以完成时,只在浏览器设计。

Copyright © 2008-2020 南京米琪网络科技有限公司 版权所有
苏ICP备0148736