Szerezze meg a tökéletes weboldalelrendezést 27 lépésben

1/2 oldal: Webhely elrendezése: Az első lépések és a munkafolyamat megtervezése

A weboldal elrendezésének megtervezésének nem kell bonyolultnak lennie, különösen, ha ismeri az elkerülendő általános hibákat. Ebben a bejegyzésben végigvezetjük azokat a lépéseket, amelyeket meg kell tennie a tökéletes weboldal-elrendezés elérése érdekében. Kitérünk arra, hogy mit kell tudnia és mit kell tennie minden új weboldal-készítőnek egy új projekt megkezdése előtt, és mire kell figyelnie, hogy ne csúszhasson fel.

Ezek a lépések nemcsak a tervezési szempontokat, hanem az általános munkafolyamat-tippeket is átfogják. Ezen az oldalon megvizsgáljuk, hogyan kell elindulni, valamint a tervezés munkafolyamatának legfontosabb lépéseit és tovább 2. oldal Általános tanácsokat talál a weboldal elrendezésének megközelítéséhez, és tippeket a projekt összeállításához. Kövesse ezt a tanácsot, és hamarosan elindul a professzionális weboldal-elrendezések elkészítéséhez. Érdemes lehet továbbolvasni Atomic Design , mint a webhely strukturálásának módja.

Még mindig gazdát keres? Vessen egy pillantást a legjobb weboldal-tárolási szolgáltatások és a legjobb weboldal-készítők épp most. És itt nem foglalkozunk vele, de ne felejtsd el a hibaoldalaidat! Vessen egy pillantást a legjobb 404 oldal inspirációra.



Elkezdeni

01. Határozza meg, mit jelent a siker

személy laptop

Ismerje meg a tervezés céljának gyökerét

A munka megkezdése előtt tudnia kell, hogy mit tervez. A webhely leírása mellett tudnia kell, milyen elvárások vannak vele szemben. Vegyünk például egy híroldalt. Mi a cél? Lehetséges, hogy a lehető legtöbb hirdetési megjelenítést hozza létre, vagy a legjobb olvasási élményt nyújtja? Hogyan fogják mérni ezeket a célokat?

A jó újratervezések nem feltétlenül a legkellemetlenebbek, de azok, amelyek idővel javítják a teljesítményt. A tervezés megkezdése előtt az ügyfelekkel való beszélgetés kulcsfontosságú mindezek meghatározásához. Meg kell tanulnod, hogy milyen aggályaik és céljaik vannak az írott SOW-on (a munka kimutatásán) túl.

02. Ismerje meg az aktuális helyet

Gyakran előfordul, hogy a tervező részvétele egy projektben nem elszigetelten történik. Az ügyfelek nem mindig keresik fel Önt, hogy kezdjenek valamit a semmiből. A legtöbb esetben meg kell értenie a jelenleg működő rendszert, és ha a projekt célja a kihívás, akkor keresse meg a lehetőségeit annak fejlesztésére vagy annak követésére, ahogy van.

A lehetőségek korlátlanok. A tervezés szempontjából kulcsfontosságú megérteni a helyét, ha gyorsan akar mozogni, és felismeri az innovációs lehetőségeket, szemben azzal, hogy kihívást kell tennie a kialakult kérdésekre, és úgy kell megjelennie, mint aki képtelen megérteni a követelményeket.

03. Korán ossza meg a terveket az ügyfelekkel

Interaktív koncepció vagy dizájn „megjelenés és hangulat” felvetésekor biztosítani kell, hogy Ön és az ügyfelek is a lehető leghamarabb ugyanarra az oldalra kerüljenek. Kerülje el, hogy túl sok időt fordítson egy koncepcióra, mielőtt megosztja azt az ügyféllel.

A kezdeti koncepció jóváhagyása után pihenhet egy kicsit és elkezdheti a gyártást. De az első koncepció bemutatása után, ha az ügyfél nem szeret bele, akkor elég visszajelzést kell gyűjtenie ahhoz, hogy egy második, megfelelőbb koncepciót az asztalra vigyen.

Tervezési munkafolyamat

04. Először kezelje az elrendezést

