The Design Blog - Design Inspiration & More
Carefully curated platform for design and creative inspiration featuring works of designers, studios, and creatives from around the world.
Creative Ref
THE INDEX
A curated online gallery with the best design studios, designers, type foundries, and other creatives worldwide.
Web Interface Guidelines
A non-exhaustive list of details that make a good web interface.
The Sound of Software | !Boring Software
How to design sound that elevates software and won't drive you crazy
On a physical button, minor variations in pressure, timing, & angle create subtly different sounds with each press. If you play the same exact waveform over and over again, it doesn’t matter how good it’s designed, it’ll get annoying really quick.The trick here is to steal a technique from gaming and create multiple variations of the same sound. Create 8-12 variations by varying pitch, volume, timing, or mix and randomly play one variation for every new key press. Or take it further and dynamically adjust a sound (pitch, filters) based on different inputs like hit location, velocity, and hold duration.Instead of repetition, you create texture.
Sound designers often create new sounds or add dimensionality by layering multiple sounds. Think of it like bringing together ingredients when cooking. If your sound needs a build up, you might add a reverse whoosh. If it needs a satisfying moment of punctuation, you might add a clear percussive hit. If you want to lift the mood, you might sprinkle in a few musical tones.
Layers can be brought together from any sound source—natural recordings, synthesized, musical instruments. It’s in the combining and layering of sources together that you craft what you want your sound to do.
Similar actions like navigation controls or object actions should have sounds that live within the same auditory family and share characteristics like tone, instrumentation, and effects.Opposing actions—open vs close, prev vs next, send vs receive—shouldn’t use the same sound. They should sound like similar opposites. A sound might be played in reverse or the emphasis may be moved from the beginning to the end. In this way, the sound intuitively reinforces the directionality of the action you perform.
The sound for a page flip could share the characteristics of the sound of a real page flip with a long, slow drag but you could use an entirely different tone or instrument to create it. If meeting expectations enables your design to disappear, these moments where you break expectations are what shape the character and personality of your software.
Haptics shape our perceptions of a sound. Think of a keyboard key stroke or swinging a hammer. Sound can make the same action feel soft or precise, clean or jumbled, heavy or light.
i need to talk to whoever is running marc jacobs’ tiktok
example of high fashion embracing new internet approachability and tiktok trends
How to communicate design to developers (checklist)
checklist for design handoff from designers to developers
uilabs
Experimental laboratory of fine UI
Love your that simplicity; consider highlighting this in screenshots.
Less social proof; it’s premature and doesn’t build trust. Focus on showcasing the product UI instead.
Reduce text in UI shots, enlarge them to emphasize ease of sharing thoughts.
See references 🌈
— the screenshot first company (@screenshotfirst)
Site of Sites
Explore the best in web design at Site of Sites. Find inspiration, trends, and insights to elevate your own projects. Submit your website for consideration and be part of our growing collection.
Designing better buttons for the web
Buttons are arguably one of the most important elements in the user interface and if designed poorly can have an impact on your interface.
Button size should not be less than 42 pixels and a maximum of 72 pixels. The most preferred button size is 60 pixels at a minimum, with 72 pixels optimal for certain users.Looking at research studies, a 72 pixel button was preferred by older users and overall produced the highest touch accuracy.
your coffee brand could never lol
turkish coffee brand advertising in an unconventional way
The Indonesian localization of 地球往事 book titles is the best bar none and i will die on this hill
three body problem chinese covers minimal
Creating a custom logotype feels like a cheat code
reasons for making a custom logotype while designing branding. See video for demonstration of making one
Emil Kowalski on X: "Been adding 4px of blur to animations recently and I kinda like it? https://t.co/mFOM3RhEfy" / X
— Emil Kowalski (@emilkowalski_)
legendary Apple cover flow animation remade in Framer with their latest 3D features.
Remix it for free below ↓ — esmergUI (@sitenley)
Small tools for shaping
A series of practical techniques and small tools Ryan Singer uses to shape and refine raw ideas into well-defined project pitches:
- TRACE (identifying specific problems from user observations):
- DUMP (rapidly externalizing ideas without structure)
- AFFINITIZE (grouping related ideas)
- CONTRAST (generating multiple solution options)
- SKETCH
- INTERRELATE (determining logical sequence)
- MOCK (concrete wireframes)
SPIKE (technical prototype)
- The process starts by tracing user interactions to identify specific pain points, then rapidly dumping solution ideas and affinitizing them into major areas.
- Sketching, contrasting options, and mocking are used to explore and validate different approaches for the unclear areas.
- Techniques like interrelating and affinitizing are used to determine the logical structure and sequencing of the pitch content.
- The author emphasizes doing as much pre-work as possible before writing, to make the actual writing process easier.
- The process is non-linear, with techniques like sketching, mocking, and spiking used in the middle to resolve specific doubts or questions, rather than a strict sequence from abstract to concrete.
- The final pitch incorporates all the shaped content, including motivation, numbered patterns, and example sketches showing how the patterns could combine into a design.
I'm experimenting with ways to demonstrate the path from a raw idea to a well-shaped pitch. That is, how to go from "I think we should spend time on X" to "here's a specific concept for X that we're confident we can ship in six weeks."
To get through it, instead of just staring at a blank page, I opened up a Miro board. My idea was to externalize my thought process by making small steps in a horizontal chain.
This project is one of the final cycles of an app I'm building with Bob and Greg to analyze and cluster demand-side interview data. Here's a screenshot of the work in progress
All of these steps are built and working. The problem is that the clustering process in step four is confusing. It works, functionally, but it's very "power user" — you have to know a lot of things in your head and manipulate a lot of controls on the same screen that aren't well explained.
We agreed that if we could somehow "make clustering better" in six weeks, it would be time well spent. But that's too fuzzy to just start working on. I needed to shape that raw idea into some kind of specific project we could go do.
I didn't understand what "better" should actually look like.When this happens to me, sometimes I reach for a tool I'm calling TRACE. It's a technique to turn a fuzzy sense that something is wrong into specific focal points.First I observe somebody using the thing for a real purpose (or get a recording or interview them).Then I note every single step they took, from start to finish, including steps outside the tool. Eg. the timeline includes when they needed to switch to a different app, or Google a question, or apply a workaround.Any time they veer off the golden path and apply a compensating behavior, I flag that. This (a) indicates a problem, and (b) the compensating behavior shows what a solution could look like.I collect those flagged areas as the starting point for the design work.
As soon as I saw the specific problems, lots of different solution ideas started popping into my brain. I didn't want to slow down and start writing any one of them in detail because I was afraid I would lose the whole bunch. So I reached for a tool I affectionately call the DUMP.A dump is just a box where I tell myself "you can put anything here without worrying if it's right or not." Importantly, there is no structure and no relationships. Just one column, and things go in one after the other.
Whenever I have too many small things, I reach for AFFINITIZE. This is a chunking exercise that puts like with like, so you can go from many small things to a few big things. The secret to affinitizing is started with a fixed number of unnamed groups. Then, only after you've grouped things together, you look at the piles to understand what to call them.
I wasn't ready to write yet. But I could see all the parts of the pitch in my head. So instead of going down into the weeds of writing, I created another dump and put all of the ingredients of the pitch into it.
When I have a sequencing question, I reach for INTERRELATE. This tool draws out the causal dependencies between parts, so you see which ones should be upstream from the others. While it looks kind of technical, I think it captures what an expert does in their head when intuitively deciding which problems to solve first.INTERRELATE starts with taking a set of input elements and arranging them around a circle. Then you draw an arrow from one element to another if doing that thing will help you do the other. After all the arrows are drawn, you can count the inputs vs. outputs at each element to judge which things have are causes of the rest of the system versus which things are more effects of the rest of the system. Things with more outputs than inputs should happen earlier in development.
Don’t let a linear design process snuff out your sparks of inspiration by Jeff Zych
Earlier in my career, I would follow the double diamond design process as a series of linear steps: define the problem, explore solutions, test & iterate, then build and ship. But the more times I’ve gone through this cycle, the more I’ve realized that this is a recipe for snuffing out good ideas.
I’ve squandered a lot of good ideas as a result of getting a flash of inspiration, but then stopping myself from following that thread to go back to the beginning and try to define the problem, goals, constraints, and so on. This just stifles creativity.
Now I try to follow those sparks whenever they pop up, and loop back to other parts of the process when they’re relevant.
These ideas don’t always pay off. But that doesn’t matter. Sometimes they inform other projects. Sometimes they dissipate into the ether. At a minimum I will have had fun pursuing an idea I’m excited about and grown in some small way as a result.
Taiwan Space Agency
Branding with custom fonts TASA Orbiter and TASA Explorer, by Local Remote
Brand case studies
river
When you charge by the day : r/editors
Best Pitch Deck Examples — Best Pitch™
Discover the best pitch deck examples from 1,400+ winning startups and billion-dollar unicorns across industries, including Airbnb, Dropbox, Uber, and more.
alba
We acquire category defining mobile apps. We serve millions of users.
The Future of Web Accessibility: Unpacking WCAG 3.0, APCA, and the Role of Design Tools - The Project Project
APCA seems much closer to real perception than WCAG 2
Freeform / Disney
Always forming. Never finished.
Browse Apps for Design | Appshots
Explore a curated selection of must-have apps for design on iOS and Android, accompanied by Appshots, featuring 70k+ insightful screenshots. Join us today.
Explore AI-Driven UI Patterns | Teardowns.ai
Browse our growing library of over 100+ AI-driven UI patterns from top SaaS products like Adobe, Microsoft, Framer, Shopify, etc. Discover, learn and get inspired with Teardowns.ai.
Refero — design references for your next project
The biggest collection of design references from great web applications
Tiles — Connecting with your music collection.
Tiles is an exploration of how a tangible interface could present music listening as the sophisticated process it was intended to be.
The Link in Bio Guide to Freelance Social
How to find clients, calculate rates, write proposals, and set boundaries.