Nye trends inden for webdesign. Kontrasterende skrifttypekombination

” af John Moore Williams, Head of Content Strategy hos Webflow.

Slutningen af indeværende år er lige rundt om hjørnet, og hver webdesigner har spurgt sig selv mindst én gang vigtigt spørgsmål: Hvad vil definere webdesign i det kommende 2017? Jeg besluttede at finde svaret på dette spørgsmål og spurgte WebFlow-designere, hvilke trends de troede ville dominere de næste 365 dage. Jeg gav også mine egne kommentarer til deres tanker.

Først og fremmest, lad os få udtalelsen fra Webflows hoveddesigner Sergie Magdalin.

1. Indholdsdrevet design

"Arrangementet af designelementer inden for en given struktur bør være sådan, at læseren let kan forstå hovedideen uden at reducere sin normale læsehastighed" -Hermann Zapf

De seneste par år har set et dramatisk skift i tænkningen om designs rolle i erhvervslivet. Tidligere blev design set som det sidste trin i processen med at skabe et objekt: Designer-magikeren kommer til sidst og drysser magisk støv på vores produkt for at gøre det bedre end konkurrenterne.

Det var meget interessant at se de metamorfoser, der opstod med udviklingsprioriteter.

Og det smukkeste ved disse metamorfoser var overgangen til en model, hvor indholdet igen står i spidsen for bordet. Designere over hele verden har indset, at brugere besøger websteder primært for indholdet, det være sig korte tweets, lange specialiserede artikler eller de seneste internetmemes. Designets ultimative rolle er at præsentere indhold på den mest attraktive, forståelige måde og få de bedste resultater ud af det.

Dette er en af grundene til skiftet fra "skeuomorphic" design (hvor elementer er afbildet så meget som muligt som deres modstykker i den virkelige verden) til fladt, minimalistisk design. Ud fra disse overvejelser skabte Google Material Design.

Selvfølgelig, som Newtons tredje lov siger, er der for hver handling en lige stærk reaktion. Mange designere mener, at mode til fladt design har "dræbt" selve designånden. Vi forventer, at denne debat fortsætter i det kommende år, men fokus vil fortsat være på indholdet - grundlaget for ethvert designarbejde.

2. Interaktion af høj kvalitet mellem designere og udviklere og designere indbyrdes

Designs betydning for at forme forretning er stigende, så der lægges mere og mere vægt på, at designere arbejder sammen med deres meddesignere og deres medudviklere.

Denne bekymring for interaktion med designere er delvist opstået på grund af den enorme mængde af mobil- og webapplikationer, der udvikles i dag. Ud over det faktum, at sådanne gigantiske virksomheder som Google, Facebook, Twitter og LinkedIn kræver det gigantiske arbejde af et designteam med absolut forskellige sider, skal designere altid være på samme side med hinanden. Det betyder, at der er behov for større kommunikation om projektet og hvordan man mest effektivt samarbejde.

For at gøre denne opgave nemmere er der lavet mange værktøjer lige fra teamskabeloner og boards i Webflows Team til grafisk redaktør Figma-grænseflader, der viser ændringer i realtid. Jeg er sikker på, at disse platforme i 2017 vil blive forbedret og suppleret.

Hvis vi taler om samspillet mellem designere og udviklere, er der meget opmærksomhed vigtig proces overførsel af arbejde. For eksempel i stedet for at sende tungt og omfangsrigt statiske billeder Designere kan nu dele live-renderede mockups med værktøjer som InVision, Marvel, UXPin.

Carson Miller vægtede dette i sin nylige artikel "The Future of Front-End Design" på TechCrunch:

“Før eller siden vil værktøjer til at skabe design og designmønstre fuldstændig erstatte frontend-udvikling. Du kan nemt skabe en højkvalitetsbase for ethvert af dine frameworks uden at skulle skrive kode i hånden."

3. Forenklet designer-til-udvikler-proces

