Mestre minimalisme i webdesign

Forfatter: Lewis Jackson
Opprettelsesdato: 5 Kan 2021
Oppdater Dato: 13 Kan 2024
Anonim
Essential Tips for Great Minimalist Web Design — Monday Masterclass
Video: Essential Tips for Great Minimalist Web Design — Monday Masterclass

Innhold

Når det gjelder design av brukergrensesnitt, forårsaker begrepet 'minimalisme' fortsatt mye forvirring. Hva er det? Hvordan skal vi bruke den (hvis i det hele tatt) og hvor faller den på spekteret ved siden av flat design, flat 2.0, materialdesign og andre moderne designsystemer og visuell estetikk?

La oss først se på minimalisme. Er minimalisme flat eller flat-ish? Det kan bli. Er minimalisme hvit? Det kan bli. Betyr minimalisme mindre rot? Det kan gjøre. Minimalisme kan se ut som mange ting - ta en titt på vår oversikt over minimalistiske nettsidesign for en rekke eksempler. Imidlertid glemmer vi ofte hva det tar sikte på å oppnå, og hvorfor vi faktisk trenger det.

I utgangspunktet fortaler minimalistisk design klarhet blandet med intensjon; med andre ord 'ikke mer enn det som trengs' for å skifte brukerfokus til de mest verdifulle aspektene av opplevelsen, mens du fjerner fokuset på de aspektene som kan distrahere brukerne. Etter den logikken skal all design være minimal, men bare hvis vi bruker minimalisme riktig.


Hvis du lager et helt nytt designsystem for din minimalistiske nettstedsrevisjon, må du lagre filer sikkert slik at teamet ditt får tilgang sømløst. De beste skylagringsalternativene vil hjelpe.

Visst, minimalistisk design kan se bra ut, men det bør aldri gå på bekostning av klarhet - dvs. hvor et design viser bemerkelsesverdige minimalistiske kvaliteter, men uten bevisst tanke, og viser vakker form som mangler noen intuitiv funksjon eller brukervennlighet.

La oss gå gjennom hvordan du kan oppnå minimalisme, trinnvis.

01. Begrens valg

Å begrense valget er en måte å redusere kognitiv overbelastning, som igjen hjelper brukeren med å ta beslutninger mer effektivt. For brukervennlighetens skyld må vi imidlertid ta med et par ting:

  • Relevante valg
  • Alternative valg

Relevante valg

Å avgjøre hva som er relevant for brukerne, avhenger av konteksten. Hvis vi for eksempel viser en liste over nye bloggartikler, kan det å avgjøre noen få som skal vises frem, avhenge av om brukeren er logget inn. Med den tidligere kan vi bruke kunstig intelligens til å tyde brukerens lesesmak. Med sistnevnte ville vi ikke kunne skreddersy innhold til en bestemt bruker, men det betyr ikke at vi ikke har data til rådighet. Vi kan fremdeles liste resultatene basert på trafikkdata (en anstendig webhotelltjeneste kan kjøre en rekke analyser for deg).


Imidlertid er det innhold. Når det gjelder brukergrensesnitt, hjelper sporingsverktøy som Google Analytics oss med å lære mer om brukerens oppførsel. A / B-testverktøy som Crazy Egg og Google Optimize kan teste alternative versjoner av oppsettet vårt. Heatmaps kan også indikere hva brukerne gjør og ikke bryr seg om.

Eller hvis du oppretter en app eller et nettsted fra bunnen av (kanskje ved å bruke en nettstedsbygger), vil utforming av informasjonsarkitektur gjennom brukervennlighetstesting være en bedre taktikk i fravær av data - åpen og lukket kortsortering eller funksjonell salience testing kilder til tankene her.

Så som du kan se, er det mange måter å skaffe kvalitative og kvantitative data og kombinere dem for å ta informerte beslutninger.

Alternative valg

Hvis vi utformer informasjonsarkitekturen vår godt, vil vi tilby enkle måter å få tilgang til alternative alternativer. For innhold kan dette være en "se alt" -knapp, men for navigering kan det være en hamburgermeny (ja, hamburgermenyen er ikke så ille!).


Selv om mindre er mer når det gjelder minimalisme, betyr ikke det at vi trenger å begrense vårt samlede tilbud, bare vårt tilbud på forhånd. Minimal rot = maksimal innvirkning!

Interessant faktum: Når det gjaldt produktpresentasjoner (dvs. innhold), sverget Steve Jobs berømt ved regelen om tre.

02. Strip visuell rot

Når vi snakker om rot, refererer visuell rot til kosmetiske stiler som bare tilfører emosjonell verdi - dvs. de ser kule ut, men de tilbyr ikke mye annet. Nå elsker jeg ting som ser bra ut (ikke alle designere?), Og følelsesmessig design er ekstremt viktig, spesielt i forbrukerbaserte bransjer, men det er en grunn til at det kalles overflatelaget - det påføres sist.

Det er så lett å løpe med vinden når det kommer til overflatelaget - noen kaller det for design. Hvis noe bare ikke føles riktig for deg, sa Coco Chanel en gang: "Når du får tilgang, ta alltid av det siste du tok på deg".

Men hvis du virkelig vil ta en mer fornuftig datadrevet tilnærming, er det et veldig pent triks jeg liker å bruke som innebærer skjermdeling. Mens du deler skjermen, skaff deg noen få brukere og få dem til å bestemme hvilke stiler du vil slå på og av. Fortsett til brukeren er fornøyd med både den visuelle appellen og brukervennligheten.

