初学者的网页设计:一个简单(但完整)的指南

发布时间:2019-08-26 16:05:48 阅读:59

Web设计是Web开发过程的重要组成部分。如果您对网页设计感兴趣,我们猜测您有创意。你怎么能不兴奋跳进去制作你的第一个网站?网页设计是关于制作功能性艺术品 - 但你从哪里开始?如果您在开始之前想知道自己需要了解的内容,本指南将帮助您解决问题。

为您的第一个网站设计选择基本的东西

这似乎没什么好事的吧?但有时我们可能会过于雄心勃勃而最终气馁。对于您的第一个项目,选择简单有趣的东西是个好主意。电子商务网站更复杂,一旦您获得更多经验,最好解决这个问题。

博客是一个很好的起点。这将是一个很好的设计练习您将了解内容管理系统(CMS)的工作原理,这对于了解未来的网站设计非常重要。最重要的是 - 您不必从头开始。有很多博客模板可以很容易地将它们组合在一起。

模板是一种有价值的学习工具。观察HTML,CSS和Javascript元素的样式并将其组合在一起,可以让您更深入地了解设计的工作原理。您可以使用模板作为基础来进行更改和自定义。

也许你不想创建一个博客 - 尝试从你的创作追求或爱好。如何为您的摄影技巧或短篇小说收集展示?创造一个充满激情的设计,是一个令人愉快的第一个项目。

寻找其他设计师的灵感


毫无疑问,你会遇到令他们惊艳的设计让你惊叹的网站。

创建一个灵感文档,其中包含指向您喜爱的网站的链接,或者随时为其添加书签。Pinterest是一个寻找精彩网站设计的好地方 - 您可以找到并固定插图,书籍封面,海报,博客和其他类型的设计作品。设计师在这些系列中使用术语“情绪板”。情绪板是一个快速的参考资源,如果你发现自己陷入困境。你会的。

在您自己制作的发现之外,您应该查看一些精选的藏品。

  • Awwwards总是拥有全新的作品和各种主题系列
  • Behance是网站设计工作的精彩汇编,重点是质量和创造力
  • Dribbble专注于个人设计师,提供一个论坛,以获得反馈并与他人沟通他们的工作

当然,请访问Webflow展示,了解人们使用我们设计平台的各种方式。有很多很酷的东西需要检查,有很多模板可以像你自己一样克隆。

在网络外寻找灵感来源

网页设计通过可在任何地方找到的视觉语言进行通知,例如图形小说的封面或银行的数字信息亭。开发一种识别优秀设计的眼睛,并开始分析为什么某些东西有效或无效,无论介质如何。

注意排版

我们经常在没有意识到字体的情况下阅读。在使用内容时要注意效果类型。菜单上的字体是否可读?是什么让这个手写字母标志着当地的商业运作如此之好?信件无处不在。记下排版的好坏用法。

Typewolf是一个很好的资源,可以密切关注流行的字体。它有很多值得探索的列表,当时的特色网站以及具有壮观字体组合的lookbooks。查看正在使用的排版的实际示例是有帮助的,像Typewolf这样的网站是查看其实际应用的好地方。熟悉不同的字体将帮助您为第一个网站设计选择正确的类型。

让美术影响你

哦,我们是否提到有一整套艺术史可供借鉴?如今,许多运动和艺术家仍在塑造创意作品 - 特别是网页设计师。漫步我们的网页设计和艺术史片,发现许多不朽的艺术成就。不仅充满了有价值的信息,它还是内容和艺术如何汇集在一起讲述故事的绝佳范例。

了解艺术史将进一步扩展您的设计知识。

研究不同类型的设计

有许多设计学科需要熟悉。对产品设计,插图甚至品牌的了解可以进一步发展您的创造性感官。

对于超越网页设计的灵感,Abduzeedo提供了精彩的例子。无论是海报艺术品,行李箱还是家具,您都会看到完美的设计实例。对不同类型的设计持开放态度并积极寻求灵感。您拥有的知识越多,设计您的第一个网站就越容易教育通知直觉。

Abduzeedo是一个多学科设计的项目集合,展示了各个领域的声音设计实践。

在开始之前准备好内容

将内容放在首位意味着在开始设计第一个网站之前准备好内容。

