Tagged

Case Study

A collection of 36 posts

Case Study

Case 36 | bicknells.com

網站地址:https://www.bicknells.com 珠寶的網站一般來說字體都比較纖細,bicknells也不例外。字體以灰色細體為主,灰色比較接近白金和鑽石的顏色,圖片不會顯得突兀 ・上方的nav bar是fixed position,在頁面向下滾動時透明的背景非常elegant。但有一個很大的缺點的問題是,nav bar和頁面最上方的間距過大,浪費了很多可讀空間。對於本該突出的商品都內容部分,反而一次性只能顯示一小部分。而且對於一些想要在往下滑動頁面時不想看到過大的nav bar的用戶來說,沒有一個可以把nav bar隱藏的功能 ・商品(鉆石戒指)的圖片下是鉆石的名稱(包括型號)和價格,信息量合適 拼接式的圖片呈現一種積木的視覺感受,簡單但又有質感 🍺思考: ・white space的運用需要balance,對於購物網站來說最重要的是產品內容的呈現,過多的white space用在nav bar上會讓人覺得無法專注於產品內容的瀏覽 ・購物類網站的產品下信息部分儘量突出重要內容同時保持簡單(產品標題,價格)

Case Study

Case 34 | Brilliantearth.com

網站:https://www.brilliantearth.com 網站設計的中規中矩但不失精緻的珠寶網站 landing page的內容基本是居中的格式,CTA放在最右上角(用戶登錄,愛心,加入購物車這3個主要的功能) nav bar的選項居中,以主體和材質劃分(engagement訂婚,wedding結婚,diamonds鑽石,gemstones寶石,jewelry珠寶),讓用戶可以清晰的按照自己的購物意願來導航 3個賣點放在突出的box上,既比較顯眼又讓整個頁面依然elegant 同一個size的圖片加文字的形式出現了多次,但稍加變化就不會顯得無臉。如把圖片左右調換一下,或者以整個圖片為底(但圖片純色部分的作為文字的背景部分) 標題下直接商品圖片的形式也多次出現,中間以其他的bar隔開做一個視覺上的轉換使得頁面不會無聊 🍺思考: ・確定好幾個主要的排版結構作為components,中間不同components交替來,這樣整個頁面organized也不會無聊 ・選取的圖片的色調整體style一致可讓整個頁面較為乾淨

Case Study

Case 33 | Opendoor iOS

App UX learning 開屏是app的logo標誌,簡單直觀 開始指導頁用的是滑動的方式介紹App主要的特點 然後是設置最重要的房屋所在地點(也是這個App作為買賣找房軟件的核心價值所在)。非常簡潔的頁面設計,最上方是圖標,黑色的粗體title,灰色的略細於title的簡介 在成功create帳號之後,直接提問用戶是否是第一次買房?是否正在使用中介看房買房?(並提出App就有專業的中介團隊可以幫助買賣房屋)。在提供自己的服務之前先調查用戶的情况,research的做法可以让后续给用户提供更加个性化的服务从而增加产品的“解决问题”能力 數字標出每個地點有多少available的房源,general的做法,非常清晰 底下的bottom bar分別是“Find""Search""My homes""Chat""My offers"涵蓋了最主要的“找房”“提供房源”“溝通”的功能 ・點擊一處地點後,下面會出現带有图片的房源的細節信息 ・用box的方式呈現信息,用戶在概覽的時候方便瀏覽,而更多細節的頁面在點擊後出現(滿足需要深度了解的用戶的需求)。在信息的數量呈現上適中(不會給人堆疊的感覺,但需要的信息也可以通過更多操作得到) 數據以可視化的圖表形勢呈現,簡潔易懂的同時展現了專業 細節頁面沒有過多的UI裝飾,主要以黑色灰色的不同字號的字體變化來區分內容層級。

Case Study

Case 32 | Little Cove Coffee

