DIY初学者的9个基本Web设计技巧

网页设计基本原理 & 最佳实践,可帮助任何级别的初学者从视觉上设计专业人士 & 外观时尚的网站.


初学者的网页设计技巧

如今,任何人都可以成为网页设计师。是的,这是一个大胆的声明-但对开放源代码设计软件(例如 金普, 以及Wix和Weebly等DIY网站建设平台席卷了市场, 业余 和善意 网页设计者 最近变得越来越稀薄和模糊。关于创造力的有趣的事情是,当您“准备好”担当某种角色时,没有人可以为您做出决定。很多摇滚明星从没上过音乐课。许多成功的艺术家从未研究过人体解剖学。而且大部分的网页设计师都没有正式学位。因此,如果您创建了自己的企业网站,那么您能否自信地说自己是“网页设计师”?由您确定.

任何人都可以成为拥有DIY网站构建平台的网页设计师.

点击鸣叫

如果您是此博客的关注者,那么您可能已经决定自己构建网站。尽管您可能不知道要学习有关Web开发的大量信息,但您可以放心,即使设计经验很少的企业主确实可以创建看起来很专业的网站。一切都始于遵循一些基本原则,如果正确应用这些基本原则,可以大大提高网站设计和用户体验的可信度.

本指南是什么(和不是什么)

明确地说,我们在这里谈论的是网页设计的基础知识,并且不会涉及网格系统,JavaScript或CSS框架等更高级的主题。本指南还假设您使用的是某种拖放式网站构建器,因此您无需编码即可设计网站。无论您是使用网站构建器中的现有模板还是从头开始(对于初学者而言,都是一个比较雄心勃勃的选择),本指南都将帮助您了解应应用于网站的基本Web设计原则和实践。一篇关于网页设计的文章不会立即使您成为专家,因此请考虑这是您迈向更广阔世界的第一步.

小建议: HTML和CSS的基本知识将对任何刚起步的Web设计师都是巨大的好处。如果您真的想进行编码,建议您退房 W3学校 了解有关基金会的更多信息.

初学者网页设计基础

让我们开始吧,是吗?以下是建立第一个网站时应了解的一些最有用的趋势和指南:

1.收起鼠标,拿起铅笔

您的网站可能已经以美丽,完整的实体形式存在,这就是为什么您立即跳入Photoshop(或更糟糕的是,使用浏览器和HTML)进行规划的原因。哇,哇,让喷气机冷却一秒钟!不要把车放在马的前面。首先,拿出铅笔和纸垫,开始将您的想法变成容易理解的东西。这是重要的阶段,您可以使用矩形,涂鸦和灵感创意(通常称为 线框)。在这一点上,事情可能会很艰难。没有人会看到它,但是你.

网站线框示例网站线框可帮助您开发网站的布局和结构,同时改善用户体验(UX)和节省时间.

在此阶段,更改您原本认为可以使用的布局要容易得多,但是现在发现它们在纸上显得混乱而混乱。与在对网站进行编码和在浏览器中进行相同的发现相比,这将节省许多时间的挫败感。另外,当您手边有参考资料而不是盲目参考时,它可以极大地帮助您构建网页.

2.遵循层次结构

这是事实,大多数网络冲浪者倾向于只扫描网页,而不花时间真正阅读所有内容。您需要为此做好准备 将最重要的内容放在首位. 这意味着用户在初始加载时应该能够在一个屏幕上全部消化页面上最重要的信息,而无需缩放或滚动。当然,这说起来容易做起来难。这里有一些技巧,可以帮助您更好地理解这种设计理论的重要性:

保持内容“折中”

我们称加载内容的初始屏幕为“折叠”,而其下方必须滚动才能看到的所有内容都被认为是次要的。通常,您最重要的信息位于“首屈一指”的位置。在该区域内要完成的主要工作是吸引用户采取行动或激发进一步向下滚动的动机.

使用“英雄”图像

如今,网页设计的一个普遍趋势是用“英雄”图像或横幅填充“折页上方”区域。这些是全屏背景图像,其文字非常简洁明了,通常与号召性用语按钮搭配使用。网页的整个目的可能包含在此横幅区域内,尽管它也可以作为遵循内容的很好的入门.

英雄形象/横幅示例

“折页”可能会因设备而异

这就是事情变得复杂的地方,以及为什么您不应该负担过多的费用以尝试使所有内容都超出这一神奇界限。根据用户设备的不同,屏幕尺寸可能会有很大差异。令人jaw目结舌的5K显示屏的垂直分辨率为2880像素,而iPhone 5的垂直分辨率不到此分辨率的一半。这意味着移动用户将无法在其屏幕空间中容纳尽可能多的内容。 (稍后对此有更多介绍。)

小建议: 一般的经验法则是确保“折叠之上”的内容适合屏幕尺寸的最低公分母。通常被接受为 768像素 垂直分辨率.

3.排版是您的设计

除非您经营摄影业务,否则文字是任何网站中最重要的元素,因此正确完成这一部分很重要。网页的层次结构在很大程度上取决于您选择的版式:标题,小标题和正文是如何顺其自然地流动并在视觉上保持彼此区别的。要全面了解排版,请查看我们的最佳做法指南。以下是一些重要的要点:

  • 确保文字是 清晰的 (避免使用花朵字体!)和 足够大 (通常为16px左右).
  • 坚持不超过 两种字体并确保它们配对良好!
  • 给您的段落之间留出一定的呼吸空间,并设置足够的空间 顶部填充 要么 余量 在标题上表示内容清晰.
  • 避免使用长行文本。段落中的线条大致不超过 15个字长—比手机屏幕少一点.
  • 衬线 字体通常仅在印刷中才是最佳字体,除非它们在网络上的大标题中使用.

4.颜色 & 对比至关重要

我们已经详细讨论了色彩心理学,但是这个概念需要重复。您为网站选择的颜色在用户如何看待您的品牌以及他们通过您的网站采取行动(即购买商品)时可能会产生的动力方面起着巨大的作用。为什么?嗯,每种颜色都会唤起某些情感,并且由于其固有的性质或文化条件,这些颜色已与某些类型的企业相关联。如果儿童玩具公司或财务顾问将整个网站涂成黑色,则绝对会向目标受众发送错误的信号。另一方面,亮橙色或宜人的蓝色将分别为其客户捕捉完美的色调和知名度.

网页设计颜色示例蓝色是一种唤起信心和信任的颜色,是金融相关网站的流行选择.

如果您已经确定了品牌的颜色,请在您的网站上使用这些颜色。不过,最好保持在 不超过三种颜色 用于您的网站;像字体一样,您不想在这里过度使用它,否则您的网站可能会遇到多种人格障碍。也要警惕您的网页上过多的颜色飞溅;我们的眼睛像蜜罐一样吸引着他们,它们可能会打断您内容的自然流动。仅在最需要时使用颜色,例如链接或按钮.

对主题 对比, 您的文字必须与背景脱颖而出,这一点至关重要。对字体使用浅灰色,黄色或绿色几乎可以肯定地使它们在页面上不可见。白色背景上的黑色是对比度的最大组合,通常是您应该坚持的.

小建议: 最好避免 完全饱和 在网络上的颜色。纯红色(十六进制值#ff0000)在眼睛上有点过分有力。同样,字体的纯黑色(#000000)往往使眼睛振动过大,而黑色略微变浅(#333333)则更易于阅读。.

您还希望文本针对背景图像弹出。使用非常忙碌的照片可能会使文字分散注意力,因此要避免出现此问题,请使用不太详细的照片,或者使用例如rgba(51,51,51,0.5)的覆盖层来帮助柔化文本下方的图像.

图像叠加示例在文字后面使用覆盖层以帮助其从背景弹出.

对比在吸引用户使用您网站的某些关键元素方面也发挥了作用。您最重要的号召性用语按钮必须通过使用对比色吸引眼球。蓝色的“立即购买!”如果某个网站到处都使用蓝色,则该按钮会被它吞没,但它失去了紧迫性和价值;但是,同一页面上的红色按钮却通过喊“嘿!点击我!”

6.使用图片

选择合适的图像在您的网站上使用部分取决于您自己的艺术才能,但是也要考虑一些智力上的考虑,这将有助于您的选择过程。首先,请避免使用多余的照片来修饰您的网站,因为它们看起来可能不错。相反,请考虑您使用的每张图片如何达到自己的目的,更重要的是, 内容. 精心挑选的照片比文字更能有效地传达您的品牌,服务,产品或受众。使用照片来帮助您的用户理解某些事物,唤起情感或激发信任和信心;纯粹出于美学原因使用它们应该是次要的.

了解文件类型 & 压缩

在网络上使用图像时,必须采取额外的步骤。您从类似网站获得的精美照片 快门iStock 可能非常大(5,000+水平像素和10+ MB),适合打印,但不适用于网站。并非所有人都拥有超高速光纤互联网,因此您必须减小图像的大小以适应加载时间(更不用说,如果网站加载时间超过3秒,将有40%的访问者离开!)。通常,您希望将每个图像保存在 最多 500 KB 大小,尽管您的平均文件大小可能应该在 100 KB.

  • JPEG格式 是照片的标准格式。这是一种有损格式,这意味着压缩后会降低图像质量。如果您使用JPEG拍摄全角背景图片,则建议将其水平分辨率保持在 不小于1200px. 用于一般目的, 避免使用小于600像素的图片 水平分辨率,因为它在现代屏幕上可能会显得模糊.
  • PNG 是图形或需要图像的首选 透明度. 这是一种无损格式,不仅可以保留图像质量,而且还可以增加文件大小。通常,您会使用PNG图形来绘制插图,图标或较小的图像,由于它们的透明性,它们可以堆叠在其他元素的顶部。您几乎不需要PNG大于1000px.
  • SVG(可缩放矢量图形) 是一种正在取代的较新格式 GIF 在某些情况下甚至是PNG。 SVG的优点在于,它可以在屏幕上按您需要的大小,而又可以保持完美的清晰度和清晰度(并且仍然是小文件大小)。您应该考虑将SVG用于任何徽标,图标或 矢量图形 在您的网站上;随着高DPI显示器现在变得司空见惯,SVG的清晰度将提供最高的图像质量.

图像文件类型示例

6.移动优先设计

现在,大多数人都使用手机而不是台式计算机来消费在线内容。结果,在网页设计中有更多的优先级专门针对移动体验进行定制,这导致了“移动优先”的设计理念.

从本质上讲,这意味着在您最初的图纸设计阶段中,最好先关注网站的移动版式。在较小的屏幕上只会显示网站正常运行所必需的最重要的内容。这迫使你 简化 您的布局,并从一开始就删除所有干扰因素。回想一下“首屈一指”的内容:如果您首先确保所有重要信息都可以放在手机的初始屏幕上,那么您肯定会知道它可以在更大的屏幕上显示。确定基本的移动版式后,即可开始为桌面屏幕添加装饰或更大的图像.

您的移动版式采用更垂直的设计来激发滚动效果,而不是桌面的宽广景观。举例来说,如果您的产品页面在台式机上以3格的形式显示列表,则通常您的移动版式将其仅显示为一列.

是的,这意味着您基本上需要为网站的每个页面创建多个布局。值得庆幸的是,任何优秀的网站建设者都应提供自适应模板,以自动调整这些布局,因此您只需对其进行微调.

小建议: 确保您网站上的单个元素(尤其是交互式元素)不小于 44px x 44px 在尺寸方面。为什么?这是手指仍然可以准确轻敲的最小目标.

7.保持一致

当元素散布在您的网站上时,通常是由于对齐问题。想象您的网页在一张方格纸上。例如,通过绘制六条直线将其分成偶数列。现在,您要确保元素的左边缘分布并仅与这六条垂直线对齐.

8.保持简单

人们常说,最好的网页设计不会引起人们的注意。只有糟糕的设计才能引起人们的注意。如前所述,任何网站最重要的方面就是其文字。如果您能提供令人愉悦的出色印刷术,那么您可能不需要做太多事情了。过度设计您的网站只会使事情变得混乱和复杂.

盒子阴影是否必要?疯狂的华丽图案?几十种颜色?可能不是.

9.大空地

您的内容需要喘息的空间. 空格 是现代网站的主要设计选择:虚无的广阔而空白的空间用于填充内容之间的区域。这是一种更好的信息消化方式,它还鼓励您删除多余的文本和图像以保持网站的清洁.

结论

Web设计可能是一个广泛的技术领域,需要学习的技术,要实践的概念,要学习的语言以及要掌握的艺术性。仅凭经验,所有这些组成部分都将变得有意义,但是仅通过掌握使良好网站正常运作的基础知识,您就已经步入正轨。我希望本指南可以作为您的出发点,并让您有信心将自己的网站掌握在自己手中,并以只有企业主最了解的方式建立网站.

设计师出生!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me