編者按:找出一個從來沒人用過的布局可能有難度,但是要設(shè)計出出人意表的網(wǎng)站還是不難的。錯位的元素,少見的配色,不一樣的動效與變化,都能促成一個令人難忘的優(yōu)秀網(wǎng)頁。今天的推薦,與此相關(guān)。
出于種種原因,絕大多數(shù)的網(wǎng)站都遵循著相同的規(guī)則來設(shè)計整體的布局。用戶約定俗成的習慣,硬件所限定的交互方式,可用性和易用性規(guī)則下的設(shè)計手法,它們讓我們所看到的網(wǎng)頁如此的相似。從微博到推特,從蘋果官網(wǎng)到小米官網(wǎng),從Facebook到計生委的官網(wǎng),它們都沿著相似的柵格系統(tǒng),然后添加內(nèi)容。
不過,同這些傳統(tǒng)的網(wǎng)站布局不一樣的網(wǎng)站并沒有什么錯。這些不同于傳統(tǒng)的網(wǎng)頁布局,常常能給人不同的觀感,賦予個性,啟發(fā)靈感,帶來跳出來定勢之外的想法。今天搜集的這些網(wǎng)站有作品展示,也有電影網(wǎng)站,有博客,也有企業(yè)官網(wǎng)。希望這些各不相同的網(wǎng)站,能給你做網(wǎng)頁設(shè)計的時候帶來思想的靈光。
Yatzer
Yatzer 網(wǎng)站的獨特設(shè)計旨在激發(fā)訪客的靈感。網(wǎng)站同樣借助柵格來構(gòu)建整體布局,但是你會發(fā)現(xiàn)網(wǎng)頁元素并沒有在縱向上保持對齊,這種錯落的美感讓頁面顯得更加有趣而難忘。
Sylvian Reucherand
當你第一次打開Sylvian 的作品合集的時候,你會發(fā)現(xiàn)頁面頗為極簡,并且文字是相互重疊的。當鼠標懸停在“see more”上面的時候,頁面和元素會自然伸展,讓你看到某個移動端APP的設(shè)計稿預(yù)覽圖。頁面元素布局并不平衡,整體偏左,很有意思。
Lane & Associates
這個來自 Lane & Associates 的展示頁看起來漂亮而簡約,最獨特的地方在于當你滾動頁面的時候,圖片會隨機地在頁面中漂動。設(shè)計師似乎并不想讓這些圖片固定在某個地方,或者排成行列。自然隨性的設(shè)計非常獨特。
Jimmy Says Yes
這個也是為 Timothy 和 Judith 的婚禮而設(shè)計的網(wǎng)頁。整個布局偏向極簡,其中的標題、段落和文字同樣采用的非對齊式的設(shè)計,讓整個頁面給人不一樣的感覺,很容易從同類中區(qū)分開來。
Quechua
Quechua 春夏裝合集頁面中,許多元素同樣采用的是錯落重疊的設(shè)計。說起來,圖片、文字和按鈕等多種元素在頁面中重疊排布的自由式布局在近年來越來越流行了。
Readymag
Readymag 是一個免費的在線排版指南,整個指南由四個部分組成,而布局上也相當?shù)暮唵沃庇^。不過當你看到一個關(guān)于Futura 和 Grarmond 字體的章節(jié)的時候,你會發(fā)現(xiàn)字體纖細瘦長的段落并沒有居中對齊,這種差異頗有意思。
VN Star
VN Star 是一個地產(chǎn)開發(fā)集團,他們的網(wǎng)站在頁頭的設(shè)計上非常獨特,圓形元素被加入其中,被作為視覺的中心,同不同的元素產(chǎn)生交疊,在動效加持下產(chǎn)生有趣的效果。
88 and 90 Lex
88 and 90 Lex 這個頁面真正讓人感到獨樹一幟的是他們的導航設(shè)計,它們并沒有置于頂端,也沒有放在底部,而是作為整個頁面的主體,放置在頁面的中央。
Christopher Ireland
這是一個布局相當整潔的網(wǎng)站設(shè)計,如果你仔細查看其中圖片布局會發(fā)現(xiàn),它們其實并沒有嚴格按照已知的柵格系統(tǒng)來進行布局。在確定這一點再來看被組織的如此的整齊漂亮的頁面,你會感受到網(wǎng)站的獨創(chuàng)性。
Brian Hoff
許多網(wǎng)站都試圖規(guī)避配色過于復(fù)雜的背景,但是Brian Hoff的網(wǎng)站則不然,多彩且造型多樣的幾何圖形相互交疊在一起,視覺上相當?shù)挠腥?。網(wǎng)頁另外一個有意思的設(shè)計是它的按鈕,當你鼠標懸停其上的時候,形狀會發(fā)生改變。
Frames by Franke
這個著陸頁是為廚房用的廚具和電器所設(shè)計的,不同尺寸的圖片和視頻沿著中間軸分散排布著,每個部分都配備著文字內(nèi)容。這樣的布局方式不復(fù)雜,但是一樣漂亮,也令人難忘。
Nlee
Nlee向我們展示了,即使是使用基礎(chǔ)的標準的表單,同樣可以做的相當?shù)呐c眾不同。幾何圖形和文本內(nèi)容的交疊排布就可以呈現(xiàn)出不俗的視覺效果,搭配上不多的幾個圖標和裝飾性元素,整個頁面同樣讓人覺得很豐滿。
Signesduquotidien
Everyday Signs 是一個古怪、有趣且交互性很強的網(wǎng)站,它展示設(shè)計項目的方式很不相同,黃色外框和不同區(qū)塊的交疊,讓網(wǎng)站看起來仿佛變成了三維的界面。
Livo UI Kit
說實話,Livo UI Kit 并不是最優(yōu)秀的UI Kit,但是它的著陸頁設(shè)計相當有一套,傾斜的布局,錯落的背景,這種打破規(guī)則的設(shè)計會引起訪客的興趣。
Ginventory
如果你對杜松子酒感興趣,那么 Ginventory 這個應(yīng)用可以很好的幫到你。這個APP的著陸頁設(shè)計充滿了各種奇怪的元素,不同的元素相互重疊,并且隨著你的滾動不停的旋轉(zhuǎn)、交疊、消失、出現(xiàn)、移動,變化會有停止的錨點,它們并不會讓你感到混亂,反而很好地體現(xiàn)出它們的個性。
Sweet Punk
這些獨特的頁面大多是通過打破平衡來實現(xiàn)的,而Sweet Punk 這個頁面也同樣是通過有限的元素交疊、布局來實現(xiàn)非平衡的視覺。
The Nero
The Nero 這個網(wǎng)站是設(shè)計師 Margo Grimaldi 的作品展示頁,網(wǎng)站讓人難忘的是光標懸停狀態(tài)下,項目目錄的展示方式:展開,色彩變化。網(wǎng)站的主體是項目列表,而列表整體向右便宜,在視覺上的不平衡更容易被用戶注意到。
62 Models
當你剛剛一打開網(wǎng)站的時候,就需要選擇你想看的男性還是女性模特。光標懸停到特定性別上的時候,另一個選項會半透明、變模糊,而選中的選項會放大,出現(xiàn)詳細信息,排版布局微調(diào)。
Amy Movie
Amy Movie 的網(wǎng)頁最令人著迷的是它的導航和菜單的設(shè)計。首頁使用的是視頻背景,而點擊左上角的菜單之后,你也會為之沉迷:居中的菜單選項會隨著光標移動而變化,每個選項都會有相應(yīng)的視頻和圖片,隨著過渡動效而出現(xiàn)。
Pierre Georges
Pierre Georges 在創(chuàng)意設(shè)計上非常的獨到。他所設(shè)計的頁面中,許多元素并不是遵循我們?nèi)粘?吹降哪切╉撁娴倪壿?,那些略顯尷尬和格格不入的元素讓頁面變得不同凡響。
Sztafeta Pokolen
網(wǎng)站的導航設(shè)計是基于傳統(tǒng)的設(shè)計來做的,但是它隨著獨特的頁面布局,結(jié)合了一些新的設(shè)計手法。整個網(wǎng)站的配色不復(fù)雜但是非常漂亮,插畫和字體的選取,在整個布局設(shè)計下,顯得大氣而壯觀。
Haute Horlogerie
這是一個制表匠的網(wǎng)站著陸頁,首頁的文字介紹部分的排版布局是最令人著迷的,簡單的配色和些許的交疊讓它顯得不同凡響。
Webydo
這個網(wǎng)站同樣沒有使用過于激烈、離經(jīng)叛道的設(shè)計,但是簡單的錯位布局會讓人注意到,難以忘懷。
凌聚科技立足佛山面向全國,作為佛山網(wǎng)站建設(shè)公司服務(wù)提供商,提供高端精美網(wǎng)站設(shè)計、品牌形象網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、高交互自適應(yīng)的響應(yīng)式網(wǎng)站設(shè)計建設(shè)、網(wǎng)站SEO優(yōu)化等服務(wù)。憑借過硬的技術(shù)開發(fā)及安全保障實力、專業(yè)的全方位解決方案一舉獲得客戶的認可。咨詢熱線:0757-83075955
推薦閱讀:
傳統(tǒng)企業(yè)互聯(lián)網(wǎng)化思路:互聯(lián)網(wǎng)+傳統(tǒng)企業(yè)解決方案
網(wǎng)站SEO優(yōu)化是什么?如何來做網(wǎng)站SEO優(yōu)化?
怎么在設(shè)計中提升網(wǎng)站的顏值和內(nèi)涵?
網(wǎng)站建設(shè):企業(yè)做網(wǎng)站需要了解哪些核心問題?
佛山網(wǎng)站設(shè)計:網(wǎng)站首頁設(shè)計的基本原則
網(wǎng)絡(luò)營銷如何與網(wǎng)絡(luò)熱點事件結(jié)合?