Cutting Edge Web Design and Development (Basic)

Cutting Edge Web Design and Development (Basic) By: Ejaz Ahmad Siddiqui

Design Process Lesson 3

Today’s Agenda • Follow-up of assignment • Basic Concepts • Pixel • Screen Resolutions • Rule of third • Grid Systems • 960 Grid Systems • Design Process

Basic Concepts

Basic Concepts • Pixel • Screen Resolutions • Rule of third • Grid Systems • 960 Grid Systems

Basic Concepts 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)

Basic Concepts

Basic Concepts 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.

Basic Concepts 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.

Basic Concepts • 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.

Basic Concepts

Basic Concepts 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

Basic Concepts

Basic Concepts 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

Basic Concepts • 12 Column

Basic Concepts

Basic Concepts • 16 Column

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

Next: Design Process

Design Process • Sketch • Wireframe • Mocking Bird • Mockflow • Web Design With Photoshop • Web Development

Questions?

Cutting Edge Web Design and Development (Basic)