Share
I dag har jeg en spesiell godbit for alle dere gridelskere der ute! Khoi Vinh (en av de ledende myndighetene på typografiske nettverkssystemer i webdesign) og Peachpit har avtalt å la oss publisere et utdrag av Khois nye bok om nettdesign: Bestillingsforstyrrelse: Gridprinsipper for webdesign. I dette utsnittet vil han skissere prinsippene som alle designere bør huske på når du designer et nettsted på et rutenett.
Gitteret har lenge vært et uvurderlig verktøy for å skape orden ut av kaos for designere av alle slag - fra byplanleggere til arkitekter til typografer og grafikere. I de senere år har også webdesignere kommet for å oppdage den bemerkelsesverdige kraften som nettbasert design har råd til å skape intuitive, nedsenkende og vakre brukeropplevelser.
Bestillingsforstyrrelser leverer en endelig takst på nettet og på nettet. Det gir både de store ideene og messing-tacks teknikker for nettbasert design. Leserne er sikker på å komme unna med en god forståelse av kraften til nett, samt designverktøyene som trengs for å implementere dem for World Wide Web.
Følgende er et utdrag, men som du vil lese, er hele boken skrevet slik at den kan hentes i et hvilket som helst kapittel og fortsatt gir mening? så dette burde være et perfekt sted for deg å hoppe inn.
Vi har også en spesiell kampanjekode på 35% for våre lesere som vil hente hele boken (på slutten av innlegget)!
Balansen i denne boken fokuserer på hvordan man bygger et rutenett, inkludert en oversikt over trinnene til en arbeidsløsning. Før vi begynner, er det imidlertid nyttig å skissere prinsipper som alle designere bør huske på.
Et rutenett skal fokusere på problemløsning første og estetikk andre. Et rutenett kan gi en slik forførende estetisk forbedring til ethvert design at det er fristende å fokusere på sin skjønnhet i stedet for bruken. Mange designere blir opptatt av grensesnittets skjønnhet og forstyrrer innholdet eller funksjonaliteten for å klemme den inn, uansett hvor ubehagelig eller dårlig det kan være. Men de mest vellykkede nettene er bygd i drift av veldefinerte problemer. Uansett om de er kommunikasjonsproblemer, organisasjonsproblemer eller transaksjonsproblemer, oppnår et rutenett skjønnhet fra hvor godt det løser disse utfordringene.
Et rutenett er en del av brukeropplevelsen. Et rutenett er ikke et verktøy for å pålegge full kontroll over brukerens opplevelse av et nettsted. Snarere er et rutenett et rammeverk der brukeren kan styre sine egne erfaringer. Designere bør ikke tvinge hvert element og samhandling til å forekomme i rutenettet, og de bør heller ikke tillate brukeropplevelsen å være uformet og uforutsigbar. Det er designers jobb å ta bestemte beslutninger for brukeren - ikke alle beslutninger, men nok slik at brukeren kan oppnå sine mål uhindret. Gitteret er et verktøy for den jobben.
Jo enklere rutenettet er, jo mer effektivt er det. Prinsippene som beskrives i denne boken kan brukes til å lage grotter bestående av seksten, tjue eller enda flere enheter, i en hvilken som helst kombinasjon av kolonner med ensartet eller uregelmessig bredde. Faktum er imidlertid at designeren alltid bør streve for å lage det enkleste rutenettet mulig. Som vi ser, er matematisk presisjon et nøkkelelement i god nettdesign, men matematisk bruk er like viktig. Formlene du bruker til å beregne kombinerte enheter og kolonner, bør være ganske enkle, selv enkle å gjøre i hodet eller forklare raskt til en kollega. Jo enklere et rutenett system er å bruke og forklare for andre, jo flere brukere vil ha nytte av det rutenettet.
Her er da de viktigste trinnene i å designe en rutenettløsning:
Husk at selv om vår tenkning skal være streng, trenger vår prosess ikke å være. Selv om bestillingen der jeg har presentert disse trinnene har vært nyttig for meg, kan det ikke nødvendigvis fungere for hver
designer. Ikke alle trinn må følges i nøyaktig samme rekkefølge, for en bestemt tid, på en bestemt måte, eller til og med i det hele tatt. For eksempel, trinn 3, forberedende design, er et sett av tre forskjellige aktiviteter
Det gjøres ofte samtidig, med designeren skifte mellom blyant og papir, programvare og matematikk på baksiden av konvolutten etter behov. Det som betyr noe er ikke rote-repetisjonen av disse trinnene, men det følger
prinsippene for god nettdesign hele tiden.
Det er likevel verdt å tilbringe litt tid foran for å diskutere kritiske skritt i denne prosessen. Den første er forskning, og den andre er skisse.
Vi dømmer først virkelig god design, ikke av sin skjønnhet eller dens innovativitet eller effektivitet, men heller av hvor godt den reagerer på det opprinnelige problemet. Vellykkede løsninger krever at designeren tar tak i problemet som presenteres for henne og de begrensninger hun har i arbeidet. Designeren må spørre og forstå svaret på spørsmål som: hvem er publikum, hva er konteksten, når vil løsningen bli funnet, hvordan vil løsningen bli brukt - og selv hvorfor er løsningen nødvendig?
Disse spørsmålene kan være vanskelige å svare på, og svarene er ofte uklare eller vanskelige å analysere. En designer må være vedvarende i å spørre dem, i å trykke for gode og nøyaktige svar, og i å grundig undersøke og forstå disse svarene.
Fordi et rutenett kan gi oss et så godt utgangspunkt for å skape løsninger, kan det være fristende å avstå fra dette stadiet av prosessen. Når en designer mestrer grensesnittets grensesnitt, blir det mye lettere å starte den mekaniske prosessen med å bygge enheter og kolonner enn å gjøre det harde arbeidet med å stille og svare på disse spørsmålene.
Men nesten hvert designproblem krever en periode med gjennomtenkt studie før søket etter en løsning begynner. Uten en klar følelse av utfordringen ved hånden, er ethvert designarbeid, inkludert utvikling av rutenettet, gjort forgjeves. Det er en mye mer produktiv bruk av tid til å gjøre forskning ved starten av et prosjekt enn å hoppe rett til design.
Grid-baserte design er ikke annerledes. Jo mer fullstendig problemet blir undersøkt, desto bedre blir rutenettet. Godt undersøkt grids maksimerer kreative alternativer tilgjengelig for designeren. De forutser også og unngår feller av tidlig konstruerte grid: upassende strukturerte enheter og kolonner, grid som er bra for noen aspekter av problemet, men utilstrekkelige for andre, grid som ikke klarer å ta hensyn til begrensninger som kanskje ikke er åpenbare i begynnelsen, grids som viser seg så ubøyelig at de trenger å bli gjenoppbygget på uhensiktsmessige tider, og rister som viser seg ubrukelig for samarbeidspartnere.
Hvilke slags begrensninger skal designeren se etter? De faller inn i tre hovedkategorier:
Selvfølgelig vil designere beklage ulempene med begrensninger, eller kanskje tøyligheten til noen av de spesielle begrensningene de må kjempe med. Hvis bare disse begrensningene ble løftet, hvis problemet bare var litt annerledes, ville løsningen være mye lettere å komme til eller mer elegant i naturen.
Disse begrensningene har imidlertid en sølvfôr: På noen måter kan de gjøre et problem vanskeligere, men de kan også gjøre det lettere å komme frem til et design. Omfattende løsninger som grids kan ofte ha nytte av å bli bygget rundt en eller to ikke-regulerbare begrensninger, faste krav som ikke lett kan endres under designprosessen. Til å begynne med kan de direkte påvirke proporsjonene av et rutenett, selve størrelsen på enhetene, kolonnene og områdene som designeren konstruerer. Disse typer begrensninger kan synes å begrense mulighetene til en designer, de har også ofte en effekt av å øke designernes oppfinnsomhet. Jo bredere åpner et designproblem og de mindre restriktive begrensningene, desto mindre er en designer sannsynlig å gjøre de innsiktige sprengene av logikk som er kjennetegnet ved flott design. Nonnegotiable begrensninger kan bidra til å stimulere en designer til å gjøre dette. Enten det låser seg i en bestemt dimensjon, et teknologisk imperativ, en reklameenhet eller en annen faktor som en designer må jobbe i stedet for å tilpasse seg til sine egne behov - å ha et uendelig krav kan være enormt nyttig.
Etter å ha tilbrakt så mange avsnitt som drøfter viktigheten av å grundig undersøke et problem, kan jeg gjøre dette neste punktet mer kortfattet: skisse på papir er et viktig verktøy for grundig problemløsning, og det er spesielt nyttig å utvikle grids. Den enkle handlingen med å raskt og løst tegne spekulative kombinasjoner av kolonner og mulige oppsett kan spare store mengder tid og fører ofte til mye mer kreativt friske gridløsninger enn bare å hoppe fremover for å designe eller til og med kode et rutenett.
Jeg kan ikke understreke nok kraften og nytten av å bruke gammeldags blyant og papir for å løse problemer, å brainstorm potensielle løsninger, og utforske lovende eller til og med ikke så lovende ideer som kan være for kostbare eller tidkrevende å teste ellers. Faktisk er det viktigste aspektet ved skisse ikke så mye å lage merker på papir, men å være i stand til å løpe gjennom mange ideer raskt, med liten kostnad. Husk at du ikke har forventning om at skissene vil utgjøre noe mer enn bare skisser. Skisser trenger ikke å være pen.
Som nevnt tidligere er det også viktig å huske på at skisse ikke behøver å være en diskret fase for å bygge et rutenett som begynner og slutter på bestemte punkter. Skisse kan skje i en hvilken som helst fase gjennom prosjektet, på flere ferdighetsnivåer - selvfølgelig er det selvsagt mest hensiktsmessig å skissere tidligere, slik at flere ideer og muligheter kan kjøres gjennom veldig raskt. Å holde en blyant og en pute av papir til enhver tid er sikker på å vise seg uvurderlig.
Ordforrådet som beskriver de ulike komponentene i et rutenett kan virke enkelt, men det kan også være overraskende uspesifikt. For eksempel: Begrepet en kolonne virker rettferdig nok, men på en side basert på et åtte-kolonne rutenett, kan en designer lage et layout med bare to kolonner med tekst, noe som gjør betydningen av dette begrepet upresent. Selv bøker om håndverket av nettbasert design er ikke alltid enige om terminologi, mens noen bruker termer (for eksempel regioner, felt) som mangler fra andre. I denne bokens hensikt er det viktig å etablere en felles grunnleggende terminologi ettersom vi går videre inn i mer praktiske diskusjoner av grid.
Byggeklossen til et hvilket som helst rutenett, en enhet er den minste vertikale delen av siden (dvs. enheter måles i bredde), på hvilke kolonner er bygget. Enheter er vanligvis for smale til å huse mest tekstlig innhold.
Kolonner er grupper av enheter, kombinert sammen for å skape brukbare områder for presentasjon av innhold. De fleste tekstkolonner, for eksempel, krever at to eller flere enheter skal kunne brukes. Et rutenett med si seksten enheter kan kombineres i to kolonner på åtte enheter hver, eller fire kolonner på fire enheter hver og så videre.
Regioner er grupperinger av lignende kolonner som danner deler av siden. For eksempel, i et fire-kolonne rutenett, kan de tre første kolonnene fra venstre utgjør en enkelt region for visning av en type innhold, og den gjenværende kolonnen kan danne en annen region.
Felt er horisontale divisjoner av siden (dvs. feltene måles i høyden) som hjelper en designer til å visuelt temporere plasseringen av elementer på Y-aksen. Feltene kan beregnes på mange måter, men bruk av det gyldne forholdet er en av de mest effektive metodene.
I tradisjonell typografi er grunnlinjen den usynlige linjen som brevformene hviler på, for eksempel den nederste kanten av en hovedstad E hviler på grunnlinjen, mens nedgangen av en liten bokstav p vil falle under grunnlinjen. Grunnlinjen er dannet av en uniform, topp til bunn repetisjon av baselinjer på avstand fra hverandre i henhold til tekstens ledende eller linjeavstand.
Disse begrepene er notorisk lett å forvirre (en enhet kan betraktes som enten en horisontal eller vertikal deling av en side, avhengig av et vingspunkt), så denne boken refererer i stedet til det kolonneformede nettverket (divisjoner av siden målt i bredde ) og grunnlinjen og -regioner (divisjoner av siden målt i høyde).
Gutters er de tomme mellomrom mellom enheter og kolonner. Når enheter kombineres i kolonner, inntar de takrennene mellom dem, men ikke plassen til venstre for venstre enhet eller mellomrom til høyre for høyre side.
Marginer er plassen utenfor en enhet eller kolonne. Padding er plassen i en enhet eller kolonne. Marginene brukes vanligvis til å lage takrenner, mens polstring vanligvis brukes til å lage et lite synlig innskudd innenfor en blokk med tekst i en kolonne.
Et element er en enkelt komponent i en layout. Eksempler inkluderer et overskrift, en blokk med tekst, et bilde eller en knapp.
Moduler er grupper av elementer, kombinert for å danne diskrete blokker av innhold eller funksjonalitet. Et registreringsskjema er for eksempel en modul som består av flere bestanddeler, for eksempel en etikett, et skjemafelt, en knapp og så videre.
Dette har vært et enkelt kapittel fra boken? hvis dere vil lese resten av boka, kan dere kjøpe den på peachpit.com. Den gode nyheten er at vi har en spesiell kampanjekode for våre lesere. Få 35% av prisen ved å skrive inn koden "Khoi"under kassen prosessen på peachpit.com. Oh, og US innenlands frakt er gratis!
Accentsconagua