Little Cove Coffee: https://littlecovecoffee.com.au 整體網站的顏色是咖啡的顏色(#312A1D)和咖啡豆研磨後的質感作為背景圖片 ・上方用兩個分區作為nav bar,nav bar的nav字體是比較手寫體風格的可愛型的“This Little Piggy"的字體,讓整個網站的風格非常的樸實可愛平易近人又與眾不同 ・中間部分用圖片加文字(左右排版),黑色的細線作為分割線在粗獷可愛的字體風格上加入了雅致的元素。在title字體為“This Little Piggy"呈現一個手寫體的可愛感覺外,文字內容是用“nimbus-sans"的比較易於閱讀的字體。風格與閱讀性兼具 🍺思考: ・帶有復古氣息的網站,網站背景選用的是接近產品(咖啡豆)的顏色 ・nav bar和下方的bar相互呼應顏色和主體 ・字體上,title用的是比較個性化的偏手寫體風格,content用的是易於閱讀的sans的字體。粗獷可愛個性化和用戶體驗容易閱讀兼具,在美學和閱讀性兩者之間平衡。

Case Study

Case 31 | Photographer's website

Jeremy cowart, very great and talented artist here is his well designed website:https://www.jeremycowart.com/ ・一個性化的品牌logo會讓人印象深刻,左上角的粗體藝術字“JEREMYCOWART"非常醒目又特別,從看到這個logo的第一眼就知道這是一位非常具有天賦的藝術家的網站 ・右側上方的nav bar用的是font-weight:300的adobe-caslon-pro的字體,纖細精緻的感覺,和左上方的brand logo形成一個對比 ・網站的作者是一位攝影師,攝影照片是最主要的內容。所以網頁的大部分主體內容都是照片。採用不同的尺寸,像是畫廊裡掛的一幅幅展品照片,在digital world裡營造出一種現實中藝術館的感覺。非常不同於一般的網站的的排版佈局,主要突出內容,very smart and clear. ・bottom bar簡潔清晰的黑色背景,白色的字體。直接的放上社交聯繫方式,方便用戶快速找到更多社交平台去關注作者,簡單設計中蘊藏了巧思。非常intuitive design. 這個頁面的唯一個人覺得還可以改進的地方是:

Case Study

Case 30 | Soyuz Coffee

網站:https://soyuzcoffeestore.com brand logo是由倒三角形和一個水滴狀的橢圓形組成,像是在滴漏的咖啡。右側上方的nav bar是粗體黑色的,醒目的同時又很有辨識度。 帶有effects倒影的產品展示,一排3個,下面一個button(瀏覽更多,button stroke為4px) 左邊的文字部分層級分類的非常好,加粗的作為title,字號和字種減小作為文字介紹內容,最下方是button。這個button比上方產品展示的button的長度減小,stroke也相應減輕為2px 復刻設計: 🍺思考: ・brand logo的設計中可以讓用戶感受到設計師的用心程度,和主題相關的簡潔明了的brand logo對於整體品牌提升都有很好的作用 ・文字內容居中的設計,使用字種的變化來突出內容的層級 ・左右排版的圖文兼具的設計,字種可以讓文字內容有變化

Case Study

Case 29 | jacu.com

Coffee網站:https://www.jacu.no 設計非常簡潔的一個賣咖啡產品的網站 ・首頁由nav bar,滾動大圖片,4個一排的咖啡產品共4排組成。抽象來看的話:導航,圖片介紹,分類產品。整體頁面的功能性強兼具美觀。 ・白色的背景上的其他設計元素整體非常乾淨有排列秩序 產品的圖片是有反光的圖片,營造出的是一種放在玻璃台面上具有光影效果的物品,具有品質感而且不落俗套。 復刻設計: 🍺思考: ・shopping類網站的功能性,簡潔性。這樣用戶可以方便快速的瀏覽到想要看到的產品 ・effects。真實的光影效果會讓展示產品的質感提升,也可參見Apple的產品展示設計,各種運用光影讓產品保持高質感

Case Study

Case 28 | Coffee Beans.com

