9 Alapvető tanácsadás a DIY kezdők számára

Webdesign alapelvek & a bevált gyakorlatok, amelyek segítenek bármilyen szintű kezdőnek a szakember vizuális megtervezésében & elegáns megjelenésű weboldal önmagában.


Webdizájn-tippek kezdőknek

Manapság bárki számára webdesigner lehet. Igen, ez merész kijelentés – de a hozzáférhetőség olyan nyílt forráskódú szoftverekhez, mint például a megnövekedett hozzáférhetőség Zsinór, és a barkácsáruház építkezésével, mint például a Wix és a Weebly, elárasztva a piacot, amatőr és jóhiszeműen web designer későn sokkal vékonyabb és veszélyesebb lett. A kreativitás érdekessége, hogy senki sem dönthet el érted, mikor készen állsz egy bizonyos szerep betöltésére. Rengeteg rocksztár soha nem vett le zenei órákat; sok sikeres művész soha nem tanulmányozta az emberi anatómiát; és a weboldal-tervezők többsége nem rendelkezik hivatalos végzettséggel. Tehát, ha létrehozta saját vállalkozásának webhelyét, akkor magabiztosan mondhatja ki, hogy „webdesigner”? Önnek kell meghatároznia.

Bárki számára web-tervező lehet, DIY webhelyépítő platformokkal.

Kattintson a Tweet-re

Ha Ön ennek a blognak a követője, akkor valószínűleg már döntött úgy, hogy saját maga hozza létre webhelyét. Noha teljesen eláraszthatja a webfejlesztéssel kapcsolatos meglepően sok információt, biztos lehet benne, tudva, hogy a nagyon kevés tervezési tapasztalattal rendelkező vállalkozók valóban professzionális webhelyeket hozhatnak létre. Mindez néhány alapvető elvárás követésével kezdődik, amelyek helyes alkalmazás esetén mérföldre vezethetnek a webhelyed tervezésének és felhasználói élményének hitelességéhez.

Mi ez az útmutató (és mi nem az)

A világosság kedvéért itt a webdizájn alapjairól beszélünk, és nem fogunk olyan fejlettebb témákba foglalkozni, mint például a hálózati rendszerek, a JavaScript vagy a CSS keretrendszerek. Ez az útmutató azt is feltételezi, hogy valamilyen drag and drop weboldal készítőt használ, így kódolás nélkül tervezhet webhelyet. Függetlenül attól, hogy egy meglévő sablont használ a weboldal készítőjétől, vagy a semmiből indul (ambiciózusabb lehetőség kezdőknek), ez az útmutató segít az alapvető webdesign-alapelvekkel és gyakorlatokkal kapcsolatban, amelyeket a webhelyén alkalmaznia kell. A webdizájnról szóló egyetlen cikk nem fog azonnal szakértővé tenni téged, ezért fontolja meg ezt az első lépést egy nagyobb világba.

GYORS TIPP: A HTML és a CSS alapvető ismerete hatalmas előnyökkel jár majd minden új webdesigner számára. Ha igazán szeretné kezdeni a kódolást, azt javaslom, nézd meg W3Schools többet megtudni az alapítványról.

A webes tervezés alapjai kezdőknek

Menjünk rá, ugye? Íme néhány a leghasznosabb trendek és iránymutatások, amelyeket tudnia kell az első webhely felépítésekor:

1. Helyezze el az egeret, vegye fel a ceruzát

Előfordulhat, hogy webhelye létezik egy gyönyörű, teljes entitásként a fejedben – emiatt azonnal belép a Photoshopba (vagy ami még rosszabb, egy böngészőbe és HTML-be), hogy megtervezze. Whoa, whoa – hűtsd le egy pillanatra a fúvókádat! Ne tegye a kocsit a ló elé. Először vegye ki a ceruzát és a papírtálcát, és kezdje el ötleteit valami könnyen megfoghatóvá alakítani. Ez egy fontos szakasz a webhely struktúrájának feltérképezéséhez, csak téglalapok, logók és inspirált ötletek felhasználásával (gyakran nevezik wireframing). A dolgok szuper durva lehetnek ezen a ponton; senki nem fogja látni, csak te.

