设计网站的步骤是什么?

平面设计 网站设计
2021-12-31 02:48:56

呼叫所有网页设计师 :)

我开始为我家乡的一家小企业建立一个网站,这将是我的第一个合适的项目。我过去做过网站,我做这些是为了休闲。我精通 HTML 和 CSS。我已经获得了客户的要求以及他在网站上想要的内容等。在完成要求后我应该遵循哪些步骤。我已经在网上搜索过,但找不到与我的问题相关的任何内容,因为信息已过时。

我的问题是:

2014 年的网页设计师工作流程是什么?(因为一切都变化如此之快)我是否创建网站的线框,然后在 Photoshop 中设计它们,然后对设计进行编码?

我只想知道“设计”过程是如何工作的,比如我需要采取哪些步骤来制作网站。

提前致谢。

4个回答

发现和范围

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

内容映射

希望您已获得该站点所需的所有内容。您应该绘制出站点及其功能。决定未来修改的可扩展性如何,决定如果代码用于 CMS 或应用程序,代码的结构如何。

例子: 在此处输入图像描述

小样

在您完成“树”或“地图”并获得客户的批准后,我将使用手绘草图或模型工具。如果您在右上角进行搜索,则有关此主题的问题很多

例子: 在此处输入图像描述

风格瓷砖

在 Photoshop 中进行网页设计的设计违背了当今时代的目的。我不知道有多少人仍然在使用 Photoshop,因为制作一个精美的按钮所花费的时间本来可以花费相同的时间并在浏览器中进行编码。如果我必须根据特殊要求使用应用程序,我会将其部署在 Illustrator 或 InDesign 中。我建议迁移以设计样式图块,例如:

在此处输入图像描述

使用瓷砖的目的,您不会将设计交给客户并将自己置于“这看起来不像您给我的设计”的角落。此外,如果您正在规划一个网站,则没有理由花时间在 Photoshop 中进行布局以提高响应能力,因为您将花费大量时间为某些设备等进行设计,等等。如果您必须设计完整的网站,我会如前所述,考虑 Illustrator 的 SVG 以及与 Photoshop 相比为您的站点导出元素的能力。在某种程度上,您甚至可以使用 InDesign 格式化内容,但我只会使用 Photoshop 进行图像处理,如果我要这样做,我可能会使用 ImageMagick。我将 Style Tile 比其他人更进一步,并将其编码到一个页面中,因此我完成了我主人的初步任务.css文件。

线框

如果您没有注意到,我更喜欢在浏览器中部署设计。现在这些天我可能会使用 Illustrator 来绘制网站草图或网站模型,但我通常会部署一个默认模板.css文件,灰度不超过 6 种颜色,并且我会为网站结构编写所有代码,因为大多数人不能了解设计并想要玩一些东西。我有时会继续在 PHP 中执行此操作,因为它更容易为 CMS 部署。然后,我将以黑白方式使用客户提供的字体开发一个简单的子域,以便整个站点的功能都存在并且他们可以通过它。由于我没有花时间添加所有内容或颜色(因为我使用虚拟文本参考:“替代 Lorem Ipsum(虚拟文本)用于网站") 如果他们不喜欢基于设备的某个元素,我可以轻松地修改存在的任何更改。

着色和内容

一旦客户签署了网站的结构和功能,我将编写 CSS 的其余部分并添加请求的动画或 JavaScript 细节。因为我已经批准了样式图块,如果我正确开发它,我可以简单地复制 CSS 并进行设置。

调试,调试,调试

客户端签核前的最后一步是调试并确保我的代码可靠且没有错误。如果一切正确,我应该可以顺利发布。此步骤还包括服务测试和负载测试,如果这是您定价和提供的。就个人而言,我坚信任何设计师都应该知道他们正在开发什么,就像你希望在涉及印刷设计时所做的那样。如果客户买不起真正的托管服务提供商,它可能会限制网站的性能,他们只会说这是你的错,你做错了什么。

训练

我通常会在 CMS 网站上的简短/报价培训中出价。一些用户不知道他们在做什么,所以我会出价一个下午,用一个多小时的时间来解决问题,以确保完成任何事情或确保他们最大限度地使用我的设计。

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

我也是一名刚开始涉足该领域的网页设计师。不过,我现在已经做了一些项目。对我来说,我的工作流程是这样的:

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

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

尝试从一开始就获取尽可能多的信息,然后采用类似于下面的分阶段方法。尽量让您的客户了解情况,因为您不希望孤立地开发某些东西,后来才发现它不符合他们的期望。如果你投资了一个好的线框图工具(我使用 balsamiq),那么你就完成了一半的工作。

  1. 需求收集
  2. 线框图
  3. 设计模型
  4. 设计完成
  5. 发展
  6. 托管

祝你好运。

嗨,伙计,你正在开始新项目。

满足您需求的步骤:

  1. 首先你决定你想为你的项目使用什么技术,我的意思是单页滚动、多页等。

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

  3. 现在开始在你喜欢的工具中设计你的布局,但你可以使用你的喜好。

  4. 之后,您可以向客户展示您的布局以进行任何更改,即。颜色,字体等,这样你就可以在 html 时不会让人头疼。

  5. 现在,经过客户的确认。是时候开始使用 Html 和 Css 进行编码了。

  6. 之后是时候将其传递给开发人员进行进一步的语言基础编码,即。PHP、.Net 等

享受............