Ez nagyon nyilvánvalónak tűnik, de túl gyakran tapasztaltam, hogy a tervezők egyenesen a munkájukba ugranak, mielőtt átgondolják a problémát, amelyet megpróbálnak megoldani. A tervezés a problémák megoldásáról szól, és ezeket a problémákat nem lehet színátmenetekkel vagy árnyékokkal megoldani, sokkal inkább jó elrendezéssel és világos hierarchiával.

Gondoljon a tartalomra, az elrendezésre és a funkcionalitásra. Győződjön meg arról, hogy ezek a gondolatok összhangban vannak-e az ügyfél céljaival, és ossza meg velük nyugodtan.

05. Kezdje el megrajzolni a legfelső szintű keretrendszert

Webhely elrendezése: UX vázlat

Az alap drótváz segít az elrendezés strukturálásában (kattintson a jobb felső ikonra a nagyításhoz)

Amikor arra kérnek, hogy készítsen megjelenést és érzetet egy weboldal elrendezése iránt, első lépésként elő kell állítanom egy olyan felső szintű keretrendszert, amely megoldja az összes tervezési problémát. A keretrendszer az a felhasználói felület, amely körülveszi a tartalmat, és segíti a felhasználót a műveletek végrehajtásában és az abban történő eligazodásban. Tartalmazza a navigációt és az alkatrészeket, például az oldalsávokat és az alsó sávokat.

Ha ebből a szempontból közelíti meg a tervét, akkor egyértelműen meg fogja érteni, hogy milyen elvárásokra lesz szüksége a kezdőlapon túli szakaszok megtervezésekor.

06. Rács hozzáadása

rácsok a különböző képernyőkön

Példa egy 978-as rácsra 10 képpontos alapvonallal

Olyan egyszerű, mint amilyennek hangzik. Mielőtt bármit tervezne, szüksége van egy megfelelő rácsra. Nincs érvényes kifogás a rács nélküli indításra - és ha nem, akkor biztosíthatlak arról, hogy a tervezés nem fog olyan jól kinézni. A rács segít a különböző szakaszok elrendezésének strukturálásában; végigvezeti Önt a képernyőméret speciális követelményein, és segít adaptív sablonok létrehozásában, így következetes a térköz és a sok más tervezési kérdés tekintetében.

Ennek megismeréséhez olvassa el ezt az útmutatót minden képernyőmérethez alkalmazkodó rács létrehozása .

07. Válassza ki a tipográfiát

Weboldal elrendezése: tipográfia

Alapszabály, hogy legfeljebb két különböző betűtípust használjon a weboldal elrendezésében

A különböző betűtípusok és színek feltárása a projekt felfedezési szakaszának része. Általában azt javaslom, hogy ne használjon kettőnél több különböző betűtípust egy webhelyen, bár ez valóban annak jellegétől függ. Válasszon könnyen olvasható betűtípust a nagy szövegdarabok számára, és legyen játékosabb a címek és a cselekvésre ösztönzés terén. Inspirációt keres? Vessen egy pillantást a tökéletes összefoglalónkra betűtípus párosítás vagy azok listája ingyenes betűtípusok . Ne féljen a nagy betűtípusok használatától, és legyen kreatív és következetes a tipográfia használatakor.

08. Válassza ki a színtémát

Weboldal elrendezése: színek

Az olyan eszközök, mint a Színvadászat, a paletta kiválasztásában segítenek

A betűkészlet kiválasztásának folyamata során el kell kezdenie feltárni, milyen színeket fog használni a felületen, a hátterekben és a szövegben. Korlátozott szín- és színkészletet ajánlok az általános felhasználói felülethez.

Fontos, hogy ezeket következetesen alkalmazza a weboldal elrendezésében, az egyes elemek funkcionalitásától függően. Gondoljon az olyan oldalak elrendezésére, mint a Facebook, a Twitter, a Quora és a Vimeo. A kezelőfelület mellett nem szabad korlátozni az illusztrációkat vagy a grafikai részleteket, feltéve, hogy azok nem zavarják az alkatrészek működését.

Ha elakad, nézze meg a listánkat a legjobb színes eszközök a webdesignerek számára .

09. Egyszerűsítse az elrendezést

