Note: This section of the site is under heavy construction, tread carefully.

Bookmarks tagged with “userinterface”

378 bookmarks by garrettc



storybook-django

Develop Django UI components in isolation, with Storybook

Bookmarked on #



Defensive CSS

Practical CSS and design tips that helps in building future-proof user interfaces.

Bookmarked on #



Hyperscript Widgets

"The goal of this repository is to assemble a rich library of pre-tested UI-controls that work nicely with htmx and hyperscript."

Bookmarked on #


HUDS+GUIS

"HUDS+GUIS was created as an inspiration and resource site for interactive designers. It's a place where you can find the most creative and interesting examples of UI design. Sources can come from anywhere ie. films, games, concept design and real world developments. It focuses on the ways in which people interact with technology, particularly the way something functions, the way it looks, the way it moves and even the way it sounds."

Bookmarked on #


Firefox UI UX history

The evolution of the Firefox UI from Phoenix to now.

Bookmarked on #


Responsive table with Django and htmx

Building tables with search, filtering, and pagination.

Bookmarked on #


SVG Loaders

Loading icons and small animations built with pure SVG.

Bookmarked on #



Adding Placeholder Text to Wagtail Forms - CodeRed

"Wagtail forms let the editor customize field types and titles, but not placeholder text. While you could write a custom template and hard-code the placeholder text, this quickly becomes a burden whenever the forms need changed. Here’s how to extend the Wagtail form field to enable editors to customize placeholder text."

Bookmarked on #


(mac)OStalgia

“(mac)OStalgia is exploring my 2021 work-from-home routine from a nostalgic perspective. How would have the same workflow looked like with the tools of today and the limitations of yesterday. Unreliable internet, little disk storage, macOS 9 and much more”

Bookmarked on #


AirPods, and the cognitive ergonomics of tools for thought

"I’ve been trying out the dynamic head tracking feature of the new AirPods 3, and it makes me feel like the cognitive ergonomics of computer interfaces is - still - way too disconnected from everyday design. The head tracking technology is intriguing."

Bookmarked on #


Splide - The lightweight, flexible and accessible slider/carousel

"Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors."

Bookmarked on #


Designing Beautiful Shadows in CSS

"In my humble opinion, the best websites and web applications have a tangible “real” quality to them. There are lots of factors involved to achieve this quality, but shadows are a critical ingredient. When I look around the web, though, it's clear that most shadows aren't as rich as they could be. The web is covered in fuzzy grey boxes that don't really look much like shadows. In this tutorial, we'll learn how to transform typical box-shadows into beautiful, life-like ones."

Bookmarked on #




CSS accent-color

"CSS accent-color from the CSS UI specification is here to tint elements with one line of CSS, saving you from customization efforts by providing a way to bring your brand into elements."

Bookmarked on #


Firefox-UI-Fix

Addresses issues with the new Firefox UI

Bookmarked on #


The Expanse UI Design

Here’s a look at the various FUI designs from the sci-fi series The Expanse

Bookmarked on #


Web Interface Handbook

"This is a book about the fundamentals of creating a good web interface. You will find out how to make effective forms, typography, grids, and many other components of web design."

Bookmarked on #


Swipey image grids.

SVG isn't just useful for illustrative animation. It's hella handy for UI too.

Bookmarked on #


Getting Deep into Shadows

"Let’s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects. In web design, using light and shadow can add physical realism and can be used to make rich, tactile interfaces."

Bookmarked on #


Applying white space in UI design

"Good UI design is the thoughtful application of white space at all scales of an interface, from component to page, micro to macro. When white space is used well, the result is an interface that is harmonious, legible, and, above all, effective and easy to use."

Bookmarked on #


Game UI Database

A comprehensive screen reference Tool for game interface designers. Explore over 320 games and 11,000 individual images, and filter by screen type, material, layout, texture, shapes, patterns, genre and more!

Bookmarked on #


15+ Best Link Styles CSS (Anchor Text CSS)

"We have compiled a list of amazing Link styles CSS that is compatible with modern sites and devices and can be used for various designs, fliers and sites."

Bookmarked on #


Keyframes.app | CSS Toolbox

Keyframes gives you a visual timeline to help you create, view, and run animations without having to go back and forth between your browser and editor.

Bookmarked on #


How fast should your UI animations be?

"Good animation timing is more of an art than a science. Thinking in terms of a range instead of one set duration value will serve you much better in your design work."

Bookmarked on #


Enhancing User Experience With CSS Animations

"How to build CSS animations and transitions in your interfaces that are inclusive, accesible and will enhance your users' experience."

Bookmarked on #


The UX of LEGO Interface Panels

Piloting an ocean exploration ship or Martian research shuttle is serious business. Let’s hope the control panel is up to scratch. Two studs wide and angled at 45°, the ubiquitous “2x2 decorated slope” is a LEGO minifigure’s interface to the world. These iconic, low-resolution designs are the perfect tool to learn the basics of physical interface design. Armed with 52 different bricks, let’s see what they can teach us about the design, layout and organisation of complex interfaces.

Bookmarked on #


7 Gestalt principles of visual perception: cognitive psychology for UX

"The human brain is wired to see structure, logic, and patterns. It helps us make sense of the world. In the 1920s a group of German psychologists developed theories around how people perceive the world around them, called Gestalt principles."

Bookmarked on #


UI-Patterns.com

"User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer."

Bookmarked on #


Evolution of the Scrollbar

Some iconic scrollbars recreated as faithfully as possible.

Bookmarked on #


Create a semantic “breakout” button to make an entire element clickable

"…using the magic of CSS to give us the desired fully clickable element effect, while also using proper semantic elements and JavaScript and as an enhancement."

Bookmarked on #


A complete guide to iconography

A deep-dive guide on how to create, organize, name, and use icons within a design system

Bookmarked on #


Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!

"Let’s have a look at how we can create a row of links that sorta run into each other with a chevron-like shape and notch on each block like you might see in a hierarchical breadcrumb navigation. You’ve probably seen this pattern a lot. It comes up often in things like multi-step forms and site breadcrumbs. For our purposes we’re going to call these “ribbons" so we know what we’re referring to as we go."

Bookmarked on #


Fading out siblings on hover in CSS

This is a nifty technique using :hover and pointer-events to fade out sibling elements of a hovered element.

Bookmarked on #



Soviet Control Rooms

A collection of Soviet control rooms. Power stations, control towers etc.

Bookmarked on #


The Environmentally-Lit Interface: A Quantum Leap Forward

"An environmentally-lit interface takes information from the environment around the device and uses it to render physically-accurate things on the screen. It appears as if the lights around you are shining on the things on the screen. If the lighting in your room is bright, then the things on your screen are brightly lit."

Bookmarked on #


Accessible SVG Icons with Inline Sprites

"At a certain stage in a project, someone always says: ‘We need icons!' We need to ensure that people who can’t see or recognize these icons can understand their purpose."

Bookmarked on #


Clipping in CSS and SVG — The clip-path Property and <clipPath> Element

"CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering everything you need to know to get started."

Bookmarked on #



Animated Grid Previews

A template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an "explore" link is clicked.

Bookmarked on #




Creating sliding effects using sticky positioning

"Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way!"

Bookmarked on #


HomeKit Weekly: Nanoleaf Remote is the most capable (and colorful) controller

HomeKit Weekly is a series focused on smart home accessories, automation tips and tricks, and everything to do with Apple’s smart home framework. This week HomeKit Weekly returns to check out the l…

Bookmarked on #


Solved with CSS! Dropdown Menus | CSS-Tricks

A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.

Bookmarked on #