Web 3.0: A webdizájn új korszaka már itt van

Észrevetted valami mást az átlagos weboldalon manapság? Valami megváltozott a weboldalak kialakításában, még néhány évvel ezelőtt. És sokan ezt a változást hívják a Web 3.0 eljövetelének – a webdizájn új korszakának.


Nagyobb képként a Web 3.0 az adatokról és azok kezeléséről szól. Az információ korában élünk, és amint az adatmennyiség növekszik, növekszik az irányítás szükségessége is.

Hallottál róla Blockchain előtte, és a Decentralizált Web kifejezés.

És akkor is hallottál az emberekről, akik szeretnének távolítsa el a hatalmat olyan cégektől, mint a Google, és még a Facebook is – aminek volt a magánélettel kapcsolatos problémák méltányos része az elmúlt években.

BlockchainA big corp megkönnyítheti az életét, legalábbis egyelőre, de a Web 3.0 a jobb adatvédelmi szabályok és a fejlett adatkezelés ígéretén él. Ábra: Rytis Jonikas

Mi a helyzet a mesterséges intelligenciával (AI) és a gépi tanulással (ML)?

Ezek mind valódi technológiák, amelyek valamilyen formában beépülnek a modern webbe. És a cél egyszerű: a felhasználói élmények személyre szabása és az internet hozzáférhetőbbé tétele.

És mégis…

Ez a bejegyzés az egyik ilyen technológiáról nem szól

Noha megértem, hogy az összes fent említett technika kivételesen releváns a mai korban, a posztomra a hangsúlyomat helyezem Web Design 3.0.

Más szavakkal: hogyan változtak a webhelyek az elmúlt öt évben, és hogyan változik a dolgok weboldal-tervezési oldala a Web 3.0-val?

A web egykor így nézett ki:

Web 1.0 Old School webhelyKlasszikus Web 1.0

És a 2000-es évek közepén elkezdtük látni a Web 2.0 megjelenését – amely valami hasonlónak tűnt:

Web 2.0 weboldal tervezésWeb 2.0 – A weboldal zökkenőmentes kialakításának általános megközelítése.

De ez semmi ahhoz képest, amit a Web 3.0 tervekben látunk:

Web 3.0 Weboldal előnézeti példaWeb 3.0 – egyedi színek, formák, tökéletes pixel-igazítás és így tovább! A kérdéses weboldal: Csepp-egészségügy

A webdizájn új korszaka hangsúlyozza a kifogástalan pontosságot, a hatásos színsémákat és az új tervezési elemek kiegészítését, amelyek kiegészítik az általános dizájnt.

Szóval, hogyan kerültünk ide, és mit kell tudnunk?

Mi a Web Design 3.0: Megválaszolták a kérdéseidet

E szakaszban a következő kérdésekre fogok összpontosítani:

  • Miben különböznek a Web 3.0 webhelyek az előző évektől?
  • Miért használnak a tervezők oly sok formát és egyéb tervezési elemet??
  • Az oldalépítők lépést tartanak-e a tendenciákkal?

Miután megválaszolták ezeket a kérdéseket, áttekintjük az élvonalbeli tervezési eszközöket és egy pár platformot, ahol inspirációt találhat.

Tegyük fel az első kérdést.

# 1: Hogyan különböznek a Web 3.0 webhelyek az előző évektől?

Szeszélyes formatervezés

Azt mondanám, hogy az elmúlt évek legjelentősebb változása a kreatív elemek hozzáadása.

A tervezők sokkal kényelmesebben használják a háttér elemeket, például az alakzatokat és a görbéket, hogy egy meghatározott tervezési navigációs utat vezessenek be.

Helyes használat esetén, alakzatok és foltok segíthet kiemelni az értékes tartalmat, miközben kellemes felhasználói felületet (felhasználói felület) biztosít.

