Hello, I am Devnarayan.R. I am 15-year old and I did my first project for Responsive Web Design Certification yesterday. It was a Tribute Page to the Indian Freedom Fighter Mahatma Gandhi who has inspired me a lot.
Here is the link to my project. I am just a beginner and please suggest improvements.
Plzz help me to improve.
The only improvements I would suggest would be design wise, but since you have just started and (I am assuming) this is one of your first if not the first website you have made, that is fine.
Do you want suggestions from design perspective or do you want to get into that yourself later?
So I will share with you a pdf file with the new design. I want you to try and explain how it is different and what is improved.
I will guide you through and give you information on design principles (if you are not sure just tell that, and I will help you figure it out).
Also, I used the same color you used as well chose the same image just to prove a simple point before I talk about how to choose better colours and a better image for a better visual appeal…
Oh it’s really better now.
You reduced the size of the box containing image. And you changed the font styles in many places. You also changed some colours also. You italicised many of my texts. It’s really good now.
Hierarchy:
Any good design must be easy to read. For that Hierarchy is very important. It allows people go through the content easier.
In your case your font size was too big on many instances. I simply made 4 different sizes for text. The main header (Mahatma Gandhi), the sub headers (Who is Gandhi and other sub headers) the paragraphs themselves, and the sub titles (text below image and text below main header Mahatma Gandhi)
Contrast:
The color of the font you used had a very high contrast as compared to the background. That is, it was too dark. The hex code for your font color was #000 which is black. I used #333 which is slightly lighter gray
White Space:
This was the main problem with your design.
There was too much space between each piece of text. Notice how I decreased the amount of space between the main title (Mahatma Gandhi) and its subtitle (The warrior of peace).
Similarly between Who was Gandhi and its paragraph…
Also the space between 2 things that are about the same thing must be closer to each other vs things that have nothing to do with each other.
In your design the space between who was Gandhi and its paragraph was the same as the space between the end of that paragraph and the next title…
The main thing to keep in mind is that the contrast must be soft for the eyes. That is don’t use bright red text on completely white background. Make the brightness lesser. instead of #f00 use #f55 maybe…