Grafikai tervezés vs webdesign

a grafika és a webdesign két olyan terület, amelyeket gyakran összekevernek egymással. Végül is mindketten a tervezésre koncentrálnak, és gyakran ugyanazon a projekten dolgoznak.

ez azonban nem jelenti azt, hogy azonosak, és a különbségek ismerete elengedhetetlen ahhoz, hogy tudjuk, kihez kell fordulni a projekt bármely pontján. Ennek érdekében Itt van az egyes szerepek részletes lebontása és azok legfontosabb különbségei.

természetesen, bár az egyéni készségek az adott személytől vagy csapattól függően változhatnak, a grafikai tervezés és a webdesign néhány alapvető alapvető eleme ritkán változik – ezek határozzák meg a szerepeket, és amire itt szeretnénk összpontosítani!

mi a grafikai tervezés?

a grafikai tervezés vizuális, kommunikációs eszközök létrehozására utal a termékek felhasználó felé néző oldalán. Ez magában foglalhatja az illusztrációkat és az ikonokat (amit a legtöbb ember vitathatatlanul ‘grafikának’ gondol), valamint a tipográfiát, a fotózást és még a sablonokat is. A grafikus vagy a csapat ezeket a médiumokat felhasználja a projekthez szükséges eszközök vagy kompozíciók létrehozásához.

a legnagyobb különbség az, hogy a grafikus nem rendelkezik műszaki ismeretekkel. Ehelyett kiegészítik vizuális készségeiket a felhasználói viselkedés megértésével és a problémák kutatásának képességével. Ez az oka annak, hogy a grafikusok segíthetnek például az oldalelrendezésekben is – megértik a felhasználók viselkedését, és ennek megfelelően alakítják ki a frontendet.

ezen felül a grafikai tervezés sokkal többet igényel, mint a rajzolás vagy illusztrálás képessége. Ez megköveteli a tudás színelmélet (hogyan színek kölcsönhatásba lépnek egymással), pszichológia (hogyan látvány befolyásolja a felhasználói viselkedés), és a fejlettebb tantárgyak, mint például a vizuális hierarchiák (hogyan vizualizálni fontosabb lehetőségek felett másodlagos is). Míg a grafikai tervezés olyan terület, amely nem rendelkezik a digitális projektekhez szükséges technikai ismeretekkel, a látvány, a felhasználók és a kettő közötti kapcsolat megértése ugyanolyan létfontosságú.

példák a grafikai tervezésre

grafikai tervezés történik körülöttünk-ez a magazinok, óriásplakátok, szórólapok, és minden más nyomtatott anyagok lehet gondolni. Ez azt jelenti, hogy itt van néhány példa a grafikai tervezésre a digitális médiumok tekintetében – beleértve azt is, hogy hogyan átfedi és működik a weboldalakkal.

  • LinkedIn. Bár egyetlen közösségi média hálózatot sem tekintenénk ‘grafikus nehéznek’, mindazonáltal mind a grafikai tervezést használják alapvető vizuális parancsikonként. Például a LinkedIn használatával a felső sáv kis számú, könnyen értelmezhető ikonra csökken, biztosítva a könnyű navigációt a képernyőkön. Mi több, ez segít lefordítani jól mobil és tabletta, hogy míg a vizuális elrendezés lehet változtatni, az ikonok biztosítják a következetesség és a megszokott.

  • McDonald ‘ s. ez a márka a világ minden tájáról ismert logóval rendelkezik, így nem meglepő, hogy a weboldal és a nyomtatott anyagok a lehető legnagyobb mértékben használják a grafikai elemeket. Minden szövegvilágosnak tűnik, és a logón, a színen és a fotózáson keresztül közvetíti a márkajelzést. Valójában ez igaz a legjobb élelmiszerekkel kapcsolatos szolgáltatásokra, mint például az éttermek és a kézbesítési alkalmazások: a show ne mondd el az utat.

  • IKEA. Minden e-kereskedelmi vagy kiskereskedelmi művelet erős látványt igényel, de az IKEA márkajelzéssel és stílussal erősítette meg magát. A vállalat a lehető legnagyobb mértékben használja a grafikát, élénk kék és sárga színeitől kezdve, hogy termékeit otthoni környezetben mutassa be. Ezek olyan grafikai tervezési döntések, amelyek majdnem annyira meghatározták a vállalatot, mint az elnevezési konvencióik.

mi az a Web Design?

