1. Heco合作伙伴
我們只是無(wú)法獲得足夠的這個(gè)網(wǎng)站!當(dāng)您進(jìn)入總部位于芝加哥的設(shè)計(jì)公司Heco Partners的網(wǎng)站時(shí),會(huì)遇到“將信息轉(zhuǎn)化為人們所關(guān)心的體驗(yàn)”的字樣,它徘徊在波濤之上。
這兩個(gè)要素結(jié)合在一起,象征著他們將思想變?yōu)樾袆?dòng)的承諾。甚至無(wú)需滾動(dòng),我們就可以很清楚地了解他們是誰(shuí),做什么??傮w而言,該站點(diǎn)提供了一個(gè)好的示例,展示了將投資組合與更詳細(xì)的背景信息相結(jié)合的正確方法,如其每個(gè)項(xiàng)目所舉例說(shuō)明的。我們將了解他們?nèi)绾螏椭蛻羧〉贸晒?,并全面了解他們的工作方式?/div>
缺少導(dǎo)航和箭頭提示您向下滾動(dòng)以獲取整個(gè)Heco Partners的故事,但是您也可以進(jìn)入其基于項(xiàng)目的案例研究中。導(dǎo)航最終出現(xiàn)在此處的項(xiàng)目部分,您可以在屏幕右下角使用類(lèi)似滑塊的箭頭瀏覽項(xiàng)目。
無(wú)法從選擇的一個(gè)區(qū)域跳到下一個(gè)區(qū)域,這有點(diǎn)痛苦。該網(wǎng)站很難瀏覽。但是,每個(gè)部分之間的淡入淡出過(guò)渡以及其他各種動(dòng)畫(huà)的美妙之處,使該站點(diǎn)成為滾動(dòng)瀏覽的真正樂(lè)趣。
哦,我們提到它完全內(nèi)置于Webflow嗎?
2.傻瓜
布局:全屏英雄圖像,可滾動(dòng)到頁(yè)面并轉(zhuǎn)換為一系列網(wǎng)格布局
傻瓜
當(dāng)我第一次訪問(wèn)該網(wǎng)站時(shí),我立即將其添加到我的設(shè)計(jì)靈感書(shū)簽中。
約瑟夫·貝里(Joseph Berry)決定拍攝他最喜歡的電影之一,即1980年代的經(jīng)典電影《傻瓜》,并將其轉(zhuǎn)變?yōu)樾麄黠L(fēng)格的網(wǎng)站。The Goonies獲得了Awwwards的“每日提名獎(jiǎng)和網(wǎng)站獎(jiǎng)”,它是現(xiàn)代敘事的典范 -利用現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)和敘事的力量。
goonies主頁(yè)
約瑟夫(Joseph)使用Webflow的互動(dòng)和動(dòng)畫(huà)來(lái)創(chuàng)建高度引人入勝的用戶體驗(yàn),讓Goonies狂熱者可以重溫電影中他們最喜歡的時(shí)刻。
3. Nelu Cebotari的圖片組合
布局:三欄英雄,可轉(zhuǎn)換為滾動(dòng)顯示的主導(dǎo)航菜單
內(nèi)盧·塞博塔里
作品集網(wǎng)站應(yīng)展示您作為設(shè)計(jì)師的能力。Nelu Cebotari's就是這樣做的。
一個(gè)設(shè)計(jì)組合為您提供了機(jī)會(huì),不僅炫耀你對(duì)工作的偉大工程,也是與頁(yè)面本身證明你的
網(wǎng)站設(shè)計(jì)技巧。Nelu Cebotari創(chuàng)建了一個(gè)在線作品集,以捕捉他作為設(shè)計(jì)師的個(gè)性和技能,同時(shí)巧妙地避免陳詞濫調(diào)。
黃色可能有點(diǎn)刺眼,但他為背景和整個(gè)背景選擇了正確的柔和陰影。這種顏色選擇使黑色文字真正脫穎而出??傮w而言,配色方案會(huì)產(chǎn)生影響。
該設(shè)計(jì)的另一個(gè)獨(dú)特部分是導(dǎo)航,它被放在行動(dòng),工作和聯(lián)系的呼吁的前面和中間。將鼠標(biāo)懸停在每個(gè)按鈕上方,都可以看到一個(gè)從底部向上滑動(dòng)的盒子。這些方塊中的每個(gè)方塊都有一些文字,提示您了解更多或保持聯(lián)系。這與簡(jiǎn)單的輪廓圖標(biāo)相結(jié)合,使您的體驗(yàn)輕松自如。
這種精簡(jiǎn)的,斯巴達(dá)式的方法至少對(duì)于設(shè)計(jì)師來(lái)說(shuō)是令人驚訝的。但是,當(dāng)您將鼠標(biāo)懸停在他的作品集的預(yù)告片上時(shí),示例設(shè)計(jì)就變得生動(dòng)起來(lái),誘使您更深入地研究該項(xiàng)目。
聯(lián)絡(luò)表對(duì)其對(duì)話設(shè)計(jì)方法也非常易于使用。您需要做的就是替換幾個(gè)占位符,單擊“提交”,然后您的請(qǐng)求就在進(jìn)行中。將表單的設(shè)計(jì)精簡(jiǎn)為必要的信息,使之成為一種更有效的交流方式。
Nelu Cebotari投資組合
聯(lián)系表格不必太復(fù)雜。這種簡(jiǎn)單的方法使聯(lián)系變得容易
4.從不夏天滑雪板
布局:全屏背景視頻為您提供進(jìn)入更多傳統(tǒng)電子商務(wù)頁(yè)面的門(mén)戶
從來(lái)沒(méi)有夏天的滑雪板
Never Summer不會(huì)專(zhuān)注于他們的產(chǎn)品而不會(huì)失去樂(lè)趣。
對(duì)于單板滑雪制造商這樣的體育運(yùn)動(dòng)公司而言,他們的魅力和騎手的能力很容易滑行。旋轉(zhuǎn)得更多或更大的人幾乎可以將任何滑雪板出售給他或她所鐘愛(ài)的粉絲。Never Summer擁有堅(jiān)實(shí)的團(tuán)隊(duì)成員名單,使這些騎手成為他們故事的一部分,但此處的真正重點(diǎn)是他們的高質(zhì)量產(chǎn)品。
您會(huì)發(fā)現(xiàn)很多技術(shù)規(guī)格,但是它們會(huì)在斜坡上為您提供幫助的原因?qū)Υ颂峁┝酥С?。他們讓您以相?dāng)清晰的語(yǔ)言(而不是用清晰的語(yǔ)言)讓您知道所有這些材料和構(gòu)造技術(shù)如何使他們的木板更好。
憑借技術(shù)規(guī)范和對(duì)木板結(jié)構(gòu)的關(guān)注,此頁(yè)面布局可能會(huì)遭受?chē)?yán)重的信息過(guò)載情況。但是他們可以通過(guò)注入個(gè)性來(lái)避免這種情況。這一切可能使一家面面俱到的制造商成為現(xiàn)實(shí),并表明他們也有輕松的一面。
5.靈魂爵士唱片
布局:基于網(wǎng)格的實(shí)體唱片存儲(chǔ)體驗(yàn)的復(fù)制。
靈魂爵士唱片
宇宙之聲為您帶來(lái)了進(jìn)入唱片店的數(shù)字世界的真實(shí)體驗(yàn)。
環(huán)球唱片的聲音是折衷唱片公司Soul Jazz的數(shù)字化分支。從重新發(fā)行晦澀的放克,爵士樂(lè)和朋克音樂(lè),到發(fā)行新專(zhuān)輯,他們都確保聽(tīng)到可能不會(huì)引起太多關(guān)注的音樂(lè)。
電子商務(wù)網(wǎng)站很好地展示了他們發(fā)布的許多流派。關(guān)于藝術(shù)家以及聲音樣本的背景信息很多,以使他們了解他們的聲音。
作為我自己的音樂(lè)迷,我花了很多時(shí)間在唱片店里翻閱專(zhuān)輯。我喜歡這種電子商務(wù)網(wǎng)站布局設(shè)計(jì)的原因在于,它捕捉到了在唱片商店中的感覺(jué)。您可以在圖庫(kù)中瀏覽各種發(fā)行版本。如果有任何藝術(shù)品引起您的注意,則可以單擊封面進(jìn)行仔細(xì)查看。這就像翻遍一堆蠟,抓住立即抓住您的蠟,然后將其取出進(jìn)行進(jìn)一步檢查。通過(guò)將瀏覽唱片的實(shí)際行為轉(zhuǎn)化為數(shù)字體驗(yàn),“宇宙之聲”將自己與其他缺乏這種熟悉的交互性的音樂(lè)零售商區(qū)分開(kāi)來(lái)。
Sounds of the Universe通過(guò)簡(jiǎn)單的懸停交互將在唱片商店中的音樂(lè)翻閱到您的計(jì)算機(jī)屏幕上的樂(lè)趣。
6.舊金山現(xiàn)代藝術(shù)博物館
布局:全屏背景視頻,帶有指向訪問(wèn)者可以執(zhí)行的最重要操作的最少鏈接。
SFMOMA創(chuàng)建了一個(gè)專(zhuān)注于藝術(shù)性和可用性的網(wǎng)站杰作
博物館里的藝術(shù)激發(fā)和吸引著我們的想象力。他們的網(wǎng)站應(yīng)該做同樣的事情。
大多數(shù)博物館網(wǎng)站在炫耀特色作品,宣傳當(dāng)前展覽以及提供重要的游客信息(例如營(yíng)業(yè)時(shí)間和票務(wù)信息)方面做得不錯(cuò)。SFMOMA也會(huì)做所有這些事情,但是以一種更漂亮的方式。
我們看到的是觀看者站在他們面前的視頻,而不是靜止不動(dòng)的一些靜止圖像,所有這些都是從這樣的角度拍攝的,使您感覺(jué)自己就在自己身邊。這些剪輯讓您對(duì)訪問(wèn)時(shí)的體驗(yàn)有所了解。這是英雄視頻的有效使用,可以傳達(dá)他們的博物館經(jīng)驗(yàn)。
直觀的導(dǎo)航,雅致的字體以及對(duì)構(gòu)圖的高度關(guān)注,這些都使SFMOMA的網(wǎng)站成為了墻壁上偉大藝術(shù)的反映。
7. R2D3
布局:兩列Z模式,帶有大量動(dòng)畫(huà)圖。
r2d3
網(wǎng)站是一種可以教學(xué)的工具。R2D3利用網(wǎng)絡(luò)的力量來(lái)解釋機(jī)器學(xué)習(xí)。
似乎我們?cè)L問(wèn)的大多數(shù)網(wǎng)站都與某種商業(yè)有關(guān)。但是,我們絕對(duì)不應(yīng)該在網(wǎng)站上具有巨大的教育潛力。
R2D3通過(guò)其“機(jī)器學(xué)習(xí)的視覺(jué)介紹”實(shí)現(xiàn)了這一目標(biāo)。通過(guò)一系列動(dòng)畫(huà),他們能夠以相對(duì)簡(jiǎn)單的方式傳達(dá)這個(gè)復(fù)雜的概念。它使學(xué)習(xí)引人入勝的體驗(yàn)比盯著教科書(shū)中的單詞和數(shù)字更有趣。
在此模塊中,他們使用有關(guān)舊金山和紐約房屋屬性的數(shù)據(jù)集來(lái)展示計(jì)算機(jī)如何在解決問(wèn)題中利用統(tǒng)計(jì)學(xué)習(xí)。對(duì)于像我這樣的非數(shù)學(xué)家來(lái)說(shuō),本教程引起了我的興趣,我感到自己對(duì)這個(gè)概念有了更深入的了解。
機(jī)器學(xué)習(xí)的動(dòng)畫(huà)可視化
R2D3使用引人注目的動(dòng)畫(huà)向我們展示了機(jī)器學(xué)習(xí)的工作原理。
8.對(duì)等空間
布局:全屏封面過(guò)渡為兩個(gè)破碎的網(wǎng)格部分,然后是幾個(gè)更剛性的網(wǎng)格。
對(duì)等空間
Peerspace正在改變?nèi)藗兝煤蛯ふ铱臻g進(jìn)行創(chuàng)意和業(yè)務(wù)追求的方式。
Peerspace旨在將創(chuàng)意者和其他企業(yè)家連接到短期空間。無(wú)論是用于彈出式商店還是用于視頻拍攝的地點(diǎn),Peerspace都希望使確保地點(diǎn)安全的過(guò)程變得容易。
他們的年度回顧不僅看起來(lái)很酷,柔和的粉彩和風(fēng)格化的標(biāo)題處理,而且還以“我們?nèi)绾蝿?chuàng)造體驗(yàn)已改變”為主題進(jìn)行了敘述。從創(chuàng)建了快閃店以與客戶聯(lián)系的在線零售商,到體育館之外的其他體育活動(dòng),這些都是Peerspace在尋找位置時(shí)提供解決方案的所有領(lǐng)域。雖然這些元素的位置似乎沒(méi)有韻律或原因,但這種隨意性增加了一種古怪的個(gè)性感,這似乎是品牌的核心。
Peerspace在讓客戶講述他們的故事方面也做得很好。通過(guò)照片,視頻和寫(xiě)作,我們可以了解Peerspace如何幫助他們。
但是,值得注意的是,不幸的是,這些內(nèi)容是通過(guò)圖像傳遞的。這會(huì)嚴(yán)重破壞頁(yè)面的SEO(
搜索引擎優(yōu)化)及其可訪問(wèn)性,因此我們不得不懷疑為什么他們走了這條路。如果用戶無(wú)法通過(guò)搜索引擎找到您的網(wǎng)站或無(wú)法使用其內(nèi)容,那么其他網(wǎng)站功能(如可愛(ài)的視覺(jué)設(shè)計(jì)元素)就沒(méi)什么用。
為什么您的設(shè)計(jì)團(tuán)隊(duì)?wèi)?yīng)使用Webflow
了解設(shè)計(jì)團(tuán)隊(duì)如何使用Webflow簡(jiǎn)化其工作流程,并建立更好的體驗(yàn)。
輕松協(xié)作
9.介紹
布局:以副本為主導(dǎo)的英雄會(huì)流入單列項(xiàng)目列表。
介紹
演示結(jié)合了順序和實(shí)驗(yàn),以創(chuàng)建有趣且引人入勝的設(shè)計(jì)。
Presentation是一家位于澳大利亞珀斯的網(wǎng)絡(luò)設(shè)計(jì)和藝術(shù)指導(dǎo)機(jī)構(gòu)。代理商總是以各種花招來(lái)塞滿他們的網(wǎng)站,以使所有具有創(chuàng)意才華的訪問(wèn)者眼花azz亂。Presentation可以采用一些簡(jiǎn)單的元素,并以某種方式顯示它們,而不會(huì)過(guò)度展示它們的設(shè)計(jì)技巧。
在充滿微交互和令人眼花interaction亂的交互的網(wǎng)絡(luò)中,遇到如此簡(jiǎn)單,直接和專(zhuān)注的事物令人耳目一新。演示有一個(gè)故事要講-所以他們講了。就這么簡(jiǎn)單。
10.強(qiáng)化
布局:流血的英雄過(guò)渡到一個(gè)交替的僵化和破碎(并在視覺(jué)上暴露)的網(wǎng)格。
通過(guò)非傳統(tǒng)的網(wǎng)站布局,此頁(yè)面創(chuàng)建了獨(dú)特的用戶體驗(yàn)。
提出一個(gè)關(guān)于通用設(shè)計(jì)主題的新變化,或者完全擺脫它,這將使您作為Web設(shè)計(jì)師與眾不同。如果您想展示您的設(shè)計(jì)課程將如何幫助人們?cè)赪ebflow中創(chuàng)建超越平凡的網(wǎng)站,則需要?jiǎng)?chuàng)建一個(gè)頁(yè)面。Intensive展示了良好設(shè)計(jì)的力量,并希望教會(huì)您自己利用這種力量。
此設(shè)計(jì)的特色是英雄視頻,其中顯示了被點(diǎn)擊的各種網(wǎng)頁(yè)。有一個(gè)號(hào)召性用語(yǔ),但是它不是坐著不動(dòng),而是一個(gè)不對(duì)稱(chēng)的布局,與左側(cè)對(duì)齊。三重3D轉(zhuǎn)換后的頁(yè)面滑入到位。由于二維特性的限制,設(shè)計(jì)很容易倒塌,但是這些傾斜的網(wǎng)頁(yè)打破了規(guī)則,創(chuàng)造了一些有趣的視覺(jué)效果。每個(gè)部分都由一個(gè)成角度的塊分隔,后跟以傳統(tǒng)方式布置的文本。
這種設(shè)計(jì)激勵(lì)我們將工作引入新的維度,并且應(yīng)該激勵(lì)有抱負(fù)的設(shè)計(jì)師想要學(xué)習(xí)如何做。
11.自行車(chē)時(shí)間Bali Road Bike Camp
布局:流血的英雄過(guò)渡到一個(gè)比較僵硬的網(wǎng)格,感覺(jué)有點(diǎn)破損。
自行車(chē)時(shí)光(Bike Time)的設(shè)計(jì)依賴(lài)于精美的圖像以及在字體大小調(diào)整中的謹(jǐn)慎使用。
自行車(chē)時(shí)報(bào)結(jié)合了精美的照片,最少的圖表和簡(jiǎn)短的段落,讓您沉浸在所有酷炫的體驗(yàn)和地形中(如果您參加此公路自行車(chē)訓(xùn)練營(yíng),您將可以騎車(chē)穿越)。巴厘島徽標(biāo)的版式呼應(yīng)下面圖像中道路的運(yùn)動(dòng)。這是一個(gè)設(shè)計(jì)元素,本來(lái)可以分散注意力,但在蜿蜒的山路上表現(xiàn)不錯(cuò)。
照片上的設(shè)計(jì)很沉重,彰顯了該地區(qū)的壯麗美景。還有許多圖的線與地形的線相同。
除了精美的照片外,還有各種尺寸的文本,其中有些字體很大,有些字體則小得多。它在頁(yè)面上產(chǎn)生對(duì)比度,并象征著人們將要穿越的峰谷。
12.疊加工作室
布局:一個(gè)立方體插入我們的屏幕,旋轉(zhuǎn)的項(xiàng)目縮略圖輪播形成邊框。
疊加工作室
Superimpose Studio的網(wǎng)站已超越了“獨(dú)特”的范疇,可以穩(wěn)固地進(jìn)入實(shí)驗(yàn)領(lǐng)域。它采用了傳統(tǒng)的組合網(wǎng)格并將其擴(kuò)展為三個(gè)維度,圍繞工作室的名稱(chēng)創(chuàng)建了一個(gè)旋轉(zhuǎn)的項(xiàng)目圖形框架,該名稱(chēng)是該站點(diǎn)的導(dǎo)航元素。
單擊這些旋轉(zhuǎn)圖像之一,您將轉(zhuǎn)到項(xiàng)目的詳細(xì)信息頁(yè)面,該頁(yè)面將旋轉(zhuǎn)主頁(yè)輪播,以便圖像垂直滾動(dòng),并在您滾動(dòng)經(jīng)過(guò)它們時(shí)向您彎曲。這是一種巧妙的設(shè)計(jì),即使有些令人迷惑并且占用大量?jī)?nèi)存。
我們?cè)絹?lái)越多地看到來(lái)自網(wǎng)頁(yè)設(shè)計(jì)師和工作室的實(shí)驗(yàn)性藝術(shù)作品。這樣,該實(shí)驗(yàn)就成為了構(gòu)
建網(wǎng)站內(nèi)容的獨(dú)特方式,使?jié)撛诳蛻羟宄刂涝摴ぷ魇艺趯で筇峁﹦?chuàng)新的設(shè)計(jì)作品。
13. Lauren Wickware的作品集
布局:全血英雄切換到分屏項(xiàng)目“卡片”。
勞倫·威克沃(Lauren Wickware)
最近另一個(gè)引起我關(guān)注的投資組合網(wǎng)站是書(shū)籍設(shè)計(jì)師Lauren Wickware's。多維滾動(dòng)創(chuàng)造出令人驚奇的平滑和引人入勝的體驗(yàn),與卷軸調(diào)情調(diào)情,而不會(huì)感到被迫或束縛。
項(xiàng)目詳細(xì)信息頁(yè)面采用了一種更為傳統(tǒng)的方法,包括一系列精美的,近乎全屏的圖像以及簡(jiǎn)短精美的排版文本片段。這種外觀不僅漂亮,而且還可以幫助訪問(wèn)者將注意力集中在她華麗的編輯作品上。
14. Poulos集體
布局:磚石風(fēng)格的布局,帶有不同的紙牌,當(dāng)您滾動(dòng)時(shí)會(huì)逐漸消失
Poulos Collective是一家專(zhuān)門(mén)從事UX設(shè)計(jì)和策略的設(shè)計(jì)咨詢公司。它的站點(diǎn)提供了干凈,簡(jiǎn)單,最重要的是功能體驗(yàn)。該網(wǎng)站由Stefan Poulos創(chuàng)建,其簡(jiǎn)單性吸引了我的注意。調(diào)色板令人愉悅,文本易于閱讀,并且輕巧的外觀和感覺(jué)允許極快的加載速度 -提供了出色的用戶體驗(yàn)。
該網(wǎng)站讓您感到…順暢。
我更喜歡這個(gè)網(wǎng)站的移動(dòng)版面。它可以為您提供所需的一切,而您卻不需要任何東西。真正了解內(nèi)容是很容易的。當(dāng)我查看Poulos Collective的網(wǎng)站時(shí),我不會(huì)為復(fù)雜的行話或令人眼花-亂的設(shè)計(jì)所迷惑。
15.丹·佩雷拉
布局:僅包含標(biāo)題和日期的簡(jiǎn)單博客帖子供稿,單擊后即可無(wú)縫轉(zhuǎn)換為帖子詳細(xì)信息視圖。
我在獨(dú)特,簡(jiǎn)約的布局中發(fā)現(xiàn)了很多樂(lè)趣,Dan Perrera的博客提供了一個(gè)真正令人愉快的示例。主頁(yè)包含帶時(shí)間戳的博客帖子的簡(jiǎn)單供稿,左側(cè)帶有粘性導(dǎo)航欄。今年以來(lái),我越來(lái)越看到側(cè)邊欄導(dǎo)航的獨(dú)特用途。
最重要的是,Dan創(chuàng)建了一個(gè)不錯(cuò)的關(guān)于頁(yè)面,當(dāng)您單擊信息按鈕時(shí),該頁(yè)面從屏幕右側(cè)滑入,使首頁(yè)具有類(lèi)似滑塊的感覺(jué)。Bravo,Dan就是這個(gè)好的極簡(jiǎn)設(shè)計(jì)!
尋找靈感并進(jìn)一步推動(dòng)自己的設(shè)計(jì)
作為設(shè)計(jì)師,我們知道客戶經(jīng)常只需要經(jīng)過(guò)實(shí)踐檢驗(yàn)的真實(shí)
解決方案。而且,我們可以輕松滿足他們的要求。遵守約定是可以的,但是
網(wǎng)站建設(shè)者在設(shè)計(jì)上有很大的余地可以嘗試一些不同的東西。通過(guò)采用非傳統(tǒng)的方法,我們可以提出令人難忘的
網(wǎng)站設(shè)計(jì),并且不會(huì)在統(tǒng)一的海洋中迷失方向。
新聞標(biāo)題:成都建網(wǎng)站報(bào)價(jià)
文章網(wǎng)址:http://muchs.cn/news22/176122.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、自適應(yīng)網(wǎng)站、商城網(wǎng)站、用戶體驗(yàn)、電子商務(wù)、企業(yè)網(wǎng)站制作
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)