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