1. Fundamentals of Web Design
George Roy
Department of Information Technology
St. Joseph’s College, Trichy

2. Introduction
In this internet era, almost everything is represented online by some form or other, the most predominant form of representing information online is through a Web Site
A Web Site is a collection of Web Pages
The most important aspect of a Web Site is not the code but the design and the content
A lot of factors are involved in the creation of a good web site

3. The Basics
In order be a good web designer, we have to learn the basics of web design, they are broadly categorized under
Colours and Imaging
Layout
Typography
Also you need the right set of tools to get the job done, you would need
A Text Editor
An Image manipulation software
A browser
And a whole lot of creative inspiration 

4. Imaging Digital images are broadly classified into two types
Raster images or bitmaps
Vector images
Each of these image types play a vital role in web design
These image types are used hand in hand with each other for best optimized performance of the web page

5. Raster Images Raster graphics are digital images created or captured
A raster is a grid of x and y coordinates on a display space. (And for three-dimensional images, a z coordinate.)
The raster file is sometimes referred to as a bitmap because it contains information that is directly mapped to the display grid
A raster file is usually larger than
a vector graphics image file
A raster file is usually difficult to
modify without loss of information

6. Vector Images
Vector graphics is the creation of digital images through a sequence of commands or mathematical statements that place lines and shapes in a given two-dimensional or three-dimensional space.
A vector file is sometimes called
a geometric file
Animation images are also usually
created as vector files.
They occupy less space

7. Raster vs Vector

8. Typography
Typography is the art and technique of arranging type to make written language readable and appealing
The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs
Typography is performed by typographers, graphic designers, art directors, manga artists, comic book artists, graffiti artists, and everyone else who arranges type for a product

9. Typography

10. Typography
Colors
Text
Arrangement

11. Bad Web Design

12. Good Web Design

13. Layout There are 3 main categories of a website
The header , body and the footer
What should the Head Contain?
What should the body/subject contain?
What should the footer contain?

14. Layout - Wireframing
Car Frame

15. Wireframe

16. Wireframe

17. Inspiration - Graffiti

22. Chalk Art

26. What do you have to do?
What is the first things that pops up in your mind when you visit any website?
What do you wish that could be changed in that website?

27. Good Website Design What can you (the visitor) do here
Resonates with the target audience. 
Communicates a compelling value-proposition.
Optimizes for multi-device usability.
Always changes.
Employs great overall design.