為自己設計是最難的
我想這是因為很難對自己的創(chuàng)作百分之百滿意。我們是自己最挑剔的客戶，經(jīng)常問自己“這樣夠好了嗎？明天后天我還會這樣嗎？”
也許訣竅在于用一種一雙新鮮的眼睛和從很遠的地方。對我來說，只有當我給自己足夠的時間去創(chuàng)造一些東西的時候，這才有用。當我重新設計我的博客時，我確實這么做了——事實上，這花了我太長的時間。但我很高興地說，我現(xiàn)在可以埋葬我感受了這么長時間的挫敗感。
下面是我的博客重新設計過程的概述——什么可行，什么不可行，以及介于兩者之間的一切。我希望對我的過程透明對任何考慮個人重新設計的人都有幫助。我們開始吧！
標志圖標設計
早在2016年，我就為自己設計了一個標志，邁出了第一步。我想信里可能有些東西V。有一個標志的想法已經(jīng)玩了很長時間。2015年底，我嘗試了一下，但沒有成功。實驗階段是最重要的，也是創(chuàng)造過程的核心——通常會帶來意想不到的結果。
我嘗試了很多東西，包括一些我的名字，但是我嘗試的所有概念都不夠強大。它們看起來要么像插圖，要么更像包裝標簽。起初，我想把鋼筆工具圖標，矢量插圖的鏈接。同樣，我無法將這個想法轉化為一個強有力的結果。我想要更簡單、干凈和現(xiàn)代的東西。
我決定把注意力集中在字母V的形狀上，最終我找到了靈感。我100%確信就是這個。那種火花總是在意想不到的時刻擊中我。
就排版而言，我不需要太多時間來決定使用哪種字體。我已經(jīng)看上了布蘭登怪誕很長一段時間，我喜歡它有某種相似之處中性面我之前用過的。盡管在我做出決定后不久，我注意到這種字體被經(jīng)常使用，但我并不在乎。我只是覺得這是我的網(wǎng)站的完美選擇，所以我決定堅持下去。
除了布蘭登奇形怪狀，我還用 當?shù)氐淖鳛榇我煮w，因為我需要一個等寬字體，以防我想在我的博客文章中分享HTML或CSS標記。受到啟發(fā)后貝瑟尼·海克的標本創(chuàng)作對于這種字體，我真的很想使用Native，不僅用于標記，還用于創(chuàng)建顯示博文日期的標簽。在我創(chuàng)作這個的階段，我嘗試了很多使用三角形的想法。這個想法是重復使用v圖標貫穿我的設計。你會在頁眉插圖對于第一個主頁設計的一個更深入的文章。在最終的設計中，我也用Native來表示我的教程中步驟的數(shù)字，以及五個推薦文章主頁上的概述。
擁抱實驗階段
我在博客整體設計上邁出的第一步實際上是在幾年前，當時我嘗試為我的標題創(chuàng)建一個彩色的、吸引人的背景插圖。
我被一種建筑物的照片我發(fā)現(xiàn)了驚人的圖案、形狀和顏色。在我的腦海里，我知道用這張照片作為一個網(wǎng)站的靈感有點瘋狂，考慮到所有的波浪線。不管怎樣，我必須嘗試一下，然后再擔心執(zhí)行的問題，因為對我來說，這只是一個額外的挑戰(zhàn)。添加到v圖標與復雜的波浪曲線形成了額外的對比。
現(xiàn)在回過頭來看這個，我也不確定當時腦子里到底是怎么想的。你看，我確實花了很多時間畫這幅插圖。它不是用某種快速智能效果彎曲成那樣的。不知道，我一行一行地畫了這條線但是因為我玩得很開心，所以我不介意額外的努力。
諷刺的是，我最終放棄了這整個概念。但是現(xiàn)在回想起來，盡管我在插圖上花了很多時間，但我從中獲得了很多樂趣，并且知道我可以在未來重新利用它。這些年來我學到的是你不應該總是相信你大腦的理性部分。相反，看看你的想法會把你引向何方，并欣然接受這一過程。實驗階段是最重要的，也是創(chuàng)造過程的核心——通常會帶來意想不到的結果。
定義調色板
首先，我從定義調色板開始。至于我博客的內(nèi)容，我唯一100%確定的是保持我的靈感流。在最初的設計階段，我想我會繼續(xù)寫更多的東西圖表的&網(wǎng)頁設計，通過納入我除平面設計之外的其他愛好，保持內(nèi)容的廣泛性:現(xiàn)代家居設計,自行車運動，以及音樂。我設想用一種顏色和圖標來標識每個部分，如下圖所示。
新的設計方向
回到繪圖板，我決定進入一個完全不同的方向。受到一些人的啟發(fā)后內(nèi)墻裝飾在Pinterest上，我決定這絕對是我想要繼續(xù)前進的方向。幾何形狀和圖案一直是我的事情，所以我創(chuàng)造了以下一套幾何象形圖我可以用它來定義我博客的不同類別
這將作為我主頁上的導航“塊”。這些數(shù)字就是該科的員額數(shù)。我用Native來表示單詞類別和數(shù)字。
在我設計了一個新的標題后，我的靈感來自于我的logo中的線條，主頁設計的基本概念是顯示一個簡單的博客文章流。每個職位將在它所屬的部分的顏色風格，我也有靈感流帖子混進去了。只是我當時不確定是一個一個的給他們看還是2個4個一系列的給他們看。所以我仍然在思考如何實現(xiàn)這一部分...
第一個采用博客流方法的主頁設計之一，但采用了我最初的“探索、學習、傾聽”的設計理念部分。
對于文章頁面，我想到了使用一個標題，無論它屬于哪個部分的顏色，并可以選擇用一個英雄圖像替換平坦的顏色背景。至于文章頁面的整體布局，我想要非常靈活的東西，使我能夠在不同的布局塊中顯示我的內(nèi)容——有點像雜志的感覺。如果我想做一些完全不同的事情，我想保留這個選項，例如能夠使用分裂英雄頭球或者可以選擇使用自定義HTML和半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)。
在專注于客戶工作一段時間后，我回顧了我的重新設計工作，并意識到我不喜歡我創(chuàng)造的東西。我對整體設計不太滿意，尤其是我博客文章的展示方式。我決定重新思考一切，以一種視覺上吸引人的方式將靈感流放在我的帖子頂部。這靈感流對我的博客文章整體來說是同樣重要的，所以它肯定需要一些關注。在為我的博客內(nèi)容進行了一些頭腦風暴后，我確信我應該減少話題的數(shù)量，把注意力完全集中在裝幀設計藝術,網(wǎng)頁設計，以及靈感。
那時我決定使用這些新的圖標和顏色。這些圖標的靈感主要來自于流線型圖標由…創(chuàng)造文森特·勒莫因又叫做Webalys。
靈感標題
當我需要靈感的時候，我通常會去找自己的靈感靈感流,拼趣，以及滴水不漏。我記得我很受鼓舞很酷的字母設計我看到了看起來像插圖靠他們自己。這些啟發(fā)我為我的靈感流創(chuàng)建了以下標題:
跟上這一勢頭
在設計了新的標題后，再次受到啟發(fā)感覺很好，最終感覺我回到了正軌。我有一種很好的感覺，那個頭球將會是我一段時間后回顧的東西，并且仍然喜歡它。為了保持這種勢頭，我創(chuàng)造了一個完整的字母表作為首字下沉為了我的文章。
盡管我覺得很有靈感，但我仍然必須改進標題設計，并思考我的主頁的整個設計。我用簡單的方形圖案和彩色圖案的混合創(chuàng)造了一個拼湊的背景插圖幾何象形圖我之前設計了。起初，我做了一堆不同的正方形圖案，然后我用它們作為拼圖的一部分，最終得到了這個結果:
步入正軌:最終設計
我留出了足夠的空間將我的V形圖標放在頂部中間。我的想法是用這個作為我的主頁標題。就在這個過程的后期，我決定用這個拼湊的插圖作為背景圖片，因為用它作為我的動畫標志旁邊的背景有點讓人不知所措。
我還重組了我博客的不同部分，以便盡可能簡單地瀏覽?，F(xiàn)在只有兩個部分:文章和靈感。在文章部分有子類別，如網(wǎng)頁設計,裝幀設計藝術，以及設計過程每一個都有指定的顏色，就像我之前計劃的那樣。因為教程是一個非常重要的文章類別，我決定將它添加到我的菜單欄中。在最后一個階段，我也把顏色從芥末黃變成了紫色。芥末黃色有點太淺了，不容易辨認。
我決定將方形圖案插圖作為“固定背景”放在靈感畫廊主頁上。
后來，當我已經(jīng)在編寫靜態(tài)HTML模板頁面時，我添加了反彈(CSS)動畫。這樣，我可以保持V形圖標的背景，但不會占用太多的垂直空間，并增加了這個漂亮的噱頭。有趣的是，在CSS中制作這樣簡單的動畫是不需要Javascript的，如果瀏覽器不支持這個CSS，頁面就會保持原樣。
一邊編碼一邊設計
不知道其他圖形設計師，也是像我一樣的網(wǎng)頁設計師，在設計他們自己的網(wǎng)站時會遵循什么過程，但在我的例子中，我并沒有在Adobe Photoshop(或者交互設計的神器，我目前的選擇)。相反，我只創(chuàng)建了頁面的片段或部分，其余的我直接用CSS創(chuàng)建。對我來說，這是完成設計最靈活有效的方式。
微調
在這個編碼階段，我仍然調整了很多細節(jié)，做了很多微調。如果你看看上面的主頁設計，并與網(wǎng)上的進行比較，你會注意到版式并不完全相同。您可以在瀏覽器中查看所有內(nèi)容，因此交互和所有內(nèi)容都更加真實。
手機版
也是在這個階段，我實際上考慮過將布局擴展到移動領域。也許有些人不贊成等這么久，但我確實一直在想基本的調整場景，因為整體布局也相當簡單。只有主導航需要對最小的屏幕進行一些實際的思考。
我想避免使用隱藏菜單。我決定我可以用tuts的作為我的教程的縮寫，只是靈感部分的滴管圖標，同時保持事情足夠明顯。畢竟，主頁也直接提到了這些部分，用顏色編碼等等。
這就是我的整個設計過程。從你剛剛讀到的，我敢肯定你可以告訴這肯定不是一個簡單的設計過程。這實際上是相當混亂的，不像我可以簡單地遵循和完成的清單。對我來說，這個設計過程更像是一個迷宮或謎題，我試圖盡我所能把所有的東西拼在一起。
我對任何考慮重新設計個人品牌的人的建議是，對這個過程要有耐心。你可能會充實成噸的概念，但這并不意味著嘗試它們是無用的。它們可能會激發(fā)你最終喜歡上的其他想法，或者你甚至可以用其他你意想不到的方式實現(xiàn)它們。試著享受過程，擁抱混亂！
