Articles about design, code, music, and Bjango
Daft Punk have used a wide variety of vocal effects in their songs. A May 2001 interview in Remix magazine provided a rare insight from Daft Punk themselves on the topic. “People always ask us what vocoder we use, but every one of our vocal tracks uses a different vocoder effect. We have the old Roland one [an SVC-350], Auto-Tune, and a DigiTech Vocalist.” The quote delivers some vital clues, but…
If you’ve ever tried to implement consistent shadows across multiple platforms and design tools, you may have noticed that they don’t look the same. Thankfully, it is possible to get them all to match. The image above shows the same drop shadow values, rendered by CSS on the web, Android, and iOS. It’s a dark and extreme shadow, to make the differences more pronounced. The shadows are black, with…
Bjango turns 20 years old this month. The exact day we started is a little fuzzy, so we don’t have a specific date to celebrate. In the beginning, Bjango was just a couple of friends making free OS X Dashboard widgets. We started working on those widgets prior to OS X 10.4 Tiger’s release on 29 April 2005, so my best guess is we started working together some time in March 2005. After releasing a…
Imagine walking into a shoe store and asking for size 10 sneakers. You may end up with shoes that fit, but “size 10” isn’t descriptive enough to be sure — the US, UK, EU, Australia, and Japan all have different shoe sizing systems. To ensure you get shoes that fit, it’d be wise to be more specific and ask for “size 10 US” or “size 10 EU”. Colours are similar. Specifying “#ff0000” or “rgb(255, 0,…
The most common type of blur used on the web and in design tools is Gaussian blur. There’s many ways to describe how blurry the blur is, and implementations vary so much that a blur in one app may be a completely different size to the blur in another app. Sometimes there’s even inconsistency across different features in the same app. This makes it very difficult to convert blur size from design to…
Design tools often pack a lot of functionality around the bounding box of selected objects. Some of this functionality is represented by handles or icons, but a lot of it is hidden. This can make learning the behaviour and interacting with objects pretty tricky. The only way to know if you can perform an action is to hover near the edge of a selected shape and note cursor changes. It’s like…
How do various design tools utilise memory? What’s their baseline usage with no documents open? How does memory grow with lots of large documents open? Empty documents The graph below shows what happens when Figma, Sketch, Illustrator, Photoshop, and Affinity Designer have 0, 5, 10, or 15 empty documents simultaneously open. For apps that require a document size or bit depth, I used 512×512px and…
In Adobe Illustrator, the shape builder tool and the pathfinder panel can both add and and subtract segments of overlapping shapes. They’re predominantly used to create complex shapes from simple ones. The pathfinder panel was added to Illustrator in 2001, and the shape builder tool was added in 2010. Given shape builder is newer, many people assume it’s better. They’re both useful, but work in…
A long-standing trope of the design world is that computers are bad at aligning and balancing the relative scales of elements. This is incorrect. Nudging elements around until they feel good is typically referred to as “optical adjustment” or “optical alignment”. The pitch is that you can’t rely on the numbers — matching the width and height of two objects doesn’t mean they’ll carry the same…
In an effort to reduce the final app size of iStat Menus, we’ve been investigating ways to slim down our app icon. It’s currently about 1.22MB, which is normal for an app icon, but a decent percentage of our bundle. As part of the research, I tested which assets are used across the various places icons are shown in macOS. The goal was to identify if we could remove certain icon sizes, or…
I’m excited to announce the launch of my new YouTube channel , which will feature videos that cover the types of topics you’d expect as Bjango articles. It’s also likely to follow a similar schedule as articles on this website — posts will happen as I get time and have ideas worthy of your attention. There’s five videos up already. Enjoy! 8 icons in 2 mins 40 secs Camera iris and puzzle piece…
When viewing my vector icon speedruns , it can be difficult to see precisely what’s going on. Everything happens quickly, with many actions triggered via keyboard shortcuts, and Illustrator’s interface is cropped out of view. That’s just the nature of what they are, which means they provide more entertainment than education. This article aims to be a director’s commentary for my fingerprint icon…
When viewing my vector icon speedruns , it can be difficult to see precisely what’s going on. Everything happens quickly, with many actions triggered via keyboard shortcuts, and Illustrator’s interface is cropped out of view. That’s just the nature of what they are, which means they provide more entertainment than education. This article aims to be a director’s commentary for my fountain pen icon…
When viewing my vector icon speedruns , it can be difficult to see precisely what’s going on. Everything happens quickly, with many actions triggered via keyboard shortcuts, and Illustrator’s interface is cropped out of view. That’s just the nature of what they are, which means they provide more entertainment than education. This article aims to be a director’s commentary for my pushpin icon…
When viewing my vector icon speedruns , it can be difficult to see precisely what’s going on. Everything happens quickly, with many actions triggered via keyboard shortcuts, and Illustrator’s interface is cropped out of view. That’s just the nature of what they are, which means they provide more entertainment than education. This article aims to be a director’s commentary for my flag icon…
Apple’s HIG is great, but it doesn‘t contain much information related to designing menu bar extras . This article aims to provide additional details and context needed to create icons for macOS menu bar extras. The height of the Mac menu bar has grown a little over time, starting at 19pt on System 1, growing to 21pt for the Mac OS X beta, then 22pt in Yosemite, and finally 24pt in Big Sur, which…
If an SVG is imported into a design tool, then immediately exported as another SVG, how much precision is kept? What’s added, removed, or altered? To test rounding precision, an SVG can be created with elements covering the range of decimal places to check. In the example below, the X and Y positions of rectangles hold values with 1 to 10 decimal places. Passing it through a design tool reveals…
The following article is a random collection of opinions on how design tools should export SVGs. Do you agree? Feel free to let me know if you think something is missing or incorrect. The XML declaration and namespace should be included in the header, especially if SVG 1.1 or newer is being used. I know skipping it saves some space, and doing so probably won’t cause issues, but it’s only an…
Since writing about Mac external displays in 2016, not much has changed. LG, Dell, Samsung, and other display makers have either never catered for the specs many Mac designers and developers want, or they’ve reluctantly produced products that have been short-lived or compromised. In 2019, Apple announced their return to the display market, with an incredible product carrying an incredible price…
When viewing my vector icon speedruns , it can be difficult to see precisely what’s going on. Everything happens quickly, with many actions triggered via keyboard shortcuts, and Illustrator’s interface is cropped out of view. That’s just the nature of what they are, which means they provide more entertainment than education. This article aims to be a director’s commentary for my camera iris icon…