Design- og prototypeværktøjerne nævnt ovenfor giver dig mulighed for at visualisere de forskellige stadier af samarbejdet gennem visualiseringer, der spænder fra animerede Keynote-filer til fuldt funktionelle websteder. Denne metode til deling af arbejdsmateriale reducerer responstiden i projektet og øger derved kvaliteten af designet, øger hastigheden på udviklingsteamet og mindsker muligheden for skuffelse over resultatet. Det forbedrer også kundeinteraktionen. Eksempelvis er klientmøder for mange WebFlow-brugere blevet til fuldgyldige arbejdsmøder, hvor designere hurtigt kan implementere ideer, og alle kan teste deres ideer næsten med det samme.

Webdesigntendenser i det kommende år ifølge produktdesigner Gadzhi Kharkharov:

4. Stor, høj overskrift

Efterhånden som verden af webdesign begynder at fokusere på indhold, er det mere og mere almindeligt at se inspirerende overskrifter på websteder med matchende skrifttyper, der er lige så store og fed som deres indhold.

#MadeInWebflow Heco-partnerne

Som du kan se fra eksemplerne, henviser "stor" og "fed" ikke kun til beskrivelsen af skrifttypen. Det handler snarere om at dedikere en væsentlig del af hjemmeskærmen til en enkel, men stærk og selvstændig udtalelse om produktet eller tjenesten. En sådan overskrift skal indeholde essensen og være forståelig for enhver besøgende, og undgå unødvendig pompøsitet (okay, sætningen "Design det umulige" lyder måske for højt).

I nutidens travle, informationsbelastede miljø fungerer korte, kraftfulde udtalelser som disse godt for ethvert mærke.

5. Kompleks markup, der kommer fra det grundlæggende i grafisk design

Hvis vi ønsker at forudsige udviklingen af webdesign (af i det mindste, dens visuelle side), skal vi vende os til historien om udviklingen af grafisk design.

I løbet af de sidste par år har websidelayoutet været begrænset CSS-funktioner, men nye moduler som Flexbox og CSS Grid (kommer i marts 2017) vil give dig mulighed for at realisere dine vildeste webmarkup-ideer.

Vores hovedopgaven nu - at forstå, hvordan det nye gitterlayout af blokke skal fungere inden for rammerne af adaptivt design.

Her er nogle eksempler på, hvad du kan forvente (forudsat at du har en browser, der understøtter CSS Grid, såsom Firefox Nightly, Safari Technical Preview eller Chrome Canary):

Eksperimentelt Layout Lab Jen Simmons

Vær opmærksom på hovedblokkens stil - en klar reference til grafisk designs historie.

Gitter efter eksempel

Du kan se flere eksempler på hjemmesiden.

6. Flere SVG'er

SVG (skalerbar vektorgrafik) Vektorgrafik) har flere fordele for webdesignere og udviklere end traditionelle billedformater som JPG, PNG eller GIF.

Grundlæggende fordele ved SVG er beskrevet i selve formatets navn - disse er skalerbarhed og vektor. I modsætning til raster- og pixelbaserede formater består SVG-billeder af vektorer - matematiske beskrivelser objektformer. Det betyder, at SVG er opløsningsuafhængig, og billeder i dette format vil se godt ud på enhver skærm og enhed. Der er ingen grund til at bekymre sig om, at billeder er slørede på nethinden.

Men det er ikke alt. SVG er også berømt for ikke at kræve, at HTTP-anmodninger sendes. Hvis du nogensinde har tjekket dit websteds indlæsningshastighed, har du måske bemærket, at disse HTTP-anmodninger virkelig kan bremse dit websted. Der er ikke noget sådant problem med SVG.

7. Værktøjer til regelbaseret responsivt design

Adaptivt design fuldstændig ændret måden, vi ser på webapplikationer, og hvordan man opretter dem.

Men mærkeligt nok har princippet om drift af designprogrammer overhovedet ikke ændret sig. De fleste af disse værktøjer fungerer sådan her: du skal oprette en lignende side igen og igen for at forskellige enheder og tilladelser. I en branche, der kræver hurtig idégenerering, hurtig udvikling Og hurtig start, sådan spild af tid er simpelthen uacceptabelt.

En ny bølge af designværktøjer (såsom Figma) forventes at være baseret på "regler", der justerer udseendet af websteder på forskellige skærme og enheder, hvorved antallet af gentagne designerhandlinger reduceres. Sådanne værktøjer er baseret på de rumlige forhold mellem elementer, og efterhånden som vi ændrer skærmstørrelse eller enhed, stræber de efter at bevare disse relationer ved at ændre størrelsen af elementer og polstringen mellem dem.

