Hubspot的14個錯誤設計範例(這樣你就不會犯同樣的錯誤了)

我們並不都是藝術家,在藝術方面有天賦,無論是音樂、繪畫、陶藝還是平面設計,本身就是一種天賦,作為一名客戶服務專家,你很可能至少在設計方面有一些基本的專業知識,即使這僅僅只是能夠將一些彩色字體和圖像扔到Microsoft Word文檔上。

我們並不都是藝術家,在藝術方面有天賦,無論是音樂、繪畫、陶藝還是平面設計,本身就是一種天賦,作為一名客戶服務專家,你很可能至少在設計方面有一些基本的專業知識,即使這僅僅只是能夠將一些彩色字體和圖像扔到Microsoft Word文檔上。


然而,並不是所有負責設計公司網站的人都對這個領域熟練,這些網站失敗的設計可能會讓你感到震驚,但某種程度上還是可以被發佈的。

所以如果你正在尋找一些靈感更新你的網站,或者簡單地說,想要被嘲笑可以參考以下列表的可怕網站設計。

→  Free Download: 77 Examples of Brilliant Web Design 

9個設計不良的網站

這些糟糕的網站設計例子會讓你知道在建設主頁以改善客戶體驗時,應該做什麼以及不應該做什麼。

1.耶魯大學藝術學院

你會期望知名耶魯大學的任何網站都是高質量和令人驚嘆的,如果耶魯大學藝術學院的網站設計得很好,就可以闡述該大學為有抱負的藝術家提供的令人印象深刻的課程。然而由於一些未知的原因,情況根本不是這樣,長期以來耶魯大學藝術學院的網站上不斷變換著一系列令人尷尬的圖片和背景GIF。


總體來說,該網站看起來極其老套而且不專業,這與大學的形象完全相悖,
此外跳動的橘子和移動的圖像讓你的眼睛會有一種被侵略的感覺。

2. The Room-官方電影網站

電影《房間》的網站以黑色為背景,上面覆蓋著白色和其他霓虹色的大字,字體非常大,而且說實話看上去很可怕,更糟糕的是沒有menu,整個網站就是一個很長的主頁。

在接近結尾的地方,有各種奇怪的圖片和GIF,它們都與電影有關,但廣告很大目的是要讓消費者購買電影的使用權,因此分散了網站的重點。網站的外觀非常糟糕,冗長、單一的頁面可能會讓很多訪問者望而卻步,無法閱讀完整的內容。

3. Cloud 9 Walkers

我對這個網站的主要疑慮是,我必須認真閱讀才能理解該公司的意義,該組織的名稱和雲霧繚繞的背景給人一種非常宗教的意味,使人不清楚該公司實際上是在賣馬。


該網站展示其田納西走馬的方式非常俗氣,它的特點是馬匹的模糊、低質量的照片,加上非常長的描述,缺乏適當的語法,它看起來就像一個孩子做出來的東西,很可能讓消費者不信任該公司。

4.Irish Shipwrecks Online

進入該網站後,我等了幾秒鐘以為整個網站都沒有加載,然後,我意識到他就是這樣,在乳白色的帆布背景上,隨機放幾張非常小的照片,對於一個針對試圖探索愛爾蘭沉船之美的潛水員網站來說,你可能會期望網站能真正展示出這些沉船。


於是我按照指示點擊了船舶標誌,來到了這個頁面。我馬上就覺得不舒服了,網站用亮麗的文字衝擊著我,警告我潛水風險自負,公司不承擔任何傷害責任,轉載網站任何內容都會被起訴,這並不是一個和善歡迎的訊息。

總而言之,由於字體顏色和背景的選擇讓這個網站令人困惑、難以閱讀,它顯示了關於沉船的深入細節,但設計使該公司看起來像一個假的消息來源。

5.Electrifying Times

進到這個網站中,你可以立即看到主頁上發生了很多事情,而且有一個圖像需要Adobe Flash,這使得網站感覺過時了,因為沒有人願意花更多的時間啟用Flash。

然後網站上有這個令人難以置信的長長的照片列表,這是令人難以置信的不必要的,在頂部還有一個故意拼錯的 「Pix」,這個部分本來可以很容易地被編成一個圖片庫,而不是一系列的鏈接,此外邊上的廣告讓這個網站感覺很擁擠。

6.Exmouth View Hotel

為什麼這個網站的登入頁面甚至不包括整個主頁到現在都是個謎,相反的,你必須垂直和水平滾動才能查看所有的文字和照片,這種設計已經會讓那些想在不需要滾動的情況下獲得盡可能多的信息的訪問者望而卻步。

然而,我確實滾動了一下,僅僅是為了研究的目的,卻看到了一些低質量的照片,如果我想入住這家酒店,我會立即被勸退,這些照片並沒有揭示酒店的內部情況、房間的設置或者從房間裡看到的景色,相反的,它們顯示的是一個光線不好的破舊建築。

7.The University of Advancing Technology

The University of Advancing Technology聽起來像是一所利用最新技術和設計發展的現代大學,憑藉數位媒體、遊戲藝術與動畫,特別是網頁設計等學位課程,UAT應該很容易擁有最好的網站設計,對嗎?錯了。

事實上,你甚至要向下滾動才能看到網站的主人是誰,作為一所大學UAT應該希望自己的名字被放在頂部,在landing page
上清晰可見,更沒道理的是他們放了一個奇怪的圖像,一個男人的頭上漂浮著大學學位課程的banner,這既奇怪又讓人困惑。

8.Inflexion Point

這個網站的一個優點是,他的整個主頁都放在landing page上。然而這意味著,沒有其他令人興奮的元素,你可以向下滾動,從令人難以置信的無聊的landing page拉開,如果該公司和他的網站一樣,我恐怕會和一些非常無聊的投資者合作。

我決定點擊其中一個連結,看看網站是否有所改善,但他並沒有,這種很基本又中性的設計進一步加深了投資銀行只做事不玩的名聲,這個網站絕對可以從上述網站中得到一些提示,增加一些大膽的顏色和有趣的照片。

9.終極吉他譜

作為一個音樂家,我經常查找各種歌曲的樂譜和和弦,我可以用來彈鋼琴和吉他,當我試圖點擊這些內容時,我最不想面對的就是巨大的橫幅廣告和奇怪的黃黑配色方案,對於一個應該提供最新歌曲熱門的網站來說,這個網站肯定可以做一些更新了。

我向下滾動,想看看主頁是否提供了當前歌曲的和弦進展的便捷通道。然而相反的它有累積了幾十年過多的音樂類型和用戶帖子的類別,總的來說,網站的設計讓用戶感到非常壓抑,並且在一個主頁上提供了超過使用者需要的訊息。

儘管這些網站設計很糟糕,但以下的平面設計也不遑多讓。

5個糟糕的圖形設計例子

1.The Club Doctor

這個logo第一眼看去完全是太混亂了,有一個聽診器可能會讓用戶認為這是一家醫院或診所,還有一個破碎的高爾夫球桿,此外字體是一種毫無吸引力的綠色,當設計一個logo時,你希望他能立即明確公司是做什麼的,你希望這個logo是令人愉快和誘人的。

2.Cyrenian House

Cyrenian House提供酒精和藥物治療服務,然而當看到這個logo時,這一點是非常不清楚的,他似乎代表著一個人坐在盒子裡面,然後跳出獲得自由,三種不同的顏色沒有任何理由,而且該中心提供的服務在logo上也沒有任何表達,總的來說,這是一個糟糕的設計,肯定會導致混亂。

3.Missouri Department of Conservation

這個logo很明顯是密蘇里州保護部的,而且他以動物和植物為主題,這至少與該組織的使命相互呼應,然而奇怪的是,視覺效果是一片巨大的葉子頂著一條魚頂著一隻浣熊,為什麼會選擇這三個?為什麼他們都堆在一起?這個畫面幾乎是滑稽的,但跟組織一點關係都沒有。

4. DJ Rockin’Raj

不管DJ Rockin' Raj是誰,他顯然是一個激情澎湃、火爆的藝人,然而全特效的文字沒有理由轉成45度角,還有為什麼他的名字是火燒眉毛的?黑色背景上的文字有些驚悚,而且這個設計讓他看起來非常激烈,這兩點可能會讓一些潛在客戶望而卻步。

5.Global Emergency Vehicles

這個設計是在展示這家公司提供的車輛種類之多,然而這些照片並不能很好地搭配在一起,因為有些是舞台上的,而有些則是發動中的,這個設計很俗氣,而且有一些模糊的照片,整體給人一種不專業的態度,分散了公司的重點。


現在,你已經看了一些有趣的設計選擇,你可以確保永遠不會創建一個類似的混亂,混亂的網站或圖形設計。避免這些錯誤,並炫耀你的組織是多麼的專業。

接下來,請閱讀這篇關於客戶生命週期管理的文章。

原文發表於2018年12月21日上午8:00:00,更新於2020年02月06日。

website design wordpress

Related Post:

Get inspired

Tenten provides full onboarding service to make sure your database will be intact from the very beginning. We will lead you step by step to let you understand the full capacity and potential that Hubspot can bring to you.

Get inspired