Weboldal tervezés Photoshop nélkül

A klasszikus webfejlesztési folyamat átalakulóban van. Egyre inkább gyorsan üzembe helyezhető, könnyen kezelhető, és költséghatékony megoldásokra van szükség. Egyre kevésbé hajlandóak kivárni a több hónapos fejlesztési időt. A klasszikus webfejlesztés bevett módszerre – az igényfelmérés, specifikáció, drótváz, tervezés, fejlesztés – egyre kevésbé működik hatékonyan. Íme, egy olyan módszer, amivel hatékonyabbá tehetjük a webfejlesztés folyamatát.

Tervezzünk honlapot Photoshop nélkül

A klasszikus munkafolyamatban a drótvázak elkészítése után Photoshophoz nyúlunk, jó pár napot töltünk tili-tolival, amíg ki nem alakul a “végleges” design. Szinte mindig előfordul, hogy az elkészült tervben, valami apróság miatt át kell tologatni az összes elemet, vagy egyszerűen csak meg kell változtatni az összes gomb színét.

Az egyszerű, letisztult megjelenésű weboldalaknál hatékony módszer lehet a PS kiváltása kedvenc kódszerkesztőnkkel. Vagyis a drótvázak jóváhagyása után, nem tili-tolizunk, hanem böngésző és mondjuk Notepad++ segítségével tervezzük meg az oldalt.

Nehéz elkezdeni kódolni, ha nem tudjuk, hogy fog kinézni, a végeredmény. Ahhoz, hogy fejben összerakjunk egy honlapot, kell pár év felhalmozott tervezői tapasztalat. Csak is gyakorlottaknak való, és olyan megbízókkal, akik a tervezői döntéseidben megbíznak. Tehát a “tetszik, csak legyen kicsit másmilyen” embereknél nem fog működni.

CSS3

Nagyban meggyorsítja a munkafolyamatot, ha nem kell órákat tölteni elemek csoportosításával, mappák rendezésével, rétegek címkézésével. Egy megfelelően osztályozott HTML-ben pillanatok alatt meg lehet változtatni a betűtípusokat, színeket, címsorok méretét stb. Gyorsan és könnyen lehet kísérletezni. A tavaly elkészített weboldalak felénél én már ezt a módszert alkalmaztam.

CSS kódművészet

A kép-alapú webdesign lassan kezd kikopni. Minimális mennyiségű képfelhasználásra törekszünk, hiszen a legkülönfélébb elemeket is, mind ki lehet váltani CSS kódolással. Van még néhány böngésző probléma itt-ott (IE), de a támogatás az elmúlt néhány évben jelentősen javult.

CSS3-al már nem okoz gondot a vetített árnyék, lekerekített sarkok, színátmenet, alakzatok, nyilak, egyszerűbb háttér minták, de még az animáció sem. Még az ikonokra is léteznek olyan gyűjtemények, amiket beágyazva, betűtípusként használva kiválthatjuk a képeket. A trendek is ennek kedveznek, a minimál, flat, vagy material designban, elfelejtjük a textúrákat, cifrázott képelemeket.

Ezeknek a módszereknek rengeteg technikai előnye van. Gyors betöltési sebesség, egyszerű módosíthatóság / színezhetőség, ismételhetőség stb. Valamint nem kell attól tartani, hogy olyat tervezünk, ami nem valósítható meg.

CSS3

Akkor most feleslegessé vált a Photoshop?

A rendkívül precíz, pixel pontos PSD-k ma már nem indokoltak azoknál a weboldalaknál, ahol letisztult, egyszerű, sallangmentes megjelenést várunk el. Ilyen esetben a PSD-ket maximum “vizuális támogatásként” érdemes használni, hogy támpontként szolgáljon az elkészítendő weboldalhoz. A részletek kialakítását már a kódolás során egyszerűbb elvégezni.

A nagy részletességű, szokatlan elrendezésű, kifinomult grafikájú weboldalaknál, még mindig az a legjobb módszer, ha PS-ben készítjük el a terveket!

Tanulj kódolni

Napjainkban egy jól képzett webdesigner feladatköre magában foglalja a weboldal, vagy webes felület grafikai tervezését, valamint annak megvalósítását HTML / CSS nyelvekkel.

Felhívom mindenki figyelmét, hogy a HTML nem programnyelv. Bár a köznyelvben akként emlegetik, valójában ez egy egyszerű leírónyelv. Programozni egy designernek nem kell tudnia, de a HTML / CSS-t ismerni, nem csak, hogy erősen ajánlott, de sok helyen alapkövetelmény is.

Hatékony munkamódszer

A webes technológiák meglehetősen gyors ütemben fejlődnek. A böngészők is folyamatosan frissülnek. Ennek eredményeként, a fejlesztési módszereinket is fejleszteni kell, hogy lépést tartson a jelenlegi tendenciákkal.

A hagyományos “kézműves weboldal tervezést” már nem tartom a leghatékonyabb módnak. Minden webügynökségnek, webdesignernek megvannak a bejáratott munkamódszerei, nincs rá szabály, ki hogyan dolgozzon. Azonban érdemes úgy csinálni, hogy az eredményes legyen Neked, kollégáidnak és persze az ügyfeleknek.

Nagyszerű, elolvastad! Oszd meg a világgal!

Írta: Pócsik Emese webdesigner

2007 óta dolgozom a design szakmában. Munkáim nagy részét céges weboldalak, portálok tervezése teszi ki. Rólam bővebben »

Iratkozz fel értesítési csatornámra!

Tetszett a bejegyzés? Iratkozz fel csatornámra és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.