Web design utal, hogy a készségek és módszerek mind a termelő és fenntartása a honlapon. Ez magában foglalja mind a technikai készségeket, például a kódolást és a keresőoptimalizálást (amelyet nagymértékben befolyásolnak a technológiai döntések), mind a tervezéssel kapcsolatos készségeket, például az interfészeket és a felhasználói élményt.

legyen szó egyéni webdesignerről vagy egy csapatról, amely magában foglalja a szükséges készségeket, a webdesign egy olyan folyamat, amely a legelején aktív. Valójában azt mondhatjuk, hogy alapvetően a weboldalak terméktervezése. Ez magában foglalja a weboldal céljának megértését, a felhasználók interakcióját, a megfelelő technológiai döntések meghozatalát és az előrehaladás megtervezését.

azonban csak megemlítettük, hogy a webdesign tartalmazhat néhány grafikus elemet. Emiatt nem ritka, hogy néhány grafikai készséget lát a webdesign csapatokon belül – ami vitathatatlanul ott van, ahol a kezdeti zavarok egy része rejlik -, de a webes tervezők hozzák létre az összes háttér-infrastruktúrát is.

érdemes megjegyezni azt is, hogy a weboldal tervezését gyakran saját képességeinek tekintik. Bár sok vizuális elem közös más szoftverekkel, mint például a gombok és a navigáció, a webhelyek gyakran saját technológiai választásokkal rendelkeznek. Ennek ellenére a progresszív webes alkalmazások növekedésével a webhelyek és az alkalmazások közötti határok egyre inkább elmosódnak.

a weboldalakat már nem kezeljük teljesen különálló entitásként az üzleti területen belüli alkalmazásoktól és egyéb szoftverektől. Hasonlóképpen látjuk a webdesign készségeket is, amelyekre szélesebb területeken van szükség.

példák a Webdesignra

minden jó weboldal a webdesignot használja koncepciójában, tehát fantasztikus példák széles választéka áll rendelkezésre. Itt csak néhány szeretnénk rámutatni:

  • Dropbox. Bár ez az oldal nagyon minimalistának tűnhet, teljesen ez a lényeg. A Dropbox weboldalát úgy tervezték, hogy támogassa üzleti szolgáltatását (fájlok átvitele), így a navigáció tiszta és egyszerű. Hasonlóképpen, sok tervezési választás ment létre a fájlmegosztási folyamat maga oly módon, hogy működjön együtt a modern böngészők és eszközök. A Dropbox így biztosítja az intuitív és zökkenőmentes folyamatot.

  • lazán. Mint olyan termék, amely mind a böngészőben, mind a letölthető, önálló opcióként létezik, a Slack fantasztikus példa arra, hogy a webhelyek és a dedikált szoftverek elmosódnak. A platform egyértelmű navigációt használ, annak ellenére, hogy egyre több funkció és használhatóság van, ezért továbbra is a felhasználók kedvence a versenyképes résében.

  • Wikipédia. Ez egy példa egy olyan weboldalra, amely lényegében a lehető legtávolabb van a grafikai tervezés hatásaitól. Hogy az említett, rengeteg választása van, amelyeket okkal hoznak. A Wikipédiának egyértelműen és egyszerűen nagy mennyiségű információt kell megjelenítenie egyetlen képernyőn, miközben webes architektúrát is létre kell hoznia a szélesebb szerkesztési és adminisztrációs feladatok támogatása érdekében. Lehet, hogy könnyűnek hangzik, de ha megnézzük a Wikipedia eredeti terveit, látni fogjuk, hogy sok munka történt annak érdekében, hogy a lehető leg intuitívabbá és használhatóbbá váljon.

grafikai és webdesign különbségek

dinamikus vs statikus

a grafikai tervezés sokkal hosszabb ideig létezett, mint a webdesign, de nagy része a fizikai médiában rejlik, mint például a magazinok és a nyomtatott média. Másrészt a webdesign tisztán a digitális médiumokra összpontosít, és itt kulcsfontosságú különbség van.

egy magazinban vagy könyvben A tartalom meghatározott sorrendben van elrendezve, a tervezés ezt gyakran magától értetődőnek veszi. A sorrend kissé statikus. Egy weboldalon azonban a különböző felhasználóknak megvan a saját útjuk, és a tervezők nem támaszkodhatnak egy bevált mintára.

ez azt jelenti, hogy a webdesignnak biztosítania kell az eszközöket a felhasználók számára a könnyű navigáláshoz, valamint biztosítania kell, hogy az egyes megtekintési oldalak önálló képernyőként működjenek a megfelelő célokra.

