“网站正在建设中”的页面设计指南

Under-Construction-Page-Design-50-Stunning-Examples-To-Inspire-Your-Own-2-tb-962x0_meitu_29

有时候网站需要一点装饰。

维护一个网站需要大量时间和耐心,你需要更新内容,刷新设计,甚至全部删除重新设计。这时候我们就需要制作“网站正在建设中”的页面。

虽然“网站正在建设中”的页面是暂时的,但仍需将它设计得好看、井井有条,这对品牌形象很重要。所以,戴上工具包背上工具箱,和我们一起来看看20个“网站正在建设中”页面的精彩案例。

01.使用清晰的阴影和干净的渐变

1

 George Vasyagin使用了一个图案元素搭配光滑的长阴影,和干净的字体、冷色调渐变背景为我们呈现了一个整洁、优雅、炫酷的“网站正在建设中”页面,用户会很乐意等待网站建设完成。

尝试用干净的无衬线字体搭配温和渐变背景打造锐利、专业的效果。

02.使用粗体字和柔和的颜色

2

 Themetide 用全屏照片搭配粗体字设计了一个简约、有效的“网站正在建设中”页面,用时尚的图片作为背景是一个简单、有效地利用空间的方法。做案例这种页面需要降低背景图片的对比度,如果背景图片中有太多明亮色调就把背景图片调暗点,以突出文案。

03.使用纯色和锐利的线条

3

想设计一个锐利、简约的页面?看看Inat Studio的设计,使用纯色和色块、纤细锐利的线条达到了这个效果,呈现了一个时尚、现代、专业的设计。

如果你想设计类似的网页,记住选一个和白色产生强烈对比的颜色以确保文案的易读性。举个例子,如果在这个案例中使用的是灰色而不是红色,我们将会很难看清文案,这点是需要避免的。

04.使用细微的文案和高对比色

4

 Benaissa 的设计展现了“网站正在建设中”的场景,他使用黄色、黑色两个对比强烈的颜色,在背景和字体添加了微小的纹理,模仿了现实生活中的“正在建设”施工牌,并给其增加了时尚感。

考虑通用使用微小的纹理和黄黑配色,将“建设”的场景应用到“网站正在建设中”的页面。

05.使用动画和干净的几何图形

5

UkieWatch设计了一个建筑工人们在一个简单的倒计时时钟上工作的小动画,以提醒用户网站维护所剩时间。作者使用锐利、干净的几何图形呈现了一个时尚、美观的 “网站正在建设中”页面。

动画或者简单的插图会给你的设计增色不少。

06.干净的背景和雅致的字体

6

不想用纯色作为背景吗?也不喜欢用细节丰富的图片做背景?尝试给一张图片应用高斯模糊作为背景,创造一个温和的效果,就像Tony Bogdanov制作的案例一样。

将你的新背景搭配简约的字体,以增强模糊的图片与无衬线字体的尖锐线条之间的对比。

07.使用具有冲击力的色彩和留白

7

留白的空间并一定是白色,以Karma Pilots的作品为例,他使用了黄色的“留白”。留白可以让每个元素都有“呼吸的空间”,避免混乱和局促。此案例设计以右下角的字体为焦点,剩余的空间作为留白空间存在。

08.使用简约的图片和粗体字

8

 Andrew Droog设计了一个非常简约的网站页面,他用纯色白色背景,简单的无衬线字体,对齐元素和醒目、明亮的不对齐几何元素呈现了一个令人惊叹的效果。

黄色带子的使用赋予了这个“网站正在建设中”页面被包裹、封锁的感觉,直到网站被建设好就可以被“拆封”了。尝试给你的页面添加有趣的东西。

09.使用3D字体和点状色彩

9

Tian Boon Siang将字体以3D的形式呈现出来,给我们展示了另一种表现字体的方式,赋予网页深度和可触感。搭配其他的3D图形和点状色彩,呈现了一个独特的“网站正在建设中”的页面。

玩转字体,记住它不一定要是平面的,你可以给它添加3D效果,或者加点阴影和倾斜效果。多多尝试不同的花样,看看各有什么效果。

10.使用强烈的纹理和集群的图形

10

想制作有机设计?以Archetype It.的设计为案例,他利用纹理、狂野的图片、集群的图形呈现了一个粗犷、硬汉的风格。

尝试将你的设计元素融合在一起,就像这个案例一样,再添加引导线和几何图形吸引观众的注意。

11.使用几何图形和饱和色

11

