Design is problem solving

In a previous essay, I visualized it like this:
By focussing on the thinking part of design, design could move into a broader problem solving space. Hence the statement that design is problem solving. It is. Design solves design problems.

Design is making the world more beautiful

Design is question finding

But design is even more than problem solving and making the world more beautiful.

Most people see design as just the second diamond: problem solving. Most clients approach a designer with a problem definition a.k.a. a design brief. They already know what the problem is and w(previous essay)ant a (team of) designer(s) to solve it for them. If that is actually the right problem, great. Experience tells us that that is not always the case. More often than not, new insights about the problem at hand arise during the solving of the problem. That is why designers often propose to go into the first diamond first to investigate the problem and possibly redefine the problem. This prevents them from designing a brilliant solution for the wrong problem. That can be very expensive. The goal of the first diamond is to make sure we are solving the right problem, find the right question. Most innovations and complex problems benefit hugely from going through the first diamond. In his recent Harvard Business Review article, Art Markman argues that the quality of our problem framing determines the success of your solution.

It's that time of year again – where we consider what the color trends have been for the past couple years, and how those might change going into 2021.

Color scheme for UI design

Complete guide to the free font Libre Franklin. See beautiful examples, recommended pairings, OpenType features, and more.

https://larahogan.me/blog/we-need-to-talk-about-your-q3-roadmap/

The button state communicate its status to the user
Creating correct interactions and styles for your buttons is one of the most important parts of the process. Each state must have clear affordances that distinguish it from other states and the surrounding layout, but should not drastically alter a component or create a lot of visual noise.

Free, high-quality alternatives to: Apercu · Avenir · Circular · DIN · Futura · Gotham · Helvetica · Proxima Nova · Times New Roman

An accessible sortable table is not necessarily the same as a usable sortable table. Outline: Basics Let The User Know This Thing Has Sorted Screen Reader Announcement Sort Arrows Column Background Let The User Know This Thing Sorts SVGs Layout Windows High Contrast Mode Screen Readers Sort Hint aria-describedby…

If you want to make text better stand out against a background image, there’s a little trick: You can use a CSS linear-gradient overlay with a certain opacity on top of the image to improve color contrast.

How to determine the opacity to use for the overlay? The Optimal Overlay Finder helps you find out. You upload an image, enter your text and choose your overlay and text colors, and the tool shows you a preview of what the overlay looks like when applied to your image, as well as the optimal overlay opacity.

https://twitter.com/addyosmani/status/1365735686838493187

• The Main Element
• The Section Element
• The Aside Element
• The Article Element
• The Nav Element
• The Footer Element

HTML5 Doctor has a really handy flowchart to help answer that question:
http://html5doctor.com/downloads/h5d-sectioning-flowchart.png

Instead of using “Disabling” selectors, you should focus on writing “Enabling” selectors.

a:not(:last-child) {
  margin-bottom: 1rem;
}

or

a + a {
  margin-top: 1rem;
}

Learn how to handle text over images in CSS by taking accessibility in mind

Note: The Model, View, Controller pattern, or “MVC”, actually comes in many flavors.

Model—The application.
View—What the consumer (user) sees. Often HTML, JSON, or XML.
Controller—A thin layer connecting the View and the Model.

And that’s it! There’s nothing fancy, but it often requires explanation. The controller, as shown above, should be as thin as possible. The view should only have display logic and the model is ... what, exactly?

2. Tighten Heading Spacing

3. Loosen Non-Word Spacing

4. Use System Fonts for Inputs

Learn what it takes to ensure your buttons or button-styled links have accessible contrast across all states and surfaces, then use the generator to check and adjust your button palette.

How’s it going, compadres? This month’s roundup hand-picked from all across the web includes icons, design assets, illustrations, vector artwork, UI kits, some really cool code snippets, fonts, te

Disney developed 12 Principles of Animation which I find to be so important because of the way they depict realistic movement and emotional engagement.

Feedback

Feedforward

Spatial Awareness

User Focus

Brand Tone of Voice

2 — Text tooltips

https://codepen.io/beforesemicolon/pen/BaKLeRL

6 — Extend the clickable area

The following example simply extends the type circle dot button click area by 2(two) by positioning a pseudo-element on top and centered.

8 — Frosted glass effect

.container {
   background-color: rgba(255, 255, 255, .15);
   backdrop-filter: blur(5px);
}

9 — Image grid with random height (Mansory Layout)

This is the famous Pinterest layout that you can use the old column property to accomplish quite easily.

10 — Math with Calc

Nothing in this world requires no math and the CSS calc function is magical.

I think the folks building Tailwind are talented and nice people. But at a pure technical level, I simply don't like Tailwind. Whoever it was built for, it was not built for me.

• Reason 1: Tailwind promotes ugly-ass HTML.
• Reason 2: @apply is fundamentally incompatible and non-standard (and largely unnecessary).
• Reason 3: Tailwind's focus on design systems and tokens could mostly be replaced by CSS Custom Properties (aka variables)—which IS a standard.
• Reason 4: Tailwind forgets that web components exist.
• Reason 5: Finally, Tailwind encourages div/span-tag soup.

...using <div> and <span> tags everywhere in your markup is an anti-pattern. We live in a world where custom elements (aka <whatever-you-can-dream-of>) are fully supported and enabled by modern browsers.

Instead of serving dozens of icons, all you need is just five icons and one JSON file.

In your HTML, for the browser:

<link rel="icon" href="/favicon.ico"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

And in your web app manifest:

// manifest.webmanifest
{
  "icons": [
    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}