網頁設計好文

Bringing new CSS techniques to production
https://sidigital.co/blog/bringing-new-css-techniques-to-production

How to improve your mobile UIs by learning from personal touch patterns
https://uxdesign.cc/how-to-improve-your-mobile-uis-by-learning-from-personal-touch-patterns-491ee5f32be0

CSS Architecture for Multiple Websites
https://medium.com/@elad/css-architecture-for-multiple-websites-ad696c9d334

How To Create A PDF From Your Web Application
https://www.smashingmagazine.com/2019/06/create-pdf-web-application/#comments-create-pdf-web-application

Designing For Print With CSS
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

Optimizing Google Fonts Performance
https://www.smashingmagazine.com/2019/06/optimizing-google-fonts-performance/

Why we prefer CSS Custom Properties to SASS variables
https://codyhouse.co/blog/post/css-custom-properties-vs-sass-variables

SVG Properties and CSS 
https://css-tricks.com/svg-properties-and-css/

Why you should use CSS env()
https://blog.logrocket.com/why-you-should-use-css-env-9ee719ce0f24

Digging Into The Display Property: The Two Values Of Display
https://www.smashingmagazine.com/2019/04/display-two-value/

Things nobody ever taught me about CSS. https://medium.com/@devdevcharlie/things-nobody-ever-taught-me-about-css-5d16be8d5d0e

不離不棄的破折號
https://thetype.com/2019/03/14918/zh-hant/?fbclid=IwAR3fylA3eBx7ZN9CxMv-fdKZ6k3xBPUn2P7_s1DMq6P6dU-N123WejtN2Bk

JavaScript Loading Priorities in Chrome
https://addyosmani.com/blog/script-priorities/

How to create powerful personas
https://medium.com/yoti-design/how-to-create-powerful-personas-f901a499573e?ref=uxdesignweekly

How To Architect A Complex Web Table
https://www.smashingmagazine.com/2019/02/complex-web-tables/

前端9部
https://www.yuque.com/fe9

don’t get clever with login forms
http://bradfrost.com/blog/post/dont-get-clever-with-login-forms/

Search interface: 20 things to consider
https://uxplanet.org/search-interface-20-things-to-consider-4b1466e98881?fbclid=IwAR1FyXbFhIzMkAEjvOQawi0ZfRcFOkESNOMo5AuI9W64xQbyTY4FxMU0HOI

The only reason your CSS fails
https://blog.logrocket.com/the-only-reason-your-css-fails-8e4388d562af

A Guide To CSS Support In Browsers
https://www.smashingmagazine.com/2019/02/css-browser-support/

How to Create User Journey Maps to Optimize CX
https://uxplanet.org/how-to-create-user-journey-maps-to-optimize-cx-ed82ac5ee29a?fbclid=IwAR0JuHcDDfKbduELDIqXVtn3apyEpjZxmX-NeJl-0fPWbjHNxcGmct3Vf8M

Design thinking vs. design sprint demystified
https://uxplanet.org/design-thinking-vs-design-sprint-demystified-fed300b3ecad?fbclid=IwAR3hbnxcO_xHo9_AF-sxSs6TiwEHzCPhh83JmMKqEVrljjTVFDJzjHq-4DY

Best of 2018 UX Design Case Studies
https://www.casestudy.club/bestof?fbclid=IwAR1hqtWk7HQTS-NbFUU0QoAo9QH8vVS36422qcF9waeROMmK-_YbBwGkBeg

如何設計應用程式內購 (In-app-purchase)?
https://medium.com/gogolook-design/%E5%A6%82%E4%BD%95%E8%A8%AD%E8%A8%88-%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F%E5%85%A7%E8%B3%BC-in-app-purchase-c4e3d9fa7aaf?fbclid=IwAR0zkgwzX7NIX3Q7LsjFskEThEC-0C3Rszs6jtnu0SKMur9L9Fim3kqY_Sg

會員 APP 導入行動支付的介面 UX 設計要點(上)
https://medium.com/goons/%E6%9C%83%E5%93%A1-app-%E5%B0%8E%E5%85%A5%E8%A1%8C%E5%8B%95%E6%94%AF%E4%BB%98%E7%9A%84%E4%BB%8B%E9%9D%A2-ux-%E8%A8%AD%E8%A8%88%E8%A6%81%E9%BB%9E-%E4%B8%8A-98b3d0664a01?fbclid=IwAR374kS7cmZK594OqLePDCUJaYuM1Twuf4Pw9FvHhkCi-jOc1YrjNZZXjZo

