Chapter 1: Website Design Principles, Standards and Guidelines

Chapter 1: Website Design Principles, Standards and Guidelines
1. Principles of Good Website Design
a. Simple is the best
The over-designed website may not work. Putting too many elements on the page may lead to
distracting visitors from the main purpose of your website. Simplicity always works in an effective
web page design. Clean and fresh design of your website not only makes the website appealing
but also help user to navigate from one page to another seamlessly. Loading a website having
design features which do not serve the purpose may be frustrating. Keep your design as simple
as possible so that the visitors can feel it easy-to-use and can find their ways easily.
b. Consistency
Consistency in website design matter a lot. Give your attention to match design elements
throughout each of the pages. It can be understood that your fonts, sizes, headings, sub-
headings, and button styles must be the same throughout the website. Plan everything. Finalise
the fonts and the right colours for your texts, buttons etc, and stick to them throughout the
development. CSS (Cascading Style Sheets) would come in handy to keep the complete
information about design styles and elements.
c. Typography & Readability
No matter how good your design is text still rules the website as it provides users with the
desired information. Since search engine crawlers are very much familiar with this data, it
becomes an integral part of SEO activities. You should keep your typography visually appealing
and readable for visitors, along with tricky use of keywords, meta-data, and other SEO-sensitive
elements.
Consider using fonts that are easier to read. The modern sans-serif fonts as Arial, Helvetica
etc. can be used for the body texts. Make proper combinations of typefaces for every design
elements such as headlines, body texts, buttons etc.
d. Mobile Compatibility
Keeping in mind the ever-growing usage of smartphones, tablets and phablets, web design
must be effective for various screens. If your website design doesn’t support all screen sizes, the
chance is that you’ll lose the battle to your competitors. There are several web design studios or
service points from where you can turn your desktop design into a responsive and adaptive one
for all screen sizes.
e. Colour Palette and Imagery
A perfect colour combination attracts users while a poor combination can lead to distraction.
This necessitates you to pick a perfect colour palette for your website which can create a pleasing
atmosphere, thus leaving a good impact on visitors. Enhance users experience by selecting a
complementary colour palette to give a balanced-look to your website design. Remember to white
space use as it avoids your website from visual clutter and mess. Also avoid using too many
colours. 3 or 4 tones for the whole websites are ample to give appealing and clear design.

Same is the case with images. Don’t use multiple vibrant images

f. Easy Loading
No one likes the website that takes too much time to load. So take care of it
by optimising image sizes, combing code into a central CSS or JavaScript file as
it reduces HTTP requests. Also, compress HTML, JavaScript and CSS for
enhanced loading speed.
g. Easy Navigation
Study shows that visitors stay more time on the websites having easy
navigation. For effective navigation, you may consider creating a logical page
hierarchy, using bread scrums, and designing clickable buttons. You should
follow the “three-click-rule” so that visitors can get the required information
within three clicks.
h. Communication
The ultimate purpose of the visitors is to get information, and if your website
can communicate your visitors efficiently, most probably they would spend more
time on your website. Tricks that may work to establish effortless
communication with the visitors are – organising information by making good
use of headlines and sub-headlines, cutting the waffle, and using bullet points,
rather than long gusty sentences.
2. Web Design Standards and Guidelines
Web standards are rules and guidelines established by the World Wide Web
Consortium (W3C) developed to promote consistency in the design code, which
makes up a web page. Without getting technical, simply it's the guideline for the
mark-up language which determines how a web page. Displays in a visitor's
browser window.
The advantages in adhering to these standards are many:
 Web pages will display in a wide variety of browsers and computers,
including new technology like iPhones, Droids, iPads, PDA devices,
mobile phones, which greatly increases the viewing audience.
 W3C Standards promote the use of "Cascading Style Sheets" (CSS) or
design code which is attached to the web page. Rather than embedded
in the page. The use of style sheets significantly reduces the page file
size, which means not only a faster page loading time but lower hosting
costs for frequently visited sites due to using less bandwidth.
 Design features such as colours and fonts can be easily changed by just
modifying one style sheet instead of editing every individual page in a
web site, reducing the costs to modify your site.

Search Engines can access and index pages designed to web standards with greater efficiency.
1. Tools and Techniques for Develop a Website
a. Mockflow.com
MockFlow is an online tool for creating wireframes of software and websites. It
helps you to enhance your planning process by enabling to quickly design and
share interactive UI mockups for your software and websites.
b. Google Chrome
Google Chrome (commonly known simply as Chrome) is a cross-platform
web browser developed by Google. It was first released in 2008 for Microsoft
Windows and later ported to Linux, macOS, iOS, and Android. The browser is
also the main component of Chrome OS, where it serves as the platform for
web apps.
c. XAMPP
XAMPP stands for Cross-Platform (X), Apache (A), MariaDB (M), PHP (P) and Perl
(P) It is a simple,
lightweight Apache distribution that makes it extremely easy for developers to
create a local web server for testing and deployment purposes.