My name is Aleksanteri Karanka though people usually call me saska. I was born in 1991 in Tampere, Finland, where I’m still living to this day.
I've worked as a full-time designer for ~year. Before that I worked as a full-stack developer (ranging from WordPress to mobile app development) for ~five years. In 2022 I also became a certified Web Accessibility Specialist .
At the moment (January 2023) I'm happily employed at Vincit as a UI Designer / Accessibility Expert.
In April 2022, I started the Daily UI Design Challenge with the simple goal of becoming a better UI designer. The idea of the challenge is that you get a daily prompt that you create a UI design of. You get five prompts a week for 20 weeks, totaling in 100 UI designs.
From these 100 UI designs I created, I handpicked ten for you to enjoy here. I tried to pick designs that showcase many different ideas and approaches so I hope you find at least some of them interesting.
A “landing page”… but for what? That’s the first question you’ll have to answer with prompts like this. I have my method: browse through a bunch of random stock photos until something sparks an idea. This time the idea was to bring together a bunch of contrasting nature pictures to create a landing page for a sci-fi travel agency advertising their trips to Earth.
While I think the layout, colors and typography look pleasing in general, there’s still room for improvement. I went with a bit too generous leading (line height) for the body text without really considering readability. Also, those gold titles above the larger headings lack sufficient contrast against the white background. Maybe, in this sci-fi universe, everyone has perfect eyesight…
Tools | XD, Illustrator, Photoshop |
|---|---|
Typefaces | Helvetica Neue, Futura PT, Didot |
Photos |
I saw this prompt as an opportunity to redesign something I use regularly: a public transport trip planner. In addition to showing the route, this view also shows you the position of your transport in real time. But what’s “meno”? The logo was a last minute addition to balance out the composition of a Dribbble shot I created.
In my experience, similar services with this kind of “real-time” updates are kind of choppy and unresponsive. It’s not apparent in the screenshot but I spent some time figuring out how to visually distinguish between a bus that’s stopped in traffic lights and a bus that isn’t updating it’s position due to connection issues.
Tools | XD, Illustrator |
|---|---|
Typefaces | Quicksand, Lato |
Map | ArcGIS / OpenStreetMap, license |
I don’t find the idea of a “smart home” very exciting. To me, most of these smart devices seem like impractical nonsense that create more complexity than value. So, instead of leaning on any of that, I designed a monitor for a dumb home instead. This is a physical device: a wall-mounted screen around the size of a smartphone.
What you are looking at, is a single scene, not three separate entities. At the top we have sky (current weather), the square is a house (indoors temperature), and in between there’s a number floating midair (outdoors temperature). Showing current weather might seem kind of pointless but the scene just isn’t the same without it.
Tools | XD, Illustrator |
|---|---|
Typeface | Futura PT |
Icon |
There's nothing that interesting going on here. I just want to point out how I created those illustrations above the text boxes. I used a stock icon (the magnifying glass) as a basis to build on: the dashed circle around and the blob-shaped background gradients were enough to squeeze out a bit more premium feel out of it. With a simple pattern like this, creating the other illustrations was a breeze.
Tools | XD, Illustrator |
|---|---|
Typefaces | Lato, Lora |
Icon |
I had had a discussion with a colleague about how some colors are so hard to utilize well in user interfaces. He pointed at color “salmon” (W3C) as an example that’s ugly in almost every context. I took this as a personal challenge for that day’s Daily UI Design: no matter what, I had to make salmon look good.
I did it! The end result does look aesthetically pleasing, at least to me. Too bad it came at a cost of pretty much everything else: scalability, usability, accessibility and what’s most devastating, it doesn’t even use the salmon color except for two tiny details. Maybe I’ll take another jab at the “Salmon Challenge” in the future…
Tools | Figma |
|---|---|
Typefaces | Turret Road, Readex Pro |
Photo |
I quite like this. A look this striking wouldn’t be appropriate for most uses but fits a workout tracker perfectly. The visuals from colors to typography exude this powerful energy like it’s constantly yelling at you, pushing you to break your records. I just wish I had time to properly finish the bar chart in the rightmost view with proper labeling.
Tools | Figma |
|---|---|
Typefaces | Oswald, Readex Pro |
There are countless of tools for checking the contrast ratio of a pair of colors. The workflow with such tools is: 1. Pick two colors. 2. Confirm that the contrast ratio passes a certain accessibility threshold. 3. If it doesn’t, adjust the colors and check again. Repeat until you get there. That’s a lot of adjusting and re-checking.
This UI removes the steps of checking and readjusting. The common thresholds (3:1, 4.5:1 and 7:1 as per WCAG) are shown in the color picker as sections separated by edges. And they are not just visual edges: the puck slides along an edge similar to the outer edges of the square, making it easy to stay inside a section.
Tools | Figma |
|---|---|
Typeface | Avenir |
Some days, especially when I created an interesting visual style, I would reuse the style for the next day or two. This is one of those instances. I see this reuse as “stress testing” the versatility of a style: how well does a visual style adapt to different use cases? Or, you could also call it laziness…
Most of the days I didn’t have time to create interactive prototypes but for the image slider (right) I did. I wanted to see how this—quite unusual—shape of slider would feel and animate with actual gestures. Try the fully interactive and animated Figma prototype yourself.
Tools | Figma |
|---|---|
Typefaces | Lexend Tera, Lexend |
Photos |
Again, there’s nothing that interesting going on in this one. I just wanted to pick this because I really like of how the product image turned out. I created it by combining two different stock photos (a bottle and a splash). What is maybe more interesting is that I managed to combine them so seamlessly without resorting to Photoshop—it’s all Figma.
Tools | Figma |
|---|---|
Typeface | Inter |
Photos |
This one, as a redesign, asks for comparison between the original Daily UI landing page and my redesign. For me, the more interesting comparison however is to the third prompt Landing page as now we have two landing pages. How did I improve in almost 100 days of daily UI Designs?
Probably the biggest win is that I got a lot more confident in color use, finding ways to stay within accessible contrast thresholds without sacrificing aesthetics. Also, notice how this time I’m not relying on beautiful stock photos as a crutch. Instead, I’m leaning solely on typography and it actually works. Great success!
Tools | Figma |
|---|---|
Typeface | Lato |
When I started doing these, I decided to post my favourite UI each week to my Dribbble. Towards the end I stopped doing that to ease the workload—this challenge is a lot of work in on itself. So much that somewhere around day 90 I actually slipped from the daily pace to extent that it actually took a few months to finish the last couple of weeks.
So, while technically I couldn't beat the challenge, I'd say it was a journey worth taking. There are a lot of lessons in the world of UI design that are best learned by bumping into them yourself—this challenge puts you on such a varied obstacle course that you are constantly bumping into something new.
If you work as a UI designer or are studying to become one, I suggest trying the Daily UI Design Challenge yourself. It worked for me!
saska [@] oeoe [.] fi 
saskak 
@saskaak 
saskak 
saskak