设计网站的步骤是什么？

致电所有网页设计师：)

我开始为家乡的一家小型企业建立网站，这将是我的第一个适当的项目。我过去曾做过很多休闲活动。我精通HTML和CSS。我已经了解了客户的要求以及他在网站上的要求等。在确定要求之后，我坚持应遵循的步骤。我已经在网上搜索过，但找不到任何与我的问题相关的信息，因为该信息已过时。

我的问题是：

2014年的网页设计师工作流程是什么？（因为一切变化太快了）我是否要创建网站的线框，然后在photoshop中进行设计，然后对设计进行编码？

我只想知道“设计”流程的工作原理，例如我需要采取哪些步骤才能制作网站。

提前致谢。

发现与范围

与客户坐下来确定目标，目的和需求。您应该起草目标站点的报价，并讨论周转时间。确保写了任何您无法提供的东西。您需要弄清楚网站的结构。例如响应式，仅平板电脑和手机，仅台式机，仅台式机和平板电脑。您需要确定设计是否为多阶段设计目标，例如客户端将要发布桌面版本，并在以后需要完整的移动应用程序。

内容映射

希望您已获得该站点所需的所有内容。您应该映射站点及其功能。确定用于将来修改的可伸缩性，确定用于CMS或应用程序的代码的结构。

例：

小样

在您的“树”或“地图”获得客户的批准后，我将使用手绘或样机工具。如果您在右上角进行搜索，则会有很多与此主题相关的问题

例：

风格瓷砖

在Photoshop中进行网页设计的设计无法达到当今时代的目的。我不认识许多人仍在使用Photoshop，因为花很多时间来制作漂亮的按钮可能花了相同的时间并在浏览器中进行了编码。如果必须根据特殊要求使用应用程序，则将其部署在Illustrator或InDesign中。我建议迁移以设计样式图块，例如：

出于图块的目的，您不会将设计交给客户，而是将自己置于“这看起来不像您给我的设计”的角落。另外，如果您正在计划一个网站，则没有理由花时间在Photoshop中进行布局以提高响应速度，因为您将花费大量时间来设计某些设备等。如果您必须设计整个网站，我会如上所述，考虑将Illustrator的SVG以及与Photoshop相比能够为您的网站导出元素的功能。在某种程度上，您甚至可以使用InDesign来格式化内容，但是我只会使用Photoshop进行图像处理，如果要这样做，则可能会与ImageMagick一起使用。我将“样式图块”的级别提高到了一个新的水平，并将其编码为一个页面，因此我淘汰了我的大师的初步任务.css 文件。

线框

如果您没有注意到，我宁愿在浏览器中部署设计。现在，这些天我可以使用Illustrator绘制网站的草图或网站的模型，但是我通常会部署默认模板.css文件，该模板文件的灰度不超过6种颜色，并且我为网站的结构编写了所有代码，因为大多数人无法获得对设计的了解，并希望有所作为。有时我会继续在PHP中执行此操作，因为它更易于部署CMS。然后，我将以黑白方式使用客户端的PROVIDED字体开发一个简单的子域，以便呈现整个站点的功能，并且他们可以通过它。由于我没有花时间添加所有内容或颜色（因为我使用了虚拟文字参考：“网站的Lorem Ipsum（虚拟文字）的替代品”）如果我不喜欢基于设备的某个元素，那么我可以轻松地对其进行任何修改。

着色和内容

一旦客户端签署了网站的结构和功能，我将编写其余的CSS并添加所需的动画或JavaScript细节。由于我已经批准了样式磁贴，并且如果开发正确，就可以简单地将CSS复制过来并进行设置。

调试，调试，调试

客户端注销之前的最后一步是调试，并确保我的代码可靠无误。如果一切正确，我应该顺利发布。此步骤还包括服务测试和负载测试（如果您已为此定价和提供的话）。就个人而言，我坚信任何设计师都应该意识到他们正在开发的产品，就像您希望在进行印刷设计时所做的一样。如果客户无法负担得起真正的托管服务提供商，则可能会限制网站的性能，他们只会说这是您的错，您做错了什么。

训练

我通常会在CMS网站上参加简短/报价培训。一些用户不知道他们在做什么，因此我将为下午的竞标出价一个小时，以解决其他问题，以确保能够复习所有内容或确保他们将我的设计用于最大的功能。

由于您提出了一个基本问题，因此一些其他主题可能会有所帮助：

• 线框和模型之间有什么区别？
• 如何向客户展示网页设计模型？
• 网页设计中有哪些好的“模拟”实践？

我还是一名刚开始从事该领域工作的网页设计师。不过，我现在已经完成了一些项目。对我来说，我的工作流程如下：

1. 初始设计和开发会议
   这是我收集所有相关信息的时间，包括预期的完成日期，列出客户需要的项目清单等。
   
2. PhotoShop样机
   目前，我发现一个或两个或三个适合我的客户的设计，并使用其品牌，颜色，样式等在Photoshop中制作样机。我将这些样机发送出去，并讨论每个样机应更改/保留的内容。 ，然后让客户确定自己最喜欢的设计。
   注意：如果您使用WordPress构建基础，则可以访问http://themeforest.com并查看大量主题。从那里，您可以截取屏幕截图并制作模型，然后还可以提供实时演示（显然，没有客户的自定义）。如果您的客户喜欢这些模型之一，则可以购买主题，并可以根据需要进行更改。这就是我倾向于做的。我从来没有使用主题（或其他任何事情）而不给予适当的信用/付款/等。给原始创作者。:)
   
