DOCSLIB.ORG

Grids for Web Design What Is a Grid? What Is a Grid?

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Grids for Web Design What Is a Grid? What Is a Grid? Grids for Web Design What is a Grid? What is a Grid? › Modular and systematic approach to the layout What is a Grid? › Modular and systematic approach to the layout › Ordering system for structuring and dividing content What is a Grid? › Modular and systematic approach to the layout › Ordering system for structuring and dividing content › The grid divides a two-dimensional plane into smaller compartments. The fields or compartments may be the same or different in size. What is a Grid? › Modular and systematic approach to the layout › Ordering system for structuring and dividing content › The grid divides a two-dimensional plane into smaller compartments. The fields or compartments may be the same or different in size. Why use Grids? What is a Grid? › Modular and systematic approach to the layout › Ordering system for structuring and dividing content › The grid divides a two-dimensional plane into smaller compartments. The fields or compartments may be the same or different in size. Why use Grids? › To incorporate structures and organizing principles to design projects What is a Grid? › Modular and systematic approach to the layout › Ordering system for structuring and dividing content › The grid divides a two-dimensional plane into smaller compartments. The fields or compartments may be the same or different in size. Why use Grids? › To incorporate structures and organizing principles to design projects › To provide consistency across different pages and sections What is a Grid? › Modular and systematic approach to the layout › Ordering system for structuring and dividing content › The grid divides a two-dimensional plane into smaller compartments. The fields or compartments may be the same or different in size. Why use Grids? › To incorporate structures and organizing principles to design projects › To provide consistency across different pages and sections A Brief History of Grids Proportion and Geometry. Canons of page construction Van de Graaf canon Gutenberg Bible, Mainz in 1452-3 Modernism Rational Design Jan Tschichold, 1928 On New Typography Piet Mondrian, 1939 International Magazine for Graphic Design 1958 - 1965 Josef Müller-Brockmann, 1960 Josef Müller-Brockmann 1962 Wim Crouwel, 1968 Examples in Book Design Examples in Book Design Example in Poster Design Anatomy of the Grid Field Gutter Margin Unit Hanging Line Examples in Web Design The Department of Advertising and Graphic Design MOMA http://www.momadesignstudio.org/ The Department of Advertising and Graphic Design MOMA www.momadesignstudio.org/ 5 column grid The Department of Advertising and Graphic Design MOMA www.momadesignstudio.org/ 5 column grid The Department of Advertising and Graphic Design MOMA www.momadesignstudio.org/ 5 column grid Subtraction. Khol Vinh’s Website http://www.subtraction.com/ Subtraction. Khol Vinh’s Website http://www.subtraction.com/ 8 column grid Subtraction. Khol Vinh’s Website http://www.subtraction.com/ 8 column grid 95px 200px 305px 410px 515px 725px 830px 935px Subtraction. Khol Vinh’s Website http://www.subtraction.com/ 8 column grid Subtraction. Khol Vinh’s Website http://www.subtraction.com/ 8 column grid Subtraction. Khol Vinh’s Website http://www.subtraction.com/ 8 column grid Drupal drupal.org/ Drupal drupal.org/ 12 column grid Drupal drupal.org/ 12 column grid Drupal drupal.org/ 12 column grid Things That Are Brown thingsthatarebrown.com/ Things That Are Brown thingsthatarebrown.com/ 16 column grid Things That Are Brown thingsthatarebrown.com/ 16 column grid Things That Are Brown thingsthatarebrown.com/ 16 column grid Designing a Grid Constant factors Constant factors combined with the greatest possible variability. Designing a Grid 1. Canvas Browser window size, which is in turn determined by the user’s screen resolution. These are not fixed 2. Dimensions Total width in pixels, columns width, gutter width 3. Design Consistently align items on the grid lines 4. From sketches to the browser Start with HTML and CSS “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.
Load more

