Secrets of Web Designing

Things you need to know as a web designer

Creating a great design is based on the tiniest details. These details can cause a great deal of problems for beginner designers. Failing to follow the rules can ruin any landing page, leaving your brand looking unprofessional and even cost you conversions.

Fortunately, there are hacks you can use to improve your design piece before you deploy your startup’s website. There are some designs that look ok, but just feel slightly off?
In this post, I'll be revealing the hacks of web designing, which all designers should  know.
Defining terms

Web Designing Hacks:

Using Line height

Lome height is the distance between rows of texts.
Line Height of 1.6
leading line height
Typography is 90% of design. This is why getting it right is so hard.

Apply the line height of 1.6 to all body text. In css, you’d simply add line-height: 1.6; to all p elements. If this is a printed piece, simply take the body text font size and multiply it by 1.6.

Using Maximum of 2 Font Styles

To properly pick fonts and combine them is hard. To make things easier on yourself, pick only 2 — one for body text and one for headlines. Then multiply the body font size by 2.5 to get the headline size.

 Narrow Columns

Each time we get to the end of a column, our eyes struggle to catch the next line. To make the text more scannable (and to make design look more professional), limit your lines to 58 characters per line.

Pick 2 Colours

Pick only 2 colours to work with and give each one a task. For example, you may use orange for all call to actions and blue for branding elements. Most of all, make sure to only use exactly the chosen colours — don’t try to match it by feeling as it will look totally different on different screens. Use a colour picker and sass variables.

Add a Line

In designs with heavy use of typography, it can be hard to get it all right. Adding a line underneath the text or on the side will help visually separate content. Take any printed news for example — chances are, they use the same technique to group content together.

Arranging contents

Keeping contents in mind will help your design big time. But how can you apply this complicated concept into your designs?

One way is to simply list all the elements in your piece and list them by importance. Then simply follow the list and make the most important element the biggest and most contrasting.

Maintaining layout style
The core principle of great UX and branding is consistency. Fortunately, that means less work, too. After you’re done with one screen or page, maintain the same styles through your entire app (or website or publication).

Leaving More White Spaces
If a layout doesn’t look quite right, it’s very likely the lack of macro whitespace. The trick here is to start leaving more space around elements than you’re comfortable with. Keep in mind that whitespace is not empty space. It’s a graphical tool.

Group Related Contents

For elements with a similar importance and theme, it makes sense to be in the same place within the layout. Try compiling them into groups and separating them form the rest with whitespace, lines, or background colour. This will also help with UX.

Use a Background 

 Using large background photo can help by drawing attention away from the little design mistakes. When you think “there’s something missing here”, add a photo. You can then play around with saturation, lightness, and blur.

Style Guides

Staying consistent should be your number one priority when you’re build a brand. Large companies have 100-page document, but ain’t nobody got time for that! Simply create a style guide.

Icons

When you need a quick illustration, icons can save your life. You can even use them to create simple logos.

But where they shine the most is in adding that extra little touch to information design. Instead of simply listing stats, add tiny icons to each list item.

Sketch Your Design  First!
Illustrate your how you want your website to be, include the arrangement and the wrapping of related contents in your sketch. Sketches are a beautiful way of rapid brainstorming.

Align To Side

Instead of using centre align on everything, try aligning your text it to left to spice things up. In layouts rich in whitespace, aligning to left can give off a sense of luxury.

Use A Simple Grid
Instead of using grids with 12 columns, you can simplify the concept and simply split your layout into 3 of 4 columns and make sure elements are aligned to the same vertical and horizontal lines.

Layout Your Photos

Working with a number of photos can be a nightmare, especially when some are horizontal and others vertical. A way to solve this problem (and even improve the overall presentation of the photos) is to lay them out in a simple grid layout. Perfect for social media images!


Hope these hacks help you bring your designs from ok to great.
Join our free web designing WhatsApp group.
Do not forget to share and comment.