Moderne trends inden for webdesign. Farveløse - spøgelsesknapper

At lave en almindelig hjemmeside er ikke så simpel en opgave som at skabe et effektivt online marketingværktøj med et moderne design. En smuk og veloptimeret hjemmeside kræver meget tid, investering og endda inspiration. Hvordan designer man en hjemmeside for at tiltrække flere kunder? Lad os finde ud af det i artiklen.

Ifølge Internet Live Stats er der mere end 1,2 milliarder websteder i verden. Hvert sekund bliver denne værdi højere med omkring 10 enheder. Uanset hvilken branche du arbejder i, skal din hjemmeside være up to date i både teknologi og design. I denne artikel vil vi fokusere på udseende hjemmeside - hvordan den skal se ud i 2017. Skrifttyper, der er for lyse, farverige og prætentiøse, er blevet betragtet som forældede i lang tid. Ikoner erstatter billeder for at gøre det nemmere for brugere at navigere i menupunkter. Disse fakta er dog kendt af de fleste specialister, der er involveret i internetmarkedsføring. Fra denne artikel lærer du, hvordan det skal se ud moderne design websteder.

1. Webdesign er primært fokuseret på mobile enheder.

Den såkaldte mobile-first tilgang til hjemmesideudvikling har eksisteret i mere end 5 år. Selvom dette ikke er en ny trend, er det bestemt værd at bemærke, da det er blevet et must-have for enhver virksomhedsejer, hvis de ønsker at øge salget ved hjælp af denne marketingkanal.

Hvad betyder mobil-først tilgang? Dette er webudvikling, der fokuserer på mobil respons. Brugen af ​​responsivt design giver perfekt mening, især når man tænker på den officielle statistik offentliggjort af StatCounter, et uafhængigt webanalysebureau. Ifølge ham er andelen af ​​internetbrug via mobile enheder 51,3 %. Det er af denne grund, at Google er holdt op med at understøtte sin Instant Search-tjeneste. Denne funktion var tilgængelig for desktopbrugere og tilbød søgeresultater, mens en person lige indtastede deres forespørgsel. Med øget trafik vil virksomhedsejere være i stand til at få mere salg. Derfor giver det perfekt mening at fokusere på et bredere publikum.

2. Skjult navigation

Mange af os har hørt, at for at øge procentdelen af ​​fuldførelsen af ​​en målhandling af brugeren, er det nødvendigt at minimere antallet af nødvendige klik. Jo færre klik, jo højere konvertering. På trods af dette, involverer moderne webdesign ofte tilstedeværelsen af ​​en skjult pop-up-menu, der vises efter at have klikket på den såkaldte "hamburger". Denne løsning er baseret på en adaptiv designtilgang, når det er nødvendigt at placere menuen på en sådan måde, at den ser korrekt ud på mobile enheder.

Traditionel webstedsnavigation, som indeholder elementer placeret øverst på siden, fylder for meget og begrænser muligheden for at henlede brugerens opmærksomhed på meningsfuldt indhold. Oprettelse af skjult navigation har en anden fordel, der giver dig mulighed for at skabe en mere attraktiv og effektiv startside.

3. Rummelig første skærm

Pop-up-menuen skaber ekstra plads på den første skærm hjemmeside. Dette giver dig mulighed for at fremhæve virksomhedens vigtigste fordele ved at bruge en større skrifttype, mere attraktive og læsbare ikoner, f. effektiv attraktion brugerens opmærksomhed. Tiden med "jo mere information, jo bedre" er allerede i fortiden. Det er vigtigt, at brugeren går gennem en jævn vej, hvis destination er den succesfuldt gennemførte målhandling. Mere Fri plads giver designere mulighed for at realisere deres bedste ideer for hjemmesidens hovedside, hvilket vil gøre denne marketingkanal unik og mere attraktiv for brugerne. Bedste muligheder webstedsdesign indeholder en første skærm med et baggrundsbillede i fuld bredde med et par bløde farver. Navigationsområder skal være let genkendelige og læsbare for brugerne.

4. Dedikerede navigationsområder

Den skjulte menu og den rummelige første skærm giver dig mulighed for at designe dit websted på en sådan måde, at det fokuserer brugernes opmærksomhed på nogle få vigtige navigationselementer, som vil hjælpe dem med at træffe beslutninger hurtigere og nemmere. Denne tilgang tilskynder brugerne til at navigere gennem menuen og fuldføre de trin, du har brug for, uden at spilde tid på at søge den ønskede knap. Med en rummelig første skærm kan du fremhæve nøgleelementer ved at bruge større skrifttyper og efterlade mere mellemrum mellem dem og dermed fremhæve det mest nyttige indhold.

5. Website design udvikling i Material Design Lite stil

Materiale Design er blevet en vigtig forlængelse af det såkaldte fladt design, en meget brugt trend i de seneste par år. Android-design blev skabt som en grænseflade til mobile enheder, men nu har det også fuldstændig erobret desktops. Denne visuelle tilgang gør brugervenlighed til en kernekomponent i hele designet. Materiale Design Lite(MDL) er den næste generation af Material Design. Det inkluderer retningslinjer, layoutsæt og en overordnet struktur med værktøjer, der gør det muligt for enhver designer hurtigt og nemt at oprette et MDL-websted ved hjælp af et praktisk udvalg af paletter.

6. Store ikoner

Populariteten af ​​ikoner i webstedsdesign forklares af det faktum, at en person husker 65% af visuel information efter tre dage og kun 10-20% af skriftlig eller talt information. Derfor har den menneskelige hjerne lettere ved at behandle billeder end tekst. Det er værd at bemærke, at ikonet skal svare til den tekst, det vedrører, for ikke at forvirre brugerne. Kedede billeder af mennesker med overdrevne og kunstige ansigtsudtryk er forældede. Ikoner skal også være vektor for at blive vist korrekt på enhver enhed. Du kan se eksempler på hjemmesidedesign i vores og stifte bekendtskab med vores arbejde.

De vigtigste krav til brug af ikoner i webdesign:

• Ikonet skal matche indholdet;
• Den skal indeholde et klart budskab;
• Det skal være vektor;
• Ikonet skal være let at læse, uanset om det er lille eller stort.

Lad os gå videre til seneste trends i valg af skrifttyper og farver til siden.

7. Simple skrifttyper og blød farvepalet

Giftige farver i webdesign faldt i unåde for omkring femten år siden. Nu har designere skiftet til beherskede pastelnuancer, bløde, ikke-prangende farver. 60-30-10-ordningen mister ikke sin relevans: i moderne webdesign Neutrale farver fra hvid til lysegrå er fremherskende, 30 procent af pladsen bruges i en lysere tone, og kun 10% er malet i en rig farve, hvilket skaber en opfordring til handling.

Webudvikling er nu trådt ind i den simple skønheds æra, hvor store og enkle skrifttyper med et par bløde nuancer foretrækkes. Hvordan kan denne tendens forklares? Denne tilgang giver mening, fordi den udelukkende fokuserer brugernes opmærksomhed på det meste vigtige blokke Information.

Vi præsenterede grundlæggende liste nye trends inden for hjemmesidedesign. Faktisk er vi mange flere, hvilket gør materialet for omfattende til én artikel. Vi vil helt sikkert fortsætte med at fortælle dig om de nyeste designløsninger inden for webudvikling på vores blog.

Vores team hjælper dig gerne med at skabe adaptivt design et websted, hvor de vigtigste webdesigntrends og effektive teknologier vil blive introduceret for at opnå maksimal optimering. Skriv til os på, så hjælper vi gerne!

Det er en almindelig overbevisning blandt designere, at trends vil være en vigtig del af deres arbejde. Holde opdateret seneste opdateringer anses for obligatorisk. Mange designere bedømmer andres arbejde gennem trends, og at mærke noget arbejde med #gamle kan ses som en fornærmelse, som om et design ikke inkorporerer de nyeste trends og automatisk bliver mindre værd.

Der er dog grunde til at følge tendenserne. At tjekke websteder som Awwwards, FWA eller CSS Design Awards kan inspirere dig og som et resultat hjælpe dig med at se ud over dine designvaner. Du kan lære om nye visuelle verdener, som du så (bevidst eller ej) kan integrere med grafisk sprog. At se andre arbejde hjælper med at forbedre dine egne færdigheder og holde dig ajour med den nyeste teknologi.

I det sidste år eller to er det blevet bemærket, at mange designere forsøger at bevæge sig væk fra simple kompositioner. Flere og flere åbne, tilsyneladende kaotiske, "brudte" og "cut" designværker dukker op. Glorificeringen af ​​nettet, som det engang var, mister sin betydning, og reglerne bliver bevidst og bevidst ændret. Indholdet begynder at bevæge sig, det ser ud til at bevæge sig, og dets dele overlapper nogle gange og fletter sig ind i hinanden.

Udviklingen af ​​Canvas og WebGL spiller en stor rolle i denne proces. Moderne projekter ofte lidt forvirrende, mindre intuitive end minimalistiske, men de efterlader bestemt et varigt indtryk på brugerne.

Hvad venter os ellers inden for webdesign i 2017? Her er mine forudsigelser.

Åben komposition

Indtil for nylig var designverdenen domineret af "lukkede", symmetriske og statiske kompositioner. Siden 2016 er der dukket mange websteder op, som har bevæget sig væk fra denne stil. Åbne kompositioner med frit arrangerede elementer, der kører et sted uden for skærmen, vinder popularitet - eksempler på sådanne værker kan ses på romainpsd.com, durimel.io eller booneselections.com. Fordelingen af ​​elementer på disse websteder giver indtryk af, at de fortsat lever bag skærmen.

Asymmetri

2016 brød også symmetrireglen, som har været udbredt i branchen i et stykke tid. i lang tid. Mange designere har skabt asymmetriske layouts, der langt fra er perfekt balancerede på venstre og højre side. Som eksempler vil jeg gerne vise dig det fremragende culture.pl-websted, det kaotiske dada-data.net og det tidligere nævnte durimel.io.

Mangfoldighed

Designere har skabt mere dynamiske kompositioner, der har mere krydsende diagonale linjer (poigneedemainvirile.com, vanderlanth.io) eller mere komplekse former (residente.com/en, helloheco.com, predictiveworld.watchdogs.com).

Illusionen om kaos

I 2016 begyndte mange designere bevidst og bevidst at bevæge sig væk fra minimalistisk design. Der var et ønske om mere frihed og en mindre stiv designtilgang. Bag dette ligger selvfølgelig behovet for forandring, men også den sædvanlige følelse af kedsomhed. På et tidspunkt bliver alle kede af at skabe enkle layouts med enkle elementer.

Men når man analyserer projekterne i 2016, bliver det bemærket, at kaos kun ser ud til at være kaos. Layouterne er stadig baseret på den klassiske kontrast af former, farver, teksturer, størrelser mv. Det, der har ændret sig, er arrangementet af de forskellige elementer og harmonien i afhængigheden mellem dem. Nu til dags bliver overskrifter, ikoner eller tekstblokke oftere flyttet på trods af den banale logik. På trods af at de er en del af den samme tematiske blok, er de adskilt og placeret i en anstændig afstand fra hinanden. De er ikke justeret til den samme kant og har forskellig bagside.

Nogle geometriske figurer "suspenderet i luften" har kun et dekorativt formål (melanie-f). Dette er også typisk for overlappende elementer. Tekster overlappes delvist af fotografier, som på e03.epicurrence.com og melville-design.com, eller billeder er overlejret på hinanden, som det kan ses på olivierbernstein.com.

Det er også en karakteristisk teknik til at bryde den sædvanlige minimalistiske harmoni. Kæmpe titler står i skarp kontrast til sarte og subtile strukturer og farver.

Rige baggrunde og mønstre

Oftere og oftere dukker der baggrunde og mønstre op, hvorpå der er små streger, striber eller prikker.

Et særligt almindeligt mønster er gittermønsteret, som giver en "ramme" til andre layoutelementer. Disse elementer bevæger sig i parallakse langs gitteret og er ofte placeret kaotisk.

Gittermønster

Et af de første steder, hvor et sådant gitter dukkede op, var werkstatt.fr, som dog ikke brugte karakteristiske animationer.

En lidt anderledes måde at bruge gittermønsteret på er vist på klimov.agency, brand.uber.com og maisonullens.com. I disse tilfælde har gitteret en meget specifik funktion - at gøre elementernes bevægelser logiske. Dette giver dig mulighed for at rationalisere ikke-standardiserede løsninger og giver svar på spørgsmål som "hvorfor passer illustrationens marginer ikke til knappens marginer"? Dette skaber en rytme, og retfærdiggør samtidig dens krænkelser.

Dekorative detaljer

Hvad har virkelig ændret sig På det sidste, så dette er en tilgang til detaljer. Der sker et gradvist skift væk fra minimalisme. Der er mange andre elementer, der kun har dekorative funktioner. "Flyvende" geometriske former og tilsvarende fragmenter. Lineære, spinkle ikoner løsner sig lidt fra det indhold, de illustrerer. Understregninger og linjer forskydes. Kornethed og glitches vises, som på bigyouth.fr eller kikk.be.

Knapper oprettes sjældnere som klare rektangler med tekst indeni. De fremstår ofte som bløde, forskudte linjer, som dem på dahllaw.dk eller yasuhiroyokota.com. En anden knapmulighed er et spektakulært svæv på Canvas, som på hpsoundincolor.com og cavalierchallenge.com.

Gennemtænkte koncepter - jævne animationer mellem sektioner

Der er intet nyt om animationer på websteder. Desuden kan det ikke siges, at de modsiger den minimalistiske tilgang. Men ligesom Canvas er de en vigtig del af de større muligheder inden for webdesign. Og nye muligheder er altid fristende, fordi de giver dig mulighed for at gøre noget anderledes, frisk og originalt.

Overfloden af ​​animationer eliminerer den skarpe opdeling af siden i sektioner. Siden ændres jævnt, mens du ruller. Indhold fader ind og ud ved hjælp af bløde animationer. Sekvenserne af disse overgange bliver mere og mere komplicerede. Disse er ikke kun tilfældige effekter mellem indholdsblokke, men et gennemtænkt koncept, hvor hvert element optræder i rigtig tid(Nationalgeographic.com, stylenovels.com). Animationer er en del af hjemmesiden fra starten, ikke blot tilføjet en tilfældig detalje.

Interessante animationer dekorerer enkle layouts. De tilføjer ny værdi og gør siden unik. De bliver essensen af ​​hele projektet, som på Ifly50 eller tennentbrown.co.nz. Animationer skaber ofte en smuk, slank struktur på websteder: Cuberto.com, lookbook.wedze.com, skarv-fashion.com eller corentinfardeau.fr.

Varieret typografi

Skiftende tendenser kan også ses i de anvendte skrifttyper. Indtil for nylig var hele internettet domineret af simple, neo-groteske skrifttyper som Helvetica, Roboto, Lato eller Open Sans. Den lidt mere "dekorative" neo-groteske bruges oftere i titler, og dens mere enkel version er valgt for resten af ​​teksten. Serif-skrifttyper bruges praktisk talt aldrig.

I løbet af de sidste 2 år er situationen begyndt at ændre sig. Designere bruger dristigt forskellige typer skrifttyper. Nu er de mere villige til at arbejde med kontraster - ved at kombinere serif- og sans serif-skrifttyper.

Der sker meget i den typografi, der bruges på hjemmesider. Tekster er animerede, opdelt i individuelle bogstaver, og forskellige effekter, billeder og videoer er placeret i teksterne.

Større teknologiske muligheder og dristigere beslutninger driver væksten af ​​mangfoldighed inden for webtypografi.

Geometriske skrifttyper

Geometriske sans-serif-skrifttyper er blevet meget populære, såsom den klassiske Futura, ITC Avant Garde, Proxima Nova eller dem, der er tilgængelige i Google-biblioteket - Poppins eller Montserrat. Disse skrifttyper er meget mere udtryksfulde end den "usynlige" neo-sans serif. En mere "aggressiv" og udtryksfuld karakter af en hjemmeside kan opnås ved at bruge større tykkelse, som på den ret gamle side hugeinc.com, men her er nyere eksempler: sequence.co.uk, startuplab.no eller www.protest.eu .

Serif skrifttyper

Meget ofte bruges serif-skrifttyper ikke kun til brødtekst, men også til store overskrifter. Dekorative er især ofte brugt, såsom dem på duhaihang.com eller jennyjohannesson.com. Mere populære skrifttyper kan kaldes dem, der tilhører Bodoni eller Didot.

Monospace skrifttyper ("skrivemaskine")

Brug proportionale skrifttyper, som normalt forbindes med skrivemaskiner- innovation. Nu kan de ses på sider som admirhadzic.com, cuberto.com eller designembraced.com.

Kontrasterende skrifttypekombination

I 2016 var det almindeligt at gå væk fra bløde, harmoniske kombinationer af skrifttyper for mere udtalt kontrast. Ekspressive kombinationer blev forstærket af den høje kontrast i tekststørrelser. Store og dekorative skrifttyper blev parret med simple geometriske, ligesom geometriske overskrifter blev parret med serif-skrifttyper i indholdstekst.

Kæmpe typografi som en del af hovedbilledet

En meget cool og almindelig ting var brugen af ​​meget store tekststørrelser på hovedbillederne. Dette skabte en meget stærk kontrast mellem overskrifterne og resten af ​​indholdet. Eksempler kan ses på oursroux.com, femmefatale.paris eller monsieurcaillou.com.

Nogle gange, som en dekoration, bruges bogstaver i begyndelsen, såsom coretinfardeau.fr eller nurturedigital.com.

Et slående eksempel Ovennævnte side er jennyjohannesson.com, som bruger de dekorative kvaliteter fra serif-skrifttypen Goku.

Yderligere effekter gældende for typografi

Man kan observere stærk integration mellem typografi og billeder, videoer og animationer. Individuelle sektioner hænger sammen - typografien interagerer med både baggrunden og andre elementer. Tilfældig placering af typografi på et mørkt billede hører fortiden til. I dag bygger designere interessante relationer mellem alle elementerne, væver typografi ind i baggrunden, animerer den osv.

Store bogstavstørrelser i tekster

Da jeg først startede min webdesignrejse, havde jeg en gammel vane med at bruge skriftstørrelse 10, som jeg tog op, da jeg arbejdede med tryk. Jeg indså dog hurtigt, at på nettet er den optimale læsbare størrelse 14.

I dag er det bemærkelsesværdigt, at designere bruger meget større skrifttyper, især når det kommer til serif-skrifttyper.

Kom til den mørke side

I 2016 brugte designere forskellige farver. Men du kan mærke en tendens til at vælge mørke toner.

Tendensen med at skabe helt hvide hjemmesider bliver mindre populær og viger for grå variationer, teksturer og mønstre. Det er efterhånden ret almindeligt at lave mørkere sider, hvor sort eller en graduering af det fylder baggrunden og skaber en lidt mørk, grotesk stemning.

På trods af dette er det svært at forudsige, hvordan denne tendens vil vokse i løbet af året. Farver er dog en del af mærkers visuelle identitet, så det er svært at forvente, at de fundamentalt ændrer deres kommunikation baseret udelukkende på populariteten af ​​visse trends.

Sammenfatte

2017 byder på mange spændende udsigter, men der er også nogle farer i horisonten.

Personligt er jeg bange for, at mange webdesignere kan være lidt oversikre, når det kommer til at arbejde med Canvas. Tilføj nye trends, og du får en masse prangende og obskure hjemmesider til et bredt publikum.

Jeg er også lidt bekymret over det faktum, at mange af nutidens kreationer ikke vil fungere korrekt på alle browsere og mobile enheder. Jeg fik indtryk af, at vi var tilbage ved udgangspunktet. Vi er nu i en situation, der ligner de tidspunkter, hvor Flash, på trods af at det herskede over internettet, fik skylden for dets manglende lydhørhed og høje krav til internetforbindelse.

En anden ting, der skræmmer mig, er, at nye trends i retning af "nedbygning" vil være umulige at anvende på kommercielle kunder, eller simpelthen ikke passer til deres kommunikationsprofil. (Regerings- eller bankwebsteder kan ikke være rodet).

Jeg spekulerer på, hvor lang tid det vil tage, før nye trends slår igennem på det kommercielle marked. Det er værd at bemærke, at langt størstedelen af ​​de hjemmesider, jeg brugte som eksempler, er lavet til bureauer, designere og den kreative industri. Disse websteder sætter ofte deres egne regler og er normalt foran kurven sammenlignet med andre industrier. Nogle gange tager det lang tid, før trends bliver populære i en niche og bryder ind på det kommercielle marked. Så bliver deres form glattet lidt ud, så det passer til alle.

På trods af alt dette synes jeg, at 2017 ser meget lovende ud, når det kommer til webdesign. At sige, at minimalismens æra er ved at være slut, ville være for meget, men det er bestemt under forandring og udvikling.

Minimalisme vil blive mere kompleks og detaljeret. Hjemmesider i år vil i stigende grad bruge Canvas. Vi vil se meget kaos, variation af former og udtryk i fremtidige projekter. Dette er gode nyheder for designere, der er trætte af minimalistiske Flat, Material eller Metro designstile.

Hvert år lærer vi noget nyt om design, og 2016 er ingen undtagelse. Artiklen, vi skrev sidste år, var så stor en succes, at vi besluttede at lave nogle forudsigelser for 2017, så lad os komme i gang!

Kom ud ny artikel → ← Læs og bliv inspireret!

Designtrends er påvirket af medier, teknologi, modeindustrien og, på det seneste, brugervenlighed. Tendensen viser sig langsomt, gradvist, trænger igennem alle designområder og forsvinder derefter på nøjagtig samme måde. De fleste designtrends varer ikke mere end et eller to år. Design i 2017 vil fortsætte de trends, der startede i 2016 med nogle nye ændringer tilføjet, denne følelse er velkendt og velkendt, og du har måske bemærket det i de sidste par år. Den største indflydelse er fortsat Googles materialedesign med mindre ændringer.

Hvilke trends inden for webdesign venter os i 2017

01. Semi Flat Design

De sidste par år har fladt design været det mest populære på webdesignmarkedet, men nu bliver det under påvirkning af Material Design mere og mere endimensionelt. Denne overgang starter med nogle lyse skygger, hvilket gør det til et semi-fladt design. Udviklingen af ​​fladt design fra den minimalistiske stil bevæger sig ind i nye teknologier under udvikling. Det flade design er der stadig, men det har gennemgået nogle forbedringer.

Glat skygge tilføjer dybde og kompleksitet uden at ødelægge følelsen af ​​det flade design. Det her ny funktion tilføjet til den flade trend og vil fortsætte med at udvikle sig i 2017.

Projekt: Ressource | UI/UX-værktøj til webtjenester
Forfattere: Ruslan Latypov; LS grafik; Anton Mishin; Valery Gurkov

Projekt: Lytterens afspilningsliste

02. Bevægende fotografier (Cinemagraphs)

Cinemagraphs er ikke dem GIF-animationer, som vi ser overalt på internettet. Cinemagraphs er stillbilleder med mindre elementer af bevægelse. Denne teknik gør et simpelt foto mere realistisk.

03. Mere 3D

3D bevæger sig bestemt i vores retning, og vi vil se denne indflydelse på alle områder af design. Med VR/AR-teknologier, der hurtigt tager fart, udvikler dette felt sig ret hurtigt.

Projekt: LUV.IT

Projekt: Åbne årlige priser

Projekt: Air Max '17

Projekt: NIKE F.C. | 3D gyldne bolde i den virkelige verden

Projekt: Bedre du mærke

04. Animationer

Animation er mere og mere til stede i webdesign, formatet kan være et hvilket som helst - WebGL CSS, GIF'er, SVG eller video. Animation har været en af ​​de vigtigste webdesigntrends i det seneste år, vær ikke bleg for at bruge det.

Projekt: Nickelodeon Kids vælger præsidenten

Projekt: AR Virtual Fitness Coach App

Projekt: ZH OURO- Rio 2016

05. One-side sites/landing pages

I 2017 vil vi se væksten af ​​one-side sites på grund af deres potentiale til markedsføringsformål og deres evne til bedre at målrette besøgende.

Har du brug for en landingsside, kan du bestille den hos mig →

06. Geometriske former, mønstre, linjer og cirkler

Denne trend startede i 2016 og vil helt sikkert fortsætte i 2017. Du kan personliggøre dit websted ved blot at tilføje nogle moderne former, enten flade eller med en blød skygge.

Projekt:

Projekt: DRAP.agency Branding

Projekt: Pfizer - Aktiv og 50+ til Den nye York Times

07. Modige farver

Brug lyse farver til at skille sig ud. Materiale og fladt design passer godt til lyse farver. du kan bruge farvepalet, præsenteret af Google, for at vælge og kombinere de farver, du ønsker.

Projekt: Edris — Logo Designet af MiLo

Projekt: Gengivet - Responsivt demowebsted for Adobe

Projekt: b2mach

08. Innovativ scrolling og parallakse

Dette er en fantastisk visuel idé, der vil tilføje unikhed til enhver hjemmeside. Fra flerlagsparallakse til videoparallakse er alt muligt med D.ex Multilayer Parallax-plugin. Dette produkt er udviklet udelukkende af Milothemes-studiet under ledelse af Loredana Papp og Mihai Baldean. Den kan købes på Envato Market / codecanyon.net

Det her WordPress plugin, som giver dig mulighed for at lave smukke Parallax-blokke med mere end et lag. Vær kreativ og kombiner lag i enhver stil, du ønsker. Vi lavede 12 forskellige eksempler i plugin-guiden for at gøre dit første bekendtskab med parallaksens vidunderlige verden lettere. Leg med lag!

09. Farveovergange

Gradienter er en af ​​de største trends lige nu. Trenden begyndte at vinde popularitet i 2016 og fortsætter med at vokse hurtigt efter store mærker Instagram besluttede for eksempel at ændre deres logo og billeder fra én farve til en flerfarvet overgang (gradient). Fra logoer til knapper eller billedoverlejringer er denne trend overalt.

10. Mobil browsing (responsivt design)

2015 og 2016 oplevede en markant stigning i visninger fra mobile enheder. Tablets og smartphones er nu det foretrukne valg til at surfe på nettet og overgår stationære og bærbare computere – og tendensen fortsætter. Enhver hjemmeside, der ikke har responsivt webdesign skal opdatere ASAP!

Projekt: Responsiv webstedsanimation

11. Brugerdefineret grafik og illustrationer

Stockfotografering er stadig ret populært, men en ny trend er dukket op i 2016 og vil fortsætte med at vokse i 2017: brugen af ​​tilpasset grafik og illustrationer. Hvis du vil have en unik, smuk hjemmeside, som enhver besøgende vil huske dig, så samarbejd med digitale designere. Det betyder færre lagerbilleder og flere originale, unikke billeder.

12. Kreativ brug af neutralt rum og gitter

I de senere år har webdesign været mere tilbøjelige til velordnede, organiserede søjler og gitter, men i 2016 kunne vi se et markant skift mod uregelmæssige lag og ultramoderne design.

13. Fortæl historier (Storytelling)

Hjemmesider begynder nu at fortælle historier for at vinde over kunden. Folk har en tendens til at huske historier mere end at læse simpel (tørre) information.

Mere video om storytelling fra Business of Youth:

14. Gradvis indlæsning af indhold (Lazy Loading)

Lazy Loading forsinker indlæsningen af ​​billeder på lange websider, dette tillader information at vises på et bestemt tidspunkt, mens du ruller ned, hvilket reducerer sideindlæsningstiden.

15. Opdel indhold

Opdelt indhold er nu populært i responsivt webdesign; det opdeler skærmen i 2 eller flere dele. En sådan opdelt skærm vil vise seeren flere lige vigtige beskeder i én sideblok. Denne trend dukkede op i 2015, men i 2017 vil den fortsætte med at vokse, og højst sandsynligt vil du se den på mange websteder.

16. Formularer i fuld skærm

Der er ingen grund til at navigere til en anden side for at udfylde en formular, fordi nye websteder bruger formularer i fuld bredde, der tilpasser sig responsivt design.

17. Videoer overalt

Videoindhold er steget i løbet af det seneste år, og folk er blevet mere krævende høj kvalitet video. En video på et websted kan være kort og automatisk gentages, vise et produkt eller et storstilet filmprojekt, der vil holde seeren involveret i historien.

Projekt: Hillsong

18. SEO er vigtigt! (SEO er vigtigt)

SEO er meget vigtigt for en hjemmeside, så en smuk hjemmeside uden god SEO vil forblive en outsider.

19. Skjult navigation

Hamburgermenuer skaber en del debat for og imod, hvor svært det er for brugerne at finde menuen, men én ting er sikkert – denne trend er kommet for at blive, og folk vil med tiden vænne sig til sådanne menuer.

20. Små designdetaljer

Fokus på detaljer er meget vigtigt i år. Små detaljer såsom navigationspunkter mv. Fokus på små detaljer vil gøre arbejdet færdigt.

Projekt: Barometa - Næste generations jobplatform

21. Logo Design Trends

21.1. Minimalisme

Alle de store brands bevæger sig mod mere simple, minimale designs, og denne trend er kommet for at blive.

21.2. Håndtegnet

Denne trend har været i søgelyset i de sidste par år, og denne stil er fantastisk til hipster-virksomheder. Det bruges til frisørsaloner (barberer), caféer, restauranter, kunst og kunsthåndværk.

21.3. Negativ plads

Dette er en gammel trend, men vi har set den tage fart i løbet af de sidste par år og vil fortsætte med at vokse i 2017, så det er bestemt værd at kigge nærmere på.

21.4. Beskæring

Det bliver ikke mere minimalistisk end denne trend. Den viser kun, hvad der er nok at angive i logoet for at genkende virksomheden, og intet mere.

21.5. Geometri

Denne trend er old school, men det er en af ​​de stilarter, der aldrig vil dø.

21.6. Stregkunst

Denne trend er populær blandt nye generationers virksomheder

Forfattere: Sam Healy; Andrea Schlaffer; Jacek Janiczak

21.7. Mønstre

Mønstre er den nye trend, og det er denne gentagelse på en usædvanlig måde at gøre din virksomhed mindeværdig og differentiere den fra sine konkurrenter. Denne originale retning kan også bruges til præsentation af logoer.

Forfattere: Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner

21.8. Animerede logoer

Motion design er en populær trend i dag, og vi kan se det inden for alle designområder.

Forfattere: Javier Miranda Nieto; The Work Co

21.9. Årgang

Vintage stil er stadig i spillet. Selvom denne trend har været populær i lang tid, har den stadig noget at sige.

Forfattere: Roman Dodonov; Mingo ideer op; Vil prøve videre

21.10. Farveovergange

Gradienter er overalt i år - og logoer er ingen undtagelse.

21.11. Illustrationer i logoer

Illustrationer er en god måde at skabe et unikt og personligt logo til din virksomhed. De bliver mere og mere populære i år.

Forfattere: Bodea Daniel; Jacek Janiczak

21.12. Fotografering i logoer

Kombinationen af ​​billeder og typografi er meget populær nu. De fungerer rigtig godt sammen, og det skaber en kontrast mellem dem.

22. Typografiske tendenser

22.1. Stor, fed og smuk typografi

Typografi kan være det vigtigste element i at skabe et fantastisk design. I år bliver typografien fed (fed) og stor med fremtrædende overskrifter.

Forfattere: Alexander Laguta

Forfattere: Quim Marin

Projekt: Baugasm-serien - Pakke 4

22.2. Gradienter/farveovergange i typografi

Gradienter er uden tvivl en trend i dag, og du finder dem også i typografi.

22.3. Visuelt hierarki

Hierarki i typografi er vigtigt i enhver designretning. Skriftstørrelse og -bredde kan nemt angive, hvilke ord eller overskrifter der er prioriteret, så brug denne faktor, når du laver dine tekster. Du skal også huske, at du kan opnå en forståelig visuelt hierarki ved hjælp af tekstplacering og farve.

22.4. Lille typografi

Meget lille tekst er normalt omgivet af et modsat farverum, men du kan skabe en visuel forskel mellem farven eller billedet for at få teksten til at skille sig ud. Du kan også bruge animation til at få din tekst til at skille sig ud.

Forfattere: Slava Oleinik; Bahaa Samir; Smart Digital

Projekt: Baugasm-serien - Pakke 4

22.5. Animeret typografi

Animation bruges overalt nu, og typografi er ingen undtagelse. Hvis du bruger motion software, kan du ikke gå galt i år.

Projekt: Gotham Pro Animeret skrifttype Gratis

22.6. Typografi møder fotografi

Kombinationen mellem tekst og fotografi kan give fremragende resultater. Tjek disse gode eksempler.

22.7. Geometriske former og typografi

Geometriske former kan fungere godt sammen med typografi for at skabe et smukt design.

22.8. Skrifttypeparring

Brug to eller flere skrifttyper sammen. Dette er stadig trendy i 2017.

———————————

Dedikeret til webdesign og digitale trends i 2018. Olga er medlem af Awwwards jury og anmelder hver dag hundredvis af nye sider udviklet af bureauer og designere fra hele verden. Dette giver hende mulighed for at følge med i den seneste udvikling og trends inden for webudvikling og design.

Artiklen beskriver hovedbudskaberne i foredraget, og fulde version du kan finde den på linket.

Interaktiv rulle

Vores markør er angivet med en pil. Det bliver enten til en finger til at klikke, og der kan forekomme svævere. Nu kan markøren være et element. Overgangen til siden er fremhævet under den. Elementer nedenunder kan ændres eller interagere med markøren.

Volcans hjemmeside er et yndet eksempel. Diamantmarkøren bliver en antydning af, hvad der venter dig, når du klikker. Der er et interaktivt element. Som et resultat er svævebevægelsen ikke nødvendig; markøren udfører sin rolle.

Et eksempel på en interaktiv rulle på vulkanens hjemmeside

Et nyt tema for kampe mellem UI/UX-designere - hvor praktisk er det? Men hvis du tænker det hele klogt igennem, kan det gå godt.

SVG masker

Med deres hjælp kan du lave rumovergange. De er ikke svære at udvikle, men de giver designerne frie hænder. Rich Browns hjemmeside bruger et kryds som en overgang. Men det kan være enhver form.

Hvis du bruger Photoshop, kan du gøre dette ved blot at skære et hul ud i laget med en maske. Eller ved at overlappe 6 firkanter. For vores klient lavede vi en overgang fra skærm til skærm ved hjælp af denne ting. Åbning af et billede fra en formular er også en SVG-maske. Men hvis man ser på layoutet, ligner det et statisk billede.

Lærred

Dette er allerede svært. Du har helt sikkert brug for nogen med en forståelse af de matematiske aspekter af processen. Nogle ting kan lånes på bibliotekerne. Men SVG har ikke synkronisering med markøren. Og her er det.

Climachill-hjemmesiden fra Adidas, for eksempel.

Morphing med et bogstav er Canvas. Overløbet af gradienter er Canvas. Og dette har været populært i flere år, men vil ikke blive forældet snart. For den vejer lidt, og det er 2D-grafik, som er svær at replikere. Velegnet til dem, der vil have meget "wow" på deres hjemmeside.

3D+WEBGL

Retningen vil udvikle sig. Når du laver selv en lille, men højkvalitets video i 1 minut, betyder det minimum 10 personer i teamet. Når i 3D - det er 1 designer. Og webgl er +1 udvikler. 3D kan være klassisk, som på Globekit-hjemmesiden. Ser fantastisk ud, unikt. Selvom det består af 6 dias i alt.

Men igen: du skal være forsigtig med påføringen. En sådan effekt er ganske nok til at gøre webstedet lyst, men ikke prangende.

VR

I marts 2017 dukkede den første hjemmeside i VR op. Dem er der flere af. For nylig lavede vi den første VR-bane på et fodboldstadion. En mand tager en maske på, og det ser ud til, at han er på en racerbane.

Enhed til virtuel racing fra Audi.

Vi diskuterede for nylig, om VR ville fange. Ja, den har en fremtid, fordi den er blevet nemmere at lave. Vi laver en portfolio i VR, så du kan bladre i den ved at dreje hovedet, og når du retter blikket, så gå på arbejde.

AR

Det er dejligt, at du nu kan undvære en app. Du går til et link i din browser, og du skal have en markør, der kan læse nogle ting. Du viser denne markør, og den afslutter med at tegne, hvad du ønsker. Det vil sige, at du først laver et design i 3D, viser det til ham, og han fuldender den augmented reality. Du kan tilpasse det til dig selv.

PWA er en browserfunktionalitet, der ligner en applikation. Det tilføjes som et ikon og ligner et program. Faktisk åbner den i browseren og giver dig mulighed for at sende meddelelser til brugeren, optage det via en formular og modtage indhold offline.

En ramme

Dette er et færdiglavet bibliotek, hvor du kan finde alle tingene til AR og VR. Du kan se, hvordan de fungerer, se dem i aktion.

Derfor råder jeg alle webdesignere til at gennemføre deres studier i 3D. Dette vil gøre dit websted meget mere levende.

Google

Hold øje med dem. De står ikke stille. Der er sådan noget som Google-eksperimenter. Frigør dig selv et par timer til at udforske alt det smukke. Google udfører mange eksperimenter, hvor det involverer udviklere og bureauer. Den sidste er brugen af ​​big data.

Og for nylig begyndte Awwwards at samarbejde med Google. Det betyder, at der nu bliver lagt vægt på mobilsites. Teknologien vil begynde at blive optimeret for at gøre den lettere. Google bliver mere og mere interesseret i mobilnettet.

WebVj

Et meget nyt trick. Siden er bygget på data. Der er en japaner, Masatatsu Nakamura, som er særligt seriøs omkring dette. Dens grafik er udelukkende lavet af en programmør, ikke af designere. Det gør meget for Google Experiments.

Eksempel på Masatatsu Nakamura-grafik lavet ved hjælp af WebVJ

Trendosiki

Det mest stillede spørgsmål er "Hvilken farve/skrifttype/mønster vil være trendy næste år?" Jeg kalder dette "tendenser".

Det er nu umuligt at identificere et trendsæt af skrifttyper eller farveskema. På en måde pastelfarver begynder at tage en tendens op. Men så ser du på disse lyse, eksplosive steder, og du indser, at nej.

Jeg vil råde dig til at afspille præsentationen af ​​komponenten ved hjælp af mønstre under alle omstændigheder. Dette vil få indholdet til at se dyrere og interessant ud. Et almindeligt gennemsigtigt og let mønster vil allerede give status til dit websted. Skrå linjer, ødelagte elementer - dette er ikke så svært og kræver ikke involvering af en udvikler.

Lad os finde ud af, hvad det vil sige at være populær, moderigtig og moderne inden for webdesign i 2017. For at gøre dette, lad os se på de vigtigste tendenser inden for webdesign. De fleste af dem vandrer fra år til år og er allerede blevet en integreret del af moderne hjemmesideopbygning. Dette skyldes især udviklingen af ​​mobile teknologier, kommunikationskanaler og forbedring af enheder. For eksempel er en trend som hjemmesidemobilitet blevet obligatorisk. Kommercialiseringen af ​​internettet dikterer også dets strenge betingelser til designere og webudviklere. Samtidig svækkes nogle tendenser og bliver mindre populære, men forbliver stadig ret aktive. Moderigtige hobbyer, der er karakteristiske for en kort periode, dukker også op. For eksempel var det sidste år ikoner med en lang skygge af de afbildede genstande. I år er geometriske mønstre blevet populære, vi vil også se på dem. Så lad os tage det i rækkefølge.

1. Mobilt, responsivt design
I dag, måske den vigtigste og mest obligatoriske trend. Siden skal se lige godt ud på alle opløsninger af skærme, bærbare computere, skærme mobile smartphones og tabletter. Søgemaskiner overvåger i øvrigt meget nøje, hvor godt siden er tilpasset forskellige enheder, og ud fra dette bestemmer de deres plads i søgeresultaterne.

2. Aktiv typografi
Det har været en af ​​de mest populære trends i flere år nu. Store skrifttyper og typografi på webstedet har to komponenter. For det første æstetik - smukke linjer, kurver og bogstaver i sig selv er dekoration og dekorativt element. Og for det andet er dette funktionalitet - at bruge stor skrifttype du kan entydigt og eftertrykkeligt formidle hovedideen til den besøgende.

3. Widescreen video
Fuldskærmsvideoen på baggrunden af ​​webstedet fanger utvivlsomt straks vores opmærksomhed. Det her god velkomst at interessere den besøgende. Moderne udviklinger inden for teknologi gør det nemt at indlejre videoer på et websted, hvilket betyder, at designere i stigende grad vil bruge denne teknik. Der er dog en advarsel: At se videoen er kun interessant første gang; anden og tredje gang bliver det kedeligt. Derfor er denne teknik kun effektiv for nye besøgende.

5. Biografer
Et godt alternativ til widescreen video og flotte billeder på baggrunden. Cinemagraphs er fotografier, hvor der opstår små, gentagne bevægelser. De præsenteres normalt i gif-format og giver seeren en illusion af at se en video. Mere om biografer med stort beløb eksempler kan findes i udvalget

6. Fladt design
Endnu en stærk trend i de seneste år. Hjemmesider designet i flade farver har tendens til at være pæne og klare. Men for nylig er der dukket en ny type fladt design op - Semi fladt. Dette er, når hele designet er lavet i flad farve, og kun ét element har skygge, gradient eller tekstur. Som regel er dette element en knap, som får volumen eller fremtrædende plads for at tiltrække besøgendes opmærksomhed.

7. Mikrointeraktion på webstedet
I dag er der meget opmærksomhed i webdesign til mikro-interaktionen af ​​webstedets funktionalitet og design med den besøgende. Essensen heraf er, at den besøgende tydeligt kan se resultatet af sine handlinger på webstedet, det være sig at justere brugerindstillinger, følge et link, bekræfte en handling, interagere med aktive ikoner, knapper, kontakter, tællere og andre elementer.

8. Animation af objekter
Mulighederne i moderne html5 og css3 giver dig mulighed for at bruge et stort arsenal visuelle effekter Online. Dette gør interaktion med siden mere interessant og spændende for den besøgende. Så i det nye år vil vi også se de mest uventede interaktive mikrobevægelser af objekter, som normalt reagerer på musebevægelser. Måske vil vi se eksempler på mere kompleks animation.

9. Levende farvesammensætninger
Populære moderigtige farver i 2017 favoriserer lysstyrke og mætning. Interessante originale nuancer af skarlagen, sennep, gul, smaragd, dybblå samt rød, lilla og chokolade vil hjælpe dit websted med at skille sig ud og erhverve sin egen unikke stil.

10. Webstedsrulning
Da sidens rulning er ideel til mobile enheder, vil dets tilstedeværelse være betydelig i 2017. Det eneste er, at scrollning ikke efterlader plads til brugerinteraktion, og derfor er der en vis træthed ved uendeligt at indlæse indhold. Måske vil tendensen vende mod en kombination af simple kontrolelementer med scrolling.

11. Parallakseeffekt
Parallaxe er en ændring i den tilsyneladende position af et objekt i forhold til en fjern baggrund. I webdesign bruges denne effekt, når du scroller et websted, når objekter og baggrund ruller med ved forskellige hastigheder, hvilket resulterer i illusionen om tredimensionalitet. Tendensen er ret stabil, så vi vil se sider med parallakse mere end én gang.

12. Modulært design
Modulært design, eller en kortgrænseflade bestående af selvstændige betydningsblokke, har været populært i nogen tid. Denne tendens er meget god til mobile enheder, da blokkene passer godt til enhver skærmopløsning. Men på store sites ser de ganske ens ud og er svære at hierarki og strukturere.

13. One-pagers
Ensides hjemmesider, landingssider og landingssider er blevet en integreret del af det moderne internet. Du kan læse mere om hvad en landing page er i artiklen og. I 2017 vil landingssider lægge øget vægt på en knap, der kalder til handling – bestil, ring, tilmeld mv. Alt andet, der distraherer en potentiel besøgendes opmærksomhed, vil blive afskåret.

14. Grafisk annoncering
Jeg vil også gerne bemærke en ting, som jeg husker fra det forløbne år, og højst sandsynligt vil tendensen fortsætte i 2017. På grund af kommercialiseringen af ​​Runet og væksten i online-handel, efterspørgslen efter grafisk reklamemateriale til reklame og promovering er steget markant - bannere, teasers, kort, flyers.

15. Automatisering af typiske processer
Alle standardløsninger og procedurer på hjemmesiden bliver gradvist erstattet af automatiserede processer, hvilket eliminerer behovet for at kommunikere med supportservice eller online konsulenter. I denne henseende vokser populariteten af ​​forskellige applikationer og udvidelser. Nu kan du købe et produkt eller en service, afgive en ordre, aftale tid, reservere pladser, overføre penge, udfylde en formular eller tage en test – alt dette kan gøres online med få museklik.

16. Infografik
Grafisk repræsentation i form af infografik er stadig populær og efterspurgt. At ledsage teksten med et smukt billede eller ikon, kombineret med stilfulde designelementer, gør infografikken æstetisk attraktiv. Sammenlignende infografik er især visuelt tydelig og interessant - såsom hvad der skete, hvad der skete, ja, nej, fordele og ulemper, hvad der skete og hvad der skete, osv. Du kan også bruge infografik til at fortælle en trin-for-trin historie eller levende præsentere kedelig statistik.

17. Hamburgermenu
Hamburgermenu er et visuelt ikon med tre vandrette striber, normalt øverst i hjørnet af webstedet, når der klikkes på det åbnes eller glider ud fra siden fuld menu. Mange eksperter forudser, at denne tendens vil falme, på grund af det faktum, at de fleste uerfarne brugere simpelthen ikke forstår formålet med dette ikon. Derfor har webdesignere en tendens til at foretrække forenklet navigation. Men ikke desto mindre vil vi se hamburgermenuen mere end én gang på nyoprettede sider.

18. Ikoner
Ikoner, som en måde at præsentere information og et visualiseringsværktøj på, har været og er fortsat en af ​​de mest populære og foretrukne trends blandt designere. Det er nok at placere de tilsvarende tematiske ikoner nær blokkene med tekst - og nu får hele teksten logisk og visuel orden og struktur. Så i det kommende år fortsætter vi med aktivt at bruge ikoner.

19. Brevstabling
Bogstavstabling er tekst i en firkant. Faktisk er dette et eksempel på en kompleks kreativ løsning - du skal præsentere en lang tekst i et lille rum. Samtidig skal det se smukt og originalt ud. I år er det også på mode.

20. Tom knap
For at spare plads og plads på mobile enheder dukkede der for nogen tid siden en tom knap op - en stor inskription med en firkantet kontur rundt om ordet. Sådan en knap giver et overblik over baggrunden bag knappen og bevarer samtidig sin funktionalitet som en fuldgyldig knap. Plus, som et designelement ser en sådan knap stilfuld og pæn ud.

21. Undgå lagerfotos
Nogle eksperter har bemærket, at designere begynder at opgive stockfotos. Fordi moderne enheder giver dig mulighed for hurtigt og effektivt selv at tage et billede, så kan du undgå lagerupersonlighed og ensartethed og lave dit eget unikt foto og skab dit eget unikke design.

22. Usædvanlige vinkler på billedet
At finde interessante vinkler på billeder er blevet tilgængeligt for enhver ejer af en smartphone med et kamera. I denne henseende er kreativitet, når du laver fotos, ude af diagrammet, og vi kan dekorere webstedet med et unikt billede med en usædvanlig betragtningsvinkel eller perspektiv.

23. Karrusel
Karruselskyderen, som kom ind i designlivet for flere år siden, er stadig populær og relevant, når man designer hjemmesider. Ved hjælp af en bred skyder er det praktisk at rotere de vigtigste nyheder såvel som til stede aktuelle kampagner, samlinger og anden relevant information, som den besøgende ser umiddelbart efter at komme ind på siden.

24. Selvafspillende lyd og video
Men denne trend er hej fra 2000'erne. Jeg husker dengang, at det var moderne at spille en lyd, når man ramte en hjemmeside. Og denne for mange. Jeg kan ikke sige, at lydakkompagnementet glæder mig, men måske vil moderat brug være diskret. Nå, selvafspillende video er mere en hyldest til reklame, som for mig. Nå, plus ønsket om at fastholde den besøgendes opmærksomhed i feedet. Ikke den mest behagelige trend, men kommercielt nødvendig.

25. Geometriske mønstre
Nå, vi afslutter vores anmeldelse med en kortsigtet modetrend i form af forskellige geometriske designs og mønstre. De blev uventet populære i slutningen af ​​sidste år. Nå, en anden måde at få dit webstedsdesign til at skille sig ud og unikt.

Infografik "Webdesign trends 2017"
Jeg tilbyder dig en infografik, der tydeligt præsenterer alle trends og trends inden for webdesign. Du kan downloade billedet i stor størrelse ved at bruge dette link på DeviantArt. En side om DeviantArt åbnes i et nyt vindue. Der skal du klikke på ordet Download til højre for billedet og gemme billedet på din computer.