4分钟网页设计
作者：Jeremy Thomas
译者：张宝
原文地址：http://jgthms.com/web-design-in-4-minutes/
译文地址：http://123.56.108.61/web-design-in-4-minutes/（推荐）
我假设你有一个产品，文件夹或者仅仅是一个想法，想发布在自己的网站上与大家分享，在这之前，你想让它看起来迷人、专业至少看上去体面些。那么你要做的第一件事是什么?
1. 内容（Content）
设计的目的，是为了提升你提供的内容的展示效果。 听起来可能是废话, 但是内容确实是一个网站的基本元素，你在建站前就应该考虑它。书写像你现在读到的段落内容, 组成了一个网站 90% 还要多的部分，给这些文本内容添加样式的规则也有很多。我假设你已经准备好了内容，并且刚刚建立好一个空的 style.css 文件, 那么你要书写的第一条规则是什么?
2. 居中（Centering）
长文本很难解析，也很难阅读。 设置每一行可以显示字数的限制，很大程度上能提升文本墙的可读性和吸引力。
body { margin: 0 auto; max-width: 50em; }
给文本块添加完样式后, 怎样给文字本身添加样式呢?
3. 字体（Font family）
浏览器默认字体是“Times”，看上去没有吸引力(大多是因为它是“无样式”字体)。转换到 sans-serif 字体，像 “Helvetica” 或者 “Arial” 可以很大程度上提升页面的观看效果。
body { font-family: "Helvetica", "Arial", sans-serif; }
如果你想坚持用 serif 字体，可以试试 "Georgia"。
我们已经让文本看起来更加有吸引力了， 让我们再把它变得可读性更好一些。
4. 间距（Spacing）
当用户觉得页面看起来“很烂”时， 通常是间距的问题。给你的内容周围和内容本身提供间距可以增加页面的吸引力。
body { line-height: 1.5; padding: 4em 1em; } h2 { margin-top: 1em; padding-top: 1em; }
到现在为止，布局发生了很大的改观，让我们再做一些细微的改变。
5. 颜色和对比（Color & contrast）
白色背景下的黑色字很刺眼，可以为网页文本选择较为柔和的黑色让网页读起来更舒服些。
body { color: #555; }
为了保持适度的对比，我们选择较深的颜色标记重要的文字。
h1, h2, strong { color: #333; }
现在，页面中的大部分都已经得到改善了, 可还有一些原 （比如代码段）看起来还有点不合适.
6. 平衡（Balance）
只需要花费额外的几步，就可以调整页面的平衡:
code, pre { background: #eee; } code { padding: 2px 4px; vertical-align: text-bottom; } pre { padding: 1em; }
到这个节骨眼上了，你也许想让你的页面突出并且有特色。
7. 基础颜色（Primary color）
许多商标都有基础颜色，扮演着一种视觉上的强调。在一个网站上，这种强调被用来提供给可交互的元素，像超链接。
a { color: #e81c4f; }
但是为了保持平衡，我们还需要一些额外的颜色。
8. 第二颜色（Secondary colors）
强调颜色还可以根据具体情况，分成更多细微的颜色，用在边框、背景甚至是网页的文本。
body { color: #566b78; } code, pre { background: #f5f7f9; border-bottom: 1px solid #d8dee9; color: #a7adba; } pre { border-left: 2px solid #69c; }
已经改变了颜色, 为什么不改变形状呢...
9. 自定义字体（Custom font）
既然文本是一个网页的主要内容，使用自定义字体能给予网页更加引人注意的特征。
你可以内嵌你自己的网页字体或者使用线上的服务，比如 Typekit。下面我们采用免费的 Google Fonts 服务的 “Roboto” 字体 :
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500'; body { font-family: "Roboto", "Helvetica", "Arial", sans-serif; }
通过文本提升网页特色后, 我还要添加更多的内容...
图片和图表可以当做装饰品支持你的页面内容，或者灵活地加入你想传递的信息。
让我们用超赞的背景图片来改变我们的网页头部。
header { background-color: #263d36; background-image: url("header.jpg"); background-position: center top; background-repeat: no-repeat; background-size: cover; line-height: 1.2; padding: 10vw 2em; text-align: center; }
再加上 logo。
header img { display: inline-block; height: 120px; vertical-align: top; width: 120px; }
再提升一下文本样式。
header h1 { color: white; font-size: 2.5em; font-weight: 300; } header a { border: 1px solid #e81c4f; border-radius: 290486px; color: white; font-size: 0.6em; letter-spacing: 0.2em; padding: 1em 2em; text-transform: uppercase; text-decoration: none; transition: none 200ms ease-out; transition-property: color, background; } header a:hover { background: #e81c4f; color: white; }
看！我们在短短的几分钟之内就设计好了一张页面，遵循网页设计的基本原则。
如果你想学习更多网页设计的知识，可以查看 MarkSheet —— 我提供的免费 HTML 和 CSS 教程。
或者你想马上开始，可以试试 Bulma —— 我开发的基于 Flexbox 的 CSS 框架。
感谢阅读！
（完）