The journey of my Daily UI for 100 days

Namika Haiji Hamasaki
Hai-iro
Published in
5 min readDec 30, 2018

Daily UI is a service which sends a daily User Interface design prompt for 100 days. Around this time last year, I stopped doing it halfway. But my tweet of Daily UI inspired a person to start it, and the person accomplished Daily UI for 100 days. I was upset by my own uselessness and at the same time that brought me a spiritual uplift to finish Daily UI.

After that, I resumed doing it around this September. There are days I didn’t that, but I was designing even during traveling. Finally, I have finished 100 days of Daily UI in this month!

Here is my Dribbble account which I put together my Daily UI.

A look-back

I look back on some works with my favorites.

My first goal was designing a UI and making an animation for that. But making an animation for every day was hard for me. That is the cause of the suspending.

01 Sign Up Animation

This is my first shot. I made a transition animation from a button to a loading animation seamlessly by Framer.

04 Calculator

I tried to make a real calculator which works by using Framer, but I had lost my bearing at that time. What purpose of studying Daily UI?

07 Settings

This design is also using Framer. I wanted to make a slider to control an image.

44 Favorites

For the first ten designs, I coded for animation by Framer, but I realized what I wanted to learn was motion graphics for UI. Timeline based software was more intuitive interface than code based. From the middle, I started to use Principle instead.

It’s time to try making various user interfaces

There are a lot of restrictions on actual work, but Daily UI is a chance for an experiment to create a different design.
“To design what I want” was my new theme after I resumed.

40 Recipe

This design aims to make users see both a process and ingredients at the same time on a mobile device.

71 Schedule

I often add a deadline to a calendar app. What I wanted was showing a deadline separately from a schedule.

80 Date Picker

Sometimes a date picker UI confused for me. “Which one of start and end dates had I chosen?” Therefore, I applied a different color to them.

98 Advertisement

This is the concept of interactive advertising. I have tried some painting app on iPad lately. And I thought if a free app shows a coloring banner and is possible to paint it, it would be more fun!

What colors do I like?

Colors which product designers can use is restricted, usually by brand colors, etc. But there is the freedom of the color palette in the Daily UI challenge! You can use any your favorite colors. Through this challenge, I was getting clear which color I love.

Looking back at my outcome, I realized that choosing a warm or soft color frequency. Mainly I had fun using pink because I have never used it in my work.

21 Home Monitoring Dashboard
22 Search
55 Icon Set
64 Select User Type
76 Loading

I created some loading motions with square and circle.

Develop a design motif

I designed the Daily UI logo for the theme of a logo. After that, I made it move for splash screen animation and used it for Redesign Daily UI Landing Page, the final theme.

52 Logo
93 Splash Screen
100 Redesign Daily UI Landing Page

Things what I’m glad I did

Other designers gave me feedback for a design what I uploaded on Dribbble. That made me excited!

Thanks to my husband, I kept doing this challenge for 100 days. He said that if working for just life, you can’t absorb new things, so you should commit something every day. Although I have +10 years experience, this daily challenge brought a fresh air for me.

Design Data

I uploaded all Sketch, Framer and Principle files on GitHub.

You can see all the outcomes at Dribbble.

Here is the Twitter moment I put together all the outcomes.

Thank you for reading!

--

--

Namika Haiji Hamasaki
Hai-iro

Senior Designer at All Turtles based in San Francisco / My work at http://namika.hmsk.co/