5 hidtidige webstedslayouttrender

I tidligere årtier blev vi vant til at lande på et websted og opleve stort set det samme. Åh, der har altid været en vis mangfoldighed i farve, billeder, illustration og typografi, men vi havde altid en menu øverst og / eller nede på siden og andre elementer indeholdt i kasser, så vi let kan se dem og følge kommandoerne .

Efterhånden har webdesignere, UI-specialister og layoutkunstnere over tid eksperimenteret med design, og hvert år er der kommet nye tendenser, der tager layouts til et helt nyt niveau. Når vi ser på 2015, et år, der allerede er halvt over, har vi set nogle tendenser komme i front og skabe dynamiske og overbevisende oplevelser for brugerne.

Designere er også begyndt at kombinere afprøvede elementer på kreative og eksperimentelle måder. Følgende fem tendenser med eksempler præsenteres individuelt, men faktisk er mange af disse elementer kombineret på spændende måder og vil sandsynligvis drive endnu nye layouts til 2016.



01. Opdelte skærme

Opdelingen af ​​delt skærm har en lodret opdeling, der kan præsentere to elementer. Årsagerne til denne type layout er dobbelt:

  1. Virksomheden har to ting at promovere, og de er af samme betydning, og split giver brugerne mulighed for at vælge blandt de to.
  2. Virksomheden ønsker måske at promovere det væsentlige i sin niche på den ene side og præsentere fotos eller medier på den anden halvdel - måske for at introducere personale eller eksempler på produkter eller tjenester. En restaurant vil for eksempel måske placere sin brandidentitet på venstre side af skærmen og derefter have eksempler på rulle til højre. Et tøjsted vil gøre det samme med rullende billeder af nogle af dets produkter til højre; endnu en anden virksomhed vil muligvis introducere sit personale gennem billeder og billedtekster til højre.

Hjemmesider inklusive PixelatingBits har allerede bemærket denne tendens, og nedenfor er to fremragende eksempler på split-screen design:

Dewey

Dewey's Pizza bruger en delt skærm med en central menulinje

Peugeot illustrerer sit nuværende slogan med en delt skærm

Peugeot illustrerer sit nuværende slogan med en delt skærm

02. Bloker gitre

Siden er opdelt i flere blokke - symmetrisk eller asymmetrisk. Disse blokke kan have samme størrelse, hvis elementerne er af samme betydning eller forskellige størrelser, baseret på rækkefølgen af ​​vigtigheden af ​​det indhold, der vises. Disse moduler kan bruges på andre sider end kun hjemmesiden og er også designet til at være fleksible, så de ændrer størrelse til at passe til fulde pc-skærme eller reduceres til at passe skærme på mobile enheder.

hvordan man ændrer penselstørrelse i Photoshop

Det første eksempel nedenfor er for 'Greats', en virksomhed, der primært markedsfører herresko via sin hjemmeside. Webstedet fungerer som dets udstillingsvindue eller katalog, og fordi alle sko er af samme betydning, er gitteret i lige blokke.

Her anvendes blokke i lige store størrelser

Her anvendes blokke i lige store størrelser

Dette andet eksempel er for en musikskole, og elementerne er af ulig vægt, den største af instruktøren og derefter mindre gittermoduler med studerendes billeder. Begge disse eksempler kom fra SitePoint .

Ulige blokke prioriterer et billede

Ulige blokke prioriterer et billede

03. Ingen krom

For årtier siden var bilerne store og indkapslede foran og bagpå med kromudsmykninger. I dag henviser udtrykket 'krom', som det vedrører side- og sidedesign, til alle containere, sidehoveder, sidefødder og kanter, der omslutter en side. Mange layoutdesignere mener, at denne krom distraherer brugeren, når fokus udelukkende skal være på fokuspunktet på siden - brand / produkt / service eller billede, der repræsenterer disse ting.

Ved at eliminere alle disse distraktioner opnås en pæn ren effekt, og menuerne og linkene placeres iøjnefaldende på siden uden containere. Der er ingen kant, sidehoved eller sidefod, der trækker øjet væk fra det ønskede fokus. Her er to eksempler på steder uden krom overhovedet som beskrevet af WebDesignerDepot .

Ingen uønsket

Ingen uønsket 'krom' her, bare kontaktinfo og menuburger øverst til højre

Du kan stadig have information, menuer og et galleri uden unødvendigt krom, som Braun beviser

Du kan stadig have information, menuer og et galleri uden unødvendigt krom, som Braun beviser

04. Enkelt skærmlayout

Ud over splitskærme er (ironisk nok) enkeltskærme kommet i forgrunden også i 2015. Disse er usmykkede skærme, der ser ud som en fjernsynsskærm eller et åbningsbillede i magasinstil, der ofte indeholder en rulle for at 'åbne' siden.

Dette layout giver et enkelt billede for at fange et komplet billede af brandet / produktet / tjenesten. Ideen er at give brugeren fuldstændig fokus og fuldstændig klarhed. Det er en ret forbløffende effekt, hvis billedet eller illustrationen er engagerende og interessant for en seer. Igen betyder det rene design og fraværet af krom ingen distraktioner.

05. Store baggrunde / parallaks

En endelig designtrend er brugen af ​​store baggrunde, der kan indstille webstedets tone og stemning. Hvis de har travle baggrunde, skal de andre designelementer i midten og forgrunden være minimalistiske; dog vil en mere minimalistisk baggrund understøtte mere travle mellem- og forgrundselementer. Her er to gode eksempler på brugen af ​​baggrund til at skabe stemning:

Denne dristige baggrund distraherer ikke fra forgrunden

Denne dristige baggrund distraherer ikke fra forgrunden

Garish? Måske. Men dette websted er stadig brugervenligt og fed

Garish? Måske. Men dette websted er stadig brugervenligt og fed

Designlayouter fra 2015 demonstrerer mangfoldighed og eksperimenter med blandinger af traditionelle layouts og usædvanlige og unikke nye koncepter. Faktisk kan layout af websteder let ses som en ny kunstform, der væver fotografering, illustration, animation, typografi, farve, form og linje for virkelig engagerende effekter.

Har du set flere 2015-tendenser? Fortæl os i kommentarerne.

Ord : Nicole boyer

Nicole Boyer er en forfatter, hvis hovedemner af interesse er web / grafisk design og markedsføring. I øjeblikket arbejder hun som redaktør hos Opgave Bjerg service.

Sådan her? Prøv disse ...