為什么Rimac 比豐田好?查看他們的網(wǎng)站,這兩個(gè)非常不同的品牌之間沒有太大區(qū)別。這不應(yīng)該從他們網(wǎng)站的質(zhì)量上看出來嗎?為什么高端汽車公司的網(wǎng)站看起來相似,乏味?
以出色的網(wǎng)站設(shè)計(jì)瞄準(zhǔn)高端汽車買家
任何網(wǎng)站都必須考慮其用戶。這類車的目標(biāo)受眾是誰?他們在找什么?
Rimac 的汽車售價(jià)約為 850,000 美元,而且只會生產(chǎn)少數(shù)幾輛,因此有資格獲得“限量版”標(biāo)簽。雖然廣告公司設(shè)計(jì)vi公司無法準(zhǔn)確確定有興趣購買這些汽車的客戶類型,但我們可以假設(shè)大多數(shù)客戶將來自富有的精英。Rimac 的網(wǎng)站是否有效地針對這些客戶?
分析信息架構(gòu)
在廣告公司設(shè)計(jì)vi公司的示例網(wǎng)站上,我們可以看到第一個(gè)導(dǎo)航項(xiàng)是“Concept_One”(當(dāng)時(shí),它是公司唯一的產(chǎn)品)。真正的網(wǎng)站已經(jīng)更新。第二個(gè)導(dǎo)航項(xiàng)是公司的演變,汽車是如何生產(chǎn)的,而第三項(xiàng)是公司的產(chǎn)品和服務(wù)。第四個(gè)導(dǎo)航項(xiàng)是另一個(gè)公司產(chǎn)品(Greyp 電動自行車)。最后兩項(xiàng)是“新聞”,包含新聞稿,以及“博客”,這兩者都不是特別有用,因?yàn)樗鼈兊拇蟛糠中侣劧际窃谏缃痪W(wǎng)絡(luò)上發(fā)布的。
另一個(gè)問題是,職業(yè)鏈接被隱藏為次要的、不太重要的導(dǎo)航項(xiàng)目,并且鑒于公司的巨大擴(kuò)張,它代表了一個(gè)重要的問題。如果我們將用戶視為公司關(guān)注的焦點(diǎn),我們會看到在大多數(shù)公司網(wǎng)站(典型的例外是公司/超大型網(wǎng)站)中,擁有一個(gè)突出的“職業(yè)”鏈接或 CTA 非常重要。
網(wǎng)站重新設(shè)計(jì)過程
最初,其目的是打造一款更黑暗、更強(qiáng)大的汽車版本。我在網(wǎng)上找到了一些Concept_One汽車的圖片,并用一些“Photoshop 魔法”為主頁創(chuàng)建了第一張英雄圖片。下一個(gè)想法是讓動畫慢慢展示汽車,首先是背景,然后是汽車的輪廓,然后是完全渲染的圖像。
對于主頁,概念是定義兩個(gè)主要的視覺區(qū)域:頂部導(dǎo)航和汽車英雄形象。而已。為了使其簡約而引人注目,任何不必要的東西都被刪除了。一眼看去,所有重要的東西都是可見的——其他所有東西都被移到了網(wǎng)站的子頁面中。
主頁設(shè)計(jì)作為網(wǎng)站改造的一部分
內(nèi)容策略與設(shè)計(jì)
對于此類網(wǎng)站改造項(xiàng)目,設(shè)計(jì)內(nèi)容也很重要,而不僅僅是網(wǎng)站的結(jié)構(gòu)和視覺美學(xué)。由于這是一個(gè)未經(jīng)委托的網(wǎng)站重新設(shè)計(jì),它提供了更多的實(shí)驗(yàn)自由,以及審美靈活性,讓我們有充分的機(jī)會做出自己的設(shè)計(jì)決定。
過程很簡單:
準(zhǔn)備將出現(xiàn)在網(wǎng)站上的正文。
通過圖標(biāo)或交互式動畫傳達(dá)一些設(shè)計(jì)元素——例如,關(guān)于加速度、馬力和最高速度的引人注目的細(xì)節(jié)。
通過這樣做,用戶界面中不需要輔助詞,并且將注意力吸引到對網(wǎng)站訪問者更重要的區(qū)域。
網(wǎng)站導(dǎo)航重新設(shè)計(jì)
網(wǎng)站的導(dǎo)航結(jié)構(gòu)現(xiàn)在根據(jù)重要性等級重新排列。我們將車輛作為導(dǎo)航中的第一個(gè)下拉菜單,這為設(shè)計(jì)提供了靈活性,因?yàn)樗试S公司在未來添加更多車型。
為了提供從主頁立即訪問二級產(chǎn)品頁面,為了提高效率,決定將產(chǎn)品及其子類別作為下拉區(qū)域合并到主頁中,而不是創(chuàng)建另一個(gè)產(chǎn)品列表頁面(在另一個(gè)網(wǎng)頁上),并使其成為導(dǎo)航。當(dāng)訪問者在導(dǎo)航中單擊產(chǎn)品時(shí),下面的設(shè)計(jì)顯示了在主頁上呈現(xiàn)為圖標(biāo)的各種產(chǎn)品。對于Products下表示第二層的 3D 產(chǎn)品效果圖,我推薦 Three.js、WebGL、Canvas 和 Greensock,因?yàn)樗鼈兪潜娝苤臉?biāo)準(zhǔn)化工具。
與Homepage相比, About和Service頁面等輔助頁面使用不同的 Z 形網(wǎng)格。不同網(wǎng)格布局的目的是在瀏覽這些頁面時(shí)為訪問者提供更有趣和動態(tài)的環(huán)境。
中心思想仍然是盡可能少的文字視覺極簡主義。人們來這類汽車網(wǎng)站不是為了閱讀大量文字,而是為了快速、直觀地獲取信息。這就是頁面標(biāo)題上大而粗的字體和使用不同字體樣式的想法。
需要注意的是,這種“公司宣傳冊”網(wǎng)站重新設(shè)計(jì)不同于服務(wù)重新設(shè)計(jì)?!肮臼謨浴本W(wǎng)站更多地是關(guān)于營銷產(chǎn)品。面向服務(wù)的網(wǎng)站重新設(shè)計(jì)更傾向于將點(diǎn)擊轉(zhuǎn)化為轉(zhuǎn)化,并最終獲得利潤。
結(jié)論
廣告公司設(shè)計(jì)vi公司還有其他幾篇設(shè)計(jì)文章推薦了為什么設(shè)計(jì)師參與非委托設(shè)計(jì)項(xiàng)目是一個(gè)好主意。如果您想設(shè)計(jì)一個(gè)非??岬捻?xiàng)目,請選擇一個(gè)想法——它可以是網(wǎng)站、應(yīng)用程序、企業(yè) SaaS 產(chǎn)品——并為它解決設(shè)計(jì)問題。
Dribbble充滿了不請自來的概念重新設(shè)計(jì)項(xiàng)目,廣告公司設(shè)計(jì)vi公司的數(shù)字設(shè)計(jì)師有機(jī)會展示他們的設(shè)計(jì)能力。除了給你一個(gè)很酷的設(shè)計(jì),向世界展示一個(gè)創(chuàng)造性的解決方案,解決一個(gè)“實(shí)際的”產(chǎn)品問題將向潛在的公司和客戶展示你的想法、你的過程和你的專業(yè)知識。
就我而言,處理高端汽車網(wǎng)站是一項(xiàng)很棒的練習(xí),因?yàn)閷τ谠擃I(lǐng)域的網(wǎng)站設(shè)計(jì)而言,滿足極高的標(biāo)準(zhǔn)尤為重要。
但是,廣告公司設(shè)計(jì)vi公司提示你:在潛入并開始設(shè)計(jì)之前,具有前瞻性并考慮任何特定網(wǎng)站在三年內(nèi)需要看起來如何,不僅從設(shè)計(jì)美學(xué)的角度,而且從內(nèi)容的角度來看,這是一個(gè)好主意,功能和結(jié)構(gòu)。內(nèi)置的靈活性是一個(gè)嚴(yán)肅的設(shè)計(jì)考慮因素,這一點(diǎn)至關(guān)重要。當(dāng)網(wǎng)站或子頁面正常工作且可擴(kuò)展時(shí),進(jìn)行小的調(diào)整以適應(yīng)未來的需求會更容易、更高效且痛苦更少。
有時(shí),很難說服潛在客戶進(jìn)行網(wǎng)站改造。由于缺乏資源、資金或時(shí)間,客戶通常不愿意承諾。然而,一個(gè)不請自來的網(wǎng)站重新設(shè)計(jì)是向世界展示您的網(wǎng)站重新設(shè)計(jì)過程的好方法。誰知道呢?您的網(wǎng)站重新設(shè)計(jì)很可能會給不情愿的客戶留下深刻的印象,足以讓他們?yōu)椤罢嬲摹表?xiàng)目開綠燈,作為額外的獎勵,設(shè)計(jì)師會得到報(bào)酬!
總監(jiān)微信
復(fù)制成功
業(yè)務(wù)咨詢 何先生
業(yè)務(wù)咨詢 何先生
搜索感興趣的內(nèi)容