Share
Matematikken er vakker. Høres det litt rart ut? Jeg trodde sikkert det da jeg først begynte å designe. Mat er så stiv og ofte kjedelig, eller så tenkte jeg. Du vil bli overrasket over å finne ut at de fleste estetisk tiltalende design, kunstverk, gjenstander og til og med folk har matematikk til felles. Spesielt Golden Ratio, også kjent som den guddommelige andel, som er utpekt av det greske bokstaven Φ (phi). Denne opplæringen vil dekke anatomi og layout av et nettsted og hvordan Golden Ratio angår.
Elementene på en nettside er som organer; de er avgjørende for en riktig fungerende og estetisk tiltalende nettside.
Dette er hovedelementene i en nettside. Det er mange forskjellige måter å organisere dem på, men dette er kanskje den vanligste grunnleggende layouten som brukes på nettet.
Alle nettsider bruker en container og til samme formål; å inneholde sideelementer, men måten det oppnås varierer. For eksempel er kroppstegnet eller en div mest brukt. Tidligere har en tabell blitt brukt (ikke bruk et bord som sidebeholder, det er en avskrivet metode). Tenk på beholderen som de ytre veggene i huset ditt, hvor soverommene, kjøkkenet, stuen etc. er plassert.
Typer av beholder:
Overskriften er egentlig ikke et bestemt element, selv om noen kanskje anser det for å være. Det er mer generelt brukt i å referere til den øverste delen av websiden din der logoen, navigasjonen, tagline, etc. er plassert. Mange foretrekker å holde disse elementene inneholdt i en div for lettere sidestyling, elementseparasjon og / eller elementinneslutning. Overskriften vil bli betraktet som en beholder, så det ville ha to typer å velge mellom: flytende eller fast som nevnt ovenfor.
Din logo er din identitet og merkevarebygging. Den vanligste plasseringen for logoen er innenfor overskriften, rettet til venstre. Vi leser fra venstre til høyre, topp til bunn, så logoen din vil mest sannsynlig være det første elementet dine besøkende ser på.
Side navigasjon er en av de viktigste elementene; dine besøkende trenger det for å bruke nettstedet ditt. Det skal være lett å finne og bruke, og derfor ligger det nesten alltid i toppteksten eller i det minste nær toppen av siden. Noen ganger brukes begge typer navigasjon for nettsteder med høy innhold.
Typer navigering:
Som alle vet (eller burde), er innholdet konge! Når folk besøker nettstedet ditt, er dette elementet de vil søke etter først og fremst. Det bør være hovedfokuspunktet på en nettside, slik at besøkende finner det de leter etter raskt.
Sidebjelken er elementet med sekundærinnholdet ditt, for eksempel annonsering, nettstedssøk, abonnementskoblinger (RSS, Twitter, e-post osv.), Kontaktmetoder, etc. Dette elementet er ikke nødvendig, selv om mange nettsteder bruker det. Det er oftest rettjustert, men kan være venstrejustert eller begge deler (to sidebar) så lenge det ikke forstyrrer hovedinnholdsvisning. For nettsteder som bruker horisontal og vertikal navigasjon, erstattes sidebjelken ofte med det vertikale navigasjonselementet.
Enden på en nettside skal alltid bruke en bunntekst for å la besøkende få vite at de har nådd ferdigstillelsen av websiden din. Som toppteksten er bunnteksten egentlig ikke et bestemt element, men mer av en inneholdende seksjon. Innen din footer vil du ha opphavsrett, juridisk og kontaktinformasjon først og fremst. Det er en god idé å inkludere noen få koblinger til de viktigste delene av nettstedet ditt, for eksempel toppen av siden, hjemmesiden, kontakt siden etc. Noen nettsteder bruker dette området som en mulighet til å nevne relatert materiale eller annen viktig informasjon.
Dette er et område på nettsiden som ikke er dekket av typografi eller annet innhold. Du kan føle den sterke trangen til å fylle så mye tomt rom som mulig, men gjør det ikke! Tomt plass er like viktig for en god nettside design som innholdet som skal brukes. Du kan se hvordan NetTuts-siden bruker tomt rom veldig effektivt for å hjelpe besøkende med innhold, skape sidebalanse og gi en god følelse av innholdsavstand.
Så det dekker anatomien til en nettside. Nå kan vi se på hvordan Golden Ratio angår disse elementene.
Husk tidligere da jeg sa matte var vakkert? Vi oppfatter visuell appell basert på forhold (dvs. The Golden Ratio). I tusenvis av år har kunstnere, designere, arkitekter, etc. enten forsettlig eller utilsiktet brukt et felles forhold i sitt arbeid som er estetisk tiltalende. Hva er det magiske nummeret? 1,62 (faktisk 1,618 ...) Jeg kommer ikke inn i opprinnelsen til dette nummeret, men jeg vil fortelle deg hvordan du bruker den.
Bruke det gyldne forholdet er veldig enkelt. Vi kan si at du vil finne bredden på kolonnene Main Content og Sidebar. Du vil ta hele bredden på innholdsområdet ditt (vi bruker 900px for dette eksempelet) og dele det med 1,62. Som vist i eksemplet ovenfor deler vi 900px med 1,62 og får 555,55px. Vi trenger ikke å være nøyaktig, så vi vil avrunde den til 555px. Nå vet du at hovedinnholdet ditt vil være 555px bredt og sidebaret ditt vil være 345px! Hvor lett er det?!
Men vent! Moroa stopper ikke der. Du kan også bruke Golden Ratio til andre elementets bredde i forhold til høyden eller omvendt. Dette gir estetisk tiltalende elementer med Golden Ratio-proporsjonene.
Hvis du er som de fleste, vil du ikke ønsker å trekke ut en kalkulator hver gang du vil bruke dette forholdet. For å forenkle prosessen kan vi bruke et enkelt grid. Alt du gjør er å dele bredden og / eller høyden av tredjedeler.
Hver divisjon kan ytterligere reduseres av tredjedeler, og produserer et mer detaljert rutenett. Hvis du leser den forrige artikkelen "En nærmere titt på Blueprint CSS Framework", ser du at CSS-rammeverket bruker et detaljert rutenett. Ikke bare gjør rutenettet design enklere og raskere, men også det skaper en estetisk tiltalende layout! Hvis du ikke allerede bruker et rutenett når du designer, kan det være lurt å prøve. Du kan laste ned en rutenettmal for fyrverkeri, photoshop og mer fra http://960.gs, som er et annet fantastisk CSS-rammeverk som bruker rutenett.
Som du kan se, Tuts + overholder Golden Ratio ganske bra. Den øverste en tredjedel av siden er delt igjen i tredjedeler for å vise hvordan selv overskriftsdelen brytes ned i mindre trinn på tredjedeler, svært nær Golden Ratio. Ikke rart hvorfor NetTuts-designen er så tiltalende!
Hvis du er ny for å designe, oppfordrer jeg deg til å finne noen populære nettsteder, evaluere deres elementlayout og hvordan det overholder Golden Ratio og grids. Ta deretter litt tid til å øve med Golden Ratio med elementene dine og plasser dem i layoutet ditt ved hjelp av et rutenett.
Accentsconagua