Forresten er der i dag lignende værktøjer til hjemmesidelayout ikke kun for designere, men også for almindelige brugere. For eksempel TruVisibility.com - platformen tilpasser det skabte design efter bestemte regler, hvorefter layout og størrelser af elementer tilpasses til skærmstørrelsen. Tilbage er blot at foretage et par justeringer for at sikre, at websiden ser ud, som den skal på enheder. Brugeren behøver ikke at genskabe versionen til mobile enheder og dette sparer ham for meget tid.

Designtrends for 2017 ifølge Ryan Morrison, senior grafisk designer.

8. Flere klare farver

Da æraen med minimalisme og brutalisme begyndte i webdesign i 2016, forsøgte designere at tilføje mere personlighed til deres arbejde uden at gå ud over moderigtige stilarter. Og der er i hvert fald et par tilfælde, hvor lyse og dristige farver er blevet brugt med stor succes.

Tag et kig på det nye Asana-websted med et stænk af farve:

Nyt ikon Instagram apps modtaget meget kritik, men dette redesign genopfriskede uden tvivl mærket:

Alt, hvad Stripe gør, kræver ikke en separat visning:

Som du kan se, er det ikke kun lyse og dristige farver. Gradienter er også tilbage i stil, og blander og slører farver i nuancer, der minder om en middagshimmel eller en flammende solnedgang. Det er noget af en renæssance af naturalisme med levende farver og dristige gradienter, og jeg ser personligt frem til at se mere af denne slags arbejde i 2017.

Selvom det måske er værd at reducere lysstyrken lidt? Vi holder øje med dig, Asana.

9. Mere vægt på animation

Animerede elementer har spillet i lang tid nøglerolle i webgrænsefladen, og denne tendens vil fortsætte i 2017. Faktisk, så længe designere har adgang til værktøjer til at udvikle overbevisende animationer, vil vi se disse effekter blive mere synlige og mere sofistikerede.

Dette emne er især vigtigt, fordi det bliver nemmere at lave animationer hver dag. På design- og indholdskonferencen 2016 understregede animationsguruen Val Head, at designere, når de designer animerede elementer, skal have mærkets mål og behov i tankerne for at opnå den effekt, indholdsskabere forventer. Hvis dette råd følges, vil animationen udføre opgaver, der er meningsfulde for brandet, og ikke kun give brugeren migræne.

10. Usædvanlige markeringer

2016 er ligesom de foregående år berømt for de endeløse diskussioner om, at webdesign enten dør eller mister sin ånd.

De, der forsøger at overbevise alle om, at webdesign er dødt, overdriver klart. Mange fortsætter med at lede efter måder at præsentere indhold for brugerne på på nye måder. En af de mest fristende måder er at bryde systemet og ignorere det sædvanlige gitterlayout dikteret af reglerne for responsivt design.

Den "brudte" mærkningsmetode involverer elementer, der går ud over det omhyggeligt justerede gitter. Sådanne teknikker kan nogle gange endda virke ubehagelige for øjet. For eksempel:

Tekster og billeder, der kolliderer med hinanden:

Tekster og billeder spredt (tilsyneladende) tilfældigt over siden:

Dette var den første del af oversættelsen af artiklen "18 webdesigntrends i 2017". Er du enig i Webflow-eksperternes meninger? Hvilken slags webdesign tror du vil være på mode i det kommende år?

” af John Moore Williams, Head of Content Strategy hos Webflow.

Slutningen af indeværende år er lige rundt om hjørnet, og hver webdesigner har mindst én gang stillet et vigtigt spørgsmål: hvad vil definere webdesign i det kommende 2017? Jeg besluttede at finde svaret på dette spørgsmål og spurgte WebFlow-designere, hvilke trends de troede ville dominere de næste 365 dage. Jeg gav også mine egne kommentarer til deres tanker.

Først og fremmest, lad os få udtalelsen fra Webflows hoveddesigner Sergie Magdalin.

1. Indholdsdrevet design

"Arrangementet af designelementer inden for en given struktur bør være sådan, at læseren let kan forstå hovedideen uden at reducere sin normale læsehastighed" -Hermann Zapf

