Skip to main content
  • Matthias Ott
    User Experience Designer
  • About
  • Workshops
  • Notes
  • Articles
  • Links

Links

  • #a11y (8)
  • #accessibility (3)
  • #agile (1)
  • #algorithms (1)
  • #animation (3)
  • #apps (2)
  • #architecture (1)
  • #articles (1)
  • #automation (1)
  • #basics (2)
  • #books (3)
  • #branding (1)
  • #browsers (1)
  • #build pipeline (1)
  • #business (2)
  • #chrome (1)
  • #code (6)
  • #color (2)
  • #component libraries (1)
  • #components (3)
  • #compression (1)
  • #craft (1)
  • #css (14)
  • #css grid (1)
  • #culture (3)
  • #dependencies (1)
  • #design (27)
  • #design thinking (2)
  • #design-systems (6)
  • #development (6)
  • #devices (1)
  • #education (1)
  • #engine (1)
  • #enhancement (1)
  • #flexbox (2)
  • #font (1)
  • #fonts (1)
  • #foundations (1)
  • #freelancing (1)
  • #game (1)
  • #git (1)
  • #github (1)
  • #graphics (1)
  • #grid (2)
  • #grunt (1)
  • #handbooks (1)
  • #head (1)
  • #history (1)
  • #html (4)
  • #hypertext (1)
  • #ia (1)
  • #icons (1)
  • #image (4)
  • #image optimization (1)
  • #inclusive design (1)
  • #indieweb (2)
  • #information (2)
  • #iterative (1)
  • #javascript (4)
  • #js (1)
  • #language (1)
  • #layout (6)
  • #leadership (2)
  • #learning (3)
  • #machine learning (1)
  • #media (1)
  • #media- (1)
  • #meta (1)
  • #modular (1)
  • #navigation (1)
  • #optimization (1)
  • #organizations (1)
  • #pattern libraries (6)
  • #performance (6)
  • #perspective (1)
  • #physics (1)
  • #picture (1)
  • #polyfills (1)
  • #postels-law (1)
  • #principles (4)
  • #process (6)
  • #progressive (2)
  • #progressive-enhancement (1)
  • #prototyping (4)
  • #public speaking (1)
  • #pwa (1)
  • #reference (2)
  • #resource (3)
  • #responsibility (1)
  • #responsive (4)
  • #robots (1)
  • #rss (1)
  • #rwd (4)
  • #sass (1)
  • #science (1)
  • #semantics (1)
  • #sketching (1)
  • #social (1)
  • #society (1)
  • #space (1)

Entries tagged with #design .

↳ Show all entries

The Elements of UI Engineering

https://overreacted.io/the-elements-of-ui-engineering/

A brilliant post by Dan Abramov on common UI and design / engineering problems and how trying to solve them is often a greater lesson than only learning about a new technology. “Learning comes from exploring the problem space and trying different possible tradeoffs.”

  • #learning
  • #ui
  • #design
  • #ui engineering

The business value of design

https://www.mckinsey.com/business-functions/mckinsey-design/our-insights/the-business-value-of-design

How do the best design performers increase their revenues and shareholder returns at nearly twice the rate of their industry counterparts? The McKinsey Design Index (MDI) highlights four key areas of action companies must take to join the top quartile of design performers. What they found and point out in their report: There is a strong correlation between high MDI scores and superior business performance.

  • #design
  • #business

High Resolution: Interview with Tom Kelley

https://www.highresolution.design/16-tom-kelley-ideo/

A great interview with IDEO's Tom Kelley on design, design thinking, and what it takes to build your creative confidence.

  • #design
  • #design thinking

CREATIVE LEADERSHIP today

http://creativeleadership.com/

A blog on creative leadership by John Maeda from 2009 to mid-2015.

  • #design
  • #leadership

Working with Charles and Ray Eames

http://streetfurniture.com/au/working-charles-ray-eames/

Australian architect Darrel Conybeare joined the Eames office in Venice, California, in 1967, as a young graduate of the Architecture and Civic Design Masters program at the University of Pennsylvania. The next three years were beyond his greatest expectations …

“I learned [about] the importance of building prototypes at both small scale and full size for all design outputs, products and graphic elements; and, ultimately, that there is no substitute for simple hard work in tackling any design challenge.”

  • #design
  • #prototyping
  • #process

Device Agnostic

https://www.trentwalton.com/2014/03/10/device-agnostic/

A wonderful piece by Trent Walton about why we should build websites that are built to face the reality of the Web's inherent variability.

  • #web
  • #design
  • #foundations
  • #principles
  • #responsive

In Defense of Design Thinking, Which Is Terrible

https://www.subtraction.com/2018/04/02/in-defense-of-design-thinking-which-is-terrible/

“If you have an idea—a force of nature—like technology, it becomes most powerful when it’s democratized, when it gets out there into the world and in the hands of millions of people.

I believe this is true of design, too.”
This is a must-read by @khoi Vinh.

  • #design
  • #design thinking

Running in Circles – Why Agile Isn’t Working and What We Do Differently

https://m.signalvnoise.com/running-in-circles-aae73d79ce19

Ryan Singer explains how, at Basecamp, they use the so called uphill phase to learn – through prototypes – what’s hard and what’s possible in a project.

  • #process
  • #design
  • #agile
  • #iterative
  • #prototyping

Design Principles

https://principles.design/

An open source collection of design principles and methods managed by @benbrignell

  • #design
  • #principles

