你的网页将呈现什么样子？在你编写代码之前讨论好你的计划和设计工作，包括：“我的网页要呈现什么信息？” “我想要什么字体和颜色？” “我的网页有什么用处？”
第一步：做出计划
在做任何事之前，你需要一些主意。我的网页到底有什么作用？一个网页基本可以做任何事，但是你的第一次尝试应该让事情简单点。我们将以编写一个简单的网页开始，包括一个头部，一张图片和几个段落。
开始之前，你需要回答这些问题：
- 你的网页内容是什么？你喜欢狗狗，纽约或者吃豆人吗？
- 你的主题中要展示什么信息？编写一个标题和几个段落，再想几张你想展示出来的图片。
- 你的网页长得什么样？用高级一点的术语来说就是，你的背景颜色是什么？什么字体合适：正式的，卡通的，粗体的还是微小的？
提示：复杂的项目需要详细的参考手册，内容包括 颜色，字体，网页中各项目的间距。适合的编写规范等等。参考手册有时也被称为设计指导或者品牌手册，你可以在 Firefox OS Guidelines 查看一个参考手册。
为你的设计出一个草稿图
接下来，拿一支笔和一张纸然后粗糙地画出你希望你的网站呈现出来的样子。对于你的第一个简单网页，并没有什么好做的，但是你现在应该养成这样的习惯。这真的很有用——你并不需要成为下一个梵高！
提示：即使是在真正的复杂的网站中，设计团队也是首先在纸上画出草稿，然后在图形编辑器中或者使用Web技术作出数码模型；
Web团队通常包括一个图形设计师和 用户体验设计师 。图形设计师，很显然，是将网页视觉部分组合在一起。用户体验设计师则负责更具体的部分，如用户如何浏览和与网页交互。
选择你的内容
现在，最好以将最终将呈现在你网页上的内容放在一起开始。
文本
你应该还记得之前的段落和标题。
主题颜色
要选择一种颜色，访问 the Color Picker 找出你喜欢的颜色。当你在一种颜色上点击时，你会看到一个奇怪的六位编码像 #660066。这是十六进制编码，并且表示了你的颜色。拷贝下来并将它暂时保存在安全的地方。
图像
要选择一个图像，访问 Google Images 搜索合适的内容。
- 当你找到想要的图像时，在图像上单击。
- 按下 查看图像 按钮。
- 在下一页，右击图像（或者在Mac上 Ctrl + Click），选择 图像另存为..., 然后选择一个安全的位置存放你的图像。另外可选的方法是， 拷贝你的浏览器地址栏上的图像地址以便后来使用。
提示：大部分网络上的图片，包括 Google 中的都是有版权的。为了减少你盗用版权行为的可能，你可以使用 Google 许可过滤器。只需 1）点击搜索按钮，然后 2）选择使用权利：
字体
要选择一种字体：
- 访问 Google Fonts 并把列表一直往下翻直到你找到你想要的。你也可以使用左侧的控制栏来过滤结果。
- 点击“+”(增加)图标旁边的你想要的字体 。
- 点击页面底部面板的"* Family Selected"按钮（‘*’取决于你选择的字体数量）。
- 在弹出框中，你可以看到并且复制Google 给你的代码片段保存至你的文本编辑器以便后续使用。