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

內容更新於 — 2023-06-17 15:14

❝廣告,是為了讓這裡能夠永續經營,多多包容囉^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

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

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

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

贊助温唯
如果 你想要感謝我、願意支持我
那麼–
就請我喝杯咖啡,聊表心意吧(愛心)
我將繼續無私分享你想看的內容
解答你的疑難雜症
原始發布日:
2021-12-19
最新留言
▍關於作者|MiriamMibao温唯
2019.02.11,我開始了這裡…
非網頁程式背景的 me 硬要WordPress架站一切自己來,所有的細節,從0開始,自己架站會遇到的問題,遇到了才知道!一路走來跌跌撞撞,摸索過國內外能夠解決問題的資料,是不是該好好紀錄這一段跌跌撞撞的探索日記?
或許,也能帶給你們一些幫助...
文章中所推薦或提及的架站產品或服務,部分是聯盟合作所提供的,如果你透過我所提供的聯盟網址去購買,我也能獲得收益,雖然金額很少,但是,你們的隨手點擊與購買,就能讓我繼續經營下去,提供更多免費的 WordPress 架站教學。
以下歡迎留言討論囉!
我只想當個旁觀者,有新的留言請通知我(按一下輸入Email信箱)
想Fallow哪種留言?
0 留言板
Inline Feedbacks
查看所有留言
❤ 謝謝你的咖啡 ❤
請温唯喝咖啡的可愛人兒
謝謝你們的溫暖與肯定
是我繼續分享下去的力氣
請温唯喝杯咖啡吧
Thank U ❤ 
Eva Tsai
NT$150
這幾天在網站上了解許多防曬知識與有趣的防曬測試,謝謝你的用心!
Thank U ❤ 
東穎
NT$300
期待新文章🥰
Thank U ❤ 
謝東穎
NT$900
Thank U ❤ 
謝東穎
NT$300
Thank U ❤ 
謝東穎
NT$300
Thank U ❤ 
陳依
NT$100
Thank U ❤ 
謝東穎
NT$170
一定要堅持你的理想!+請你喝星巴克
Thank U ❤ 
Cc
NT$49
Thank U ❤ 
路人
NT$49
路人/洗髮,感謝答覆
Thank U ❤ 
米雪
NT$200
感謝您詳實資料的分享與問題解答,+小小心意,+望不嫌棄!+ 祝福您身體健康,+平安如意,+豐盛圓滿!
Thank U ❤ 
hope
NT$500
感謝贊助支持
Thank U ❤ 
Harry
NT$100
感謝回答我頁面問題
Thank U ❤ 
mira
NT$150
謝謝提供很多關於防曬產品的測試心得
Thank U ❤ 
路人
NT$49
感謝贊助支持
Thank U ❤ 
Ethan
NT$100
最近有留言詢問也快速獲得回復了~一點小心意給您:)
Thank U ❤ 
Annie
NT$60
謝謝溫唯
Thank U ❤ 
Mei
NT$49
謝謝你很用心的打很多實用的商品文章。讓我了解很多,謝謝你的熱心分享!
Thank U ❤ 
小Q
NT$150
謝謝溫唯~以後會繼續支持<3
Thank U ❤ 
游雅涵UU
NT$1000
溫唯您好~我是UU,感謝您這麼用心地分享,我也曾陷入精油保養的錯誤觀念裡,造成粉刺痘痘狂長,變成酒糟肌,雖然有看醫生擦藥-思媚、樂淨,但醫生不會與病患討論什麼保養品才合適,希望能向您學習,使肌膚更好~
Thank U ❤ 
小Q
NT$150
謝謝溫唯的細心解答,以後會繼續支持!🥰
Thank U ❤ 
Trista
NT$50
感謝分享~~~~
Thank U ❤ 
邱垂昀
NT$150
我是小Q也是小R啦~ 隨便亂取的綽號,結果在不同文章發問的時候忘記上次是用哪個英文字母XD 謝謝溫唯專業的文章和用心的回答!真的很有幫助,支持你繼續經營下去~~!!
Thank U ❤ 
匿名
NT$150
非常專業, 雖然只看幾篇而已,但我已受益良多. 倒是我對防水和防曬力那兩部分的實驗結果覺得非常驚訝. 乾性敏感肌的我十幾二十年以來一直都是混著資生堂的艷陽下50++++ 乳液(淺藍色深藍色都放)和歐系的兒童防曬霜(秋冬還會混一點維他命E油)在使用, 因為夠油夠防水, 中午補擦一下, 覺得我用了世界上最完美的防曬組合, 又有保護力又不會乾, 氣色看來也不錯, 不太顯老哩...不過看了你的實驗和說明, 我才了解, 是我一年一次的雷射和座位旁的厚窗簾救了我, 和我擦的防曬看來是沒太大關係. 三年多前換了工作岡位的我到了一間前面沒有窗簾可遮蔽窗戶的辦公室, 加上三年以上沒打雷射, 雖然不多, 但睽違很久的斑又回頭來找我了, 法令也變深一點了. 有點小難受 >_<. 剛剛根據你的實驗, 訂了一條德國製的妮維雅敏感肌的防曬霜, 打算來混一些防水力強的日系防曬(Alley我也買了一個小條的, 因為你說比安耐曬還防水耶...)和似乎除了油沒啥用的雅漾全效潤色來一起混用看看.期待他們能各司其職,讓我皺紋不要越來越深. 謝謝你. 噢,小小一杯咖啡而已, 請你笑納, 請不要公布姓名喔~
Thank U ❤ 
許亞盈
NT$150
感謝支持贊助
Thank U ❤ 
許亞盈
NT$300
感謝支持贊助
Thank U ❤ 
張惠雯
NT$45
感謝支持贊助
Thank U ❤ 
shelly
NT$250
我最近也非常喜歡艾莉莎公主的洗臉巾,質地非常棉柔,不傷害皮脂膜,也具有基礎的去脂力,是敏弱時期的清潔好夥伴唷!
Thank U ❤ 
麋鹿的夏天
NT$300
過敏和痘痘的情況有改善了嗎?透過正確的護膚方式,才能保護皮脂膜不被破壞,如此才有機會治療痘痘,希望下次能聽到妳傳來健康皮膚的消息唷!
Thank U ❤ 
蔡孟樵
NT$250
謝謝你的咖啡(愛心)如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
鄭俊
NT$500
網站有任何問題都可以再詢問唷!
Thank U ❤ 
邱英倢
NT$900
你們的網站進行到哪裡了呢?有沒有其他的問題呢?
Thank U ❤ 
謝正家
NT$900
不曉得是否更熟悉 soledad 和 Elementor 的操作呢?有任何問題都可以再詢問唷!
Thank U ❤ 
孫依賢
NT$900
過敏和痘痘的情況有改善了嗎?透過正確的護膚方式,才能保護皮脂膜不被破壞,如此才有機會治療痘痘,希望下次能聽到妳傳來健康皮膚的消息唷!
Thank U ❤ 
邱英倢
NT$900
新手架站真的很不容易,温唯也是過來人,有任何問題都歡迎切磋交流唷!
Thank U ❤ 
鄭俊維
NT$90
謝謝你信任温唯,之後若還有其他問題,都歡迎再提問唷!
Thank U ❤ 
鄭俊維
NT$500
謝謝你信任温唯,之後若還有其他問題,都歡迎再提問唷!
Thank U ❤ 
鄭俊維
NT$500
謝謝你信任温唯,之後若還有其他問題,都歡迎再提問唷!
Thank U ❤ 
翟翱
NT$150
謝謝你的咖啡(愛心)
如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
鄭俊維
NT$500
謝謝你信任温唯,協助你處理問題的過程中,也讓我更熟悉 Newspaper 這個主題的功能,之後若還有其他問題,都歡迎再提問唷!
Thank U ❤ 
陳麗妃
NT$45
謝謝你的咖啡(愛心)
如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
JIN
NT$150
最近得美登有一支高防禦力的防曬也非常透明唷!比美膚娜娜更透明,當然,一樣也有油光煥發的問題,不過,至少沒有美膚娜娜那麼嚴重,而且,泛白程度又更低了,有機會也可以試試唷!
Thank U ❤ 
黃紫茵
NT$150
謝謝你的咖啡(愛心)
如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
許惠雯
NT$150
謝謝你的咖啡(愛心)
如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
張晏婕
NT$500
過敏的狀況有沒有改善了呢?如果在清潔方面遇到瓶頸,歡迎隨時進一步討論唷
Thank U ❤ 
KT
NT$900
後來好久都沒和你聯繫,你寄給我的四支產品,有一支真的好讚,值得好好介紹,也有許多關於產品和品牌的想法想和你聊聊,過陣子忙完後再找你啦!
Thank U ❤ 
西尼
NT$45
謝謝你的咖啡(愛心)如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
菲菲
NT$700
不曉得你的網站目前的進度如何呢?有任何問題可以再諮詢唷!
Thank U ❤ 
FALA LING
NT$250
謝謝你的咖啡(愛心)如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
王小姐
NT$150
謝謝你的咖啡(愛心)如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
賈超然
NT$150
謝謝你的咖啡(愛心)如果有任何問題,歡迎在文章的留言板一起討論唷!
Thank U ❤ 
Vivian
NT$250
謝謝你的咖啡(愛心)不曉得是哪一類型的文章帶給你幫助呢?希望日後有機會與妳在文章留言板討論唷!
Thank U ❤ 
pegasus
NT$45
又見面囉!謝謝你的咖啡,也祝福妳一切順利唷!
Thank U ❤ 
温炯杰
NT$250
謝謝你的贊助,我會繼續撰寫更多關於WordPress架站過程中可能會遇到的各種疑難雜症。如果有任何問題,歡迎在文章的留言板中討論唷!
Thank U ❤ 
cloree
NT$250
謝謝你的鼓勵❤我會加油!!(Fighting!!)其實我有好多產品想要分享給大家,但是,苦於沒有太多時間撰寫完整的分析文章,因為我不想毫無依據地胡亂推薦,每個我自己持續使用的產品,背後都有各自的理由與故事...請放心,我一定會找時間妥善地整理這些資料,再完整地分享,我希望大家能夠在詳細的解說下,選擇真正符合需求的產品唷!
Thank U ❤ 
宥穎
NT$250
真的好開心你也踏上了「Less is more」的護膚路。 其實呀,護膚保養可以很簡單,也可以很難。 最簡單的作法就是「少做少錯」,而最難的就是找到「真正有效」+「不會出錯」的產品! 我也在尋找中,在這之前,「Less is more」是我們必須堅守的底線。 哪天真讓我找到了,我一定會迫不及待地分享,希望那天不會太久唷(笑)
Thank U ❤ 
黃秋逢
NT$45
雖然你沒有留下任何的痕跡,不曉得是哪一類的文章給了你幫助(我姑且猜著是WordPress架站相關吧!)謝謝你的贊助,如果有任何問題,歡迎在文章下方的留言板留下你的足跡,好讓我認識你唷!
Thank U ❤ 
Titi
NT$45
老實說,在你詢問的時候,我還沒有增減Server的經驗呢!於是我便自己操作一次,當然也遇到了和你一樣的問題(笑);立刻向客服求救,才有辦法完整地回覆你。Cloudways是我目前最滿意的主機,日後有其他操作上的問題,歡迎再回來討論唷
Thank U ❤ 
瑋瑋
NT$150
和你聊天真的很開心,相信我們都為彼此帶來許多更寬廣的護膚經驗。雖然我們各自都相當忙碌,但是每每看到你的留言,還是迫不及待地想要趕快與妳一起討論與分享唷❤
Thank U ❤ 
pegasus
NT$45
雖然你沒有留下隻字片語,留下的電話和Email信箱也是虛擬的...但是我相信你從温唯這裏帶走的,遠比這杯咖啡更有價值☺

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

-
CLOUDWAYS 專屬優惠☞註冊輸入推薦碼MMM8立即享首二月8折優惠點我複製優惠碼GO!!!
miriam wei design wp logo-4 circlemiriam wei design wp logo sticky
0
對文章有任何疑問或想法嗎?歡迎一起討論唷!x