By: Ejaz Ahmad Siddiqui

Lesson 3

Follow-up of assignment

Basic Concepts

Pixel

Screen Resolutions

Rule of third

Grid Systems

960 Grid Systems

Design Process

Pixel

Screen Resolutions

Rule of third

Grid Systems

960 Grid Systems

Pixel

The smallest discrete component of an image or picture on a

screen (usually a colored dot);

A typical image contains millions of pixels which is why

digital camera output is defined

in megapixels(mega=millions)

Screen ResolutionsThe display resolution of a digital television or display device is the number of distinct pixels in each dimension that can be displayed.

Resolution is measured in pixels per inch (PPI) or dots per inch (dpi).

The greater the number of pixels per inch the greater the resolution and quality of image is.

It helps to think of the image as a grid. As the resolution increases, the size of the grid cells get smaller, in effect increasing the number of cells (pixels) per inch.

Typical values for this are 1024x768 and 800x600.

Rule of ThirdThe rule of thirds is a compositional rule of thumb in visual arts such as painting, photography and design.

The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections.

The basis for this rule is the fact that viewer’s attention is actively engaged to a point about two thirds up a page.

Thus, when you utilize this technique, you strengthen the focal point you have chosen for your image. It becomes more balanced, making it easier to be more appreciated by the viewer.

Grid System A Grid is a pattern of regularly spaced horizontal and vertical lines

A grid system is a consistent system for placing objects.

“ The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice. ”

Josef Müller-Brockmannhttp://www.thegridsystem.org

960 Grid SystemThe 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

There are two variants: 12 and 16 columns, which can be used separately or in tandem

“ The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice. ”

Josef Müller-Brockmannhttp://www.thegridsystem.org

12 Column

12 Column

16 Column

16 Column

Search and read the concepts which we have discussed today and come up with problems which you may find difficult to understand.

Sketch

Wireframe

Mocking Bird

Mockflow

Web Design With Photoshop

Web Development