會員 APP 導入行動支付的介面 UX 設計要點(下)
https://medium.com/goons/%E6%9C%83%E5%93%A1-app-%E5%B0%8E%E5%85%A5%E8%A1%8C%E5%8B%95%E6%94%AF%E4%BB%98%E7%9A%84%E4%BB%8B%E9%9D%A2-ux-%E8%A8%AD%E8%A8%88%E8%A6%81%E9%BB%9E-%E4%B8%8B-868140e87983?fbclid=IwAR0OYGiss3OldkzGc7CsPD0M41zUIRP7gLxyLBeAyyujmFvYU7gngO6r45M

上架圖全攻略:怦然心動的一眼瞬間
https://medium.com/goons/%E4%B8%8A%E6%9E%B6%E5%9C%96%E5%85%A8%E6%94%BB%E7%95%A5-%E6%80%A6%E7%84%B6%E5%BF%83%E5%8B%95%E7%9A%84%E4%B8%80%E7%9C%BC%E7%9E%AC%E9%96%93-ce1ed46908a8?fbclid=IwAR2n0M5ROiGhjrZRXhlH-8K-ZpSokJVIeI8AK4nXZqzi1jiQNjHW1h1LDiY

How do you figure? (about figure tag)
https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html

The practical value of semantic HTML
https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/

New horizons in CSS: Houdini and the Paint API
https://blog.logrocket.com/new-horizons-in-css-houdini-and-the-paint-api-8b307cf387bb

Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]
https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/

用研驱动增长:重新定义增长时代下的“用研”
http://www.woshipm.com/operate/1815461.html?fbclid=IwAR0QW5EFk3mxRfarntqRvYroCJHLS0IFl2hiPjx8P_vaZ5r8pR32qpvgG3M

Understanding the Virtual DOM
https://bitsofco.de/understanding-the-virtual-dom/

Personas – A Simple Introduction
https://www.interaction-design.org/literature/article/personas-why-and-how-you-should-use-them?fbclid=IwAR0vL_rLXRnDzWnUJwo8Pfs_yAcxsoxI1JCh-G4OdfOL2lz6KOJ6GkylrFk

Front-End Performance Checklist 2019 [PDF, Apple Pages]
https://paper.dropbox.com/doc/Front-End-Performance-Checklist-2019-PDF-Apple-Pages-1JywEqeq9RYEYxF7mhytT

Ultimate Start guide for beginner UX/UI designer
https://medium.com/@johnyvino/ultimate-start-guide-for-beginner-ux-ui-designer-b848be089589?fbclid=IwAR1Ae4adviKbyMQ7PrCNJ56Z9jFURLgsISLyCXY0NYH5SUr5wjjWubcMTE4

 UX Guide For Designing Error Pages
https://blog.prototypr.io/a-ux-guide-for-designing-error-pages-fb9ced1f1c8a?fbclid=IwAR184gWWyeViKAl8acBt2-vipAU58d_8SgT8JTMVXkYUlQzG6bHuHZWzGME

Common CSS Issues For Front-End Projects
https://www.smashingmagazine.com/2018/12/common-css-issues-front-end-projects/

10個在B2B與B2C產品使用者研究上的差異
https://medium.com/uxeastmeetswest/10%E5%80%8B%E5%9C%A8b2b%E8%88%87b2c%E7%94%A2%E5%93%81%E4%BD%BF%E7%94%A8%E8%80%85%E7%A0%94%E7%A9%B6%E4%B8%8A%E7%9A%84%E5%B7%AE%E7%95%B0-7579062c6328

血淋淋的Design Sprint初體驗
https://medium.com/@jamesderekliu/%E8%A1%80%E6%B7%8B%E6%B7%8B%E7%9A%84design-sprint%E5%88%9D%E9%AB%94%E9%A9%97-b7b3f76e0f47?fbclid=IwAR0vinzyA3nekZVtWb5Bo3jU8lQOX1FuxZDcw0wqEigUYeh_smSWS26dQHs

做產品前一定要做使用者研究嗎? 一場關於工程師與設計師不同想法的思辯
https://vide.tw/10329?fbclid=IwAR1MFqa86XrPaPD54YQ-wRGJM5_BR2OrFqSu0wD6CZaBovbUc49SJlJum78

