An unofficial bonus chapter for the iOS Human Interface Guidelines: Learn how to structure iPhone apps with drill-downs, modals, pyramids, sequences, and more.

In a dark room, lighting a single candle may feel like a drastic change. But in a room already lit by ten candles, adding one more might not feel as significant. Or, while the intensity of sound is determined by the amplitude of the sound wave, doubling the amplitude does not make it feel twice as loud to humans.

This idea can apply to graphic design, for example, typographic scale or making contrast of sizing between visual elements in general.

Compare two type scale examples below. The left increases the font size by 6 points each step, while the right increases the size by the ratio of 1.2x (each step is 20% larger than the previous). You can see the change between each step appear to decrease as the size increases in the left example, while the change feel more consistent in the right example.

$fontsize = b \cdot r^{(step - 1)}$

$\begin{aligned} step = \log_{1.2} \frac{fontsize}{b} + 1\end{aligned}$

Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue) - GitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)

How to use the Content Brick Method to create a website structure in an easier and faster way? Why is this Method better for creating visual sitemaps than using mind map tools?

Even before Octopus, we knew from years of developing websites that the best way to prototype a website structure is using stickers or some other kind of paper stickers.

Lifehack

You don’t need to spend too much time thinking which wireframe goes to which content block, we’ve taken care of that for you. There aren’t too many (just 21), but they’re the most widely used. All you need to do is pick the right one for you.

A fun collection of free SVG generators for gradients, patterns, shapes, textures & cool backgrounds. Plus, some more color tools for web designers.

https://fffuel.co/hhhue/

Fontimize: Subset Fonts to Exactly and Only Your Website's Used Characters
A Python library to subset fonts, which cuts ~95% from the size of your site’s font files & downloads/bandwidth. To use: from fontimize import optimise_fonts_for_files and call it with a list of HTML files. See the the full API docs for more info.
Find Fontimize on Github and PyPi.

https://github.com/vintagedave/Fontimize/issues/1

I randomly came across your blog post on this library and thought I'd take a look at the code. I noticed you have an accidental O(n^2) string concatenation. In a few places in your code, you're appending lists of strings. This is a problem as it creates new intermediate strings in each iteration. Here is one such example:

Less typing is always better
Last but not least, my absolute favourite <input> attribute is the autocomplete attribute.

For controlling the available virtual keyboards use inputmode. To control whether an <input> can be updated, but also still read and submitted, choose readonly over disabled. You can trigger the camera on mobile devices using capture. Use the spellcheck attribtue to control whether spellchecking is activated on an input, and remember to set it to "false" on sensitive inputs. Save users time by using autocapitalize to control the capitalisation of text in an input. And finally, use autocomplete to help the browser fill in the contents of an input and save your users typing.

This template is opinionated and intended as a starting point for those who want to define how accessibility is dealt with in their company. It does not matter whether your title is developer, designer, project manager or something else.

The title attribute is not particularly accessible.

The <dl>, or description list, element is underrated.

It's used to represent a list of name–value pairs. This is a common UI pattern that, at the same time, is incredibly versatile. For instance, you've probably seen these layouts out in the wild…

<dl>
    <dt>Title</dt>
    <dd>Designing with Web Standards</dd>
    <dt>Publisher</dt>
    <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
</dl>

CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in my own learning journey.

When users increase their text size, they're not trying to make the space around text bigger.

This article is all about experimenting with modern CSS features. We will combine things like CSS masks, CSS variables, trigonometric functions, @property, and more to create a neat hover effect that would have been extremely difficult to do even a few years ago without the latest and greatest that CSS has to offer.

Custom Properties have the potential to change how we write and think about CSS.

In most cases, I'd now consider it code smell if a media query or CSS selector swaps one variable for another. Rather than swapping variables it's better to define one variable, set its initial value and change it with a selector or media query.

Responsive designs being created today have to serve more users on more devices and with more varied abilities and preferences than ever before. And size and spacing of elements can quite literally make or break your layout. In this new world, strict pixel values are so Web 2.0. Let’s review modern CSS techniques for building future-forward flexibility into our layouts and components.

Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.

// Font-sizes Major Second, base 16px
$font-size-xsmall: 13px;
$font-size-small: 14px;
$font-size-medium: 16px;
$font-size-medlarge: 18px;
$font-size-large: 20px;
$font-size-xlarge: 23px;
$font-size-xxlarge: 26px;
$font-size-xxxlarge: 32px;
$font-size-giant: 36px;
$font-size-xgiant: 41px;
$font-size-huge: 52px;

In today's GUI Challenge, @AdamArgyleInk builds a wide gamut color palette with okLCH, checking accessible color pairs along the way, inspecting color with devtools, and showing many other neat tricks for leveraging the features of this new web color space.

Resources:
Try a demo → https://goo.gle/3MAx4NC
Get the source → https://goo.gle/3n4Sfcg

Accessibility: 60% difference in lightness

Color & Contrast is a comprehensive guide to color for user interface designers.

A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.

Nate Baldwin

There is a tremendous amount of spit and polish that goes into making a major website highly usable. A developer, asked how hard something will be to clone, simply does not think about the polish, because the polish is incidental to the implementation.

Correction in the thumbnail: This video was shot on April 2023

• It's not HTML5 or CSS3 - it's just 'html' and 'css'!
• https://developer.mozilla.org/en-US/docs/Web/HTML - Good documentation but not the spec!
• https://html.spec.whatwg.org/
• Content model - What is legal to nest
• Transparent: a > h1 is ok, but p > a > h1 not ok!
• https://caninclude.glitch.me/
• preload preconnect prefetch prerender for links
• Get your head straight: https://www.youtube.com/watch?v=UW1PEMBdX5E
• <header><main><footer> are important!
• Subheading <hgroup><h1><p> - Not <hgroup><h1><h2>
• Upgrade Your HTML (4 books)
• <menu> - like <ul>
• script - defer async type="module" nomodule
• <template id="mytable"> - Don't have to put html in javascript
• JavaScript is expensive, HTML is almost free!