网页设计：网站布局的23个步骤
  在设计网站布局时，常常会出现一些常见的错误，特别是实习生和新设计师。在这个完美的网站布局的文章中，我们将介绍在开始一个新项目之前，每个新网站建设者应该知道做什么，以及在这个过程中应该注意什么?欢迎大家阅读!更多相关信息请关注相关栏目!
  这些原则不仅涵盖设计方面，还涵盖了一般工作流程，可以很好地完成工作。跟随他们，你很快就会开始创建专业的网站布局。
  01.客户的目的是什么
  告诉你的客户，出目标是什么
  在开始工作之前，你需要知道你正在设计什么。除了网站的描述，你需要知道什么是目标。以新闻网站为例，目标是什么?是否尽可能多地制作广告展示，或提供最佳的阅读体验?这些目标如何衡量?
  良好的重新设计不一定是最华丽的，而是随着时间的推移提高性能的。在开始设计之前与客户交谈是关键所在。您需要了解他们的关注和目标超越了书面SOW(工作表)。
  02.把你的想法写在纸上
  关于世界各地城市的插图系列的很早的草图
  这似乎非常明显，但是我经常发现，设计师在考虑他们正在尝试解决的问题之前，先直接进入他们的工作。设计是解决问题，这些问题不能通过渐变或阴影解决，而是通过良好的布局和清晰的层次结构来解决。
  在开始放置阴影之前，请考虑内容，布局和功能。确保这些想法符合客户的目标，并随时分享。没有任何客户曾经向我投诉过度沟通的想法。
  03.开始绘制顶级框架
  绘制基本的线框可以帮助您构建布局(单击右上角的图标以放大图像)
  当我被要求创造一个项目的外观和感觉，我做的第一件事是提出一个顶级的框架，以解决所有的设计问题。框架是围绕内容的UI，并帮助用户执行操作并浏览它。它包括导航和组件，如侧边栏和底部栏。
  如果您从这个角度来看待您的设计，您将清楚地了解在首页设计部分之后，布局需要什么。
  04.添加网格
  具有10px基线的978网格的示例
  听起来很简单。在开始设计任何你需要一个正确的网格之前。没有网格启动没有有效的借口 - 如果没有，我可以向你保证，设计看起来不是很好。网格将帮助您构建不同部分的布局; 它将引导您完成特定的屏幕尺寸要求，并帮助您创建响应模板，因此在间距方面以及许多其他设计问题方面是一致的。
  要了解如何做到这一点，请查看本指南来创建适应所有屏幕尺寸的网格。
  选择你的排版
  一般的经验法则是在网站布局中使用不超过两种不同的字体
  探索不同的字体和颜是项目发现阶段的一部分。我建议不要在网站上使用两种以上的不
同字体，但这实际上取决于它的性质。总的来说，选择一个容易阅读的大块文字的字体，并且更加适合标题和号召性用语。不要害怕使用大字体，并且在使用排版时具有创造性和一致性。
  06.选择你的颜主题
  Color Hunt等工具旨在帮助您挑选调板
  在选择一组字体的过程中，您应该开始探索在UI，背景和文本中使用的颜。我建议为一般用户界面使用一组有限的颜和调。
  根据元素的功能，在UI上应用这些是非常重要的。想想Facebook，Twitter，Quora和Vimeo等网站的布局。除了UI，图形或图形细节不应该有任何颜限制，只要它们不会干扰组件的功能。
  如果您遇到困难，请查看我们的免费应用列表，以选择配方案。网页模板免费网址
  分配布局
  简单的布局往往更容易导航
  网站的结构越简单，用户就越容易浏览。您网站的每个部分需要讲述一个故事; 它需要用户的理由和最终结果。布局应该帮助内容突出显示该故事中最重要的部分。
  实际上，在一个网页上不应该有太多的号召力 - 所有的事情都应该推动到那个决定“我能在这里做什么?” 想想最简单的布局，您可以想象一个简单的目的，并开始添加必要的组件。最后，你会惊讶，很难保持简单。
  08.重新思考已建立的
  搜索按钮已变得过时
  我们真的需要一个搜索按钮吗?在大多数情况下答案是否定的。作为设计师，我们塑造了用户浏览互联网的方式，由我们来决定简单操作将采取多少步骤，以及我们的网站将如何有效。
  有些公约在那里是因为他们工作，但有些是因为没有人花费足够的时间来评估它们。重新考虑所有组件的已建立的交互模式，看看我们如何改进它们。
  想想动议
  运动在设计交互式体验时至关重要
  运动在设计交互式体验时至关重要。没有任何设计可以自己判断，或作为静态组合; 每个组件都是通过与系统的关系定义的，这种关系需要运动才能正确传达。运动可以说明您的布局中对内容或交互状态的动态效果。为了第二个目的，我建议您的设计进一步进行原型设计。
  原型，原型，原型
  原型是测试互动的最佳方法
  原型是测试交互和技术的最佳方法。现在有很多原型设计工具使其变得轻而易举，您不需要成为创建有效原型的编码大师。这是另一种方式，您可以让您的客户感到兴奋，并与理论和想法，否则需要很多解释。
  挑战自己
  我鼓励每个设计师在每个项目上挑战自己。创新并不总是对项目的要求，所以我们需要提
