Web Design/Design Principles for Web Design

Web Design → Design Principles for Web Design This page is part of the Web Design project.

Completion status: this resource is just getting off the ground. Please feel welcome to help!

Module Aim

In this module, we will consider some of the principles that you should remember and adhere to whenever making your website. We'll consider color blending on your website, which fonts are most web-friendly, image support, and even creating your website to suit your target audience. This module will expand on issues like webpage load speed and what code to use with what scripts at what time. Knowing which of the web design standards to use such as HTML or HTML5 will also be a point of focus. The following sections have much to offer. Go ahead.

Apart from the principles you need to nail down when designing your site, you need to also understand certain facts about your visitors and how to organize your contents to make the best first impression.

Suggested Activities

Under this section, we'll be considering some activities of which you will work on to see how best the principles discuss really work.

Since you're familiar with creating of HTML pages, only instructions on the activities will be given and you will have to try them yourself. Taking on these activities will help you appreciate how important those principles are and how they are going to facilitate the overall operation of your webpages. Its much important your take to heart these principles.

Basic Principles Grouped

The basic principles to keep in mind when creating your website can be grouped under some four main headings. These kind of categorize the whole idea of those principles. These are:

• Colors
• Layout
• Navigation
• Fonts

Colors

Color Theory for the web

Stub

This section is a stub. You can help Wikiversity by expanding it.

Layout

Stub

This section is a stub. You can help Wikiversity by expanding it.

Navigation

A navigation menu may be implemented through a top bar or side bar. Such may be fixed so to be readily accessible on screen.

Some older versions of mobile browsers might resize sticky elements such as top bars to force fitting within the viewport's width, causing them to get squished when zooming in. With more recent browser versions, this should not be much of a concern.

Stub

This section is a stub. You can help Wikiversity by expanding it.

Fonts

Stub

This section is a stub. You can help Wikiversity by expanding it.

Expandable sections

Parts of the site can initially be hidden and revealed by the user through actuating a button. This can be implemented using traditional JavaScript or, more modernly, the CSS :target pseudo-class.

A site that makes use of such is Reddit, where so-called expandos contain the body of text posts (Markdown), and can preview embeddable media such as images, videos (YouTube, Dailymotion, etc.), and audio from select sites (e.g. SoundCloud).

The content of expandable sections can be included in the HTML source code or only loaded when opened. For text content, including it into the HTML source code is recommended, as that allows immediate opening without delay, and makes indexing by search engines more efficient, as they see more text, and the size of text typically is negligible compared to multimedia content.

For photos, low resolution preview images may be used which link to the original resolution version for users who wish to see it.

Learning materials

Wikiversity lessons:

• Named Colors

Resources

The following are external links that relate to Web Design Principles

Articles worth reading

• The principles of Design - Starting with the basics of Balance, Proportion and Dominance, this article uses simple examples and has useful links too.
• The elements of Design - Part 2 in the series, introduces the basic elements of design (point, line, form, texture, colour) and related areas.
• Designing for the Web - Part 3 in the same series.
• Principles and Elements of Design - Part 4 in the same series, brings everything together with examples.
• Choosing a colour scheme - Dave Shea's own tips for choosing a colour scheme for your website (includes some great links).
• Web Design Tutorial - An all-in-one guide for basic Web Designing tips. (includes links to other popular articles).

Online tutorials

• WebDesign from Scratch - This section on visual design for clarity has some excellent explanations.
• The Principles of Beautiful Web Design - Explains much you need to read about.
• Top 22 Web Design training - Links to the 22 top tutorials for web designing.

Online references

• The Web Style Guide - This section on Designing a User-Centered interface as well as the Visual Heirarchy section apply design principles directly to web design.

Recommended Books

Stub

This section is a stub. You can help Wikiversity by expanding it.

Related Qualifications

Stub

This section is a stub. You can help Wikiversity by expanding it.