談客戶/上級溝通:當被要求更改設計時,該如何應對?Client Management : How to Manage Design Change Requests
https://medium.com/uxeastmeetswest/%E8%AB%87%E5%AE%A2%E6%88%B6-%E4%B8%8A%E7%B4%9A%E6%BA%9D%E9%80%9A-%E7%95%B6%E8%A2%AB%E8%A6%81%E6%B1%82%E6%9B%B4%E6%94%B9%E8%A8%AD%E8%A8%88%E6%99%82-%E8%A9%B2%E5%A6%82%E4%BD%95%E6%87%89%E5%B0%8D-client-management-how-to-manage-design-change-requests-771edc9cca99

Designing great icons for mobile apps
https://medium.com/swlh/designing-great-icons-for-mobile-apps-a515f254eb31?fbclid=IwAR10mgDgSkdPNYFNCwELYNUEr0bsZaP9rYxUmkaA_5kgL9kA0TE6wGxbBDU

How to use SVG as a Placeholder, and Other Image Loading Techniques
https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c

如何透過最小可行產品(MVP)測試創業想法
https://medium.com/cakeresume/%E5%A6%82%E4%BD%95%E9%80%8F%E9%81%8E%E6%9C%80%E5%B0%8F%E5%8F%AF%E8%A1%8C%E7%94%A2%E5%93%81-mvp-%E6%B8%AC%E8%A9%A6%E6%83%B3%E6%B3%95-7327edeaf49b

Persona 光譜 (Persona Spectrum)
https://medium.com/as-a-product-designer/persona-%E5%85%89%E8%AD%9C-4ca9b5efa4e

Information wants to be free.|簡報設計教學檔案
https://medium.com/slidea-tw/information-wants-to-be-free-%E7%B0%A1%E5%A0%B1%E8%A8%AD%E8%A8%88%E6%95%99%E5%AD%B8%E6%AA%94%E6%A1%88-47c1b77dbbd2

Google Design Sprint 極限壓縮版(上)
https://medium.com/as-a-product-designer/google-design-sprint-%E6%A5%B5%E9%99%90%E5%A3%93%E7%B8%AE%E7%89%88-%E4%B8%8A-e74a9ce3164e

Google Design Sprint 極限壓縮版(下)
https://medium.com/as-a-product-designer/google-design-sprint-%E6%A5%B5%E9%99%90%E5%A3%93%E7%B8%AE%E7%89%88-%E4%B8%8B-9722fb79a7fc

關於聊天機器人你不可不知的 5 件事
https://blog.yoctol.com/five-things-about-chatbot-d17ee6295029

使用者訪談到底怎麼做? Interview journey design
https://medium.com/cultivate-your-design-insight/interview-journey-design-a88864175dcc

5 個能穩定進行好設計的 UX 方法
https://intersection.tw/5-%E5%80%8B%E8%83%BD%E7%A9%A9%E5%AE%9A%E9%80%B2%E8%A1%8C%E5%A5%BD%E8%A8%AD%E8%A8%88%E7%9A%84-ux-%E6%96%B9%E6%B3%95-36e0dc42b5f3

A/B testing 你真的做對了嗎?產品開發團隊必懂的五大方法論
https://medium.com/asiayo-engineering/a-b-testing-%E4%BD%A0%E7%9C%9F%E7%9A%84%E5%81%9A%E5%B0%8D%E4%BA%86%E5%97%8E-%E7%94%A2%E5%93%81%E9%96%8B%E7%99%BC%E5%9C%98%E9%9A%8A%E5%BF%85%E6%87%82%E7%9A%84%E4%BA%94%E5%A4%A7%E6%96%B9%E6%B3%95%E8%AB%96-2da1d20c2678

五招迅速拆解UX Design白板題
https://medium.com/as-a-product-designer/%E4%BA%94%E6%8B%9B%E8%BF%85%E9%80%9F%E6%8B%86%E8%A7%A3%E7%99%BD%E6%9D%BF%E9%A1%8C-e89aa10f79a7

先別急著畫UI,你聽過Flow Chart嗎
https://medium.com/as-a-product-designer/%E5%85%88%E5%88%A5%E6%80%A5%E8%91%97%E7%95%ABui-%E4%BD%A0%E8%81%BD%E9%81%8Eflow-chart%E5%97%8E-c6715f055cfc

