內容更新於 — 2022-12-26 17:20
「網站改版」,其實是一段有趣的歷練...
對我來說,OXYGEN Builder是無所不能的!
怎麼說呢?
在WordPress網站的建構的過程中,它將「程式碼」這件事,盡可能地具象化!
這對非網頁工程背景的我來說,能夠更容易設計出更自由的版型和功能。
而温唯這個網站,是我用OXYGEN Builder製作的第二個網站。回想當時,各種CSS、Keyframe大開竅,學會了許多技巧,恨不得把他們全部裝進網站,然後,就變成了一盤大雜燴...
我的第二個OXYGEN Builder網站☞舊版温唯,來懷念一下以前存檔的螢幕錄影吧!
經過一位前輩的提點,我也開始思考這個問題...
是啊!做平面設計的時候,衝擊力是提案的武器,而視覺上的協調感才是整體設計的最高指導原則啊!
怎麼跳到了網頁設計,反而把這個最高指導原則給丟了呢?
此外,平面設計是死的,網頁設計是活的,還需要考慮到使用者體驗,有許多關於UI和UX的小細節需要照顧,這還真的超出以往做平面設計時所能涉略到的範疇呢!
其實啊!以往做得比較多的是雜誌的排版;所以,當時設計温唯這個網站時,也是按照我習慣的照片與文字的排版去設計;在我當時的認知中,每一個Section對我來說,就是不同的頁面...(誤)
但是,在網頁設計的概念中,他們都存在於同一個頁面;因此,整體的主色調與樣式的統一,便決定了整個頁面的「協調感」,所以,這也是我這次改版的首要工作。
最大的重點是「統一色調」+「統一樣式」=整體視覺上的協調感。
除了首頁以外,單一文章的問題更大!
為了加強某些文字區塊,我使用了多種顏色與樣式作為文字方塊的背景以及圖文呈現;此外,左右二側的功能性選單更是花俏,相當干擾閱讀體驗,這些都會在這次的大改版中整理乾淨。
以我的LOGO來說,是深灰棕色(#625b55)和中灰膚色(#dfba9f)的組合,因為這二個顏色都帶著不飽和的灰階,所以,不同色階的灰色正好就成了主要的底色。接著,從深灰棕色到中灰膚色之間,找到了深灰紫色(#70576f)作為輔助色,再從淺灰紫色(#cdc9d6)的對比色調中,找到了淺灰綠色(#d4dce0),於是整體的色調中,就在深灰棕色與中灰膚色的深淺與對比色調中,達到了平衡與協調。
除了色調的協調之外,每個Section所使用的樣式也要達到一致。
我採用的是不規則的形狀作為每個小元素的背景以及裝飾;而按鈕則是統一改成長箭頭。
文字顏色
Total Time: 1 day
其實當初就是為了主色調而挑選的照片,符合深淺棕色系>膚色>淺灰藍綠色。但是,改版之後,整頁的色階偏淺,所以,我在背景中加入background overlay的效果,用白色(#fff)將照片放淡10%,以達到與整頁的和諧。
因為主圖已經放淡,所以,這二張照片便不打算再放淡了。
反倒是將文字以及keyframe手寫簽名效果改成色「深灰棕色(#625b55)」,視覺上也較為舒適。
改成偏暖的淺灰色作為背景,再輔以中灰色的英文字以及60%的「深灰棕色」的虛線作為裝飾。
文章的分類按鈕則是改成我很喜歡的凹凸按鈕;考量到sticky header中已經有一個logo會轉動,所以便取消分類按鈕中的「轉轉icon」。
在這次的改版中,取消了「轉轉icon」,於是,我將轉動的JS效果做在裝飾用的不規則形狀中。
而次分類的按鈕也套用了較小的不規則形狀作為背景,來呼應裝飾用的不規則形狀。
其實這是我以往最不會設計的一塊!
因為,我的部落格內容目前涵蓋了四大主題,而對於內容產出者來說,實在不想放過任何一次展現文章的機會,如此一來,整個首頁內容會過於複雜。
所以,一開始,我就打算用overflow-x:auto;的方式,讓這些不同分類的「最新文章」,不至於佔據過多的版面。
不過,後來在阿控的影片中,學到了另外一招CSS大覺,就變成滑鼠就能直接滾動,連JS都不用了!
然而,在「最新文章」的這個Section中,最困擾的其實是,文章的特色圖片顏色不一!
而這個問題,也在阿控的另外一支影片中,使用CSS的「filter」去調整顏色的呈現,可以說是網頁版的濾鏡效果。
我比較常使用的是「brightness」去調暗;如果情況允許,也可以使用「greyscale」去調淡。
一樣改用另外一種不規則形狀作為背景,顏色也改成與主色調一致的色系。
和第四、第五個Section的邏輯一樣。
這裡我放的是社群、訂閱和贊助,原本是三欄二列,然後,為了符合不同社群的內容和標誌,所以,每一列的大小不一致,顏色就更別說了。
老實說,對於這一區塊,我目前還真的沒太多想法,那麼,就先依循著框架,改成整齊的條列式吧!
以上,是我的首頁改版細節,下一篇會分享「單一文章」的改版。有任何想法或建議,都可以在留言中告訴我囉!
Copyright ©miriammibao.com all rights reserved|Designed by MiriamMibao温唯 Since 2014.