Weboldal tervezése

Hogyan tudnál egy üres lapot álmaid weboldalává varázsolni? Elkezdhetnél mondjuk HTML és CSS kódokat gépelni – útközben kidolgozni, mit is szeretnél: kitörölni azokat a dolgokat, amik nem tetszenek, hozzáadni azokat, amik hirtelen eszedbe jutnak, újrarendezni bizonyos részeit az oldalnak.

Azonban sokszor nem ez a legjobb stratégia, hiszen rengeteg időt veszíthetsz el azzal, hogy olyan HTML és CSS kódokat írsz, amiket később törölni fogsz. Célszerű lenne inkább a kód írása előtt megtervezni a weblapot. Így már a kódolás előtt tudni fogod az oldal tartalmát, elrendezését, sőt, még a kinézetéről is lesz elképzelésed!

Az első lépés a legtöbb dolog megtervezésénél az ötletgyűjtés – az, hogy kitalálj mindent, amit később megvalósítanál. Az ötletgyűjtésnek több módja is van: gondolattérkép rajzolása egy lapra, az ötletek vázlatszerű leírása egy dokumentumban, vagy éppen post-it-ek ragasztása egy táblára.

Egyedül is gyűjthetsz ötleteket, vagy ha meg szeretnéd növelni az ötletek számát és sokszínűségét, kérj meg valakit, hogy segítsen, ötleteljen veled. Amikor más emberekkel együtt gyűjtesz ötleteket ily módon (brainstorming), használd az „Igen, és...” megközelítést: építs mások ötleteire! Hallgasd meg az ötletüket, majd vidd tovább egy „Igen, és...” kezdetű mondattal! Ne arra fókuszálj, hogy mi nem fog működni a partnered elképzeléseiben, fókuszálj inkább arra, ami működhet, és arra, hogy még milyen más, ehhez kapcsolódó dolgok működhetnek!

Miután elég ötletet gyűjtöttél, el kell döntened, hogy melyekkel akarsz foglalkozni a továbbiakban. Priorizáld az ötleteket aszerint, hogy melyek érdekelnek leginkább – próbáld valahogy megjelölni, vagy külön listába rakni őket – a maradékot pedig vesd el, vagy tedd el későbbre!

Jó következő lépés lehet a papíralapú prototípus megtervezése, tehát a weboldalad papíron. Ez a weblapod jövőbeli elrendezésének vázlata, egyszerű rajzokkal vagy szöveggel jelölve a tartalmat, és dobozokkal az egyes elemeket.

Alul az SF quiche papíralapú prototípusa látható, mely olyan webes alkalmazás, ami kielégíti minden quiche-kereső igényedet:

Mivel nem vesz túl sok időt igénybe a papíralapú prototípus elkészítése, így gyorsan előállíthatsz új változatokat, és nem is kell túlságosan ragaszkodnod az eredeti tervezetedhez. Rögtön csinálhatsz egyszerre több prototípust is az oldaladról, valamint a honlapod különböző oldalairól is csinálhatsz prototípusokat!

Miután elkészült a prototípusod, ideje megmutatnod pár felhasználónak is. Mutasd meg a prototípust egy barátodnak, majd kérdezd meg, hogy hova kattintanának először, vagy hogy mi fogja meg először a szemüket. Kérj tőlük visszajelzést!

Amikor úgy érzed, hogy már elég jók a papíralapú prototípusaid, tervrajzot is készíthetsz belőlük. A tervrajz is egyfajta prototípus, de ezt általában digitálisan rajzolják, és sokkal precízebben. A tervrajz több dobozból épül fel, amik a weboldal egyes részeit jelképezik, ezen kívül kisebb szövegeket és ikonokat is tartalmaz, ahol ez szükséges. Például, alább láthatod az SF quiche alkalmazás tervrajzát:

Ez a tervrajz egy elterjedt online prototípuskészítő eszközzel készült, a Balsamiq-kal. Hasonló tervrajzokat készíthetsz az olyan office programok, mint például a Powerpoint/Keynote alakzattervezőivel, vagy akár olyan tervezőprogramokkal, mint például a Photoshop, a Gimp, vagy az InDesign. Online keresve több fajta prototípuskészítő eszközt is találhatsz. A neked leginkább tetsző kiválasztásánál fontos szempont lehet az is, hogy a tervrajzkészítő alkalmazások sokszor pénzbe kerülnek.

Amikor elkészültél a tervrajzaiddal, megpróbálhatod ismét a felhasználók elé tárni tesztelésre. Vannak olyan alaprajz-tervező eszközök, amelyeknél mások kommenteket fűzhetnek a terveidhez. Vannak olyan eszközök is, mint például az InVisionApp, amelyekkel interaktív tervrajzokat készíthetsz: a kattintható részek (pl. gombok) új képernyőkre visznek át.