Flutter Clock Challenge — Day 1 — The idea and wireframing

Roberto Juárez
Jan 3 · 3 min read

As you know the clock is running to take the Flutter Clock Challenge. Many people around the world will show their best skills to win this competition… I am aware there are only 20 days to complete this challenge, however, I decided to share with you my journey, get feedback and improve while I am developing the idea. So let’s do it.

My tools

Some tools I plan to use for the challenges are:

  • Sketch: This tool will allow me to become my idea to the final design (low and high fidelity wireframes, UI design and prototype).
  • Zeplin: I plan to use Zeplin to convert the final design and get code snippets fastly with the Flutter Extended extension.
  • Flutter: Of course.

The plan

As you know we have only 20 or fewer days to complete this challenge, so we will need to work fastly. The plan will be:

  • The idea.
  • The wireframing.
  • The UI design.
  • Project configuration (from Github).
  • Development and Testing.
  • Publishing.

The Idea

I have to confess I was thinking about many options, the first one was an idea about a clock I made when I was on High School, I studied digital electronics and I made a clock with a microcontroller and LEDs, this clock was like a binary clock, but after looking for the project, I could not remember how this worked exactly, it was 10 years ago, so I decided to look for another idea. IDEA 1 REJECTED.

The next ideas came from my nationality, I am from Guatemala and I thought I really would like to put something of my culture in this competition, so I decided to think about Mayan culture, and further, I thought that was a good opportunity to share with the world something about this civilization.

Thus the idea is using Maya Numbers to build the clock and add smooth designs and animations to give to the numbers a modern look… A little about the context, the Mayans used a base-20 system, called the “vigesimal” system, so we will need to design 20 symbols to add to our project then.

If you want to know more about the Mayan numeral system go to this link.

Low Fidelity Wireframing

After deciding to work with Mayan numbers, this was the time to put on the paper our ideas, so I will show you how the Maya numbers look, this will be my first low fidelity wireframe. Wireframe it is important for every project we want to implement, this will allow us to improve and iterate the idea fastly.


The last wireframe shows four examples of how can we show the time in the Lenovo Smart Clock face. We have 10:15 A.M, for example, this representation in Mayan number is two horizontal bars, which represents number ten (remember every horizontal bar represents the quantity of 5), this is for the hour, for minutes, the representation will be three horizontal bars equals to fifteen.

Final thoughts

The plans for tomorrow are to complete the high fidelity wireframe and start with the UI design (smooth shapes, shadows and so on).

I know this is only a little beginning, however, every big project start with an idea, so I will continue with my journey. I hope you can give me your feedback and motivation about this one. I will be grateful for that.

Would you want to reach me out? here is my info… 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