Tartalom

• Lépni
• 1. módszer a 2-ből: A 3 alapszabály
• 2/2 módszer: Iránymutatások
• Tippek
• Figyelmeztetések

Egy nagyszerű weboldal megtervezése ijesztő feladatnak tűnhet, de mindaddig, amíg szem előtt tartja az alapokat, érdekesnek és szórakoztatónak találja a folyamatot. Nem csak a szép megjelenésről szól! Megmutatjuk az alapokat és néhány általános irányelvet, amelyek segítenek olyan webhelyek tervezésében, amelyeket az emberek újra és újra felkeresnek.

Lépni

1. módszer a 2-ből: A 3 alapszabály

1. 1. szabály:Hallgassa meg ügyfelét. Lehet, hogy "az univerzum történelmében és azon túl a világ eddigi legnagyobb weboldalát" tervezi gazdag feketékkel, kifinomult betűtípusokkal és élénk, művészi színekkel egy olyan webhely számára, amely "felkutat most!" Sajnos ügyfele narancssárga menüsort kívánt élénk rózsaszín és narancssárga betűkkel. Téged elbocsátottak, és az eddigi legjobb webhelyed - amelyhez az ügyfélnek jogai vannak - valahol a tartalék lemezükön található, anélkül, hogy bárki is ezt látná.
   • Tanulmányozza ügyfele vállalati identitását. Az ügyfél mutasson meg néhány weboldalt, amit szeretnek. Ez nemcsak képet ad arról, hogy mi tetszik nekik, hanem néhány olyan tervezési ötletet is ad, amelyekre Ön talán nem is gondolt volna.
   • Ha azt hitte, hogy a narancssárga és rózsaszínű weboldalon viccelünk, vegye fontolóra ezt a klassz, kifinomult webhelyet:
2. 2. szabály:Ismerje meg közönségét és mit keres, és ennek megfelelően alakítsa ki a tervét. Az embereknek azért van webhelyük, mert azt akarják, hogy mások is lássák őket. Informatív vagy kereskedelmi jellegű lehet, vagy egy meghatározott célközönség szórakoztatása. A tervezőként az a feladatod, hogy tudd, kinek tervezel, és tartsd őket az oldalon, amikor odaérnek.
   • Gondolhatod: "Ha jól néz ki, akkor maradnak." De ennek nem feltétlenül kell így lennie. Vegyünk például ingatlant. Itt egy letisztult, szórakoztató kialakítású webhely. Sok a fehér tér, amely nyitott megjelenést, élénk színeket és modern szélesvásznú formátumot kínál, linkek segítségével jól látható helyen:
   • Most nézze meg ezt a megközelítést az ugyanazon a területen lévő ingatlanok értékesítésénél: rendetlen és nagyon elfoglalt, tompa színekkel és reklámokkal.
   • Találd ki, melyik működik jobban azok számára, akik otthont keresnek? Igaz, az, ahol házak! Amikor az emberek „eladó házak keresése Santa Monicában” keresnek, nem érdekli őket, hogy néz ki egy webhely. Nem akarnak olvasni az ingatlanügynökről, vagy szép képeket látni a városról. Házakat akarnak látni.
3. 3. szabály:Figyelj magadra. Megérted, hogy mit akar az ügyfél, és tudod, mit keres a piacod. Végre itt az ideje, hogy figyeljen rád, a tervezőre!
   • Készítsen sablont a választott grafikus szoftverben. Készítse el az oldal elemeit különböző rétegekre (így később a teljes sablon megsemmisítése nélkül módosíthatja a dolgokat). Ezek az elemek lehetnek:
     • Fejléc. Ez egy olyan elem, amely a webhely minden oldalán megegyezik. A fejléc a webhely címéből és emblémájából, valamint a weboldal egyéb részeire mutató linkekből áll (pl. Névjegy, Kapcsolat stb.). Vizuálisan és gyakorlatilag ez összeköti az egészet. Jó gyakorlat a menüsor első gombját visszakapcsolni a kezdőlapra.
     • Vessünk egy pillantást például az Apple-re:
     • Csakúgy, mint a legtöbb Apple-termék esetében, a honlapjuk is nagyon tiszta, egyértelmű kialakítású. Vegye figyelembe a tetején található menüsávot, az egyes gombok logikai témáival, valamint egy keresőmezővel - mindig jó ötlet, ha webhelye támogatja. Most nézzük meg az egyik gomb, az iPad céloldalát, hogy néhány elemet láthassunk:
     • A menüsor csak az iPad gomb sötétítésével változik.
     • A céloldal tárgya nagy fekete betűkkel jelenik meg.
     • Új almenü jelenik meg, így többet tudhat meg a termékről. Ha rákattint ezekre a gombokra, akkor látni fogja, hogy minden oldal a témától függően új tartalmat kínál, de elrendezésében és kialakításában azonos lesz.
     • Gyakran előfordul, hogy a menüsor minden egyes fő témájához különböző alcímek tartoznak, amelyeket kitölthet. A második menüsáv létrehozása helyett használhatja a Musicians Friend példájához hasonló felugró menüket:
     • Oldalsáv. Ez a webhely számos oldalán megjelenik, de nem feltétlenül az összesen - a kontextus határozza meg. Ez azonban nagyon fontos elem, és gondosan meg kell tervezni, hogy intuitív és ne legyen túl zűrös. A menüsorral ellentétben az oldalsáv tartalma nagyon dinamikus lehet. Nézze meg ezt a két oldalsávot a Trulia ingatlanpiacról. Az első a vevőknek szól:
       
       

