&Yes - Devlog 3 - Styling

Previously: Product Board and Ideas

UI Styling

I am not going to spend energy on styling for the time being. The reason for this is that I am not sure exactly what I am building yet, meaning each feature might evolve as I work on them. Requiring too much parallel rework of design stencils etc.

Watching some designers talk about how to do styling in a simple way for developers. One thing has come up multiple times, keep it simple. Try and only have 3 colours. For easy mode, white and black can be your first two colours. Leaving you one colour to use as an accent colour to highlight key actions. I don't remember the exact distribution suggestion but on the top of my head something like 60/30/10. So let's say I go with blue as an accent my system would have this colour scheme.

The methodology looks very appealing and requires little effort on my side right now. So I am going to try it out. Hopefully, it will have a better result than my past hobby projects that have suffered from my poor taste in colours.

I will also have to review fonts at some point, but not going to worry too much about that right now.

Check out these two videos for a more in-depth explanation:

Dark Mode

I am a heavy user of dark mode, so I do want to have support for it. The template did come with a framework to handle dark mode, so I am going to try and keep it.

Have heard from fellow developers about the pains of retroactively adding support for dark mode. It is easy to think that all you have to do is invert the colour scheme, but this strategy will give multiple surprises. Borders might not be visible enough, colours will clash in a bad way or not be accented enough. These stories make me want to include this from the beginning.

This is another reason for me fancying the simple 3 colour palette approach, as my two main colours are easily invertible. I might adjust the accent colour, according to the modes to ensure it pops enough.

Code Styling

As a developer, it is of course not all about what the user can see, but also what I have to look at when developing.

Since last time I have been spending some time getting comfortable with the template that I installed with the Expo client. The folder structure was a bit different than what I was used to, but also some familiarities from when I was working with Android development.

I did a bit of clean-up on the elements that I don't think I will be needing and restructured some of the components that I like but with a bit of personal styling.

For example, I wanted to be able to import all my standard UI components with import shorthand. So that I can write imports like this:

import {Icon, Text, View} from "fire-llama"        

To do this in React Native with Typescript, I had to add a dev dependency to "babel-plugin-module-resolver", the end config looks like this:

Another minor personal touch is that I killed the semicolons. I have worked on repos both with and without. The first time I worked on a repo without semicolons, it did mess with me for a few days. But it was very easy to adapt to once your brain adjusts its pattern matching. The other way however, oh it looks so messy.

How does it look?

So for now, this is what the app's home screen looks like. No accent colours for now and placeholders for the first couple of features I will be working on, a timer (based on feedback from my last post), and the feedback tracker.

Very humble beginnings, but this will hopefully grow organically into a swiss army improv app!

Stay fresh and remember to enjoy life!