Weboldaltervezés wireframe-el


Wireframe - drótváz - weboldal tervezésWeboldal tervezés során hajlamos az ember időt spórolni azon, hogy megtervezné rendesen a honlap felépítését. A wireframe (drótváz) mint eszköz pont arra való hogy minimál grafikai kivitelben a teljes website felépítését, működését, az oldalak kapcsolatát, menük elhelyezkedését felvázoljuk vele. De iránymutatást ad akár az űrlapok elhelyezkedésére, kinézetére vagy a mezők neveire is.

Ha időt fordítunk a webes produktum megtervezésére, az a további folyamatokban grafikai tervezés, fejlesztés folyamán megtérül. Ha érdekel hogy miért és az, hogy hol találsz ingyenes eszközöket rá akkor olvass tovább.



Mi van akkor ha elmarad a tervezés

Sok olyan honlappal találkozom, ahol hiányzik ez a lépés a honlap építésből tervezésből. A leggyakoribb oka az időhiány, de én inkább ezt egy szakmai igénytelenségnek fogom fel. A jól megspórolt idő a végén persze megbosszulja magát, mert mikor elkészül a mű, ügyfél csak néz, hogy Ő nem erre gondolt.

Ennél a pontnál megindul a weboldal életébe az amortizáció és a fejlesztők nagy kapkodás közepette el kezdik pótolni az ügyfél által hiányolt funkciókat. A fejlesztő is érzi, hogy ha egy komoly tervezés előzte volna meg a fejlesztést, akkor nem lenne az utólagos hegesztés.

Egy weboldal tervezése valahol itt kezdődik, mikor felvázoljuk az egész Site működését és a vezérő elemek helyét

A valóság (Te kéne egy ilyen..)

Tapasztalatból mondom a legtöbb komoly munka is alig-alig ér meg néhány oldalas leírást. Van egy komoly árajánlat, szerződés ahol puffogtatnak mindenféle érthetetlen kifejezéseket (sokszor az író sem érti - vakítás fázisa - minél érthetetlenebb annál jobb alapon), de mikor megvalósulás fázisába ér a dolog, a grafikus és a fejlesztő szinte semmit nem kap ami alapján elindúlhatna. A rajzokról meg ne is beszéljünk, nagyon kevés jóval találkoztam.

A webes ipar többet érdemelne..

Szerintem ez a szakma (honlapkészítő vagy nevezd ahogy akarod) sokkal többet érdemel annál, mintsem elmenjünk egy ilyen fontos tervezési fázis mellet. Nem is tartom komoly cégnek amelyik nem fordít és nem hagy időt a tervezésre!

Én a saját munkámon azt vettem észre, hogy sokkal jobban sikerül, ha előtte megtervezem. Ilyenkor Átlátom az egész folyamatot, tudom mik a fázisok, mit kell megvalósítanom, mivel kell kezdenem.. Régóta fejlesztem a webet de eddig 1 céggel találkoztam aki megkövetelte ezt az alaposságot (dokumentáció, tervezés)!

Miért jó az ügyfélnek?

Az ügyfél is részt vehet a tervezés fázisába. Eközben sok okos gondolata lehet, de még többről látja hogy nem működőképes. A tervezés és a fejlesztés végével azt fogja kapni amit a terveken látott és amiben közreműködött. Részt vesz az ötletelés fázisban így 100%-ban elégedett lehet a végtermékkel, szorosabb kapcsolat fűzi a produktumhoz hiszen az Ő gyermeke is.

  • Az weboldal elrendezését (menük, oldalsávok, dobozok, ..)
  • Segíthet az űrlapok meg tervezésében és elhelyezkedésében (címkék, sorrend, elhelyezkedés)
  • Részt vehet Menü rendszerek megtervezésében
  • Megtervezheti az oldalak kapcsolatát
  • Wireframe (drótváz) használatával megtervezzük a weboldal minden apró részét

Miért jó a weblap grafikusnak?

A grafikus a tervek alapján, kapásból tudja milyen oldalt kell tervezi. Milyen űrlap elemeket kell megvalósítani. Ha van vázlat amiben az ügyfél is közreműködött nagy valószínűséggel nem kell 20 weboldal grafikát gyártani. Nincs magyarázkodás a munka hatékonyabban gördülékenyebben megy.

Firefox kiterjesztésként is találunk ilyen eszközöket.

Miért jó a webfejlesztőnek?

A fejlesztőnek is kevesebb a kérdése, hiszen a vázlaton minden korrekten le van írva, és a végén nincs kapkodás a lehagyott funkciók miatt. Tudja hogy az űrlapon milyen adatokat kell elkérni, a pontos helye is meg van határozva minden elemnek. A kapcsolatok is le vannak írva.. itt is hatékonyabb a munkavégzés. Ha valahol lehet hibázni az ez a fázis. Grafikával lehet demózni, de a programmal elég nehéz és drága mulatság ha rossz irány vesz a fejlesztés.

Google Drawings - wireframe KIT

A Google a napokban jelentette be, hogy a Google Docs-ban elérhető a rajzoló programja. És most jön a poén, használhatod weboldal tervezéshez tervezéséhez. Nincs más dolog mint az, hogy jelentkezz be a Google Docs fiókodba, Kattints a lenti cikkben szereplő grafikai elemekre, és készíts belőle egy másolatot.

Feltétlenül olvasd el a cikket, amiért ez a bejegyzés elkészült!

Jelentkezz be a Google Docs-ba, kattints a linkre és csinálj belőle egy másolatot.

Google docs Drawings rajzoló szolgáltatásával is tudunk drótvázakat tervezni.

Hasznos Online és Firefox alapú wireframe eszközök

Letölthető nyomtatható PDF-ek, szabadkézi tervezéshez:

  • _http://www.geekchix.org/blog/2010/01/03/a-collection-of-printable-sketch-templates-and-sketch-books-for-wireframing/
  • _http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/
  • _http://wireframes.tumblr.com/mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/
  • _http://garmahis.com/reviews/wireframe-tools/

 


weblaptervezés, wireframe-drótváz, honlapkészítés, CSS és XHTML sablonok, weblap grafika, template honlaptervezes, honlap-tervezes, weboldaltervezes, weblapterv, weboldal-tervezes








Hozzászólások (1)

wireframe / netro / 2010-07-20
Nagy igazság.. főleg az eleje, hogy a grafikus sokszor semmit nem kap abból amit előzőleg a "nagyokosok" megbeszélnek.. :D


Hozzászólás beküldése:


http://domain.tld (nofollow) 
  ____    __    ____   _____  __    ____ 
 (_  _)  /__\  (  _ \ (  _  )(  )  (_  _)
.-_)(   /(__)\  )(_) ) )(_)(  )(__  _)(_ 
\____) (__)(__)(____/ (_____)(____)(____)



 
 
 
 
Powered By: PHP, Smarty, MySQL, CodeIgniter, jQuery, ArtH2O