城市设计实战｜城市指南网站着陆页是这样设计出来的

设计实战城市指南网站着陆页是这样设

计出来的

今天咱们要聊的是“城市指南” Big City Guide网站这一概念设计案例研究。

有人说世界是一本书不愿远行的人只能读到其中的一页。 的确旅行是我们生命中最有意义的几件事之一其间我们有机会看见新的风景遭遇新的事情结实新的朋友获得珍贵的人生经历。更重要的是一次愉悦的旅行能够为生活注入能量获得非同凡响的灵感。今天旅行比起过去更加方便其中网络也扮演了极其重要的角色。互联网将不同国家和地区的各种信息散步在整个网络的每一个角落 当你准备出行的时候只需要稍加搜集就能制定出一个不错的旅行方案。

和许多设计师一样来自 Tubik Studio的设计师Tania Bashkatova也热衷于穿梭于不同的城市体验不同的风情享受不一样的生活。也正是因此她对于如何将城市的风情和自然的体验结合起来呈现给用户有自己独到的想法。而这也促成了今天咱们要聊的“城市指南” Big CityGu i de网站这一概念设计案例研究。

任务

设计“城市指南”的着陆页包含其中主要的UI界面确保新用户引导流程中的整个用户体验足够优秀 引导用户了解它的基本功能。

设计过程

“城市指南” BCG是Tubik Studio的UI星期五活动中的首个项目想必在Dribbbl e上关注了Tubik Studio的朋友们都知道我们的这一传统活动。设计是在UI星期五活动中将会有一整天的时间来创建一个特定的概念设计项

目这个项目会有特定的要求 同时设计师也可以自由地将自己的想法和激情融入其中。

而这次的活动当中概念设计项目所包含的任务是让设计师整合资源设计出一套着陆页为用户提供全世界各地的主要城市的信息。在着陆页设计中设计师通常能够更好地将背景图片的信息呈现能力凸显出来。而Tania打算为每个城市挑选一张足以传达情绪和氛围的照片并围绕它来做整个视觉设计。所以最终她选取的解决方案是在着陆页展示3个城市 以横向滚动轮播图的形式展现并挑选一套动效来强化展示效果和体验。 Tani a选取了三个著名的国家首都而接下来她要考虑的是如何将这三个风格不同的城市统一到一套视觉设计中来。

城市指南所展示的第一个城市是柏林。这个城市有许多值得一看的景点这也使得图片的挑选工作量更大了。为了呈现出对的感觉 Ta ni a最后挑了两张图片作为备选。

虽然这两张图片都有这不错的表现力但是后者能够

更好地表现柏林这个城市的坚实感和未来感 Tani a也更加青睐这张图片。城市的名称位于整个排版设计的中心处风格大胆有力可读性良好。柏林的名字和巨塔尖锐的顶端相互接驳而文字和塔尖相互遮盖的关系让他们看起来仿佛客观存在于塔尖之上呈现出一种独特的真实感。

第二个城市选择了马德里。作为西班牙首都马德里延续自中世纪的建筑群是它最有特色的部分之一。但是这并不正确。马德里是现代欧洲的商业中心之一所以Tani a决定将它现代化的一面呈现出来。

不过将现代风格优先纳入到考虑范围内是出于整体设计一致性的考量在排版设计上也延续了柏林页面的设计城市的名字和图片中的建筑再次融为一体。副标题的文案同样进行了精心的设计呈现出这个城市活力四射的特征。而这个仿佛漩涡的回廊成为了最终的选择。

不过在这个地方设计师犯了一个有趣的错误。西班牙首府名为马德里没错但是美国的爱荷华州也有个马德里而这张旋转走廊的图其实是来自美国而非西班牙如果没有去过那个地方单靠互联网有时候确实很容易犯错。当然总是有修改机会的。

最后一个城市 Ta ni a选择了斯德哥尔摩。这同样是一个现代气息浓郁且拥有足够文化积淀的城市。斯德哥尔摩

同样是一个个性十足的地方个性十足的城市风景让Tani a挑花了眼她尝试了许多不同的图片作为视觉设计的基础。

然而所有的城市照片都无法传达出斯德哥尔摩的独特之处作为一个气质突出的北欧城市斯德哥尔摩和大自然一直有着亲密的关系而这也使得Tani a决定尝试探索斯德哥尔摩自然的一面。

这是斯德哥尔摩的页面最终的版本。页面的排布和之前的两个基本一致。壮美的北欧森林呈现出来了斯德哥尔摩的另外一个面孔。

整个着陆页的设计采用了用户易于识别的排版布局和清晰的层次结构。整个页面的左上角是可点击的LO GO点击它可以随时回到首页。导航菜单允许用户快速浏览完整的城市列表查看博客或者直接点开地图。除此之外注册服务和搜索功能这些基本的功能也都是存在的。