设计制作完美的网站布局的23个步骤

来源:设计前沿 作者:Claudio Guglieri 时间:2017-08-05

在设计网站布局时,常常会出现一些常见的错误,特别是实习生和新设计师。在这个完美的网站布局的文章中,我们将介绍在开始一个新项目之前,每个新网站建设者应该知道做什么,以及在这个过程中应该注意什么,以避免这些错误。

这些原则不仅涵盖设计方面,还涵盖了一般工作流程,可以很好地完成工作。跟随他们,你很快就会开始创建专业的网站布局。

01.客户的目的是什么

告诉你的客户,找出目标是什么

在开始工作之前,你需要知道你正在设计什么。除了网站的描述,你需要知道什么是目标。以新闻网站为例,目标是什么?是否尽可能多地制作广告展示,或提供最佳的阅读体验?这些目标如何衡量?

良好的重新设计不一定是最华丽的,而是随着时间的推移提高性能的。在开始设计之前与客户交谈是关键所在。您需要了解他们的关注和目标超越了书面SOW(工作表)。

02.把你的想法写在纸上

网站布局初步草图

关于世界各地城市的插图系列的很早的草图

这似乎非常明显,但是我经常发现,设计师在考虑他们正在尝试解决的问题之前,先直接进入他们的工作。设计是解决问题,这些问题不能通过渐变或阴影解决,而是通过良好的布局和清晰的层次结构来解决。

在开始放置阴影之前,请考虑内容,布局和功能。确保这些想法符合客户的目标,并随时分享。没有任何客户曾经向我投诉过度沟通的想法。

03.开始绘制顶级框架

网站布局UX草图

绘制基本的线框可以帮助您构建布局(单击右上角的图标以放大图像)

当我被要求创造一个项目的外观和感觉,我做的第一件事是提出一个顶级的框架,以解决所有的设计问题。框架是围绕内容的UI,并帮助用户执行操作并浏览它。它包括导航和组件,如侧边栏和底部栏。

如果您从这个角度来看待您的设计,您将清楚地了解在首页设计部分之后,布局需要什么。

04.添加网格

具有10px基线的978网格的示例

听起来很简单。在开始设计任何你需要一个正确的网格之前。没有网格启动没有有效的借口 - 如果没有,我可以向你保证,设计看起来不是很好。网格将帮助您构建不同部分的布局; 它将引导您完成特定的屏幕尺寸要求,并帮助您创建响应模板,因此在间距方面以及许多其他设计问题方面是一致的。

要了解如何做到这一点,请查看本指南来创建适应所有屏幕尺寸的网格。

选择你的排版

网站布局排版

一般的经验法则是在网站布局中使用不超过两种不同的字体

探索不同的字体和颜色是项目发现阶段的一部分。我建议不要在网站上使用两种以上的不同字体,但这实际上取决于它的性质。总的来说,选择一个容易阅读的大块文字的字体,并且更加适合标题和号召性用语。不要害怕使用大字体,并且在使用排版时具有创造性和一致性。

06.选择你的颜色主题

网站布局颜色

Color Hunt等工具旨在帮助您挑选调色板

在选择一组字体的过程中,您应该开始探索在UI,背景和文本中使用的颜色。我建议为一般用户界面使用一组有限的颜色和色调。

根据元素的功能,在UI上应用这些是非常重要的。想想Facebook,Twitter,Quora和Vimeo等网站的布局。除了UI,图形或图形细节不应该有任何颜色限制,只要它们不会干扰组件的功能。

如果您遇到困难,请查看我们的免费应用列表,以选择配色方案。

分配布局

网站布局B卷轴主页

简单的布局往往更容易导航

网站的结构越简单,用户就越容易浏览。您网站的每个部分需要讲述一个故事; 它需要用户的理由和最终结果。布局应该帮助内容突出显示该故事中最重要的部分。

实际上,在一个网页上不应该有太多的号召力 - 所有的事情都应该推动到那个决定“我能在这里做什么?” 想想最简单的布局,您可以想象一个简单的目的,并开始添加必要的组件。最后,你会惊讶,很难保持简单。

08.重新思考已建立的

网站布局搜索按钮

搜索按钮已变得过时

我们真的需要一个搜索按钮吗?在大多数情况下答案是否定的。作为设计师,我们塑造了用户浏览互联网的方式,由我们来决定简单操作将采取多少步骤,以及我们的网站将如何有效。

有些公约在那里是因为他们工作,但有些是因为没有人花费足够的时间来评估它们。重新考虑所有组件的已建立的交互模式,看看我们如何改进它们。

想想动议

运动在设计交互式体验时至关重要

运动在设计交互式体验时至关重要。没有任何设计可以自己判断,或作为静态组合; 每个组件都是通过与系统的关系定义的,这种关系需要运动才能正确传达。运动可以说明您的布局中对内容或交互状态的动态效果。为了第二个目的,我建议您的设计进一步进行原型设计。

原型,原型,原型

原型是测试互动的最佳方法

原型是测试交互和技术的最佳方法。现在有很多原型设计工具使其变得轻而易举,您不需要成为创建有效原型的编码大师。这是另一种方式,您可以让您的客户感到兴奋,并与理论和想法,否则需要很多解释。

挑战自己

我鼓励每个设计师在每个项目上挑战自己。创新并不总是对项目的要求,所以我们需要提出新鲜事物。不同挑战的例子可能包括使用新的网格系统,创建新的组件,或者甚至是避免混合模式或使用特定颜色的小挑战。

注意细节

