This element was still outstanding and I wanted to integrate it into my second iteration to test with users, I come from an illustration background, as such I understand a lot about visual design but had never applied these skills to UI design which is a field in its own right.

I wanted to challenge myself by building all the UI elements myself.

Research behind visual design choices

I wanted to follow the green design trend I had come across in the UI pattern challenge of choosing colours that were more energy conscious (Caposino 2024) and bake my ethos into the design as much as possible. It turns out that Tom Greenwood has looked into this and explains why on devices with OLED screens certain colours drain less battery. OLEDS work differently to LCD screens, OLED screens essentially have a tiny light for every single pixel and certain colours cost less energy than others to emit, LCD screens emit the same amount of energy for every colour displayed (Greenwood 2021).

This information is only useful however OLED screens are widely used, historically LCD screens have been more widely used as they are cheaper to produce and also last longer because OLED screens have organic compounds that degrade over time (Repart 2023) but Apple has been using OLED screens since the iPhone 12 (Apple 2024), Samsung has OLED on all their new phones and even their budget friendly A range will start having OLED screens starting this year as competition has driven the price down (Bonggolto 2023). Armed with this knowledge, it’s time to start figuring out a palette.

Other energy saving tips that Greenwood shares are: using vectors instead of images, using animations instead of video embeds, using system fonts instead of forcing your user device to host a font package (2021).

So what colours am I choosing?

According to Greenwood, the more energy efficient colours are red and green and in general to have darker colours (Greenwood 2022).

Greenwood. 2022. Energy usage per colour. [digital image] Wholegrain digital [online] Available at: https://www.wholegraindigital.com/blog/dark-colour-web-design/ [accessed 27th March 2024]

Dähnert, a freelance UX designer took these suggestions and created some colour palettes as suggestions (2022). Whilst I liked the palettes I did not think they had enough contrast which I consider to be one of the most important elements to effectively draw the eye of the user but I did know that I wanted to focus on greens as my main colour, especially dark green.

Darkmode and accessibility considerations

If darker colours are better then the idea of building the app in darkmode, something which I can see is becoming standard offering across many of the apps I use in my day-to-day, is worth considering. Google found that their darkmode saved their users battery life (Tung 2018) which fits in with what Greenford explained.

However darkmode needs to be handled carefully.

Dähnert has some thoughts on accessibility that I want to keep in mind. Namely that white letters on a black background can actually counter your inclusion attempts as with certain kinds of vision impairments this makes it hard to read - it is better to have slightly softer contrasts.

A Nielsen Norman review into the matter found that overall for the general population light mode actually does better, but that dark mode should be considered if it’s for sustained reading or you are designing for people specifically with impaired vision. Giving users the option of dark mode is the best middle ground but that if something is to be displayed in dark mode then it is important to have your text be slightly bigger than when it appears in light mode or else it’s harder to read (Budiu 2020). This is especially useful insight because I am designing for phones that have limited screen real estate.