A rather geeky/technical weblog, est. 2001, by Bramus
Yesterday evening I was working on a documentation page. The page layout is quite classic, as it consists of a content pane on the left and a sidebar navigation on the right. Looking for a way to make the page less dull I decided to add a few small things to it: Smooth Scrolling when …
Continue reading “Smooth Scrolling Sticky ScrollSpy Navigation”
Visual hierarchy is the order in which the user process information by importance. In interface design, like in any other form of design, this concept is necessary to be functional at sight. With the correct use of hierarchy, the mind can group and prioritize elements to give them a specific order, which facilitates the understanding …
Continue reading “Fundamentals of Hierarchy in Interface Design”
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 …
Continue reading “How to Design Delightful Dark Mode Themes”
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 →
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.
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. …
Continue reading “Building Better Interfaces, a talk by Hakim El Hattab”
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 …
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; …
Continue reading “pagemap, a mini map navigation for web pages”
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 …
Editor.js is a so called “block style editor” like the one Medium (and recently WordPress) sport. The Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor’s Core. The output is not HTML but …
Continue reading “Editor.js – Next generation block styled editor”