这篇文章的作者（我们今天将其翻译发表）说，他在14岁时就以学校项目的形式创建了自己的第一个网站。 然后他有一个简单的任务：开发一个包含一些文本，图像和表格的网站。 通常，他以这种方式与学校项目相关：起初他忘记了这些项目，而在截止日期到来时，他在最后一刻完成了它们。 但是，那时并非如此。 他对第一个网站的外观特别感兴趣。 然后，为了尽其所能，他尽了全力。 该材料的作者说，自古以来，他一直努力确保自己所做的一切看起来尽可能有吸引力。 这种渴望在他身上仍然存在。 他想在这里分享网页设计的技巧。
设计方案
它可以被识别，也可能未被识别，但是人们通过它的外观来判断任何事物。 如果您的工作看起来不错，那么您的项目赢得他人信任的机会自然会增加，如果“好”一词不仅可以描述其外观，还可以描述其功能。
多年以来，我创建了自己的不同项目，在此期间，我越来越关注我的设计能力的发展，而不仅仅是提高我的编程技能。 代码很重要，但是如果您要创建自己的有利可图的项目，则必须解决很多问题，其中之一就是设计。 一个孤独的开发人员为了取得成就，必须全面发展自己。
出色的设计不能将
Dribbble上的
许多喜欢的东西放在一起。 起初甚至没有注意到这一点。 这是在完全简单和令人叹为观止之间取得平衡。 设计既可以是项目的竞争优势，也可以是项目失败的原因之一。
与人才无关
小时候，我经常玩《我的世界》。 我看着别人创造的美丽，但是当我尝试建立自己的东西时，所有东西看上去都像盒子一样。 既不美丽也不时尚。 而且，您如何在Minecraft中做一些漂亮的事情？
然后，我在YouTube上找到了一位视频博客作者，并复制了他所创建的内容。 几周后，我形成了自己的风格，并且已经可以创建自己的风格。 突然，我的设计停了下来，似乎还不清楚。 我能说什么，我什至赢得了一场比赛。
实际上，我向这个故事讲的是设计是一种技能，并且可以像其他任何技能一样掌握设计。
工具选择
在编程中，您可以使用普通的记事本并使用它编写与使用功能强大的IDE创建的应用程序绝不逊色的应用程序，尽管在记事本中进行编程可能不是最令人愉快的任务，并且开发过程可能会比使用记事本更长的时间。使用正确的工具。 如果我们谈论网页设计，则这里的记事本可以由MS Paint扮演，并且我希望像在具有记事本和编程的示例中一样，很少有人会使用它来解决设计问题。
流行的网页设计工具以下是一些流行的网页设计工具：
- Sketch是MacOS专用的工具。 如果您将网络编程与世界相提并论，那么它将像React那样进行设计。 感觉到在设计师的每个空缺中都提到了Sketch。 这东西每年花费99美元。
- Adobe XD是一个免费的跨平台工具，继续其类似于编程的方式，类似于Vue。 在Adobe XD周围，社区的形成不像在Sketch周围那么大，但是掌握此工具非常简单。
- Adobe Photoshop就像是设计界的瑞士刀，众所周知，它可以与jQuery相提并论。 您可以每月9.99美元使用Adobe Photoshop。
使用Sublime或VS Code编写代码几乎没有区别。 关于是否选择React或Vue进行界面开发也可以这么说。 这是一个品味问题。 关于设计器工具也可以这样说。 它们每个都有自己的优点和缺点。
我使用Adobe XD。 做出此选择的主要原因是跨平台，因此，就像我选择Sketch一样，我不是Apple生态系统的人质。 此外，Adobe支持Adobe XD，因此您可以希望该项目存在很长时间。 自2018年5月以来，尽管有一些限制（尽管它们不太可能干扰您），但Adobe XD自2018年5月起可以免费使用，这对于初学者而言将特别高兴。
关于正确的心情
进入网页设计世界时，我必须解决的主要问题是培养正确的态度。 以前，我从事网站的设计过程。 我认为所有事情都应该按一定顺序安排。 元素从左到右，从上到下放置。 的确，这样的方法是成为可怕的设计师的肯定方法。
设计工具使您的工作就像每个元素都具有绝对定位一样。 在程序代码中可以看到清晰的结构之后，设计人员操作的结构似乎杂乱无章。 但是必须接受。 这提供了自由，可以快速更改所有内容并进行大量实验。 这也许是最重要的，因为设计是一个持续的过程。 在设计中，完全可以预期，在获得出色结果之前，您通常将不得不重做很多事情。
学习工具
在为网页编写代码时，将使用HTML元素，例如
div ，
span ，数据输入字段，从而允许浏览器将它们转换为可以在屏幕上看到的内容。 通过使用设计工具，您将有机会摆脱调解并直接使用视觉元素，例如几何形状或文本片段。
我选择了四个最常用的设计器工具，因为它不是很多，所以您可以花太多时间来开发这些工具。 实际上，时间最好花在设计上。 也就是说，快速了解基础知识后，您可以立即开始练习。 让我们以Adobe XD为例来讨论这些工具。
▍矩形工具-矩形
矩形是设计中最常用的几何图形。 在设计时，您会发现自己一直在与他们合作。 将该矩形视为HTML
div元素。 矩形用于设计各种页面元素-从文本字段到容器。
长方形▍工具文字-单行标签
乍看起来，处理文本非常简单。 但是，有一个功能，其特征在于，用于处理文本的工具具有两种操作模式。 其中一项旨在创建单行题词，第二项旨在创建多行测试块。 幸运的是，尽管具有此功能，但用于文本处理的工具仍易于学习和使用。
在设计用于单行题词的第一种模式下，文本容器的大小被调整为包含在其中的文本的大小。 这类似于
span标记，不同的是，除非您明确使用换行符，否则此类容器中的文本不会自动换行。 这种操作模式的优势在于容器的大小会自动调整为包含在其中的文本参数。
要创建单行文本片段，请在Adobe XD工具栏中选择“文本”工具，单击文本的位置，然后输入。 通常应将此模式用于单行题词，其宽度可以自动选择。 这些是单行对象标题和标签。
文字工具-单行标签▍工具文字-大块文字
用于处理文本的工具的第二种模式用于形成给定大小的文本容器，其行为类似于具有给定宽度的
p标签或位于网格单元中的
p标签。 这种状态的优势在于它可以控制文本块的大小。 要创建文本片段，您需要选择“文本”工具，然后选择该片段应占据的区域。 实际上，此模式应用于多行文本片段。
文字工具-多行文字片段▍选择工具-选择对象
使用“选择”工具，可以移动，调整大小和复制对象。 在下图中，您可以看到此工具的辅助元素，即有助于确定对象之间距离的粉红色线和便于对齐对象的蓝线。
选择工具▍工具线-线
有时，这些行非常有用，例如，用于分隔页面元素。 因此，我们在这里谈论线工具。 从技术角度来看，您可以将Rectangle工具用于同一件事，但是您可以做什么，HTML
div元素可以用于实现任何事情。
线工具设计：建议和技巧
▍布局
在Web开发中，布局通常由页面标题，菜单，页面内容和页脚表示。 所有这些都是布局的一部分，但是布局本身不仅仅是这些部分的总和。 布局是元素在页面上的排列方式。
例如，当我为
Sidemail设计信息页面时，我将元素均匀地放置在容器中。 下图的下部准确显示了此设计选项，我认为它是成功的，而上部则没有成功。 结果，与另一个选择相比，发生的事情被认为是更完整的东西，它比我认为不成功的那个看起来更准确。
布局不成功的例子▍颜色
在为下一个项目选择颜色时，请注意诸如
颜色心理学之类的概念。 要找到基于原色的良好颜色组合，可以使用
Paletton项目。
若要创建可视页面层次结构，请使用前景色和文本颜色的阴影。 使用彩色背景时，请尝试使用用于文本的颜色阴影。
使用颜色和文字的示例▍排版
用于不同标签的字体强烈影响页面的感知，因此请谨慎选择它们。 通常，商业字体看起来比Google字体中的字体更好，但是，如果您刚开始是一名Web设计师，则不应浪费金钱购买字体。 即使在Google字体中，您也可以找到不错的选择。
为了在视觉上分隔文本片段，我经常使用该技术，该技术在于以下事实：铭文由大写字母制成，字符之间的距离增加了。 大写文本是对称的，看起来很吸引人，但是它们更难阅读，因此不要太过随意。
大写文本示例主页（或登陆）设计
我总是尽量避免创建时尚设计的诱惑，然后将我想通过页面进行交流的内容压缩到其中。 相反，我强调了项目的优势（而不是其功能），从中创建一个故事，并使用视觉上吸引人的页面讲述这个故事。
了解了我想通过页面讲述的故事后，我通常会开始寻找灵感。 对我来说，灵感来源是
land-book.com项目，该项目是供您投票的登陆页面设计的大量优秀目录。 您可以寻找灵感的另一个项目是
interfaces.pro 。 它允许您选择某些类型的页面，例如，它可以是带有价格信息的页面，404页面或带有站点信息的页面。 我一直在观察所有这些内容，直到找到足够的我喜欢的站点为止，这些页面的外观与我对我所从事项目的风格的想法相对应。
登陆页面在对所需内容形成总体思路之后，该解决解决将所有内容收集在一起的艰巨任务了。 不幸的是，没有简单的方法。 为了创造出好的东西，您需要做很多尝试，直到您喜欢得到的东西为止。
也许您想知道，如果一个星期前完全适合您的设计突然开始对您似乎不太好，但也许完全不可接受，这是否正常？ 这是完全正常的，实际上，如果您遇到这种感觉，那就更好了。 这是由于您在设计领域不断成长，学习并变得更好。 结果，昨天看起来艰巨的任务今天看起来并不那么复杂。 请记住这一点，您将不会感觉像是一只松鼠。
▍结论与建议
- 精心选择字体是区分好设计与坏设计的小事情之一。
- 图像很重要。 尝试至少在页面上使用适当的插图或照片。
- 使用颜色阴影建立元素的可视层次结构。 仅使用几种颜色是不够的，其中一种是主要的颜色，第二种是文本的颜色。
- 不要使用太宽的容器。 1100像素的宽度通常就足够了。
- 元素之间的空白是重要的设计元素。
- 网页讲述的故事应该建立在项目的优点上，而不是建立在功能上。
- 如果您觉得自己的想法已用尽，请在其他项目中寻找灵感。
Web应用程序设计（或控制面板）
与登录页面的设计一样，在创建Web应用程序时，您无需立即掌握页面上元素的排列方式。 所考虑的情况与前一种情况不同，在这里您不告诉访客故事。 这次您要创建一个工具，而您的主要目标是使此工具变得方便。 拿一张纸和一支铅笔，为您的应用程序制定工作计划。 考虑一下它的依赖关系，以及如何简化此应用程序的工作。
如有必要，请做一些草图或布局。 探索竞争项目的设计，考虑它们缺少什么。 也许您决定做他们没有的事情，这可能会成为您项目的竞争优势。 请记住，有时候，在绘制布局并弄清设计选项之前，您需要花点时间思考。
我可以在此处提供的与各种项目的特定功能无关的最佳建议是选择合适的页面布局。 通常，Web应用程序使用两种方法进行页面布局。 一个或另一个的选择取决于应用程序的目标。 我们谈论的是固定宽度的容器，以及充满整个屏幕的柔性容器。
网络应用▍定宽容器
我更喜欢使用固定宽度的容器，因为由于查看该区域的内容并不需要不必要的眼睛移动，因此使用户更容易集中在有限的区域上。 另外，使用固定容器的应用程序通常看起来更整洁，并且此类应用程序的新用户更易于浏览。 应当指出，由于容器的宽度有限，这种应用更难以设计。
以下是一些使用固定容器的Web应用程序示例：
Twitter ，
Buffer ，
DigitalOcean ，
Netlify ，
GitHub 。
▍柔性容器
灵活的容器非常适合Web项目（例如聊天，电子表格应用程序）或以其他格式显示的大量信息。 通常，在设计此类应用程序时，将尽可能多的数据放置在屏幕上非常重要。 柔性容器的缺点是屏幕上显示的大量数据可能会使用户感到困惑。
使用灵活容器的应用程序示例包括
Slack ，
Intercom ，
Hotjar ，
Google Sheets ，
Trello和
Spotify 。
▍结论与建议
- 为应用程序内容选择正确的容器很重要，原因有两个。 首先，页面布局将取决于此。 其次，为了切换到其他类型的容器，将需要认真的工作。 每个项目都是独特的，并且需要独特的解决方案，因此不要害怕尝试。
- 力求简单。
- 使用标签易于阅读的字体。
- 输出大量数据时，请使用可视层次结构。
- 分析竞争对手的决策，并发现缺陷，不允许它们出现在您的项目中，或者基于这样的分析，为您的项目提供机会，这些机会将成为其竞争优势。
总结
习惯于使用代码而不是视觉图像的开发人员可能会发现很难切换到设计浪潮。 但是设计是您可以学习的东西。 请记住，设计可以成为您项目的竞争优势，因此请注意设计并创建有吸引力且易于使用的网站。
亲爱的读者们！ 您认为一个孤独的程序员可以达到良好的设计效果吗？