2/2 módszer: Iránymutatások

1. Tervezzen jó felhasználói felületet. Helyezze el a weboldal különféle elemeit, például a címet, az oldalsávokat, logókat, képeket és szöveget minden oldalon ugyanazon a helyen, hogy webhelye navigálható és intuitív legyen.
   • Tartsa ugyanazt a fejlécet minden oldal tetején. Függetlenül attól, hogy webhelye tartalma sok ismétlődő elemet engedélyez-e vagy sem, ellenőrizze, hogy minden oldal teteje megegyezik-e.
   • Használja a logikát a tervezésében. Az egyetlen oldal elemeit logikailag kell fontosság vagy téma szerint rendezni; a webhely különböző oldalainak is meg kell lenniük.
2. Hozzon létre következetes stílust. Ahol az elrendezésnek strukturális konzisztenciát kell adnia a webhelynek, a stílusnak tematikus harmóniát kell biztosítania.
   • Tartson be két vagy három fő színt, és győződjön meg róla, hogy jól illenek egymáshoz.
   • Kerülje a túl sok betűstílus vagy méret használatát; ha váltogatni szeretne néhányat, akkor mindegyik oldalon ugyanúgy használja őket.
   • Használja a Cascading Style Sheets (CSS) elemeket az egységes stílus megőrzéséhez, és annak megkönnyítéséhez, hogy az elemeket egy egész weboldalon megváltoztathassa anélkül, hogy külön-külön kellene minden oldalra felkeresnie.
3. Maximalizálja az olvashatóságot. A szöveg könnyebb olvashatósága érdekében kisebb részekre oszthatja.
   • Használjon feliratokat és megfelelő távolságot az egyes részek elválasztásához.
   • Használjon félkövér betűket vagy különböző méreteket a témák hierarchiájának és fontosságának bemutatásához.
   • Ügyeljen arra, hogy hogyan kezeli a szöveget. Ne legyen túl kicsi a betűtípus, és növelje a sortávolságot, hogy a nagy szövegdarabok könnyebben olvashatók legyenek. A nagyméretű szövegfoltok nehezebben olvashatók; bontja kisebb bekezdésekre.
4. Tegye webhelyét egyetemesen olvashatóvá. Használjon szabványos HTML-t, és kerülje azokat a címkéket, szolgáltatásokat és bővítményeket, amelyek csak egy böngésző márkájához vagy verziójához érhetők el.
   • Noha a legtöbb modern böngésző és számítógép képes kezelni a bonyolult képeket, minden karcsúbbnak tűnik, ha összezsugorítja és webre optimalizálja képeit. Mérje fel a minőség és a sebesség fontosságát.
5. Tesztelje webhelyét. Győződjön meg arról, hogy minden link működik ahogy elvárható, és a képek helyesen jelennek meg.
   • Érdemes megszervezni néhány felhasználói tesztet azzal, hogy a célközönség tagjai tesztelik a tervezés egyértelműségét és könnyű használatát, és visszajelzést adnak a webhelyéről.
6. Tegye közzé webhelyét. Vásároljon domain nevet, ha még nem tette meg. Időnként ellenőrizze, hogy a linkek továbbra is működnek-e, és hallgassa meg azokat a javaslatokat, amelyeket a látogatók e-mailben küldenek Önnek.

Tippek

• Bár szabadon tervezheti az elrendezést saját személyes elképzelései vagy más webhelyeken látott dolgai alapján, könnyebb lehet kész terv megvásárlása.
• Ne bombázza a látogatót aranyos, különleges képekkel. A 90-es években szórakoztató kísérlet volt a flash-animáció, az élénk színek, a mintás háttér és az oldalterheléskor automatikusan lejátszott zene, de most elrettentik a felhasználókat. A maximális olvashatóság érdekében ragaszkodjon az egyszerű háttérekhez, amelyek ellentétesek a szöveg színével.
• A bekezdések közötti távolság optimalizálására mindig használhat CSS-t.
• Hallás- vagy látássérült látogatók számára feliratozhat videókat, átírhatja a hangokat és hozzáadhat kisegítő lehetőségeket tartalmazó üzeneteket. Míg a táblázatok hatékony módja lehet az információk rendszerezésének, a látássérült látogatók a képernyőolvasó szoftver segítségével nem biztos, hogy az anyagot a megfelelő sorrendben hallják.
• Hagyja, hogy látogatói tintát spóroljanak: használjon külön stíluslapot az oldalak nyomtatásához.
  • A nyomtatási paraméterek beállításakor kapcsolja ki a háttérképeket.
  • Használjon fekete szöveget fehér alapon.
  • Távolítsa el a menüsort és a felesleges képeket.

Figyelmeztetések

• Kerülje a plágiumot és tartsa be az összes szerzői jogi törvényt. Ne tartalmazzon véletlenszerű képeket, amelyeket online talál, vagy akár szerkezeti elemeket jóváhagyás nélkül. Minden, amit a webhelyén használ, jogi és etikai szempontból egyaránt legyen.