網站連結:OH My Law (http://ohmylaw.wowfuncode.com/)


前言

承蒙工作室各位夥伴的信任,把今年(2020) iT邦幫忙鐵人賽的律師網—「OH My Law」的LOGO與版面設計交予我盡情發揮,並給予最高的精神與技術上支持~

對於初出茅廬的我來說,真的是最棒的演練場所﹐俗話說的好「從做中學!」可以把教材中所學的系統呈現出來,可以融化貫通更多~

今天來分享一下關於律師網的設計~


LOGO發想與理念

  • 律師的象徵與想像

對法律與法院你的第一印象是什麼? 腦中是否浮現面龐莊嚴且手持天秤與鋒利寶劍的正義女神(Justitia)?

在找尋資料的過程中,我發現國內外許多與法律相關的形象設計多多少少都帶有正義女神的元素,例如:天秤、法典、利劍等等的意涵。

但各國的律師袍則各有千秋,台灣的律師袍乃延續清朝官袍的設計,身披玄黑長袍、領色霜白如雪 (白色則代表著忠誠勝利和平潔白,由於律師在法庭上負責幫助當事人進行辯護,因此用白色象徵著律師的立場是忠誠潔白,為自己的辯護人謀求最有利的辯護)。延伸閱讀—《潘宏朋|藍紫白綠黑淡咖啡紅色,你知道法庭上這些顏色代表的人物是誰嗎?》

https://imgur.com/OeL4HxW.jpg

LOGO設計的四大元素

– 律師袍&蝴蝶:對於筆者而言,能夠考上律師證的這些律師們,都曾經韋編三絕、焚膏繼晷的讀書,猶如尚未羽化的毛毛蟲一樣努力啃食著葉子(書),把這些營養(知識)化成力量,成功羽化成美麗的蝴蝶;因此選了台灣的律師袍作為LOGO的主要意象,翻飛起的黑袍如同展翅的蝴蝶。

– 羅馬柱:台灣的法院樣式大多使用外觀剛強威嚴且羅列整齊的羅馬柱,暨是象徵法院的權威與剛正不阿,也代表著法律的秩序。

– 寶劍:閃耀著寒芒的利劍隱藏在青黑戰袍底下,律師們身懷削鐵如泥的鋒利寶劍卻不隨意張揚,但為了辯護人的權利挺力相護時必是切中要害。


版面設計概念

1.首頁設計概念

OH My Law」的設計宗旨就是希望能讓使用者一目了然網站的功能,透過簡潔的版面與多圖少文的方式解說適用族群以及操作方式,即便第一次來造訪網頁都能快速上手!
<使用編輯器是Elementor (https://elementor.com/)>

https://i.imgur.com/LRgLj5Q.jpg

https://imgur.com/l88BeMd.jpg

https://imgur.com/P9TTQub.jpg

https://imgur.com/CwnUhVg.jpg

https://imgur.com/JtZwh4N.jpg

2.律師列表

貫徹一目了然的風格~那麼如何讓使用者能直觀的使用就是一件重要的事情!!

律師網最重要的地方自然在律師列表的部分,然而在眾多資訊的情況下,要怎麼樣才能讓瀏覽者不會因為太多的資訊感覺到視覺混亂呢?

鏘鏘~採用卡片式設計把內容整理在一個一個的小方格中,非常適合在有眾多選項時同時檢視多個資訊並進行比較,區塊式的呈現在使用者進行瀏覽時不會資訊混亂,操作上也相當簡單易懂。

由於律師的的領域十分廣闊且具有相當的專業,在進入頁面的地方就設置了搜尋欄,可以快速搜尋律師的專業項目以及可供諮詢的地區,方便使用者進行第一步塞選。

https://i.imgur.com/w519qXF.jpg.jpg

https://imgur.com/ACmSHw5.jpg

3.小彩蛋~

偷偷說,電腦螢幕與手機版的LOGO其實有一些些不一樣呢!
因為在製作Footer發現在手機視窗中要放入如電腦螢幕中一樣的LOGO顯得有些擁擠,且Header的LOGO在手機版中也會讓視覺效果顯得太花俏,於是就將兩者融合在一起,讓小蝴蝶飛舞在標題之上~

https://imgur.com/MjTmBrG.jpg

結論

剛開始的律師網其實只有一片空白的樣子,與夥伴絞盡腦汁想著哪些資訊與功能是律師網需要的呢?慢慢的刻寫,把他描摹成心中所想的樣子,這個過程其實充滿了挑戰性,做一個網頁不僅僅需求技術,同時還要設想使用者的使用體驗等等,嘗試解決問題時學到的遠遠超過在書本上學到知識。

「OH My Law」律師網未來將持續更新加強SEO,讓客戶更容易搜尋到律師網,也不定期更新網站內容與版面~也許某一天上站會發現不一樣的小彩蛋喔!>.^

快來看看吧! OH My Law (http://ohmylaw.wowfuncode.com/)