May 24

Web Design készítés

Posted by dody Design | Comments: no responses

Pár szóban: Mik azok az alapvető “szabályok”, “tudnivalók” amit egy honlap grafikai tervezése, kivitelezése során soha ne hagyj figyelmen kívül. Lehet ez egyéni vagy csapatmunka. Mindenkinek más és más az igénye, de vannak alap dolgok amiket jó ha észben tartnunk, mert megkönnyítheti az életünket. Talán még másét is. :)

A neten fellelhető oldalak többségénél a grafikai munkálatok sokat dobnak a látogatottságon. Sokan már csak azért is visszatérnek mert a grafika kiváló.

Néhány nagyon fontos tanács:

  1. Ne használj túl sok árnyékolást, vagy ha használsz akkor az ne otromba nagy legyen
  2. Szinátmenetet csak óvatosan mert minden egyes szinátmenet azt jelenti, hogy képet kell használni a html kódban ami növeli a méretet és az azt jelenti, hogy lassú lesz. Amit gondolom te sem szeretsz.
  3. NE MARGE -eld ösze a layereket amikor átküldöd darabolásra (kaptam már párat így). Mivel az egyes részeket ki lehet vágni több módszerrel is. Könnyebb optimalizálni is a képeket, ha layerekre bontva hagyod meg a psd-ben.
  4. Mielőtt nekiállsz gondold végig. Gyűjts anyagot. Fotókat, videókat, szinmintákat, szövegeket, derítsd ki mit is jelent az amiről készítened kell a grafikai megjelenést és nézz körbe a konkurens cégeknél.
    ( Én a cssremix.com valamint a cssmania.com -on szoktam nézelődni ihlet után, de NE másolj!)
  5. Ha valamiről nem tudod, hogy meg lehet-e oldani html-ben js nélkül akkor nézz utána a neten (keress egy olyan oldalt ahol valami hasonló van) és nézd meg Mozzila alatt a FireBug -gal. Álltalában a cégek többsége nem szereti ha js-t használnak az oldalon. Néha produkál érdekes dolgokat az egyes böngészőkkel (pl IE).
  6. Nézz át pár html kódot , ( ha van időd, ) jó ha tudod hogy néz ki és hogy mik lehetnek a buktatók. JÓ ha tudod mire készítessz megjelenítést. A Web igen fura jószág. A sávszélesség növekedésével egyre türelmetlenebbek az emberek, így hát most is ugyanúgy fontos a méret mint régen.
  7. SOSE hidd el amit az asszony mond!:D Ők más szemmel látják. Fontold meg, de sose hagyd hogy ő mondja meg milyen legyen! Hiszen a tiéd!
  8. Kérd ki a haverok és régi vagy új kollegák véleményét. Fontos, hogy ne azt mondják, hogy “JÓ lesz” meg hogy “Jó ez, ügyes vagy!”. Mindig van véleményük!!! Azaz kinek mi tetszik vagy mi nem tetszik, mi zavarja. Érti-e mi lesz. (Véleménye mindenkinek van! Még ha nem ért hozzá akkor is! Hiszen olyanoknak készül akik nem értenek hozzá.)
  9. Írj magyarázatot is ha valami extra ötleted van. Például az input mező feltöltéskor villogjon, vagy fénycsík fusson rajta (úgy is neked kell elkészíteni a plusz grafikáját).
  10. A pontos tartalomra figyelj! HA túl hosszú egy név, vagy túl hosszú ez az amaz akkor is próbáld meg szemléltetni, hogy abban az esetben, hogy fog kinézni az adott rész (box, lista…stb)
  11. Over eseményeket is jelöld, ha valami extra, ha nem úgy is kérni fogja a html-es vagy kitalál valamit (általában csúnya szineket vagy valami mást talál ki mint amit te szerettél (gondoltál) volna!)
  12. PS-ben használd a Layer style-t. Ez azért jó mert pontosan pixelre pontosan meg tudja nézni a méreteket a html-es munkatárs és nem kell méricskélnie.
  13. Kérdezz és kérdezz! Ha nem tudod hogy kell megvalósítani vagy hogy meg lehet-e egyáltalán akkor kérdezz olyat aki biztosan tudja.

