Hello Hill - Notes

Design Inspiration Favs

Patrick Hill — Thu, 31 Aug 2023 07:31:41 GMT

Note

Since originally writing this, I've built out a more full featured inspiration library. You can now sort and filter. This also makes it easier for me to manage the items. Enjoy!

Sometimes you need a little inspiration to get your creativity flowing. Here's a list of all the places I've come across that offer up great visuals.

Favorites

Abduzeedo: A collective of individual writers sharing articles about design, photography, and UX.
Dribbble: The classic design sharing network. It's a little weird here now but you can still find amazing work.
Design Burger: A platform for some of the most influential design work from around the globe.
Layers: The new Dribbble. Still in beta, a little unstable, but great stuff.
OGimage Gallery: Gallery with the best and most carefully collected OG images.
Rebrand: Stellar visual identity inspiration gallery.
Recent Design: The best of recent web, interface and interaction design.
The Design Files: Australia based design inspiration site covering homes, gardens, art, architecture, interior design, food, and more.

All

Frequently Visited = ⭐️

General

Interactive / Web / UI

1 dataset, 100 visualizations
60fps
App Fuel
Awwwards
Codrops
Curated
Dark
Dark Mode Design
Empty States
Footer
Godly
Gomila ⭐️
Hoverstates
HUDS + GUIS
iOS Icon Gallery
MaxiBestOf ⭐️
macOS Icon Gallery
Minimal Gallery
Mobbin
Nicelydone
OGimage Gallery
One Page Love
Pafolios
Page Flows
Recent Design ⭐️
Refero
SaaS Frame
SaaS Shots
scrnshts
Site Inspire
Teardowns - UI patterns for AI workflows
watchOS Icon Gallery

3D

Spline Community

Motion

Print / Typography / Branding

Architecture / Interior

Landscape

Hendy Curzon

My Favorite New Tool: A Tiny Voice Recorder That's Changing How I Work

Patrick Hill — Thu, 19 Feb 2026 02:56:00 GMT

Problem

I want to jot down a thought and I want to do it quickly. It's a reminder for something I need to do, a new idea for a project that I want to work on, or a solution to a problem that randomly occurred to me.

A pen and paper sounds nice but that requires two hands and I need to have those items on me.

What about an iPhone or Apple Watch? Those devices are powerful, but they're also locked down and error-prone. It's almost impossible to consistently save a thought into either device. This is insane.

On the Apple Watch, I'll raise my wrist and try talking to it. About 10 to 15% of the time, it won't wake up. When it does, I have to talk in a specific way. If I pause to gather my thoughts, it thinks I'm done talking and cuts me off. Sometimes, it mishears me and as a result, enters the wrong information or does the wrong task.

On the iPhone, I set up a complex Shortcut that successfully captures audio, transcribes it, and uses on-device AI models to do something useful. It's pretty cool, until I tried to use it. Apple locks down the microphone for security purposes, meaning you can't access it unless the phone is unlocked. Imagine my frustration when, on a long road trip, I kept having ideas that I wanted to save but couldn't. I would raise my phone, push the action button to launch my awesome new shortcut. Because I was looking at the road and not my phone, it wouldn't unlock and wouldn't run the shortcut.

My final attempt to get something working was to use Apple's Voice Memos. It has "special" privileges that allow it to access the microphone when the phone is locked. I finally cracked it, I thought. Nope, all the data gets locked inside of the app. There's no programmatic way to get it out or do anything useful with it.

Solution

What if I had a device with a button I could push that would reliably record my thoughts and automatically send them where I want? Then I could have an LLM analyze them and make them useful. This device exists. It's called the Plaud Note.

I've seen other AI devices that constantly record everything you do in an attempt to become your second brain. They feel gross to me. No one wants something constantly recording everything. They also look dumb. Who wants to wear a weird necklace or pin on their shirt?

This is not that. This fits discreetly in your pocket, and works like the traditional voice recorders journalists used. The cool part is that it comes with smart modern features. Mainly, it will automatically transcribe your audio and send it through Zapier to anywhere you want. Oh and it can be operated with one hand, weighs nothing, and almost never has to be recharged.

Device

Made of aluminum and glass
OLED screen for recording and sync status
Credit card sized
Weighs 1.06 oz
Battery lasts months
Holds tons of recordings
Connects via Bluetooth Low Energy and auto-transfers to phone when in range
Has a haptic record button similar to the MacBook trackpad that gives vibration feedback when pressed
Costs $189 but they have cheaper models
Comes with 300 minutes a month of AI processing. There are subscriptions available if you need more but they're only necessary if you are consistently recording long form audio like meetings or interviews.

Workflow

The companion app can do AI summaries and other processing but I skip that and pass raw transcripts downstream. Zapier is the hub for this. The free plan is limited but I manage to get by on it. You can do all kinds of things from here but I only do two:

Save all transcripts to my notes folder in Dropbox
If a transcript has the phrase "remind me", send it to my own API for natural language processing

