攻城略地！Startup Framework搞定的優秀網頁設計

編者按：這篇文章是始于一次針對新興的設計&前端框架Startup Design Framework的探索研究。我們搜集整合了一系列的優秀的初創公司的網站，通過這些案例可以了解這類網站的特征、覆蓋范圍以及這一工具所提供的各種可能性。

必須承認，這些新興的網站中越來越多地用到了新的網站搭建工具，這也從側面反應了網站搭建工具的快速發展。同時，世界各地的開發團隊也開始為這些“在線創業者”提供通用的解決方案，這也就意味著不論你是想借助博客分享想法，還是推廣自己的服務或產品，都可以從中找到合適的方案來落實你的需求。比如Startup Design Framework 就是個不錯的工具。

不同于傳統同類工具，一個元素一個元素的搭建方式，在Startup Design Framework 中，你可以逐個區塊地快速搭建布局。人人都可以是設計師不假，但是并非人人都是優秀的設計師。創建網站并不難，但是要讓細節精致到位并非誰都可以。Startup Design Framework 的區塊中大多包含了扁平化UI、充滿吸引力的視覺組件以及良好的執行力，讓用戶不用糾結于組件的搭配和細節。另外，Bootstrap模板的加入也意味著用戶不需要為響應式設計而煩惱。

下面的42個案例足以讓你明白Startup Design Framework的優秀之處。

Crunch Commerce

Crunch Commerce 網站布局非常直觀，橫向上并未分欄，盡可能將內容清晰地呈現出來。縱向一列到底的布局使得網站的響應式變化非常直接，適配不同屏幕尺寸設備都得心應手。這一點和這家初創公司的產品在內涵上高度一致：跨平臺通訊，適用所有設備平臺。

Recollective

和上一個案例類似，扁平化的設計風格令頁面內容更加突出，將網頁從復雜布局中解脫出來。對比明顯而清新的配色，矢量的素材，結構明晰的布局，這些都強化了整個網站的設計。

Bannersnack

Bannersnack使用了一些新潮的功能，這些務實高效的功能使得網站更加具有吸引力。布局干凈，內容高于一切，合理運用插畫點綴，整個外觀令人印象深刻。

Zirtual

這個網頁良好的布局令多媒體內容和文本兩者之間得到了平衡，內容排列整齊，格式清晰，視覺效果在整個網站設計中占到了較大的比重，營造出親切友好的氛圍。

Timeneye

得益于前景內容和背景圖片之間的明顯對比，網站能讓用戶輕松融入氛圍并專注于內容，其余部分則很好地補充了整個布局設計。

SHN

網站簡單明了的布局使得數據更加突出，觀點鮮明，并讓關鍵的功能成為了訪客專注的焦點。

Jipio

Startup Framework 的響應式設計，令網站的開發者不再擔心用戶在小屏幕上瀏覽到桌面端網頁。靈活的布局讓Jipio精準而合理地呈現在不同屏幕上，吸引用戶瀏覽。

Yisual

偏平化的風格賦予網站清晰的風貌和智能的布局，精心處理后的數據以人性化的方式展現出來，避免訪客迷惑，并讓他們參與到網站互動中來。

Digitale Factuur

沒有 Startup Framework ，像這樣需要呈現大量信息內容的項目壓根不會推進的如此之順利。

Winterrain

如何使用Startup Framework打造用戶體驗優秀的網站？Winterrain 就是一個不錯的案例。整齊的布局，漂亮的配色，明亮的文字與標題，主次分明，也能夠吸引訪客的注意力。

PeachDish

矢量圖形、多樣的文字和密集的圖片被合理地整合在淺灰背景上，一樣不會引起混亂。

het eenzame westen

Startup Framework 為網站創造了更多的的可能性。這個網站一樣設計的足夠清爽整潔，雖然頂部以文本為主，不過圖片依然可以在其他的位置各司其職，這同樣是一個深思熟慮之后的布局。

Calltacular

Startup Framework 搭建下的網站內容還是非常內容的，最關鍵的是這樣的區塊搭建方式構建出的視覺流，讓用戶非常流暢的從頭瀏覽到尾。

PickEvent

篩選出合理的區塊排版讓重點內容成為用戶關注的焦點，單頁滾動+粘滯跟隨式的導航欄，用戶瀏覽更加方便了。

Universal Media

像這樣包含視頻、圖片、地圖、表格和文本的網站還是非常考校設計師的信息梳理能力，好在借助 Startup Framework ，這個問題得以輕松解決。

FortyAU

是否專注設計直接決定了網站的品質。一個真正吸引人且令人印象深刻的網站，通常你會在首頁上感受到創新的氛圍。

GiftOff

GiftOff這個網站絕對會給你一個非常深刻的第一印象。鮮亮的漸變色背景，充滿現代風格的詳情信息，符合趨勢的幽靈按鈕，留白讓整個空間疏密有致。看起來簡單，但是非常值得學習。

Yorkys Brunch

Startup Framework其實是一套適用范疇非常廣泛的系統，比如這個餐飲網站。大氣的背景圖，細致的Logo，吊胃口的配色系統，你餓了么？

Bard Spring Fling