Weboldal drótváz példaA webes drótváz segít kialakítani webhelye elrendezését és felépítését, miközben javítja a felhasználói élményt (UX) és időt spórol.

Ebben a szakaszban sokkal könnyebb megváltoztatni az elrendezéseket, amelyekről eredetileg gondolták, hogy működni fognak, de most rájönnek, hogy rendetlenek és zavaróak a papíron. Ez sok órányi csalódást fog megtakarítani, szemben azzal, hogy ugyanazt a felfedezést hajtja végre, ha a webhely kódolva van és egy böngészőben található. Ráadásul jelentősen elősegíti a weblapok felépítését, amikor van vak referenciája a konzultációhoz, ahelyett, hogy vak lenne.

2. Kövesse a hierarchiát

Tény, hogy a legtöbb internetes szörfös inkább csak a weboldalakat szkenneli, ahelyett, hogy időt vesz igénybe mindent elolvasni. Ehhez készen kell állnod a legfontosabb tartalom első helyezése. Ez azt jelenti, hogy a felhasználónak képesnek kell lennie arra, hogy a kezdeti betöltés közben egy képernyőn az oldal legfontosabb információit megrajzolja, nagyítás vagy görgetés nélkül. Ez természetesen sokkal könnyebben mondható el, mint megtenni. Íme néhány tipp, amely segít jobban megérteni ennek a tervezési elméletnek a jelentőségét:

Tartsa a tartalmat a hajtás felett

A betöltött tartalom kezdeti képernyőjét „hajtásnak” nevezzük – és minden, ami alatta van, és annak megtekintéséhez görgetni kell, másodlagosnak tekinthető. Általában a legfontosabb információ „a hajtás felett” található. A legfontosabb dolog, amelyet ezen a téren el kell érni, hogy felhívja a felhasználót a cselekvésre, vagy hogy ösztönözze a továbbgörgetést.

„Hős” kép használata

A webdesign manapság általános tendenciája az, hogy ezt a „hajtás feletti” területet kitöltik úgynevezett „hős” képpel vagy szalaghirdetéssel. Ezek teljes képernyős háttérképek, nagyon tömör és ponton átfedő szöveggel, általában cselekvésre ösztönző gombbal párosítva. Valószínűleg a weboldal teljes célja megtalálható ezen a szalagcímben, bár ez nagyszerű alapot jelent a követendő tartalom számára is.

Példa hősképre / szalaghirdetésre

A „Hajtogatás” az eszköztől függően változhat

Itt vannak olyan dolgok, amelyek bonyolulttá válnak – és miért nem kellene túlterhelnie magát, próbálva mindent elrendezni ennek a varázslatos vonalnak a fölé. A felhasználó eszközétől függően a képernyő mérete óriási mértékben változhat. Az állkapocsra eső 5K kijelző függőleges felbontása 2880 pixel, míg az iPhone 5 ennek kevesebb mint fele. Ez azt jelenti, hogy a mobil felhasználók egyszerűen nem lesznek képesek annyi tartalmat elférni a képernyőn megjelenő ingatlanukba. (Erről bővebben később.)

GYORS TIPP: Az általános hüvelykujjszabály annak biztosítása, hogy a „hajtás feletti” tartalom illeszkedjen a képernyő méreteinek a legalacsonyabb közös nevezőjébe. Ezt általában elfogadják 768 pixel függőleges felbontás.

3. A tipográfia az Ön terve

