Image for post
Image for post

Well, the challenge continues… The last days I have been a little busy with other projects, so I have had difficulties with going forward with the challenge. However, I finally completed the design of my Flutter Clock. So come with me and review my work.

As you remember, I was using Sketch for building the wireframing and the UI design, however, while I was thinking about what pattern of design I had to select, I decided to use Neomorphism, it is a new trend of design for 2020. When I was trying to apply different shadows to get this pattern with Sketch I was not able to get the result I was expecting to get, so I had to use another tool I would like to share with you, this is Figma. After I did a test of the tool I have to confess I am amazed by this one, the tool is really good, furthermore, it is free and has an amazing web version with Cloud Store integration. …


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).

Image for post
Image for post
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.

Image for post
Image for post

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. …


Image for post
Image for post
https://flutter.dev/clock

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. …


Image for post
Image for post

Almost over a year ago, Zeplin provided a new door for developers to build their extensions to generate and display code snippets from different design resources. Since this great initiative, several extensions have been added to Zeplin, extensions for HTML, CSS, React Native, Xamarin Forms and many more.

I am a Flutter Developer and I lost a lot of time coding basic widgets from the design or getting the information about different properties like colors, shadows, borders, gradients and so on. So I decided to build my extension to generate the DART code with only select one layer from design.

After reading all the documentation provided by Zeplin and invest time to develop the extension, I finished and published it to the Zeplin repository… After two days, I am so excited to announce to you my extension called Flutter Extended is now published, so you can add it to your Zeplin projects and get started to use it.


Image for post
Image for post
Photo by Caspar Camille Rubin on Unsplash

I have almost five years to be part of this amazing world of development, an amazing adventure… I still remember one of the first programming languages I learned. Could you image which was? It was Python, a language intuitive and with an easy syntax… Then, I learned other programming languages: Java, C#, ABAP, Prolog, JavaScript, and so on… There is a universe of possibilities. Maybe, someone of you is familiarized with this learning line.

Every programming language that I was learning… JavaScript for the web client, C# for Windows developments, Java for multi-operating systems and so on… I thought each of them had a specific function, and in effect, thorough the years, I kept this perspective. …


Image for post
Image for post
Photo by Caspar Camille Rubin on Unsplash

Tengo ya más de 5 años de estar en todo esto del desarrollo de software, una aventura impresionante… Recuerdo aún uno de mis primeros lenguajes en aprender, ¿Adivinen cuál fue? Fue nada más y nada menos que python. Un lenguaje bastante intuitivo y con una sintáxis que es una maravilla… Luego prendí nuevos lenguajes: Java, C#, ABAP, Prolog, JavaScript, etc… Todo un universo de posibilidades. Alguno de ustedes quizá se sienta familiarizado con esta línea.

Cada uno de los lenguajes que fuí aprendiendo… JavaScript para la parte cliente web, C# para desarrollos en Windows, Java para hacer el sistema compatible con varios sistemas operativos, gracias a su máquina virtual y así sucesivamente. …

About

Roberto Juárez

Engineer, Writer, Musician and passionate about technology.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store