12個(gè)Web 開發(fā)個(gè)人作品集網(wǎng)站推薦

時(shí)間：2022-07-28 15:27:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-07-28 15:27:01 來源：網(wǎng)站運(yùn)營(yíng)

對(duì)于前端開發(fā)人員或網(wǎng)頁設(shè)計(jì)師而言，建立個(gè)人作品集網(wǎng)站不僅可以在線展示自己的作品，也能體現(xiàn)個(gè)人的成就以及技能的專業(yè)度，從而給人留下深刻的印象。然而在追求內(nèi)容創(chuàng)意、令人驚嘆的布局同時(shí)，我們更應(yīng)該考慮網(wǎng)站訪客的實(shí)際體驗(yàn)，總體而言在創(chuàng)建作品集網(wǎng)站時(shí)有以下6個(gè)方面值得注意：




1.網(wǎng)頁中是否有清晰的CTA按鈕，方便用戶了解更多關(guān)于你的信息？

2.網(wǎng)站的布局，是否有令人困惑或不明白的地方？

3.是否在展示個(gè)人才能方面，描述過于冗長(zhǎng)？

4.網(wǎng)頁是否花很長(zhǎng)的時(shí)間來加載？緩慢的網(wǎng)頁加載等同于面試時(shí)遲到，務(wù)必避免。

5.網(wǎng)頁是否展示用戶關(guān)心的核心問題，還是僅僅在無意義盡數(shù)個(gè)人往期成就？

6.網(wǎng)頁是否能在手機(jī)端正常加載和顯示？




與商業(yè)網(wǎng)站相比，個(gè)人作品集網(wǎng)站更注重個(gè)人的表達(dá)和獨(dú)立的思考，不僅對(duì)于設(shè)計(jì)趨勢(shì)有天然的親和力，而且情緒的表達(dá)也更為清晰、直接。這里小編搜羅了12個(gè)最佳的Web開發(fā)個(gè)人作品集網(wǎng)站，無論是作為學(xué)習(xí)的素材、還是開闊眼界的作品，都是不錯(cuò)的資源，一起看看吧。

12個(gè)Web開發(fā)作品集網(wǎng)站賞析

1. http://www.rleonardi.com/

• 設(shè)計(jì)師：Robby Leonardi
• 背景簡(jiǎn)介：Robby是一名多學(xué)科設(shè)計(jì)師、技術(shù)愛好者，以及NBA球迷
• 亮點(diǎn)：完美融合交互體驗(yàn)和童年時(shí)期的電子游戲界面，給人新奇又愛不釋手的感覺

正如你所見，這個(gè)網(wǎng)站看起來像是一個(gè)在線的電子游戲，進(jìn)入后隨著鼠標(biāo)的上下移動(dòng)，可以如打游戲般輕松了解Robby的工作經(jīng)歷及專業(yè)技能，這種有趣的互動(dòng)設(shè)計(jì)會(huì)有種讓人一直滾動(dòng)頁面直到“通關(guān)”的感覺。如果你想尋找一種新奇的方式，將看似枯燥但對(duì)個(gè)人十分重要的信息展示給用戶，那么這個(gè)網(wǎng)站可以多借鑒下。




2. http://findmatthew.com/

• 設(shè)計(jì)師：Matthew Williams
• 背景簡(jiǎn)介：他是一名前端開發(fā)工程師，此外對(duì)UI效果、動(dòng)畫以及動(dòng)態(tài)用戶體驗(yàn)也熱愛
• 亮點(diǎn)：黑色主色調(diào)的單頁設(shè)計(jì)，既美觀、又給人干凈的感覺

如果你追求創(chuàng)意和美觀，那么像這樣的單頁網(wǎng)站是很好的選擇。這里Matthew的個(gè)人作品集網(wǎng)站采用了黑色的主色調(diào)，既時(shí)尚、也給人一種干凈簡(jiǎn)潔的感覺。網(wǎng)站首頁有一句簡(jiǎn)單的自我介紹，隨著頁面下拉會(huì)自動(dòng)加載不同的欄目?jī)?nèi)容：專業(yè)技能、作品集、博客文章以及聯(lián)系方式。從這個(gè)網(wǎng)站就可以看到他嫻熟的開發(fā)和設(shè)計(jì)水平。




3. http://driesvanbroeck.be/

• 設(shè)計(jì)師：DRIES VAN BROECK
• 背景簡(jiǎn)介：一名動(dòng)效設(shè)計(jì)師
• 亮點(diǎn)：看似令人分心、實(shí)則充滿小心機(jī)的動(dòng)效設(shè)計(jì)