Hacsak nem fényképező vállalkozást működtet, a szöveg minden weboldal legfontosabb eleme, ezért fontos, hogy ezt a részt helyesen végezzük. Az Ön weboldalának hierarchiája nagyban függ a választott tipográfiától: hogy a címsorok, az alcímek és a szövegek hogyan követik a természetes áramlást, és hogyan maradnak vizuálisan megkülönböztethetők egymástól. A tipográfia átfogó megtekintéséhez olvassa el a bevált gyakorlatok útmutatóját. Íme néhány fontos elvitel:

  • Ellenőrizze, hogy a szöveg megfelelő-e olvasható (kerülje a virágos betűtípusokat!) és elég nagy (általában körülbelül 16 képpont a testnél).
  • Ne maradjon több, mint két betűtípus– és győződjön meg arról, hogy jól párosulnak!
  • Hagyjon szabad helyet a bekezdéseknek, hogy lélegezzenek egymás között, és álljon eléggé felső párnázás vagy árrés a fejléceken, hogy egyértelmű tartalmi töréseket jelentsenek.
  • Kerülje a hosszú sorokat. A szemnél könnyebb, ha a bekezdések sora nagyjából nem több 15 szó hosszú– és egy kicsit kevesebb, mint a mobil képernyőkön.
  • betűtalp a betűtípusok általában a nyomtatásban a legjobbak, kivéve, ha az interneten nagy címsorban használják őket.

4. Színek & A kontraszt lényeges

Hosszú ideig beszéltünk a színpszichológiáról, de a koncepció ismétlődik. Az Ön webhelyére választott színek óriási szerepet játszanak abban, hogy a felhasználók hogyan érzékelik az Ön márkáját, és mennyire motiváltak is arra, hogy a webhelyen keresztül cselekedjenek (azaz vásárolnak dolgokat). Miért? Nos, minden szín bizonyos érzelmeket vált ki, és akár eredendő természetük, akár kulturális kondicionálásuk miatt ezek a színek bizonyos típusú vállalkozásokhoz társulnak. Ha egy gyermekjáték-társaság vagy pénzügyi tanácsadó éles fekete színűre festi a teljes webhelyüket, akkor ez abszolút rossz jelzéseket küld a kívánt közönségnek. A flipside-on élénk narancs vagy kellemes kék lenne a tökéletes hang és tudatosság.

Példa a webdizájn színeireA kék egy bizalmat és bizalmat váltó szín, amely népszerű választás a pénzügyekkel kapcsolatos webhelyek számára.

Ha már meghatározta márkájának színeit, akkor használja a webhelyén szereplő színeket. A legjobb azonban, ha ott tartja legfeljebb három szín az Ön webhelyére; mint például a betűtípusokat, nem akarja túlzásba lépni itt, különben a webhely több személyiségzavarral járhat. Vigyázzon arra is, hogy a weboldalon túl sok színcseppen van; a szemünket olyan vonzzák rájuk, mint a mézes csapdákat, és megszakíthatják a tartalom természetes áramlását. Csak akkor használja a színt, amikor erre a leginkább szükség van, például linkekhez vagy gombokhoz.

A témában kontraszt, alapvető fontosságú, hogy szövege kitűnjön a háttérből. Ha világosszürke, sárgás vagy zöld színű betűtípusokat használ, szinte biztosan láthatatlanná teszik őket az oldalon. Fekete, fehér alapon a kontraszt legnagyobb kombinációja, és általában ehhez kell ragaszkodnia.

