按27个步骤获得完美的网站布局

+$Designing a website layout doesn't have to be difficult, especially if you know the common mistakes to avoid. In this post, we run through the steps you need to take to reach the perfect website layout. We'll cover what every new website builder should know and do before starting a new project, and what they should pay attention to avoid slipping up.

+$These steps cover not only design aspects but also general workflow tips. On this page we explore how to get started and the key steps in the design workflow, and on第2页+$you'll find general advice for approaching website layout design, and tips for wrapping up a project. Follow this advice and you'll soon be on your way to creating professional website layouts.

+$Still looking for a host? Take a look at our guide to the+$best website hosting services最佳网站建设者+$right now. And it's not covered here, but don't forgot your error pages! Take a look at our pick of the+$best 404 Pages寻找灵感。

入门

01.定义成功的含义

person with laptop

了解您的设计目的的根源

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

好的重新设计不一定是最华丽的,但随着时间的推移会提高性能。在开始设计之前与客户交谈是确定所有这些的关键。您需要了解他们在书面SOW(工作说明书)之外的关注点和目标。

+$02. Understand the current site

设计师参与项目往往不是孤立发生的事情。客户不会总是联系您从头开始。在大多数情况下,您必须了解当前的系统,如果您的项目旨在挑战它,请找到发展它的机会,或按照原样进行。

选项是无限的。从设计的角度理解现有的是关键,如果你要快速行动并认识到创新的机会在哪里,而不是挑战已经建立的和作为无法理解要求的人而来。

03.尽早与客户分享设计

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

一旦初始概念获得批准,您可以放松一点并开始生产。但在提出第一个概念之后,如果客户不喜欢它,你应该收集足够的反馈,以便将第二个更合适的概念带到桌面上。

设计工作流程

04.首先解决布局问题

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

+$Think about the content, the layout and the functionality. Make sure those thoughts are in line with your client’s goals and feel free to share them.

05.开始草绘顶级框架

基本线框将帮助您构建布局(单击右上角的图标放大)

当我被要求创建网站布局的外观和感觉时,我要做的第一件事是提出一个解决所有设计问题的顶级框架。框架是围绕内容的UI,帮助用户执行操作并在其中导航。它包括导航和侧边栏和底栏等组件。

如果从这个角度来看你的设计,那么在设计主页之外的部分时,你将清楚地了解你的布局需求。

06.添加一个网格

grids on different screens

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

这听起来很简单。在开始设计任何东西之前,你需要一个合适的网格没有网格没有有效的借口 - 如果你不这样做,我可以向你保证,设计看起来不会那么好。网格将帮助您构建不同部分的布局;它将指导您完成特定的屏幕尺寸要求,并帮助您创建响应式模板,从而使您在间距以及许多其他设计问题方面保持一致。

要了解如何执行此操作,请查看本指南创建适应所有屏幕尺寸的网格

07.选择你的排版

Website layouts: typography

根据经验,在网站布局中使用不超过两种不同的字体

探索不同的字体和颜色是项目发现阶段的一部分。一般来说,我建议不要在网站上使用两种以上的不同字体,尽管它实际上取决于它的性质。选择一个易于阅读的字体,用于大块文本,并且更有趣的是标题和号召性用语。寻找灵感?看看我们的完美综述字体配对+$or List Of免费字体。不要害怕使用大字体,并且在使用排版时要有创意和一致性。

08.选择你的颜色主题

Website layouts: colours

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

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

根据每个元素的功能,在网站布局中一致地应用这些内容非常重要。想想Facebook,Twitter,Quora和Vimeo等网站的布局。除了UI之外,插图或图形细节不应有任何颜色限制,只要它们不会干扰组件的功能。

如果您遇到困难,请查看我们的列表网页设计师的最佳颜色工具

09.简化布局

Website layouts: B-reel homepage

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

站点结构越简单,用户就越容易导航。每个部分都需要讲述一个故事;它需要用户的理由和最终结果。布局应该有助于内容突出该故事中最重要的部分。

实际上,在页面上不应该有太多的号召性用语 - 一切都应该推向最终的'我能在这做什么?'

+$Think about the most simple layout you can imagine for a simple purpose, and start adding components that are necessary. In the end you'll be surprised how hard it is to keep it simple.

10.优化每个组件

Microsoft Music design

Claudio Guglieri从事Microsoft Music的UI设计工作

将每个组件视为可以呈现给设计竞赛。如果你注意每个组件,整体将超过其各个部分的总和。我不得不承认这条建议不是我的。我在之前的一家机构听到过,我对这句话的清晰和真实感到震惊。

每个组件都需要设计为好像它可以独立作为有史以来最好的组件。有时候设计师会将网站的某些部分留在他们的待办事项列表的最后一部分,并最终没有表现出他们的尊重。

11.通过您的解决方案引导客户

避免对你的工作进行大的揭示。经常与客户沟通的目标之一是在揭示您的工作时避免意外。在我展示自己进步的那些时候,我发现将它们带到旅程并展示我从哪里开始,在浏览这个或那个挑战时所考虑的因素以及我最终降落的地方,而不仅仅是展示没有背景的旅程结束。

通过这样做,您会发现他们要么同意您的结论,要么在演练过程中的某些时候指出您可能没有考虑过的缺陷或其他变体。在任何一种情况下,您都会进行对话,客户将感受到更多的投入,因为他们是流程的一部分。

12.思考一下

lonely planet website

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

在设计交互式体验时,运动至关重要任何设计都不能单独判断,也不能作为静态补偿;每个组件都是由它与系统的关系定义的,这种关系需要运动才能正确传达。 Motion可以说明布局中内容或交互状态的动态效果。为了第二个目的,我建议您将设计进一步用于原型设计。

13.原型,原型,原型

lonely planet site on mobile

原型设计是测试交互的最佳方式

原型设计是测试交互和技术的最佳方式。有很多原型制作工具这使得现在很容易,你不需要成为一个编码大师来创建有效的原型。这是另一种方式,您可以让您的客户兴奋和充满理念和想法,否则需要大量的解释。

下一页:设计方法和包装



翻译字数超限