A következő tanácsokat azoknak ajánlom, akik először készítenek weblaphoz grafikai megjelenést.

  1. Én Photoshop -ot használok mert könnyű vele dolgozni és könnyebb a html-esnek is kivágni a dolgokat egy psd-ből mint egy Illustrator file-ból (.ai). Szóval nyitsz egy 1200×2000 -es 72 dpi -s új lapot RGB 8 bites színkódolással. Meg is van az alap. :)
  2. Az új dokumentumban létrehozod a könyvtárakat. A könyvtárak és alkönyvtárak: Header (alkönyvtárak: Logo, AdvTop, “Menu” (ha ide jön)), Content (alkönyvtárak: LeftSide, Center, RightSide) , Footer. Természetesen nem kötelezőek a nevek és a könyvtárak de átláthatóvá teszik és a html ugyanilyen módon fog felépülni.
  3. A logót behejezed a Header\Logo mappába és megfelelő méretüre csökkented. Pozicionálod valahova ahova tetszik. Álltalában a bal felső sarkot kapja. Mellé készítessz egy 728×120 -as boxot (mindegy milyen színű) ez lesz a reklám helye mivel ez a max méret amit elérhet. Így tehát meg is van hogy mekkora lehet minimum az oldal. 728 + logo._width + margók ~ 800px a minimum, de kalkulálhatsz 1024-re is mert nem sok embernek van már 800×600-as felbontású képernyője.
  4. A baloldal általában menüt tartalmaz. Azért mert bármilyen hosszú lehet és ki tudja mikor bővül a menüpontok létszáma. Valamint egy Login box, ami egy “Sajátbox” lesz belépés után (extra menük amik elérhetők a regisztrált felhasználóknak). Ide egy text layer jön “Menü Menü Menü HosszúMenüpont Menü…” -tal.
  5. Középre jön a tartalom. Ide általában a főoldali szöveg jelenik meg valami jó képpel ami első ránézésre “megsúgja” a felhasználónak mit is tartalamaz az oldal. Feldobhatod Flash-es elemekkel ( lsd. grundfoci.hu ) is.
    Tanácsolom, hogy a tartalomban legyen minden. Értem itt: Cím, h1, h2, h3, h4, p, b, i, a, a:hover, a:active, ul és li tag valamint még amit szeretnél nem rábízni a html emberkére.
  6. Jobboldalon olyan boxok szoktak szerepelni ami valamilyen funkció rövid ismertetője, vagy “rövid front eleme”. Például.: kalandárium, Tag lista, új felhasználó, archive hírek,…stb.
  7. Footer, erre nem tudok mit mondani… Alsó menüsort tartalmazza és a plusz menüsort. Plusz menüsor az ami tartalmazza az impressum, kapcsolat, adatvédelem …stb elemeket. Valamint itt található még meg a copyright infó is.

Ennyi lenne amit tudnék tanácsolni. Ha még esetleg lenne kérdésetek akkor szivesen válaszolok. A lent található Comment-nél tudsz kérdezni.

Posted in Photoshop

Comments

So far, there are No Comments yet | Post your own comment
Avatar:

Itt regisztrálhatsz a Gracatar -ra. Ha ide regisztrálsz az e-mail címed segítségével, azonnal beillesztésre kerül az avatarod minden ezt használó oldalra. (Egyszeri regisztráció, SEMMI SPAM, Hírlevél!)


Post your opinion

About in Brief

Hy,
Dody vagyok, designere és HTML fejlesztője ennek a site-nak, amit most nézel. Most 27 vagyok és Budapesten (Magyarország) élek. Designer és Interaktív alkalmazásfejlesztő (Flash-Java Developer) vagyok. Jelenleg a szabadúszóként dolgozom. Szabadidőmben nyelveket tanulok és biciklizem...
[More...]