GYORS TIPP: A legjobb, ha elkerüljük teljes telítettség színekkel az interneten. A tiszta vörös (hexadecimális szám: ff0000) kissé túlságosan lyukas a szemén. Hasonlóképpen, a betűtípusok tiszta fekete (# 000000) általában túl erősen rezg a szem számára, míg egy kissé csökkent fekete (# 333333) megkönnyíti az olvasást..

Azt is szeretné, ha a szöveges háttérképek megjelennének. A nagyon elfoglalt fényképek használata elvonhatja a szöveget, ezért a probléma elkerülése érdekében használjon kevésbé részletesebb fényképeket, vagy használjon például egy rgba (51,51,51,0.5) átfedést a szöveg alatt a kép lágyításához..

képfedvény példaHasználjon egy overlay szöveget a háttér mögött, hogy felbukkanjon a háttérből.

A kontraszt szerepet játszik abban is, hogy a felhasználókat felhívják-e az Ön webhelyének egyes kulcsfontosságú elemeire. A legfontosabb cselekvésre ösztönző gombnak kontrasztos színekkel kell megragadnia a szemet. A kék „Vásároljon most!” gomb elveszíti sürgősségét és érdemességét, amikor elnyel egy olyan webhely, amely mindenütt kék színt használ – de egy ugyanazon az oldalon található piros gomb felhívja a felhasználó figyelmét, amikor azt mondja: “Hé! Kattints ide!”

6. Képek használata

A megfelelő képek kiválasztása a webhelyén részben a saját művészi képességein múlik, de vannak intellektuális megfontolások is, amelyek megkönnyítik a kiválasztási folyamatot. Először is, kerülje el webhelye idegen fotókkal való díszítését, csak azért, mert ezek szépnek tűnhetnek. Ehelyett gondoljon arra, hogy az egyes képek hogyan használják a saját céljaikat, és ami még fontosabb, hogyan viselkedik tartalom. Egy jól megválasztott fénykép sokkal hatékonyabban közvetítheti márkáját, szolgáltatását, termékét vagy közönségét, mint a szavak. Fotók segítségével segítsen felhasználóinak valamit megérteni, érzelmeket idézni elő, vagy bizalmat ösztönözni; másodlagosnak kell lennie ezeknek pusztán esztétikai okokból történő felhasználásával.

A fájltípusok megértése & összenyomás

Van egy további lépés, amelyet meg kell tenni a képek weben történő használatához. Azokat a képzeletbeli fényképeket, amelyeket olyan webhelyekről szerez be, mint például Shutterstock és iStock meglehetősen hatalmas lehet (5000+ vízszintes pixel és 10+ megabájt méretű), ami kiválóan alkalmas nyomtatásra, de a webhelyek számára alkalmatlanok. Nem mindenkinek van szupergyors szálas internetje, tehát csökkentenie kell a képek méretét a betöltési időhöz igazítva (nem is beszélve, hogy a látogatók 40% -a távozik, ha a webhely 3 másodpercnél hosszabb ideig tölt be!). Általában azt szeretné, hogy mindegyik képe a következő helyen legyen legfeljebb 500 kilobájt méretű, bár az átlagos fájlméretének valószínűleg körülbelül kell lennie 100 kilobájt.

  • JPEG a képek szabványos formátuma. Ez veszteséges formátum, ami azt jelenti, hogy a képminőség tömörítéskor romlik. Ha JPEG-t használ teljes szélességű háttérképhez, akkor azt javaslom, hogy a vízszintes felbontása legyen legalább 1200 képpont. Általános célokra, ne használjon olyan képet, amely kevesebb, mint 600 képpont vízszintes felbontás, mivel valószínűleg homályosnak tűnik a modern képernyőkön.
  • PNG az a preferált választás grafikához vagy képekhez, amelyek megkövetelik átláthatóság. Ez egy veszteségmentes formátum, amely kiválóan alkalmas a képminőség megőrzésére, de megnöveli a fájlméretet is. Általában PNG grafikákat használ illusztrációkhoz, ikonokhoz vagy kisebb képekhez, amelyeket áttetszőségük miatt össze lehet rakni más elemek fölé. Ritkán szüksége lesz egy PNP-re, ha nagyobb, mint 1000 képpont.
  • SVG (méretezhető vektorgrafika) egy újabb formátum, amely helyettesíti GIF és bizonyos esetekben még a PNG is. Az SVG szépsége az, hogy lehet olyan nagy vagy olyan apró a képernyőn, amire szüksége van, miközben megőrzi a tökéletes tisztaságot és élességet (és még mindig kicsi a fájlmérete). Fontolnia kell az SVG használatát logó, ikon vagy logó esetén vektorgrafikus az Ön webhelyén; Mivel a magas DPI-kijelzők mostantól általánosak, az SVG élessége biztosítja a legjobb képminőséget.

Képfájl-típus példák

6. Mobile-First Design

Elértük azt az időt, amikor a legtöbb ember online tartalmat használ a telefonjával, nem pedig asztali számítógéppel. Ennek eredményeként sokkal nagyobb prioritást élvez a webdesign, ha kifejezetten a mobil élményre szabjuk, ami „a mobil először” kialakításának filozófiájához vezetett.

Alapvetően ez azt jelenti, hogy a papírra készített kezdeti vázlatkészítési és tervezési szakaszában a legjobb, ha először a webhely mobil elrendezésére koncentrálunk. Csak a webhely működéséhez szükséges legfontosabb tartalom jelenik meg a kisebb képernyőkön. Ez arra kényszeríti Önt egyszerűsítése elrendezését és kivágja az esetleges zavaró elemeket a kezdetektől. Gondoljon vissza a „hajtás feletti” tartalomra: ha először gondoskodik arról, hogy minden fontos információ elférjen a telefon kezdőképernyőjén, akkor biztosan tudja, hogy ez nagyobb képernyőkre is illeszkedik. Miután megszegezte az alapvető mobil elrendezést, elkezdheti díszítések vagy nagyobb képek hozzáadását az asztali képernyőkhöz.

A mobil elrendezése inkább egy függőleges kialakítást feltételez, amely inspirálja a görgetést, és nem az asztal szélessége. Ha mondjuk, hogy terméked oldalain az asztalok 3-as rácsában jelennek meg a listák, akkor általában a mobil elrendezése egyetlen oszlopként jeleníti meg őket..

Igen, ez azt jelenti, hogy alapvetően több elrendezést kell létrehoznia a webhely minden oldalán. Szerencsére minden jó webhely-készítőnek olyan érzékeny sablonokat kell biztosítania, amelyek ezeket az elrendezéseket automatikusan módosítják, így csak finombe kell állítania őket.

GYORS TIPP: Ügyeljen arra, hogy a webhely egyetlen elemének, különösen ha interaktív, kevesebb legyen 44px, 44px méretben. Miért? Ez a legkisebb olyan célpont, ahol az ujj még mindig pontosan megérinti.

7. Tartsa a dolgokat igazítva

Ha úgy tűnik, hogy az elemek szórványosan vannak elrendezve az Ön webhelyén, ez gyakran igazodási problémának tudható be. Képzelje el weboldalát grafikonos papírlapon. Ossza szét egyenletes oszlopokba, rajzolva például hat egyeneset. Most meg szeretné győződni arról, hogy az elemek bal széle el van-e osztva, és csak a hat függőleges vonalhoz igazodik.

8. Tartsd egyszerűen

Gyakran azt mondják, hogy a legjobb webdizájn észrevétlenül marad; csak a rossz tervezés hívja fel magára a figyelmet. Mint korábban említettük, minden weboldal legfontosabb szempontja egyszerűen a szövege. Ha olyan kiemelkedő tipográfiát tud nyújtani, amely örömmel olvasható, akkor valószínűleg nem kell sokkal többet tennie. A webhely túltervezésének megkísérelése csak rendetlenségbe és bonyolultabbá teszi a dolgokat.

Szüksége van a doboz árnyéka? Az őrült, díszes minták? A tucat szín? Valószínűleg nem.

9. Nagy nyitott terek

Tartalmának helyet kell lennie a légzéshez. fehér űr a modern weboldalak uralkodó dizájnválasztása: széles, nyitott semmi terek a tartalom közötti területek kitöltésére. Ez egy élvezetesebb módszer az információk megemésztetésére, és arra is ösztönzi a felesleges szövegek és képek eltávolítását, hogy a webhely tiszta maradjon.

Következtetés

A webdizájn lehet a szétszórt technológiai terület a tanuláshoz, a koncepciók a gyakorlathoz, a nyelvek a tanuláshoz és a művészi készségek a mesterképzéshez. Ezeknek az elemeknek csak tapasztalataik alapján lesz értelme, de máris jó úton vagy, ha megértetted a jó weboldal működésének alapjait. Remélem, hogy ez az útmutató szolgál kiindulási pontként, és bízik benne, hogy webhelyét saját kezébe veszi, és úgy építheti meg, ahogy csak egy vállalkozás ismeri a legjobban.

Születik egy tervező!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me