February 1, 2025No Comments

Perfect Gameboy Overlays Template for Emulators with Square Ratio Screens

I recently purchased an Anbernic RG Cube XX to add to my ever growing handheld collection. I love getting unique handheld gaming devices, and the Anbernic RG Cube XX caught my eye due to it's 1:1 ratio screen.

Most handhelds have a 2:3 or 3:4 aspect ratio screen, making them great for Gameboy Advance games, but not so great for original Gameboy and Gameboy Color games.

Once the RG Cube XX arrived, I got MuOS installed, added my ROM files, and dove straight into learning how to add overlays and shaders to really get that old school texture while keeping the beauty of the IPS screen. Retro Game Corps has this great guide on YouTube, which I recommend if you want to add them to your own emulator devices.

After following the aforementioned guide, I realized the tutorial only provided overlays for 2:3 or 3:4 ratio screens. Like I said, the RG Cube XX has a 1:1 screen, so none of the overlays or settings mentioned in the video worked nicely.

So me being who I am, I decided to make my own overlays and have made them available to download for free. They include layouts for Gameboy DMG, Gameboy Pocket, Gameboy Color, and Gameboy Advance! I also included a fun version of each with a nod to the app I made with my friend Jeremy called GamePal.

To be transparent, these are inspired on the Perfect Overlays by Reddit user 1playerinsertcoin. I took the grid they made and translated it to a 720x720px size, including a border to account for the weird 10:9 ratios that original Gameboy games had!

Here are 2 options for swapping out the overlays, whether you want to use mine or make your own!

Create Your Own Using the Figma Template

If you'd like to go the extra mile, you can make your own overlays as well. I've put the files that I used in a template format on Figma for you to use and have fun with.

You can find the Figma template here →

Download My Pre Made Overlays

Instead, if you just want to download and start using the overlays yourself, follow these instructions to download and start using them! Note that these instructions are specifically for MuOS, for other emulator OS I recommend looking at this guide from Retro Game Corps.

  1. Download the overlays (including the necessary config files) for free here.
  2. Shutdown your emulator device and put the SD card with your OS into your computer.
  3. Unzip the file.
  4. Place all of the files from the zip file in MuOS → Retroarch → Overlays → Place Here
  5. Eject your SD, put the SD back in your emulator, and turn your emulator back on.
  6. Change your Retro Arch settings to use the overlays specific to each Core.
  7. Ready to go!

March 11, 2022No Comments

How Taking Care of Yourself Takes Care of Your Team

Join my newsletter →

After hiring our 3rd designer at Northstar, I’ve been shifting a lot of my growth to learning about being a leader and mentor for my team. It’s a huge challenge for me personally, who has been mainly an IC designer in every role I’ve had in some capacity.

Now that things are starting to shift and my day-to-day is more around decision making and process iterations, people look to me for answers and guidance each day. I don’t know about you, but it’s scary to have that pressure every day you show up to work.

I know it comes with the territory and I asked for this in a way, but some days get harder to work through.“If I just put in a few more hours, our goals will be achieved more quickly.”

“My team is counting on me, this has to be done tonight.”

“Eh, I can skip lunch for this call. I’ll eat after!”

“I can’t sleep in, what if an emergency happens even though it’s 7:00am on a Thursday?”

But after one-too-many weeks of this, I’d be setting myself and my team up for a worse situation.

When I don’t take care of myself mentally or physically, I slowly expend my energy exponentially. I’m not as alert in meetings, I’m distracted by stress, I’m overly irritable, I’m not myself.

I want to be the best version of myself for those around me. That way, I’ll be better able to do what I do best. I listen better, I’m able to focus easier, I’m more open to receiving feedback, and I give better feedback myself.

What You Can Do

You need to put yourself first. Not in a malicious way, but in a way that sets healthy boundaries between work and life. Boundaries that put your health and comfort first, in a way that lets you do your best work. It’s one thing to be self-disciplined and motivated, but another to drive your life into the ground for it.

Remember to spend time with yourself and with your family/friends. Do things that bring you joy and pursue your hobbies. Remember to exercise, eat right, and take care of your body. Go to therapy and work on yourself. Maybe try meditation or yoga before work. Remember to do nothing sometimes too, just exist and listen to the world around you.

Put yourself before anything, the people around you will be happy you did.

January 19, 2022No Comments

Leadership Book Recommendation, Powerful by Patty McCord

I'd like to recommend one of my favorite books I've ever read, Powerful by Patty McCord. Patty was a Co-Founder at Netflix and worked there for 14 years, developing the culture of the company.

Read more

August 1, 2021No Comments

What to Do Your First Week of a New Design Job

So it's your first week in a new design role, what do you do? What should you have prepared? Here are 10 ways to set yourself up for success.

Read more

July 6, 2021No Comments

Practical Typography Tips to Improve in Product Design, UX, Web, and Graphic Design

Here are some basic tips to improve typography in design I've learned over the last 10 years. Helpful for all areas and types of design.

Read more

May 12, 20211 Comment

How to Use and Choose Text Colors in Product Design

One of my biggest struggles starting out in Product Design was the ability to make consistent color palettes. Creating typography and color palettes that worked within product constraints without sacrificing recognizability on countless screens. I needed a reliable way to experiment with composition without ditching pre-existing styles and screens. Using different shades of grays, sacrificing accessibility, and not knowing when or how to use colors without a strict system in place was frustrating and limiting.

After a long time of experiencing this frustration, once I started learning to code a few years ago things clicked for me. I could use opacity! With opacity, I could blend layers of elements together and still maintain a harmonious color palette, build more accessible products, experiment with layout more, and take another problem off my plate to think through.

Using in Product Design Practice

Using different shades of grays with determined hex codes can lead to poor contrasts between elements and leave interfaces inconsistent, inaccessible for some users, and even just plain ugly sometimes. Instead, I found using a pure white and a pure black (or with a tiny amount of hue if you’d like!) as a starting point and taking advantage of opacity to be a much better tactic. This makes it much easier to develop color palettes, design systems, product iterations, and work better (and quicker!) towards product goals.

Not making sense yet? No worries! Here’s a visual:

As you can see, the usual approach on the left makes it quite difficult to consistently create text that is legible without using a pure white or black on top of the color or having a very specific and well-maintained system in place. Both of these solutions are tedious and hard to implement across teams and passing off to developers.

Setting Typography Rules for Color in Product Design

The white and black opacity approaches on the right are consistently legible and don’t require verbose rules and guides to follow. Although the ones above are random, I usually stick to 20%, 40%, 60%, 80%, and 100%, giving each their specific use case. This dwindles the amount of rules to remember down quite a bit and still provides enough flexibility to build a system around them while promoting experimentation in screen layouts and UX decisions.

Of course, there are still limitations here. Some of the examples above could do with a higher or lower opacity to make them 100% AAA compliant. For example, you wouldn’t want to put 20% white text on top of a yellow color or a 80% black text on top of a dark purple. It’s important to keep those in mind as well, but this post is more to provide a basis for building a better system, not so much a cheat sheet and an answer to everything.

