Share
Sammensetning handler om å legge ut alle dine ideer og designelementer i en helhet; komponering ditt design. Vi skal kombinere alle de tidligere leksjonene vi har dekket, og på grunn av det gjør sammensetningen en av de virkelig vanskelige aspektene ved å designe noe.
Å skape en god sammensetning vil øke brukerens opplevelse når du navigerer rundt på nettstedet ditt, og vil bidra til å skape en bedre design generelt. Vi satser på justering, konsistens og sterk enhet. Sammensetning hjelper oss også til å legge til en visuell relevans for våre layouter, slik at vi kan hjelpe brukerne våre til å forstå mer om deres reise på et nettsted, hvor de skal ha neste.
Sammensetning er uten tvil den viktigste delen av designprosessen - fullstopp.
Som vi lærte i begynnelsen av denne serien, er utformingen å "bestemme utseendet og funksjonen til (en bygning, plagg eller annet objekt), typisk ved å lage en detaljert tegning av det" - og sammensetning betyr å "skrive eller lage ”. Derfor, når vi setter disse to sammen, komponerer vi (skaper) utseendet og funksjonen til vårt design i vår komposisjon - i hovedsak setter vi alt sammen sammen.
I tradisjonell trykkdesign er det mange tryksammensetninger og layouter som har vist seg å fungere godt over tid. Mange av disse finner nå veien på nettet - og med god grunn. Selv om det kan være vanskelig å oversette disse layoutene til absolutte vilkår for å designe på nettet, kan det i det minste gi oss en liten ide og fokusere på layoutene vi kanskje vil prøve vår hånd på å skape.
Det er mange sammensetningstyper eller populære layouter rundt - men jeg skal snakke om noen få her. Det er så mange ressurser på nettet for å se på disse videre, og mens disse tradisjonelle layoutene er viktige, vil jeg også gå inn i mer detalj på andre sider av sammensetningen.
Først opp er det enkle visuelle layoutet.
Et godt eksempel på Single Visual-oppsettet, som vist på Creative People-nettsiden. Dette er ganske enkelt virkelig - det er der det er et stort aspekt av et design som fungerer som det enkle visuelle fokuset. For eksempel kan du lage et design med et stort fotografi i bakgrunnen, med rikelig med hvitt plass og enkel typografi overlaid.
Z-oppsettet er ganske selvforklarende og har stor betydning for utformingen du velger for designelementene dine.
Z-Layout som sett i action på BBC News. Enkelt sagt, Z-oppsettet følger det naturlige mønsteret som øynene våre normalt tar når vi skanner over et nettsted. Hvis du ikke allerede kan forestille deg det, er det noen ganger i undersøkelser som vises i mønsteret av bokstaven "Z" - som flyter fra øverst til venstre, langs til høyre, ned diagonalt og deretter over igjen.
Dette kan være ganske nyttig når du tenker på hvor du skal plassere varene dine slik at de er relevante for brukeren. Det kan hjelpe deg med å vektlegge viktige elementer.
Et designprinsipp som brukes i fotografering og filmskaping (og mye mer), regelen for tredjedeler er et godt komposisjonssett for utforming for nettet.
Regelen for tredjedeler er en veiledning som foreslår at et bilde skal deles i ni like deler (tre på tvers, tre ned) med elementer av bildet eller design som er tilpasset kantene til hver av disse delene. Dette er spesielt nyttig i webdesign, da det kan hjelpe oss med å skape bedre proporsjoner og layouter i våre design.
Regelen av tredjedeler er et flott kompositorverktøy og layout. Selv om det ikke er noe som alltid bør følges strengt, kan det være et godt hjelpemiddel når det gjelder å designe med mer balanse. Den kan også brukes sammen med andre visuelle eller sammensatte layouter, for eksempel det enkle visuelle, eller til og med når du lager nettverkssystemene dine.
Tungt involvert i matematikk, er Golden Ratio (eller Golden Section hvis du foretrekker å kalle det det) en av de mest gjenkjennelige (i navnet, i det minste) sammensetningsoppsett eller verktøy i enhver form for design.
Ofte antatt å være opprettet av de antikke grekerne (smart folk, de var), den gyldne ratio beskriver forholdet mellom to proporsjoner. The Golden Ratio er 1.618 (03398875 ...) og det virker som mange elementer i natur er ofte funnet tilsvarende dette forholdet. Det er derfor alltid noe som er mer beroligende og behagelig for våre menneskelige øyne.
Fordi det er et kjent mønster for oss, er det fornuftig å prøve og bruke det gyldne forholdet i våre design; å skape en harmonisk balanse som bare synes å føle seg riktig og fornuftig.
En enkel måte å implementere dette på i våre design er å ta det gyldne forholdstallet (1.618) og bruke en liten bit av matematikk. I vårt design kan vi ha et område der vi for eksempel ønsker å legge noe innhold og et lite til side eller sidebar. Bare å splitte dette opp i våre design uten å tenke på det kan være enkelt - spesielt hvis du har et enkelt rutenett system på plass - men når vi tenker på det når det gjelder gullforholdet, kan vi få et bedre utseende i slutten.
Så vi har dette området som vi vil dele i to, ved hjelp av vårt gyldne forholdstall. For å gjøre dette måler du bredden på det tilgjengelige området (la oss gå med 950px for denne artiklens skyld) og del den med 1.618.
Hvis vår tilgjengelige bredde er 950px, betyr dette at vår første beregning (for hovedinnholdet) skal være: 950 / 1.618 = 587.144622991 (som vi skal runde ned til 587px).
Deretter vil vi bare trekke det tallet fra vår opprinnelige tilgjengelige bredde for å få den andre bredden, for sidefeltet eller til side: 950 - 587 = 363px.
Siden vårt hovedinnhold er mer relevant og vi ønsker at det skal være fokus i denne delen av designet, kan vi bruke den største av de to endelige tallene for bredden på det innholdet. Vi kan da bruke den minste figuren for vår side eller sidefelt. Og der har vi det - vårt perfekt gullformede design!
Merk: Ekstrapolering av dette forholdet er en del av å skape en modulær skala for ditt design.
Sammensetning handler også om plass. Dette betyr ikke at du forlater store, tomme områder i designene dine, men er i stedet å være smart med det rommet du har tilgjengelig for deg. Harnessing av hvite rom er så mye om å gi fokus for innholdet ditt, som å forlate tomme områder.
Når det er sagt, bruk padding og whitespace til din fordel - ingen vil finne det enkelt å navigere et nettsted som er rotete, har lite hierarki og hvor elementene er trange og har ingen puste rom. I stedet for å introdusere plass til steder du kan for å gi en bedre samlet opplevelse for designerne dine.
Etter å ha introdusert oss til konseptets sammensetning, vil vi i neste avsnitt undersøke plass i våre design. Ser deg der!
Accentsconagua