Het u deesdae iets anders aan die gemiddelde webwerf opgemerk? Iets het verander in die manier waarop webwerwe selfs ‘n paar jaar gelede ontwerp is. En baie noem dat dit die koms van Web 3.0 verander – ‘n nuwe era van webontwerp.


In die groter prentjie handel Web 3.0 oor data en die bestuur daarvan. Ons leef in ‘n era van inligting, en namate die hoeveelheid data uitbrei, is dit ook die behoefte om dit te bestuur.

U het gehoor Blockchain vantevore, en die frase gedesentraliseerde web.

En jy sal ook gehoor het van mense wat wil neem krag weg van maatskappye soos Google, en selfs Facebook – wat gehad het ‘n billike deel van privaatheidsprobleme in onlangse jare.

Blockchain‘N Groot korpus kan u lewe ten minste vir nou vergemaklik, maar Web 3.0 leef uit die belofte van beter privaatheidsreëls en gevorderde databestuur. Illustrasie: Rytis Jonikas

Wat van kunsmatige intelligensie (AI) en masjienleer (ML)?

Dit is alles regte tegnologieë wat in die een of ander vorm op die moderne web opgeneem word. En die doel is eenvoudig, om gebruikerservarings te personaliseer en om die web meer toeganklik te maak.

En tog…

Hierdie boodskap handel oor nie een van daardie tegnologieë nie

Alhoewel ek verstaan ​​dat al die tegnieke hierbo genoem uiters relevant is vir hierdie dag en ouderdom, val my fokus op hierdie pos Webontwerp 3.0.

Met ander woorde, hoe het webwerwe die afgelope vyf jaar verander, en hoe verander die webwerf-ontwerpkant van dinge met Web 3.0??

Dit is hoe die web eens gelyk het:

Web 1.0 Old School webwerfKlassieke web 1.0

En in die middel van die 2000’s het ons begin met die opkoms van Web 2.0 – wat soos volg gelyk het:

Web 2.0 WebwerfontwerpWeb 2.0 – ‘n Algemene benadering tot gladde webwerfontwerp.

Maar dit is niks in vergelyking met wat ons in die Web 3.0-ontwerpe sien nie:

Voorbeeld van Web 3.0 webwerfvoorskouWeb 3.0 – Unieke kleure, vorms, pixel-perfekte inlynstelling, en meer! Webwerf ter sprake: Droplet Health

Die nuwe era van webontwerp beklemtoon onberispelike presisie, impakvolle kleurskemas en ‘n toevoeging van nuwe ontwerpelemente wat aanvullend is tot die algehele ontwerp.

Hoe het ons hier gekom, en wat moet u weet??

Wat is Web Design 3.0: u vrae beantwoord

Vir hierdie afdeling gaan ek fokus op die volgende vrae:

  • Hoe verskil Web 3.0-webwerwe van vorige jare?
  • Waarom gebruik ontwerpers soveel vorms en ander ontwerpelemente??
  • Hou bladsybouers tred met die neigings?

Nadat hierdie vrae beantwoord is, kyk ons ​​na die nuutste ontwerpinstrumente en ‘n paar platforms waar u inspirasie vir die ontwerp kan kry..

Laat ons dus begin met die eerste vraag.

# 1: Hoe verskil Web 3.0-webwerwe van vorige jare?

Skitterende ontwerp

Ek sou sê dat die belangrikste verandering in die afgelope jaar die byvoeging van kreatiewe elemente is.

Ontwerpers raak baie gemakliker om agtergrondelemente soos vorms en kurwes te gebruik om ‘n spesifieke ontwerp-navigasiepad op te lê.

As dit korrek gebruik word, vorms en blobs kan help om waardevolle inhoud na vore te bring terwyl u ‘n aangename gebruikerskoppelvlak bied (gebruikersinterface).

Boonop gebruik Web 3.0 Designs meer illustrasies en visuele inhoud. Nie net om bladsye te verryk nie, maar om ‘n spesifieke produk of oorsaak te illustreer.

Piio tuisblad

Sodra u ‘n ontwerp soos hierdie sien, weet u dat die spesifieke onderneming hard gewerk het om die gebruikerservaring aangenaam te maak.

Laat 2018, MailChimp het hul hele webwerf heroorweeg, en een van die dinge wat hulle gekies het om aan te bied, was die gebruik van illustrasies.

Hier is die drie belangrikste redes waarom u dit moet oorweeg om illustrasies te gebruik:

In die eerste plek trek illustrasies aandag van besoekers anders as enigiets anders, maar dit is langs die punt.

  • Verander kompleks in eenvoudig. Tradisioneel vertrou webontwerpers op die nuus om hul produk te verduidelik. Illustrasies kan deesdae die meeste van die harde werk vir u doen. U kan ‘n volledige illustrasie ontwerp rondom u produkte en die funksies daarvan. Immers, visuele leer is ‘n ding!
  • Handelsmerkbeeld. Die styl van illustrasies wat u gebruik, kan help om ‘n positiewe handelsmerkbeeld te bevorder. Illustrasies kan verskillende handelswaardes, sterk punte en kwaliteite vertoon. Nie iets wat u slegs met kopieskryf kan uitbeeld nie.
  • Visuele karakter. Elke handelsmerk is anders. En met beeldmateriaal kan u ‘n identiteit uitbeeld wat u van die res onderskei.

Dit geld ook vir dinge soos ikone en animasies. Albei het ‘n bietjie meer individuele werk nodig – verkieslik deur ‘n grafiese ontwerper – maar die voordele is daar!

En die derde belangrikste verandering is tipografie.

Web 3.0 Tipografie

Die lettertipe bly altyd ‘n groot deel van enige ontwerp. En as u nie oortuig is nie, het ek u uitgedaag om die lettertipes op u webwerf na iets heeltemal lukraak te verander.

Die verskil daaraan goeie tipografie maak is enorm. Sedert Web 3.0-webwerwe in die hoofstroom gegaan het, het die verskeidenheid lettertipes ook geld.

U kan met ‘n eenvoudige webontwerp wegkom net vir die tipe lettertipes wat u gebruik. Ek beveel boekmerke aan Typewolf.

gratis lettertipe lyste

Hierdie webwerf is ‘n goudmyn vir alle tipografie en lettertipes. Jeremiah Shoaf bestuur dit. Hy onderhou sy webwerf vir baie jare en het duisende verskillende lyste op sy webwerf.

Hy skryf ook gidse en onderhou gereeld sy webwerf ‘Site of the Day’. Wanneer ek aan ‘n nuwe projek werk, is Typewolf een van die eerste webwerwe wat ek besoek.

Deur tipografie te leer en die effek daarvan op webontwerp te bespaar, sal u uself ‘n hele paar keer bespaar as u dit ontwerp om professioneel te laat voel.

# 2: Waarom gebruik ontwerpers soveel vorms en ander ontwerpelemente??

Vorms in webontwerp

Dit is nie net webwerwe wat ontwerp is deur professionele persone wat hierdie nuwe neiging gebruik nie. Die meeste moderne WordPress-temas en -raamwerke is ook gebou om hierdie neigings te implementeer.

Maar waarom vorms en hoe baat dit ‘n webwerf-ontwerp? Die twee belangrikste faktore is estetika en minimalisme. Vorms en ander meetkundige elemente help om die hele ontwerp bymekaar te kry en te verseker gladde vloei en konsekwente gebruikerservaring.

Tradisioneel word gedeeltes alleen met individuele kleure verdeel, en soms sonder enige kleur.

vorms en meetkunde in webontwerp

In hierdie voorbeeld kan u sien hoe die gebruik van eenvoudige illustrasies hierdie minimalistiese ontwerp en ondersteunende agtergrondpatrone verryk. Dit help weer om die leesbaarheid van die belangrikste navigasie-elemente te beklemtoon.

U kan ook ondersteunende agtergrondelemente gebruik om belangrike inhoud na vore te bring, soos:

estetiese webontwerp

Alles in ag genome is dit ‘n mengsel van konsekwentheid en kreatiewe denke. ‘N Agtergrondvorm, soos hierbo getoon, kan die gebruik van kleurpsigologie help om die gebruikerservaring verder te verbeter.

Later in die pos kyk ons ​​na die gewildste inspirasie-webwerwe vir webontwerp. Daar is verskillende tegnieke om meetkundige vorms in webontwerp te implementeer.

# 3: Hou bladsybouers tred met die neigings?

Elementor-bladsybouer

Dit is nie net bladsybouers soos Visual Composer en Elementor wat u help om beter landingbladsye te bou. Handelsmerke soos Squarespace, Webflow, en Weblium maak ook belangrike vordering in die ruimte vir die bouer van webwerwe. En sekerlik, al hierdie ontwerpinstrumente volg die nuutste neigings in webontwerp.

Elementor, wat al meer as 25 miljoen downloads afgelewer het, ontwikkel sy biblioteek vir komponente voortdurend om elemente in te sluit wat vir die moderne web bestaan. En Weblium gebruik AI om onervare webmeesters te help om visueel pragtige webwerwe te skep.

Die beste is dat u nooit ‘n enkele reël kode hoef te skryf nie. Moderne bladsybouers voorsien Rooster-gebaseerde uitlegte sonder al die tegniese dinge.

Elementor Pro-widgets

U kan nuwe rye, gedeeltes en die grootte van individuele komponente maak met behulp van sleep-en-aflaai-gereedskap. Of u kan dit heeltemal vermy en voorafgeboude sjablone gebruik.