輕松處理復雜多樣的信息是Startup Framework的優勢所在，這個網站是另一個實例。另外響應式設計都內置了，你還擔心什么呢？也許就剩下調整中文字體了吧。

Vyte

這是充分運用Startup Framework的功能的一個不錯實例。不用從零開始造輪子，在這里專注內容呈現和整潔精致的布局吧，別的交給Startup Framework就好了。

Visage Payroll

合理的布局能夠引導用戶從頭操作到尾，如果你需要案例就看這個網站吧。每個部分的內容和數據都以奇妙的方式呈現出來。設計師沿用了目前正在流行的現代風格，圖標和內容都清晰而生多地傳遞出了用戶需要的信息。

Foodliner

通過一系列令人垂涎的糕點，網站將美食每一個誘發你分泌口水的角度都呈現在你面前。合理搭配圖片和背景，設計師確保網站不會對用戶的視覺產生壓迫，并成功地調動起了你的胃口。

Jezierski

Jezierski 借助Startup Framework 快速搭建起網站頭，整體設計采用的是單頁式布局，變化多樣的內容隨后以充滿創意的方式展現出來。

Buel

用戶打開網站的那一刻，充滿活力和能量的音樂視頻就被呈現出來。當背景采用單色的簡約設計之后，文字內容和視頻圖片視覺關系就更加清晰了，而網站設計師也正好把握了這中間的平衡。

Octoly

這是一個在線視頻處理的網站，設計簡約，這樣一來，用戶會更加專注于他們要做的事情。

Orbitfy

設計師所用的那些微妙但是充滿活力的扁平化插畫，讓網站擁有了瞬間吸引了訪客的目光的魔力。

Hubstaff

和常見的電商網站不一樣，這個網站采用了少見的兩欄式布局，不過這樣的設計看起來也算自然而直觀。網站色調上充滿吸引力，扁平化的圖形讓網站看起來非常現代，總體上為用戶提供了舒適的用戶體驗。

Mail Squad

這個網站向我們展示了網站設計的另一種可能性：讓圖片和文字內容高度協同起來，而不是讓其中一個特別突出。

Apartable

房產商的網站通常需要包含大量的內容和數據，包括文本內容和各種多媒體內容。這也是為什么這個網站的設計師充分借助Startup Framework的柵格系統來完善網站布局，將數據以更加合理的方式呈現出來，降低給用戶造成壓迫的可能性。

OneQube

清晰強健的結構，扁平化的設計，和獨特的排版是這個網站的三大特征。兩種色調構成的網站通常都具有明顯的個性，而這個網站正是如此，至少給人感覺非常舒服。

Dezain Werks

區別于其他的網站，Dezain Werks 里面包含了許多好玩的元素。Startup Framework 在這個網站中被用來構建整體的布局。

Homefed

如果你正在尋找體驗優秀的美食，那么可以關注一下這個特別項目。

Pablo Ruiz

這是一個體驗一流的個人作品展示站點，說實話這絕對能夠吸引到許多潛在客戶。著陸頁上用柵格展示了專業知識，獲獎區域、聯系方式以及所能提供的服務等等。

B4Films

B4Films 背后的設計師團隊對于“少即是多”有著極為深刻的認識，看看他們的網站就知道。

LaunchPage

LaunchPage是一個對移動端有過特別優化的網站，干凈有秩序，外觀足夠漂亮。唯一存在的問題可能是服務和價格都沒說清楚。

Eagle

這個網站中Startup Framework運行狀態完美，設計師也充分運用了Startup Framework的模塊化設計。內容和模塊的增刪都不會影響整體效果，確保了瀏覽體驗，不會讓用戶不知所措。

450 GSM

設計師非常機智地選擇了極簡風設計，控制好留白和內容的比例，典型的扁平化的圖形、多邊形插畫以及漂亮而不失華麗的色彩運用讓網站看起來協調而奇妙。

Crumbs

不同于之前的許多，這個網站絕對是采用視覺優先的設計，打開網站的一刻，每個設計元素都在力圖營造令人流連的氛圍。從細節到內容，網站都非常引人入勝。

Giacomo Golinelli

這個名為 Giacomo Golinelli 一直力圖使用非侵入的方式來呈現內容，純色背景和內容之間對比明顯，留白讓這個網站看起來非常和諧溫馨。

Edurio

Edurio 這個網站采用了典型的單欄式的單頁設計，整體設計簡約，向下滾動的時候，各個模塊直觀清新，在不同設備上響應式變化的時候非常方便，且非常統一。

Sobber

在這里，用戶可以快速地獲取有關產品設計的點子。

Hipsta Food

這個網站會教會你什么是“每個細節都物超所值”。盡管需求文檔很龐大，但是實際上借助 Startup Framework 并非難事。

Gum

俏皮的網站外觀和糖果色令網站非常搶眼，合理的UI設計令用戶對用戶在網站流連忘返，順暢的從頭瀏覽到尾。同樣是Startup Framework，就是能玩出各種花樣！

【前端設計&開發必讀】

流行框架合集：
《快速建站必備！細數2014年5個最流行的前端框架》

前端優化指南：
《全是干貨！移動HTML 5前端性能優化指南》

H5設計心得：
《5媚娘傳奇！H5移動端頁面設計心得分享（附案例解析）》

原文地址：designmodo
優設譯者：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量92萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：