Ezen felül a Web 3.0 Designs sokkal több illusztrációt és vizuális tartalmat használ. Nem csak az oldalak gazdagítására, hanem gyakran egy adott termék vagy ok illusztrálására.

Pioio honlapja

Amint meglátszik egy ilyen formatervezés, tudhatja, hogy az adott cég kemény munkát végzett annak érdekében, hogy kellemes legyen a felhasználói élmény.

2018 végén, A MailChimp átnevezte a teljes weboldalát, és az egyik dolog, amelyet bevezettek, az illusztrációk használata volt.

Az alábbiakban bemutatjuk a 3 legfontosabb okot, amelyek miatt fontolóra kell vennie az illusztrációkat:

Mindenekelőtt az illusztrációk, bármi máshoz hasonlóan, megragadják a látogatók figyelmét, de ez lényeg.

  • Átalakítsa az összetettséget egyszerűvé. Hagyományosan, a webdizájnok a címsorokra támaszkodnak, amikor megmagyarázzák termékeiket. Manapság az illusztrációk a legtöbb nehéz munkát megtehetik az Ön számára. Tervezheti meg a teljes illusztrációkészletet a termékek és jellemzői körül. Végül is a vizuális tanulás dolog!
  • Márkakép. A használt illusztrációk stílusa elősegítheti a pozitív márka imázsát. Az illusztrációk bemutathatják a különböző márkaértékeket, erősségeket és tulajdonságokat. Nem olyasmit, amit önmagában csak a copywrite-rel lehetne ábrázolni.
  • Vizuális karakter. Minden márka különbözik. És a látványtervekkel olyan identitást ábrázolhat, amely elválaszt téged a többiektől.

Ez vonatkozik olyan dolgokra is, mint az Ikonok és az Animációk. Mindkettő kissé egyéni munkát igényel – lehetőleg egy grafikai tervező által -, de a jutalmak ott vannak!

És a harmadik legjelentősebb változás tipográfia.

Web 3.0 tipográfia

A betűtípus mindig megőrizte minden formatervezés hatalmas részét. És ha nem vagy benne meggyőződve, felszólítottam Önt, hogy változtassa meg a webhely betűkészletét teljesen véletlenszerűre.

A különbség jó tipográfia óriási. És mióta a Web 3.0 webhelyek bekerültek a mainstreambe, az a betűkészlet sokfélesége is.

Megszabadulhat egy egyszerű webes kialakítással, pusztán a használt betűtípusokhoz. Ajánlom a könyvjelzőt Typewolf.

ingyenes betűkészlet-listák

Ez az oldal aranybánya minden dologra és betűtípusra. Jeremiah Shoaf irányítja. Sok éven keresztül fenntartja weboldalát, és webhelyén több ezer különféle adat található.

Ugyanakkor útmutatásokat is készít és rendszeresen karbantartja a „Day of the Day” könyvtárat. Amikor egy új projekten dolgozom, a Typewolf az egyik első látogatott webhely.

A tipográfia megismerésével és annak a webdizájnra gyakorolt ​​hatásával sok időt takaríthat meg magának, amikor a tervezés professzionálissá válik..

# 2: Miért használnak a tervezők oly sok formát és egyéb tervezési elemet??

A webdesign alakjai

Az új tendenciát nemcsak a szakemberek által tervezett webhelyek használják. A legújabb WordPress témák és keretek ezen tendenciák megvalósítására is épülnek.

De miért vannak formák és hogyan lehetnek előnyösek a weboldal tervezésére? A két fő tényező az esztétika és a minimalizmus. A formák és más geometriai elemek elősegítik a teljes terv összeállítását, biztosítva ezzel sima áramlás és következetes felhasználói élmény.

Hagyományosan, a metszeteket külön-külön az egyes színekkel osztják meg, és néha egyáltalán semmilyen szín nélkül.

formák és geometria a webdesignban

