A repo full of useful links for the Interface Prototyping seminar @ Muthesius Academy of Fine Arts and Design
- Grundlagen / Basics
1.1. Gestaltgesetze / Gestalt laws
1.2. Typografie / Typography
1.3. Schriften / Fonts
1.4. Farbe / Color theory - Prototyping
2.1. Prototyping im Design-Prozess
2.2. Tools
2.3. Icons
2.4. HTML-Prototyping - Animation im User Interface / UI Animation
Untersuchungen zur Lehre von der Gestalt. Max Wertheimer, 1923. (PDF)
http://gestalttheory.net/download/Wertheimer1923_Lehre_von_der_Gestalt.pdf
Typefacts – Wissen über Schrift und Typografie in verständlicher Sprache und anschaulicher Beschreibung.
https://typefacts.com/
Typografie.info – Die meistbesuchte deutsch-sprachige Typografie-Website.
https://www.typografie.info/
Fonts In Use – a public archive of typography indexed by typeface, format, industry, and period.
https://fontsinuse.com/
Typewolf – helps designers choose the perfect font combination for their next design project—features web fonts in the wild, font recommendations and learning resources.
https://www.typewolf.com/
Typography Resources – A comprehensive collection of the best typography resources from around the web (2019)
https://www.typewolf.com/resources
Identifont – the largest independent directory of digital fonts on the Internet.
http://www.identifont.com/
Jason Santa Maria - On Web Typography [Video]
https://vimeo.com/34178417
The New Web Typography, Robin Rendle
https://robinrendle.com/essays/new-web-typography/
Getting to the bottom of line height in Figma, Marcin Wichary
https://www.figma.com/blog/line-height-changes/
How to start with variable fonts on the web, Oliver Schöndorfer
https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html
Variable Fonts (beta) – A simple resource for finding and trying variable fonts
https://v-fonts.com/
Axis-Praxis – a website for playing with OpenType Variable Fonts
https://www.axis-praxis.org/
Utopia – Fluid Typography
https://utopia.fyi
Modular Scale
https://www.modularscale.com
The Elements of Typographic Style, Robert Bringhurst [Book]
https://www.goodreads.com/book/show/44735.The_Elements_of_Typographic_Style
Web Typography, Richard Rutter [Book]
http://www.book.webtypography.net/
On Web Typography, Jason Santa Maria [Book]
https://www.goodreads.com/book/show/13608106-on-web-typography
Flexible Typesetting, Tim Brown [Book]
https://abookapart.com/products/flexible-typesetting
Google Fonts
https://fonts.google.com/
MyFonts
https://www.myfonts.com/
FontShop
https://www.fontshop.com/
Linotype
https://www.linotype.com/
Adobe Fonts
https://fonts.adobe.com/
Fontstand – try fonts for free or rent them by the month for desktop and web use for just a fraction of the regular price.
https://fontstand.com/
24 Independent Type Foundries That Monotype Doesn’t Own
https://www.typewolf.com/blog/independent-type-foundries
Typemates
https://www.typemates.com/
Grilli Type
https://www.grillitype.com/
Hoefler & Co
https://www.typography.com/
Frere-Jones Type
https://frerejones.com/
Commercial Type
https://commercialtype.com/
Grundlagen der Farbenlehre
https://www.itp.uni-hannover.de/fileadmin/arbeitsgruppen/zawischa/static_html/farbeinf.html
A Nerd’s Guide to Color on the Web
https://css-tricks.com/nerds-guide-color-web/
Perceptually uniform color spaces
https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/index.html
Hex Color – The Code Side Of Color
https://www.smashingmagazine.com/2012/10/the-code-side-of-color/
Nippon Colors, an interactive list of the traditional colors of Japan
http://nipponcolors.com
The Traditional Colors of Japan
https://www.tofugu.com/japan/color-in-japan/
Cloudflare Design Color Tool incl. accessible color combinations
https://cloudflare.design/color/
Inclusive Color Resources for your #A11Y Color Needs
https://medium.com/@raquel/inclusive-color-resources-for-your-a11y-color-needs-cf3448c63335
Palx – Automatic UI Color Palette Generator
https://palx.jxnblk.com/
Adobe Color
https://color.adobe.com/create
colourco.de – Pick colours based on hsl. Scheme-mode with monochromatic, analogic, complement, triad and quad colours.
https://colourco.de/
Perbang.dk RGB Chart & Multi Tool
http://www.perbang.dk/rgb/
COLOURlovers
https://www.colourlovers.com/palettes
Wikipedia: Color Blindness
https://en.wikipedia.org/wiki/Color_blindness
Stark – a plugin to help you design and build products that are accessible, ethical, and inclusive.
https://www.getstark.co/
chroma.js – JavaScript library for all kinds of color conversions and color scales.
https://vis4.net/chromajs
OKLCH Color Picker
https://oklch.com/
OKLCH in CSS: why we moved from RGB and HSL
https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
Prototyping for Designers, by Kathryn McElroy
http://shop.oreilly.com/product/0636920049487.do
Six Steps to Superior Product Prototyping: Lessons from an Apple and Oculus Engineer
https://firstround.com/review/six-steps-to-superior-product-prototyping-lessons-from-an-apple-and-oculus-engineer/
[Video] An Event Apart: Prototyping The Scientific Method of Business – Daniel Burka
https://aneventapart.com/news/post/prototyping-the-scientific-method-of-business-by-daniel-burka-aea-video
[Video] Getting Effective Session Outcomes, Tom Chi https://www.youtube.com/watch?v=z_elgzL9sns&feature=youtu.be
Why You Should Start Prototyping—Right Now
https://www.ideo.com/blog/why-you-should-start-prototyping-right-now
Prototyping.news
https://prototyping.news/
List: Interface Prototyping Tools
https://github.com/matthiasott/prototyping-tools/
Adobe XD CC
http://xd.adobe.com/
Axure RP
http://www.axure.com/
Codepen
https://codepen.io/
Craft Prototype for Sketch
https://www.invisionapp.com/craft
Figma
https://www.figma.com/
Framer X
https://framer.com/
Marvel
https://marvelapp.com/
POP - Prototyping on Paper
https://marvelapp.com/pop/
ProtoPie
https://www.protopie.io/
The Noun Project – Over 2 Million curated icons, created by a global community
https://thenounproject.com/
iconmonstr
https://iconmonstr.com/
Icons bei Github
https://github.com/search?q=icons
ICONSVG – Simple tool to find, customize and generate common SVG icons for your project
https://iconsvg.xyz/
Feather – Simply beautiful open source icons
https://feathericons.com/
FontAwesome
https://fontawesome.com/
Google Material Design Icons
https://github.com/google/material-design-icons
Weather Icons
https://erikflowers.github.io/weather-icons/
Visual Studio Code
https://code.visualstudio.com/
CodePen
https://codepen.io/
Mozilla Developer Network Web Docs (MDN)
https://developer.mozilla.org/en-US/
CSS-Tricks
https://css-tricks.com/
A Complete Guide to CSS Grid
https://css-tricks.com/snippets/css/complete-guide-grid/
A Complete Guide to Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox Froggy
https://flexboxfroggy.com/
CSS Zen Garden
http://www.csszengarden.com
Codecademy
https://www.codecademy.com/
Scaling CSS Layout Beyond Pixels, talk by Stephanie Eckles
https://www.youtube.com/watch?v=8slZJrTK3nE
Creative CSS Layout, talk by Michelle Barker
https://www.youtube.com/watch?v=tueTFd2TQUA
Disney’s motion principles in designing interface animations
https://uxplanet.org/disneys-motion-principles-in-designing-interface-animations-9ac7707a2b43
Disney’s 12 Principles Of Animation, In A Cartoon
https://www.fastcompany.com/3030106/disneys-12-principles-of-animation-in-a-cartoon
The 12 Principles of Animation as Illustrated through Disney and Disney Pixar Films
https://ohmy.disney.com/movies/2016/07/20/twelve-principles-animation-disney/
UI Animation Resources, by Design+Code.
https://designcode.io/ui-design-handbook-ui-animation-resources
Dribbble Tag UI Animation
https://dribbble.com/tags/ui_animation
Awwwards Animation Collection
https://www.awwwards.com/awwwards/collections/animation/
Awesome List Motion UI Design
https://project-awesome.org/fliptheweb/motion-ui-design
UI Animation, Motion Design & Micro Interaction Basics [Video]
https://www.youtube.com/watch?v=-L_MwLVYWDs
Designing Meaningful Animation - Val Head - Beyond Tellerrand 2016 [Video]
https://vimeo.com/166144917
Understanding Motion – Material Design
https://m2.material.io/design/motion/understanding-motion.html
Jedi Principles of UI Animation
https://medium.com/@adaptivepath/jedi-principles-of-ui-animation-2b88423b1dac
CSS Animation Weekly Newsletter
http://weekly.cssanimation.rocks
Inside Framer's Magic Motion
https://www.nan.fyi/magic-motion
Including Animation In Your Design System
https://www.smashingmagazine.com/2019/02/animation-design-system/