This weekend the weather was not encouraging to go outside as you can see below.
So, I decided to hack a small project for fun.
The idea
A few days ago I was looking at a spreadsheet I keep with the list of all projects I can remember I started at some point in my life. I call this document "Personal Project Portfolio".
While looking at some of the projects, I was wondering if I could share them on my blog as it would be nice to have them public so other people can read about them or maybe find some inspiration on non-finished projects.
I don't know why but writing an article listing all these projects didn't appeal to me. Then I thought maybe there's something out there I can use to properly input these projects and get a page listing the ones I mark as public.
And that's the idea, a tool where people can add their projects, maybe elaborate on them over there and share on a public feed of projects the ones that are most relevant.
So, let's go!
A visual idea
First thing I did in parallel of writing this blog post was to open AdobeXD, which is the design tool I'm most familiar with, copy an old project just so I don't start from zero and start wire-framing/mocking the ideas for the final product.
Right at the beginning, I decided to choose the typeface and sizes I'll use in order to keep things consistent.
This article was very nice to understand better how to get typography right on designs: https://www.smashingmagazine.com/2018/06/reference-guide-typography-mobile-web-design/
I was initially doing a black and white mock but then I decide to add some colours to it so it become move live! Why not? It's a hack project isn't it?
During this process I found two very useful tools:
- https://grtcalculator.com/
This was super useful to help me define a good looking typeface and appropriate sizes. - http://colormind.io/image/
This tool was super handy to extract some colours from a nice design I saw on the internet. I liked a lot the colours there, but didn't want to extract them manually, so I just uploaded the file to colormind and voi lá!
The tool gave me the colour pallet I wanted to use very easily. Below you can see the colour palled I'll be using.
Now with Fonts and Colours defined, I moved to layout the presentation on a nice design :)
I also recorded my screen while I was creating the mockup, if you like seeing what happened you can see below:
To be continued...