如果按照一般的網(wǎng)頁規(guī)則來看，這個(gè)網(wǎng)站中的動(dòng)效無疑會(huì)讓人容易分心，但隨著鼠標(biāo)滾動(dòng)會(huì)不難發(fā)現(xiàn)一切都是“有跡可循”：輪播的圖片會(huì)在通覽全網(wǎng)內(nèi)容后形成精美的布局排版，鮮艷的提示文字隱藏有作者的更多介紹，循環(huán)跳躍的小icon將用戶的關(guān)注點(diǎn)自然吸引到網(wǎng)頁中最重要的部分。總而言之，沒毛病。




4. http://www.maltegruhl.com/

• 設(shè)計(jì)師：Malte Gruhl
• 背景簡(jiǎn)介：自由設(shè)計(jì)師
• 亮點(diǎn)：“包羅萬象”的網(wǎng)站，給人一種深深的迷幻和神秘感

相信很多人看到這個(gè)網(wǎng)頁的感覺，會(huì)有看到作者本人名字MalteGruhl同樣的感覺，那就是很迷幻。無論是極簡(jiǎn)、藝術(shù)還是抽象似乎都不足以精確描述他的設(shè)計(jì)特點(diǎn)，唯有迷幻才更接近這個(gè)網(wǎng)站的設(shè)計(jì)精髓，隨著頁面往下滾動(dòng)甚至?xí)l(fā)現(xiàn)很多物理和化學(xué)等學(xué)科的影子，說不出的神秘和吸引感。





5. https://benbate.com/

• 設(shè)計(jì)師：Ben Bate
• 背景簡(jiǎn)介：產(chǎn)品設(shè)計(jì)師，經(jīng)常與初創(chuàng)或大企業(yè)合作創(chuàng)造有影響力的電子產(chǎn)品
• 亮點(diǎn)：網(wǎng)頁設(shè)計(jì)一般，但文案和內(nèi)容設(shè)計(jì)會(huì)讓你眼前一亮

這個(gè)網(wǎng)站看起來像是Bootstrap制作的，雖然視覺設(shè)計(jì)尚不能算特別突出，但用心看他的文案和內(nèi)容的設(shè)計(jì)倒是非常好玩兒。




6. http://www.elsamuse.com/en/

• 設(shè)計(jì)師：Elsa Muse
• 背景簡(jiǎn)介：法國時(shí)尚博主
• 亮點(diǎn)：藝術(shù)家氣質(zhì)的時(shí)尚網(wǎng)站，大膽配色、教科書般的極簡(jiǎn)主義

不得不說Elsa Muse的設(shè)計(jì)作品中多少都帶有一些藝術(shù)特質(zhì)，我們從網(wǎng)站中也能有所察覺。大膽的配色和近乎教科書式的極簡(jiǎn)設(shè)計(jì)，相信對(duì)于很多人來說都確實(shí)是打開眼界。




7. http://www.legworkstudio.com/

• 設(shè)計(jì)師：Legworkstudio工作室
• 背景簡(jiǎn)介：Legworkstudio是位于美國科羅拉多州的個(gè)人工作室
• 亮點(diǎn)：從未見過的動(dòng)畫及交互體驗(yàn)

網(wǎng)頁的動(dòng)畫以及隨鼠標(biāo)滑動(dòng)翻頁的交互動(dòng)效，使這個(gè)網(wǎng)站脫穎而出。相信很多人都會(huì)對(duì)主頁上獨(dú)特的手繪動(dòng)畫產(chǎn)生深刻印象，關(guān)鍵在于這些動(dòng)畫也不像之前見過的任何東西，比如：長(zhǎng)者三只眼睛的女電報(bào)員？




8. https://www.loungelizard.com/

• 設(shè)計(jì)師：Lounge Lizard
• 背景簡(jiǎn)介：紐約的網(wǎng)頁設(shè)計(jì)公司
• 亮點(diǎn)：網(wǎng)站看起來既專業(yè)、又不落俗套，給人一種很放松的感覺

想要讓網(wǎng)站看起來既專業(yè)又有趣、而且不落俗套，其實(shí)并不容易，但LoungeLizard公司做到了。通過詳細(xì)的品牌案例以及工作間照片的展示，這個(gè)以酒吧為主題的網(wǎng)站很好地完成了樹立品牌形象、宣傳產(chǎn)品口碑的作用。




9. https://www.wokine.com/

