温唯改版第一彈-首頁+OXYGEN Builder

|發布於:
2021-12-19

內容更新於 — 2022-12-26 17:20

❝廣告,是為了讓這裡能夠永續經營,多多包容囉^v^❞

「網站改版」,其實是一段有趣的歷練...

對我來說,OXYGEN Builder是無所不能的!
怎麼說呢?
在WordPress網站的建構的過程中,它將「程式碼」這件事,盡可能地具象化!
這對非網頁工程背景的我來說,能夠更容易設計出更自由的版型和功能。
而温唯這個網站,是我用OXYGEN Builder製作的第二個網站。回想當時,各種CSS、Keyframe大開竅,學會了許多技巧,恨不得把他們全部裝進網站,然後,就變成了一盤大雜燴...

我的第二個OXYGEN Builder網站☞舊版温唯,來懷念一下以前存檔的螢幕錄影吧!

網頁設計的UI/UX

經過一位前輩的提點,我也開始思考這個問題...
是啊!做平面設計的時候,衝擊力是提案的武器,而視覺上的協調感才是整體設計的最高指導原則啊!
怎麼跳到了網頁設計,反而把這個最高指導原則給丟了呢?
此外,平面設計是死的,網頁設計是活的,還需要考慮到使用者體驗,有許多關於UI和UX的小細節需要照顧,這還真的超出以往做平面設計時所能涉略到的範疇呢!

其實啊!以往做得比較多的是雜誌的排版;所以,當時設計温唯這個網站時,也是按照我習慣的照片與文字的排版去設計;在我當時的認知中,每一個Section對我來說,就是不同的頁面...(誤)

但是,在網頁設計的概念中,他們都存在於同一個頁面;因此,整體的主色調與樣式的統一,便決定了整個頁面的「協調感」,所以,這也是我這次改版的首要工作。

❝廣告,是為了讓這裡能夠永續經營,多多包容囉^v^❞

温唯改版重點

最大的重點是「統一色調」+「統一樣式」=整體視覺上的協調感。

除了首頁以外,單一文章的問題更大!
為了加強某些文字區塊,我使用了多種顏色與樣式作為文字方塊的背景以及圖文呈現;此外,左右二側的功能性選單更是花俏,相當干擾閱讀體驗,這些都會在這次的大改版中整理乾淨。

色調一致

以我的LOGO來說,是深灰棕色(#625b55)和中灰膚色(#dfba9f)的組合,因為這二個顏色都帶著不飽和的灰階,所以,不同色階的灰色正好就成了主要的底色。接著,從深灰棕色到中灰膚色之間,找到了深灰紫色(#70576f)作為輔助色,再從淺灰紫色(#cdc9d6)的對比色調中,找到了淺灰綠色(#d4dce0),於是整體的色調中,就在深灰棕色與中灰膚色的深淺與對比色調中,達到了平衡與協調。

樣式一致

除了色調的協調之外,每個Section所使用的樣式也要達到一致。
我採用的是不規則的形狀作為每個小元素的背景以及裝飾;而按鈕則是統一改成長箭頭。

首頁改版歷程

modify-miriammibao-final

文字顏色


大多數的文字與icon都改成主色「深灰棕色(#625b55)」,比起黑色,稍淺的「深灰棕色」不但能呼應主色,在視覺上也較為柔和。

Total Time: 1 day

第一個Section—主圖

hero

其實當初就是為了主色調而挑選的照片,符合深淺棕色系>膚色>淺灰藍綠色。但是,改版之後,整頁的色階偏淺,所以,我在背景中加入background overlay的效果,用白色(#fff)將照片放淡10%,以達到與整頁的和諧。

第二個Section

section-II

因為主圖已經放淡,所以,這二張照片便不打算再放淡了。
反倒是將文字以及keyframe手寫簽名效果改成色「深灰棕色(#625b55)」,視覺上也較為舒適。

第三個Section—温唯聊什麼?

explore

改成偏暖的淺灰色作為背景,再輔以中灰色的英文字以及60%的「深灰棕色」的虛線作為裝飾。
文章的分類按鈕則是改成我很喜歡的凹凸按鈕;考量到sticky header中已經有一個logo會轉動,所以便取消分類按鈕中的「轉轉icon」。

第四個Section—我無法停止膚淺

skin-care

在這次的改版中,取消了「轉轉icon」,於是,我將轉動的JS效果做在裝飾用的不規則形狀中。
而次分類的按鈕也套用了較小的不規則形狀作為背景,來呼應裝飾用的不規則形狀。

第五個Section—最新文章

Latest-Posts

其實這是我以往最不會設計的一塊!

因為,我的部落格內容目前涵蓋了四大主題,而對於內容產出者來說,實在不想放過任何一次展現文章的機會,如此一來,整個首頁內容會過於複雜。
所以,一開始,我就打算用overflow-x:auto;的方式,讓這些不同分類的「最新文章」,不至於佔據過多的版面。
不過,後來在阿控的影片中,學到了另外一招CSS大覺,就變成滑鼠就能直接滾動,連JS都不用了!

然而,在「最新文章」的這個Section中,最困擾的其實是,文章的特色圖片顏色不一!
而這個問題,也在阿控的另外一支影片中,使用CSS的「filter」去調整顏色的呈現,可以說是網頁版的濾鏡效果。
我比較常使用的是「brightness」去調暗;如果情況允許,也可以使用「greyscale」去調淡。

第六個Section—CLOUDWAYS

cloudways

一樣改用另外一種不規則形狀作為背景,顏色也改成與主色調一致的色系。

第七、第八個Section

wordpress

和第四、第五個Section的邏輯一樣。

Footer

footer

這裡我放的是社群、訂閱和贊助,原本是三欄二列,然後,為了符合不同社群的內容和標誌,所以,每一列的大小不一致,顏色就更別說了。

老實說,對於這一區塊,我目前還真的沒太多想法,那麼,就先依循著框架,改成整齊的條列式吧!

以上,是我的首頁改版細節,下一篇會分享「單一文章」的改版。有任何想法或建議,都可以在留言中告訴我囉!

最新留言
▍關於作者|MiriamMibao温唯
2019.02.11,我開始了這裡…
非網頁程式背景的 me 硬要WordPress架站一切自己來,所有的細節,從0開始,自己架站會遇到的問題,遇到了才知道!一路走來跌跌撞撞,摸索過國內外能夠解決問題的資料,是不是該好好紀錄這一段跌跌撞撞的探索日記?
或許,也能帶給你們一些幫助...
文章中所推薦或提及的架站產品或服務,部分是聯盟合作所提供的,如果你透過我所提供的聯盟網址去購買,我也能獲得收益,雖然金額很少,但是,你們的隨手點擊與購買,就能讓我繼續經營下去,提供更多免費的 WordPress 架站教學。
以下歡迎留言討論囉!
我只想當個旁觀者,有新的留言請通知我(按一下輸入Email信箱)
想Fallow哪種留言?
0 留言板
Inline Feedbacks
查看所有留言

Copyright ©miriammibao.com all rights reserved|Designed by MiriamMibao温唯 Since 2014.

-
CLOUDWAYS 專屬折扣☞註冊輸入折扣碼
MMM8
,獲得首二月8折優惠!
CLOUDWAYS 專屬折扣☞輸入折扣碼
享首二月8折優惠!
miriam wei design wp logo-4 circlemiriam wei design wp logo sticky
0
對文章有任何疑問或想法嗎?歡迎一起討論唷!x