網站主要使用的顏色
#eec9db
#C49DB5
#fff
#2d2d2d
UI / UX / HTML / CSS / JS
因為想要繼續往設計師的路走,所以用目前學到的技術,把至今為止的作品集結了起來。
透過Youtube及各種線上教學平台自學了網頁程式語言,在學到一半的時候覺得似乎可以用目前的技術做成網站了,於是開始了作品集的製作。
製作跟想像的很不一樣,在製作的過程中常常碰壁,也有因為碰到問題不想做的時候,但透過Google、線上論壇和ChatGPT,耗時2個月終於完成了。
此作品集網站是我現在所學的技術的集大成,跨過種種障礙和疑問,裝滿了我製作網站的成長過程。
網站的形象圖是用自己去畫的,一手拿著電腦、一手拿著畫筆製作畫或是設計的感覺。
因為是以作品為主的網站,網站視覺採用簡潔的設計,主要色使用淺粉色,次要色則是灰色和白色。
程式碼的部分採用Bootstrap的Wireframe,讓每個區塊可以自由使用,另外在表頭、文字、按鈕等添加個人風格設計,並且讓這些設計也變成元件自由使用。
#eec9db
#C49DB5
#fff
#2d2d2d
Deep #eec9db
Light #f6e2ec
Deep #a98799
Light #C49DB5
Deep #f8f9fa
Light #fff
Deep #2d2d2d
Light #9f9f9f
box-shadow: 1px 1px 12px 0px rgba(0, 0, 0, 0.2)
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
background: radial-gradient(circle at 50% 50%, var(--color-main) 20%, rgba(255, 255, 255, 0) 70%, #fff 80%, #fff 100%)
Line-height: 1.2x~2x
Font-size: calc(1.375rem + 1.5vw)
Font-weight: 500
Font-size: calc(1.325rem + 0.9vw)
Font-weight: 500
Font-size: calc(1.3rem + 0.6vw)
Font-weight: 500
Font-size: calc(1.275rem + 0.3vw)
Font-weight: 500
Font-size: 1.25rem
Font-weight: 500
P / Content text
Font-size: 16px
Font-weight: 400
Compartment Deco Text
Border-radius: 8px
Line-height: 1.5x
Point Article Text
Border-radius: 8px
Line-height: 1.8x
Article Text
Line-height: 2.6x
在區別文字和圖片時使用
Padding: 1rem
Brand
制作物種類 / 制作物種類 / 制作物種類
在說明圖片的品牌時使用
Text-align: center
Line-height: 1.5x
(Title) Font-size: 1.2rem
(Info) Font-size: 1rem
▲三折DM
在說明圖片的內容時使用
Text-align: center
Font-size: 1rem
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus inventore beatae odit quisquam, eius soluta velit ipsum! Quod minus veniam praesentium tempora obcaecati, fugiat optio possimus illo architecto quibusdam distinctio voluptatibus sapiente laudantium numquam dignissimos. At tenetur repellendus sed maxime.
在重視設計性的時候使用
(Title) Font-size: H5
(Article Text) Font-size:1rem / Line-height: 2.6x
在強調文章重點的時候使用
Font-size: H5
Padding:16px
Margin: Top & Bottom 1rem