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

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

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 

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

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

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

Raster vs Vector

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

Typography

Typography Colors Text Arrangement

Bad Web Design

Good Web Design

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?

Layout - Wireframing Car Frame

Wireframe

Wireframe

Inspiration - Graffiti

Chalk Art

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?

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.