網址:https://coffeebeansdelivered.com.au 近來喜歡泡一些手沖咖啡,對咖啡品牌開始慢慢了解的同時也發現有一些咖啡網站也挺有特點的。今天分析的這篇就是一個澳洲品牌的咖啡網站。 ・nav bar用的深色背景(#121212)和下面的咖啡液流動的視頻圖片相互融合,白色的導航類目字體居中。右邊是搜索,購物車,Log in ・最有特點的是這個大的看似是圖片,實際上是有動畫效果的。中間的咖啡液是在流動的,用戶在瀏覽網站時候就可以看到咖啡豆變成咖啡液的流動。視覺上非常有趣,整個網站頁面傳達出了動感和新鮮freash的品牌理念 ・頁面上兩個紅色背景的CTA button非常有意思。一個“Help me decide",一個“Buy coffee" ・點擊進入“Help me decide",是帶有圖片icon問答形式的。每回答一個問題,下一個問題才會出現。非常巧妙的設計,用戶不會在開始一下子看到很多問題容易直接放棄問卷。而每回答一個問題再出來下一個問題,好像遊戲過關一樣的體驗,讓用戶能一個一個問題的仔細完成,從而AI自動幫助用戶選擇最適合的豆子。對於節約用戶時間,增加購買下單率,甚至包括減小退貨率,都是一個很可愛具有匠心的設計 ・擬實物化的圖片很好的幫助用戶快速選擇,

Case Study

Case 27 | Material.io

Material design和Apple design算是設計中不得不提的兩大design標準,今天這篇就來看看Material design網頁中的設計分析 light和shadow的運用,讓設計頁面有了實體物品的質感 ・左側是頁面內的導航欄,在一個類目比如“Design"下用戶可以導航到很多內容 ・右邊是單一article的位置標識,用戶可以在瀏覽時候隨時看到進度,user focus ・字體的黑色和灰色運用自如,顯示層級和狀態 ・向上滑的時候最上方的nav bar會有一個彈起的效果,上滑的時候停住並向下拉動一點時候,nav bar又會出現。非常動感的nav bar。

Case Study

Case 26 | Strava