ráadásul a személyre szabás és a dinamikus tartalom betöltése korában a webes tervezőknek egyre kreatívabbnak kell lenniük. Jó példa erre az e-kereskedelem. Egy digitális áruházban az üzlet az Ön preferenciái alapján rangsorolhatja az elemeket, ajánlásokat tehet a korábbi adatok és trendek alapján, valamint egyéb testreszabásokat. Mindez nem történik meg egy katalógusban – a technológia nincs ott. Ez egy teljesen új terület, amelyet a webes tervezőknek egyre inkább figyelembe kell venniük munkájuk során.

kreativitás

mint minden terméknek, a weboldalnak is használhatónak és kiemelkedőnek kell lennie a versenytől. A fekete-fehér szöveg egyszerű weboldala nem fog messzire jutni. A mai felhasználók erős vizuális erőfeszítést várnak el – ehhez kreatív emberekre van szükség.

a grafikai tervezés az, ahol ez jön. A tervezők tudásukat a célfelhasználókra használják, hogy működő látványokat hozzanak létre. Ez az, ahol néhány nagyobb branding szempontok is jönnek szóba, is. A weboldalnak meg kell egyeznie bármi mással, amit a vállalkozás csinál, például fizikai üzletekkel vagy nyomtatott anyagokkal. A márkahű követőknek képesnek kell lenniük arra, hogy könnyen azonosuljanak a weboldallal.

fájlméret & teljesítmény

egy webhelyen a nagyobb fájlméretek lassabb betöltési időt és egyéb teljesítményproblémákat okoznak, amelyek mind a keresőoptimalizálás, mind a végfelhasználói élmény szempontjából rosszak. Köztudott, hogy az emberek nem bírják a lassú weboldalakat, és kattintanak, ha a válasz nem elég gyors.

továbbá, bár az emberek is élvezik a gyönyörű weboldalakat, tele grafikával és animációkkal, ezek a fő bűnösök a nagy fájlméretek és a lassú teljesítmény mögött.

a webes tervezők a teljesítmény egészét tekintik. A grafikusokkal való együttműködés mellett annak érdekében, hogy a képek a lehető legkönnyebbek legyenek, megvizsgálják azt is, hogy a tartalom hogyan töltődik be, milyen egyéb műveletek működnek a színfalak mögött, és minden más olyan terület, amely befolyásolhatja a teljesítményt.

skála & Arány

a hagyományos nyomtatott médiában az oldal mérete ritkán változik. Ez megkönnyíti a grafikusok számára, hogy minden alkalommal tökéletes méretű anyagot biztosítsanak. De, a digitális világban, mindannyian különböző méretű képernyőkkel rendelkezünk.

ennek eredményeként a webes tervezőknek fontolóra kell venniük azokat a terveket, amelyeket nagy számítógépes monitorokon, táblagépeken vagy kis okostelefonokon lehet kezelni. Ennek számos módja van – ma inkább dinamikusan töltjük be a tartalmat az eszköz alapján, ahelyett, hogy weboldalaink másodlagos mobil változata lenne -, de ez egy olyan tényező, amely minden választást befolyásol.

a webes tervezőknek olyan struktúrákat kell létrehozniuk, amelyek dinamikusan alkalmazkodnak a méretarányhoz. Ez viszont azt jelenti, hogy olyan eszközökkel kell tervezniük, amelyek szintén alkalmazkodnak. Előfordulhat, hogy az asztalon megjelenő képet kicsinyíteni kell – de szükség lehet a szöveghez igazításra is.

ez befolyásolja a tipográfiát és más területeket is, átfedést teremtve a grafikai és a webdesign aggályai között. A grafikai tervező csapat például kiválaszthatja a legszebb betűtípusokat, de a webes csapatnak tesztelnie kell, hogy képesek-e tisztán olvasni egy kisebb képernyőn.

vizuális elmélet

korábban említettük mind a színelméletet, mind a vizuális hierarchiákat. Ez a szélesebb vizuális elmélet elengedhetetlen a weboldalak számára. Amikor egy felhasználó egy webhelyre érkezik, a vizuális megjelenítés a kezelőfelületen irányítja, hogy hová megy. Minél gyorsabban tudják megérteni, hogy hol mozogjanak, hol kattintsanak, és hogyan találják meg, amire szükségük van, annál sikeresebb a webhely a kezdeti problémák kezelésében.