跟著小明一起搞懂技術名詞:MVC、SPA 與 SSR
https://medium.com/@hulitw/introduction-mvc-spa-and-ssr-545c941669e9

瀏覽器的渲染與頁面優化
https://medium.com/@peterchang_82818/%E7%80%8F%E8%A6%BD%E5%99%A8-%E5%8A%A0%E8%BC%89-%E8%A7%A3%E6%9E%90-%E6%B8%B2%E6%9F%93-%E9%81%8E%E7%A8%8B-%E7%B0%A1%E5%96%AE-%E5%8E%9F%E7%90%86-%E5%84%AA%E5%8C%96-%E6%95%99%E5%AD%B8-%E7%AF%84%E4%BE%8B-tutorial-example-render-browser-7fcada216a21

資料視覺化Data Visualization:圖表設計
https://medium.com/uxeastmeetswest/%E8%B3%87%E6%96%99%E8%A6%96%E8%A6%BA%E5%8C%96data-visualization-%E5%9C%96%E8%A1%A8%E8%A8%AD%E8%A8%88-9ef17943a2d4

談UX設計師評估資訊架構時內容的影響力、維護成本與可用性
https://medium.com/as-a-product-designer/%E8%B3%87%E8%A8%8A%E6%9E%B6%E6%A7%8B%E5%85%A5%E9%96%80-%E5%88%86%E6%9E%90%E5%85%A7%E5%AE%B9-content-%E4%BB%A5%E5%8F%8A%E5%BE%8C%E8%A8%AD%E8%B3%87%E6%96%99-metadata-%E7%9A%84%E7%B7%B4%E7%BF%92-fc059c8dc3ee

練習 UX 工作上用戶訪談的破冰小技巧
https://medium.com/as-a-product-designer/ux%E5%B7%A5%E4%BD%9C%E4%B8%8A%E7%B7%B4%E7%BF%92%E7%94%A8%E6%88%B6%E8%A8%AA%E8%AB%87%E7%9A%84%E5%B0%8F%E6%8A%80%E5%B7%A7-d1bddcecb767

加州大學聖地牙哥分校 UX 設計線上證書修畢心得
https://medium.com/as-a-product-designer/%E5%8A%A0%E5%B7%9E%E5%A4%A7%E5%AD%B8%E8%81%96%E5%9C%B0%E7%89%99%E5%93%A5%E5%88%86%E6%A0%A1-ux-%E8%A8%AD%E8%A8%88%E7%B7%9A%E4%B8%8A%E8%AD%89%E6%9B%B8%E4%BF%AE%E7%95%A2%E5%BF%83%E5%BE%97-fd233e2edd2f

精選 | 超全可視化課程合集,助你C位出道
https://medium.com/vis-it-%E6%9C%89%E8%A6%96%E6%B2%92%E4%BA%8B/%E7%B2%BE%E9%81%B8-%E8%B6%85%E5%85%A8%E5%8F%AF%E8%A6%96%E5%8C%96%E8%AA%B2%E7%A8%8B%E5%90%88%E9%9B%86-%E5%8A%A9%E4%BD%A0c%E4%BD%8D%E5%87%BA%E9%81%93-ae313a8656d1

Creating Responsive Components for your Design System: Dropdown Menus 
https://medium.com/sketch-app-sources/creating-responsive-components-for-your-design-system-dropdown-menus-9460a60e968e

Grab 東南亞交通運輸的產品設計挑戰與實踐 — 以重新設計 Grab app 為例
https://medium.com/as-a-product-designer/grab-%E6%9D%B1%E5%8D%97%E4%BA%9E%E4%BA%A4%E9%80%9A%E9%81%8B%E8%BC%B8%E7%9A%84%E7%94%A2%E5%93%81%E8%A8%AD%E8%A8%88%E6%8C%91%E6%88%B0%E8%88%87%E5%AF%A6%E8%B8%90-%E4%BB%A5%E9%87%8D%E6%96%B0%E8%A8%AD%E8%A8%88-grab-app-%E7%82%BA%E4%BE%8B-38cb03d7ab06

如何為色盲做設計?
https://medium.com/digital-sunday/%E5%A6%82%E4%BD%95%E7%82%BA%E8%89%B2%E7%9B%B2%E5%81%9A%E8%A8%AD%E8%A8%88-fd9615ec2578