• 設(shè)計(jì)師：Wokine
• 背景簡(jiǎn)介：位于法國巴黎的網(wǎng)頁設(shè)計(jì)公司
• 亮點(diǎn)：使用“分屏”的視覺設(shè)計(jì)方法

這個(gè)網(wǎng)站很好地遵循了很流行的視覺設(shè)計(jì)方法 – 分屏。整體設(shè)計(jì)十分簡(jiǎn)約，結(jié)合大量的間距和簡(jiǎn)單的配色方案，給人一種良好的視覺層次結(jié)構(gòu)，對(duì)于網(wǎng)站的重要內(nèi)容可以一目了然。




10. http://www.danielspatzek.com/Home

• 設(shè)計(jì)師：Daniel Spatzek
• 背景簡(jiǎn)介：自由圖形及網(wǎng)頁設(shè)計(jì)師
• 亮點(diǎn)：運(yùn)用大量的圖形和動(dòng)畫技巧，將不可能變?yōu)楝F(xiàn)實(shí)

這個(gè)網(wǎng)站中使用了大量的CSS技術(shù)和動(dòng)畫，讓看似不可能結(jié)合到一起的事物變?yōu)楝F(xiàn)實(shí)，并且創(chuàng)造出一種很真實(shí)的動(dòng)態(tài)體驗(yàn)。不同于大多數(shù)長(zhǎng)頁面的設(shè)計(jì)，這個(gè)網(wǎng)站的導(dǎo)航水平分布在上、下、左、右四個(gè)方向，一旦鼠標(biāo)懸浮放置上去，會(huì)出現(xiàn)另外一種截然不同的排列方式。




11. http://seanhalpin.io/

• 設(shè)計(jì)師：Sean Halpin
• 背景簡(jiǎn)介：來自加拿大多倫多的網(wǎng)頁設(shè)計(jì)師和網(wǎng)頁開發(fā)者
• 亮點(diǎn)：極具個(gè)性的小小世界

設(shè)計(jì)師Sean Halpin向我們很好地展示了，個(gè)人作品集網(wǎng)站不僅可以將工作經(jīng)歷和技能進(jìn)行列舉，還可以向其他人展示自己的才華和個(gè)性。整個(gè)網(wǎng)站看起來就是設(shè)計(jì)師自己的小小的綠色世界，在這個(gè)世界中，將自己可以如何幫助他人搭建網(wǎng)站娓娓道來。


12. https://www.denisechandler.com/

• 設(shè)計(jì)師：Denise Chandler
• 背景簡(jiǎn)介：一名女設(shè)計(jì)師，同時(shí)對(duì)于編程深有研究
• 亮點(diǎn)：完美遵循網(wǎng)頁設(shè)計(jì)4大基本原則，并有個(gè)性化元素

網(wǎng)站完美闡釋了設(shè)計(jì)的四大基本原則，那就是：對(duì)齊、重復(fù)、對(duì)比以及親密。除了設(shè)計(jì)很有規(guī)范外，加入了很多個(gè)性化的元素，可以說只露觸角的章魚也很吸睛了。




結(jié)尾

以上，便是小編精挑細(xì)選的最佳網(wǎng)頁開發(fā)個(gè)人作品集網(wǎng)站及賞析。不過話說回來，一份好的網(wǎng)頁設(shè)計(jì)作品，除了需要設(shè)計(jì)師的靈感及天賦，更離不開一款好用的設(shè)計(jì)工具。作為國民原型設(shè)計(jì)工具，Mockplus不僅提供了豐富的網(wǎng)頁設(shè)計(jì)項(xiàng)目例子供免費(fèi)下載和查看，而且提供了大量封裝的組件和UI元素，讓你的設(shè)計(jì)如虎添翼，不妨試試看。

---

【主頁菌文末福利】領(lǐng)取Mockplus個(gè)人版限時(shí)體驗(yàn)！

Mockplus目前已支持發(fā)布到iDoc，原型接入產(chǎn)品工作流，增加了原型標(biāo)注、評(píng)論、對(duì)比設(shè)計(jì)稿、全貌呈現(xiàn)等功能，我們準(zhǔn)備了Mockplus個(gè)人版給大家體驗(yàn)！數(shù)量有限，先到先得！

• 專屬激活碼：Mock2019；
• 激活數(shù)量：限量150個(gè)；
• 有效期：2019年9月30日

激活地址：https://www.mockplus.cn/user/upgrade （登錄/注冊(cè)后輸入激活碼即可）

Plus，發(fā)布Mockplus原型到iDoc，還有更多驚喜等你抱走！