App: track activity & map routes 一款紀錄運動軌跡的App,跑步,游泳等等。 一進入App,品牌的背景顏色橙色 (#EA5B2A)充滿整個頁面,上面是經過設計過字體的品牌名稱。給用戶一個比較強烈的品牌標識的感受。 Log in/Sign up界面,推薦登陸方式以顏色標出,比如"Log In"和“Continue with Facebook” CTA button的Corner radius是4px,整體給我是一個比較tech的感受 兩個button的"drop down" effects非常neat, (y:4, blur:8, #000000 20%) 進入產品的主界面:tracking activity 上方用green bar來顯示狀態 CTA button的位置居中,78px*78px,

Case Study

Case 25 | Clubhouse

Social Audio App: Clubhouse 進入App頁面的頁面非常簡潔,產品名稱“Clubhouse",下面“Welcome in"的按鈕(背景色#5B75A6,白色的字體),可愛的🎉標識。Social audio產品活潑可愛的特性可見。 進入主頁面後,icon “search"單獨在左上角,右邊一欄是各個icon代表各個功能“invites", "upcoming for you", "activity", "profile", 分別對應屬性: 交友(邀請),自定义参加的活动,更多活动 中間的每個room以box-view的方式呈現,界限非常清晰同時可以容納text-content 最下方的在button "Start a room"周邊是smooth的漸變模糊的處理,試了一下用“layer blur"的effects來復刻 🍺思考: ・進入App的頁面非常簡潔俏皮 ・"Layer blur"的effects來起到向下滑動頁面的時候內容的smooth的過渡

Case Study

Case 24 | KeyBank

KeyBank: https://www.key.com/personal/index.jsp 採用報紙頭條新聞nav bar的樣式,好幾欄的nav bar滿足銀行系統繁雜分類導航的需要 可以收起的"Sign on" box,brand color(#CC0000)用在CTA button上 內容部分以box形式呈現,“img"+"Title" 這個突出左邊-50px的紅色box,非常sharp的商業感覺 圖片文字是上下錯開的擺放位置,給非常標準化的頁面增添了活潑靈動的style 1:1復刻design 🍺思考: ・導航類目多的時候,使用多條nav bar ・上下錯開來的圖片排版,可以增加畫面動感 ・懸浮的不完全alignment的邊框可以吸引用戶注意力,且增加畫面美感

Case Study

Case 23 | blog.google

原網站:https://blog.google/ 最上方的白色帶box-shadow的nav bar讓網頁有了層次 box-shadow的灰度,16%和23% 向上滑動頁面,上方的nav bar會hide起來,讓用戶可以更專注瀏覽content 0和1的圖片既呼應計算機科學中的“0”“1”,又於右邊標題的“$10 billion"相呼應 多用separate line來劃分區域,margin上下都是30px Social media和一些terms的介紹條例放在頁面最下方,兩行排列,每行橫向排列elements。於文字內容align left的平齊的line來分隔兩欄,視覺上不會覺得太重同時又很好的起到了分隔內容區域的作用。 🍺思考: ・nav bar可以在下拉頁面看內容時hide的設計,很好的幫助用戶在瀏覽網頁內容時可以更專注 ・多用灰色的line來分隔內容區域,在期待分區的作用同時又不會給用戶在視覺上造成負擔 ・#FFFFFF的背景作為網頁背景色比較乾淨清爽

Case Study

Case 22 | Cleo

進入App的界面非常有辨識度,大面積的藍色背景圖上方是CLEO的標誌 Sign up/Log in頁面非常cool,有對話場景的介紹產品功能 多樣的交互頁面,對於Mobile來說頁面比較小,多是從下往上多彈出一個頁面來展示新的action 常見的在App裡運用顏色深淺來指示active/inactive狀態的例子: CTA button和input bar在還未輸入的時候都是灰色的。當狀態active的時候,CTA button的背景色變為brand color, input bar則有一個深色的stroke來表明active狀態 🍺思考: ・大面積的醒目的brand color可以build style,App會非常具有辨識度。不過也存在弊端,在強調極具個性的設計時候會對accessibility上有一定妥協。比如字體的size, weight以及大面積使用brand color會有視覺負擔 ・App design因為是在一個比較小的空間上設計,所以多樣的交互設計就顯得很重要,比如從下往上滑出一個彈框,或是從左向右的彈框。都是為了增加mobile space並且以一個intuitive way幫助用戶使用產品 ・整體顏色和風格需要有一致性,design system很有必要

Case Study

Case 21 | indeed.com

原網站:https://www.indeed.jobs nav bar的排版結構是清晰可讀性很高的,雖然不是很獨特的nav bar但對於使用用戶廣泛的找工作網站,功能性是更重要。 ・左側是brand logo "indeed", 右側的分類導航“Jobs" "Benefits" "Inclusion" "Students" "Blog" 基本覆蓋了用戶的需求“找工作” “推薦他人工作”“indeed是什麼“(對於新用戶來說很實用) “學生用戶找工作” “indeed博客上的一些經驗和文章“ ・很貼心的是,點擊導航欄會“open a new tab"來打開一個新網頁。這樣用戶可以同時打開多個導航欄內容 ・"Sign in"使用brand color #2557a7,下方的大幅圖片(“We help people get jobs")的背景顏色是比較深色的。“Sign in"button外邊框用線框 ・帶圓角的Search

Case Study

Case 20 | Medium.com

原網站:https://medium.com/ Medium是我經常看各類文章的地方,尤其相關設計類的文章。這篇將解析medium網站的排版和UX流程。 ・top的區域使用70px字號,#080808顏色的大標題“Medium is a place to write, read, and connect",讓用戶能清晰快速的知道產品是什麼,怎麼用,意義是什麼。非常高超但又不突兀的產品描述和營銷。 ・向下拉動到一定位置,背景會變為白色。方便下面的內容閱讀。 ・brand logo是圖標加text,黑色的brand logo非常百搭,適應各種光線環境。 區域的右邊是特別設計的文字組成的圖像,整體形成引號”的形狀,同時每句話都是產品的特性,非常非常妙的圖標。 文章內容呈現在左側,按照向下滑動鼠標的方向呈現。 右側 “Discover more of what matters to you"是fixed position, 方便用戶隨時通過標籤tag索引內容。 CTA button(

Case Study

Case 19 | Tiktok.om

對於短視頻app個人一直是比較謹慎的狀態,但是Tiktok在歐美的popular程度確實讓人無法忽視。這篇就來分析一下tiktok.com網站 從tiktok.com開始短視頻的算法已經開始作用 ・刷新了幾次,每次都是不一樣的短視頻。產品的特性:短視頻吸引用戶注意力。在網站上已經開始 ・往下拉,是一個接一個的短視頻。注意力非常容易被吸引然後spend time on it ・CTA (call to action) button使用的顏色是#fe2c55,非常醒目活力的玫紅色 短視頻的左側是log in 的區域,點擊後會跳出非常多種的直接用第三方account登陸的方式。social media的圖標在左側,右側是比如“Continue with Google"這樣的加粗的text內容。中間用竪線分開icon和text,非常清晰的設計。對於用戶來說,首先注意到彩色的圖標,然後快速鎖定自己要使用的social media accout類型後再看到text內容 🍺思考: ・在product website上顯示出產品特性。比如此處的website向下拉動的時候會一直有短視頻,和tiktok app上的連續的提高短視頻內容一樣。吸引用戶的注意力並且讓用戶對產品有一個expectation ・log

Case Study

Case 18 | BBVA.com

原網站:https://www.bbva.com/en/ 非常標準的box layout的格式設計的網站。文字和圖片內容都以box的形式進行分區 nav bar也是分了兩層,居中的大字體的設計讓用戶瀏覽的時候是一目了然 在圖片下加文字的排版有層次,在字種字號和字體顏色上有區分。非常標準的排版格式 #666的12px字體 #121212的25px weight500 #666的15px字體 🍺思考: ・標準box排版,格式化和穩重可靠的給用戶的觀感 ・text element變化字種字號字體顏色來有一個層級的區分 More: 看到一個很棒的設計網站,裡面有一個斜著排列的元素和SAP的logo有相似之處

Case Study

Case 17 | SAP.com

原網站:https://www.sap.com/index.html# SAP網站的nav bar和分析的Disney那期https://blog.arlenexu.design/ghost/#/site 的nav bar有比較相似的結構。左側是brand logo, 中間是導航欄,右邊是“購買”“搜索”“用戶登陸”和“地區”,是清晰的左中右結構的導航欄 右側的“Contact us"是一直保持fixed的位置,這樣用戶無論滑動到哪個位置,始終“Contact us"都在右側隨時可以點到的地方 拆解開來看,主要背景都是圖片,粗體大號的字體在背景圖上方 ・比較活潑專業的商務風格的圖片整體讓頁面變彩色 ・每個圖片之間用黑(灰)色的矩形欄分開 ・圖片上每個字體顏色都採用#FFF,清晰且連貫 🍺思考: ・背景圖片風格連續,活潑生動可使得網站colorful ・彩色偏深色的背景圖上的文字顏色用#FFF,

Case Study

Case 16 | intel.com

intel原網站:https://www.intel.com/content/www/us/en/homepage.html 可能是出於方便的考慮,右側"intel ARC"是直接一張圖片放在網頁上的而非字體和背景圖 下方box(帶圖片和文字的)的排版不是單一的對齊,而是根據內容有一個向右上的弧度 nav bar彈出框用了一個比較重的box shadow 兩個導航欄,首頁的navigate功能非常明顯 頁面最上方的大的分類導航,以及在中間大幅圖片背景欄的下方的小的導航欄("Get Support","Product Specs", "See Products", "Community", "Download Center") 🍺思考: ・比較簡潔的網站首頁,大幅的圖片下方的content內容以及分類導航欄數量limit ・如果是類別非常多的網站,在排版上的字體字號顏色,icon等的變化可以讓兩欄的nav bar不顯得枯燥 ・背景圖上的圖片可以超出edge,out of box的設計非常新潮特別

Case Study

Case 15 | WSJ.com

原網站WSJ store:https://store.wsj.com/shop/apac/wsjssas21/?trackingCode=aaqwghul&cid=WSJ_RD_ALL_ACQ_NA 很清爽的排版,圖片和文字內容都不多。不過因為是WSJ的Subscribe界面,主要功能也是專注於用戶訂閱WSJ,所以這個密度的內容是比較ok的 清爽的綠色條紋圖片視覺上看著舒適。黑色和灰色的且有字種區別的文字內容比較清晰,紫紅色(#9C2C6F)作為CTA text color穩重也清晰 Imitate process: 最上方的“THE WALL STREAT JOURNAL"是圖片,直接右點鼠標copy image即可綠色的背景圖片同理可得字體細節可以通過inspect得到,建議各位新手設計師們可以稍微了解CSS,對於更好的理解設計的代碼實現以及inspect好的設計網站時有很大作用 full imitate design 🍺思考: Subscribe頁面圖片和文字內容盡可能簡要,除了黑灰色的字體顏色,頁面主要顏色不超過2個近來很多網站都用灰色做網頁背景,這樣白色可以用於box上

Case 14 | TED.com
Case Study

Case 14 | TED.com

・每個nav bar文字的左右padding都是20,organised ・TED的頁面字種多用的是700和400,即regular和bold。整體的閱讀體驗是蠻舒適的。依然是box模式,和之前分析的Airbnb, Amazon, Microsoft的排版是一樣的。design trend總是在一個時期趨於一致。不過TED的一個不一樣的地方是,用了box shadow ・因為TED上視頻非常多,視頻的分類也很多。運用了一個很sharp的類似於tag的矩形紅色背景白色文字來做分類,而不是用傳統的標題式分類。讓頁面顯得整潔乾淨,頁面可“呼吸”的空間因此比較合適 ・brand color的紅色主要出現在點睛的部分,CTA上。顏色運用的不多也不少,品牌特色突出同時不顯雜亂。聯想到最新的Twitter的改版,把原來的藍色的一些button改為了黑色,頁面上的brand blue減少。與TED這裡對顏色的運用有異曲同工,控制一定數量的品牌顏色的使用 很巧妙的用橫向的長的圖片文字欄做分隔欄,使頁面佈局不枯燥 🍺思考: ・用tag代替小標題(每行視頻的第一個的左上角),別緻又讓頁面整潔 ・長幅的照片和文字(horizontally fill)做分隔欄 ・brand color運用合適,在“Membership"button和視頻tag上運用了紅色。不多也不少的吸引用戶的注意力

Case Study

Case 13.02 | Adobe.com

昨天打開的頁面沒有看到Adobe網站的全貌,今天再仔細研究看看 左上方brand logo, 居中的nav bar, 右邊是搜索和用戶登錄等,清晰明了的導航欄 下方是3個box一行,和一整個圖片一行交替 所有box都沒有使用border radius,比較sharp的瀏覽體驗 在用瀏覽器inspect時候發現部分字體單位用的是rem, 部分用的是px (這個之後在design & code裡面詳細來探求一下規律)

Case 13 | Imitate design: Adobe.com
Case Study

Case 13 | Imitate design: Adobe.com

以我目前有的CSS的知識,Adobe的網站佈局從CSS的角度來看,是比較符合CSS horizontal layout的風格,但並不是很符合後來發展的CSS block的佈局。選用的圖片從顏色和內容上都不是很出彩,作為普通用戶來看也沒有情感上的連結 圖片下方文字內容的分隔點的text,行間隔有些過於緊湊,使用的字種是light。雖然比較特別,和上方的title有所區分,但作為大段的文字內容字種選擇light,在accessbility方面對用戶不是很友好,尤其是視障人士的使用體驗 上方nav bar點開後的超級多文字內容,雖然可以理解是因為Adobe的產品多也全,但依然看的是眼花撩亂 下篇會做Adobe website的redesign,敬請期待。