Custom API for natural language processing, you say? I know that sounds complicated, but I told Claude I wanted to turn transcripts into tasks and send them to TickTick and it made the thing in a few minutes. It blows my mind what's possible today. The API lives for free on a Netlify server. The only cost is a few pennies a month for Claude Haiku to digest the transcripts.

Honorable Mention: Pebble Ring

While Plaud is cool, the thing that I'm really excited about is the Pebble Index. The only reason I bought the Plaud in the first place was because the Pebble isn't shipping yet and I was too excited to wait for my pre-order.

What's so great about the Pebble Index? It has these added benefits:

Lives on your finger so you don't have to dig a device in and out of your pocket
It's waterproof — swim, shower, rain, whatever
It never needs charging. I'm going to say that again, it never needs charging! This battery lasts two years. At the end of that period, you send it back for recycling.
It only costs $75. That's not nothing, but when comparing it to a smartwatch that can cost hundreds of dollars and doesn't work 100% of the time, it's amazing.
No subscription
It's open source. You can hack it to do other cool stuff like send its data to your own app.

I can't wait to get my hands on this thing, and I'll report back once I have it.

How This Is Impacting Me

It sounds hyperbolic, but I feel free and focused. I don't need my phone. I don't need a flaky AI assistant or a network connection. No apps or notifications distracting me. I can go on a walk in the woods or lay in the grass at the park. If an idea arises, as they often do in places like these, I can effortlessly talk through it. When I get back to my computer, the next steps are waiting.

A few weeks ago I was yelling at my Apple Watch while it ignored me. Now I press one button, talk, and move on with my day. That’s it. That’s magic.

Update

Since originally writing this, a friend figured out how to access voice memos on macOS programmatically. I should have known this. Of course there's a location on the hard drive where memos stores its audio recordings.

~/Library/Group\ Containers/group.com.apple.VoiceMemos.shared/Recordings/

You can write automations to watch that folder, grab the files as they appear, and process them accordingly. This changes things a bit but still isn't a perfect solution.

Pros

Allows programmatic access to Voice Memo files
Voice memos gets special access to the iPhone microphone so you can make recordings without unlocking

Cons

Requires manual step to process or an always on Mac watching the folder
Only slightly improves easy of input:
- Apple Watch is still flaky on picking up voice commands
- Apple Watch requires a confirmation touch to start voice recording i.e. no voice only prompt to start a recording

I'm probably going to use a hybrid approach moving forward. Multiple audio recording inputs that all end up in the same location for processing.

How to Make Transparent Video for the Web

Patrick Hill — Wed, 16 Aug 2023 20:30:31 GMT

Videos with transparency are pretty useful. You can layer them on top of other elements or seamlessly blend them into the background of your website. In fact, that's what I did for the homepage of this site.

The main video formats for the web are WebM and MP4. Both now support transparency but good luck getting a video converter to properly encode it. There's also wide browser support for these but trying to figure which ones support the newer alpha layer feature is another problem.

I'm going to do a quick overview of what worked for me. If you want a deeper dive into this topic, check out this article from SuperGeekery.

Alpha channel is a newer feature for both formats. Apple added support to Safari for WebM but not for the alpha channel. The MP4 H.264 format has a successor called h.265 or HVEC which supports alpha in every modern browser except Firefox. So, we're stuck with 2 formats until support moves forward a bit more.

I tested converting a video with After Effects, Media Encoder, Final Cut Pro, Motion, Compressor, and Permute. None of them could properly encode an alpha channel in either format which blows my mind.

Instead, I had to rely on the open source FFmpeg and an app built on top of it called Shutter Encoder. Both are free. The first, is super complicated and technical, the second much less so but still not easy.

Conversion Process

I'm going to assume you already have a transparent video from your favorite video editor. For reference, I used After Effects and exported the video in the QuickTime format with RGB + Alpha Channels enabled.

Shutter Encoder

This is an incredibly useful piece of software but the UI can be a little confusing. Aside from that, this is definitely the easiest option.

H.265 / HVEC

Click browse to add your file
Select H.265 format
Select .mp4 file extension
Select hardware acceleration
Select enable alpha channel
Click start function

WebM

Click browse to add your file
Select VP9 format
Select .webm extension
Select enable alpha channel
Click start function

FFmpeg

This is a more difficult option but definitely the quickest. If you're the developer sort, FFmpeg might be for you. I'm not going to go into the setup but here are the commands that worked for me.

convert transparent mov to h.265/hvec

ffmpeg -i input.mov -c:v hevc_videotoolbox -allow_sw 1 -alpha_quality 0.75 -vtag hvc1 output.mp4

convert transparent mov to webm:

ffmpeg -i input.mov output.webm

Sources:

https://supergeekery.com/blog/transparent-video-in-chrome-edge-firefox-and-safari-circa-2022
https://stackoverflow.com/questions/61661140/convert-webm-to-hevc-with-alpha
https://www.reddit.com/r/shutterencoder/comments/xojpv1/missing_alpha_channel_h265_mac_v_163

