為自己設(shè)計(jì)是最難的

      我想這是因?yàn)楹茈y對(duì)自己的創(chuàng)作百分之百滿意。我們是自己最挑剔的客戶，經(jīng)常問自己“這樣夠好了嗎？明天后天我還會(huì)這樣嗎？”

      也許訣竅在于用一種一雙新鮮的眼睛和從很遠(yuǎn)的地方。對(duì)我來說，只有當(dāng)我給自己足夠的時(shí)間去創(chuàng)造一些東西的時(shí)候，這才有用。當(dāng)我重新設(shè)計(jì)我的博客時(shí)，我確實(shí)這么做了——事實(shí)上，這花了我太長的時(shí)間。但我很高興地說，我現(xiàn)在可以埋葬我感受了這么長時(shí)間的挫敗感。

      下面是我的博客重新設(shè)計(jì)過程的概述——什么可行，什么不可行，以及介于兩者之間的一切。我希望對(duì)我的過程透明對(duì)任何考慮個(gè)人重新設(shè)計(jì)的人都有幫助。我們開始吧！

      標(biāo)志圖標(biāo)設(shè)計(jì)

      早在2016年，我就為自己設(shè)計(jì)了一個(gè)標(biāo)志，邁出了第一步。我想信里可能有些東西V。有一個(gè)標(biāo)志的想法已經(jīng)玩了很長時(shí)間。2015年底，我嘗試了一下，但沒有成功。實(shí)驗(yàn)階段是最重要的，也是創(chuàng)造過程的核心——通常會(huì)帶來意想不到的結(jié)果。

      我嘗試了很多東西，包括一些我的名字，但是我嘗試的所有概念都不夠強(qiáng)大。它們看起來要么像插圖，要么更像包裝標(biāo)簽。起初，我想把鋼筆工具圖標(biāo)，矢量插圖的鏈接。同樣，我無法將這個(gè)想法轉(zhuǎn)化為一個(gè)強(qiáng)有力的結(jié)果。我想要更簡(jiǎn)單、干凈和現(xiàn)代的東西。

      我決定把注意力集中在字母V的形狀上，最終我找到了靈感。我100%確信就是這個(gè)。那種火花總是在意想不到的時(shí)刻擊中我。

      就排版而言，我不需要太多時(shí)間來決定使用哪種字體。我已經(jīng)看上了布蘭登怪誕很長一段時(shí)間，我喜歡它有某種相似之處中性面我之前用過的。盡管在我做出決定后不久，我注意到這種字體被經(jīng)常使用，但我并不在乎。我只是覺得這是我的網(wǎng)站的完美選擇，所以我決定堅(jiān)持下去。

      除了布蘭登奇形怪狀，我還用 當(dāng)?shù)氐淖鳛榇我煮w，因?yàn)槲倚枰粋€(gè)等寬字體，以防我想在我的博客文章中分享HTML或CSS標(biāo)記。受到啟發(fā)后貝瑟尼·海克的標(biāo)本創(chuàng)作對(duì)于這種字體，我真的很想使用Native，不僅用于標(biāo)記，還用于創(chuàng)建顯示博文日期的標(biāo)簽。在我創(chuàng)作這個(gè)的階段，我嘗試了很多使用三角形的想法。這個(gè)想法是重復(fù)使用v圖標(biāo)貫穿我的設(shè)計(jì)。你會(huì)在頁眉插圖對(duì)于第一個(gè)主頁設(shè)計(jì)的一個(gè)更深入的文章。在最終的設(shè)計(jì)中，我也用Native來表示我的教程中步驟的數(shù)字，以及五個(gè)推薦文章主頁上的概述。

擁抱實(shí)驗(yàn)階段

      我在博客整體設(shè)計(jì)上邁出的第一步實(shí)際上是在幾年前，當(dāng)時(shí)我嘗試為我的標(biāo)題創(chuàng)建一個(gè)彩色的、吸引人的背景插圖。

      我被一種建筑物的照片我發(fā)現(xiàn)了驚人的圖案、形狀和顏色。在我的腦海里，我知道用這張照片作為一個(gè)網(wǎng)站的靈感有點(diǎn)瘋狂，考慮到所有的波浪線。不管怎樣，我必須嘗試一下，然后再擔(dān)心執(zhí)行的問題，因?yàn)閷?duì)我來說，這只是一個(gè)額外的挑戰(zhàn)。添加到v圖標(biāo)與復(fù)雜的波浪曲線形成了額外的對(duì)比。

      現(xiàn)在回過頭來看這個(gè)，我也不確定當(dāng)時(shí)腦子里到底是怎么想的。你看，我確實(shí)花了很多時(shí)間畫這幅插圖。它不是用某種快速智能效果彎曲成那樣的。不知道，我一行一行地畫了這條線但是因?yàn)槲彝娴煤荛_心，所以我不介意額外的努力。

      諷刺的是，我最終放棄了這整個(gè)概念。但是現(xiàn)在回想起來，盡管我在插圖上花了很多時(shí)間，但我從中獲得了很多樂趣，并且知道我可以在未來重新利用它。這些年來我學(xué)到的是你不應(yīng)該總是相信你大腦的理性部分。相反，看看你的想法會(huì)把你引向何方，并欣然接受這一過程。實(shí)驗(yàn)階段是最重要的，也是創(chuàng)造過程的核心——通常會(huì)帶來意想不到的結(jié)果。

