Can't find the perfect font for your logo?
Get hundreds of logo designs in under 5 minutes by completing 5 easy steps
  • 1 Choose some designs that you like
  • 2 Choose your colors
  • 3 Add your company name
  • 4 Pick some icons
  • 5 Download your logo

Give it a try:

5 Web Design Basics Every Designer Must Follow

by Michael Crawford Tweet - in Website Design

Last updated on November 29th, 2017

HTML5&CSS3 ( Web Design Basics)

Many web designers believe that creating websites is much easier today due to sophisticated browsers and lightning-fast internet speed. But many aspects of web designing such as CSS responsive grid system are still alien to the designers, especially beginners.

Here are some web design basics that the beginners should keep in mind.

1. Grid System

The grid system is very old and was used for designing newspaper and magazine columns and rows. In fact, thousands of variations of arranging the rows and columns have emerged over time.

Grid Layout (Web Design Basics)In website designing, the importance of the grid is felt even more in the modern age. In fact, pre-fabricated grid systems are used by web designers to create responsive designs for different screens. The new grids come with coding languages. They are easily available to the designers as most of them are free to download.

Popular grid systems for web designing include Simple Grid, and Golden Grid System. For the beginners, simple grids are true options. They can then graduate to the complex grids to master the art of designing. For example, Profound Grid helps the experienced designers to create responsive designs for different screens of mobile devices.

2. Hierarchy principles

Web Design BasicsWeb designers should consider the way people like to read content on computer screens. While reading from left to right is common to a majority of people, many scripts involve reading the opposite way. Even these reading behaviors follow a complex set of rules and the designers should keep these reading patterns in mind when creating web pages.

The designers follow these patterns to place crucial elements such as call to action, logo and key images. The most important elements will be placed where the reader is expected to scan the page first.

A good knowledge of visual hierarchy helps in making strategies for right font size, typeface pairing, spacing and color highlights.

3. Fonts safe for web pages

Web Design BasicsOnce browsers supported only selected few fonts. Many fonts were already installed in the word processing software of the users. Any deviation from these fonts would result in seeing random symbols.

Now, however, most of the modern browsers come embedded with number of web-safe fonts. The designers can pay a fee to buy font services such as WebINK, Fontspring, Fontdeck and Typekit. But nice free fonts too are freely available from services such as Google Web Fonts.

4. & 5. Images and colors

Flat Color UIFor beginners, one of the most important basics to follow is to stick to 2 or 3 colors. Of course, the colors should echo the client’s branding, while highlighting the important content on the web pages following the visual hierarchy rules.

When incorporating images, you should consider that viewers prefer the websites that keep still. So, avoid moving images and resist urge for use of flash.

Select only those images that have some purpose relevant to the business website. Visitors will lose interest if they find irrelevant images as a way to fill space. Images should illustrate the accompanying text that may be describing a product.

The designers should also consider licensing restrictions associated with images. A majority of images require you to by licensing rights for commercial use. This is important to avoid any legal issues arising later. Another consideration that helps is regarding the file size. Very high resolution of image files does not serve any purpose and instead it delays the loading time. Since web resolution does not go above 72 ppi, there is no point in keeping a file size of higher resolution.

Create Your Website

I am a young designer just starting out in the industry with big hopes. I currently do freelance work, run a blog, write for designs and hope to push my new design business worldwide. Twitter | Google + | Pinterest Twitter | Google+

Say thanks or boo to mce_crawford



Need a Logo?
A powerful logo can give a company easy recognition. Create your unique business logo using our AI powered logo maker tool. Or, hire a designer to get your logo.
Best for when you want a logo in minutes. Our Artificial Intelligence powered logo maker creates dozens of unique designs in minutes. You can also edit colors, texts, icons and elements.
  • Uses power of AI & Machine Learning
  • Uses library of more than 10,000 fonts and 1M+ icons
  • No design experience required
  • Pricing starts at $20 but you pay only when you find a design you love.
Best for when you want to crowdsource ideas. Multiple designers submit entries for you to rate and review before you award a winner.
  • Fixed price packages starting from $199
  • Hand crafted designs from World-class designers
  • Dozens of concepts to pick from
  • Get 50+ designs in 7 days
  • 100% money back guarantee
Best for when you want to work with a single designer only. Explore the range of creative services offered by our highly talented designers.
  • Work with a single designer
  • Hand crafted designs from World-class designers
  • Options within all price ranges
  • Flexible turnaround time
  • Multiple revisions