If you want a real-life example, my personal website (https://www.cortes.us) is built entirely with different opacities of white and black for text mixed with colors throughout.

What About Passing to Developers?

Okay so now you may be asking yourself how you can communicate this system with a developer and how it would work in code. It’s actually quite simple! Luckily for you, both mobile (yes, native too) and web technologies support an RGBA function as a way to specify color values. How does this work? Here’s a little key and example:

rgba(230,18,75,0.5);

// the first 3 numbers are your R, G, and B values (0 - 256).
// the last digit is the alpha, or opacity in our case
  // pass in a decimal number equal to the opacity you want 


// EXAMPLES

// For a black at 5% opacity
color: rgba(0,0,0,0.05);

// For a white at 80% opacity
color: rgba(256,256,256,0.8);

And voilà! You can create a key very simply for developers like you normally would with a style sheet of some sort, just exchange hex codes for RGBA function values for your neutral colors. I’d also recommend creating a guide around when and where to use certain opacities (40% black with uppercase text at .875rem for secondary titles for example).

June 24, 20202 Comments

How to Pick the Grays in Your Design System Color Palettes for Product Design

Let’s admit it. Creating color palettes in Product Design is a tough feat to do well, and there doesn’t seem to be much of a process besides trial and error usually for figuring out what will work best in context.

While this is true, there is an approach you can take that will put you on the right path with opacities, similarly to my post last week on Text Colors in Product Design. Let me explain!

Primary Brand Color

If you work at a company, chances are that your primary brand color is settled upon at this moment. The basis of this process relies on your brand primary color as that will be what users will most likely see throughout the application. Using your brand color as a starting point will keep this process and color palette harmonious and consistent. For simplicity’s sake, I’m going to start with this purple as the primary brand color in my example.

#5C51E0 will be our example hex code

Brand Black

Now, using my primary brand color, I’m going to create a black that is on brand with my primary color. I recommend not using a pure black color in the product you are working on (unless you’re brand color is pure black, then that works ¯\_(ツ)_/¯) as it can feel stark and inconsistent with other colors you are using.

It’s simple to do this, just start with your brand color (our purple in this case) and bring your slider straight down (or even down and a little to the right for saturation) until you reach a comfortable “black” that contains hue from your primary brand color without getting to the bottom. See below!

Now we have a “black” that is dark enough to use how we would normally use a black (text, background, etc.) but it won’t feel stark or contrasted when paired with our primary brand color. The cool hue provides familiarity to our “black” and serves as a basis for building out the rest of our color palette. Speaking of, let’s move on to opacities!

Opacity Galore

With our Brand Black created, we can now easily generate a color system to be used on elements and backgrounds throughout our product using opacities. I took our Brand Black and made 5 other copies, lowering the opacities by 20% until the last one where I go to 5% for light backgrounds keeping the background as a solid #FFFFFF white. Then, I do the same with a dark background using a pure #FFFFFF as the basis and lower the opacities the same way I did for the Brand Black. See below!

Blacks used
Whites used

As you can see, each of these colors have the same base hue and keeps them looking and feeling consistent as a palette throughout your application. No more having to guess what colors and hues will match with endless trial and error testing!

With matching hues, these neutral tones will serve as a basis for colors of different neutral elements. I tend to make a key for what each one of these will represent, and using them together makes for interesting combinations of elements that you can use to your advantage in different scenarios.

In Product Design Practice

Here’s a quick concept example I made using the brand color and opacities I mentioned above:

Quick example I made, can't wait for GOW!

As you can see, each of the colors have a mixed hue of our primary brand purple color while keeping the overall feel and accessibility consistent for users. None of the colors feel stark or out of place and we have the ability to use our brand color as actions with neutral elements not feeling out of place or distracting.

What About Passing to Developers?

Okay so now you may be asking yourself how you can communicate this system with a developer and how it would work in code. It’s actually quite simple! Luckily for you, both mobile (yes, native too) and web technologies support an RGBA function as a way to specify color values. How does this work? Here’s a little key and example:

rgba(230,18,75,0.5);

// the first 3 numbers are your R, G, and B values (0 - 256).
// the last digit is the alpha, or opacity in our case
  // pass in a decimal number equal to the opacity you want 


// EXAMPLES

// For a black at 5% opacity
color: rgba(0,0,0,0.05);

// For a white at 80% opacity
color: rgba(256,256,256,0.8);

And voilà! You can create a key very simply for developers like you normally would with a style sheet of some sort, just exchange hex codes for RGBA function values for your neutral colors. I’d also recommend creating a guide around when and where to use certain opacities as a guide for your design team and development team to keep this usage consistent for user patterns.

Hope you found this useful and insightful!

June 19, 2020No Comments

Apps That Make MacOS a Better Operating System to Use

Even as an Apple fanboy that loves MacOS and iOS, I know that like any software, it isn’t perfect. Not to mention the lack of customization options and (at times) a cluttered interface.

Over time, I’ve found a few apps that replace default Mac apps that make MacOS a better operating system to use. I happily pay and advertise how useful they are just because of the sheer influence and impact they’ve had on my digital workspace and workflow.

In this article I’ll happily share them with you and (hopefully) dodge the dozens of questions I get every time I post a screenshot of something and happen to include one of those apps. Kidding! But no seriously, I need a place to direct people that ask this over and over ?

Bartender

https://www.macbartender.com - $15

Example of how the Bartender interface works

I’m the type of person that likes to have the least amount of visual clutter and items in my view when I’m working. I tend to get easily distracted by icons and notifications and have geared my digital workspace to avoid that.

Bartender has been one of the best apps for this quirk that I have as it takes those 10–20 icons that show in your top bar and hides them in a secondary bar you can toggle on/off easily. No more having to get distracted by random red notifications and status updates!

Alfred

https://www.alfredapp.com - free or $19 for full

Alfred spotlight search interface

To be honest, I’m still baffled that Apple’s Spotlight feature is as poorly made as it is. It has become quite unpredictable, doesn’t accept keywords to better filter what a user wants, searches unusable files, mixes files with apps in search, etc.

This is where Alfred comes in. Alfred is basically a customizable version of what Spotlight should be. Not only can you customize the look of Alfred, you can also add and create “workflows” to make your own shortcuts that make your life easier. Alfred also uses certain keywords to better understand what you’re looking for and what actions you are trying to take. For example, if you just type a name it will search for apps, but if you type “open” then the file name, Alfred will switch from looking at your apps to looking at files you can open.

uBar

https://brawersoftware.com/products/ubar - $30

uBar dock interface

I get asked about this app the most and I can understand why if I’m being honest. While MacOS default dock gets the job done, it doesn’t try and do much more outside of that (possibly for better battery management). uBar takes your dock up a notch while also making it quite nicer to use, while customizable and nicer to look at.

uBar creates a smaller dock that can hold favorite apps you have, provide better context on notifications, generates window previews on hover, lets you choose which window to open to, lets you see a calendar on hover, and gives shortcut access to your main Finder folders and preferences just to name a few. I personally like that it feels more out of the way than the original dock and still feels in place in adjacency to the top bar. You can even change where it is positioned and the style of dock you’d like.

CloudApp

https://www.getcloudapp.com - free or $8 for Pro

Process of a screen recording in CloudApp

Just like Alfred, CloudApp makes the original MacOS screenshots ten times better. With CloudApp you can use a keyboard shortcut to take a screenshot (or record a gif!) and instantly get a link that you can share with others.

This app has been super helpful for me in my work life for sharing screenshots of design and code items I’m working on for instant feedback and no hassle of uploading. CloudApp is super fast and makes recording gifs when showing animations or click throughs very easy as well.

VEEER

https://veeer.io - free

Overview of the VEEER user manual

While there are quite a few window managers out there for Mac, I personally use VEEER because of how lightweight it is. It does what I need it to without using up RAM and slowing down what I’m working on. It also has a few small unique shortcuts like the way it alternates full screen and minimized windows.


Hope you found this valuable and I hope you try out the apps I mentioned. Got other apps that make MacOS better? Let me know which others I need to try out!

June 15, 2020No Comments

How to Put Your Music on Streaming Services Without a Record Label

After releasing over 9 albums of music I’ve had a couple folks reach out to me about being inspired to make their own music (thanks to those that did!) and were wondering how to get started. Outside of what DAW to use (I use Ableton) and the hardware I prefer, the main question I’m asked is how to put music onto streaming services if you aren’t represented by a label.

Soundcloud and Bandcamp are great free options but aren’t widely used amongst consumers in comparison to others. To get your music on Spotify, Apple Music, Google Play, etc. I recommend using DistroKid.

How it Works

DistroKid is a subscription service that acts as your record label and take care of submitting and maintaining the music that you have online. The base subscription ($19.99 per year) gives you access to uploading unlimited tracks and albums. They don’t take any fees other than the subscription, so you keep all of your streaming profits. There are other tiers as well that give you things like scheduling uploads, having more than 1 artist, and daily stats if you would like.

With DistroKid you are also able to choose 15+ streaming services and can decide which you would not like them to show up on. DistroKid will generate your own individual “label” (which is just a random number) and will have this personalize this to support the music that you upload throughout different services of your choice.

Probably my favorite part of DistroKid is that it acts like a software company. I have my own dashboard with overviews on how much I am making from streaming outlets, and can easily upload music whenever I want. There is also a great support team that has happily helped me with some issues I’ve had with my artist page and typos on music I’ve put out for example.

Lastly, if you happen to have a team that helps you out with music, there is a separate “Team” tab that lets you divide earnings based on how much was agreed on. It’s all automated as well for when new profits come in. I personally do everything myself, but definitely seems helpful if you have a band or split profits with a mastering/mixing artist.

Hope you found this helpful, and would love to hear any music you put online using DistroKid. Be sure to send me a link on Twitter ?

February 6, 2019No Comments

Why to Seek Unfamiliarity in Your Next Full-Time Job

As of when I am writing this, I am starting my first day at my new job tomorrow. I’ll be starting as a Product Designer at Dave, a financial tech company based in Los Angeles.

While looking for the next place to call home for my work life, culture was one of the biggest deciding factors for me. I believe that working with folks you can also call your friends outside of a work setting makes for the best outcome and work ethic at a company.

However, outside of culture, I was also looking for a role that was slightly out of my grasp and knowledge of prior experience. I was looking for something unfamiliar and that I hadn’t yet mastered. I’ve learned over my time in the industry that the best way to stay happy and challenged at a job is to work on things you haven’t had the exact experience with. It keeps you on your toes, keeps you learning, and keeps you yearning to get even better at what you do. You quickly realize you aren’t a master at your field, yet you can be a master at managing and improving how you approach each of these unique experiences.

Dave for me was a great step in the right direction for my career. At Dave I’ll be working on designing the future of finance as someone who has never designed specifically for this field, and for a change my job won’t only rely on what is looked at on screens. I’ll be working on designing real life experiences from brand to packaging and more. On top of that, I’m the first designer to be full-time at the company besides the CPO. As a result I’ll be working on developing a process around how design works with other parts of the company and probably even hiring and leading other designers as we begin to grow the team.

How this applies to your career and how you work can go many different ways, but I think the overall guidance of looking for something you feel confident yet unfamiliar with is a good place to start. The exciting part of life are the times we apply ourselves to overcome new obstacles, leading to a better you. Having the foundational skills for the job to rely on while using the rest of your skillset to learn and adapt I have found to be the best teacher in life, no matter how many mentors I have or books I read.

cowart-avatar-5-small

If you find the content on my website, YouTube, and elsewhere helpful and want to show extra support, you can buy me a coffee here ☕

gengar

© 2012 - 2024