定義調(diào)色板

      首先，我從定義調(diào)色板開始。至于我博客的內(nèi)容，我唯一100%確定的是保持我的靈感流。在最初的設(shè)計(jì)階段，我想我會(huì)繼續(xù)寫更多的東西圖表的&網(wǎng)頁設(shè)計(jì)，通過納入我除平面設(shè)計(jì)之外的其他愛好，保持內(nèi)容的廣泛性:現(xiàn)代家居設(shè)計(jì),自行車運(yùn)動(dòng)，以及音樂。我設(shè)想用一種顏色和圖標(biāo)來標(biāo)識(shí)每個(gè)部分，如下圖所示。

新的設(shè)計(jì)方向

      回到繪圖板，我決定進(jìn)入一個(gè)完全不同的方向。受到一些人的啟發(fā)后內(nèi)墻裝飾在Pinterest上，我決定這絕對(duì)是我想要繼續(xù)前進(jìn)的方向。幾何形狀和圖案一直是我的事情，所以我創(chuàng)造了以下一套幾何象形圖我可以用它來定義我博客的不同類別

      在我設(shè)計(jì)了一個(gè)新的標(biāo)題后，我的靈感來自于我的logo中的線條，主頁設(shè)計(jì)的基本概念是顯示一個(gè)簡(jiǎn)單的博客文章流。每個(gè)職位將在它所屬的部分的顏色風(fēng)格，我也有靈感流帖子混進(jìn)去了。只是我當(dāng)時(shí)不確定是一個(gè)一個(gè)的給他們看還是2個(gè)4個(gè)一系列的給他們看。所以我仍然在思考如何實(shí)現(xiàn)這一部分...

      對(duì)于文章頁面，我想到了使用一個(gè)標(biāo)題，無論它屬于哪個(gè)部分的顏色，并可以選擇用一個(gè)英雄圖像替換平坦的顏色背景。至于文章頁面的整體布局，我想要非常靈活的東西，使我能夠在不同的布局塊中顯示我的內(nèi)容——有點(diǎn)像雜志的感覺。如果我想做一些完全不同的事情，我想保留這個(gè)選項(xiàng)，例如能夠使用分裂英雄頭球或者可以選擇使用自定義HTML和半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)。

      在專注于客戶工作一段時(shí)間后，我回顧了我的重新設(shè)計(jì)工作，并意識(shí)到我不喜歡我創(chuàng)造的東西。我對(duì)整體設(shè)計(jì)不太滿意，尤其是我博客文章的展示方式。我決定重新思考一切，以一種視覺上吸引人的方式將靈感流放在我的帖子頂部。這靈感流對(duì)我的博客文章整體來說是同樣重要的，所以它肯定需要一些關(guān)注。在為我的博客內(nèi)容進(jìn)行了一些頭腦風(fēng)暴后，我確信我應(yīng)該減少話題的數(shù)量，把注意力完全集中在裝幀設(shè)計(jì)藝術(shù),網(wǎng)頁設(shè)計(jì)，以及靈感。

      那時(shí)我決定使用這些新的圖標(biāo)和顏色。這些圖標(biāo)的靈感主要來自于流線型圖標(biāo)由…創(chuàng)造文森特·勒莫因又叫做Webalys。

      靈感標(biāo)題

      當(dāng)我需要靈感的時(shí)候，我通常會(huì)去找自己的靈感靈感流,拼趣，以及滴水不漏。我記得我很受鼓舞很酷的字母設(shè)計(jì)我看到了看起來像插圖靠他們自己。這些啟發(fā)我為我的靈感流創(chuàng)建了以下標(biāo)題:

      跟上這一勢(shì)頭

      在設(shè)計(jì)了新的標(biāo)題后，再次受到啟發(fā)感覺很好，最終感覺我回到了正軌。我有一種很好的感覺，那個(gè)頭球?qū)?huì)是我一段時(shí)間后回顧的東西，并且仍然喜歡它。為了保持這種勢(shì)頭，我創(chuàng)造了一個(gè)完整的字母表作為首字下沉為了我的文章。

      盡管我覺得很有靈感，但我仍然必須改進(jìn)標(biāo)題設(shè)計(jì)，并思考我的主頁的整個(gè)設(shè)計(jì)。我用簡(jiǎn)單的方形圖案和彩色圖案的混合創(chuàng)造了一個(gè)拼湊的背景插圖幾何象形圖我之前設(shè)計(jì)了。起初，我做了一堆不同的正方形圖案，然后我用它們作為拼圖的一部分，最終得到了這個(gè)結(jié)果:

步入正軌:最終設(shè)計(jì)

      我留出了足夠的空間將我的V形圖標(biāo)放在頂部中間。我的想法是用這個(gè)作為我的主頁標(biāo)題。就在這個(gè)過程的后期，我決定用這個(gè)拼湊的插圖作為背景圖片，因?yàn)橛盟鳛槲业膭?dòng)畫標(biāo)志旁邊的背景有點(diǎn)讓人不知所措。

      我還重組了我博客的不同部分，以便盡可能簡(jiǎn)單地瀏覽。現(xiàn)在只有兩個(gè)部分:文章和靈感。在文章部分有子類別，如網(wǎng)頁設(shè)計(jì),裝幀設(shè)計(jì)藝術(shù)，以及設(shè)計(jì)過程每一個(gè)都有指定的顏色，就像我之前計(jì)劃的那樣。因?yàn)榻坛淌且粋€(gè)非常重要的文章類別，我決定將它添加到我的菜單欄中。在最后一個(gè)階段，我也把顏色從芥末黃變成了紫色。芥末黃色有點(diǎn)太淺了，不容易辨認(rèn)。

      后來，當(dāng)我已經(jīng)在編寫靜態(tài)HTML模板頁面時(shí)，我添加了反彈(CSS)動(dòng)畫。這樣，我可以保持V形圖標(biāo)的背景，但不會(huì)占用太多的垂直空間，并增加了這個(gè)漂亮的噱頭。有趣的是，在CSS中制作這樣簡(jiǎn)單的動(dòng)畫是不需要Javascript的，如果瀏覽器不支持這個(gè)CSS，頁面就會(huì)保持原樣。

      一邊編碼一邊設(shè)計(jì)

      不知道其他圖形設(shè)計(jì)師，也是像我一樣的網(wǎng)頁設(shè)計(jì)師，在設(shè)計(jì)他們自己的網(wǎng)站時(shí)會(huì)遵循什么過程，但在我的例子中，我并沒有在Adobe Photoshop(或者交互設(shè)計(jì)的神器，我目前的選擇)。相反，我只創(chuàng)建了頁面的片段或部分，其余的我直接用CSS創(chuàng)建。對(duì)我來說，這是完成設(shè)計(jì)最靈活有效的方式。

      微調(diào)

      在這個(gè)編碼階段，我仍然調(diào)整了很多細(xì)節(jié)，做了很多微調(diào)。如果你看看上面的主頁設(shè)計(jì)，并與網(wǎng)上的進(jìn)行比較，你會(huì)注意到版式并不完全相同。您可以在瀏覽器中查看所有內(nèi)容，因此交互和所有內(nèi)容都更加真實(shí)。

      手機(jī)版

      也是在這個(gè)階段，我實(shí)際上考慮過將布局?jǐn)U展到移動(dòng)領(lǐng)域。也許有些人不贊成等這么久，但我確實(shí)一直在想基本的調(diào)整場(chǎng)景，因?yàn)檎w布局也相當(dāng)簡(jiǎn)單。只有主導(dǎo)航需要對(duì)最小的屏幕進(jìn)行一些實(shí)際的思考。

      我想避免使用隱藏菜單。我決定我可以用tuts的作為我的教程的縮寫，只是靈感部分的滴管圖標(biāo)，同時(shí)保持事情足夠明顯。畢竟，主頁也直接提到了這些部分，用顏色編碼等等。

      這就是我的整個(gè)設(shè)計(jì)過程。從你剛剛讀到的，我敢肯定你可以告訴這肯定不是一個(gè)簡(jiǎn)單的設(shè)計(jì)過程。這實(shí)際上是相當(dāng)混亂的，不像我可以簡(jiǎn)單地遵循和完成的清單。對(duì)我來說，這個(gè)設(shè)計(jì)過程更像是一個(gè)迷宮或謎題，我試圖盡我所能把所有的東西拼在一起。

      我對(duì)任何考慮重新設(shè)計(jì)個(gè)人品牌的人的建議是，對(duì)這個(gè)過程要有耐心。你可能會(huì)充實(shí)成噸的概念，但這并不意味著嘗試它們是無用的。它們可能會(huì)激發(fā)你最終喜歡上的其他想法，或者你甚至可以用其他你意想不到的方式實(shí)現(xiàn)它們。試著享受過程，擁抱混亂！