/links

A repo full of useful links for the Interface Prototyping seminar @ Muthesius University of Fine Arts and Design, Kiel

MIT LicenseMIT

Interface Prototyping Links

A repo full of useful links for the Interface Prototyping seminar @ Muthesius Academy of Fine Arts and Design

Inhalt / Contents

  1. Grundlagen / Basics
    1.1. Gestaltgesetze / Gestalt laws
    1.2. Typografie / Typography
    1.3. Schriften / Fonts
    1.4. Farbe / Color theory
  2. Prototyping
    2.1. Prototyping im Design-Prozess
    2.2. Tools
    2.3. Icons
    2.4. HTML-Prototyping
  3. Animation im User Interface / UI Animation

1. Grundlagen / Basics

1.1. Gestaltgesetze / Gestalt laws

Untersuchungen zur Lehre von der Gestalt. Max Wertheimer, 1923. (PDF)
http://gestalttheory.net/download/Wertheimer1923_Lehre_von_der_Gestalt.pdf

1.2. Typografie / Typography

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

1.3. Schriften / Fonts

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/

1.4. Farbe / Color theory

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

2. Prototyping

2.1. Prototyping im Design-Prozess

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/

2.2. Tools

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/

2.3. Icons

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/

2.4. HTML-Prototyping

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

3. Animation im User Interface / UI Animation

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/