Ebben a példában láthatja, hogy az egyszerű illusztrációk gazdagítják ezt a minimalista kialakítást és a támogató háttérmintákat. Ez viszont elősegíti a fő navigációs elemek olvashatóságának hangsúlyozását.

Használhat támogató háttér elemeket a fontos tartalom kiemelésére is, például:

esztétikus webdesign

Mindent egybevetve a következetesség és a kreatív gondolkodás keveréke. A fentiekben bemutatott háttér alak segíthet a színpszichológia megvalósításában, hogy tovább javítsa a felhasználói élményt.

Később a bejegyzésben áttekintjük a legnépszerűbb webdesign-inspirációs webhelyeket. Itt láthat különféle technikákat a geometriai alakzatoknak a webdesignban történő megvalósításához.

# 3: Az oldalépítők lépést tartanak a tendenciákkal?

Elementor oldal készítő

Nem csak az oldalépítők, például a Visual Composer és a Elementor amelyek elősegítik a jobb céloldalak felépítését. Márkák, mint Squarespace, WebFlow, és Weblium szintén jelentős lépéseket tesznek a weboldal készítőinek területén. És elég biztos, hogy ezek a tervezőeszközök követik a webdesign legújabb trendeit.

Az Elementor, amely több mint 25 millió letöltést látott, folyamatosan fejleszti komponenseinek könyvtárát, hogy olyan elemeket tartalmazzon, amelyek a modern internetet alkotják. A Weblium az AI-t használja a tapasztalatlan webmestereknek a vizuálisan lenyűgöző webhelyek létrehozásához.

A legjobb az, hogy soha nem kell egyetlen sornyi kódot írni. A modern oldalépítők biztosítják Rács alapú elrendezések minden technikai elem nélkül.

Elementor Pro kütyü

Új sorokat, szakaszokat hozhat létre, és átméretezheti az egyes összetevőket a drag and drop eszközök használatával. Vagy elkerülheti ezt teljesen, és előre elkészített sablonokat használhat.

szükségtelen mondani, HTML tanulás & A CSS-t továbbra is erősen ösztönzik mint a vektor művészet és az általános grafikai tervezés tanulása. Az oldalkészítők hajlamosak a hatékonyságra, amelyeket csak akkor lehet megoldani, ha leengednek és piszkosak a kóddal.

Web 3.0 tervező eszközök: A jelenlegi trendek

A korábbi napokban a weboldalakat drótvázak és vázlatok alapján építették, amelyeket Önnek egy darab papírra kellett terveznie. A Photoshop segített enyhén enyhíteni, de természetesen nem olyan eszközökhöz, mint manapság.

A modern tervezőeszközök kifejezetten a webhelyek és mobil alkalmazások tervezésének ötleteire koncentrálnak. Ez megnyitja az ajtót a pixel-tökéletes kialakításhoz, azzal a képességgel, hogy egyes terveit kész weboldalakba exportálja.

drótváz kialakítás

Ha már van egyedi tervezésű terve, akkor összpontosíthat saját magának a kódolására, vagy az oldalkészítőkkel is, hogy a formatervezés közel tökéletes másolatát elkészítse..

Itt vannak az eszközök, amelyek mindezt megváltoztatják.

# 1: Vázlat

Vázlat

Vázlat egyedülálló tervező eszköz a Mac OS-hez, és vitathatatlanul az egyik legjobb digitális tervező eszköz a piacon. Annak ellenére, hogy egy adott operációs rendszerre korlátozódik.

Az egyik dolog, ami a Sketch-et annyira népszerűvé és keresetté teszi, hogy tényleg mindent biztosít, amelyre szüksége van a digitális tervezéshez, ideértve a weboldalak, a mobil alkalmazások, a vektorgrafikák, valamint a prototípuskészítés és a külső funkciók bővítéséhez szükséges kiegészítőket is..