出新鲜事物。不同挑战的例子可能包括使用新的网格系统，创建新的组件，或者甚至是避免混合模式或使用特定颜的小挑战。
  注意细节
  工作进展中：细节视图
  这个声明最近被过度使用，但在最终产品中并不总是可见的。根据项目背后的概念，“关注细节”可能意味着不同的东西。
  它可能是一个小的互动，一个意想不到的动画或美学的触摸，如一个按钮的一个渐变或在背景中一个盒子周围微妙的冲击。但总的来说，这种触摸是至关重要的 - 如果你真的很喜欢你所做的，这将是自然而然的。
  13.优化每个组件
  将每个组件视为设计比赛
  处理每个组件，就像它可以呈现给设计大赛一样。如果您注意每一个组件，整体将超过其
部分的总和。我不得不承认，这件建议不是我的。我曾经在以前的一个机构听到过，令我震惊的是，这个声明是多么清楚和真实。
  每个组件都需要设计，因为它可以独立于最好的组件。有时，设计师会将某个网站的某些部分留下，直到他们的待办事项列表中，直到最后才显示出来。
  锐化你的.工作
  在笔画和背景之间设置正确的对比度
  为了避免模糊像素，请尝试在笔画和背景颜或背景颜之间设置正确的对比度。除了任何审美的考虑之外，还有一些常见的事情必须避免，以创造一个干净，正确的工作。
  当您尝试锐化工作时，您应该注意的部分是包括渐变条纹，边缘模糊，字体渲染选项(某些字体，具体取决于其特定渲染模式下的最佳尺寸)，以及与的背景。
  这些只是需要寻的几个问题的基本例子，但实际上这个列表是无止境的。总是看你的设计作为一个整体，看看一切是否运作良好，然后仔细分析每个组件。
  15.整理你的设计文件
  无论您使用什么设计工具，这一点(以及使用网格)都是最重要的建议之一。不管项目的大小和设计人员的数量如何，您需要保持文件清洁。这样可以轻松导出不同的部分，加快设计过程并与其他设计人员合作。
  16.设计最佳案例; 为最坏的准备
  请记住，您的布局如何在不同的设备和屏幕尺寸上工作
  请记住，您的布局如何在不同的设备和屏幕尺寸上工作。作为设计师，我们的工作是通过不同的约束来解决问题 通过网页设计，约束范围从概念和技术问题到内容相关的问题。
  我们需要建立一个不仅可以在理想场景下工作的站点，也可以在最坏的情况下构建一个站点。例如，一个用户可能正在使用一个非常小的屏幕，并检查该网站，当它几乎没有任何内容，所以它看起来破碎。
  但是，为了展示我们的工作，我总是强烈建议为此建立最佳案例场景。因此，我们将显示
理想的文本数量，我们将在理想的浏览器大小内显示该网站，这应该是大多数使用它的用户最常见的场景。
  痴迷于设计，直到你讨厌它
  如果您对设计充满热情，我相信这是您已经在做的事情。每当我完成一个comp我感到自豪，我倾向于使这个成为我一生的一部分。我拍摄它的截图，检查它不同的设备，制作它的壁纸，甚至打印它，挂在墙上。
  作为这个过程的结果，我得到了一个点，我终于讨厌我的设计。我开始看到一切都错了，最终我改变了。不喜欢你以前的工作是成熟的迹象，这意味着你终于从自己的错误中学习了。
  18.早日与客户分享设计
  当提出交互式概念或设计“外观和感觉”时，您需要确保您和客户端尽快在同一页面上。在与客户共享之前，避免花费太多时间在概念上。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。