画布与内容区
从0到1设计网站，（除了产品用户调研外）首先第一步就是新建画布，画布的尺寸取决于应用设备分辨率的市场占有率，下图是网上可查到的2021年PC端分辨率的市场占比表。
表中可看出「19201080」分辨率是市场占比最高的分辨率，可以以这个分辨率为基准进行设计。排名前三的分辨率「19201080」、「1366768」、「1440900」市场占比达到了62.75%，因此也可以基于兼容性原则，考虑小屏适配大屏优于大屏适配小屏，选择「1440*900」为设计尺寸进行设计。目前阿里巴巴和Meterial Design的B端对外规范中，都是使用的1440这个分辨率尺寸。
如果你做的网站是面向某个确定的群体，也可以以真实用户的设备作为基准，例如若公司员工都是使用分辨率为「1366*768」的笔记本办公，那么面向内部的网站就可以直接选择该分辨率作为画布标准。
网页的特性之一是必须在浏览器内打开，因此除了电脑分辨率，还需考虑浏览器占用高度，在非全屏打开时，甚至需要考虑电脑系统本身占用高度。
电脑系统会占用高度的有菜单栏和程序坞（或称任务栏），如下图所示：
浏览器占用高度，需考虑的浏览器功能区如页签栏、地址栏和书签栏，如下图：
主流浏览器界面参数可参考：
因此，严格来看真实首屏高度可以选择为电脑分辨率高度-浏览器高度-电脑系统占用高度，宽松点看，可以只考虑电脑分辨率高度-浏览器高度。
导航选择
常见的导航模式有左导航和顶导航：
2004年，学者JR Kingsburg在《A comparison of three-level menu navigation structures for web design》论文中做过侧导航与顶导航可用性研究，在论文中，他实验了8种导航模式（ 左导航 / 侧导航 x 一级/二级/三级导航） 对用户导航时间、犹豫度、鼠标移动过程、错误选择次数的影响，并对这8种导航模式进行了整体评价排名。