Vizuális tartalom iránya, amit tudnod kell
A a tartalom vizuális iránya egy kevésbé megvitatott, de döntő szempont a nagy átalakítású web design. Minden látogató új oldalt tölt be az első oldalakon - akár tudatosan, akár nem.
Az esztétikának is szerepe van, de inkább az a design általános érzése. Ezt az érzést befolyásolhatja a tér, a tipográfia, a szimmetria, de többnyire kapcsolatok oldalelemek között.
A tervezők a látogatókat szeretnék maradjon az oldalon és Görgess tovább figyelemfelkeltésükkel és érdekeltté téve őket. A tervezési elveknek mindig összpontosítaniuk kell a függvény előtt. Ez azt jelenti, hogy a tervnek meg kell felelnie kiegészítik a tartalmat, nem húzza be azt, mint utólag.
Ebben a bejegyzésben néhány tippet szeretnék bemutatni, hogyan lehet javítsa az elrendezéseket és a vizuális tartalmakat webhelyén.
Fókuszban a kompozíció
A weboldal minden egyes darabja épül az általános elrendezésre. Ez az általános elrendezés olyan kompozíciót hoz létre, amely követi a Gestalt-elmélet szabályait az egész mindig nagyobb, mint az alkatrészek összege.
Egy oldal egyes területei összeállnak egy egészet alkotnak. A tervezési elemeknek a gravitációs húzás a tartalomra; mindent az oldalon kell természetesen tovább vezeti a látogatókat, amíg el nem éri az oldal alját.
Ez az oka annak, hogy a tartalom különböző részei (látványok, szöveg, gombok, stb.) Közötti kapcsolat olyan fontos, hogy tervezzen.
A célod legyen az emberek ösztönzése böngészni a webhelyet saját dőlésüktől. Könnyebb mondani, mint tenni, de sokat tanulhat igazi példák tanulmányozása.
A Monkop honlapja kiváló példája a vizuális hierarchiának mind szöveges, mind vizuális. Rengeteg hely van az elemek között, és a tipográfia kiegészíti a márkás vektor illusztrációkat.
A görgetés során észre fogod venni egyenes vízszintes oldalblokkok színekkel, határokkal és grafikával osztva. Ezek épülnek tervezési minták szem előtt tartva konzisztenciát kínál az egész oldalon.
Az alsó rész felé a két oszlopos osztás képeket az egyik oldalon, a szöveget a másik oldalon. A képek is swap oldalak jobbra-balra-balra. Ez felhívja a figyelmet, és bontja a monotonitást a tipikus oldal még mindig természetes áramlás megtartása tartalmában.
A hasonló tervezési esztétika megtalálható a Picjumbo honlapján, a Photoshop és a Sketch felhasználók fotófotóinak céloldalán.
A kezdőlap a logóra és az előnézeti videóra összpontosít. A görgetés során egyéni animációkat észlel, amelyek az egész oldalon mozognak. Ez az animáció valóban rögzíti a figyelmet, és megkapja a nézőt érdeklődni szeretné a görgetést.
Összességében az oldal érzi magát nyisd ki és könnyen böngészhető. A tartalom vízszintes blokkokra osztva éles tipográfia és tiszta ikonok.
Tekintsük a különböző oldalelemek módját egyensúlyt, az elemek közötti tér, a színek közötti kontraszt és a különböző formák. Mindezek a dolgok szerepet játszanak a teljes összetételben. Minden oldal természetesen bizonyos súlyt vonz a tartalomra.
Nincs abszolút válasz, mert minden helyszínen más. Például, néhány navigációs link jobban néz ki, ha nagy és túlméretes. Mások jobban illeszkednek, amikor ők kicsi nagybetűvel.
Azt javaslom, hogy tanulmányozzon más weboldalakat a réstől. Tényleg elemezzük, hogyan állítják össze őket. Még próbálja meg újraépíteni az elrendezéseket, hogy lássa, hogy mely elemek kerülnek végül a „találkozásra”..
Típus Tervezési kérdések
A tipográfia tervezésének módja befolyásolja a tartalom irányát webhelyén. Ez a típus hierarchiával és a különböző oldalelemek tervezési stílusai mint a bekezdések, fejlécek, felsorolt listák, idézetek és speciális elrendezési elemek, mint az oszlopok vagy táblázatok.
Visuals befolyásolhatja az elrendezést is, ezért jó ötlet a tartalom megtervezésére természetes progresszióval. Írjon tartalmat oly módon, hogy lefelé áramlik, és megőrzi az embereket minden egyes bekezdésen keresztül.
A legnagyobb eszköz az Ön rendelkezésére áll a szemed tervezése. Ismerje meg, hogyan ismeri fel a tipográfiai elemek különbségeit, és hogyan viszonyulnak más oldalelemekhez. Hozzon létre kapcsolatokat az oldalrészek között, hogy megkülönböztesse a tartalmi területeket.
Néhány dolog, amit fontolóra vehet:
- Szövegméret
- Betűtípus család
- Szín kontraszt
- Oldalszakasz kapcsolatok
- Vonalmagasság és bekezdésmargók
- Letter távolság és a nagybetűk
Nézze meg például a Kampányfigyelő honlapját. A felső navigációs linkek kis kupakkal rendelkeznek. Egyéb fejlécek az oldalon kövesse ugyanazt az összes sapkát melyik egyforma érzetet teremt.
További nagyobb fejlécek vannak az oldalon sokkal fontosabb, és tényleg ugrik az oldalról. Csak egy tipikus fejléc kialakításán keresztül kell lennie mondja el a különbséget a fejléc és a párosított test másolása között.
A Kampányfigyelő tipográfiai stílusa kitűnő, és ők is természetesen keveredjen az elrendezésbe. Az ilyen eredmény elérése gyakorlatias, de minél többet próbál, annál könnyebb lesz.
Ha többet szeretne megtudni, ajánlom a következő linkeket:
- Tervezési elvek: Vizuális súly és irány
- Munka vizuális súlyokkal a tervekben
- 19 A kompozíció egyensúlyát befolyásoló tényezők
Irányadó tartalom
Értsd meg különböző típusú webhelyek van különböző módszereket a látogatóknak a webhelyen történő vezetésére. Például a céloldalak a látogatókat irányítják információcsere, kis ikonok, screenshotok, és beszámolók.
Más webhelyek, mint például a blogok, általában nem hoznak be az embereket a kezdőlapra. Legtöbb ember egy cikkoldalon, így a blogbejegyzések elrendezéseinek célja jelölje ki a fejlécet, és rajzoljon embereket a tartalomba. Ez az a hely, ahol a minőségi szövegírás jön létre, mert azt szeretné, hogy az olvasók minden szót lógjanak.
Szociális hálózatok és webes alkalmazások szükségesek minőségi felhasználói élmény, így ez egy kicsit más téma, de fontolja meg, hogyan tervezték a Facebook feedet ösztönözze a görgetést és a felhasználói interakciót.
Az Ön által használt tervezési módszerek az emberek böngészésére szolgálnak idővel változik. De általában a cél az, hogy vezesse a látogatókat vizuális tartalommal.
Vessünk egy pillantást a nyitóoldal és a blogtervezés a különbségeket.
A Cactus egy statikus webhelygenerátor az OS X-hez szorosan követi az Apple tervezési stílusát - rengeteg hely és vékony sans-serif betűtípus.
A tartalom oszlopokba, blokkokba és szövegdarabokba rendeződik egyszerű grafikával. Ugyanezek az esztétika is közös az Apple termékeivel, így a Mac-felhasználók élvezik ezt a designstílust.
A termékkel kapcsolatos információk - beleértve a funkciókat és a beállítást is - a főoldalon találhatók. Az oldal maga ösztönzi a görgetést egyedi tartalom, alapvető ikonok és a bal / jobb tartalomblokkok váltakozó oszlopmintája révén.
A cél az, hogy információt nyújtsunk meglévő felhasználók számára, és eladni új felhasználó Kaktusz ötlete.
Most hasonlítsa össze a tervezést a The Next Web kezdőlapjával. A tartalom sokkal szórványosabb egy blog kezdőlapján, mert ott van sok különböző hozzászólási téma.
A téglalapok egy rácsrendszert hoznak létre, amely magába foglalja több bejegyzést egyetlen elrendezésbe. A cél itt az hogy a felhasználók olvassák a tartalmat az oldalon. Nem számít, hogy a látogatók valamit letöltenek-e, de nem számít, hogy vannak-e ragaszkodj, hogy olvasson valamit.
A módja annak, hogy az emberek olvassanak Jó képek és fülbemászó fejlécek. A TNW nagyszerű munkát végez, és elrendezésük az emberek böngészésének megőrzése érdekében az oldalsávon és az utótartalom területen a kapcsolódó bejegyzések bélyegképeivel.
A látogatók irányítása egy adott cselekvésre minden helyszínen eltérő. De sokat tanulhat, ha megvizsgálja, milyen más sikeres webhelyek készülnek, és megtanulják, hogyan kell másolni.
Trust Your Eyes
Az egyedi tervezési tulajdonságok analitikusan magyarázhatók, de az egyes helyszínek végrehajtási változásai. Hős kép "További görgetés" hivatkozással nem ugyanaz minden webhelyen.
A tervezés a tanulás nagyon sok vizuális folyamat. A tervezési szemed a legfontosabb szempont. Neked kell látni a dolgokat azonosítani vizuális hierarchia. Ha más webhelyeken láthatja, akkor a saját webhelyein is megismételheti.
A legjobb tanácsom csak bízz a szemében. Hozzon létre egy listát kedvenc webhelyeiről, és 5 percet töltsön az egyes oldalak böngészésével. Írja le a kedvenc elemeit az oldalon, és hogyan befolyásolja a tervezést. Ez segít ezeket a fogalmakat UI / UX nézőpontból internalizálja, nem a felhasználó szemszögéből.
Ne félj, hogy próbáld ki a dolgokat! Senki sem volt jó a tervezésen éppen a designról szóló cikkek olvasásával. Igen, segítenek - sokat segíthetnek. De te szükség nak nek hozzon létre semmit a semmiből, hogy megtudja, mit művek és akkor nem.
Tanítsd szemedet úgy, hogy megtanulod a kívánt webhelyelrendezéseket, és létrehozd őket. Idővel felépít egy mintakönyvtárat az elmédben, ami sokkal könnyebbé teszi az új webhelyek tervezését.
Csomagolás
Remélhetőleg ezek a tippek elkezdhetik kezdeni, és megadnak egy alapvető ütemtervet. Nem könnyű webes tervezővé válni, de a világnak tehetségre van szüksége, és soha nem volt könnyebb tanítani magadnak ezeket az alapvető fogalmakat.
Tanulmány az oldalakkal ellátott weboldalak legjobb példái. Vonat a szemét, hogy felismerje a kapcsolatokat, és hamarosan fejleszt a szükséges készségek megismételni ezek a kapcsolatok a saját munkádban.