3. 开发
   然后，我终于开始真正在开发环境中开发站点（不是客户端的实时网站，而是一个子域，如果可能的话，即IE dev.clienturl.com）。每次我感觉页面接近时，我都会将更新发送给客户端要完成此操作，如果有问题，我们可以立即修复。
4. 始终跟进
   即使您的客户的网站上线并且看上去很满意并且没有要求进一步的更改，也请务必进行跟进。只要确保一切按照他们的期望，就可以正常工作。我还建议为网站上线大约一周后，为每个客户编写一份调查问卷，以完成调查。您可以使用此处的评论作为您网站上的推荐。

如果您需要任何帮助，请通过我的网站与我联系。我有大量资源可以与您共享，例如合同，后期制作调查，初始调查表等。http://anchorsawaydesigns.com/

尝试从一开始就获取尽可能多的信息，然后按照类似下面的步骤进行。尝试使您的客户尽可能多地了解情况，因为您不想孤立地开发某些东西，只是后来发现它不符合他们的期望。如果您投资了一个好的线框图工具（我使用balsamiq），那么工作就完成了一半。

1. 需求收集
2. 线框
3. 设计样机
4. 设计完成
5. 发展历程
6. 代管

祝好运。

嗨，伙计，它很好，您正在启动新项目。

您需要的步骤：

1. 首先，您要确定要为项目使用的技术，我的意思是单页滚动，多页等。

2. 然后相应地为您的布局和工作流程准备草图。

3. 现在开始像我使用photoshop一样在工具中设计布局，但是您可以根据自己的喜好使用。

4. 之后，您可以向客户显示我们对任何更改的布局，即。颜色，字体等，这样您就不会在html时感到头痛。

5. 现在，经过客户确认。是时候开始使用HTML和CSS进行编码了。

6. 之后，该将其传递给开发人员以进行进一步的语言基础编码，即。PHP，.Net等

请享用............

在Web行业中，要简化开发过程，请完成设计，然后在提出最终设计以进行进一步开发或测试之前，涉及一些其他中间步骤：

步骤1：获得启发：

如果您不断观察其他设计师或站点对其线框所做的工作，那么您将逐渐了解到线框如何帮助组织屏幕信息。

为此，您可以使用“ Wirify”线框图工具，只需将大链接添加到书签并进入所需的任何网站，单击书签，您将看到该网站变为线框。

步骤2：设计流程：

不同的设计师采用不同的方式处理线框图并将其转换为视觉效果或代码，

在这里，不仅要由设计师选择要遵循的路径，有时客户更喜欢直接制作模型，而有些则更喜欢系统的，

草图=>线框=>样机=>代码

步骤3：绘制草图：

现在，当您受到启发时，有了一些粗略的想法和方法的规划，从素描开始就总是好事，无论您在控制鼠标/手写笔或使用的方式方面有多出色，他们都无法击败纸，铅笔简单。

在纸上手绘草图始终是任何设计师的良好起点。它提供了一种快速而轻松的方式来集中和组织。如果您对草图非常精确，甚至可以将其用作最终线框。

步骤4：线框图：

创建线框是设计之前应该采取的第一步。

线框可以帮助您组织和简化网站中的元素和内容，并且是开发过程中必不可少的工具。

线框基本上是设计中内容布局的直观表示。

就像建筑物的地基一样，在决定是否给它昂贵的油漆之前，它必须从根本上坚固。

选择您的工具

这是Mashable为设计师提供的10种免费线框图工具的列表

设置网格

网格对于实现对称和并行设计非常必要。

每当您查看设计良好的网站时，您都会发现它的内容从正文中的特定点开始并以一个点结束，这些内容是通过使用网格进行管理的。

确定带有框的布局

使用印刷术定义信息层次结构

线框图时应避免的事项：

• 页面上发生了太多事情。
• 强调色彩和设计
• 太多细节

创建线框可以使客户，开发人员和设计人员有机会审视网站的结构，并允许他们在流程的早期阶段轻松进行修改。

线框图具有以下主要优点：

第5步：模型/视觉：

现在可以将最终的线框转换为最终的模型或可视化文件：

Mockuos的一些常见工具是Adobe photoshop，Corel Draw和非常新但已经流行的Sketch等。

信息层次

您可能需要考虑要突出显示的内容和什么是辅助信息，并因此确定了配色方案，重新定位和版式。

版式

为网站选择具有视觉吸引力和可读性的版式，并结合适当的选择。字体大小，粗细和颜色在可读性中起着至关重要的作用。

配色方案

代表品牌标识和心理颜色的配色方案，红色表示危险，绿色表示成功等。

步骤6：原型：

一个原型是一个早期样品，模型，或内置测试的一个概念或过程，或者作为一个东西被复制或从那里学到了产品的发布。

线框处理结构，模型处理视觉效果，原型处理可用性（在Web /应用产品中）。

制作了原型产品，然后进行了测试并完成了POC（概念验证），现在我们可以使用Real产品（显然，如果不需要任何更改）

使用图片和其他链接链接到原始文章