#1 楼
我的过程通常看起来像这样：1。特征。用铅笔和纸布置将构成站点的独特功能/页面。这引发了广泛的中风问题-您是否正在为妈妈建立一个简单的信息和图形站点？小型企业的电子商务解决方案？摄影师朋友的博客/画廊？您的答案将决定您需要遵循的很多构建路径。这个阶段还可能涉及与客户或驾驶船的人（如果不是您）进行大量讨论。
2。线框。布置好所有必要的功能后，制作线框。可以在纸上使用，也可以使用Fireworks之类的工具来构建非常简单的导航功能。如果您正在使用wordpress等CMS，如何处理您的静态内容？这也可能是开始考虑文件结构的好时机。如果您的项目需要自定义数据库，那么现在也是时候开始计划其设计和实现了。这是至关重要的阶段，因为如果发生错误或发生项目蠕变，智能计划将节省大量回溯和返工。
3。技术。在计划阶段相对完成后，请选择您的技术。您在做纯HTML吗？在灯的环境下的PHP CMS？ .net MVC店面？这些问题可能会影响所需的托管环境以及运行该设备的成本。如果您要进行店面销售，这里的安全性是首要考虑因素（例如，SSL和PCI合规性）。确保您已经建立了良好的测试环境（本地主机或其他方式）。
4.设计/布局。确定要素列表和线框后，就可以开始考虑网站的设计了。显然，了解要填充哪些内容是先决条件。我喜欢在Photoshop中工作，并大量使用文件夹作为标记结构的类似物。我甚至用预期的标记和CSS标识符命名它们。尽管在您变得非常详细之前做一些自由形式的绘图可能是明智的。我倾向于使用将从中提取元素的“布局”文件，并放入“过程”文件中，这些文件是我用来输出生产图形的文件。
5。标记/ CSS。一旦完成了非常干净的设计（考虑到进入生产模式，它肯定会弯曲一点），就可以开始编写标记。我通常希望有一个标准的布局来容纳网站中的所有内容。所以-清洁和灵活应该是这里的重点。在开始编写CSS之前，布局标记应该相当完整，但是我发现它们在相互交流方面起到了很大作用。在此阶段，您还将做很多SEO优化（正确命名图像或A标签，元信息，文档类型等。）要彻底。
5.1主题管理。如果您使用的是CMS，并且您的设计将用作自定义主题，请找到一些教程，了解如何针对您的预期应用程序精确地做到这一点。坦率地说，这可能令人生畏；）在将其分割为主题元素之前，我将始终使用相当完整的CSS构建静态标记布局。
6.行为。当您的标记和CSS看起来相当完整，并且主题就位时，您就可以开始开发行为（翻转等）。不引人注意的javascript很重要，除非您正在使用绝对需要它的功能（Ajax繁多画廊或数据驱动的Flash内容）。一般规则是-如果有人在关闭javascript的情况下访问您的网站，他们会看到什么？有时，我会删除静态元素，然后在运行时将其替换为交互式版本。
7。内容。除非设计依赖于内容（例如，图像有时是内容）=我通常使用占位符文本/图形，直到设计和行为被很好地确立为止。避免重复工作。如果要填写产品数据，则需要仔细的错误检查和测试。
那时，似乎总是有一段时间需要重新加工，固定和抛光。但是，从本质上讲，是时候让它变得生动起来了。那就去吃点小吃吧。我想那不只是“如何开始”。但是无论如何，它也许会有所帮助。祝你好运！
评论
最后，一个漂亮的答案
–John Conde♦
2011年5月16日23:39
说得好... +1
–杰里米
2011年5月18日在13:59
#2 楼
设计网站时，我首先要问为什么？我的工作流程的第一部分是问为什么？如果我正在与客户合作，则需要确保他们对他们希望网站完成的任务有明确的定义。
1。为什么会出现问题。
告诉我一些有关您自己以及为什么这样做的信息。
谁是客户？他们的具体需求/痛苦是什么？请向我提供-不同类型客户的一些具体示例，他们的需求，网站将为他们做些什么。
告诉我有关业务的信息。您到底要做什么？
是什么让您比下一个男人更好？
如果您正在寻找服务的企业，
如果您为自己建立网站，那么您最好已经知道这些答案是什么。
如果您基于以上问题的答案，这些人是认真的，实际上有一个好主意。然后继续（请记住，您还没有得到报酬，但是如果您希望他们雇用您，最好把他们的袜子踢开。）
2。研究。
花一些时间研究客户及其业务。找出他们过去的成功以及他们遇到的任何问题。您是他们雇用的第三个开发商吗？其他两个家伙怎么了？
找出客户的需求。您将为谁建立这个网站。该客户是60岁的退休老兵还是16岁的满脸imple子的孩子，他整天在Facebook上扮演Farmville。
找出竞争对手是谁。他们可能甚至不知道。对5到10个竞争对手进行竞争分析，找出我们需要加入谁才能成为奴隶。这是您需要知道关键字目标是什么的阶段。以后再说，您已经失败了。
2b提案
让他们了解您的业务，并提出网站协议/建议，并在他们同意后准备好合同。获取已签署的合同和50％的订金，然后继续执行步骤3。
3。使命-有一个
这里有一个共同的主题：在所有情况下，使命都不是关于产品本身。任务是
“正当”的事情，如果您真的很认真地要求，
产品就变得绝对令人惊叹，
让您做到这一点。如果您
更愿意：这些任务都是我们的答案，为什么我们只添加该新功能？而不是我们要添加什么新功能？
-本杰明·波拉克（Benjamin Pollack）。
需要建立时间表，以便每个人都有自己的期望。
4。工作流程
这是大多数人的起点，因此我将解释我的流程，但您必须决定哪种工作流程最适合您的情况，团队，客户等。
对我来说，内容至上。我确保在编写任何代码之前，客户端已完成大部分工作。我们不是在讨论最终的草稿编辑，而是或多或少地将要在页面上显示的文字。如果涉及到营销团队，则可能需要一段时间。
您应该已经对网站的外观有所了解。您应该有内容。现在，您需要研究布局和一般设计原则，以实现您在第3步中提出的目标。
我讨厌线框，但了解它们是必需的。仅仅因为您知道该网站的外观，您的客户可能就不知道。这是为了保护您和客户。当每个人都高兴的时候，让他们签字说“这就是我们要付给您的东西”。
前端开发和用户界面-浏览器中的HTML，CSS和设计，这是Andy Clarke的精干技术。当我知道可以演示一个更逼真的更快的模型时，也让我在开发上处于领先地位，我已经在Photoshop中浪费了很多时间。
4b。代码库
您终于可以找到一些乐趣。为了让您和客户受益，请在开始之前设置版本控制。由于您正在执行版本控制，因此您应该继续进行并设置错误跟踪。
4c。复制编辑
还记得我们拥有的内容吗？现在是必须对其进行复制编辑的时候。我很烂，所以我尝试雇用其他人或确保很多人阅读它。检查并确保我们在步骤2中讨论的那些关键字针对SEO进行了优化。如果我们的内容很棒并且实际上是关于这些关键词的，那应该自然而然。
5。 Beta和UI测试
让真正呼吸的人坐在您的站点前，并开始使用它。我想请妈妈有时打电话给我，并想知道为什么她的打印机不能打印（妈妈，必须先插入）。这些用户需要能够浏览您的网站，除非当然使用的是上面的16岁的面对小孩子的例子。
6。维护和SEO计划
确保每个人都知道谁负责对抗服务器上的野兽。
一个月后，请回顾一下我们所做的竞争分析，并将我们的站点与所分析的站点进行比较。使用这些数据来创建您的SEO计划，不，我不是在谈论蛇油SEO，而是在确保您仍在生成相关内容，网站自然地链接到您（因为您是如此出色）和标题标签匹配正文。 SEO是一个漫长的过程，除非您的Stack Overflow和拥有1,410万用户的军队为您生成高质量的内容。
质量内容和您在“有连字号的网站”上找到的内容之间存在很大差异，我将不会链接它们。 （以防止无汁果汁均匀滴在上面。）
7。启动
一切正常？完成令人敬畏的建设任务吗？制定并执行启动计划。
如果您正确地执行了步骤1-6中的所有步骤，则启动起来会轻而易举，不会有麻烦。准备好并纠正错误。
发送发票，冲洗并重复。
评论
好答案。我唯一的问题可能是在工作流程区域：您的工作流程只能被认为是“良好实践”，如果您行为良好并且干净利落，这很好。正如OP所表明的那样，如果您只是刚刚起步，那么使用线框和透彻的模型之类的东西可能是明智的。换句话说，我认为仅凭标记进行设计会很尴尬，并且会限制仍然是初学者的人。无论如何-我很欣赏专注于评估环境并真正超越客户期望的目标。干杯!
– Bosworth99
2011年5月25日下午14:48
好点，我同意需要线框。缺陷在于，对于某些客户而言，很难理解它仅代表一个非常基本的结构。关键是保持它们原始，因此不引入设计，颜色或版式，因为那时不该谈论这些内容。
– Chris_O
2011年5月26日下午6:41
我仍然认为在任何情况下，在浏览器中进行设计都是最佳实践。安迪·克拉克（Andy Clark）在他的《墙来翻滚》演讲中很好地论证了此案。
– Chris_O
2011年5月26日下午6:44
+1关于客户和线框的内容...有趣的演讲。我完全同意自适应设计，而不是“完美的像素”-简单的浏览器会推动CSS的发展，没关系-关键是要提供灵活性。话虽这么说，也许只是它的旧习惯，但我仍然喜欢“至少”在pshop中粗略设计-
– Bosworth99
2011年5月27日在15:07
#3 楼
我想从<!DOCTYPE html>开始，但是……还是很重要……首先要解决的问题：找出客户想要什么。绘制基本布局的草图，提出配色方案等。
进行基本导航和布局模拟（静态），并与客户合作对其进行优化。
实际生产。获得CMS和/或静态内容。再次与客户协商以确保这是他们想要的东西，并且他们可以处理CMS / CMS可以满足他们的需求。
重复并重复3直到客户满意。
???？
利润！
#4 楼
首先，我将在开始编码之前绘制基本布局并在纸上进行设计。完成纸上的基础设计后，很容易以模块化方式对其进行编码。Offcoursephp＆css将是最好的方法自定义它。
#5 楼
我总是喜欢从使用某种photoshop软件制作模型开始，以便它可以合并您网站中的所有图像。#6 楼
大多数答案已经深入了，让我补充说，您应该使用一些框架或模板，以免浪费时间重写基础知识。那里有很多PHP框架（Kohana是我个人最喜欢的），或者很多人使用Wordpress作为基础。
也可以使用CSS框架，这里面还有很多，最受欢迎的之一是960网格系统
#7 楼
设计网站时，通常如何开始？像您一样，几年前我发现有必要将自己推销为Web开发人员/设计师。我发现自己的出发点是要自己理解，我想为访问我的网站的访问者提供哪些信息，图像和消息？以及我希望用户在访问我的网站时完成/做的事情。
一旦我了解了设计过程，就更加清楚了。它使我可以写下主页和随后的页面中传达这些项目的元素。例如，我非常希望我的简历易于查找和下载。因此，在设计网站时，我要确保有关我的简历的信息以及可以在何处找到的信息。
故事的寓意是相关的。您网站上的所有内容均应达到目的，否则只会引起不必要的干扰。
评论
制作社区Wiki，因为没有正确的答案