| 兩邊的前次修訂版前次修改
下次修改 | 前次修改
|
| design [2020/02/18 02:58] – [教學] wm | design [2024/01/02 05:36] (目前版本) – [UI] wm |
|---|
| * [[https://polaris.shopify.com/|Shopify Polaris]] | * [[https://polaris.shopify.com/|Shopify Polaris]] |
| * [[https://design-system.service.gov.uk|GOV.UK Design System]] | * [[https://design-system.service.gov.uk|GOV.UK Design System]] |
| | * [[https://stackoverflow.design/|Stacks]] |
| | * [[https://www.patternfly.org/|PatternFly]] |
| =====Typography===== | =====Typography===== |
| * [[http://phraseologyproject.com/|The Phraseology Project]] | * [[http://phraseologyproject.com/|The Phraseology Project]] |
| * [[http://www.gridlover.net/|Gridlover]] | * [[http://www.gridlover.net/|Gridlover]] |
| * [[https://betterwebtype.com/triangle|The Equilateral Triangle of a Perfect Paragraph]] | * [[https://betterwebtype.com/triangle|The Equilateral Triangle of a Perfect Paragraph]] |
| | * [[https://refactoringui.com/previews/line-height-is-proportional/|Line-height is proportional]] |
| ====Font==== | ====Font==== |
| * [[https://tiff.herokuapp.com/|Tiff]] | * [[https://tiff.herokuapp.com/|Tiff]] |
| * [[http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077|Google Visual Assets Guidelines]] | * [[http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077|Google Visual Assets Guidelines]] |
| * [[http://sizecalc.com/|Size Calculator]] | * [[http://sizecalc.com/|Size Calculator]] |
| | ===== Animation ===== |
| | * [[https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9|The ultimate guide to proper use of animation in UX]] |
| | ===== Interaction ===== |
| | * [[https://rauno.me/craft/interaction-design|Invisible Details of Interaction Design]] |
| |
| =====Web===== | =====Web===== |
| * [[http://bradfrostweb.com/blog/post/atomic-web-design/|Atomic Design]] | * [[http://bradfrostweb.com/blog/post/atomic-web-design/|Atomic Design]] |
| * [[http://www.flickr.com/photos/aarronwalter/5579386649/|MailChimp Design Patterns]] | * [[http://www.flickr.com/photos/aarronwalter/5579386649/|MailChimp Design Patterns]] |
| | * [[https://marinaaisa.com/blog/design-and-code-skeletons-screens/|Design and code responsive Skeleton Screens]] |
| =====Accessibility===== | =====Accessibility===== |
| * [[http://www.uiaccess.com/accessucd/|Just Ask: Integrating Accessibility Throughout Design]] | * [[http://www.uiaccess.com/accessucd/|Just Ask: Integrating Accessibility Throughout Design]] |
| =====教學===== | =====教學===== |
| * [[https://refactoringui.com/|Refactoring UI]] | * [[https://refactoringui.com/|Refactoring UI]] |
| * [[https://twitter.com/i/events/994601867987619840|🔥 Design Tips]] | * [[https://refactoringui.com/previews/labels-are-a-last-resort/|Labels are a last resort]] |
| | * [[https://www.invisionapp.com/inside-design/naming-conventions/|Best practices for design system naming conventions]] |
| | ====書籍==== |
| | * [[https://www.designbetter.co/design-systems-handbook|Design Systems Handbook]] |
| =====工具===== | =====工具===== |
| * [[http://designinstruct.com/free-resources/vectors/freebie-vintage-infographic-design-kit/|Vintage Infographic Design Kit]] | * [[http://designinstruct.com/free-resources/vectors/freebie-vintage-infographic-design-kit/|Vintage Infographic Design Kit]] |
| * [[http://www.gomoodboard.com/|Moodboard]] | * [[http://www.gomoodboard.com/|Moodboard]] |
| * [[https://www.milanote.com/|Milanote]] | * [[https://www.milanote.com/|Milanote]] |
| | * [[https://github.com/akiraux/Akira|Akira]] (Linux) |
| ====Spec==== | ====Spec==== |
| * [[https://storybook.js.org|Storybook]] | * [[https://storybook.js.org|Storybook]] |
| * [[https://www.learnstorybook.com|Storybook Tutorials]] | * [[https://storybook.js.org/tutorials/ui-testing-handbook/|UI Testing Handbook]] |
| | * [[https://storybook.js.org/tutorials/visual-testing-handbook/|Visual Testing Handbook]] |
| | * [[https://www.chromatic.com/|Chromatic]] |
| | * [[https://www.ladle.dev/|Ladle]] |
| | * [[https://vitebook.dev/|Vitebook]] |
| * [[https://specfox.com/|Specfox]] | * [[https://specfox.com/|Specfox]] |
| * [[https://frontify.com/styleguide|Frontify]] | * [[https://frontify.com/styleguide|Frontify]] |
| | * [[https://zeroheight.com/|zeroheight]] |
| ====Flow==== | ====Flow==== |
| * [[https://overflow.io/|Overflow]] | * [[https://overflow.io/|Overflow]] |
| ====UI==== | ====UI==== |
| * [[http://www.99lime.com/uikit/|99Lime UIKIT]] | * [[https://tabler.io/|Tabler Admin Template]] (Bootstrap) |
| * [[http://designmodo.github.io/Flat-UI/|Flat UI]] | * [[http://designmodo.github.io/Flat-UI/|Flat UI]] |
| ====Prototype==== | ====Prototype==== |
| * [[http://www.invisionapp.com/|Invision]] | * [[http://www.invisionapp.com/|Invision]] |
| * [[https://www.figma.com/|Figma]] | * [[https://www.figma.com/|Figma]] |
| | * [[https://penpot.app/|Penpot]] |
| ====Interactive==== | ====Interactive==== |
| * [[http://origami.design/|Origami Studio]] | * [[http://origami.design/|Origami Studio]] |
| * [[http://www.framerjs.com/|Framer]] | * [[http://www.framer.com/|Framer]] |
| * [[http://prototyp.in/|Prototyp]] | * [[http://prototyp.in/|Prototyp]] |
| * [[https://www.designcamera.app|Design Camera]] | * [[https://www.designcamera.app|Design Camera]] |
| * [[http://material.cmiscm.com/|Material Interaction]] | * [[http://material.cmiscm.com/|Material Interaction]] |
| * [[http://ixdchecklist.com/|Interactive Design Checklist]] | * [[http://ixdchecklist.com/|Interactive Design Checklist]] |
