Web Design by/for a Non-designer - Part 1

#web #design #beginners #figma

Why this article

I aim to narrate my thought process behind web design which I am doing it for my web app and seek advice and validation from the experts here.

You guys are awesome

I recently joined Dev.to community and I must say I enjoy reading the discussions here and passion of the people is infectious.

Background about me

Since, this is my first post, I will give some background about me. I am from India, been in IT for 9 years now. I have mainly worked on data-modelling and Oracle application implementations. I have been wanting to work on Web development for years now.

Recently, I moved to a role I love and which involves working with web and juggling multiple technologies. First thing I did was to kick-off my personal project as I wanted to learn some technologies so that I can be up-to speed with latest in web.

The Project

3 months back I started my personal project called Resume Builder. It is inspired from NovoResume which is an amazing website but paid.

It involves different templates of CV which users can download in pdf format. I had an idea to build all this as open source so that template building can be more democratic and people can request certain templates to be created on this site.

There are 3 reason I decided to go with this project :

It was very UI driven project and I wanted to learn React.
It is heavily design focused project and I am very bad in both design process and CSS. Hence, it is good opportunity to build everything from ground-up.
Open source and free education online has give me a lot and Resume Builder seems like a thing which many people can make use of.

The Design

Let's get to the meat now. I am done with some part of the back-end of my web app and I thought now may be a good time to start designing a good homepage and give my web-app a design language. So after lots of crappy CSS mock-ups and scrapping them I decided to follow below process :

1. Settle on a good design tool for creating mock-up

Creating UI on CSS takes time, especially when you are learning it. Also, it is tough to imagine how your design is moving forward. So I decided that I need to work on a tool where I can create quick mock-ups and get a good understanding of the design language I want to follow.

There are not many free tools and only good options that I found were :

Adobe XD
Figma

I decided to go with Figma as it is available as Web App and very easy to get started with. It is also completely free for personal use.

2. Decide on the content of the page

Alright, as now we are sorted with the tool, I need to think about what i want on my homepage.

Logo

I haven't designed it yet. But for now I will keep it as placeholder.

SignIn/SignUp Page.

I wanted to give a "dev"vy feel to the signIn/SignUp page so I decided to make it little geeky with a JSON like template. Not sure how it is but I am liking it for the starters. Any kind of comments/crtique is welcome.

But it is too white as of now and every time I try to use colors I screw up. Anyway, I happy that I have made progress on this front.

Some Carousel of Resume templates.

I surely need carousel/collection of some "Hall of Fame" resume templates that will displayed on the homepage.

So these are things I need to arrange on my page and after 2 hours of dabbling I came up with very simpleton design as below :

I know it is pretty shitty but I want to share few things that I am finding very difficult here.

Scaling - Inspite of Figma providing exact Desktop screen resolution templates, I am not able wrap my head around scaling. If you look at this simple design carefully, the login is page is pretty humongous, it is half page. Which login page in the world is this big.
Negative/White Space - I love neagative space but I don't have any idea how to use it and if I attempt to use, I end up like my login page, no colors - only negative space & no colors.
Typography - I am sure that I want to go with a sans serif font. This is why my login page I chose Righteous and it was looking slick to me until I put it on my homepage in my Figma mock-ups and Yuck! it looks hideous.
Backgound/Colors - I feel this is my most challenging task and I have no idea as of now if I will be able to do it myself or will end up copying from somewhere. :(

This is it for now.
I will be adding to this post every week and documenting the whole process of this design completion as it may help any of my fellow devs who may be in same dilemma of "how can I learn to design"

=========================

Any input/advice/comment/criticism is graciously welcome. Please do comment if you think that can help me move in right direction.