它不一定是完美的。您可以随时编辑和优化Google SEO(搜索引擎优化)。但至少要草拟一下将要生效的内容将有助于确保设计的布局能够适应它。使用真实内容进行设计可以更好地表示网站的外观和功能。它还使您有机会在设计过程的早期进行更改。

对于博客,您需要准备好在CMS中测试的帖子。在你发布之前写了几个帖子将节省争抢事后的事情。

保持您的设计简单直观

无论是写作,导航还是CTA,没有人愿意为您的设计而烦恼。

您的设计方法应该植根于简单和有序。逻辑应该轻松引导某人通过该网站。因为我们谈论的是那些与你创造的东西互动的人,所以这是一个介绍用户体验的好地方。

了解用户体验(UX)基础知识

网站不仅仅是在空间中浮动文本。配色方案,内容,排版,布局和图像都汇集在一起,为观众服务,激发情感。在你创造的数字空间中徘徊的人应该有一条没有障碍的清晰路径。

UX专注于了解您的受众。他们在寻找什么 - 您的设计将如何轻松找到它?用户体验是关于进入观众的头脑,通过他们的眼睛看到你的设计。

在构建您的第一个网站时,请牢记以下指导性UX原则:

  • 使事情简单直观
  • 以逻辑顺序传达概念
  • 满足您的观众的需求,抵制诱惑,以牺牲可用性为代价来展示您的技能

了解您的观众将帮助您制作出符合其需求和需求的设计。查看我们的初学者用户研究指南,了解有关如何执行此操作的更多见解。

了解用户界面(UI)基础知识

如果您不熟悉Web设计,可能会对UI和UX之间的区别感到困惑我们大多数人都是。知道这一点 - 它们是两个截然不同的概念。

UX涉及设计的整体感觉,UI就是具体细节。如果您在电梯中,UI将是楼层按钮的大小和布置,而UX将包含电梯空间的颜色,纹理和其他室内设计选择。用户界面是指为某人提供体验您的网站所需的工具,而不会出现复杂情况。

在构建您的第一个网站时,请牢记以下UI原则:

  • 互动元素的功能应该是显而易见的
  • 统一性必须指导可用性 - 行动应遵循逻辑模式
  • 设计选择应该有明确的目的


查看10个重要的UI设计技巧,深入了解UI。

使用设计原则来指导您的初学者网页设计过程

有效的设计遵循某些规则,在开始之前了解基本的网页设计技巧很重要有一些标准做法可以简化流程并制作更精致的最终产品。

布局

如果您想设计和构建网站,理解良好的布局是关键。我们建议保持最小化,只使用少数元素来专注于完美的位置。

当你第一次开始设计时,请考虑网格。网格以创建顺序的方式对齐元素,如div块和网页上的图像。

布局的结构应遵循视觉层次结构。您希望人们看到的重要想法是什么,以什么顺序?视觉层次结构需要遵循人们在阅读时使用的常见模式。人们通常会在网络上看到两条路径:F模式和Z模式。熟悉这些模式的工作方式将有助于您组织自己的内容。

对于具有密集内容块的设计,F模式更常见。人们的眼睛将扫描布局的左侧,直到事情引起他们的注意,然后从左到右阅读。想象一下,在餐厅的菜单中查看 - 您可以跳过左边对齐的大胆菜单,直到您找到抓住您的东西,这将提示您阅读解释该特定菜肴的支持细节。

大多数人会在这个F模式中阅读类似博客文章的内容。使用左对齐文本和项目符号,Nelson Abalos利用这种设计技巧,使他的帖子易于导航和跟随。

Z模式与较少文字重的设计相关联。许多登录页面符合此模式。保护指南网站上的所有主要元素都遵循Z模式。如果您是初学者网页设计师,这是一个简单的布局技巧,以帮助实现。


颜色


你拥有彩虹的颜色和超越你的颜色。而且我们都知道“以强大的力量来承担巨大的责任。” 颜色选择器的力量可以用于善或恶。

以下是为您的第一个网站选择配色方案的几种直接方法。

单色

使用单色作为基础,改变饱和度,包括灯光和黑暗,并使用各种色调进行均匀的配色方案。无论您的利基是什么,单色网站都是一个聪明的设计选择。请记住,无论您为文本选择何种颜色,请确保您对可读性有所考虑