Matthew Butterick’s Practical Typography – A web-based book

http://practicaltypography.com/

“Ty­pog­ra­phy is the vi­sual com­po­nent of the writ­ten word. And be­ing a pub­lisher of the writ­ten word nec­es­sar­ily means be­ing a ty­pog­rapher. This book will make you a bet­ter typographer.”

  • #typography
  • #books
  • #design

Design Principles, collected by Jeremy Keith (@adactio)

https://principles.adactio.com/

A huge collection of design principles from various disciplines. 

  • #design
  • #principles
  • #ux
  • #ui
  • #user experience
  • #theory

Space in Design Systems, by @nathanacurtis

https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

From Basics to Expanded Concepts to Apply Space with Intent

  • #design
  • #design-systems
  • #systems
  • #space
  • #pattern libraries

Understanding Flexbox: Everything you need to know, by @OhansEmmanuel

https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.jcypy2fbj

A concise and complete introduction to CSS Flexbox.

  • #css
  • #layout
  • #flexbox
  • #development
  • #design

Get the Balance Right: Responsive Display Text, by @clagnut ◆ 24 ways

https://24ways.org/2016/responsive-display-text/

Richard Rutter (Clearleft) shows how to use vmin and a hybrid method of sizing text using CSS calc() to achieve balanced font-sizes for different viewports.

  • #typography
  • #responsive
  • #design
  • #rwd
  • #css
  • #code

Designing for the Web, by Mark Boulton

http://designingfortheweb.co.uk/index.php

Modern web design is a discipline that spans a huge range of skills. In his book, Mark Boulton masterfully guides you through things like process and workflow, research, typography, colour, layout, and much more.

  • #web
  • #design
  • #process
  • #basics
  • #books
  • #typography
  • #layout
  • #color

Fractal – build and document web component libraries & styleguides

http://fractal.build/

Fractal by @allmarkedup, frontend dev @clearleft, lets you build and document web component libraries and styleguides, and then integrate them into your projects. It is flexible, data-driven, and can be seamlessly integrated into your site.

  • #styleguides
  • #design
  • #design-systems
  • #components
  • #component libraries
  • #development
  • #pattern libraries

The Web’s Grain – A view on designing for the web

http://www.frankchimero.com/writing/the-webs-grain/

One of the best articles on designing for the web, by @frank_chimero. As wonderful as important. Required reading.

  • #web
  • #design
  • #culture
  • #craft
  • #perspective

Making And Maintaining Atomic Design Systems With Pattern Lab 2 By

https://www.smashingmagazine.com/2016/07/building-maintaining-atomic-design-systems-pattern-lab/

Pattern Lab 2 is an open-source suite of tools to help you and your team create and maintain thoughtful UI design systems. At its core, it’s a static site generator that stitches together patterns and allows you to design with dynamic data.

  • #styleguides
  • #design
  • #design-systems
  • #ui
  • #pattern libraries
  • #tools
  • #static generators

Astrum – A lightweight pattern library for any web project

http://astrum.nodividestudio.com/

Astrum is a lightweight pattern library designed to be included with any web project. It's non-opinionated and doesn't expect you to write your markup or code in any particular way.

  • #design
  • #pattern libraries
  • #modular
  • #styleguides
  • #branding

Just turned 6: Responsive Web Design, by @beep

http://alistapart.com/article/responsive-web-design

“Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”

  • #responsive
  • #design
  • #rwd
  • #web
  • #layout

The New Web Typography

https://robinrendle.com/essays/new-web-typography/

A wonderful piece by @robinrendle about the aesthetics, the quirks, the flexibility, and the fragility of web typography.

  • #web
  • #design
  • #typography
  • #culture

Design systems and Postel’s law

http://markboulton.co.uk/journal/design-systems-and-postels-law

Postel’s law – “Be conservative in what you do, be liberal in what you accept from others” – applied to design systems and their origination process. What a wonderful thought by @markboulton!

  • #design
  • #design-systems
  • #postels-law
  • #process
  • #leadership

Creating A Living Style Guide: A Case Study

https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/

One of the most elaborate case studies on living style guides I've read so far. By @StevenKLambert

  • #design
  • #styleguides
  • #development
  • #process
  • #design-systems

Color Safe

http://colorsafe.co/

Empowering designers with beautiful and accessible color palettes based onWCAG Guidelines of text and background contrast ratios.

  • #design
  • #color
  • #a11y
  • #accessibility
  • #tools

Designing for Performance – Weighing Aesthetics and Speed

http://designingforperformance.com/

The (free) online version of @lara_hogan's great book on web performance.

  • #development
  • #performance
  • #design
  • #books

Style Guide Resources

http://styleguides.io/

This site lists lots of useful resources to help you learn about and create your own Front-End Style Guides and Pattern Libraries.Contributions by @maban, @bradfrost and many, many more.

  • #design
  • #styleguides

Oil Change & Pizza

http://danielmall.com/articles/oil-change-pizza/

Great advice from Daniel Mall for agencies (and freelancers alike): What makes a great agency are the things they don’t do.

  • #design
  • #business
  • #freelancing
  • About
  • Workshops
  • Notes
  • Articles
  • Links
Subscribe

You can subscribe to the RSS feeds for all posts or to individual feeds for articles, notes, and links.

Design and code © 2007–2023 Matthias Ott  •  Made with HTML, CSS, enhanced with JavaScript, powered by Craft CMS. .
Webmention endpoint   Privacy Policy   Site Notice / Impressum