First approach to mobile design

Some months ago, as a developer, I got caught by designing systems and guidelines, because in all my projects I always tried to have, in the end, a well cared graphic. But I always had bad results, and when I built some mobile apps or website, I always used frontend framework (such as Bootstrap) or pre-built components (I use React Native) to have some sufficient result.

So, I decided to start studying a bit deeper how design is chosen and made, when starting building an application.

During Black Friday I bought a course that focuses only on design from the point-of-view of developers.

After some episode of the course I decided to start dive in this "world" and so I downloaded Figma and started a new project.

I started from scratch, with a blank page so I had no idea of what to design.

I was with zero inspiration and a lot of will to start, so I opened Dribbble and I started searching for some design ideas.

Then finally I understood that if I would continue searching the "perfect idea", I would never start and inspiration comes by doing, also.

So, in the end, I decided to create the template of an eBooks app. I created a simple wireframe of the main screen and then I decided to create the templates of the Main Screen and Product Screen.

Here's my results.

I wanted to share this to receive some feedbacks about this, especially if there is someone that know this arguments and some design techniques or if something is wrong (such as colors or fonts). I'm still a newbie about this argument and I have a lot to learn, so any feedback will be appreciated!

Also, for the next future another challenge for me is to port to React Native code this template, after adjusting something, because could be very useful for learning new styles techniques.

Comments

[Michele]

Hi, first, thanks a lot for your response! I will answer to all your questions in order:

General

• With the bottom bar I use about the 90% of the width because I wanted to give the rounded effect, that it wouldn't be so visible with the width of 100%. About the height I think you're right, I built the template from the perspective of my screen and not from the perspective of a user that use the app from a real device. Increase the height would be surely better.

Home

• I decided to use large empty space between contents to make understand the separation between two "different areas" of the app. But now I'm noticing that in some cases the empty space is a lot! 😅
• For the progress bar there isn't a real reason, while I was editing borders I liked it very much!

Book detail

• You're right about the description, I initially used italic because I used the regular font style for the Author name, and I want to keep different, but maybe I will set author font style as semibold and a regular font style for the description.

Thanks again for your opinion, it opened my eyes on something that I didn't notice at all! I will surely post an update about this template, applying all the edits and perhaps adding more screens. Next time I will explain more the why behind my choices, because now I just post the screens.