2

我感兴趣的是人们对利弊的看法，或者对在浏览器中设计网站以及远离 Photoshop、Fireworks 等的彻头彻尾的“地狱不”的看法。

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

例如（我使用 12 列的 960px 网格）：

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

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

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

你怎么看？

4

11 回答 11

17

好吧，使用浏览器工作并不是世界上最糟糕的事情，但有几个“地狱不”：

1)不要使用 IE 设计您的应用程序。使用 Chrome 或 FireFox。IE 的不合规行为可能会让您误以为您的 CSS 是有效的，而实际上并非如此。您的 IE 主要用例是在 IE 中测试您的网站。

2）不要像您在示例中所做的那样，根据它们的显示方式命名您的类。

于 2009-01-11T12:45:35.737 回答
4

不！！

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

  1. 创新将受到影响：Steve 不在乎 CSS/HTML/whatnot 的限制。他可以自由地展示人类尚未见过的最令人印象深刻的网站。普通程序员 Joe 的职责是扩展 CSS/HTML/whatnot 的限制，及时填入批准的设计，并看到它被一些愚蠢的浏览器撕成碎片，而这些浏览器恰好在截止日期之前拥有相当大的市场份额。面对现实，写 CSS 感觉就像写汇编代码。甚至完成最基本的事情（流畅的多列布局？）是非常困难的，它会让你兴奋一段时间。
  2. Steve 的冷静因素将会减少：据我所知，没有一个开发人员使用 WYSIWYG 工具来生成 HTML/CSS，或者认为这是可以接受的。当您只需要一个文本编辑器时，您看起来就不那么酷了。当一位顾客看看史蒂夫的显示器，看到的是一堆文本而不是几个窗口、一百个有趣的小图标和半完成的彩色草稿时，他可能会想“我 7 岁的孙子也可以打字了。 ……”。
  3. Joe 比 Steve 有更多的限制：站点应该是可访问的，布局应该足够流畅以适应各种输出，与 javascript 配合得很好......如果 CSS/HTML 无论如何都会被重写，那么挣扎是没有意义的。

成为一名优秀的队友并立即启动 Photoshop。乔需要他的工作来支付他的账单。

于 2009-01-11T14:13:09.180 回答
3

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

在我看来，开发人员在不接触 Photoshop 的情况下制作静态线框是一件好事，因为该网站可以立即使用，并且不会浪费时间让事情看起来恰到好处。

程序员也没有太多的设计倾向——我喜欢把它留给那些知道阳光下每个 PS 命令的人:)

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

于 2009-01-11T12:45:25.330 回答
2

好吧，对于我这种设计无能的人来说，这是一张白板草图，然后直接进入 HTML 和 CSS。

我的网站仍然看起来很糟糕......

于 2009-01-11T12:47:04.453 回答
2

在我完成的最后几个站点中，我采用了两种方法。每次，直接用 HTML/CSS 设计的页面都少了很多工作，但网站的吸引力却要小得多。如果您想制作一个有吸引力的页面，请从 Photoshop 开始，否则您会经常在 CSS 中使用快捷方式。在 Photoshop 中可以更快地创建一个想法并且更加灵活，这将引导您尝试您的想法，并且您会想出一个视觉上更好的网站。

于 2009-01-11T14:21:06.993 回答
1

我从不在 Photoshop 中设计网站；我直接从物理草图到 HTML 和 CSS。我发现它更快，并且您最终不会丢弃您已经工作了几个小时的东西（Photoshop 文件）。

于 2009-01-11T12:48:20.503 回答
1

我选择继续使用线框并从纸张直接进入浏览器进行设计。当然，这是我的工作，它使我成为一个更有创意的设计师。

虽然我喜欢使用我自己的 CSS 库，但请查看Google Blueprint并查看网页设计师 Mark Boulton 的这篇文章。

于 2009-02-26T04:00:51.940 回答
0

一定不行！

  • 您正在重做“所有事物的表”错误，只是使用类而不是表。
  • 您正在将演示文稿（我在哪里放置）与内容混合。你的课程不告诉这是什么，他们告诉放在哪里。
  • 你的设计是固定尺寸的。它不会随着窗口大小而流动，因此它需要水平滚动或右侧的大空白区域。

但我不明白为什么有人提到 PhotoShop。它几乎是网页设计的最后一个工具，也许 Illustrator 是唯一一个更不适合这个的工具。

于 2009-01-11T15:42:27.393 回答
0

我发现，虽然物理草图可以让您开始正确的设计轨道，但您可以在 Adob​​e Illustrator 中制作更好看的布局（这比 Photoshop 更容易移动元素）。设计完成后，使用 Photoshop 将其切片。

于 2009-04-03T20:14:38.613 回答
0

要考虑的一种观点是您为谁设计。如果您正在为客户设计网站，那么在 Photoshop 中进行快速模型会很有帮助，这样他们就可以了解布局并在您的设计上签字。一旦客户同意设计，您就可以创建一个适合您模型中的元素的线框，然后您可以拼接需要直接从模型中获得实际图像的元素。

遵循此方法时，您必须考虑可用于实现模型的所有可用设计元素，并确保将它们以设计良好和语义的性质放在一起，而不仅仅是完成工作的东西。

于 2009-04-03T22:49:37.413 回答
0

指南针，特别是蓝图/语义，在您在浏览器中进行设计时有很大帮助。我还喜欢在不同的文件上保留布局和样式，这样我可以更轻松地处理我不喜欢的样式，同时将线框保留在一个地方。我还建议使用调色板并按字体比例组合，两者都很有用，并且使用 SASS 变量更容易实现。

于 2011-03-12T04:42:42.713 回答