Személy szerint az egyik dolog, amit nagyon szeretek a Sketch iránt, hogy ez egy igazán robusztus szoftver. A piac más lehetőségeinek megvizsgálása szempontjából. A vázlat a professzionálisan készített szoftver szabványát szemlélteti.

És ami a webdizájnt illeti, úgy értem, hogy a Sketch egyik legizgalmasabb tulajdonsága az, hogy a webhelytervezés támogatására készült. Tehát rácsok létrehozására, több réteg létrehozására, és még sok másra is.

drótváz példaTöbb tízezer vázlatfüzet található az interneten. Előzetes tapasztalat nélkül elindíthatja a Web Design karrierjét.

Sok szempontból ez olyan, mint a Photoshop, de a webdizájn számára. Nem tartalmazza a fényképek szerkesztéséhez szükséges átlagos funkciókat, de mindent tartalmaz, amire szüksége van a vektorgrafikák szerkesztéséhez, képek beszúrásához, betűkészletek kezeléséhez, oldalméret kezeléséhez, további rácsok létrehozásához, mindent.

Ha megnézi a modern weboldalakat, különösen a nagy márkák közül, akkor az idő 99% -át a Sketch segítségével tervezték, tehát a profi tervezők körében nagyon jól ismert..

És ha újonc vagy és tanulni akar, akkor nézd meg ezt online tanfolyam.

# 2: Lunacy

Elmebaj

Mint említettük, a Sketch kizárólag MacOS-hoz készült. Szerencsére az Icons8 vállalta magát, hogy alternatívát hozzon létre a Windows felhasználók számára. És a legjobb az egészben, hogy teljesen ingyenes.

Elmebaj egy Windows-alapú vektor-szerkesztő eszköz, amely sok ötletet kölcsönözött a Sketch-től. Teljes mértékben működőképes, mint egy egyedi vektor szerkesztő szoftver, de támogatja a Sketch fájlokat is.

Tehát, ha letölt egy olyan projektet, amely a Sketch segítségével készült, akkor ezeket a Lunacy segítségével is felhasználhatja. Végül, de nem utolsósorban, a Lunacy közösségi támogatással rendelkezik. Azaz kérheti és szavazhat azokról a funkciókról, amelyeket mások nyújtottak be.

Mindez annak érdekében, hogy megkönnyítse és egyszerűbbé tegye a weboldalak tervezési folyamatát.

# 3: Figma

Figma

Az utolsó jelentős webdesign eszköz Figma. Amint ez megtörténik, a Figma a Sketch közeli versenytársa is. És teljesen szabadon használható. A böngésző számára készült, de elérhető egy asztali alkalmazás is.

Mivel ingyenes és számos funkcióval rendelkezik, a Figma egy olyan alkalmazás, amelyet én magam is gyakran használok. A felhasználói felület természetesnek tűnik, nulla fölött. Az összes gomb és funkció úgy készül, hogy zökkenőmentes legyen az egyedi tervek készítéséhez.

Mellékesen megjegyzem, hogy én is szeretem a Figma-t bármilyen általános vektorművet használni. Akár idézeteket, új gombstílusokat hoz létre, és akármi mást is.

Web 3.0 Design Inspiráció: Tanuljon a legjobbak közül

A nagyszerű tervezési alapelvek megtanulásához nem kell beiratkoznia egy UX tanfolyamra. Csak annyira van szüksége, hogy hozzáférjen néhány kiválasztott inspirációs webhelyhez, és gyorsan megértse, mi tendencia.

A következő szakasz arra szolgál, hogy segítsen megtalálni a legjobb tervezési inspirációt a közelgő Web 3.0 projektekben.

A professzionális terveket felsoroló webhelyek használata ösztönözheti Önt a jövőbeni jobb tervezési döntések meghozatalára.

# 1: Lapa Ninja

Lapa Ninja

Lapa ninja az egyik kedvenc inspirációs webhelyemnek kell lennie. Nagyon szeretem a felsorolt ​​webhelyek fajtája szempontjából, és azt is, hogy mennyire képes lépést tartani a legújabb webes tervezési dolgokkal..

