圖片樣式

國外大神設計個人網站有一套

兩周前我的個人網站上線了。我本人都沒有想到會有那么多的反應,無論是后臺還是其他渠道。看到這些我真的超級興奮,其中有些十分棒的倡議我立即就采用了,但可能有些人還是獵奇這個網站的一些想法是如何涌現的,所以這里就和大家分享一下我的個人網站的制造過程。

1、設想

寫下需求應用到的款式和元素,創建一個簡易版的指南協助你堅持專注并防止偏離主線。關于我來說在堅持想法的同時對外界的反應堅持開放的心態是最重要的。

我的第一個想法是:網站整體要簡約,帶著幾分顏色和一些特殊的動效。聽上去再平常不過了!

另外我還想把我的個人閱歷作為一個元素和我前些年與我所認識的最棒的UI設計師 Jürgen Hassler 共同創建的工作室兼并在同一個模塊中。

2、網頁架構

網頁內容應該突出個人才能和閱歷。不過這個根本上不是很難,由于沒有客戶或者第三方的干預,但是搜集和編寫這些東西得花上一些時間。

 

在我看來網頁的導航欄應該是在任何時分都能看見和點擊的。從這一點來一說漢堡包導航(Burger-navigation)關于桌面設備毫無疑問是不可行的。而在挪動設備上,內容是能夠經過滑動停止閱讀的,所以更沒有必要經過點擊漢堡包圖標(Burger-icon)來閱讀整個網站。

 

展現什么項目對我來說不是很難—我就挑本人喜歡的那些。但我不是那種能夠一下子寫很多東西的人或是作家。所以在下班或是設計過程中我和一位文案一同修正文字局部。

3、繪制線框圖

在開端繪制的時分先從導航局部下手不失為一個好辦法。從這一點來說,雖然只是桌面設備的線框圖,但不同設備都應該在思索范圍內。

 

版本1

很長時間以來我都習氣以呈現在兩側或向上滑動的與訪問者視野平齊的 off-canvas 導航來構建網頁。第一個版本就用了這個想法,但很快就放棄了,由于固然導航是可見的,與內容搭配也比擬有沖擊力,但并沒有給出任何有意義的信息。

 

版本2

我十分喜歡運用側邊欄導航,但放在我的個人網站中顯得安定凡了。所以還是繼續看看有沒有什么新想法吧。

 

版本3

經典的橫導游航能夠在簡直任何場景中運用,并且易用性十分棒,但會占領一定的高度。從另一個方面來說你需求設置文字的最大寬度來給左右兩側留有足夠的留白。

4、迭代設計與原型制造

在構建了網頁雛形之后就是迭代設計了。迭代應該思索到過去的設計流程和一切版本中經過推敲的最有用的局部。

 

在這個過程中 Roland參加了進來并協助我開發我的個人網站。我們過了好幾遍框架,討論了許多有建立性的處理辦法,當然也包括如何樹立靈敏的設計流程。

固然這是我第一次嘗試設計網站,Roland 把導航局部的內容變成了可點擊的原型,這是能在任何早期階段消弭疑慮的做好的事情之一。

假如覺得原型并不是十分有必要的話,能夠試試 Semplice 之類的 framework 工具來測試哪些想法是可行的。

5、添加互動、轉換和完善細節

從一個想法變成一個實物的過程是十分痛苦的,在這事兒上要耗費很多想象。但現有的頁面能夠作為十分棒的參考來停止討論。

應用線框故事版能夠視覺化的呈現想法,巧妙的展示在同一區域中的動畫效果。Roland 將原型停止了擴展,所以我們能夠直接點擊操作停止檢查。

在最后的開發階段我把留意力集中在細節上。最終這個網頁由一個簡單的扁平的頁面變成一個不只僅呈現我的才能和閱歷也是我在理想生活中的真實寫照的極具個性的個人網站。


手机捕鱼平台 卖建材五金配件能赚钱吗 开个什么门头赚钱 今合网是怎么赚钱 用什么网站能赚钱吗 承包农村土地什么赚钱 门窗工程赚钱 现货白银能赚钱啊 厦门炒房还能赚钱吗 淘宝无货源怎么做赚钱吗好做 霸屏天下app真的能赚钱吗 女士收礼物赚钱 挖矿机赚钱系统是真的吗 职业养猫赚钱吗 皓月至尊能赚钱吗 2019年年干什么赚钱 信贷赚钱套路论坛