Az egyik versenytárs minden képernyőn csiszoltnak látszik. A másik zsúfolt és elavult, pedig hasonló szolgáltatást árulnak. A különbség általában a tervezési folyamaton és az emögötti szokásokon múlik. Azonnal észreveszed a különbséget, még ha nem is tudod minden szabályát megnevezni.
A tervezési folyamat a kutatástól és a céloktól halad a vázlatokon és a visszajelzéseken át a végső csiszolásig. Ez a fejezet érthetően elmagyarázza, mit jelent ez, miért hat a weboldaladra és a marketingedre, és hogyan alkalmazhatod anélkül, hogy elvesznél a szakzsargonban. Azt is látni fogod, hogyan illeszkedik ide az, mi a grafikai tervezés. Menjünk végig rajta lépésről lépésre.
Hogyan működik a tervezési folyamat
A tervezési folyamat a kutatástól és a céloktól halad a vázlatokon és a visszajelzéseken át a végső csiszolásig.
A wireframe-ek gyakran a nyers ötletek és a kész vizuális terv között helyezkednek el.
A világos tervezési folyamat megelőzi a drága újradolgozást a projekt végén.
Szakaszok, amelyeket bármelyik projektnél használhatsz
Írd le a célokat, a közönséget és a szükséges szekciókat, mielőtt megnyitsz egy tervezőeszközt.
Először jön a kutatás, aztán a nyers elrendezés, aztán a vizuális csiszolás. Ha egyből a színekre és a betűtípusokra ugrasz, az általában újradolgozással jár.
A wireframe-ek és a szerkezet közvetlenül kapcsolódnak a modul mi az a wireframe és jó weboldaltervezési példák fejezetéhez.
Gyakorlati ellenőrzőlista, amit ma használhatsz
Írd le a célokat, a közönséget és a szükséges szekciókat, mielőtt megnyitsz egy tervezőeszközt.
Amikor átnézel egy oldalt, kérdezd meg, hogy a tervezési folyamat eredménye látszik-e már az első görgetésnél mobilon. Ha nem, rendezd át a szekciókat, mielőtt a részletekkel foglalkozol.
Mentsd el a képernyőképeket a változtatások előtt és után, hogy megtudd, mi mozdította előre a tervezési folyamatot az oldaladon.
Oszd meg ezt az ellenőrzőlistát mindenkivel, aki frissíti az oldaladat, hogy a grafikai tervezés az új oldalakon is egységes maradjon.
Válassz egy mutatót, amit ebben a hónapban figyelsz, például az oldalon töltött időt vagy az űrlapok megkezdését. Így a tervezési változtatások az üzleti eredményekhez kötődnek, nem csak az ízlésedhez.
Hogyan kapcsolódik ez a téma a tágabb márkádhoz
A vizuális döntések ritkán élnek egyetlen oldalon. A wireframe-ek gyakran a nyers ötletek és a kész vizuális terv között helyezkednek el.
A közösségi posztjaidnak, az e-mailjeidnek és a nyomtatott anyagaidnak ugyanazt a hierarchiát, színeket és betűszabályokat kell követniük, mint a weboldalad.
Ha a márka vizuális megjelenése elcsúszik, a vásárlók finom ellentmondást éreznek, még ha nem is tudják megmagyarázni.
A rossz weboldaltervezés fejezet segít összevetni a jegyzeteidet egy rokon fejezettel ebből a modulból.
A világos tervezési folyamat megelőzi a drága újradolgozást a projekt végén.
Gyakori kérdések, amelyek elkerülik a figyelmet
A másodlagos kifejezések, mint a mi a grafikai tervezés vagy a mi az a wireframe, segítenek mélyebb példákat keresni, és a munkádat az elfogadott mércékhez mérni.
A wireframe-ek gyakran a nyers ötletek és a kész vizuális terv között helyezkednek el.
Írd fel egyetlen előtte-utána változtatást, amit ezen a héten kipróbálsz egy élő oldalon. A kis, mért módosítások többet érnek a homályos terveknél.
Ha a csapatod közös szókincset tanul a tervezési folyamatról, kevesebb javítási kör kell a tervezőkkel és az ügynökségekkel.
Eszközök, amelyek megkönnyítik a vizuális frissítéseket
Sok elrendezési és stílusproblémához nincs szükséged egyedi kódra. A vizuális szerkesztővel beállíthatod a térközöket, a színeket és a betűket, miközben mobil és asztali nézetben is megnézheted az eredményt.
A WEMASY weboldalépítője vizuális szerkesztővel készült, így közzéteheted a változtatásokat anélkül, hogy minden apróságnál fejlesztőre várnál. Nyisd meg a weboldalépítőt, amikor készen állsz alkalmazni, amit tanultál.
Amikor közzéteszed a frissítéseket, nézd át újra a mi az a wireframe és a jó weboldaltervezési példák részt, hogy a modul egyben maradjon a fejedben.
Most már van egy működő szemüveged a tervezési folyamathoz. Használd, amikor átnézed az oldalad, jóváhagysz marketinganyagokat, vagy tervezőnek adsz megbízást. Folytasd a jó weboldaltervezési példák és a rossz weboldaltervezés fejezettel, hogy ebben a modulban lendületben maradj.
Gyakori kérdések
Mennyi idő alatt javítható a tervezési folyamat?
A legtöbb kisvállalkozás néhány összpontosított alkalom alatt tisztább oldalakat kap, ha alkalmazza a fejezet alapjait. Kezdd a kezdőlappal, aztán vidd át ugyanezeket a szabályokat a szolgáltatás- és kapcsolatoldalakra.
Kell tervező a tervezési folyamathoz?
Összetett arculatváltásnál a tervező sokat segít, de a tervezési folyamat sok javítását magad is elvégezheted, ha tudod, mire figyelj. Használd a fejezet mellett a mi az a wireframe részt a kapcsolódó útmutatáshoz.
Segíthet a WEMASY a tervezési folyamat alkalmazásában a weboldaladon?
A WEMASY weboldalépítőjében vizuális szerkesztő van, így kód nélkül állíthatod az elrendezést, a színeket és a betűket. Nyisd meg a weboldalépítőt, hogy frissítsd a sablonokat, és mobilon is megnézd a változásokat.
Mi a leggyakoribb hiba a tervezési folyamatnál?
Az emberek mindent egyszerre akarnak javítani, ahelyett hogy oldalanként haladnának. Válassz egyetlen prioritást, például az olvashatóságot vagy a kontrasztot, aztán nézd meg a következő javításhoz a jó weboldaltervezési példák részt.
Hogyan kapcsolódik a tervezési folyamat az SEO-hoz?
A tiszta vizuális hierarchia és az olvasható betűk tovább az oldalon tartják a látogatókat, ami támogatja azokat az elköteleződési jeleket, amelyeket a keresők figyelnek. A legjobb eredményhez párosítsd a tervezési javításokat jó tartalomszerkezettel.
Mit tanulj tovább a tervezési folyamat után?
Folytasd a mi az a wireframe és a jó weboldaltervezési példák fejezettel ebben a könyvben, hogy teljes vizuális rendszert építs a márkádnak online.