ehhez a grafikusok megértik, hogy mely színeket kell használni, hogyan kell elrendezni az oldalakat, hogyan kell helyet és vizuális súlyt adni a legfontosabb szempontoknak, és hogyan befolyásolják ezek a választások a végső élményt.

folyamatos támogatás

amikor egy vizuális eszköz elkészült,ennyi-kész. A weboldal folyamatosan alkalmazkodik és fejlődik. Új oldalak vagy szakaszok kerülnek hozzáadásra, vagy a webdesign csapatnak új technológiákat kell választania, hogy még jobban teljesítsen. Ezek a választások viszont egy új szakasz megtervezését vagy akár a meglévő szerkezet újratervezését jelentik.

az internet fejlődésével a weboldalak alkalmazkodóbbá és hatékonyabbá váltak. Ahhoz, hogy lépést tartsunk, a webes tervezőknek lépést kellett tartaniuk ezzel a tempóval. Az okostelefonok térnyerése például azt jelentette, hogy a mobil oldalak egyre fontosabbá váltak, miközben még az asztali számítógépek is új böngészőkkel és más technológiákkal rendelkeznek, amelyekkel számolni kell.

ennek nagy része azonban ritkán érinti a grafikai tervezést, mivel pusztán a frontendre összpontosít. Amikor a technológiai döntések befolyásolják a látványt, akkor a grafikai tervezés gyakran részt vesz, de addig a webdesign csapat tartja fenn és javítja a meglévő webhelyeket.

analitika

már megállapítottuk, hogy a webdesign egy folyamatos folyamat – tehát ön szerint ki az, aki elemzi a webhely jelenlegi teljesítményét és adatait? A webes tervezők ezt az információt arra használják, hogy mérjék webhelyük sikerét és megtervezzék a következő fejlesztéseket.

például egy tipikus webhely arra összpontosíthat, hogy mely oldalakat nézik meg (és melyek nem), hány ember hagyja el gyorsan a webhelyet (visszafordulási arány), és milyen gyorsan teljesít a webhely egésze a felhasználók számára. A SEO-ra is összpontosíthat, például arra, hogy mely kulcsszavak vonzzák az embereket, mely oldalak vannak rangsorolva, és melyek a leggyakoribb Forgalmi források. Ezek közül sok új webdesign döntésekhez vezethet.

a konkrétabb webhelyek esetében azonban ez nem áll meg itt. Az E-kereskedelmi üzleteknek, valamint más portáloknak gyakran még jobban figyelembe kell venniük a felhasználói tevékenységet. A felhasználók megtalálják az összes szükséges elemet? A fizetési folyamat zökkenőmentesen zajlik? Az emberek gyakrabban – vagy ritkábban – vásárolnak? Mindezek jelezhetik, ha valami rosszul megy, és javítani kell.

szerep a fejlesztőkkel

bár egyértelmű, hogy a webdesignerek nem webfejlesztők (bár a kettőt gyakran a webfejlesztő ipar alá sorolják), egyértelmű, hogy még mindig erős műszaki ismeretekkel rendelkeznek. Ez teszi őket a tökéletes választás dolgozik egymás mellett a fejlesztők az adott projekt.

a tervezőknek olyan technológiai döntéseket kell hozniuk, amelyek átfedik a fejlesztőket, így teljesen érthető, hogy a tervezési szerep szorosan együttműködik az utóbbival. Míg a webdesign szerepe figyelembe veszi a fájlméreteket és a teljesítményproblémákat, végső soron a fejlesztőknek mindent funkcionális kóddá kell konvertálniuk. Ez igaz a későbbi fejlesztésekre vagy adaptációkra is. Ennek eredményeként elengedhetetlen a két csapat közötti kommunikáció.

a grafikai tervezés viszont ritkán fedi egymást, ha egyáltalán. Amikor a weboldalnak vizuális eszközökre van szüksége, a webdesign csapat általában átadja ezeket a fejlesztőknek a teljes projekt részeként.

TL; DR-grafikai tervezés vs webdesign

ha egy weboldalon dolgozik, mind webdesignra, mind grafikai tervezésre van szüksége. Az előbbi a projekt során aktív, a kezdeti választásoktól kezdve a fejlesztők segítéséig mindent helyesen hajt végre. Emellett a grafikai tervezés a felhasználói viselkedés és a vizuális elmélet ismeretét hozza létre, hogy olyan eszközöket hozzon létre, amelyek biztosítják, hogy a frontend a lehető leginkább felhasználóbarát és inspiráló legyen.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.