css title提示 - 在浏览器中设计网站(gasp!)




6 Answers

你是说你先在浏览器中(通过HTML / CSS)制作页面的线框,然后应用设计? 这就是我所做的(37Signals也遵循这个想法 )。

在我看来,对于开发人员而言,如果不使用Photoshop就可以制作静态线框,因为该网站是即时可用的,并且不会浪费时间让事情看起来恰到好处。

另外,对于程序员来说,这并不是一件容易的事情 - 我喜欢把它们留给那些在阳光下知道每个PS命令的人:)

我也使用YUI Grids CSS框架来快速创建布局。

html标签 meta信息

我感兴趣的是人们对利弊的看法,或者是在浏览器的网站设计上“彻头彻尾”,离开Photoshop,Fireworks等。

我一直在为我的网站设计一个重新启动,并在浏览器中尝试,我不回头。

例如(我使用一个960px的12列网格):

<div id="news_section" class="floatleft columntwo spanfourcolumns">
   …content
</div>

<div id="recent_work" class="floatleft columnfour spansevencolumns">
   …content
</div>

设计不仅再次变得有趣,而且使用网格,垂直节奏,甚至是黄金比例,从未如此简单。 更何况,它完全消除了设计和静态编码之间的差距。

你怎么看?




别!!

如果iDesign Steve在浏览器中直接学习设计,

  1. 创新将会受到影响:Steve不关心CSS / HTML / whatnot的限制。 他可以自由地展示人类迄今为止最令人印象深刻的遗址。 一般的程序员Joe有义务把CSS / HTML /限制在什么时间,以便在时间到期之前看到它被一些愚蠢的浏览器所占据,而这些浏览器正好具有很大的市场份额。 面对它,写CSS感觉就像写汇编代码一样。 即使是最基本的东西(流体多列布局任何人?)都是可笑的,而且会让你高一阵子。
  2. 史蒂夫的冷静因素将会消失:我所知道的没有一个开发者使用WYSIWYG工具来生成HTML / CSS,或者认为这是可以接受的。 当你所需要的只是一个文本编辑器,你看起来并不酷。 当一个顾客看了看史蒂夫的监视器,看到一堆文字而不是几个窗口,一百个有趣的图标和一半的五颜六色的草稿,他不妨想一想:“我7岁的孙子也可以打字。 ..“。
  3. 乔还有比史蒂夫更多的约束:网站应该是可访问的,布局应该足够流畅,以适应各种输出,用JavaScript播放好...如果CSS / HTML将被重写,没有任何争议。

成为一名优秀的队友,现在开始启动Photoshop。 乔需要他的工作来支付账单。




在过去的几个网站中,我采取了两种方法。 每一次,直接在HTML / CSS中设计的页面都花费了很多工作,但是却是一个不太吸引人的网站。 如果你关心制作一个有吸引力的页面,从Photoshop开始,否则你会经常在你的CSS快捷方式。 一个想法可以创建更快,在Photoshop中更灵活,这将导致你实验你的想法,你会想出一个视觉上更好的网站。




我选择了使用线框和从纸张设计到浏览器。 当然,这是我的作品,使我成为一个更有创意的设计师。

尽管我喜欢使用自己的CSS库,但请看一下Google Blueprint ,并通过网页设计师Mark Boulton查看这篇文章




我发现,虽然物理素描可以让你开始在一个设计的正确轨道上,你可以做出更好的Adobe Illustrator中的布局(这比Photoshop更容易移动元素)。 一旦你的设计完成,使用Photoshop切片。




指南针,特别是蓝图/语义,在浏览器中进行设计时会有很大帮助。 我也喜欢在不同的文件上保留布局和样式,所以我可以在保持线框在一个位置的同时,更轻松地处理我不喜欢的样式。 我也建议使用彩色托盘和字体规模组成,使用SASS变量都很有用,也更容易实现。




Related