你的小程序看起来是什么样的？在你编写代码之前讨论好你的计划和设计工作，包括：“我的小程序要呈现什么信息？”，“我想要什么字体和颜色？”，和“我的小程序有什么用处？”。
第一步：做出计划
在开始您的开发之前，你需要一些主意。我的小程序到底有什么作用？一个小程序基本可以做任何事，但是你的第一次尝试应该简单点。我们将以编写一个简单的小程序开始，包括一个头部，一张图片和几个段落。
开始之前，你需要回答这些问题：
- 你的小程序内容是什么？你喜欢编程，新事物或者科学技术吗？
- 你的主题中要展示什么信息？编写一个标题和几个段落，再想几张你想展示出来的图片。
- 你的小程序长得什么样？用高级一点的术语来说就是，你的背景颜色是什么？什么字体合适：正式的，卡通的，粗犷的，还是精细的？
提示：复杂的项目需要详细的参考手册，内容包括颜色，字体，小程序中各项目的间距，合适的编写规范等等。
为你的设计出一个草稿图
接下来，拿一支笔和一张纸然后粗略地画出你希望你的小程序呈现出来的样子。对于你的第一个简单小程序，并没有什么好做的，但是你现在应该养成这样的习惯。这真的很有用——你并不需要成为下一个吴道子！
提示：即使是在真正的复杂的网站中，设计团队也是首先在纸上画出草稿，然后在图形编辑器中或者使用网站技术作出数码模型；
网站团队通常包括一个图形设计师和用户体验设计师 。图形设计师的作用很明显是将网页视觉部分组合在一起。用户体验设计师则拥有一个某种更抽象的角色来解决用户如何浏览和与网站交互。您将在工作在不同的工作内容之间.
选择你的内容
在这个时候就可以开始将最终呈现在你的小程序上的内容放在一起了。
文本
你应该还记得之前的段落和标题，确保它们在身边。
主题颜色
要选择一种颜色，访问 色彩选择工具 找出你喜欢的颜色。当你在一种颜色上点击时，你会看到一个类似于 #660066 的奇怪的六位编码。这是十六进制编码，并且表示了你的颜色。复制下来并将它暂时保存在安全的地方。
图像
要选择一个图像，访问 搜索引擎 搜索合适的内容。
- 当你找到想要的图像时，在图像上单击。
- 按下 查看图像 按钮。
- 在下一页，右击图像（或者在 Mac 上 Ctrl + 点击），选择 图像另存为…，然后选择一个安全的位置存放你的图像。另外你也可以复制你的浏览器地址栏上的图像地址以便后来使用。
提示：大部分网络上的图片，包括 搜索引擎 中的都是有版权的。为了减少你盗用版权行为的可能，你可以使用 搜索引擎 许可过滤器。点击工具按钮，然后在使用权限的选项下选择可再利用之类的选项.