首页 理论教育 如何设计并制作出吸引人的网店店招?

如何设计并制作出吸引人的网店店招?

时间:2023-06-08 理论教育 版权反馈
【摘要】:活动背景店招在店铺的最顶端,是店铺的招牌。图5.2.2活动目标了解店招的视觉设计要点和布局方式,根据乐乐包袋皮具公司店铺首页风格策划和布局设计,整体设计,制作店招。图5.2.3设计与制作网店的店招图5.2.4店招布局。图5.2.10活动评价店招设计要点评分见下表。

如何设计并制作出吸引人的网店店招?

活动背景

店招在店铺的最顶端,是店铺的招牌。进入店铺,店招首先进入眼帘,是整个店铺曝光量最大的一个模块,它决定着整个店铺的设计风格与品牌形象定位。如何利用好店招进行信息的传达是店铺视觉营销的重要内容之一。本活动中,我们跟随小可一起为乐乐包袋皮具公司设计网店的店招吧!

知识窗

店招要突出店铺品牌和产品定位,也就是让买家已进入店铺就知道这家店的店名,卖什么产品。

1.店招的视觉设计要点

①店招的基本参数:

● 传统小店招尺寸:950 px ×120 px;宽屏店招尺寸:1 920 px ×120 px。

● 文件格式:JPG、PNG、GIF。

②常见的店招内容:包括店铺名、店铺Logo、收藏按钮、关注按钮、促销产品、优惠券、活动信息/时间/倒计时、搜索框、店铺公告、第二导航条、旺旺、电话热线等信息。

③店招风格。店招风格基于网店首页的整体配色,符合店铺的产品和品牌形象。

④店招与Logo要协调统一。店铺Logo放置在店招上,店招色彩风格要跟Logo相映成趣,不突兀。

⑤店招背景设置。除了950 px宽度的展示之外,当全屏展示店铺时,店招位置左右还有店招的背景设置,可以是图片也可以是纯色,注意背景色彩的选择,要跟店招协调统一,一般选择店招的底色。

⑥店招布局设计。店招布局设计要符合店铺形象和营销内容。

2.店招的布局设计

(1)极简品质型布局。

布局简单直观,除了Logo店名外,没有过多的修饰,注重品牌品质和品牌形象,增加店内检索功能,方便买家搜索,提高客户体验。这种布局方式常用于知名度较高的大品牌。案例如图5.2.1所示。

图5.2.1

(2)活动促销型布局。

在基础的布局之上,添加优惠信息、促销活动等内容,突出店铺的活动,方便买家第一时间了解店铺的活动,吸引顾客。案例如图5.2.2所示。

图5.2.2

活动目标

了解店招的视觉设计要点和布局方式,根据乐乐包袋皮具公司店铺首页风格策划和布局设计,整体设计,制作店招。打开素材“项目5→5.1.1素材1.jpg”,获取店招上的产品图片素材,如图5.2.3所示。

活动实施

设计步骤参考如下:

(1)新建首页文件。尺寸:1 920 px×2 000 px,文件的高度可以根据首页内容增加画布大小,填充背景色(R:2 G:192 B:180),运用辅助线和标尺工具,标记店招和导航的具体位置(950 px×150 px),效果如图5.2.4所示。

图5.2.3(www.xing528.com)

设计与制作网店的店招

图5.2.4

(2)店招布局。将店招画面进行合理的分配,网店Logo和广告语排版在视觉中心位置,居中摆放,素材图片和点击购买图标以具有对称性的方式编排,使其在视觉上达到一种平衡而又不呆板的状态,效果如图5.2.5所示。

图5.2.5

(3)突出店标和活动。在店招居中位置将设计制作好的店标放上去,调整大小和位置,打上店铺宣传广告语和促销活动,效果如图5.2.6所示。

图5.2.6

(4)处理素材。将店铺主推产品图片处理好,摆放在店招左边,并在右侧制作一个矩形色块的抢购图标,店招的部分就基本完成了,效果如图5.2.7所示。

图5.2.7

(5)制作网店首页导航。在店招下方继续制作网店首页导航,根据策划布局,绘制两个对等宽度导航背景条,一级导航使用首页背景色的同系色(R:2 G:139 B:13),二级导航用灰色( R:238 G:238 B:238),区分导航条的内容。效果如图5.2.8所示。

图5.2.8

(6)绘制包包造型图标。用钢笔工具在左边绘制一个首页的包包造型图标,填充颜色(R:1 G:72 B:68)增加视觉效果,并使用文字工具,输入文字“首页”“HOMEPAGE”,文字颜色设置为灰色,调整大小并放置在包包的图标上,效果如图5.2.9所示。

图5.2.9

(7)添加导航文字内容。根据公司策划好一级、二级导航内容和活动信息,使用文字工具输入相关文字,合理放置在导航上。店招制作完成,效果如图5.2.10所示。

图5.2.10

活动评价

店招设计要点评分见下表。

活动拓展

淘宝“双十二”活动快要来了,尝试为乐乐包袋网店更新一下店招,要求店招上要放置两款店铺商品促销活动产品,请合理布局并设计制作,打开素材“项目5→5.1.1素材2.jpg”,获取活动产品图片,如图5.2.11所示。

图5.2.11

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