Webhely elrendezés: B-orsó kezdőlap

Az egyszerű elrendezések általában könnyebben eligazodnak

Minél egyszerűbb a webhely felépítése, annál könnyebben navigálhatnak a felhasználók. Minden szakasznak el kell mesélnie; okra és végeredményre van szüksége a felhasználó számára. Az elrendezésnek segítenie kell a tartalmat abban, hogy kiemelje az adott történet legfontosabb darabjait.

A valóságban nem lehet túl sok cselekvésre ösztönzés egy oldalon - mindennek el kell jutnia ahhoz a végső 'Mit tehetek itt?'

Gondoljon a legegyszerűbb elrendezésre, amelyet el lehet képzelni egy egyszerű cél érdekében, és kezdje el hozzáadni a szükséges összetevőket. A végén meg fog lepődni, milyen nehéz egyszerűségét megőrizni.

10. Finomítson minden alkatrészt

Microsoft Music tervezés

Claudio Guglieri a Microsoft Music felhasználói felületének tervezésén dolgozott

Kezeljen minden alkatrészt úgy, mintha egy tervpályázaton lehetne bemutatni. Ha minden komponensre figyel, az egész több lesz, mint a részek összege. Be kell vallanom, hogy ez a tanács nem az enyém. Egy korábbi ügynökségnél hallottam, és megdöbbentett, hogy ez a kijelentés mennyire egyértelmű és igaz volt.

Minden alkatrészt úgy kell megtervezni, mintha önállóan állhatna, mint valaha a legjobb alkatrész. Előfordul, hogy a tervezők a webhely bizonyos részeit az utolsó helyre hagyják a tennivalók listáján, és végül nem mutatnak nekik sok tiszteletet.

11. Vezesse végig az ügyfeleket a megoldásain

Kerülje a munkája nagy leleplezését. Az ügyféllel való gyakran történő kommunikáció egyik célja az, hogy elkerülje a meglepetéseket, amikor munkáját feltárja. Azokban az időkben, amikor bemutattam a fejlődésemet, hasznosabbnak találtam, ha egy útra vittem őket, és megmutattam, honnan indultam, azokat a szempontokat, amelyek ezen vagy azon a kihíváson navigálva voltak, és hová értem végre, ahelyett, hogy csak bemutattam volna az utazás vége kontextus nélkül.

Ezzel megállapítja, hogy vagy egyetértenek a következtetéseivel, vagy az áttekintés során egy ponton rámutat egy hibára vagy egy további változatra, amelyet esetleg nem vett figyelembe. Mindkét esetben beszélgetést folytat, és az ügyfél nagyobb befektetést érez, mivel részesei a folyamatnak.

12. Gondolkodj mozgásban

magányos bolygó weboldal

A mozgás elengedhetetlen az interaktív élmények megtervezésekor

A mozgás elengedhetetlen az interaktív élmények megtervezésekor. Egyetlen formatervezési minta sem önmagában, sem statikus összeállításként nem értékelhető; minden komponenst a rendszerrel való kapcsolata határoz meg, és ennek a kapcsolatnak a mozgását megfelelően továbbítani kell. A mozgás szemlélteti az elrendezés tartalmának vagy interaktív állapotainak dinamikus hatásait. A második célra azt javaslom, hogy vigye tovább a terveket a prototípus készítésébe.

13. Prototípus, prototípus, prototípus

magányos bolygó webhelye a mobilon

A prototipizálás a legjobb módszer az interakciók tesztelésére

A prototípusok készítése a legjobb módszer az interakciók és a technológiák tesztelésére. Sok van belőlük prototípus-készítő eszközök amelyek manapság megkönnyítik, és nem kell kódoló gurunak lenned a hatékony prototípusok létrehozásához. Ez egy újabb módja annak, hogy izgassa ügyfelét és fedezze fel olyan koncepciókat és ötleteket, amelyek egyébként sok magyarázatot igényelnek.

Következő oldal: Tervezési megközelítés és csomagolás

  • 1
  • két

Aktuális oldal: Webhely elrendezése: Az első lépések és a munkafolyamat megtervezése

Következő oldal Weboldal elrendezése: Tervezési megközelítés és csomagolás