Sign in

KeyBank: https://www.key.com/personal/index.jsp

採用報紙頭條新聞nav bar的樣式,好幾欄的nav bar滿足銀行系統繁雜分類導航的需要

可以收起的”Sign on” box,brand color(#CC0000)用在CTA button上


原網站:https://blog.google/

最上方的白色帶box-shadow的nav bar讓網頁有了層次

box-shadow的灰度,16%和23%


進入App的界面非常有辨識度,大面積的藍色背景圖上方是CLEO的標誌

Sign up/Log in頁面非常cool,有對話場景的介紹產品功能


原網站:https://medium.com/

Medium是我經常看各類文章的地方,尤其相關設計類的文章。這篇將解析medium網站的排版和UX流程。

・top的區域使用70px字號,#080808顏色的大標題“Medium is a place to write, read, and connect”,讓用戶能清晰快速的知道產品是什麼,怎麼用,意義是什麼。非常高超但又不突兀的產品描述和營銷。

・向下拉動到一定位置,背景會變為白色。方便下面的內容閱讀。

・brand logo是圖標加text,黑色的brand logo非常百搭,適應各種光線環境。


When put an element in master component, all instances will have the element

Then, add a “text”element in master component. All instances will have the element automatically


  1. 學寫CSS代碼有2週了,一開始進程特別慢。是“補丁”一樣的寫代碼,A好像不行就去弄一下A, 然後B又不行了又去弄B,沒有一個系統的邏輯。最近開始嘗試看一看CSS的理論的videos, 發現理解了之後才更好更快寫起來。
  2. 開始coding後,對於design的理解似乎有進步。“everything is a box”, 太贊同這句話了。在設計的時候分區域考慮也更全面。auto-layout和flexbox結合起來太好用了

Shift⇧+H horizontal reverse

Similar, Shift⇧+V vertical reverse


Clip content in my view is that whether the content will disappear (appear) with the size of frame

When not select “Clip content” which is in right panel below the “Frame” section, drag the frame to be shorter, the content still show


Figjam now has it timer feature, more professional for a design meeting

Select timer

Adjust time


Figma to code

Great plugin that can be installed in figma community, help transfer design to css code. Very user friendly to designers to do some coding work.

Arlene X

Beginner of UX Design

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store