Effektive designprinsipper for nettdesignere: Alignment

Alignment er den tredje delen av serien om "Effektive designprinsipper for webdesignere." De to første segmentene dekket kontrast og repetisjon, og dette stykket vil gjennomgå justering - alle webdesignkarakteristikkene som omhandler plassering, posisjon og orientering og gruppering av elementer i et webdokument. Den fjerde og siste delen av denne serien vil dekke det effektive nettdesignprinsippet, nærhet .

Justering

Du er kanskje eller ikke klar over, men justering er en så integrert del av de fleste nettdesign at du sannsynligvis ikke engang skjønner at den er der; den sitter i bakgrunnen, skjult som et første designelement. Det kan starte som en PSD-fil, og kanskje er det den integrerte delen av malen eller temaet, ryggraden i webdesignet ditt. Nettstedet ditt har sannsynligvis en angitt layout eller rutenett som master stillas som støtter utseendet og følelsen, navigasjon, sidefelt, seksjoner, sider, topptekst og bunntekst.

Justering som et effektivt webdesignprinsipp lar oss ta bevisste beslutninger om hvordan og hvor elementer plasseres på siden. Å dra nytte av strategisk plassering hjelper oss å lage sterkere og mer overbevisende komposisjoner og bruke et rutenettsystem gir en standard guide for elementplassering. Uten en justeringsstrategi ville vi endt opp med vilkårlig plasserte elementer, med liten eller ingen forbindelse til flere eller lignende funksjoner. Uten justering vil utseendet og følelsen på nettstedet ditt være et tilfeldig utvalg av åpen lidelse.

Justeringsstrategier går langt utover justeringsattributtet, flyteegenskapen eller ordningen av tekst og bilder for å inkludere andre faktorer som brukerinteraksjon, informasjonsarkitektur, rutenett og organisering av webdesignelementer.

Hvordan tar du beslutninger om justering av webdesign?

Den primære vurderingen for å ta beslutninger om designjustering bør omfatte analyse av typiske brukerinteraksjonsmønstre, inkludert testing av øyesporing. Flere studier er utført for å bestemme hvordan brukere ser på en webside - hvor og hvordan øynene naturlig skanner en side, banen øynene tar fra start til slutt, og hvordan brukeren tar beslutninger om hvor han skal hoppe eller klikke til neste innhold. Diskusjonen av Charles O'Connell om Usability.gov vist i figur B gjennomgår implikasjonene av øyesporingsstudier. Et av de viktigste resultatene fra disse studiene viser at de fleste brukere følger et "F" -formet "varmekart" -mønster mens de skanner innhold på websiden, starter fra toppen når overskriftene trekker i øynene før bilder, skanner bare noen få ord, og så vil øynene skanne nedover på venstre side av siden og lete etter mer merkbart innhold, og ta klikkvedtak i løpet av sekunder.

Figur B

Informasjonsarkitektur (IA) - nettstedets kontekst bør også tas hensyn til, inkludert den overordnede konseptuelle modellen og designplanen, strukturen og organisasjonen. AI-prosessen skisserer nettstedshierarkiet, kjernenavigering, standarder og spesifikasjoner, og merking og brukervennlighet, og kulminerer med detaljerte designmønstre i form av sidetrådrammer, diagrammer for nettstedsdesign og prototyper. IA-konseptuelle modellen til et eksempel nettsted som vist i figur C gir et utgangspunkt for å utvikle flyten, og til slutt justere hovedelementene for en typisk dynamisk nettstedmodell.

Figur C

Hvordan etablerer justering overbevisende nettsteder?

Alignment utvikler orden og orden formidler harmoni; dermed samler websideelementer til en riktig balansert plan. Ordningen av elementer på en ordnet måte formidler lydutvikling og komposisjon.

Eksempeloppsettet som vises i figur D starter med en logo øverst til venstre, topptekst og navigasjonsområde rettet horisontalt langs høyre side, og bannerbildeseksjonen rett under nav-delen. Den venstre sidefeltet er rettet opp under logoen og strekker seg til toppen av bunntekstdelen. Hovedinnholdsområdet justeres til venstre med banneret og overskriften. En høyre sidelinje fyller det gjenværende området og justeres vertikalt med høyre kant av overskrift / nav og bannerbildeseksjoner. Bunnteksten utvider hele bredden på den definerte siden.

Figur D

Legg merke til at teksten er venstrejustert for logoen, venstre sidefelt, hovedinnhold, høyre sidefelt og bunntekst, og for overskriften for navigasjon og bannerbilde er justeringen sentrert.

Dette er bare ett eksempel på hvordan nettsideelementer bevisst kan justeres i et rutenett eller retningslinjesystem.

Nettsystemer

Flere ridesystemer og maler er tilgjengelige som gir guider eller en matrise som du kan plassere webdesignelementene dine på. Jeg har gjennomgått de to nedenfor, som lar deg endre forskjellige innstillinger som kolonner og typografi, lar deg eksportere eller lagre innstillingene som CSS og HTML-maler, og gi rask prototyping eller integrasjon i eksisterende utviklingsmiljøer.

Grid Designer av Rasmus Schultz er et online verktøy som starter med standardkolonner satt til 4 med hver 174px bredde, med en total bredde på 800px, med 20px renner og 22px marginer. I dette eksemplet er standardtypografien satt til Veranda med avsnittsstørrelse satt til 10px med linjehøyde satt til 1, og overskrifter satt til standardfont med en størrelse på 16px, og høyde satt til 2 linjer. Standardeksempelet til nettdesigner er vist i figur E :

960 Grid av Nathan Smith er lisensiert under GPL og MIT og er tilgjengelig for nedlasting. Det gir et system for å effektivisere nettutvikling ved å bruke vanlige dimensjoner, basert på bredden på 960 piksler. Variantene inkluderer en 12 kolonne og en 16 kolonne utvalg, som begge kan brukes enkeltvis eller sammen. Rutenettet på 12 kolonner er jevn proporsjonert med 60px bredt, og det 16 kolonnetettet er satt til trinn på 40 piksler, hver kolonne har en margin på 10px til venstre og høyre, og skaper 20px renner mellom kolonnene.

Figur F

Responsiv innretting

For responsiv webdesign har W3C gått i gang med CSS Flexible Box Layout Module eller "Flexbox" i korte trekk. Editors Draft, som nylig ble oppdatert 13. august 2012, er spesifikasjonen som beskriver en CSS-boksemodell optimalisert for design av brukergrensesnitt. I flex-layout-modellen kan barna til en flex-container legges ut i alle retninger, og kan "flex" størrelsene, enten vokse til å fylle ubrukt plass eller krympe for å unngå å overfylte foreldrene. Både horisontal og vertikal innretting av barna kan lett manipuleres. Hekker av disse boksene (horisontalt inne i vertikalt eller vertikalt inne i horisontalt) kan brukes til å bygge oppsett i to dimensjoner. En illustrasjon fra spesifikasjonen viser de forskjellige retninger og størrelsesbetegnelser anvendt på en "rad" flexbeholder som vist i figur G nedenfor.

Figur G

Tilbakemelding

Har du noen rutesystemer du bruker i webutviklingen din som sikrer riktig innretting av websidene dine?

© Copyright 2021 | pepebotifarra.com