Basic Key Principle of Design For a Front-End Developer

Is it necessary to have basic ideas of design for a front end developer? I don’t think so. This is not my job. It is the burden of designer. Why should I eat my mind on designing part. Being a front end developer I also used to think in the same way.

Let me tell you a story, few months ago I started working on real world projects. Being a front end developer I got the design, and converted it according to the design without putting any extra effort. I didn’t pay attention on basic things, like buttons, how it will look on hovering, how the whole website will look on mobiles etc there were many things where I must have paid attention. As the front end part got completed I passed it to our backend developer of the project, Prashant Abhishek (full stack developer, most experience guy in our team). After having glance on front end part he asked all those sort of things where I should have paid attention. I directly replied I didn’t get the designs of all those things. Then he explained, being a front end developer you will not get each and everything. Sometime you will only get the wireframes at that time what will you do, anyhow you will have to complete the project, which must be attractive, beautiful, keeping in mind, who the users are. And many more responsibilities of front end developer he showed me. Since then, gradually I developed few basic ideas of design by reading, referring here and there.

Although web design is a creative process and takes a lot of time to understand fully and master on it. But you don’t need be a master, just a few basic ideas are enough to create pleasing design and prettier web pages.

These basic ideas that makes a website look good.

1. Balance

Balance is all about to ensuring the white space around any element. Keeping the gap symmetrical on both left as well as right side. Similarly just like bim-balance, keeping the weight symmetry on both side.

Example

The above is an example of asymmetrical balance. You can clearly see the white space on right side of the dog is larger than the left side. You have to be careful regarding this silly mistakes.

But at the same time you can see the white space around the modal. One of the best example of symmetrical balance. It takes hardly few seconds to checkout whether the element is symmetrically balance or not, which makes your site prettier.

2. Grid

Grids are collection of columns and columns are made up of horizontal and vertical rulers which divides the page into different discrete sections.

Example

You can checkout the http://slackhunt.xyz/ , how the page is divided into different columns which makes the site readable and at the same time the page can be easily absorb. One of the best benefit of grid system. A grid system can also help in maintaining the balance.

3. Color

Every colour sends out a message, and it is up to you how you take it. It is important chose nice colour but it must be right, again it is up to you how you decide the colours. Pick two to three colours as per the design and then use it. The best example of choosing colours you can see in above example http://slackhunt.xyz/. See the colours of heading on cards, different categories in left sidebar, at the same time you can see the logo. I think you got the point what I want to say. You can’t just pick any colours, when you chose it must belong to the same colour palette. You can also have a look of http://www.colourlovers.com/ to chose palette as per your choice.

4. Graphics

Graphics plays an important role to make a website much prettier. It adds visual messages. But how much it is necessary to learn about graphic design? No you don’t need it. You don’t need to be a good in illustration or in photography. Just a few basic skill in photoshop, choosing images as background can lead to a good graphics of website.

Example

Checkout the http://www.premiumfreebies.eu/web-templates/minifolio-free-template/, just the background-image, colour combination and font-style used in makes it more impressive. Similarly you can find no of websites like this.

5. White Space

To make a site more readable and pleasing, white space is one of the easiest and effective way. White space takes whole page to a different class, which enhance its quality. So never forget to add white space or negative space around the text. It increases the readability of the text. It helps in communicating your page with the user.

Example

Checkout the http://learn.shayhowe.com/html-css/ one of the best website to learn HTML & CSS and begin front end course. See the white space around the text. Text are easily readable, once you start going through the text, it seems that the page is communicating to you. This is one of the best advantage of white space.

6. Consistency

Use of colours, font sizes, icons, buttons etc must be consistent through out the pages. Maintaining consistency through out makes a website great. Inconsistent pages may look great but it convey wrong messages. As you know all designs are communicating, either in a way or another. So it is up to you how your page communicate with your user.

Example

If you go through the pages of https://www.budocore.com/ you will find a great consistency has been maintained while designing. You can see colours, font style, button’s properties etc all are consistent through out the pages.

A web designing course consists of lot more things which makes it more difficult. For e.g. accessibility, typography, usability etc are necessary for a good web designer. But being a front end developer you just need to have the above basic ideas in order to produce a good website.