Today I worked on a small timer application I've been inspired to make. Namely, I've started working on the designs for it. I am always curious about how designers start their projects, as I find the brainstorming phase the hardest, so I am trying to approach these designs starting with concepts and low-fidelity.
Designing a timer application called "Third Timer"
Goal
Practice my Figma and design skills as well as attempt to create a visually appealing design.
May 21, 2024
May 22, 2024
Today I explored fonts and colors. Very hand-wavy, but using a color palette tool, and font tool, wasn't as easy I thought it'd be. The amount of available options and combinations is unmanageable and I tried to at least have some sort of an idea of what I want to "express".
May 25, 2024
Just a little bit of time iterating on ideas. There wasn't much structure to this. I played around with colors and gradients. These colors ended up really weird, but it was still interesting to work with. Looked a bit into icons, but it feels to hard to really understand what works best, what looks good.
At this point in the design process I wish I had some more direction and maybe experience. I'm just kind of throwing things out there, experimenting.
May 26, 2024
Taking Jedmunds advice on using actual Mac window elements to make the design feel more real or be able to see it in context. I simplified the colors a bit, but not that much, but definitely feels a bit easier for sure than with the brown palette I had played with before. I am aiming for this to be a utility app, inspired by other apps, and that means restricting it's size. I tried to make this work for a larger window size but it felt like a lot was missing and there is more design thinking to be done there, and, since I wanted to keep this design exercise more focused I felt that this restriction is good.
I like what I've mixed up here. The window bar has a pretty useless element (repetitive maybe) - but somehow I really like it and want to explore it a bit more...I had an interesting idea for how to make this app feel a bit more alive by showing an animating border around the large action button, but I don't know how to do this in Figma so I am looking at some tutorials right now (or frankly said I am not entirely sure what it is I want to show).
I really like this direction. It's definitely still missing some coherence but I feel I progressed. Adding the window elements definitely made it better.
It's also a bit frustrating seeing though how simple this application is and I can't manage to make it look decent. I am looking at other applications, and I am starting to wonder if I should just adopt the native Mac elements to give it a bit more...coherence for a lack of a better word.
Anyways, this is what I wanted to check in with. I will keep exploring ideas.
May 27, 2024
I made some small incremental progress, and I'm probably happy with what I have now.
I think I need to sit down and study some more material later, and I'm hungry to develop this app, so that's why I've decided to end the design process here.