When done well, dark themes have many benefits. They reduce eyestrain. They are easier to read in low light. And, depending on the screen, they can greatly reduce battery consumption. However, it is difficult to create a delightful dark theme. We cannot simply reuse our colors or invert our shades. If we do, we will […]
Tag Archives: ui
Blocks UI – A JSX-based page builder
A JSX-based page builder for creating beautiful websites without writing code. Blocks comes with built-in components that are carefully designed and implemented with Theme UI. Blocks UI →
“Hold to confirm” Button
Ooh, I like the organic feel on this “Hold to Confirm” button: Nice combination of CSS Custom Properties, CSS Transitions, and SVG Animations using stroke-dashoffset/stroke-dasharray.
Building Better Interfaces, a talk by Hakim El Hattab
At CSS Day 2019, I was fortunate to see Hakim El Hattab bring his talk Building Better Interfaces. A recording of his talk – and all other talks – are available on YouTube: This session is a deep-dive into the areas of interface design that Hakim has specialized in for over a decade—interactivity and animation. […]
Button Placement in Forms
Button placement on forms is often ignored or prioritised based on what looks good. But button placement can make or break a form, and a form can make or break a user’s experience. That’s why it’s essential to get it right. Here I’ll explain where to put buttons across a range of different forms based […]
pagemap, a mini map navigation for web pages
Many text editors nowadays sport a minimap on the right hand side of the screen. Pagemap is like that, but for webpages: To use it, position a canvas element fixed on your screen, and tell pagemap which elements to include in the map: <canvas id="map"></canvas> #map { position: fixed; top: 0; right: 0; width: 200px; […]
Steve Schoger | Refactoring UI — Tips and tricks to make a site visually more interesting
As seen at the most recent CSS Day. I’m quite sure this will help many developers to make their POCs/experiments visually more interesting: Sometimes when we look at a polished interface we can acknowledge that it looks good but it’s hard to articulate why it looks good. In this practical session, Steve will be explaining […]
Can’t Unsee – A game where your attention to details earns you a lot of coins.
Can’t Unsee is a fun game that shows you two designs next to each other. Your task: pick “the most correct one” from the two. Can’t Unsee →
Responsive UIs in React Native
On the web it is – by now – obvious that you make your website responsive (*). Using a listener listening to the change event of the Dimensions API, it’s also possible to implement this kind of behaviour in React Native. import {Component} from "react"; import {Dimensions} from "react-native"; export default class LogDimensionChanges extends Component […]
React Native Parallax Scroll Header with Tabs
Nice writeup on how to create a typical screen where there’s a header image that fades out and disappears as you start scrolling. Essentially, everything but the header is put into a scrollview. In order to keep elements ‘fixed’ (i.e. the tab bar), I use the transform property with a translateY that is set to […]