作為一名設(shè)計(jì)師捆交，在線作品集的集結(jié)和展示為自我的工作梳理和經(jīng)驗(yàn)總結(jié)提供了有效的途徑。
當(dāng)然腐巢，最重要的是品追，
當(dāng)你需要把過往經(jīng)歷傳遞給別人時(shí)，不需要發(fā)給別人一個(gè)很尷尬的>10GB的文件冯丙。
作為一名超酷的交互體驗(yàn)師肉瓦，我也討厭別人甩給我一個(gè)PDF，
然后說：你去下載吧银还，我的履歷都在里面风宁。（此處應(yīng)有???）
作為個(gè)人網(wǎng)站升級(jí)到2.0到老菜鳥，我梳理了下基本思路和整個(gè)流程蛹疯，可供新手參考戒财。
大咖和希望獲得超酷提升的請繞道。
一捺弦、
技能準(zhǔn)備（此指需要一定整塊時(shí)間系統(tǒng)學(xué)習(xí)和有意識(shí)積累饮寞，并基本可看懂模塊架構(gòu)；如果這也沒有列吼，也沒關(guān)系幽崩，方法總是比問題多的，請接著往下看）：
1. 代碼：基本的HTML常識(shí)寞钥，適量的CSS+Java理解慌申，
2. 軟件：Sketch，Photoshop，illustrator至少會(huì)一個(gè)蹄溉，AE加分咨油，可見即可用的Dreamweaver
提醒：
不要一味成謎于理論不能自拔，開始實(shí)踐吧柒爵，這才是獲得技能的唯一渠道役电。
二、
資源準(zhǔn)備（此指可通過網(wǎng)絡(luò)搜索即刻獲得）
1. 域名https://www.namesilo.com/
這個(gè)有很多網(wǎng)站提供棉胀，大家可自行選擇法瑟。這里是我用的，購買簡單唁奢，域名選擇豐富霎挟。
2. 主機(jī)http://www.gegehost.com/
同上，可自行選擇麻掸。
提醒：
盡量不要選擇.com結(jié)尾的域名氓扛，它們通常價(jià)格高于前綴相同的域名，作為個(gè)人作品集的展示论笔，完全可以選擇.net或者.cn結(jié)尾的采郎。當(dāng)然如果你執(zhí)著于.com，那就狂魔，另當(dāng)別論蒜埋。
三、
內(nèi)容準(zhǔn)備
1. 基本的個(gè)人履歷描述
2. 作品（包括你經(jīng)歷過的所有有亮點(diǎn)的最楷、你想展示的項(xiàng)目）整份，應(yīng)該有包括但不限于文字、圖片籽孙、視頻描述烈评，過程記錄，成品展示犯建。
四讲冠、
進(jìn)入搭建流程
基本的準(zhǔn)備工作就緒后，就可以進(jìn)入搭建流程了适瓦。如果對(duì)此想有系統(tǒng)了解可以移步：
http://www.cnblogs.com/此處帶你避坑
1. 明確個(gè)人網(wǎng)站的主要目的和架構(gòu)
因?yàn)槲业木W(wǎng)站主要目的是作為簡歷補(bǔ)充的作品展示竿开，因此網(wǎng)站結(jié)構(gòu)非常簡單，但是重點(diǎn)也很明確玻熙。主要就是兩塊否彩，自我介紹+作品展示。
關(guān)于網(wǎng)站架構(gòu)搭建
如果你有較強(qiáng)的代碼技能嗦随，那么可以嘗試自己碼建網(wǎng)站架構(gòu)列荔；
如果基本能理解代碼內(nèi)容又想提高效率可以去類似的模板網(wǎng)站尋找你需要的部分框架，然后部分合并或調(diào)整代碼即可；
等都可獲得相關(guān)資源贴浙。
如果一點(diǎn)代碼都不懂筷转，可以直接找現(xiàn)成的模板框架，然后替換文字和圖片即可悬而。或者借助傻瓜軟件Dreamweaver.
正常的網(wǎng)站主體基本包含如下內(nèi)容：
index即為HTML文本锭汛，定義的頁面的基本架構(gòu)
CSS是樣式表笨奠，定義html中文本、圖片唤殴、鏈接等具體格式
JS會(huì)牽涉到網(wǎng)站的交互反饋等動(dòng)效
Font是字體
2. 填充架構(gòu)內(nèi)容
這里稍微展開講下作品展示的描述般婆，
可以采用STAR （Situation Task Action Result）方法展現(xiàn)你的思路和過程及結(jié)果。
也可以重點(diǎn)展示思維朵逝、研究或者成果的某一方面蔚袍，或者僅僅是展示很厲害的展示形式本身。
搭建作品集的工具幫手
背景圖片：
https://www.flickr.com/explore
思路參考：
文字參考：
免費(fèi)網(wǎng)站 Archetype 基于大量實(shí)踐成功案例為你快速搭配適合一起使用的字體組合配名，讓你的板面從標(biāo)題到結(jié)尾具備一致的流暢感啤咽。
http://brandmark.io/font-generator/
整體字體大小布局縱覽
顏色參考：
Google material design
Introduction - Material Design
谷歌的一套嚴(yán)密的設(shè)計(jì)體系統(tǒng)一、開放渠脉、延展有生命力宇整，有心者可借此規(guī)則做出很妙的作品。
logo或小標(biāo)：
有趣的小圖標(biāo)或者自己的手繪可以給作品的故事呈現(xiàn)增加很多生命力和讓人記住的動(dòng)力芋膘。
http://google.github.io/material-design-icons/
提醒：
如果你是打算作品頁面整頁圖片展示鳞青，
那么建議你在輸出圖片時(shí)嚴(yán)格控制大小，最好不要超過MB为朋，否則體驗(yàn)感會(huì)很不好臂拓。
我在2.0版本的網(wǎng)站更新后，來回重新處理了圖片三四次习寸，
浪費(fèi)了不少時(shí)間胶惰，都是因?yàn)檫@個(gè)原因。
3. 在本地搭建完成網(wǎng)站后霞溪，記得逐個(gè)檢查下網(wǎng)站是否正常顯示童番，格式調(diào)用是否正確等問題。
這里提醒威鹿，所有資源最好在一個(gè)大的文件夾下剃斧，否則在更新后，網(wǎng)站鏈接調(diào)用很容易變成絕對(duì)地址引用忽你，而不是正確的相對(duì)引用幼东。
4. 網(wǎng)站上傳
這里會(huì)用到之前提到的主機(jī)和域名，當(dāng)購買了主機(jī)之后攻泼，服務(wù)商會(huì)提供網(wǎng)站上傳的軟件通道及賬戶瘸羡，然后你把網(wǎng)站上傳到指定目錄即可阎抒。以我使用的Cpanel為例钮惠，將所有網(wǎng)站內(nèi)容上傳到public-html文件夾下即可
之后可以訪問自己的域名網(wǎng)站吧雹，看看實(shí)際效果鸟赫。
提醒：
可以將整個(gè)頁面壓縮后上傳再解壓强缘，可以減少操作步驟添忘。
只要開始實(shí)踐散庶，逐步迭代蕉堰，一切都會(huì)越來越好哦。
個(gè)人認(rèn)為在線作品的重點(diǎn)是悲龟，所有你列出的作品集屋讶，
都必須無限的強(qiáng)化展示你的某方面技能，要言之有物须教。
這也是我個(gè)人的思維方式皿渗，去除冗余，只留下重點(diǎn)轻腺。
無關(guān)緊要的信息太多不但會(huì)分散自己的編寫精力乐疆，而且對(duì)于別人獲取重點(diǎn)也是妨礙。
作品集只應(yīng)該是個(gè)引子贬养，
那些幽微又有趣的故事和細(xì)節(jié)是給面對(duì)面交流者的最起碼尊重诀拭。
Thanks.
xian