Det var meget interessant at se de metamorfoser, der opstod med udviklingsprioriteter.

2. Interaktion af høj kvalitet mellem designere og udviklere og designere indbyrdes

Designs betydning for at forme forretning er stigende, så der lægges mere og mere vægt på, at designere arbejder sammen med deres meddesignere og deres medudviklere.

Denne bekymring for interaktion med designere er delvist opstået på grund af den enorme mængde af mobil- og webapplikationer, der udvikles i dag. Ud over at sådanne gigantiske virksomheder som Google, Facebook, Twitter og LinkedIn kræver et herkulsk designteam fra helt forskellige sider, skal designere altid være på samme side med hinanden. Det betyder, at der kræves større kommunikation om projektet, og hvordan man arbejder sammen mest effektivt.

For at gøre denne opgave lettere, er der blevet skabt mange værktøjer, fra samarbejdsskabeloner og tavler i Webflows Team til Figma, en grafisk interface-editor, der viser ændringer i realtid. Jeg er sikker på, at disse platforme i 2017 vil blive forbedret og suppleret.

Når det kommer til samarbejde mellem designere og udviklere, er der meget opmærksomhed på den altafgørende proces med at aflevere arbejde. For eksempel, i stedet for at sende tunge og omfangsrige statiske billeder, kan designere nu dele live-renderede mockups takket være værktøjer som InVision, Marvel, UXPin.

Carson Miller vægtede dette i sin nylige artikel "The Future of Front-End Design" på TechCrunch:

3. Forenklet designer-til-udvikler-proces

Webdesigntendenser i det kommende år ifølge produktdesigner Gadzhi Kharkharov:

4. Stor, høj overskrift

#MadeInWebflow Heco-partnerne

I nutidens travle, informationsbelastede miljø fungerer korte, kraftfulde udtalelser som disse godt for ethvert mærke.

5. Kompleks markup, der kommer fra det grundlæggende i grafisk design

Hvis vi vil forudsige udviklingen af webdesign (i hvert fald dets visuelle side), er vi nødt til at se på historien om grafisk design.

De seneste par år har websidelayout været begrænset til CSS, men nye moduler som Flexbox og CSS Grid (kommer i marts 2017) vil give dig mulighed for at realisere dine vildeste weblayoutideer.

Vores hovedopgave er nu at forstå, hvordan det nye gitterlayout af blokke skal fungere inden for rammerne af responsivt design.

Her er nogle eksempler på, hvad du kan forvente (forudsat at du har en browser, der understøtter CSS Grid, såsom Firefox Nightly, Safari Technical Preview eller Chrome Canary):

Eksperimentelt Layout Lab Jen Simmons

Vær opmærksom på hovedblokkens stil - en klar reference til grafisk designs historie.

Gitter efter eksempel

Du kan se flere eksempler på hjemmesiden.

6. Flere SVG'er

SVG (skalerbar vektorgrafik) har flere fordele for webdesignere og udviklere end traditionelle billedformater som JPG, PNG eller GIF.

De vigtigste fordele ved SVG er beskrevet i selve formatets navn - skalerbarhed og vektor. I modsætning til raster- og pixelbaserede formater består SVG-billeder af vektorer - matematiske beskrivelser af et objekts form. Det betyder, at SVG er opløsningsuafhængig, og billeder i dette format vil se godt ud på enhver skærm og enhed. Der er ingen grund til at bekymre sig om, at billeder er slørede på nethinden.

7. Værktøjer til regelbaseret responsivt design

Responsivt design har fuldstændig ændret den måde, vi ser på webapplikationer og skaber dem.

Men mærkeligt nok har princippet om drift af designprogrammer overhovedet ikke ændret sig. De fleste af disse værktøjer fungerer sådan her: du skal oprette en lignende side igen og igen for forskellige enheder og opløsninger. I en branche, der kræver hurtig idégenerering, hurtig udvikling og hurtig lancering, er dette spild af tid simpelthen uacceptabelt.

