My projects color palet building. 3 steps forward, 2 steps back

 This week was a strange, hard but fantastic week!

I have worked all week on my all time first UI design for a mobiel app. A strange set of feelings but i learned so mutch about Figma, my project and myself. Figma was my only tool I used. A complete focus on one tool for one job. The first days it was a dance of 3 steps forward and 2 steps back. Downright frustrating. But fun!

split my project

From the moment I got the hang of Figma a bit, especially how components work. I got an enlightened moment. Let me split my project into the smallest possible pieces. And just concentrate on that part. That's the big lesson I learned for myself, not only for the project but also for my future career as an app builder.

color palet



For example, after the analysis I had made, which you can find here, I knew that I wanted to work with a certain color palette. So I focused on the colors. May sound stupid, but it isn't. I studied the colors of the client and poured them into a color palette. When the color palette was ready I wanted to choose a contrast color. But that turned out to be difficult as long as I didn't know the background color of my screen. So I only chose the contrast color afterwards.

The base color of my project has turned green. Because the city for which the app is made radiates complete nature. And the colors have also been incorporated into different logos of the city.

So two birds with one stone

Just being busy with the colors I not only learned a lot about the colors, but also what I can do with colors within Figma. So two birds with one stone.

the background

Now that the colors are known, I can concentrate on the next part, the background. An important part in my view. The background will be the basis for the appearance of my mobile app.

And what were the characteristics of my design? Easy to read at all times of the day. Not very fine print, because the older people among us don't want to constantly change glasses. And since that is the age range of people visiting our city is 50+, I have to take that into account.

To keep everything legible in a natural way, I opted for a white background with a little green in it, to break the white and stay in the style of the color palette. With a number of (palette) colored objects in that background. Objects that break the square of the screen and radiate nature. I chose parts of circles and ellipses. You can find the design here.


Then I let my creative brain take its course, within the previously set of limits. And the rest is history hahaha. Sounds good dont you think?


In the next post, I'm going to talk about the how, what and where of the navigation and the welcome screen.



Do, believe and be happy,


Stefaan


Thanks to "The Future Academy" on Youtube on the theme of colors.

Thanks to @lindsey_design on twitter.

Comments

Post a Comment

Popular posts from this blog

Thinking & coding: Linking Firebase to my Flutter App. Watch out for a important detail.

Image
The last programming session was a leap in the dark. For the first time I linked a FireBase project to an app. On the Firebase website you have to make sure you use the explanation for "frameworks", below that you will find the installation guide for Flutter framwork. The complete installation, including the dependencies and such, is well described. However, I got a whole series of error messages. My heart sank for a moment. I didn't understand any of the error messages. All I could tell from the error messages is that the error probably occurred somewhere in the "app / build.gradle". I started reading this file and there I saw the minumum SDK level. And then the light was turned on in my dark tunnel of challenges. Long live Youtube. I had watched a video by Andy Julow prior to my programming session. And in the video, he warned about the following. The mininmum android SDK version is at 16. The version must be at least 21. And indeed, when I changed this settin...
Read more

Software developer yes, but where to begin?

Image
The decision has been made  and I am going for a career as an SE, what now?  What are we going to program and how do we get started?  Whe start immediately with two very difficult questions.  How are we going to answer these? What do I want to achieve with a career change?  Freedom and being creative.  Those are my conditions that are my priorities. From this I can already rule out the first option of industrial programming.  Because then I have to go to factories to do programming.  So no freedom.  So a big no no!  We go for independent programming.  Freedom guaranteed! But what are we going to program?   Where can I use my creativity?  Where can I start using the other hemisphere of my brain.  So in your own creations.  Own designs and ideas.  People talk a lot about apps and I have plenty of ideas for that.  That's what we're going for!  Long live creative freedom. But how do I generate an inc...
Read more

Thinking & coding: the Custom Navigation icons

Image
Starting is always difficult because I am out of my think rhythm. Those older brains need to heat up for a while. A glass of wine sometimes helps ;-) Icons Today I want to bring the icons, which I used in my Figma prototype (which you can find here ), into my project. You can find what I programmed last time here . Since I actually had no idea how to get started, I started searching on Youtube. And there I got a very clear explanation via the channel of Reso Coder. The link to the corresponding video can be found at the bottom in the thank you section. I can therefore export my icons from Figma as SVG. Then I can have them mapped via the website Fluttericons.com for use in Flutter. A wonderful tool, especially for large libraries of icons. But it did'nt work for my icons that i exported out of Figma.  I have no idea why. For the moment i used standard material icons. Background image I exported the background of my prototype(Figma) to my project.  I got my background in a...
Read more