网站布局游戏正在进行中

工作进展中:细节视图

这个声明最近被过度使用,但在最终产品中并不总是可见的。根据项目背后的概念,“关注细节”可能意味着不同的东西。

它可能是一个小的互动,一个意想不到的动画或美学的触摸,如一个按钮的一个渐变或在背景中一个盒子周围微妙的冲击。但总的来说,这种触摸是至关重要的 - 如果你真的很喜欢你所做的,这将是自然而然的。

13.优化每个组件

网站布局视频组件

将每个组件视为设计比赛

处理每个组件,就像它可以呈现给设计大赛一样。如果您注意每一个组件,整体将超过其部分的总和。我不得不承认,这件建议不是我的。我曾经在以前的一个机构听到过,令我震惊的是,这个声明是多么清楚和真实。

每个组件都需要设计,因为它可以独立于最好的组件。有时,设计师会将某个网站的某些部分留下,直到他们的待办事项列表中,直到最后才显示出来。

锐化你的工作

网站布局模糊的像素

在笔画和背景之间设置正确的对比度

为了避免模糊像素,请尝试在笔画和背景颜色或背景颜色之间设置正确的对比度。除了任何审美的考虑之外,还有一些常见的事情必须避免,以创造一个干净,正确的工作。

当您尝试锐化工作时,您应该注意的部分是包括渐变条纹,边缘模糊,字体渲染选项(某些字体,具体取决于其特定渲染模式下的最佳尺寸),以及与的背景。

这些只是需要寻找的几个问题的基本例子,但实际上这个列表是无止境的。总是看你的设计作为一个整体,看看一切是否运作良好,然后仔细分析每个组件。

15.整理你的设计文件

无论您使用什么设计工具,这一点(以及使用网格)都是最重要的建议之一。不管项目的大小和设计人员的数量如何,您需要保持文件清洁。这样可以轻松导出不同的部分,加快设计过程并与其他设计人员合作。

16.设计最佳案例; 为最坏的准备

网站布局清除应用程序

请记住,您的布局如何在不同的设备和屏幕尺寸上工作

请记住,您的布局如何在不同的设备和屏幕尺寸上工作。作为设计师,我们的工作是通过不同的约束来解决问题 通过网页设计,约束范围从概念和技术问题到内容相关的问题。

我们需要建立一个不仅可以在理想场景下工作的站点,也可以在最坏的情况下构建一个站点。例如,一个用户可能正在使用一个非常小的屏幕,并检查该网站,当它几乎没有任何内容,所以它看起来破碎。

但是,为了展示我们的工作,我总是强烈建议为此建立最佳案例场景。因此,我们将显示理想的文本数量,我们将在理想的浏览器大小内显示该网站,这应该是大多数使用它的用户最常见的场景。

痴迷于设计,直到你讨厌它

如果您对设计充满热情,我相信这是您已经在做的事情。每当我完成一个comp我感到自豪,我倾向于使这个成为我一生的一部分。我拍摄它的截图,检查它不同的设备,制作它的壁纸,甚至打印它,挂在墙上。

作为这个过程的结果,我得到了一个点,我终于讨厌我的设计。我开始看到一切都错了,最终我改变了。不喜欢你以前的工作是成熟的迹象,这意味着你终于从自己的错误中学习了。

18.早日与客户分享设计

当提出交互式概念或设计“外观和感觉”时,您需要确保您和客户端尽快在同一页面上。在与客户共享之前,避免花费太多时间在概念上。

一旦初始概念被批准,你可以放松一点,开始生产。但是,在提出了第一个概念之后,如果客户不爱上它,那么你应该收集足够的反馈来给表格带来第二个更合适的概念。

作为开发人员最好的朋友

开发者是有创意的人,他们喜欢自己的工作,就像你一样。但是,从一开始就并不总是包含在一个项目中,而且当概念被决定并且他们的创造性角色已经被超越时,往往只会涉及到。

这个过程是错误的 一些最好的想法来自开发团队,所以确保从项目开始就与他们合作。与他们分享你的观念和兴奋,最终会带来更好的想法和更好的执行。

20.尽可能清楚地呈现

产生伟大的工作同样重要,因为它是呈现它。如果您没有正确呈现,您的最佳设计可以被忽略或抛弃。谈到演讲,你想解释你的工作,就像你展示给四岁。请记住,对于您第一次看到您的设计而言,您完全清楚的可能并不清楚。

不要太贴近你的想法

知道什么时候提倡你的想法,并学习认识你的团队或客户什么时候不认为他们是“一个”,这一点很细。作为一名设计师,您需要坚信自己所做的一切,但您也应该乐意快速转换您的任何想法并提出其他想法。不要忘记有多个解决方案。

按照您的设计进行开发

如果您在代理机构内部工作,您可能会知道,在开发新的项目时,发现自己在设计新项目时遇到困难。与一般信念相反,您的项目工作不会在PSD和样式表交付时结束。

如果您真的关心您的设计和交互方式的执行情况,请不时检查开发人员的老朋友,并尽可能地帮助他们确保每个小像素都是完美的。

显示您正在进行的工作

网站布局样式表

与社区共享您的样式表和进行中的组件

作为设计师社区的一部分,我们都非常喜欢看到最终结果,而且还在于正在进行的工作。有时,由于几个原因,项目的最佳部分被遗漏,并在“存档”文件夹中丢失。

一旦项目完成,您得到客户/生产者的批准,就可以推广该项目,如果可能的话,可能会对正在进行的工作和设计进行案例研究,而不是最终版本。