En ny bølge af designværktøjer (såsom Figma) forventes at være baseret på "regler", der justerer udseendet af websteder på forskellige skærme og enheder, og derved reducere antallet af gentagne designertrin. Sådanne værktøjer er baseret på de rumlige forhold mellem elementer, og efterhånden som vi ændrer skærmstørrelse eller enhed, stræber de efter at bevare disse relationer ved at ændre størrelsen af elementer og polstringen mellem dem.

Designtrends for 2017 ifølge Ryan Morrison, senior grafisk designer.

8. Flere klare farver

Tag et kig på det nye Asana-websted med et stænk af farve:

Instagrams nye app-ikon har modtaget en del kritik, men dette redesign har bestemt genopfrisket brandet:

Alt, hvad Stripe gør, kræver ikke en separat visning:

Selvom det måske er værd at reducere lysstyrken lidt? Vi holder øje med dig, Asana.

9. Mere vægt på animation

Animerede elementer har længe spillet en nøglerolle i webgrænsefladen, og denne tendens vil fortsætte i 2017. Faktisk, så længe designere har adgang til værktøjer til at udvikle overbevisende animationer, vil vi se disse effekter blive mere synlige og mere sofistikerede.

10. Usædvanlige markeringer

2016 er ligesom de foregående år berømt for de endeløse diskussioner om, at webdesign enten dør eller mister sin ånd.

Den "brudte" mærkningsmetode involverer elementer, der går ud over det omhyggeligt justerede gitter. Sådanne teknikker kan nogle gange endda virke ubehagelige for øjet. For eksempel:

Tekster og billeder, der kolliderer med hinanden:

Tekster og billeder spredt (tilsyneladende) tilfældigt over siden:

Dette var den første del af oversættelsen af artiklen "18 webdesigntrends i 2017". Er du enig i Webflow-eksperternes meninger? Hvilken slags webdesign tror du vil være på mode i det kommende år?

Det er ingen hemmelighed, at IT-branchen udvikler sig med stormskridt. Nye teknologier, ny hardware, nye projekter. Alt dette har heller ikke sparet på webudvikling. I dag er stederne langt fra at være de samme, som de var for mindst et par år siden. Rigtig mange ting har ændret sig, og nu lidt flere detaljer.

Brug af en videobaggrund

Det ser ud til, at baggrunden har været i brug i lang tid. Men det blev et virkelig betydeligt fragment af stedets interiør først i år. For mange brugere skaber det en ægte "wow"-effekt.
Et eksempel på en god implementering af en videobaggrund - http://globalmonitoring.ru/

parallakse effekt

Et andet tilsyneladende velstående koncept, men det er først for nylig begyndt at blive anvendt overalt. Hvis nogen ikke ved det, er dette en måde at tilføje volumetriske lag til et websted og få dem til at bevæge sig efter behov. Med andre ord, tilføj mere interaktivitet.
Eksempel - https://www.grabandgo.pt/

JavaScript og biblioteker

Apropos interaktivitet. Har du set mindst én hjemmeside uden js i 2017? mig ikke. Og det handler ikke engang om js selv, men om dets biblioteker. Ja, jQuery er en fed ting, men alle de bedste frontend-udviklere har allerede skiftet til react.js, angular.js, vue.js og andre biblioteker. Jeg skal selv lære en af dem i fremtiden (sandsynligvis vue.js).
Hvor ville du hen uden js? Alle disse hoppende elementer, blackouts, jævne overgange og så videre - det hele er praktisk at implementere gennem scripts.

Tilpasningsevne

Noget der er værd at tale om hver for sig, og vi vil helt sikkert tale om det. Adaptivt webstedsdesign er ikke engang en 2017-trend. Dette er en generel tendens seneste år. Som bruger af en af Runet freelance-børserne ser jeg hver dag forespørgsler som: "Opret en adaptiv hjemmeside" eller "Vi har allerede en hjemmeside, vi har brug for en adaptiv" og så videre. Folk forstår, at nu bruger menneskeheden meget mere tid på smartphones end på en computer, så man laver et adaptivt websted (med princippet Mobile First) er i princippet en meget vigtig komponent i at skabe en hjemmeside.

Bots

Sandsynligvis det mest interessante punkt i denne artikel er bots. Nu simple sider få mennesker har brug for det. Giv alle interaktivitet og livlighed til webstedet. En bot er en slags assistent, der allerede bliver brugt aktivt. Mest simple eksempler— VKontakte- og Telegram-bots, der selv sender dig enhver information efter anmodning eller uden den. Dette er meget praktisk for administratorer af det fællesskab, hvor botten opererer. Alt er hurtigt, smukt og automatiseret.

Hvert år vokser antallet af websteder, der overrasker og glæder sig over nye designfunktioner. For to år siden postede vi en oversættelse om trends inden for webdesign 2015. Hvad har ændret sig siden da? Der lægges stadig vægt på grafik af høj kvalitet og minimalisme, store skrifttyper og interaktive elementer(For eksempel, skjult menu). Teknologien står dog ikke stille, og webdesignere eksperimenterer med dynamik, animation og placering af objekter på skærmen uden at gå på kompromis med webstedets ydeevne. Vi gør dig opmærksom på et overblik over de trends, som traditionelt sættes af vores vestlige kolleger.

1. Mobile-first-princippet

Navnet på princippet taler for sig selv: Designet er først og fremmest udviklet under hensyntagen til den nemme visning på mobilenhedens skærme. Dette princip er ikke nyt, men da mere end 60 % af brugerne tilgår internettet fra smartphones, er det blevet afgørende i år. Da mobilenhedsskærme er små, giver designere den mest informative, men samtidig effektive visning af indhold. Det samme gælder tekster - vand og tomme sætninger hører ikke hjemme i "mobil-først"-konceptet.

2. Frihåndsillustrationer

Dette er en fantastisk måde at formidle en idé eller stemning på en original måde. Håndtegnede illustrationer er unikke, tilføjer variation og et strejf af uformalitet til brugerens interaktion med webstedet og gør designet varmt og venligt.

Eksempel illustration fra dropbox.com

Talentfulde illustratorer kan skabe billeder, der den bedste måde vil svare til brandet og virksomhedens stil, med deres hjælp kan du opnå dyb personalisering.

3. Animation

Designere bevæger sig væk fra kun at bruge statiske billeder og leder efter nye måder at engagere publikum til at skille sig ud fra andre. Brands har brug for personalisering, og animation, i høj grad takket være udviklingen af HTML5, CSS og jQuery, spiller en vigtig rolle her.

Animation kan implementeres på forskellige måder: fra en usædvanlig indlæsningsstatuslinje, der vil lyse op i ventetiden, til en ændring udseende objekt, når du holder markøren over. Der er også fuldskærmsanimation, som er det centrale element, der fokuserer brugerens opmærksomhed.

Men animation bør bruges på en afbalanceret måde for at uddybe brugerens interaktion med webstedet og ikke skræmme ham væk. Der er trods alt ingen, der ønsker at vente med at se hovedindholdet, mens latterlige og ubrugelige animationer indlæses - alt skal se naturligt, passende og ikke distraherende ud.

4. Fed farver

Indtil for nylig anbefalede eksperter kun at bruge "webkompatible" farver i design - dem, der ikke forårsager irritation og ikke belaster synet. I dag ændrer alt sig - når de bruges korrekt, gør dristige farver underværker, der gør almindelige hjemmesider til lyse, rige og mindeværdige.

Eksempel på brug af dristige farver på spotify.com

Lyse farver er en måde at personliggøre på den globale mode for minimalisme i design. Det er sandsynligt, at designere vil fortsætte med at eksperimentere med paletter og skabe unikke gradienter og farver.

5. Usædvanlig rulning og parallakse

Tidligere prøvede designere deres bedste vigtig information placere den i den del af siden, som brugeren ser umiddelbart efter at have gået til siden. I dag er det svært at afgøre, hvilken del af siden der vil være "synlig", fordi overgange laves fra enheder med forskellige opløsninger Skærm. Derfor er der brug for en anden tilgang.

Scrolling, som oprindeligt var nødvendigt for at flytte op og ned på en side, bliver nu brugt kreativt af designere. Når det implementeres dygtigt, bliver det et universelt værktøj til at præsentere indhold. Således kan du automatisk konfigurere visning og stop af video eller animation, når du ruller, udseendet af tekst og billeder osv.

6. Asymmetriske mønstre

2016 var præget af mesh-mønstre, og i 2017 var der en tendens til brug af asymmetriske og "revne" mønstre. På trods af at langt de fleste mærker foretrækker traditionelle og klare kort-UI-skabeloner (de er trods alt logiske og nemme at navigere i), begynder nogle stadig at eksperimentere for at skille sig ud og differentiere sig fra konkurrenterne.

Eksempel på asymmetrisk design (isaidicanshout.com)

Asymmetrisk design skabt med dygtige hænder, er fantastisk til at henlede opmærksomheden på visse dele af siden. Tak til forskellige størrelser skrifttyper og arrangement af elementer kan korrekt placere accenter på siden og guide brugerne i den rigtige retning.

7. Skygger

Shadows selv er langt fra en nyskabelse inden for webdesign. På et tidspunkt var de populære, så blev de glemt. Hvad er så tendensen? I brugen af enorme, nogle gange endda overdrevne skygger, der kastes af billeder, når du svæver med markøren.

Dybe skygger, når du svæver over billeder (abduzeedo.com)

Denne tilgang tillader en flad skabelon at fokusere opmærksomheden på det aktive element og involvere i interaktion. Dette skaber en effekt af dybde - det er rart bare at flytte markøren hen over sådanne billeder.

8. Store og fede skrifttyper

Typografi er en anden måde at tilpasse på. Distribution af enheder med høj opløsning skærme gør skrifttyper læsbare og tydeligt skelnelige, så designere eksperimenterer i stigende grad med dem.

Eksempel på brug stor skrifttype(bigyouth.fr)

9. Ultraminimalisme

Minimalisme har længe været en afgørende trend inden for webdesign. Men nogle går videre og fjerner alle antydninger af indretning fra websteder og efterlader kun de elementer, der er vigtigst for brugerne.

Absolut minimalisme (mathieuboulet.com)

I det givne eksempel er der kun indikationen "Rul", et link til afsnittet "Om mig" og links til profiler på sociale netværk. Dernæst, når du ruller, er der en designers portefølje.

10. Bland vandret og lodret tekst

Ændring af det sædvanlige horisontale arrangement af tekst "opfrisker" webstedet og motiverer dig til at læse, hvad der står der.

Eksempel på usædvanlig tekstretning (takewhatyoucancarry.com)

Bemærk venligst, at blandingen er lavet godt - der er ingen unødvendige forvirrende elementer. Ordet "tage" er skrevet lodret - dette er nok til en brandet præsentation af indhold.

11. "Modulation"

I dette tilfælde skal teksten stå i kontrast til baggrundsbilleder så de ikke smelter sammen.

13. Tofarvet

Webstedets design er baseret på 2 grundfarver. Det ser stilfuldt og moderne ud. For eksempel er Australian Design Radios hjemmeside designet i præcis denne stil:

14. Geometriske skrifttyper

I dette tilfælde kombineres skrifttyper med en række geometriske former. Fonte som Futura, ITC Avant Garde og Proxima Nova er velegnede til dette formål.

Et eksempel på brug af "geometriske" skrifttyper (hugeinc.com)

Du kan tilføje udtryksfuldhed, selvsikkerhed og endda en vis aggressivitet til webstedet ved hjælp af meget fede skrifttyper ovennævnte familier.

Lad os opsummere det

I 2017 vil designere forsøge at tilføje strejf af individualitet til den sædvanlige minimalisme. Nogle vil gøre dette med farve, nogle med skrifttyper, og nogle med usædvanlig blokplacering.

Når du udvikler og godkender et design, skal du ikke glemme hovedreglen - det skal være brugervenligt og motiverende at tage den målrettede handling. Er du sikker på din ressources ydeevne? Rapporten fra en siterevision udført af "tjenesten" kan fortælle dig om dette. Personlig leder"SeoPult. Udover design- og brugervenlighedsrevisionen vil du modtage en detaljeret analyse af den tekniske komponent, semantik, position i forhold til konkurrenter osv. Alt dette vil hjælpe dig med at forbedre din hjemmeside og øge dens effektivitet som salgsværktøj.

Artiklen er opdelt i to hovedområder: grafik i webdesign og selve udviklingen, og hvert afsnit har sine egne komponenter.

WEBDESIGNTRENDS

Så vi starter med webdesigntendenserne i 2017 og hvad der venter os i 2018. Hvilke ændringer er der sket i grafik, brug af skrifttyper, animation og video og så videre.

Grafisk design

Trenden, der anses for at være moderigtig, er fladt design ( Fladt design). Vektorgrafik bruges med tilføjelse af rastergrafik for at understrege; eksempler på sådanne websteder er givet nedenfor. Minimalisme og responsivt design, enkel og forståelig for webstedsbrugere.

Vektor billeder

Brugen af vektoren på websteder er stigende, den har en lav vægt, hvilket betyder indlæsning i gang hurtigere. Da vektoren kan strækkes og komprimeres som ønsket, vil din grafik altid se godt ud på enhver enhedsskærm i enhver opløsning. Til vektor billeder bruge SVG-formatet (Scalable Vector Graphics). Flertal vektor editorer giver dig mulighed for at gemme i dette format, og der er ikke behov for specifik software.

Farveløse - spøgelsesknapper

Bevægelsen mod minimalisme påvirkede også knappernes design. Brugen af denne type knapper i webstedsdesign er stigende. Sådanne knapper overbelaster ikke webstedet og ser originale ud. Vores hjemmeside bruger også sådanne knapper i bunden af artikelblokken.

Klik på billedet for at forstørre det

Stilfuld 3D-grafik

3D-grafik tager også fart i det nye år. 3D-kompositioner passer godt til fladt design og komplementerer den, giver den mere dybde og understreger moderniteten.

Klik på billedet for at forstørre det

Animation, video og interaktive objekter

Hjemmesider er begyndt at bruge levende billeder og baggrunde, dette tiltrækker bestemt opmærksomhed og giver siden en vis dynamik. Der er også sket en stigning i brugen af video og alle former for animationer til brugerinteraktion.

Komplekse masker

Tilbage i slutningen af 2016 dukkede en trend op for websteder, der bruger dynamiske, komplekse gitter med banebrydende design.

Geometri i forskellige former

Brug geometriske former forskellige typer til tekst, oplysende fremhævede blokke og baggrunde. Rektangler og firkanter er gode til at fremhæve vigtige ting.

Klik på billedet for at forstørre det

Moderigtige farver

Her, hvem kan lide hvad, og hvad er per definition egnet til hvert projekt. Det eneste, der kan siges, er, at farverne bliver mere levende. I kombination og god kontrast er det mere bekvemt for brugeren at navigere på webstedet og opfatte information.

Ubetinget tilpasning

Nu er der ingen grund til at sige, at websteder skal gøres venlige over for mobile enheder. Tilpasning er en absolut faktor for en moderne hjemmeside. Det er meget vigtigt at tænke designet igennem mobil version så alt vigtige elementer var lige ved hånden, og han forstod intuitivt sitenavigationen.

Tvister aftager ikke om, hvorvidt det er bedre at sætte et ikon eller en inskription. Testresultater på 240.000 brugere af mobilenheder.

Mobilmenualternativer

Hvis der ikke er mange sektioner på webstedet, så er det bedre at bruge faner som en menu, eller tilføje en knap til dem i slutningen i en ekstra rullemenu.

Fleksibel dynamisk menu

Løsningen ligger i en menu, der tilpasser sig skærmens bredde, viser så mange faner som muligt og skjuler det, der ikke er inkluderet under "Mere".

WEBUDVIKLINGSTRENDS

Gennemtænkt design

I udviklingen af webstedsdesign, ikke kun Grafisk designer, samt promoveringsspecialister og marketingfolk. Placeringen af hvert element har sit eget formål, for et behageligt ophold for brugeren.

Mindre tekst er bedre!

Tekstdelen af webstedet skal være kortfattet, så meget som muligt, og afsløre det foreslåede emne. Suppler så vidt muligt med tekniske detaljer, såsom priser, egenskaber mv.

CMS rating

Du kan altid se den seneste vurdering. Uanset hvilken mulighed du vælger, skal du huske på, at ifølge officielle udtalelser fra søgemaskiner er der ingen grundlæggende forskel på, hvad dit websted er lavet på. Enhver motor eller ramme skal ændres til bedste funktionalitet dit projekt.