Recommended publications
  • Responsive Web Design Techniques
    International Journal of Computer Applications (0975 – 8887) Volume 150 – No.2, September 2016 Responsive Web Design Techniques Waseem I. Bader Abdelaziz I. Hammouri Al-Salt College for Human Sciences, Department of Computer Al-Balqa Applied University, Information Systems, Al-Salt, Jordan Al-Balqa Applied University, Al-Salt, Jordan ABSTRACT internet around the world [3][4], but at the same time it has As new devices and technologies are invented to access the added more work on website designers, because now they internet, from computer desktops, laptops, mobile phones have to deal with many viewing devices and technologies to smart TVs, there has been a great need to upgrade the accessing their work. These devices have different size techniques used in the field of website design, because ranges and capabilities making their work a wonderful these new devices come along with their own specific sizes beauty on one device and a total mess on the other. and views. Although most devices & technologies try to be Nowadays users access the same website from desktop as compatible as possible with the common web design computers, laptops, mobile phones, iPhones, iPads, features, but there has been an absolute need for website Blackberries, notebooks, feed readers and even smart TVs. designers to do a lit bit more to adapt to the fast growing Each platform displays the same page in a different feel race in internet devices and provide all their viewers with from the others depending on its size and viewing the best possible experience while accessing their websites. capabilities. In this paper, different responsive website design techniques are presented that could adapt to different Whenever a user enters a website, the client looks for a technologies and devices while at the same time focusing user-friendly interface, quick access to his/her needs and a on cutting down the time and effort needed for a website comfortable content view without the need to worry about designer or programmer to maintain and edit it.
    [Show full text]
  • Responsive Web Design Influid Grid Concept Literature Survey
    The International Journal Of Engineering And Science (IJES) || Volume || 3 || Issue || 7 || Pages || PP-49-57 || 2014 || ISSN (e): 2319 – 1813 ISSN (p): 2319 – 1805 Responsive Web Design inFluid Grid Concept Literature Survey Abdulrehman A. Mohamed, Dr. Cheruiyot W.K, PhD, Dr. Richard Rimiru, PhD, & Collins Ondago Jomo Kenyatta University of Agriculture and Technology, Mombasa Campus, Institute of Computer Science and Information Technology, P. O. Box94090–80107, Mombasa, Kenya, Jomo Kenyatta University of Agriculture and Technology, Main Campus, Institute of Computer Science and Information Technology, P. O. Box 62000, Nairobi, Kenya, Jomo Kenyatta University of Agriculture and Technology, Main Campus, Institute of Computer Science and Information Technology, P. O. Box 62000, Nairobi, Kenya Jomo Kenyatta University of Agriculture and Technology, Mombasa Campus, Institute of Computer Science and Information Technology, P. O. Box94090–80107, Mombasa, Kenya, ---------------------------------------------------------------ABSTRACT-------------------------------------------------------- Extending beyond the boundaries of science, art, and culture, Responsive Web Design (RWD) provides new paradigms and techniques to develop one single website which looks different for different screen sizes so that it is usable on every device. In this paper we survey some of the state-of-art technical aspects of Responsive Web Design. A number of other overviews on Responsive Web Design have been published. However, in this survey, an effort has been made to show the chronological growth in this field by presenting and in-depth survey of fluid grid concept.The review reveals a shift away from traditional web design towards Responsive Web Design and a need for an alternative enhanced approach to RWD in fluid grid implementation which has evolve to become an unavoidable good practice in web designing.
    [Show full text]
  • Grids in Web Design 2012 Gary Pigott 25 January
    Grids in Web Design 2012 Gary Pigott 25 January 1 | Page Grids in Web Design Purpose The purpose of this document is to examine the use of Grids in web design, in doing so we will be having a look at some of the concepts behind the use of the Grid System and looking at the benefits that grids can have in helping us to produce usable and aesthetically pleasing websites. Introduction In the context that we are interested in a Grid can be considered as “a network of horizontal and vertical lines superimposed over a map, building plan, etc, for locating points” (Collins Dictionary). So what is the Grid System? Essentially it is a design mechanism, used in a variety of design disciplines (be it graphic design, street layouts1 or other architectural designs), so the design grid is a series of guidelines, borders and columns into which elements of the design are placed or aligned. If the system were being used for architectural design it would be: Where does the door go? Where do the windows go? How does everything line up? Does it make sense (both visually and practically)? In web design the Grid System is used to help with the placement of content; it helps to provide a framework for the material being presented – helping us to organize the content in a consistent way that is both usable and visually pleasing. In this document we will discuss some of the concepts behind the Grid System and then apply these ideas to the analysis of a real world websites looking at how they have made use of these ideas.
    [Show full text]
  • Responsive Web Design for Libraries: Beyond the Mobile Web Matthew Reidsma Grand Valley State University, [email protected]
    Grand Valley State University ScholarWorks@GVSU Books and Contributions to Books University Libraries 3-1-2013 Responsive Web Design for Libraries: Beyond the Mobile Web Matthew Reidsma Grand Valley State University, [email protected] Follow this and additional works at: http://scholarworks.gvsu.edu/library_books Recommended Citation Reidsma, Matthew, "Responsive Web Design for Libraries: Beyond the Mobile Web" (2013). Books and Contributions to Books. Paper 5. http://scholarworks.gvsu.edu/library_books/5 This Contribution to Book is brought to you for free and open access by the University Libraries at ScholarWorks@GVSU. It has been accepted for inclusion in Books and Contributions to Books by an authorized administrator of ScholarWorks@GVSU. For more information, please contact [email protected]. 1 Responsive Web Design for Libraries: Beyond the Mobile Web by Matthew Reidsma, Grand Valley State University At some point between the moment I wrote these words and the moment you are reading them on a printed page, this essay was coiffed and primped by a designer for optimum readability. That designer, working in the medium of print, knows with utmost certainly the size of the book, her canvas, and made her design decisions accordingly. If you were reading this on the web, I wouldn’t be able to predict the size of the “page” you were viewing, because web-enabled devices have never looked so different. We can no longer count on one or two common screen resolutions when we design a website. We’re on track to have more mobile devices than people on the planet (World Bank 2012), and in the U.S.
    [Show full text]
  • Subliminal Design: Revealing the Grid
    Subliminal Design: Revealing the Grid Charlie Francis Subliminal Design: Revealing the Grid Maryland Charlie Institute Francis College of Art Master of Arts in Graphic Design August 2019 Subliminal Design Revealing the Grid Introduction 6 Abstract 10 Problem Definition 16 Exploration 24 Research 32 Design Process 42 Outcomes 66 Conclusion 80 Bibliography 86 Acknowledgments 91 Introduction Introduction Subliminal Design Revealing the Grid 8 9 Being a designer is one of the aspects I enjoy most about my life. I don’t think of design only as a career, but rather see it as one of my most defining traits. Like a teacher lives to educate and nurture, a designer lives to solve problems and create. Teaching others about design brings forth opportunities for sharing what I love, in hopes that others may benefit from it. I see Subliminal Design: Revealing the Grid as an opportunity for me to both create something I love, and begin to think about how I can educate others about it. This thesis is a study of grids—displaying an example of how they are used in the things we encounter everyday. Abstract Abstract Subliminal Design Revealing the Grid 12 13 Grids are all around us—from the pages of a book, to the very streets we walk. If you look close enough, they can be found anywhere. A grid, in its essence, is an invisible structure. They are the underlying principle that guide form and function, while also being a pivotal way to structure information and content in all forms of design—both 2- and 3-dimensional.
    [Show full text]
  • Building a Responsive Web Site
    Responsive Web Sites using Dreamweaver page 1 Building a Responsive Web Site iPad MacBook Pro As of April 2012, the Pew Research Center found 55% of adult cell owners use the internet on their illustration by kristen n. brown 2011 mobile phones, nearly double the number of just three years prior. Thirty-one percent of current cell internet users say that they mostly go online using their cell phone, and not using some other device such as a desktop or laptop computer. That works out to 17% of all adult cell owners who are “cell-mostly internet users”—that is, who use their phone for most of their online browsing. Some statistics show a rate of mobile internet usage jumping as much as 200% per year. Furthermore, statistics also show that users prefer reading information in a native web browser, rather than through a site-specific app. With trends like these, it makes sense to consider a version of your website tailored for mobile devices. This means both in design and content. Why? Some mobile browsers simply shrink the standard desktop display to a size that fits the user’s mobile screen. Not only can it be difficult to see, but navigation can become a challenge, as text links are small and difficult to hit accurately. Some sites use navigation with drop down menus that are activated on roll over; rollover functionality doesn’t work on a touch screen. The Responsive Solution Internet users now browse on a wide variety of desktops, tablets, and mobile devices. There are several hundred devices out there, each with varying screen dimensions and many with both portrait and landscape viewing options.
    [Show full text]