Når det gjelder trykkmål spesifikt (knapper, lenker, inndatafelt og så videre), kan visuell overkommelighetstesting avsløre hvilke elementer som ser ut til å være klikkbare og hvilke som ikke gjør det. Du kan oppleve at den tidligere teknikken er mer nyttig, men fordi den også vil avsløre løsninger (dvs. hvilke stiler du skal fjerne for å redusere visuell rot).

03. Optimaliser visuelt hierarki

Så vi har minimert tilbudet vårt på forhånd og optimalisert det visuelt for å redusere kognitiv overbelastning, men kan vi ta dette et skritt videre? Absolutt, men vi må også huske at brukerne er late - før brukerne leser, skanner de.

Dette betyr at der brukerne kort skanner brukergrensesnittet og innholdet vårt helhetlig, til og med den minste visuelle distraksjonen kan trekke brukerne bort fra det som er veldig viktig, noe som gjør minimering enda viktigere når det gjelder skannbarhet. Men bortsett fra det, bør elementene som er igjen etter minimering utfylle hverandre godt. Mindre er bare mer hvis vi får det til å snakke volum.

Innhold og overskrifter

Siden brukere forhåndsinnstiller innhold ved å skanne overskriftene, bør disse overskriftene være ekstremt informative, og ikke bare antyde hva de medfølgende avsnittene vil utdype, men være gode nok til at hvis brukerne bare leser overskriftene, vil de fortsatt gå fornøyde bort - dette er fortsatt sant selv om det koster oss når det gjelder SEO-verdi. Tross alt, hva nytter det å anskaffe seg hvis vi ikke kan tilby en anstendig leseopplevelse når brukeren har kommet?

Overskrifter bør også ha nytte av et tydelig typografisk hierarki, som hjelper brukerne i deres forsøk på å forstå hvordan individuelle innholdsutdrag utgjør en mengde informasjon.

UI og farge

Et lignende konsept gjelder UI og farge. Farge kan ikke bare hjelpe med kontrast, men også bidra til å utlede mening, så når brukere kommer over disse trykkmålene, forstår de automatisk hva det er de gjør, eller hvor det er de vil føre til.

Å ha overskriftene og fargene riktig har kanskje ikke noe med minimalisme å gjøre direkte, men det sørger for at elementene vi ikke er villige til å minimere, er så effektive som de muligens kan være. Ellers risikerer vi å overdesigne for å kompensere.

04. Gjør mer mindre

’Sett alt på en skjerm. Det er enklere, ikke sant? ’I teorien høres dette ut som en førsteklasses idé, men det er ikke en løsning som fungerer i alle tilfeller. Noen design er mer komplekse enn andre, og dessuten enkle for hvem? Du må være oppmerksom på å forvirre enklere implementering (gjøre ting enklere for utviklere) og enklere UX (gjøre ting enklere for brukerne).

Vurder å bryte ned UI-tunge komponenter i mindre brukerstrømmer. Selv om dette teknisk sett resulterer i mer, skaper det en illusjon om mindre. Vanligvis betyr dette å bryte opp lange skjemaer i logiske trinn, men det kan også bety å bryte opp lange artikler med bilder.

Samlet sett er minimalisme et vanskelig tema. Noen ganger mener vi det som en visuell estetikk (flate brukergrensesnitt, hvit bakgrunn osv.), Andre ganger betrakter vi det bare som et konsept eller til og med en livsstil. Når det gjelder design av brukergrensesnitt, er den beste måten å tenke på det å vurdere virkningen på kognitiv belastning som hvert element har.

Når du designer for å redusere kognitiv belastning, still deg selv disse spørsmålene for hver stil, brukerflyt, interaksjon og funksjon:

  • Trengs det?
  • Er det overskygging av elementer som er viktigere?
  • Blir det overskygget av elementer som ikke er viktigere?

Det kommer ned til visuelt hierarki - eliminerer rot og bruker design for å indikere viktighet. Noen ganger betyr det å flytte ting utenfor syne hvis det hjelper brukeren å fokusere på det som er veldig viktig.

Denne artikkelen ble opprinnelig publisert i nummer 321 av nett, verdens mest solgte magasin for webdesignere og utviklere. Kjøp utgave 321 her eller abonner her.

Interessant
21 skrifter hver grafisk designer burde eie
Lese

21 skrifter hver grafisk designer burde eie

Ma imo Vignelli, kjent italien k de igner om opprettet den kla i ke American Airline -logoen, a en gang at de ignere bruker altfor mange krifttyper. Det er noen få kla ikere om Vignelli har att i...
Det beste NFT-kunstverket som er laget hittil
Lese

Det beste NFT-kunstverket som er laget hittil

Det be te NFT-kun tverket er et hett tema akkurat nå, da NFT- alget traff over kriftene og alle lurer på hva alt opp tyret handler om. Ikke- oppbare token (NFT) er den nye te måten ...
6 ganger merkene endret emballasjen midlertidig
Lese

6 ganger merkene endret emballasjen midlertidig

Et umiddelbart gjenkjennelig emballa jede ign er et av de me t verdifulle verktøyene om en merkevare jef di ponerer. Enten det er gjennom fremtredende vi ning av æregne logoer om Nike woo h ...