Optimistic UIs in under 1000 words
https://uxplanet.org/optimistic-1000-34d9eefe4c05

接案設計師為何不公開報價:關於「透明報價的好與壞」,以及「到底該如何報價」
https://medium.com/%E8%83%8C%E5%9C%B0%E8%A3%A1%E7%9A%84%E8%BA%AB%E5%88%86%E5%85%B6%E5%AF%A6%E6%98%AF%E4%B8%80%E4%BD%8D%E5%B9%B3%E9%9D%A2%E8%A8%AD%E8%A8%88%E5%B8%AB/%E6%8E%A5%E6%A1%88%E8%A8%AD%E8%A8%88%E5%B8%AB%E7%82%BA%E4%BD%95%E4%B8%8D%E5%85%AC%E9%96%8B%E5%A0%B1%E5%83%B9-%E9%97%9C%E6%96%BC-%E9%80%8F%E6%98%8E%E5%A0%B1%E5%83%B9%E7%9A%84%E5%A5%BD%E8%88%87%E5%A3%9E-%E4%BB%A5%E5%8F%8A-%E5%88%B0%E5%BA%95%E8%A9%B2%E5%A6%82%E4%BD%95%E5%A0%B1%E5%83%B9-b73611c06e2f

Designing a Better Career Path for Designers
https://medium.com/elegant-tools/designing-a-better-career-path-for-designers-872b0aa50b5b

一人多線也能玩得轉? UXer 的產品開發協作心法(上)
https://medium.com/uxeastmeetswest/%E4%B8%80%E4%BA%BA%E5%A4%9A%E7%B7%9A%E4%B9%9F%E8%83%BD%E7%8E%A9%E5%BE%97%E8%BD%89-uxer-%E7%9A%84%E7%94%A2%E5%93%81%E9%96%8B%E7%99%BC%E5%8D%94%E4%BD%9C%E5%BF%83%E6%B3%95-%E4%B8%8A-3e76f68bde48?fbclid=IwAR3D-WWe_eHphpGZ-ZhVIFCjnAWN41FKcx_gp3jWAYcEhPiSHH2VlorpXes

Writing modular CSS
Writing modular CSS (Part 1) — BEM
https://zellwk.com/blog/css-architecture-1/
Writing modular CSS (Part 2) — Namespaces
https://zellwk.com/blog/css-architecture-2/

50 Things You [Probably] Forgot To Design
https://medium.com/ux-power-tools/50-things-you-probably-forgot-to-design-7a288b0ef914

文字高度問題
http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
https://medium.com/codyhouse/line-height-crop-a-simple-css-formula-to-remove-top-space-from-your-text-9c3de06d7c6f

Web Animation Infographics: A Map of the Best Animation Libraries for JavaScript and CSS3 plus Performance Tips
https://www.awwwards.com/web-animation-infographics-a-map-of-the-best-animation-libraries-for-javascript-and-css3-plus-performance-tips.html

切圖的細節-不會消失的一像素https://heywesley.wordpress.com/2015/05/15/detail-of-slice-1px-never-disapper/

The 7-Step-Paul-Rand Logo-Test
7個步驟測試你的logo是不是好logo
https://medium.com/entrepreneur-s-handbook/the-7-step-paul-rand-logo-test-5c7b546af17b#.tqlymd723

Buttons in Design Systems
https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.qn7dqzfsk

Design for Fingers, Touch, and People
http://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php
http://www.uxmatters.com/mt/archives/2017/05/design-for-fingers-touch-and-people-part-2.php

F2E   解放吧!設計圖應該跟Web實作是一致的https://docs.google.com/presentation/d/1u9w2zsrItuCiMjyUDmn0r5VpdJNx3OaRRQNhYCw4kPg/edit

Sketch-如何成為開發者跟設計師的溝通橋樑
https://speakerdeck.com/augus/sketch-nil-ru-he-cheng-wei-kai-fa-zhe-gen-she-ji-shi-de-gou-tong-qiao-liang

How HTTP/HTTPS Works?
https://speakerdeck.com/dannvix/https-works

form of mobile
https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/
https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-2/#comments-ux-html5-mobile-form-part-2

Splicing HTML’s DNA With CSS Attribute Selectors
https://www.smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css/?fbclid=IwAR1d6IR6NnAYsYHR9r-A0lRs3TQyw6VF9k39BPljhOEBx8IAFGivQ99V2HY

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.