当没有UI设计师时,WordPress代码人员应该知道的建议!

导语:有时候你必须匆忙地设计一些东西,而设计师却无处可寻。在这种时候,我们不能坐着哭–我们必须砍掉设计。这里有一些方便的WordPress设计技巧,可以帮助任何开发人员获得成功,即使最后期限迫在眉睫。

明智地选择您的设置

如果你赶时间,找一个带有预先设计的布局和演示页面的WordPress主题。使用可视化构建器(如Elementor或Beaver Builder)快速排列布局和设置样式,并添加预先存在的元素。通过这样做,您可以在几个小时内启动并运行一个功能站点。是的,如果你不小心,它可能看起来有点普通,但它很管用。考虑添加自定义设计和动画,使其成为您自己的。

微妙一点

这可能是任何人能给你的最重要的提示之一。

对美学和设计有眼光的设计师可能会偶尔发疯。然而,如果你没有与生俱来的能力说出6种蓝色的名字,保持微妙会更安全。尝试极简主义的设计,带有飞溅的五颜六色的口音和一些微妙的动画。

要想让极简主义风格奏效,你应该在细节上多下功夫。对您来说幸运的是,我所讨论的细节可以使用您最熟悉的东西-代码来设置样式。

如果你知道自己不擅长,不要使用Photoshop或Illustrator。
我已经积极使用Photoshop 10多年了,但我在Upwork Photoshop测试中还是勉强得了个“C”。想象一下,当我发现自己只使用了Photoshop 30%的功能时,我有多惊讶。人工智能也是如此。我想说的是-如果你擅长代码和CSS-使用CSS。这会为你节省很多时间。

使用您熟悉的应用程序和工具。这将帮助您更快、更高效地进行设计。有些人发现Canva是一个非常简单直观的解决方案。

学习Sass或Less

Sass和Less是CSS扩展语言。它们为CSS添加了额外的方便特性和功能,如变量、函数、嵌套、算术运算和混合。有关详细信息和文档,请查看他们的官方网站。

  • https://sass-lang.com/。
  • http://lesscss.org/。

我知道这不是你几天内就会做的事,但它值得将来考虑。一旦您学习了这些语言扩展之一,您将极大地改进和加快您的工作流程。

根据您的需要修改其他人的代码

有很多令人惊叹的人免费分享他们的代码。如果你时间紧迫,调整现有的设计可能是你祈祷的答案。我最喜欢的地方是Codesen上的设计模式。您会发现预编码的按钮、手风琴、滑块、布局等等。

尽可能使用SVG图像

SVG图像是可缩放的矢量图形。将它们用于您网站上的徽标、图标和其他图形图像。即使放大了,它们也不会降低质量。

请注意SVG的全部功能:

  • 可以使用任何文本编辑器创建和编辑SVG图像。
  • 可以搜索、索引、编写脚本和压缩SVG图像。
  • SVG图像是可缩放的。
  • SVG图像可以在任何分辨率下以高质量打印。
  • SVG图像是可缩放的。
  • 如果缩放SVG图形或调整其大小,则不会损失任何质量。
  • SVG是一种开放标准。
  • SVG文件是纯XML文件。

使用Javascript库和框架

我真诚地希望您不是那些仍然只使用PHP的WordPress开发人员中的一员。JavaScript是这个时代的编程语言,这是有原因的。

JavaScript如此流行的部分原因是它有大量的开源库、框架和扩展。利用这些免费资源将使您的工作更快、更好、更有效率。

想知道如何以正确的方式向WordPress添加库吗?幸运的是,我们有一个正好适合你的东西–一个关于如何在WordPress中加入JavaScript的教程。

这里是已经包含在WordPress中的第三方JS库的列表。您不用排队就可以马上使用它们。

  • Backbone.js。
  • CodeMirror。
  • cropper。
  • jQuery。
  • jQuery.imageareaselect。
  • jQuery.Jcrop。
  • jQueryUI。
  • ThickBox。
  • TinyMCE。

挑选2种颜色

挑选一种主色和一种次色,它们彼此搭配得很好。使用材质调色板和颜色计算器等应用程序来帮助您完成此任务。在所有您想要炫耀色彩的元素上一致地使用您的主色和次要颜色。对于布局、背景和文本,相应地向调色板添加中性效果。不要在混合中加入太多的颜色。保持最低限度。

选择2种字体

挑选两个你将在网站上使用的字体系列。无衬线字体更适合标题和标题,而衬线字体更适合文本内容。在上一篇文章中,我已经写了更多关于选择字体对和调色板的内容。

为徽标付费

很抱歉打断你,但是设计徽标不是你应该自己去做的事情。标志是每个公司最重要的视觉元素。这是您公司的视觉标识,您会希望它做得很好。避免使用通用徽标创建者,并付钱给设计师。如果有必要的话,可以雇个自由职业者。如果钱是问题,试着找一个充满新鲜想法但收费可能会低得多的设计系学生。

选择高质量的库存照片和视频

你的客户没有给你提供网站的照片吗?或许他们是这样做的,但他们是模糊的,像素化的,简直超出了可怕的地步,不是吗?

我们都经历过。最简单的解决方案是使用高质量的库存图像。有大量的免费和专业的图片库可供选择。

我个人最喜欢的是免费库存照片的Unspash和各种资源的Freepk。

最流行也可能是最大的两个免费库存图片库是https://www.pexels.com/和https://stocksnap.io/。