Why are the colors wrong when I export from Blender?

Patrick Hill — Mon, 21 Aug 2023 09:02:10 GMT

Blender is an amazing piece of 3D software but it has a few quirks. One of those is when you save a rendered image and open it in another program like Finder, Photoshop, or a web browser, the colors look different. They are usually desaturated and the image has lower contrast. This is because Blender doesn’t assign a color profile. When you are inside Blender, you see colors with the default display color profile. When you save an image out and open it somewhere else, the program doesn’t know how to interpret those colors.

The Fix

Depending on your use case, you’ll need to do one or two things to fix this problem:

1. Assign a color profile

This simply tags the image with meta data telling other software how to show the image. For most people this will be the color profile that matches the display you are using with your computer. There is a generic Display color profile or a profile for your monitor e.g. LG UltraFine. For people on newer macs, it will be Display P3. You can also apply the Adobe RGB (1998) profile for a slightly more saturated/contrasty look.

2. Convert to a color profile

This actually modifies the pixel values, essentially baking the color profile in. Select sRGB which is the widely supported standard or P3 if you want to target displays with larger color gamuts.

This must be applied after completing the first step.

You need this if you are going to be using the image on the web as most compression tools will strip color profiles and meta data from the image.

Skip this step if you are going to do further processing or reintegrate back into Blender or another pipeline because it will cause the image to get doubly saturated and contrasty. This is because the color profile is getting applied again overtop what you baked in.

Steps to fix in various image processing apps

Pixelmator Pro

Fantastic alternative to Photoshop. https://www.pixelmator.com/pro/

Assign

go to image > color profile or shift + cmd + k
select advanced
select your display color profile
click show details button
select assign profile
click ok button

Convert

go to image > color profile or shift + cmd + k
select advanced
select sRGB or P3
click show details button
Select Match to Profile
click ok

Retrobatch

A node based image editing tool. Great for batch editing images. https://flyingmeat.com/retrobatch/

Assign

Use “Change Color Profile” node
chose your display color profile
leave intent on default

Convert

Use “Change Color Profile” node
chose sRGB or P3
check “match and modify pixels”
leave intent on default

Photoshop

Assign

go to edit / assign profile in the main menu
select profile option
select a profile that matches your monitor

Convert

go to file / “save for web” or “export as”
Check convert to sRGB in the dialogue

ImageMagick

Command line tool for processing images. https://imagemagick.org/

This is the most complicated but also the quickest method. I would only recommend this if you’re comfortable with developer tools. It uses the command line to process images and you can combine multiple steps into a single command.

You’ll need to know the file paths to the color profiles on your computer for this to work or you can download profiles from color.org.

On the mac, color profiles live here:

/Library/ColorSync/Profiles

Assign

With ImageMagick assign only happens if a profile doesn’t already exist. So if you want to assign only, you need to remove current profiles with the +profile command. The wild card “*” will remove all profiles. We don’t need that here since Blender doesn’t assign a color profile but here it is just in case.

magick input.jpg +profile "*" output.jpg

Here’s the command to add a profile:

magick input.jpg -profile DisplayP3-profile.icc output.jpg

Convert

Since we assigned the display color profile in the previous step, this time the process will convert to the new profile.

magick input.jpg -profile srgb-profile.icc output.jpg

Altogether Now

A one line that does everything above

magick input.jpg +profile "*" -profile DisplayP3-profile.icc -profile srgb-profile.icc output.jpg

Once more with file paths to mac color profiles

magick input.jpg +profile "*" -profile /Library/ColorSync/Profiles/Displays/Color\ LCD-37D8832A-2D66-02CA-B9F7-8F30A301B230.icc -profile /Library/Application\ Support/Adobe/Color/Profiles/Recommended/sRGB\ Color\ Space\ Profile.icm output.jpg

Sources

https://bjango.com/articles/colourmanagementsettings/

https://blenderartists.org/t/color-discrepancy-between-rendered-image-inside-of-blender-and-saved-image-outside/592175/30

https://blender.stackexchange.com/questions/183176/color-issue-when-save-my-render

Hello Hill - Notes

Design Inspiration Favs

Note

Favorites

All

General

Interactive / Web / UI

3D

Motion

Print / Typography / Branding

Architecture / Interior

Landscape

My Favorite New Tool: A Tiny Voice Recorder That's Changing How I Work

Problem

Solution

Device

Workflow

Honorable Mention: Pebble Ring

How This Is Impacting Me

Update

Pros

Cons

How to Make Transparent Video for the Web

Conversion Process

Shutter Encoder

H.265 / HVEC

WebM

FFmpeg

Sources:

Why are the colors wrong when I export from Blender?

The Fix

1. Assign a color profile

2. Convert to a color profile

Steps to fix in various image processing apps

Pixelmator Pro

Assign

Convert

Retrobatch

Assign

Convert

Photoshop

Assign

Convert

ImageMagick

Assign

Convert

Altogether Now

Further Reading

Sources