拖动浏览,滚动或双指缩放。打开帮助查看键盘操作。

Yan
开放
合作
聊聊吧
Yan Fontão Boring view
All work

Case 055落地页设计

Straight Up Marine Group

以 Straight Up Marine Group 之名设计的落地页,面向从 Jupiter 到 Key West 的船舶服务和 Dometic 陀螺稳定器,以两种布局呈现。

我的职责
落地页设计
项目状态
落地页 · Figma 存档
一艘 3D 游艇在圆盘状的海面上摇摆。
为这面项目墙制作的 3D 物件。

01

我的贡献

设计使用 Straight Up Marine Group 这个名称和一个金色的三角形标志。标题是“Professional Marine Services & Dometic Gyro Stabilizers”,配有预先报价和从 Jupiter 到 Key West 的专业服务,首屏还有两个出口:Get Your Quote 和 Learn About Gyro Stabilizers。

滚动浏览设计稿:落地页,从首屏到案例研究。

02

同一个首屏,两种排法

第一种布局把首屏分成两半:文字和按钮放在左侧的纯海军蓝上,一艘船及其尾流的航拍照片放在右侧,让标题落在一块平静的底色上。第二种把标志和标题居中放在同一张照片上,照片铺满整个宽度,船从文字后面驶过。它更有戏剧性,但可读性有所下降,把两种并排看就能看出这个取舍。

海军蓝底上的金色三角形 Straight Up Marine Group 标志,位于一块展示首屏的圆角面板上方,面板里有导航、标题 Professional Marine Services & Dometic Gyro Stabilizers、一个黄色的 Get Your Quote 按钮,以及一张船只和白色尾流的航拍照片。
演示封面,标志位于第一个首屏的上方。

03

沿页面向下,通向报价

首屏之下,页面依次经过四张核心服务卡片、一个 Dometic 产品区、四个其他解决方案、三张案例研究卡片和一排制造商标志。最后是一个报价表单,要求填写姓名、电话号码、船的品牌、型号和年份,以及目前的陀螺稳定器情况。第二种布局另外加了三条简短的客户评价。

案例研究、客户评价和产品数据都是页面文案,不是这个项目的成果。

完整的落地页,第一种布局:分栏的海军蓝首屏配船只照片,四张 Core Features 卡片,一个 Dometic Gyro Stabilizers 区块,四张 Other Solutions 卡片,三张 Case Studies 卡片,一排 Trusted Partners 制造商标志,一个报价表单,以及一个海军蓝页脚。
完整的落地页,第二种布局:标志和标题居中放在铺满整个宽度的海洋照片上,之后是与第一种布局相同的各个区块,并在案例研究下方增加了三条简短的客户评价。
完整页面,第一种布局,从首屏到报价表单。 第二种布局,首屏居中,并有客户评价。
000

使用说明

Yan Fontão
轻点
打开一个屏幕
点击
打开一个屏幕
拖动
浏览项目墙
滚轮
鼠标缩放,触控板移动,双指缩放
− +
拉远查看整面项目墙,或拉近
方向键
在案例中:↑↓ 切换案例,←→ 切换媒体。在项目墙上:移动
空格
打开或返回
Enter
打开
Esc Backspace
返回
Home
回到中心,再回到开场
PgUp PgDn
上一个或下一个频道
Tab
依次浏览项目和链接
R
随机项目
0–9
输入频道号,1–61
?
本页
快捷键

项目墙背景音乐

文件已为网页压缩并统一音量。

开放
合作
聊聊吧

给 Yan 发消息

告诉我你是谁,我会尽快回复。

000

关于 Yan

你好,我是 Yan

产品设计师/ 设计工程师

大多数产品都会在设计和代码之间丢掉一些东西。我的不会:我研究问题、设计产品,并亲手把界面上线,所以你批准的,正是用户最终拿到的。

  • 2018开始软件开发
  • UI + code设计与实现

合作过 Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

巴西 · 可远程、混合或驻场

Yan Fontão 的坐姿肖像:穿绿色毛衣、戴眼镜,手持麦克风。
开放
合作
聊聊吧
开放
合作
聊聊吧
000

加密频道

受保密协议约束

请输入访问码

向 Yan 索取访问码 ↗
开放
合作
聊聊吧
YAN FONTÃO 完整案例