Web Design – The Basic Concepts

web-design

First of all I want to say Hi and Welcome to our Web Design Blog. This is our first blog post and as a introduction a few words about the basics of the web design. So comments are more than welcomed! Let’s start!

The elements that are using for web and print design are the same. The big difference between these two type of designs are the different rules that are implementing for each kind of design. Some print designs can not be implemented for web.

Fonts and Typography

typography-web-design
We must be careful when we want to use some font when its talking about web. There is a elis Fonts are the way your text looks on a Web page.

And most Web pages have large amounts of text. When you’re thinking of design, you need to think about how the text looks on a micro-level (the font glyphs, what font family, etc.) as well as the macro-level (positioning blocks of text and adjusting the size and shape of the text).

This is the list of font-family that can be used for web:

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

How to Use Color

web colours
If you can notice form the image the most successful companies on the web are using the same pallete of colors for their logos and also for theis websites. Color is everywhere. It’s how we dress up our world and how we see things. Color has meaning beyond just “red” or “blue” and color is an important design element.

Graphics and Images

Graphics are the fun part of most Web pages. As the saying goes “a picture is worth 1,000 words” and that’s also true in Web design.

Web Layout Basics

web colours
When people think of Web design often what they mean is the layout. Layout is the organization of elements on a Web page. First you need to start with basic design principles. Once you understand them, you can move through how to place elements on your Web page. These links and resources will take you through the steps to learn good Web layout design.

Tackling Web Navigation

Navigation is how your customers get around from one page to another on a Web site. Navigation provides movement and gives your customers the chance to find other elements of your site. You need to make sure that the structure of your Web site (the information architecture) makes sense so that your customers aren’t forced to simply use search.

Accessibility and Usability

Accessibility and usability are often seen as a detriment to Web design, but a good designer focuses on making their site useful to as many people as possible. The links below take you through the basics of making an accessible site without compromising the design.

Web Design Software

Most Web designers prefer to work in WYSIWYG or “What You See Is What You Get” editors because they provide a visual interface to the design. But finding the best Web design software is more than just WYSIWYG or not. Plus there are other tools you will need to build Web pages beyond just the Web editor.

For Windows and MAC the most popular WYSIWYG ediotr is Dreamweaver, but it’s not free.

dreamweaver

There are WYSIWYG editors for orher operating systems such as Linux to, one of them is Nvu. It’s comletly free. For Linux the Nvu verrion is called KompoZer open-source.

I want to share this post with you readers because I think it’s very useful and the source of some informations are taken from About.com some are written by me from my experience with the web design.