这些网站上的许多库存照片都被用作WordPress主题的演示内容。避免使用你在周围看到的照片,因为你的网站会看起来很普通。如果你正在寻找一些具体的、不那么“陈旧”的东西,我推荐像https://www.reshot.com/这样的网站,它有精心挑选的照片。另一个选择是https://nos.twnsnd.co/,它包含来自公共档案馆的复古照片,可以不受任何版权限制地使用。

对于优质库存照片和视频,您的第一站应该是:https://www.shutterstock.com/和https://www.gettyimages.com/。

这个德国网站也值得一看:https://www.photocase.com。

在寻找无可挑剔的图片时,不要贪图便宜。如果你找到一张完美的优质图片或视频,那就付钱吧。这将是值得的。

您可以使用CSS图像过滤器来增强您的库存照片和WordPress站点。

优化图像

别忘了为网络优化图片。下载库存照片时,请将其缩小到您将使用的大小,然后再将其上传到WordPress。对于进一步的压缩和优化,我推荐Smush插件。

如果您使用Photoshop或类似工具来润色照片,请确保使用存储为Web格式选项。将具有多种颜色的照片和图像保存为.jpg文件,并将图形保存为PNG格式。存储为Web格式时,您可以选择jpg和png文件的质量。这没有真正的规则-使用预览屏幕,并确保在保存之前没有完全破坏图像质量。

有一个清晰的CTA

Call to Action(CTA)是您与用户交互的方式。从某种意义上说,如果用户点击一个CTA,他们就是在实现一个网站的目的。

这就是为什么你必须确保CTA按钮清晰可见、易读和易读的原因。与纽扣的样式保持一致。

CTA放在哪里?营销人员对此有一整套科学的方法。这显然取决于你网站的内容,我唯一的建议是让它脱颖而出。

别忘了你的移动用户。同样的CTA规则不适用于移动和台式机。了解移动CTA的最佳实践。

如果处理得当,动画会很酷

创建简单的CSS或JavaScript动画可以真正提升您的设计,使其看起来精美和专业。秘诀是,再说一次,要小心谨慎,不要做得过火。

很好的例子:

https://www.monogranofelicetti.it/en/。

https://affinity.pt/en/about/。

“你能做的最糟糕的事”的例子:

https://www.lingscars.com/。

图标-扮演大角色的小玩家

图标在你的网站中是极其重要的一部分,特别是如果你听从了我的建议,选择了极简主义的设计。优雅的图标可以有效提升你的整个网页设计。

作为一名开发人员,您应该意识到创建好的图标是相当困难的。想都别想从头做起。在https://www.flaticon.com/或https://icons8.com/等图标库中查找一些免费图标。

我更喜欢flaticon,因为你可以找到同一作者的图标包。找到一个与您的徽标或网站风格相匹配的图标包,它将为您省去大量的麻烦。千万不要把不同包的图标混在一起–那样看起来很不专业。

对于额外的样式点,请考虑设置SVG图标的动画。要做到这一点,最好的方法是使用snap,这是一个为制作SVG图形动画而创建的javascript库。无论出于什么原因,如果您根本不想编码,您可以使用SVGator应用程序。这是一款付费应用,免费试用一个月,值得一试。

细节中有魔鬼

要想让极简主义风格看起来不错,你必须撸起袖子,在重要的细节上投入一些额外的努力。这一切都可以使用代码来完成。

这并不全是黑白分明的

避免纯黑#000或纯白#FFF颜色。它们太刺眼了。使用稍微柔和一点的变体,比如#EFEFEF代表白色,#181818代表黑色。

边界老气

尝试使用CSS框阴影属性而不是元素上的边框。它会让你的设计更圆滑、更精致。

实心的1px或2px边框在某些设计上看起来很酷,而且很复古。但是,请不要使用虚线或虚线边框。

设置您的


样式

分隔符通常是乏味的元素,如果您向它们添加一点代码,就可以产生真正的积极影响。

Elementor页面构建器还有一个非常酷的功能,可以设置分隔符的样式。

正方形很无聊,不要成为使用正方形的人

不规则的造型更能吸引人们的注意。对于较高层次的CTA或按钮,请适度使用它们。

设计你的汉堡包菜单

汉堡包菜单是移动设备的必备菜单,但它们在宽屏幕上也可以看起来非常酷。我在CodePen上找到了一套精美的汉堡包菜单,我想和你们分享。如果您不知道如何制作汉堡菜单,请阅读本文中的教程。

使用渐变

与其使用单色背景,为什么不试一试渐变呢?您可以轻松地创建自己的渐变与Colorzilla渐变编辑器,并简单地复制CSS代码到您的WordPress站点。

不要为渐变中的颜色数量而疯狂,注意不要完全冲突颜色。如果您在创建自己的颜色组合时遇到困难,或者您不知道哪种颜色效果很好,您可以随时选择使用免费的预制渐变。

渐变还可以用作背景照片、图标、按钮和其他设计元素的覆盖。这是一个非常巧妙的创造一致性的技巧。如果你想在背景图像上叠加渐变,可以使用&:before属性(Sass)来添加渐变,只需将其不透明度降低到60-70%即可。

让我们回顾一下

如果您很匆忙,请明智地选择您的设置。安装一个快速极简主义主题,并为其导入演示内容。设计细节样式,使您的设计看起来更专业,不那么通俗。尽可能多地使用您的优势(代码)。始终选择经过测试的颜色组合、高质量图像和库存视频素材。请记住使用与您的网站相同的作者和风格的图标包。花点钱买个徽标。最重要的是,不要忘记与您的设计保持一致和微妙。

代码设计愉快!

发表评论

电子邮件地址不会被公开。 必填项已用*标注