Unique的这个例子中,每个部分由单色配色方案描绘。您不必在初学者设计中获得这种想象,但很高兴看到他们使用不同的单色颜色变化。请注意每个部分是如何由与特色包相关的颜色组成的?这是一个很好的设计技巧,使和谐的配色方案。

补充

获取色轮上相反的颜色并将它们组合在一起。够容易吧?

小心使用补色。Ignisis网站的下面这个设计中,设计师使用了不同组合的蓝色和橙色以及空白和灰色的布局,从不眼睛。对比感清爽爽口。

活版印刷

Webflow附带了多种字体选项以及添加更多字体的选项。
排版是二维架构,基于经验和想象力,并以规则和可读性为指导。

-Hermann Zapf

那么新手设计师需要知道的规则是什么?

排版通知语气

想想结婚请柬或葬礼公告。两者都是深刻的生活事件 - 一个是快乐的庆祝活动,另一个通常是更加忧郁。凡华丽的华丽字体适合婚礼,它不适合举行葬礼。

在设计您的第一个网站时,请记住基调。如果你想要一个轻松的氛围,就像美食博客一样,编织有趣的字体是有道理的。但如果你正在为律师事务所制作一个网站,那就坚持使用更专业的字体。

衬线与非衬线

新设计师的一个常见错误是混合serif和non-serif字体。您可以区分它们,因为衬线字母的末端有垂直或水平添加的额外线条或笔划。

查看PT Serif和PT Sans(没有serif)之间的差异。

这是PT Serif:



这是PT Sans:



当我们阅读的大部分单词都是用纸上的墨水打印时,衬线是印刷机时的一件神器。Serifs将单词锚定在页面上并使其更易于阅读。在网络的早期阶段,网页设计师避开了衬线,因为较低的屏幕分辨率会稀释它们。现在屏幕更适合衬线排版,他们已经卷土重来。

那些小线条产生了巨大的差异。您会注意到上面的PT Serif字体感觉更正式,sans-serif版本看起来更轻松和宽松。

由于衬线字体更复杂,因此它们最适合用于审核。标题是serif字体的理想位置,更大的内容块可以从更简化的字体中获益,而不需要衬线。

装饰与实用性

蓬勃发展的字体的循环和螺纹将为设计增添个性和优雅,但不要过度使用褶边字体。网站是通过内容与受众进行沟通。正如Hermann Zapf所说,可读性是字体最重要的特征之一。

排版技术性

排版有很多值得学习的地方。当您作为设计师进步时,您需要知道如何在排版中使用线条高度,字距调整和不同的权重。但是不要太过于陷入调整你的第一个网站的所有复杂性。专注于确保一切都是可读的 - 您可以稍后尝试微调细节。

查看“ Web Typography 101 ”以了解有关排版及其样式的更多信息。

开始设计

教程和研究对您的学习非常宝贵,但您最终只需要深入挖掘并进行设计。即使你创造了一个没有人会看到的东西,它仍然是一个运动问题解决和应用你学到的东西。不要担心,如果它不令人惊讶。但是要为那些从有抱负的设计师到实际成为一个设计师的门槛而感到自豪 - 你正在路上!

得到反馈

你完成了第一个设计 - 祝贺你!你努力工作,并准备向世界展示它。但是在你发布之前,要对你所做的事情有所了解。

获得建设性的批评可能会让人感到不舒服。创造一些东西,无论是文章,绘画还是网站都是一种脆弱的行为。你投入世界的事情是你是谁以及你有能力的延伸。被告知你所做的更好或者错了可能感觉像是一次人身攻击。

在网页设计中,反馈是流程的正常和必要部分。学习如何将自我放在一边,并将反馈与自我价值分开。随着您获得经验,您将能够识别并实施实用,有用的反馈,并放弃其余部分。您会发现更有经验的设计师知道成为初学者是什么样的 - 他们很高兴看到经验不足的设计师取得成功。

如果您正在使用Webflow进行设计,请在Webflow Showcase中共享您的工作或在Webflow设计论坛中请求帮助随着您的进步,您将要提交到


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"初学者的网页设计:一个简单(但完整)的指南",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560