Tartalom
- 01. Átfogó látás hiánya
- 02. Esés a divatokért és trendekért
- 03. Nem igazodik a rácshoz
- 04. Rossz szövegkezelés
- 05. A fényképezés rossz kezelése
- 06. Az ikonok és logók rossz kezelése
- 07. A dolgokat befejezetlenül vagy összetörve hagyni
A kísérletezés és a hibázás a tanulás fontos része. Minden évben egyetemi oktatói munkám során új hallgatókat látok ugyanolyan hibákat elkövetve a web-tervezés során. Remélhetőleg azáltal, hogy ezeket a kérdéseket itt azonosítjuk, jobban megtanulhatjuk elkerülni őket.
01. Átfogó látás hiánya
Minden weboldal valamilyen okból létezik, legyen szó információk továbbításáról, szórakoztatásról, termék vagy szolgáltatás értékesítéséről vagy a felhasználó feladatának elvégzéséről. Az oldal minden elemének e cél érdekében kell működnie.
Nézze át a tervét: az egyes elemek funkciójának egyértelműnek kell lennie, és mindent el kell távolítani, amely nem támogatja ezt a célt. A kattintható dolgoknak úgy kell kinézniük, mintha kattinthatóak lennének - legyen szó akár aláhúzásról, gombként történő formázásról vagy más vizuális rendszerről, a legfontosabb, hogy következetes legyen.
Arra kell törekednie, hogy tiszta vizuális hierarchiát hozzon létre, így a felhasználó könnyedén beolvashatja az oldalt, és kiválaszthatja a legfontosabb információkat vagy funkciókat. Az oldal hangnemének és stílusának tükröznie kell a webhely célját, de maga a tartalom a tervezés legfontosabb része. Ha webhelye arra szolgál, hogy népszerűsítse webes tervezőkészségét, akkor talán nem kell hallanunk a bélyeggyűjtés iránti szenvedélyéről? Gondoljon arra, miért érkezett a felhasználó a webhelyre, és mit akar, hogy tegyen, amikor odaér. Gondosan mérlegelje, hogyan szervezi az információkat és a funkciókat - például ne bontsa feleslegesen a webhelyet több oldalra, ha az jobban gördülékenként működne.
02. Esés a divatokért és trendekért
Szórakoztató lépést tartani a divatkal, de sokkal fontosabb, hogy tartsuk magunkat a tervezési alapelveknél. Például a 20. század közepétől a klasszikus olimpiai játékok plakátjai ma is fantasztikusan néznek ki, míg a 2000-es évek eleji skeuomorf „Web 2.0” weboldalak sok, ferde és üveghatásukkal már réginek tűnnek. A körvonalazott horgonyok és bajuszok sztereotip „hipszter” kinézete már ugyanúgy tart.
A legfontosabb, hogy ragaszkodjunk a tipográfia, a kép és az elrendezés elveihez, és ne értelmetlenül alkalmazzunk értelmetlen ikonográfiát vagy trükkös CSS és Photoshop effektusokat. Néha a kevesebb több, és csak azért, mert létrehozhat egy jQuery kép körhintát vagy parallaxis görgető hatást, ez nem azt jelenti, hogy kellene.
Senki sem születik jó ízléssel (én biztosan nem állítanám, hogy megvan!), És az ízlés természetesen szubjektív. De ha jól megtervezett dolgoknak tesszük ki magunkat, akkor mindenképpen elismerést nyerhetünk a jó tervezés helyett a rossz mellett, és remélhetőleg könnyebben láthatjuk a saját munkánk hibáit.
03. Nem igazodik a rácshoz
Noha a rácsvonalak láthatatlanok, a legtöbb profi tervező munkáját szigorú rácshoz igazítja, amely gyakran nyolc, 12 vagy 16 vékony függőleges oszlopból áll. Ezeknek az oszlopoknak egyenletes méretűnek és egymástól elosztottnak kell lenniük, tiszta margókkal és ereszcsatornákkal elválasztva őket. A vizuális elemek egy vagy több oszlopot átfoghatnak, így a gyakorlatban a 12 vékony „oszlop” három tényleges szöveges oszlopra osztható, máskor pedig egy kép az egész 12 oszlopra kiterjedhet. Az ezen oszlopok felosztásának változása segíthet megállítani a kialakítás túlságosan hasonlít egy merev asztalra.
A rácsrendszerek a nyomtatás tervezéséből eredtek, de olyan keretrendszereken keresztül jutottak el az internetre, mint a 960 Grid System, és újabban olyan reszponzív rendszerek, mint a Skeleton, amelyek képesek a képernyő felbontása alapján dinamikusan megváltoztatni az oszlopok méretét és számát. Ne feledje, hogy a vizuális elemeknek vagy világosan fel kell állniuk, vagy egyértelműen úgy kell kinézniük, mint amire nem hivatottak. Ahol a dolgok szinte összeállnak, de nem egészen, ott furcsának tűnnek. Figyeljen az árva szavakra vagy elemekre is, amelyek váratlan helyekre burkolnak. Általában jobb a böngészőben tervezni, mint a Photoshop alkalmazásban, mivel reálisabb képet kap a webhely kinézetéről.
Legalábbis egy weboldalnak általában a böngésző szélességén belül kell lennie, ahelyett, hogy az oldal tartalmát balra lehorgonyozva üres ürességgel jobbra hagyja (nézlek, TSB).
04. Rossz szövegkezelés
A hallgatók gyakran túl kicsi szövegeket készítenek. Az alapértelmezett HTML betűméret abból az időből származik, amikor a webhelyeknek 800x600 felbontású monitorokkal kellett elszámolniuk az asztali felhasználókat, de a mobileszközök és a nagyfelbontású monitorok korában nagyobbra gondolhatunk. Olyan tervezők, mint Jeffrey Zeldman, bebizonyították, hogy a nagy betűméretek jól működhetnek a bekezdések szövegében.
Ne felejtse el ellenőrizni, hogy webhelye hogyan néz ki egy sor felbontással, és szükség esetén alkalmazza a CSS média lekérdezéseit. A címsoroknak lényegesen nagyobbaknak kell lenniük a bekezdés szövegében. Ügyeljen arra is, hogy elegendő függőleges helyet biztosítson a szövegsorok között. A tipográfiában ezt a távolságot „vezetőnek” nevezik, a CSS-ben pedig a „vonal-magasság” vezérli. Az alapértelmezett érték meglehetősen szorosan egymás mellé teszi a sorokat, ami azt jelentheti, hogy az olvasó elveszíti a helyét, amikor a szeme lefelé mozog az oldalon. Próbálja meg a betűméreténél 50% -kal nagyobb értéket használni, például 24 képpontos szöveg esetén 36 képpont.
Győződjön meg arról, hogy elegendő „fehér helyet” hagy a szöveg körül - ez csak azt jelenti, hogy az oldalon üres hely van, amely az elemek elkülönítésére és az oldal körbevezetésére szolgál. Győződjön meg arról, hogy korlátozza a szövegoszlopok szélességét, hogy ne legyen túl sok szó egy sorhoz - ez abban is segít, hogy az olvasó ne veszítse el a helyét, amikor a szeme a sor végéről az elejére mozog a következő sorból. Általában átlagosan valahol 10 szó körüli vonal működik a legjobban. Ugyanezen okokból kerülje el text-align: center vagy text-align: right bekezdés szövegére.
Szűkítsen magára két vagy három betűtípust, és kerülje a képek szöveges használatát - az olyan szolgáltatások, mint a Google Betűtípusok és a Typekit, a webes betűtípusok széles skálájához biztosítanak hozzáférést. Győződjön meg arról, hogy a szöveg színe és a háttér színe között elegendő kontraszt van - általában a világos háttéren sötét szöveg a legjobb. A sötét háttéren lévő világos szöveg is működhet, de férfiasabbnak, hidegebbnek vagy hívogatatlanabbnak tekinthető. Az olyan online eszközök, mint az Adobe Kuler, segítenek ízléses színvilág kiválasztásában. Kerülje a nagy kontrasztú háttérmintákat, amelyek megzavarhatják a betűk alakját.
05. A fényképezés rossz kezelése
Úgy tűnik, hogy a leggyakoribb hiba itt az, hogy a diákok túl kicsi méretben fényképeznek az oldalon, vagyis elveszítik hatásukat. A teljes böngésző szélességű képek (például a Treehouse-n láthatók) hatásosabb, „fényesebb” érzetet kölcsönöznek, ami inkább hasonlít egy nyomtatott magazinhoz. Gondoskodjon arról is, hogy a választott fényképezés közölje azt az üzenetet, amelyet a webhelye megpróbál átadni, és hogy törvényesen jogában áll használni azt. A stock fotós weboldalak elképesztő képválasztékot kínálnak, de mindenképpen kerülje el az ott található sok „sajtos” felvételt. Ha saját fotóját használja, akkor mindenképpen állítsa be a szín- és kontrasztszintet annak érdekében, hogy ütősnek és nem kimosottnak, de mégis természetesnek tűnjön.
06. Az ikonok és logók rossz kezelése
Gyakori probléma a műalkotások rossz kivágása, látható szaggatott élekkel (’jaggies’) vagy szőrös tollas élekkel. Sajátítsa el a toll eszközt a Photoshop alkalmazásban, vagy használja a sokszögű laszót és a nagyítást rendkívül közel. Egy másik gyakori probléma a JPEG tömörítési műtárgyak, ezért használjon SVG-t vagy nagy felbontású PNG-t ikonokhoz és logókhoz. Ügyeljen arra, hogy a grafika ne a natív felbontás felett jelenjen meg, mivel homályosnak tűnik. Lehet, hogy megúszja ezt egy fényképért, de soha egy ikongrafikáért.
07. A dolgokat befejezetlenül vagy összetörve hagyni
A professzionális tervező soha nem hagy tudatlanul befejezetlen vagy töröttet egy nyilvános oldalon. A nagyobb tervezőirodáknak lehet egy külön QA (Quality Assurance) csoportja a hibák észlelésére, de kezdőként rajtad múlik. Kötelezzen fel egy ismerősét, hogy segítsen a lektorálásban és a tervek ellenőrzésében. Elképesztő, amit egy második szempár észrevehet!
Keresse meg a nem létező oldalakra mutató linkeket, a „törött képeket”, az elrendezés hibáit, a nem megjelenő stílusokat és a helyesírási hibákat. A részletekre való odafigyelés kulcsfontosságú. Ha megpróbáltál megvalósítani valamit, de nem tudtad egészen működőképessé tenni, vedd ki! Ha nyilvánvaló hibái vannak az oldalán, az emberek csak a hibákat fogják látni, és elmulasztják az üzenetet.
És természetesen ne kövessen el agyatlan hibákat, mint hogy az oldal címét „Név nélküli dokumentum” -ként hagyja, vagy a helytartó szöveget hagyja az oldalon! De egyikünk sem tenne ilyet, nem ?! Lorem ipsum dolor ...
Szavak: Iain Lobb Ábra: Elly Walton
