設(shè)計(jì)達(dá)人
www.shejidaren.com
愛(ài)設(shè)計(jì)，愛(ài)分享
很多時(shí)候因?yàn)闀r(shí)間、預(yù)算成本等因素，設(shè)計(jì)師需要快速制作一個(gè)產(chǎn)品營(yíng)銷(xiāo)網(wǎng)站，這時(shí)應(yīng)該怎么做呢？可以參考今天推薦的 abybook 網(wǎng)站，設(shè)計(jì)師只占用很少的時(shí)間就能設(shè)計(jì)出來(lái)，不需要設(shè)計(jì)banner，只需要排版與配色，利用現(xiàn)成的實(shí)拍圖片來(lái)制作出一個(gè)具有促成用戶(hù)購(gòu)買(mǎi)產(chǎn)品的營(yíng)銷(xiāo)頁(yè)面。
該網(wǎng)站的用途僅介紹一本圖書(shū)以及具有購(gòu)買(mǎi)功能，所以用單頁(yè)面、著陸頁(yè)的方式最好的選擇，減少工作量也降低成本。需要介紹的書(shū)籍名稱(chēng)adverts of britain’s yesteryear內(nèi)容是介紹50年代的英國(guó)的廣告藝術(shù)作品，所以設(shè)計(jì)師使用了復(fù)古的色彩來(lái)襯托這個(gè)主題。
圖書(shū)介紹：
匯集了1600多個(gè)精美的藝術(shù)廣告，這些廣告來(lái)自電視，消費(fèi)主義和廣告業(yè)定義的黃金時(shí)期，這個(gè)時(shí)期當(dāng)然是50年代。這些藝術(shù)作品是由手工以及杰出的才華橫溢的藝術(shù)家和插畫(huà)家巧妙地創(chuàng)造出來(lái)的，他們將不懈地工作數(shù)小時(shí)甚至數(shù)天以達(dá)到完美的效果。這些廣告是50年代思想流派的產(chǎn)物，在那里，正確地被視為種族主義和性別歧視之類(lèi)的當(dāng)今問(wèn)題將成為賣(mài)點(diǎn)，而很少或根本沒(méi)有考慮或考慮此事或其后果。
abybook 網(wǎng)頁(yè)設(shè)計(jì)
網(wǎng)站名稱(chēng)：abybook網(wǎng)站風(fēng)格：復(fù)古風(fēng)網(wǎng)站配色：橙色 米黃網(wǎng)站形式：著陸頁(yè)、單頁(yè)面設(shè)計(jì)、營(yíng)銷(xiāo)網(wǎng)站設(shè)計(jì)網(wǎng)站地址：abybook.com
圖1：幻燈片切換
幻燈片的切換多了一個(gè)亮點(diǎn)，設(shè)計(jì)師使用了遮罩功能（小編注：估計(jì)設(shè)計(jì)師沒(méi)時(shí)間做banner，并且只有實(shí)拍照片，所以想出這么個(gè)創(chuàng)意點(diǎn):-d）
圖2：切換動(dòng)畫(huà)gif圖演示
圖3：介紹
圖4：視差背景
中間插入一屏視差背景作為過(guò)度，解決頁(yè)面過(guò)于單調(diào)的瀏覽視覺(jué)。
圖5：促成購(gòu)買(mǎi)
介紹了這么多，最后就要讓用戶(hù)去購(gòu)買(mǎi)了，所以單獨(dú)做了一屏讓用戶(hù)購(gòu)買(mǎi)的版面。并使用「限量版50本」的營(yíng)銷(xiāo)文案來(lái)吸引用戶(hù)購(gòu)買(mǎi)。
圖6：周邊展示
周邊展示，注意這個(gè)布局和上面類(lèi)似，但使用了反向的方式形成對(duì)比感覺(jué)。
圖6：規(guī)格介紹
當(dāng)我們頁(yè)面內(nèi)容非常少的時(shí)候，可以參考這樣的布局做法，使用主色調(diào)的全屏背景，同時(shí)在背景上面加入一個(gè)半透明的logo水印來(lái)解決版面的空洞感。
圖7：網(wǎng)頁(yè)照片滑動(dòng)特效
最后使用使用了網(wǎng)頁(yè)滑動(dòng)特效來(lái)展示產(chǎn)品圖，點(diǎn)擊產(chǎn)品圖像直接跳到ins，這樣同時(shí)給ins號(hào)帶來(lái)暴光量也是不錯(cuò)的選擇。
總結(jié)
從內(nèi)容上看，這個(gè)營(yíng)銷(xiāo)網(wǎng)站非常之簡(jiǎn)單，設(shè)計(jì)師一個(gè)上午就能做出來(lái)。雖然如此，但總體的視覺(jué)差效果并不差。
（ps：網(wǎng)絡(luò)時(shí)代連賣(mài)一本書(shū)都要做個(gè)銷(xiāo)售網(wǎng)頁(yè)，網(wǎng)頁(yè)設(shè)計(jì)師除了學(xué)習(xí)視覺(jué)設(shè)計(jì)外，還要學(xué)習(xí)一些可以讓設(shè)計(jì)來(lái)增加銷(xiāo)量的作品，也就是營(yíng)銷(xiāo)設(shè)計(jì)，今天的網(wǎng)站作品就是很好的案例。）
感謝閱讀！歡迎加入設(shè)計(jì)達(dá)人官方設(shè)計(jì)交流群交流設(shè)計(jì)，掃下面二維碼，回復(fù)暗號(hào)「進(jìn)群」即可，有不懂的問(wèn)題都可以在群里一起交流。
//////近期文章//////
提高轉(zhuǎn)化率的界面，終極觸發(fā)設(shè)計(jì)指南
視覺(jué)錯(cuò)覺(jué)：對(duì)稱(chēng)的ui并非看上去的那樣
好美版式，迷人的折頁(yè)版式設(shè)計(jì)
2020年受設(shè)計(jì)師歡迎的20大字體！
—
設(shè)計(jì)公眾號(hào)不用多
設(shè)計(jì)達(dá)人為您嚴(yán)選精品設(shè)計(jì)好文、好資源、好靈感
記得設(shè)為星標(biāo)公眾號(hào)哦~
▼