Nie te min, leer HTML & CSS word steeds sterk aangemoedig net soos die aanleer van vektorkuns en algemene grafiese ontwerp. Bladsybouers is geneig tot ondoeltreffendhede wat slegs opgelos kan word deur ‘n kode te kry en vuil te raak.

Web 3.0 Ontwerpgereedskap: Die huidige neigings

In vroeër dae is webwerwe gebou op grond van draadraamwerke en sketse wat u op ‘n stuk papier moes ontwerp. Photoshop het daartoe bygedra om dit ‘n bietjie te verlig, maar beslis nie tot die punt van gereedskap wat ons deesdae het nie.

Moderne ontwerpgereedskap fokus spesifiek op die idee om webwerwe en mobiele apps te ontwerp. Dit maak die deur oop vir pixel-perfekte ontwerp met die vermoë om sommige van u ontwerpe as gereedgemaakte webwerwe uit te voer.

draadraamontwerp

Sodra u ‘n pasgemaakte ontwerp het, kan u daarop fokus om dit self te kodeer of om bladsybouers te gebruik om die perfekte weergawe van die ontwerp te verkry..

Hier is die instrumente wat die verskil kan maak.

# 1: Skets

skets

skets is ‘n unieke ontwerpinstrument vir Mac OS en is waarskynlik een van die beste digitale ontwerpinstrumente op die mark. Al is dit beperk tot een spesifieke bedryfstelsel.

Een van die dinge wat Sketch so gewild en so gesog maak, is die feit dat dit bykans alles voorsien wat u benodig vir digitale ontwerp, wat insluit die ontwerp van webwerwe, mobiele toepassings, vektorgrafieke, ook dinge soos prototipering en eksterne plugins vir ekstra funksies..

Persoonlik is een van die dinge waarvoor ek regtig baie lief is vir Sketch, dat dit ‘n baie sagte sagteware is. Dit is in terme van die kyk na ander opsies op die mark. Sketse illustreer die standaard van ‘n professioneel ingeboude sagteware.

En wat die webontwerp betref, bedoel ek, een van die opwindende kenmerke van Sketch is dat dit ontwerp is om webwerf-ontwerp te ondersteun. U kan dus roosters skep, u kan verskeie lae skep, en nog baie meer.

draadraamvoorbeeldDaar is tienduisende Sketch-freebies regoor die web. U kan u Web Design-loopbaan begin sonder enige ondervinding.

Op baie maniere is dit soos Photoshop, maar vir webontwerp. Dit bevat nie u gemiddelde funksies om foto’s te redigeer nie, maar dit bied alles wat u nodig het om u vektorgrafieke te wysig, beelde in te voeg, lettertipes te bestuur, bladsygroottes te bestuur, addisionele roosters te skep, alles.

As u vandag na moderne webwerwe kyk, veral van sommige van die groot handelsmerke, is 99% van die tyd dat die webwerf met Sketch ontwerp is, so dit is baie bekend onder professionele ontwerpers..

En as u ‘n newbie is en u wil leer, gaan kyk gerus aanlyn kursus.

# 2: Lunacy

gekheid

Soos genoem, is Sketch uitsluitlik vir MacOS gebou. Gelukkig het Icons8 dit op hulself geneem om ‘n alternatief vir Windows-gebruikers te skep. En die beste is dat dit heeltemal gratis is.

gekheid is ‘n Windows-gebaseerde vektorbewerkingsinstrument wat baie inspirasie by Sketch geleen het. Dit is ten volle funksioneel as ‘n individuele vektorkredigeringsagteware, maar ondersteun ook Sketch-lêers.

As u dus projekte aflaai wat met Sketch gebou is, kan u dit met Lunacy gebruik. Laaste maar nie die minste nie, word Lunacy deur die gemeenskap ondersteun. Dit beteken dat u kan vra en stem oor funksies wat deur ander voorgelê is.

Dit alles om die proses om webwerwe te ontwerp makliker en eenvoudiger te maak.

# 3: Figma

Figma

Die laaste belangrike webontwerpinstrument is Figma. Terwyl dit gebeur, is Figma ook ‘n noue mededinger met Sketch. En dit is heeltemal gratis om te gebruik. Dit is gebou vir die blaaier, maar het ook ‘n desktop-toepassing beskikbaar.

Aangesien dit gratis is en ‘n groot aantal funksies het, is Figma ook ‘n app wat ek die meeste gebruik. Die gebruikerskoppelvlak voel natuurlik, met geen oorhoofse koste nie. Al die knoppies en funksies is gemaak om u naatloos te maak om persoonlike ontwerpe te skep.