像Sean Ball这样,增加图片的饱和度,再用蓝色和红色的几何图形衬托高饱和度图片,呈现了一个效果尖锐的“网站正在建设中”页面。

如果你正在设计“网站正在建设中”页面,尝试调整照片的亮度、饱和度和对比度,以增强或减弱照片的色调。

12.使用拷贝和充满活力的图形

12

 ChkChkBoom的设计使用了活泼的图形和粗体字,并将错综复杂的图形和文案集合在一起,使读者的眼球从左边浏览到右边再浏览回来。

如果你使用的是复杂的图形,参照ChkChkBoom摆放图案,引导读者的阅读方向,同时也能创造美观的设计。

13.极简设计搭配象征性的图片

13

使用象征性的图片给你的“网站正在建设中”页面增加内涵。蓝鸟(Bluebird)App设计界面仅用了一个破壳的鸟蛋图片,象征着蓝鸟APP即将破壳而出。

从这个案例我们学到尽可能地简化设计,案例中将所有的关注集中到仅有的图片中,毕竟当图片能够完整传达信息时,再添加其他元素就画蛇添足了。

14.使用单色滤镜和引导线

14

W3 Layouts使用了一张精美的照片叠加单色滤镜,搭配简单的倒计时图片,呈现了一个布局简单但有效的“网站正在建设中”页面。

从这个案例中我们学到,尝试选择可以充当引导线的图片,正如案例图片中的马路指向设计的焦点——倒计时。

15.极简设计搭配“暴露的”代码

15

 Aaron Cavano保持了设计的极简性,同时将读者的目光吸引到左上角“墙纸”被掀开后露出的代码。

不要认为极简设计是枯燥的,正如Aaron Cavano的设计,你可以用独特的视觉手段展示信息,达到和复杂的设计一样的效果。尝试用极简设计搭配独特的视觉信息创造一个令人难忘的“网站正在建设中”页面吧。

16.使用柔和的色调搭配醒目的特征颜色

16

ThemeWizz使用了灰色色调的图片,具有很强的沉重感和肃静感,但是右上角橙色的按钮打破了这份肃静,给画面注入了活力。

尝试使用颜色来吸引用户的目光朝向(或远离)设计中的某个元素,记住选择与其他元素有足够对比度的特征颜色。

17.使用居中的logo和有纹理的图像

17

你的网站有商标或者品牌标志吗? 为什么不把它放在页面的中心呢,就像Nattywp设计的这份作品一样,他在全屏图像上放置了一个纯白色logo和粗体白色字体。在“网站正在建设中”页面使用品牌Logo是个不错的选择,让用户知道他们没有来错网站,只是网站正在维护中。

注意,案例中的带纹理的背景图片做了调暗处理,以突出白色字体和logo。设计网页时要确保文字的可读性。

18.使用粗线条和强烈的对比

18

ThemeBridge在这份设计中使用了粗线条、粗体字和少量色散,打破了单色主题的沉闷感。同时,Logo、社交媒体图标、导航栏周围的几何图案和颜色醒目的标点给设计增添了现代时尚感。

ThemeBridge的这份设计是现代设计的好例子。无衬线字体,几何形状和强烈的对比往往是现代设计常用的元素。

19.使用优雅的图片和醒目的倒计时

19

你有设计网站完成建设的日期吗?那么就用醒目的倒计时来展现竣工日期吧。CLAASTHORE通过使用干净、时尚的字体将焦点放在了倒计时上,搭配优雅的背景图片呈现了一个时尚的设计。

在任何设计中,特别是“网站正在建设中”页面,放大缩小是有效的设计手段。找到你想突出的设计元素,并将其当大,就可立即吸引观众的注意。

20.使用粗体字搭配醒目的边界线

20

FuelLimax使用了美丽的冷色调图片作为背景,搭配白色粗体字、锐利的几何原色和醒目的变色边框,呈现了一个干净、时尚的“网站正在建设中”页面。该设计的背景图片使用了不同的循环播放,这是一个很棒的技巧,可以为即将建设好的网页内容做些预告。

如果你想用不同类型的图片做循环播放,确保这些图片都有一致性,同属于一个品牌。你可以用同样的方式处理图片,比如用相同的滤镜或是剪裁,或者使用来自同一个照片中的不同部分作为图片。

轮到你了!

在设计界,没有任何一个设计的严格公式,即使我们列出了许多建议,你仍然可以随心搭配、尝试。当你设计“网站正在建设中”页面时,参考客户网站和品牌的风格,以及他们展示给读者的基调。