1. By: Ejaz Ahmad Siddiqui

2. Lesson 3

3. Follow-up of assignment Basic Concepts Pixel Screen Resolutions Rule of third Grid Systems 960 Grid Systems Design Process

5. Pixel Screen Resolutions Rule of third Grid Systems 960 Grid Systems

6. 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)

8. Screen Resolutions The 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.

9. Rule of Third The 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.

10. 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.

14. 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-Brockmann http://www.thegridsystem.org

17. 960 Grid System The 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-Brockmann http://www.thegridsystem.org

18. 12 Column

22. 16 Column

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

26. Sketch Wireframe Mocking Bird Mockflow Web Design With Photoshop Web Development