线框是一个视觉指南,描述了网站的骨架。一切都始于此。这是您的想法得以实现的阶段,有时是在纸上。因此,从技术上讲,它只是一个草图-将来的Web界面的概述版本。
因此,您可能会问:“它与实际的实时网站有什么关系?它如何影响充满活力的设计,可点击的元素,动作,有意义的内容等?”
当然,我们不会向您显示看起来像带有十字形框和水墨图案的手绘插图的网站设计。相反,我们将把您的注意力集中在Web界面上,这些界面的美感和魅力来自蓝图思想中的思想。我们来看一下。
Abdelkader El Issaoui
如今,线框样式设计是一种小趋势,可以用优雅,精致的解决方案填充网络。考虑一下该领域最具启发性和令人耳目一新的例子之一-Abdelkader El Issaoui的个人作品集。
在这里,您可以看到轻松地散发出复杂感的构图和谐。英雄区域的所有元素都遵循示意图布置的规则,该规则以某种方式让人联想到线框。
因此,导航占据了屏幕的外围。创意团队同时使用垂直和水平方向,以使其完美地融入作品中。中心部分包括图像,标语和链接,它们一起形成一个空间。
超细线条起着至关重要的作用:它们使设计具有草图般的感觉,并增强了整体美感。着色和大量的空白将所有内容结合在一起。该网站看起来真是太神奇了。
Alfa Charlie
另一个值得探索的出色示例是Alfa Charlie的投资组合。该网站具有优雅过失的微妙感觉。看来作者在主图像上粗心地安排了文字和标语。但是,这里的每个细节都有其适当的位置,没有意图就什么也不做。
请注意,两个示例都基于相同的技巧,例如:
- 在Alfa Charlie的情况下,周界导航非常少,而且还很精确。
- 链接和随附文本之前的行。
- 以灰色调为重点的浅色配色方案。
- 内容安排在中心。
- 大量空白使设计具有通风感。
- 一种宽阔的布局,以感觉像线框的方式容纳元素。
虽然这两个网站有很多共同点,但仍有一些功能使它们彼此区分。例如,在这里,主要内容与中心图像重叠,使内容紧密包装在一起。此外,页面右下角还有一个像徽章的小邮票。它是徽标的紧凑版本,可增加品牌标识以及整体设计。
Everess
Everess获得了与Alfa Charlie相同的魅力,但其设计看起来更大胆且更加突出。虽然前面两个示例都以浅色为主打,浅灰色为主色,但在这里您可以看到经典的黑白组合,使事情一目了然。
主屏幕上组件的布局和布置遵循相同的规则。因此,您将在这里找到:
- 汉堡包按钮,徽标和图标可方便地位于角落中,以显示社交媒体资料;
- 容纳图像的中心部分,重叠的标语和细微的CTA;
- 几行在垂直和水平方向上延伸;
- 一种盒状结构,带来线框般的氛围。
Muraflex
Muraflex背后的创意团队采用相同的方法。但是,与Everess的情况一样,某些明确的区别表明在实现趋势方面有不同的偏好。
例如,此处的导航以及社交媒体链接和徽标大多集中在左侧。即使有几个组件占据顶部栏,该设计仍然感觉有点偏斜。
中央结构显示一个突出的单字标题,矢量按钮,而不是基于文本的链接,在水平面上有一条线和一个小的不和谐。这里的级别是由文本而不是图像设置的。另外,着色不是那么混乱和晦涩。
但是,尽管存在这些差异,但该网站顺应潮流,并且看起来像上面列出的其他所有人一样令人惊叹。
PlasticBCN
好的,现在是时候扩大我们的视野,看看一些另类且错综复杂的趋势。首先,让我们考虑PlasticBCN。
这肯定向我们展示了如何拥抱混乱并产生带有线框样式提示的原始英雄区域。欢迎屏幕在很大程度上依赖于垂直方向,从而为设计增添了强烈的个性。宽敞的感觉,示意图的呈现,原始的图形和布局确保了网站在列表中的位置。
Wellness Hotel / 50.8 Studio
Wellness Hotel和50.8 Studio背后的创意团队在设计中添加了传统的素描细节,使事情变得更加令人兴奋和着迷。
以Wellness Hotel为例,您可以看到醒目的图像背景如何被轮廓细节所包围,这些轮廓细节共同给人以深刻的印象。欢迎部分看上去井井有条,结构合理,但仍然感觉如诗如画。
在50.8 Studio的情况下,团队进一步走了一步。在这里,英雄区域被分为两个相等的部分。右侧部分是常规的基于图像的背景,而左侧面板则显示了导航和模块化系统中的所有有用链接,可以用裸眼看到其轮廓。
网格的所有列和行均按字面描述。这种融合引起了注意,并留下了持久的印象。
Future London Academy / Nunziella Salluce
让我们考虑两个与以前的网站形成鲜明对比的示例,但它们仍然具有鼓舞人心的线框风格魅力。
首先要看的是未来伦敦学院。在包豪斯风格的启发下,这款出色的主屏幕显示了音量。它毫不费力地启动了设计,并证明了简单性和几何形状可以共同创造奇迹。
Nunziella Salluce是另一个怪异的解决方案。与前面的示例非常相似,它具有包豪斯艺术学校固有的现代工业设计的元素。
但是,此处巧妙地将其与线框样式相结合,可带来出色的效果。它以其优美的原始性赢得了读者的青睐。
有线设计出色
线框样式设计不明确。它以各种解决方案体现出来,并且可以在不同的概念中看到。
但是,您可以肯定地说一件事:它具有自己的个性和不可抗拒的魅力,可以轻松地从其他项目中选出一些项目。