It’s Clément again! Welcome to the 9th edition of the CU Design newsletter – a curated set of learnings, inspiration, resources, and tips.

If you’re not familiar with CUxD (Cornell User Experience Design), we’re a centralized community for UI, UX, and product designers at Cornell. We learn and grow together both professionally and socially!

CU Design-a-thon is a three-day, virtual event that brings student designers together to craft innovative, user-centered solutions.

Students will work together to address a specific problem and visualize their digital product by creating an interactive prototype (no coding required!). During the design-a-thon, students will have the opportunity to learn from industry professionals through beginner-friendly workshops and meet other student designers from all across the country.

We hope to help designers grow both soft and hard skills in empathizing with users, defining a set of goals and needs, developing products, and improving confidence and creativity as a designer. Learn more here!

This week’s topic is about designing for dark mode. Spoiler: it’s not just flipping the colors!

At first glance, dark mode might seem like a simple inversion of a website’s colors. But there’s actually several decisions that go into crafting a thoughtful dark mode experience, involving contrast, color usage, or accessibility.

Here’s a deeper look at how to design great dark modes:

Avoid making the background pitch black and text bright white. Pure black and white creates an uncomfortable, high contrast that cause glares on certain lower-quality screens. Instead, try using dark grays and off-whites to create a softer, more pleasant experience.

In light mode, we usually rely on shadows and lighter colors to create visual layers. Shadows usually don’t show well on dark backgrounds (and using a light shadow would be unintuitive and visually unappealing), so you have to flip this thinking.

To separate sections, you can use varying shades of dark or subtle lines, which establishes a better sense of depth.

In dark theme, accent colors should typically be lighter and desaturated to stand out against the dark background without being too harsh. Making a color desaturated means removing some of its intensity by mixing the color with gray. So for example, a vivid navy blue might look great on light mode, but should be muted a bit in dark mode so it doesn’t vibrate against the dark background.

Some apps now offer two types of dark mode:

You might recall that earlier, I mentioned that pure black can feel harsh – and that advice still stands for default dark modes (like “dim”).

However, in some cases, using pure black is intentional: certain devices offer a special setting where OLED screens can completely turn off black pixels, help save battery.

I designed a web app for AppDev last summer that allowed me to try a lot of new things within design! It was my first time dealing with responsive design, creating a design system from scratch, and considering new interactions. I was the sole designer on the project, and I got a lot of ownership when making more product-oriented decisions as well. Another thing I valued about the experience as a designer was working closely with developers, because it helped me visualize how my designs would come to life and understand the technical side of a product. Feel free to reach out at [email protected] if you’d like to chat more about my design experiences!

Some cool designs to for your dopamine hit!

Have any feedback or want to see something on the newsletter next week? Email us at [email protected] or reply directly to this email.

See you soon,

Clément @ CUxD