1 / 27

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

red
Download Presentation

Cutting Edge Web Design and Development (Basic)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. Design Process Lesson 3

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

  4. Basic Concepts

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

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

  7. Basic Concepts

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

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

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

  11. Basic Concepts

  12. Basic Concepts

  13. Basic Concepts

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

  15. Basic Concepts

  16. Basic Concepts

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

  18. Basic Concepts • 12 Column

  19. Basic Concepts • 12 Column

  20. Basic Concepts

  21. Basic Concepts

  22. Basic Concepts • 16 Column

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

  25. Next: Design Process

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

  27. Questions?

More Related