案例研究:ShipDaddy品牌标识和网站设计

在电子商务和在线购物迅猛发展的时代,安全可靠的运输被视为积极的客户体验的首要问题。对于小型企业和企业家来说,这可能是一个真正的挑战。这是我们的一位客户解决的问题,爸爸服务,在本案例研究中,我们希望让您一目了然,以帮助他们既使户满意又实现业务目标。欢迎检查品牌标识和网页设计的创作过程和解决方案。

案例研究:ShipDaddy品牌标识和网站设计

项目

新时代运输和履行服务的品牌标识和网站设计。

客户

ShipDaddy是一家现代化的公司,其业务范围包括向其他规模较小但正在成长的其他公司的运输和配送服务 电子商务产品在网上销售但由于任何原因无法自行实现的公司和品牌。ShipDaddy通过仓储他们的货盘,直接将产品运输给客户以及在需要将其散装运输到其他地方的情况下重新包装他们的库存来解决此问题。简而言之,该服务将接管所有必要的运输工作,以便客户可以专注于业务增长的其他方面。

ShipDaddy团队从设计角度向我们介绍了两个方面:

  • 公司品牌和多样化营销目标的徽标和标识设计
  • 网站基于一致的方法,具有视觉品牌和对任何类型的服务客户的超高可用性

图比克团队创建了一个 品牌识别 还有一个网站,该网站将帮助重新定义第三方物流公司,并让全世界知道ShipDaddy的人们总是关心客户的成功。

处理

考虑到所有设计过程的一个总方向是友好和认真的和谐结合:ShipDaddy是一家超级友好,开放的公司,可以应对严峻的挑战。能够同时在网络上处理品牌和用户体验,因此可以进行全面,一致的设计 公司与目标受众沟通的所有渠道的方法。

标志设计

客户希望徽标友好,平易近人并且很酷。它必须给ShipDaddy客户一种与合作伙伴一起帮助建立业务的感觉,而不仅仅是一家无聊且不具个性的货运公司。更重要的是,该服务超越了运输:它是一家全方位咨询公司,可帮助企业优化整个电子商务战略,包括运输和物流。反映信息的最佳解决方案是创建一个吉祥物 这样可以使品牌与客户之间的交流感性和人性化,并且可以涵盖各种营销目标和营销活动。

创作过程经历了从讨论和研究到草图的传统阶段,然后经过精炼的数字版本。以人为本,Tubik根据公司首席运营官的形象创建了可爱友好的品牌形象。吉祥物是人类的角色,既友好又有趣,但也很成熟,也很认真。

最终徽标采用了由吉祥物和印刷部分组成的组合标记,并带有醒目的醒目的字体的公司名称。调色板包括原色 (蓝色,黄色,红色),因为它们在印刷和数字演示中都很好看。

案例研究:ShipDaddy品牌标识和网站设计

更重要的是,吉祥物在各个州和地区都得到了进一步的发展,以整合到网站,社交媒体,品牌产品和市场营销活动中。

案例研究:ShipDaddy品牌标识和网站设计

包装设计

案例研究:ShipDaddy品牌标识和网站设计

贴纸设计

案例研究:ShipDaddy品牌标识和网站设计

网站的Favicon和网站的移动版本的欢迎屏幕

案例研究:ShipDaddy品牌标识和网站设计

社交媒体发布

网页设计

该网站的设计遵循品牌准则和所选的企业色彩调色板。由于吉祥物被选作主要的交流工具,因此决定将其广泛地集成到网站中,并用它来说明大多数功能和内容。为了实现这一目标,根据网站版块和块的上下文,绘制了20多种ShipDaddy变体。此外,它们还用于品牌贴纸。

案例研究:ShipDaddy品牌标识和网站设计

在网站用户界面的阶段,创意团队提出了一个将绘制的角色与现实环境联系起来的想法。在设计过程中,很明显,这种方法引起了太多关注,并可能使访问者从内容中分散注意力。因此,该想法仅在首页,公司页面的第一页和第二页上实现。

让我们看一下网站页面。所有网站都是在Webflow上建立的–在我们之前的网站中网站设计案例研究 我们详细介绍了此工具的好处和功能的主页根据颜色对比度应用拆分屏幕以使文本内容 可读的 和 CTA按钮立即引人注目。从最初的几秒钟起,吉祥物的运动快活地走过拍摄的仓库,便增添了乐趣,氛围和情感。

案例研究:ShipDaddy品牌标识和网站设计

另一页合并 插图 公司页面将摄影变成一种视觉效果。

案例研究:ShipDaddy品牌标识和网站设计

Mascot Motion:适用于Webflow的APNG

为了使用户体验充满活力,引人入胜且令人难忘,并最大程度地发挥吉祥物的潜力,我们决定在所有网站页面上通过动画使角色活着。由于以下原因,所有动画均以APNG格式而不是通常的GIF格式制作:

  • 大小相等时的图像质量要好得多(比较 这里的样品)
  • APNG与Webflow高效协作
  • 移动设备支持APNG和台式机,这使用户在所有平台上的体验均相同。

断点

最近,为Webflow添加了3个用于大型监视器的新断点。除了适应平板电脑和手机,您现在还可以将网站设计修改为1280px,1440px和1920px宽度。这有助于我们更加灵活地调整所有页面的第一个屏幕,即使在最大的显示器上,它们也看起来更加一致和比例。

404页

如果访问者出于某些原因单击过时或断开的链接并转到 404错误页面,他们通过精美的动画获得了很多乐趣。这有助于减轻处理错误的负面影响,并支持友好的交流氛围。固体视觉层次 页面上的内容和立即醒目的CTA按钮可帮助访问者快速了解下一步的操作。

博客

在 网络流,您可以创建具有任何设计,功能和导航的完整博客,包括类别,作者页面, 搜索,订阅等。客户可以访问管理仪表板,在该仪表板中,他可以使用简单直观的编辑器添加文章,并在几秒钟内将其显示在网站上。公司网站博客的最大好处是,您可以通过常规文章和文章中的交叉链接极大地增加自然流量。

案例研究:ShipDaddy品牌标识和网站设计

ShipDaddy博客主页

案例研究:ShipDaddy品牌标识和网站设计

ShipDaddy博客上的作者页面

案例研究:ShipDaddy品牌标识和网站设计

博客文章页面

页面过渡

由于大量的角色动画已集成到网站中,并且各个文本块也被动画化,因此它们不会使过渡过程过载。动态图形重量轻,因此不会严重影响用户体验。为了使访问者可以一次看到所有内容,并避免了某些内容加载得更快而更长的内容,我们通过幕帘在页面之间进行了转换,只有当所有内容都完全加载时才消失。

业界动态

年度指标的制定方法,现学现用!

2021-1-22 16:37:57

业界动态

匆忙“补位”牛年春晚,抖音支付能拿几分?

2021-1-22 17:28:47

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索