<p id="l55vn"></p>
<nobr id="l55vn"></nobr>
<menuitem id="l55vn"><delect id="l55vn"><i id="l55vn"></i></delect></menuitem>

<p id="l55vn"></p>
      <nobr id="l55vn"><thead id="l55vn"><i id="l55vn"></i></thead></nobr>
      <b id="l55vn"></b>

            <menuitem id="l55vn"></menuitem>
              <nobr id="l55vn"><ruby id="l55vn"><i id="l55vn"></i></ruby></nobr>

              首頁 > 設計 > 網頁設計 > 正文

              LOGO 的升級與再造設計過程

              2018-10-16 20:51:35
              字體:
              來源:轉載
              供稿:網友

              Digital Web Magazine的LOGO重新設計過程
              作者:Kristof Saelen
              翻譯:波希米亞

              特別致謝Kristof Saelen為“Digital Web”創作新LOGO并編寫設計過程。
              版權歸波希米亞、藍色理想(www.blueidea.com)所有。如要轉載,請與本人聯系。

              自從“Digital Web Magazine”對他們的新LOGO實際上應當象征什么沒有主意的時候,他們就將初步的打算告訴我并全權委托給我。這不是個簡單的任務――許多問題一股腦的涌入我的腦海。我實際是在為誰設計LOGO?誰是他們的受眾?觀眾覺得什么是舒服的呢?等等……這些問題最基本的答案就是要創作出一個得體并且有代表性的LOGO來。

              審核者的個人偏好、意見以及設計者的設計風格在我們的創作過程中都有著很重要的影響。但是我們必須緊記,最重要的(而且往往也是最普遍的)看法是來自于讀者的。從我們產生第一印象到創作完成,這期間大概需要3個月的時間?;ㄙM這么長時間的原因是因為評論者與我之間在背景和思想上的差異,而另一方面,它也有一個很大的優勢,這就是不同的人可以彼此交流他們不同的看法與觀點。

              起初的設計只是一個嘗試,只是泛泛地測試一下“Digital Web”的反響如何。我想,一個好的創意開始是來源于很獨特的想法。

              后來回顧這個設計的時候,我們認識到了一個問題,就是,字體應當更加的清晰易讀。就像“Digital Web”一樣,具有很好的內容可讀性。從傳統上來說,“Digital Web”是兩個單詞的結合。這個觀念表面上看已經遠離了起初的考慮?!皊ans-serif”這個字體是很理想的,但是它沒有充分的詮釋出設計的特性。添加一個符號或是圖標來替代傳統的字體可以讓我們設計出更有特色并且更具代表性的LOGO。符號也可以起到很好的作用,所以我們把有關字樣的問題留到后面去談。

              符號

              我們第二次調整,但實際是我們對符號的第一次嘗試,它是在1A觀念基礎上的延伸。這些設計可以在同一時間表示一個獨立的符號或是一個縮寫。這里每個符號可以象征D,W或是M,盡管字母D在2B和2D中會因為頂部結構而被誤認為是字母C。

              在2A和2C中它們經過改良、加粗,使其更有立體感,而不像開始那樣是單獨的部分。3A是它的再發展,但是它的條紋(特別是著色的那條)會讓我們想起一個運動的品牌,干脆就不是“Digital Web”所期望的。更多有關色彩的問題我們留到后面去談。

              除3A外,我還嘗試了一些全新的設計,它們在這套中就顯得簡單多了。在3E和3F中我們發現D和W很難讀出來。3C和3D中我們制作了很大的拐角,并讓它們敞開一個缺口。3B是這套中最粗的,因為這樣,它看上去更樸素、更獨特。注意看它,想象一下,3B中著色的外形來自于字母W,而周圍的空白與中空恰恰塑造了字母D的形象。這是我們這個任務中的一個重大的飛躍,并且是向下延續的新基礎。

              接下來是我們在先前制作的3B基礎上做一些變化。這里需要注意的是,我們在第3套中所見到的在4N中有所重現。在這個設計試驗的工作中,我嘗試為我們的LOGO增加自然的價值。比如說,在4D和4L的頂端就有波浪形狀的邊緣。而其余的在左下腳也帶有圓角,就像所有在橙色與藍色行中的那樣。它們的右上角都帶有字母W的尖頭。

              橙色行的前三個例子與紅色整行,因為它們打磨的右邊末梢,使得技術感不是很強了。我們的LOGO看起來要比普通的更顯動態,而字母D仍留有遺跡。我嘗試在中間區域使用黑色與周圍顏色進行對比。但是這單調的顏色看起來卻很好,雖然這里并不是真正需要這種對比,但是我們稍后要加上的伴隨字體是帶有部分黑色的。在這套中,我們看好4I,因為它全新的動與靜的結合,以及它的樸素。

              接下來我們要做的是,使我們的LOGO底部變得平滑。注意5A的底部與右邊尖角之間的連接處,它要比先前制作的4I中的更平滑、更流線。另一個想法是像5B這樣的鑲嵌式,但是它很快就被否定了。

              用符號表示是到目前為止我們見到的最好的方法,它更堅定了我們的下一個環節。一些新的設計試驗可以讓我們展開新的想象以鞏固我們的LOGO。這或許是它們中最瘋狂的。我們很快的意識到,在右半部上做文章是進入了誤區,盡管6B,6F和6J很有新意。草書的樣式和平滑的頂部曲線賦予了我們的LOGO一種現代的、并且活躍的視覺感受。緊挨著6B的那些新的樣式,它們看起來就不那么單調和遲鈍了,所以我們的新樣式是值得探索的。

              接下來的想法就是連接頂部的曲線,其中間是一個單一形狀的實心的字母D。注意7A中的字母W,由一些著色的空間組成。其中第一個成為“Digital Web”的最終選擇。隨后我繼續嘗試一些更自然的變化,但是我們發現字母W變得枯萎。所以7A當之無愧。

              字樣

              正如我在前面所提到的,“sans-serif”字體更適合于富有現代感的LOGO,所以我嘗試了許多一般使用的并簡單易讀的字體。第一感覺,這些字的類型就比開始我們使用的要清晰的多。類型1的成功來自于它字符與單詞之間的白色空隙。正如你所看到的,3和4中白色空隙的使用就比其它兩個遜色了許多。因為‘Magazine’之間的字符間距要大些,所以我盡量使‘Digital Web’的間距小些。這就主張在它們之間進行對比,否則字母就會分的太開。同時也要注意類型1的字體也比其它的要窄些,或許另外一個原因是讓空隙看起來更好。類型1擁有了所有好字體應當具備的規范。

              這里唯一的缺陷就是字體不夠獨特。實際上,它在網頁設計中是的使用是非常廣泛的,所以值得對這個獨特的面孔做一些類似以下的改良。

              首先在這里你應該注意的是它們字體的粗細。先前類型1中的很多外形都是依照這個類型,除了邊角處。為了打破常規字體的鈍化效果,最尖銳的拐角(比如字母A和字母W)都已被平滑化,以便更適合于我們的符號創作。不久,我們在這套中選中了6,它的字的疏密恰恰完美的表現了我們的LOGO的設計思想,不太粗也不太細。我們認識到這些,并且展開一些聯想,字母B看上去有些像數字8,因此我們最好避免它發生。所以下一步,我們對這類進行修正,這次將字母B的頂部改為90度角。

              在完成設計之前,我們還有一件事情要做,那就是,將“Magazine”加入我們的LOGO。我們在之前用的字體太有棱角了。為了體現“Digital Web”的易讀性,這里我們仍然采用“sans-serif”字體。它看起來樸素、簡潔,這樣就使我們的LOGO看起來更好。

              色彩

              在我們形成觀念和評論的過程中,我們實際上從未考慮LOGO的最終顏色。唯一考慮的就是它應該是快樂的,清晰的,并且是靈活的。這里我使用的顏色僅僅是為了舉例,為了得到與背景很好的對比度。只用一種顏色會使我們的LOGO更適合于各類設計形式。符號與“Magazine”字體的顏色可以依賴于網站的顏色?!癉igital Web”的文字用白字黑底或黑字白底都可以。

              我們制作的這個LOGO應當能輕易的適合于網站的全新設計。讓我們預祝它能夠更好地在世人面前展示“Digital Web”的魅力。

              特別感謝Nick Finck 和Jesse Nieminen的耐心,評論以及意見

              本文作者:
              發表評論 共有條評論
              用戶名: 密碼:
              驗證碼: 匿名發表
              a级情欲片在线观看免费
              <p id="l55vn"></p>
              <nobr id="l55vn"></nobr>
              <menuitem id="l55vn"><delect id="l55vn"><i id="l55vn"></i></delect></menuitem>

              <p id="l55vn"></p>
                  <nobr id="l55vn"><thead id="l55vn"><i id="l55vn"></i></thead></nobr>
                  <b id="l55vn"></b>

                        <menuitem id="l55vn"></menuitem>
                          <nobr id="l55vn"><ruby id="l55vn"><i id="l55vn"></i></ruby></nobr>