Web Designing Tutorials

What is Web Designing?

Web designing is the process of creating websites that are demonstrated on the internet. It relates to the development of web portals and it used to be focused on designing websites for desktop browsers; however, since the mid-2010, design for mobile and tablet browsers has become important. A web designer works on the look, layout, and content of a website. Appearance, for example, relates to the colours, font, and images used. Good web design is easy to use, visually pleasing and suits the user group and brand of the website. Numerous web pages are designed with a focus on simplicity so that no unnecessary information and functionality distract or confuse users. Two of the most common techniques for Web Designing that work well both on desktop and mobile are responsive and adaptive design. In responsive design, content moves liable on screen size; in adaptive design, the website content is fixed in layout sizes that match common screen sizes.

Principles of web designing

1. Purpose - Good web design always serves the needs of the users. Each website page must have a clear purpose to fulfil a specific need the website user has productively. Try to ask - Is the web visitor looking for information, entertainment or some type of interaction?
2. Communication - People on the web want quick information, so it is essential to communicate clearly and make the information accessible to read. Some effective tactics in web design that you can follow are: use headlines and sub-headlines, use bullet points and understand "less is more".
3. Typefaces - In general, fonts such as Arial and Verdana are easier to read online. The ideal font size for easy online reading is 16px. Three typefaces in a maximum of 3 point sizes are required to keep the design well organised.
4. Colours - Colours enhance the user experience and also create balance and harmony. Using contrasting colours for the text and background will make reading more comfortable on the eye. Vibrant colours create emotion and should be used sparingly (e.g. for buttons and call to actions). Use white space or negative space to give the website a modern look.
5. Images - A picture can speak a thousand words, and choosing the right photos for your website can help with brand positioning and connecting with your target audience. If you don't have high-quality professional images on hand, consider purchasing stock photos to lift the look of your website. Also, consider using infographics, videos and graphics as these can be much more effective at communicating than even the most well-written piece of text.
6. Navigation - Navigation is about how easy it is for people to take action and move around your website. Some tactics for effective navigation include a logical page hierarchy, using bread crumbs, designing clickable buttons, and following the three click rule which means users will be able to find the information they are looking for within three clicks.
7. Grid-based layouts - Updating content randomly on your web page can be messy. Grid-based layouts arrange material into sections, columns and boxes that line up and feel balanced, which leads to better-looking website design.
8. "F" pattern design - Eye tracking studies have identified that people scan computer screens in an "F" pattern. Most of the people see is at the top and left of the screen, and they rarely see the right side. Instead of forcing the viewers visual flow, expertly designed websites will display information in order of importance and will work according to a readers natural behaviour.
9. Load time - Everybody hates a website that takes a lot of time to load. Tips to make page load time more effective include:

• Optimising image sizes (size and scale)
• Combining code into a central CSS or JavaScript file
• Minify HTML, CSS, JavaScript

10. Mobile friendly - You can access websites on multiple devices with multiple screen sizes. Hence it is essential to know if the website is mobile friendly. If not rebuild it in a responsive layout or build a separate website explicitly optimised for mobile users.