As ‘n sy-noot, is ek ook lief daarvoor om Figma te gebruik vir enige vorm van algemene vektore. Of dit kwotasies skep, nuwe knoppie-style en omtrent alles anders.

Web 3.0-ontwerpinspirasie: leer van die beste

U hoef nie vir ‘n UX-kursus in te skryf om wonderlike ontwerpbeginsels te leer nie. Al wat u nodig het, is toegang tot ‘n paar inspirasie-webwerwe, en u sal vinnig begryp wat die beste is.

Die volgende afdeling is daarop ingestel om u te help om die beste ontwerpinspirasie te vind vir enige opkomende Web 3.0-projekte.

As u webwerwe gebruik wat professionele ontwerpe bevat, kan dit u aanmoedig om in die toekoms beter ontwerpkeuses te maak.

# 1: Lapa Ninja

Lapa Ninja

Lapa ninja moet een van my gunsteling inspirasie-webwerwe wees om te gebruik. Ek is mal daaroor in terme van die soort webwerwe wat dit bevat, en ook hoe dit tred hou met al die nuutste dinge wat in webontwerp gebeur.

En eerlik, daar is regtig geen ander webwerf wat dit op dieselfde manier doen nie. Boonop bevat dit meer as 2000 lyste in sy databasis. U hoef dus nie noodwendig te wag totdat nuwe ontwerpe bygevoeg word nie. En een van die ander dinge wat ek baie graag van hierdie spesifieke platform hou, is dat jy eintlik op ‘n webwerf of individuele webwerwe en hul ontwerpe volgens kategorie kan blaai..

En dit is nie net jy weet, blog of besigheid nie, maar jy kan eintlik kies uit spesifieke kategorieë soos portefeulje, gesondheid en verskillende soorte bedrywe. U kan dus u soektog regtig vernou.

lapa ninja kategorieë

Daarbenewens is dit net eenvoudig om te blaai en bevat dit die meeste waarvan ons in hierdie spesifieke artikel gepraat het.

As ons na individuele lyste kyk, is dit regtig maklik om die veranderinge wat ons tans in webontwerp sien plaasvind, te sien.

Dit is dus net ‘n onskatbare hulpbron om af en toe te besoek of te besoek wanneer u ‘n ontwerp het of iets nuuts wil ontwerp.

# 2: OnePageLove

OnePageLove

‘N Webblad met een bladsy is in wese ‘n webwerf sonder addisionele bladsye. Sommige noem dit bestemmingsbladsye, maar die meeste mense noem dit webwerwe met een bladsy. Hulle kom baie meer gereeld voor as wat u dink. En OnePageLove is waarskynlik die beste webwerf om ‘n toepaslike blootstelling vir sulke webwerwe te maak.

Net soos met Lapa Ninja, kan u u soektog na spesifieke kategorieë verklein. Elke lys bevat ‘n skermkiekie met ‘n volledige bladsy en ‘n paar besonderhede oor die outeur.

Anders as dit, kan u na u smaak blaai en kyk na enige webwerf wat u aandag vestig. Ek kan nie terugdink aan hoeveel keer ek inspirasie by webwerwe gelys het deur nie OnePage Love. Dit is so goed!

# 3: Awards

Awwwards

Laaste maar nie die minste nie, ons het Awwwards. Miskien is die oudste webwerf met inspirasie ter wêreld ter wêreld. En tog slaag hy daarin om jaar na jaar konsekwentheid te behou.

Die idee agter Awwwards is dat mense webwerfontwerpe indien, en lede stem oor hul gunstelinge. Daarna maak die Awwwards-komitee ‘n individuele stem en besluit hy vir ‘n spesifieke tydraamwerk oor ‘n paar wenners.

Deur ‘n wenner te word, kan u ‘n spesiale kenteken op u webwerf voeg wat u uitnemendheid in ontwerpbegrip beklemtoon.

En wat inspirasie betref, is baie van die ontwerpe wat op hierdie webwerf gelys word, baie eksklusief. Dit is ‘n speelgrond vir kreatiewe en ambisieuse ontwerpers.

Die moeite werd om een ​​keer per week ‘n boekmerk te maak en terug te kyk.

Gevolgtrekking: waarvandaan jy moet gaan

Webontwerp is ‘n mededingende bedryf. En nie omdat mense beter webwerwe wil maak as ander nie. Dit is die mededingendste in terme van UI en UX.

Beter om ‘n nuwe manier te kry om mense se aandag te trek, kan beter verkoopsresultate beteken. Deur soliede UX te verskaf – sal u vind dat mense meer gereeld na u webwerf terugkeer.

Sedert 2018 was daar ‘n geweldige toestroming van ontwerpe wat die visuele aspek van ontwerp bevoordeel. En as sodanig, verwag dat u baie meer veranderinge en toevoegings op hierdie gebied sal sien.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me