【译文】4分钟网页设计——Web design in 4 minutes

原作者:jeremy thomas

原文链接:Web Design in 4 minutes


短小精悍的文章,网页设计的重点要点都讲到了,可以视为设计原则,这列清单绝对实用!

建议可以看一下原文,在阅读的交互上也颇有趣~  下面便是译文:


让我们假设你有一个产品,一个投资组合,或者仅仅是一个你想要在自己的网站上与大家分享的想法。然而,在你将它发布在互联网上之前,你想让它看起来有吸引力,专业,或者至少足够体面。

你需要做的第一件事是什么?

内容

设计的目的是去美化或者丰富你的内容。这可能听起来很明显,但内容是一个网站的主要元素,它不应该成为一个事后的想法。

文字内容,比如你正在阅读的段落,就已经占据了90%以上的网页。文本内容的样式仍有很长一段路要走。

让我们假设你已经构思好了你想发布的内容并且创建了一个空的css文件,你可以写第一条规则是什么?

制定中心

长文章通常比较难以解析,因此阅读起来也会比较困难。因此,设置每行的字符限制则大大增强了文本的可读性和吸引力。

给文本块设置样式之后,文本自身呢?

字体

浏览器的默认字体为“Times”,这可能看起来缺乏吸引力(主要是因为它是“无样式”字体)。切换到一个无衬线字体像“Helvetica”或“Arial”可以大大提高页面的外观。

如果你坚持想用一个衬线字体,尝试“Georgia”。

这不仅可以使文本更吸引人,也使它更具可读性。

间距

当读者看一个页面而感觉到“破碎”的时候,那就是间距上出现了问题。在文本间和文本内创造适当的空间可以提高你的页面吸引力。

整体的布局到目前为止已经得到了很大程度的提高,接下来我们可以创造一些更加微妙的改变。

颜色和对比

白色背景上的黑色文字会造成眼睛的疲劳,选择拥有更加柔和阴影的黑色字体可以让阅读更加舒适。

为了保证一个不错的对比,让我们选择重要的内容添加更暗的色相

到现在为止页面上的视觉已经得到了大幅的提升,然而一些元素(如代码片段)似乎仍然不合适。

平衡

只需要一些额外的技巧来使页面达到平衡

此时,你可能想让你的页面突出并且给他以身份

原色

大多数品牌都有一个原色(主色)作为视觉符号。在网站上,这种视觉符号的运用可以强调交互元素,比如链接。

次要颜色

我们可以用一些更为微妙的色调来补充我们的主色,将它运用在边界,文本,或者甚至是文本

既然已经改变了颜色,为什么不尝试着改变形状

自定义字体

因为文字是页面的主要内容,自定义字体可以让你的网页的身份更加明显。

你可以尝试使用自己的网页字体,或者使用像Typekit这样的在线服务,这里使用来自谷歌的免费字体服务“Roboto”

通过文本提升了你的身份特征之后,要如何添加上千的字呢

图片

图标和图标可作为装饰物来支持你的内容,或者有效的帮助你表达出你的内容。

可以从 Unsplash 这个网站获取一些漂亮的背景图片来丰富你的内容

添加logo

同时提高文本样式

在几分钟内我们根据网页设计原则已经设计了一个像样的网页了!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,712评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,156评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,800评论 4 61
  • iOS 9设计规范 中文版 完整版译者注:本文译自苹果官方人机界面指南 iOS Human Interface G...
    海宁Hennie阅读 14,594评论 2 60
  • 每天都在笑 你猜我过的好不好.”
    听风喃阅读 1,315评论 0 1

友情链接更多精彩内容