Common Mistakes in Web Designing
Typography: You must understand how fonts affect the design of a page, and your readers. Unfortunately, you are restricted to using only a few web safe fonts that are available on most operating systems. Even with this small list, it can be challenging to manage them in the right way for the best user experience.
Don’t mix too many fonts: Choose one font for headings, and another for the body. DO NOT use more then two different fonts in the body text! Consider this to be a general rule. For example, you could use “IMPACT” for headings and then “ARIAL” for the body.
Choosing the right font size: We usually determine our font size with CSS by either using percentages, ems, or pixels. It should be usually defined on the body’s font-size as 62.5%.
Alignment: Alignment is the adjustment of an object in relation with other objects, or a static orientation of some object or set of objects in relation to others. Alignment provides the structural framework of a design. The alignment can affect the mood of your page as well as how effective it is at getting its message across.
Be consistent: Be consistent with your alignment. Don’t align one element to the left and another to the right; this will only cause more confusion. If you align all of your text to the left, then align the headings and other elements in the same manner
Spacing (Padding): According to the W3C, the CSS padding properties define the spacing between the element’s border and its content. Spacing, padding, or even white space helps you to create a balanced layout.
Don’t squeeze elements: Give your elements space. Allow a minimum of 10px padding between content boxes or individual elements – as a rule of thumb.
Be consistent with spacing: If you choose to give all your elements padding of 10px, then great. But do not give your sidebar 10px padding, and the main content 30px padding.
Don’t stretch elements: Also, try not to distance elements too far from each other – as you can end up having holes in your design. Your layout should look full and consistent.
Related posts: