Scribd
Upload
68 views5 pages

Grids in Web Design

grids in web design

Uploaded by

antonio luisa afonso
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
68 views5 pages

Grids in Web Design

grids in web design

Uploaded by

antonio luisa afonso
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 5
osiozi24, 23:55, Grd Essay GRIDS IN WEB DESIGN This essay talks about the use of gids in the web net by an exper inthe industry bu from a newcomer inthe Field of web design Feel freeto rea. Hope you find it interesting Introduction-The Search For A Better User Experience As web designrs whan we think bout tha web probably wo things came nt our minds. ¢ Fire the nformaton unordered, vac, different, Second. the resentation te way al this * informations presented = “eb deg like pan puzl game, Web designers are called to put together ferent pieces . of nformation in logieal way but unike real puzzles this one can never have a perfect solution." \What we wants to achieve as much perfection as possible to arrange our information ina ‘meaningful. clear and attractive way For our users. But how can we achieve tha? Opinions differ. Tools though exis tohelpus gt there, One of those creative tools i grids Grids have seen an extensive use lhe past centuries, Archiecls painters photographers, lypographers ete implemented thernin their designs. Printing media though arabably made the mast use af them. V Even before typography grds lie Vilrds Diagram (3th century) helped to organise hand written content in boks. Grids, the too for creating the perfect page, was considered a trade's secret between the bookmakers ofthat period Ie took many years Fr the web community to understand what the bookmakers ofthe 3th century knew very well That gid canbe thei ales. Since then lat have been written abut gids inthe web and new online grid systems emerge one after ancther. Teir main goals to face the ll increasing complexity of websites andthe demand of users for mote aestheically pleasing designs, Web design thaugh inal so simple le the traditonal graphic design whose final forms results From offset printing Fundamental problems lice the different screen sizes and resolutions make it ificul lo implement perfect grids. Te dficlty increases dramatically when we have to work on uid and nol ited width designs. Is ke working ‘ona constanty changing canvas. the proportions and dimensions of which we cannot know. Basics Mathematics Nature and Grids Many might wonder what a gris, how can we stot said construct one and haw can we use i We can designa grid for our website by taking 2 close look to our content We highligh individually the importance ofeach element for example our brand identity, a navigation bar etc). Then we ask curselves how we want each element interact with us and with the rest ofthe website. After we lend up with some draft solutions. we apply the roger mathematical principles. The combination of those 2 will create our inal grid. IF we would lke te give a grid definition for web design we could say that: * Mathematical sciences particularly exhibit order, symmetry and limitation: And these are the greatest forms ofthe beautful” “id isa system for organizing elements on a web- ‘page. Taking into account the nature ofthe cantent ‘and size of the page, the areais divided yp into (Generallyeven) segments against which ‘everything aligned "Gridnessret} The terminelogy thats used to describe the anatomy ofthe grids might get confusing Making a AuickreFerence. according to Khoi Vinn the main parts of a grid are Unit: The smallest vertical dvsion ofthe page. Are the building blocks af grids and are measuredin hntips:ifeyelearn orgima-stu-gallaryigridEssay-2013/stavros! AAs designers "the beautifulis what we wantto incorporate in our designs Mathematics can help usbringa natura harmony to our designs that will lok pleasant tothe human tye. Good grids ate sophisticated, based in logic and make use of mathematical properties. Belden ratio Isan eratonal mathematical constant. approximately 61809398874989 In mathematics and arts lwe quantities arein golden ab the rato of the sum ofthe quantities tothe larger quantity is equal tothe ratio oF the larger quanta) to the smaller onelb) In other words (sb)/a= a, Atribution to the discovery of golden clio is gvento the Greck philosopher Pythagoras around the stth century BC Scientists have spent endless hours over this sleratoand its properties Leonardo Da Vine talledt the ive proportion’ and used tin mary af his paintings. Psychoogats 18 ooze, 23:55, width Usualy are to narrow to house any textual content Colonna: A group of units that are combined together(usually two or more to create workable areas fr presentation of content Regions: Groupings of similar columns that Form parts ofthe page. Usvaly every region has different kindof content than another region, Fields: Horizontal dvsions ofthe page. Are ‘measured inheight and help te designer visually pace the placement of elements on the y-axis. One ofthe most effective ways to calculate fieldsisthe golden rato. Gutters: Are the empty spaces between units and columns. When units are combined into clus though they incorporate the gutters between thern but nat the space lo the lef ofthe lftmast unit nor the spaceto the right ofthe rightmost unt ? l Baseline Grid: Tre baseline of our tex is of out mest importance The baseline gr is nalhing mare than a unifarm top-to-bottom repetition of baselines spaced apart according t the leading orline-spacing ofthe text hntipsifeyelearn orgima-stu-gallarygridEssay-2013Istavros! Grd Escay rowadays believe thatthe golden ratio plays 2 very important rlen our human perception of beauty Fibonacci sequence Golden ratios intimately tied up to another mathematical concepl, the Fibonacci sequence. Took its name by the Kalan Leonardo of Pisa who was known as Fibonacci By cefnition the frst two numbers inthe Fibonacs sequence are@ and Each subsequent number isthe sum ofthe previous two, So the resultisa sequence of numbers of 011.3813 213455 89144 and so forth Any number in the Fibonacci sequence when divided bythe nurmber that immediatly precedes tye a quotient very close tothe golden rato number (618) For designers shows a particular interest because when expressed a logarithmic spiral forms the basis of grid thats instantly recognizable as harmonious and logical. Rule of Thirds Finally thes mplest concept but alo theles scenic the so-called rule of this ‘whichis infact not quite aul and only supericaly malhernatal t's dling bacc'o the eighteenth century and provides a baste ule of thumb of how to make aesthetically pleasing and harmonious compostions, Therul ofthis proposes ha ou canvass tividedin 9 equal parts by 2 equly-spaced horizontal ines and two equal-spaced ‘vertical lines, The most important elements design mus be placed along those lines and ideal inthe intersection of ther, thos creating more tension and interest on them 26 ooze, 23:55 oven pm cles ane, sn —covesenatipsegelt. Corsbitar seelerisame odin. Why to use Grids By now we understand that grids can become 2 reat lool for wea designers The main benefits of Using grids are: + Toseveustime and money Grids hel us reduce layut for our designs faster Give usa guideline for how things should be aligned, where the elements shouldbe placed and ove requiring problems regarding the ‘organization ofthe website. Last bt nat ast wien i comes ta coding by using anline rd s53sters lke Phe 960g we can avoid doing ‘mundane task repeatedly that we would have hadta de otherwise, Christan Helmann sid “Our crafts becoming a commodiy and the people inchage dont take care about the {quai ofthe markup 5S how shor our vases. What matters is how fast you can sett to market how many people teaches and how cheaply t can be bul ‘Therefore ary help for increasing ur produetivily is highly welcomed. ' Forsirrpler designs wth vial balance Designs in which the designers can highligh the important elements ofa page without ‘overcrowding the ste ives ther the teal to ‘create a wsval balance withthe proper white space between the elements, ' Fora uideduser experience Bris can direct the eye ofthe user toa specific area ofa page. The designer can bring more attention and emphasis fo the elements he ‘wants like brand identity or the maney makers ‘of awebsite, the ads! 1 Fora great user experience n any kind of visual ‘cmmunicaton what's really importants 3 sense of order. Without order our design wl look ‘confusing. Further more a consistent organised ‘website makes the transaction experience of the user From page to page mare familiar, As a result Users can predict where to find information in Afferent prt of the website + For easier maintenance ofa website ‘We can simply update easier website that uses ‘a good gid structure, We can add or delete content while we keep the overall vision of the original website htipsifeyelearn orgima-stu-gallarygridEssay-2013Istavros! Grd Escay Before we get sucked up by maths and start taking ut the calculator we must remember that “maths gives usa guide thal we can apply howeverits rather about implementing sites uth maths than implementing maths with our designs” [smashing magazine) How Grids Are Used In News Websites Grids with their eveny distributed use of columns, rows and other elements make an adaptable architecture that its perfectly for content-rich webstes ke news websites. Lot's take a look of how they are used. bvmvescoM ‘The New York Times websites considered by many one the best implementations of fidsin the web. The famous designer Khoi Vihn was the design director ofthe ‘website. nan old interview of his he points out that the website has inherited some characteristics fro a previous design and asa result some elements of the website have no rational or mathematical eaton to others Sil though the website has consistency and log. Stating fom tne top ofthe website we can see the brand identity( NYT logal has been given the most generous space fal the other elements ofthe website. The user can immediately sce the New York Times logo to welcome him. Imposing placed inside a rectangle thal takes the whole widlh othe page and -iven generous whitespace sono other element wil’sea"attenton, The website differentiate and gve emphassto its content in many ways wey to divide the ‘website it seems tabe based an a 6 columa/l units design. The ist colummnfone unit ‘wide is significantly smaller than the others. This adds 2 speci distinction which the designe tock advantage to place there the navigalion bar. Continuing ta the right we can see that | region's Formed consisting of 3 columas. The less importance newstake ‘column width andthe mest important take 2. The website continues ike that separates content in regions ane fields. Gray structural lines are used horizontally and veticaly to make this distinction even clearer Aso the headlines have various weight size and colar. The grid structure can been seen everywhere I's lear though tat the designer tried to squeeze as much information as pessble inthe homepage. This helps the user to have instant accessin news, a opinions markel. real esate etc. Unfortunately that characteristic is also a pont of controversy for many designers that believe the website looks oo busy cunecem CCNNlike the New York Times isa weld class news agency Unike the New York Times thought felowsa different approach on i's design The structural elements of the gid are de-emphasized. The containing boxes and the structural lies are there but nat so visible. The webste seems to use a3 column/ 6 nits grid design, maintains 2 consistency throughout the page between mage/text pais columa width and horizontal spacing horizontal rhythr) vertical element spacing (vertical rhythm) ek, ‘Asaresult the content becomes more apparent, the clarity of presentation i greatly enhanced and the user experience becomes mare pleasant, a6 osiozi24, 23:55, Problems of Grids Many people believe tata designer chooses to ‘se a grid the result wl lack of ereativily. “To saya gris limiting isto say that language is limiting oF typography sling" Elen Lupton). Problem relies somewhere else: 1 Grids require lt of time, reading and practseto master their rt This means that unexperienced designers can be absorbed so much by the easy’ salution grids has to offer that they might forget the most important sep before starting a new design, “to ask questions’, Questions lke whois the ‘audience, what isthe context, when a slution will be encountered, how twill e used ee, «Grids are just guides not a magical solution, People ted to forget that When the solution Uhal the gid offers snot suitable they must stat think outside the grid instead to limit their crest + Useof gridsin id cesgns has benefits butalso ‘ik, Faxed width layouts work perfectly with grids ‘When itcomes to fd designs ane dynamic

You might also like