És őszintén szólva, tényleg nincs olyan webhely, amely ugyanezt tenné. Ráadásul már több mint 2000 adatot tartalmaz az adatbázisában. Tehát nem feltétlenül kell megvárnia az új tervek hozzáadását. És egy másik dolog, ami nagyon szeretem ezt a konkrét platformot, az, hogy valóban böngészhet egy webhelyen vagy az egyes weboldalakon és azok tervein kategóriánként.

És ez nem csak az, hogy tudsz, blog vagy vállalkozás, hanem valójában választhat bizonyos kategóriák közül, például portfólió, egészségügy és különféle iparágak. Tehát szűkítheti a keresést.

lapa ninja kategóriák

Ezen felül, ez nagyon egyszerűen böngészhető, és magában foglalja a legtöbb, amiről ebben a cikkben beszéltünk.

Az egyes listákat tekintve nagyon könnyű észrevenni azokat a változásokat, amelyeket jelenleg a webdesignban látunk.

Tehát felbecsülhetetlen értékű forrás egy időnként meglátogatni vagy meglátogatni, amikor ragaszkodik egy dizájnhoz, vagy valami újat tervez.

# 2: OnePageLove

OnePageLove

Az egyoldalas weboldal alapvetően olyan webhely, amely további oldalak nélkül rendelkezik. Egyesek céloldalaknak hívják, de a legtöbb ember egyoldalas webhelyeknek nevezi. Sokkal gyakrabbak, mint gondolnád. És az OnePageLove valószínűleg a legjobb webhely, ahol megfelelő expozíciót lehet készíteni az ilyen helyekre.

Hasonlóan a Lapa Ninja-hoz, szűkítheti a keresést meghatározott kategóriákra. Minden feljegyzés tartalmaz egy teljes oldalas képernyőképet és néhány részletet a szerzőről.

Ezenkívül böngészhet a tetszés szerint, és megnézheti bármely olyan weboldalt, amely felhívja a figyelmét. Nem tudok gondolkodni azon, hogy hányszor kölcsönzöttem inspirációkat az általuk felsorolt ​​webhelyekről OnePage Love. Ez olyan jó!

# 3: Awwwards

Awwwards

Végül, de nem utolsósorban, van Awwwards. Lehetséges, hogy a legrégebbi futó weboldal inspirációs webhely a világon. És mégis sikerül megőriznie következetességét évről évre.

Az Awwwards gondolata az, hogy az emberek benyújtják a weboldalak terveit, és a tagok szavaznak a kedvenceikről. Ezt követően az Awwwards bizottság egyéni szavazással dönt, és egy meghatározott időkereten belül dönt néhány kiválasztott nyertestől.

A győztesvé válva speciális jelvényt adhat hozzá webhelyéhez, amely kiemeli a tervezés megértésének kiválóságát.

És ami az inspirációt illeti, sok ezen az oldalon felsorolt ​​formatervezési minta rendkívül exkluzív. Ez egy igazán kreatív és ambiciózus tervezők játszótere.

Érdemes könyvjelölést és ellenőrzést végezni hetente egyszer.

Következtetés: Menjen tovább innen

A webdizájn versenyképes iparág. És nem azért, mert az emberek jobb weboldalakat akarnak készíteni, mint mások. A legversenyképesebb az UI és az UX szempontjából.

A népek figyelmének felhívásának új módjának megismerése jobb értékesítési eredményeket jelenthet. Szintén szilárd UX szolgáltatással – azt tapasztalhatja, hogy az emberek gyakrabban térnek vissza az Ön webhelyére.

2018 óta óriási beáramlás tapasztalható a formatervezés vizuális szempontjából. És mint ilyen, várhatóan még sokkal több változást és kiegészítést fog látni ezen a területen.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map