8步打造完美网站布局设计

发表时间:2020/2/21 16:57:47 | 浏览次数:


ClaudioGuglieri在纽约的广告公司B-Reel担任总监。他写了本网站的设计训练指南,目的是帮助理解设计网站布局的全过程。

 


在我开始谈论设计网站布局的主题之前,我想分享我在设计工作中看到的一些常见的错误,特别是网络设计培训中描述的实习生和新手的常见问题。

 


断文列出了建立完美网站布局的步骤,旨在涵盖新项目前和项目设计过程中的各个应该知识,适合数字广告公司内就业的所有网站设计师新人阅读。

 


以下准则不仅包含各种设计细节,还提供了一般工作流程,可帮助您更有效地完成工作。根据这些原则,您可以立即设计专业网站布局。

 


01.先在纸上整理思绪
这篇文章显然很重要,但我经常发现一些设计师跳过这个步骤,使用PhotoshopCS6而不考虑他们需要解决的问题。设计的目的是解决这一问题,不能通过渐变或阴影效应来解决,而是需要完善的布局和清晰的结构。仔细考虑内容、布局和功能,开始阴影效果。

 


02.从顶层框架草图入手
如果我想做一个项目的外观和感觉,第一件事是建立一个顶级的框架来解决所有的设计问题。框架是围绕内容的UI,帮助执行操作和浏览。这包括导航和各种组件,例如边栏和底座。

 


从这一点开始设计的话,在设计主页以外的部分时,会知道布局内容。

 

03.为PSD添加网格
这步操作非常简单。在开始设计photoshop中的任何东西之前,您需要创建一个合适的网格。这一步的道理是众所周知的。我可以断言如果你不那样做的话,最后的设计总是不完美。

 


借助网格,你可以安排不同部分的版面结构;还可以指导你根据特定的画面尺寸要求进行设计,帮助你打造相应的模板,满足间距和其他设计问题。

 


04.选择排版样式
理解不同的字体和配色是项目开发阶段的工作。建议一个站点使用的字体不要超过两种,实际上取决于你可以使用的颜色系统。也就是说,选择的字体容易读懂大量的文字,对标题和操作感兴趣。大胆使用大型字体,使用字体时保持整体一致性和生动性。

 


05.选择主题颜色
选择了要使用的一组字体后,请考虑UI、背景和文本的颜色。对于颜色,在一般使用者介面中处理颜色和色调时,建议简洁。

 


基于元素功能的UI设计必须保持一致。想想Facebook、Twitter、Quora和Vimeo之类的网站布局。除了UI之外,只要插图或图形细节不干扰组件的功能,颜色的使用就没有限制。

 


06.划分布局
网站的每个部分都需要发挥作用。对于用户,每个部分都有自己的存在理由,并得到相应的最终结果。布局需要帮助突出其内容并突出本节最重要的信息。事实上,一个页面不需要很多调用按钮,所以每个内容都应该被推到最后,我可以在这里做什么。

 


思考一下,你可以为一个简单的目标构想到的最简单的布局,并开始添加所需组件。最后你会惊喜的发现简洁也并非易事。

 


07.重新思考已建内容
作为设计者,我们构建用户浏览互联网的方式,需要多少步骤来执行一个简单的操作,以及网站的复杂性。我们一直遵循一些设计模式和实践,因为它们是有效的,但有时仅仅因为没有人有足够的时间来衡量或重新思考。重新思考构建在组件上的交互模式,看看是否可以进行改进很重要。

 


08.自我挑战
我鼓励每个设计师不要遵守规则,而是对每个项目提出挑战。并非每个项目都要求创新,因此,需要我们自己决定是否要增加一些交互设计相关的内容。例如,各种自我挑战可能包括使用新的网格系统,创建新的组件,甚至是小挑战,例如避免混合模式或使用特定颜色。

 

  • 上一篇文章:
  • 下一篇文章: 没有了
  • Copyright © 2019 日诺网络技术有限公司 保留公司所有权利

    关于我们  |  联系我们  |  网站地图