The Fundamental Concepts of Good Web Development and Web Design is to understand your users: the people who will actually be using and interacting with your website. What are they looking for? What are their objectives? Your offering must have user experience central to the process.

Web design is the visual aesthetics and page layout of a website. It goes hand-in-hand with web development in the creation of a static website or dynamic web application.

Web Design Overview

The web design process starts with a visual concept, which you could sketch by hand or with software like Photoshop. Then, you use HTML and CSS to build the website. HTML and CSS are the codes for writing web pages. HTML handles the basic structure and ‘bones’ of your page, while CSS handles the style and appearance.

With web design, you create all the visual aspects of such interface inclusive of the layout, colour scheme, images, logo, type, design elements like buttons and links as well as any things else that can be seen by users. Since your website is a visual medium, it’s very important you make it engaging and effective with the capabilities of meeting business objectives.

Web Design Has Many Different Roles

When you work as a web designer, you may be tasked with creating (or working on) entire sites or just individual pages and there is a lot to learn to be a well-rounded designer, including the following:

HTML — This is the structure of web pages, creating the foundation of all websites

CSS — This is how web pages are visually styled. CSS (Cascading Style Sheets) handles the entire look of sites, including layout, typography, colors, and more

JavaScript — This governs certain behaviors on websites and can be used for a variety of interactions and features

CGI programming — CGI, and the next few entries (PHP, ASP, etc.) are all different flavors of programming languages. Many sites do not require any of these languages, but sites that are more feature-rich will certainly need to be coded using some of these languages PHP, ASP, ColdFusion scripting

Information architecture — The way a site’s content and navigation is structured and presented helps make for a successful site that is easy and intuitive to use

SEO — Search engine optimization ensures that websites are attractive to Google and other search engines and that people looking for the products, services, or information features on that site can find it once they look for it online

Server management — All websites need to be hosted. The management of the servers that host those sites is an important web design skill

Web strategy and marketing — Having a website is not enough. Those sites will also need to be marketed with an ongoing digital strategy

E-commerce and conversions

Design — Creating the visual look and feel of websites has always been an important aspect of the industry
Speed — A successful site is one that loads quickly on a wide variety of devices, regardless of a visitor’s connection speed. Being able to tune the performance of sites is a very valuable skill
Content — People come to websites for the content that those sites contain. Being able to create that content is a critically important component in the world of website design

Creating a website

It’s a good idea to think about what you hope to achieve with your website before you start creating one

To create a website, you need to follow 4 basic steps.

1. Register your domain name
Your domain name should reflect your products or services so that your customers can easily find your business through a search engine. Your customers may also expect your domain name to be similar to your business name.

To register your domain name, you will need to find an accredited registrar and pay a fee. Accredited registrars are organisations who are authorised to provide services to people who want to register a new domain name, renew their existing domain name, or make changes to their domain name record.

2. Find a web hosting company
You will need to find a web hosting company to get your domain name on the internet. Most of the major internet service providers offer web hosting services. They can also provide you with multiple email addresses.

3. Prepare your content
Think about what you want your customers to be able to do via your website. This will help you work out what sections or pages you want to include. A website that is well designed and easy for customers to use will help your business stand out. Having relevant and appropriate content and images will help customers understand your products and services and will make them feel comfortable with buying from your business.

4. Build your website
You will need to design your website so it can be easily used on smartphones and other mobile devices. Optimising your website for mobile use means that the growing number of people using phones and tablets to access the internet can use your site while they are out and about.

Usability in web design

Use high contrast between text and background
Use lots of white space
Use larger fonts
Put key navigation buttons in the upper left
Don’t rely on color alone to distinguish between elements on a web page
Avoid busy graphics
Limit page noise — ensure page elements don’t compete for a visitor’s attention
Don’t force visitors to remember how to navigate/use the site
Provide redundant, easily recognizable features
Generally, have visited and unvisited links be different colors to make it easy for users to remember where they’ve been
Limit the number of items in a group of choices

Accessibility in Web Design

Make the navigation clear and simple
Use a clean visual layout with ample white space
Use descriptive link texts (avoid using “click here” without more information)
Provide text equivalents for non-text elements
Don’t rely solely on color to indicate links
Don’t make the screen flicker
Don’t rely completely on high-tech solutions
Use markup and style sheets — HTML for structure and CSS for presentation. Don’t use visual markup (for example, to make text bold, use strong instead of b; to italicize, use em instead of i)
Don’t use header tags for visual formatting
Add “skip to” links to main navigation and page content
If PDF files are used, provide alternate formats for the information

Principles of graphic design for the web

Keep the file size for the graphics small on the main page (use thumbnails with links to larger pictures, include file size information with link.)*
Use colors from the “standard color palette” to reduce file sizes and increase flexibility.
Keep backgrounds simple and not “busy”.
Keep the viewable size of the page in mind so you can avoid scrolling as much as possible.

Navigation concepts for the web

Use a simple, consistent navigation interface.
Organize the pages so that there is less need for many confusing navigation buttons.
Remember, It’s the World Wide Web, NOT the World Wide Bowl of Spaghetti.
Carefully plan the site organization FIRST. Site design should be based on function and content.
Remember, “Three Clicks to Information”.

Organization of text on the web

Do not rely on spacing, tabs, or line breaks.
Use tables (with border=0) to space the information on the page.
Use horizontal lines to separate content, not for visual organization.
Use headings (H1 through H6) rather than fonts and font sizes to organize information.
Maintain a good, consistent visual hierarchy.
Lists are good for organization.

Download Notes – Introduction to web design and development

Conclusion

Aim for consistency in the look and feel of the site. Logos, headers, footers, and navigations bars should reside in the same spot from page to page, and site colors and text should remain consistent site-wide.
Align groups of elements horizontally or vertically on the page. Alignment makes a site both easier to use and more visually appealing.
Always proofread your site content. There’s no excuse to have misspelled words or grammatical errors. Such errors reflect poorly on you as a designer.