Flutter Clock Challenge: Day 2-4: The Wireframing and UI Design Part 2

Roberto Juárez
Jan 6 · 3 min read

The clock continues running and there are only 16 days to complete the challenge, so let’s keep pushing stronger. This time I will share with you the work I did on the 2nd and 3rd day of this journey. Let’s review it.

High Fidelity Wireframing

After the low-fidelity wireframing is completed, it is time to pass the sketches on paper to software, this part it is important to improve the elements correctly (sizes, shapes, positions).

Clock Example — 12:11 AM

The high-fidelity wireframing is so helpful to clarify details about the main idea. I tried to replicate different scenarios to show different times. This is the result.

Then, I built the main components of the 20 Maya numbers, this part will be so helpful to replicate wherever we will want to build a specific number.

After I completed different artboards and different scenarios, I found an interesting pattern, as you note every element are built by horizontal bars and spheres and there is a loop from 1 to 20, for example, from 1 to 5 you put one sphere, then another sphere and so on until five, and then you repeat this pattern. Interesting! We can put some motion animation on this pattern, could you imagine it?

Put the first sphere, then an animation to duplicate this one and put it to represent number two… After number four you can join all spheres and then build the horizontal bar.

Let me know your feedback below.

UI Design — Part 1

The first part of the user interface design will be about building the twenty main numbers, these will be our main components over all the design. So let’s work on it.

I know there many ways we can take about design, but this is my first draft… I tried to build a soft UI and this is the result.

The horizontal bar has a gradient with four colors and it seems the shadow does not work as I wanted, so I had to change the direction of the linear gradient, that was the result.

Note: About number 20, I needed to work on an illustration for the cacao which represents number zero in Maya Numbers.

Final thoughts

I am enjoying this challenge, while I am working on different stages I found problems to implement something I have on my head, however, this process allows me to think about new ideas about the design… As you can see there is too much to do yet, however, I hope to push stronger this weekend, so I hope to work hard tomorrow.

Would you want to reach me out? here is my … Would you like to show your support? Smash the clap button 👏 many times as you want to give me more motivation.

Flutter Community

Articles and Stories from the Flutter Community

Roberto Juárez

Written by

Engineer, Writer, Musician and passionate about technology.

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade