Tervezői útmutató a stílusvezetők és a stíluslapok használatához
Létrehozása a márkás identitás nem könnyű feladat. Kemény erőfeszítést igényel, de ez is az egyik legkedvezőbb kreatív feladat. Webes projektek gyakran a márkajelzés összekapcsolása az interfész tervezéssel. Ez zavaró lehet, mert mindkét területen annyit kell tennie. Stílusvezetők és stílus csempe nagyszerű erőforrások a webes tervezők számára, és bár hasonló hangzásúak, azok megvalósíthatók két különböző feladat.
Ebben a bejegyzésben szeretnék mindkettőbe belépni, és fedezni a kreatív eszközökből származó előnyöket. Nem mindenkinek szüksége lesz (vagy szeretne) stílusvezetőket vagy stíluscsempéket létrehozni. De minden tervezőnek legalább meg kell értenie, hogy mi ezek, és hogyan működnek.
Stílus útmutatók az internethez
Elolvastam a stílus útmutatókkal kapcsolatos véleményeket. Néhányan azt mondják, hogy ezek digitális makettek, míg mások azt mondják, hogy a kód alapú stílusvezetők a leghasznosabbak.
Akárhogy is, a stílus útmutató célja ugyanaz a weben, mint bármely más projekt. Meghatározza következetes minták, felhasználói felület modulok és kreatív beállítások a tervezési folyamat során használt Nagyon specifikus, és bizonyos elemekre pixel-tökéletes méréseket adhat meg, vagy szabadon maradhat, és vizuális példákat adhat.
Egyetlen stílusos útmutatót nem lehet csinálni. Az egyetlen rossz út az, hogy egyszerűen hozzon létre egy erőforrást mások nem érthetik meg.
A cél az, hogy hozzon létre egy olyan eszközt, amelyre szükség lesz álljon az idő próbája. Kellene lennie szerkesztésre nyitva áll ha új erőforrások jönnek létre. Akkor is hozzáférhetőnek kell lennie mindenkinek, aki csatlakozik a csapathoz, hogy könnyedén merüljön el az útmutatóba.
Egy stílusvezetőnek kell lennie a projekthez szükséges részletességgel. Ez általában magában foglalja újrafelhasználható eszközök, például tipográfia, gombok, színminták, textúrák és közös oldalelemek.
Nemrégiben lefedtük élő stílusvezető eszközök amelyek segítenek az életstílus-útmutatók felépítésében. Ezek az élő útmutatók többet jelentenek a frontend fejlesztők számára, de ugyanolyan hasznosak lehetnek a tervezők számára. Erről a témáról többet olvashat ebben a Smashing Magazine-bejegyzésben.
Az abszolút kedvenc erőforrásom a StyleGuides.io. Ez lefedi a a webes stílusvezetők alapjai, beleértve élő példák és esettanulmányok.
A MailChimp mintakönyvtára az egyik legjobb példa a StyleGuides.io webhelyen. Ez egy online élő stílus útmutató definiálja a MailChimp hálózatát, tipográfiáját és az oldalelemeket.
Ha egy webes cég stílustervezőjét tervezi, akkor mindennek az a célja, hogy mindent online, de létrehozhat belső útmutatók, és tartsa őket egy helyi intraneten, vagy tárolja őket magántulajdonban a felhasználói bejelentkezési oldal mögött. A stílusvezető elérésének módja tényleg nem számít. Mindannyian ugyanazt a célt szolgálják, hogy bizonyos színeket, mintákat és látványokat közvetítsenek egy webprojekt témájának felel meg.
Ha többet szeretne megtudni a témáról, olvassa el ezeket az egyéb bejegyzéseket a stílus útmutatókon:
- Elülső stílusvezetők (24ways.org)
- Hozzon létre egy webhelystílus-útmutatót (Creativebloq.com)
- Hogyan készítsük el a Perfect Web Design Style útmutatót (Dtelepathy.com)
Elágazás a stíluscsempékbe
Stílusos csempe egy másik vadállat. Ezek a lapok a korai tervezési fázisban használt kreatív eszközök amikor egy konkrét esztétikát próbálunk szögezni.
A Style Tiles weboldalt Samantha Warren készítette, és mindent meg kell tudnia. Van nincs konkrét sablon egy stíluscsempe tervezéséhez. De Samantha példái használják címsorok és bekezdéstípusok, hivatkozások, minták, és lehetséges színválasztások együtt a márkás logó.
Stílusos lapokkal végzett munka során végső soron a cél 2-3 különböző stílusú csempe az ügyfélnek vagy a kreatív igazgatónak. Ezek a lapok részletesebb, mint egy hangulati fórum, még sokkal kevésbé részletes, mint egy teljes makett.
A csempéknek eléggé részletesnek kell lenniük ahhoz, hogy megértsék a a weboldal identitása és hangulata. Samantha bátorítja melléknevek használatával minden csempe részletes leírását.
Az ügyfelek nézd át a különböző lapokat, és válassza ki a kedvenc darabjaikat. Ez időt takarít meg a tervezés során, mert az ügyfél már látott eszközöket szeretne, így kevesebb esélye van a komoly módosításoknak.
Íme egy nagy idézet a stíluscserepek webhelyéről:
A stíluscsempék és a belsőépítész eszköztárának összehasonlítása meglehetősen az analógia. Nem akarsz erőfeszítést egy pixel-tökéletes makettre öntöttetni, hogy az ügyfél felismerje, hogy a legtöbb színt és betűtípust utálják.
Ehelyett használja a stíluscsempéket a kereséséhez közös téma vagy vizuális nyelv az egész webhelyen. Ez magában foglalhatja branding / igazolvány de lehet még Felhasználói felület jellemzői, például a legördülő menük vagy a CTA gombok.
Használd ezeket az értékeket értékesíthető eszközök korai szakaszában. Miután befejezte a teljes makettet, valójában nem kell többé hivatkozni a stíluslapkára. Mindazonáltal az elején a stíluscsempék döntő szerepet játszhatnak a kreatív folyamatban menteni a tervező időt és az ügyfélnek számos lehetőség közül választhat.
Ha akarod jobban beilleszkedjen a stíluscsempékbe nézd meg ezeket a kapcsolódó hozzászólásokat.
- Stílus csempe és hogyan működnek
- Stílusos csempe: alternatívája a teljes formatervezési mintáknak
- Stíluslapok létrehozása: Egy egyszerű megközelítés a tervezési irányhoz
Stílus útmutatók és stíluslapok
A stílusvezetők és a stíluslapok közötti különbség homályos, de határozott. A stílus útmutató sokkal több részletes és kell használni a folyamatos hivatkozási útmutató a kreatív csapat számára. A stílus csempe használható a moodboard nak nek Az ötletek vizuális megjelenítése magadnak vagy az ügyfélnek. Gyakran szoktak vizsgálja meg az ötleteket, és ha a projekt befejeződött, nem szolgálnak nagy célnak.
A stíluslapok gyakran sokkal durvaabbak az élek körül, és használják őket kizárólag a korai kreatív folyamatban. Egy stílus útmutatót kell használni teljes tervezési folyamat során és a későbbiekben még később is más tervezők számára, akik az oldalon dolgozhatnak.
Mindkettő előnyei és hátrányai. Stílusos csempe gyors és szórakoztató, de tiszavirág életű a természetben. A stílusvezetők megtalálhatók alapos és úgy viselkednek, mint a vizuális dokumentáció, de ők is sok munkát igényelnek.
Tehát melyiket kell használni? Végül a projekttől függ.
Kisebb projektek mint például a kisvállalkozói weboldalak jobban működnek a stíluscsempékkel. Egy kis üzlethelyiség egész stílus útmutatójának kiépítése túl sok munkát és számlázható órát igényel. Ez valószínűleg nem éri meg a legtöbb ügyfél költségét.
A nagy projekt mint a NY Times újratervezése előnyös lenne mind a stíluslapok, mind a stílusvezetők számára.
Nyelv és hangulat keresése egy új projekt számára mindig értékes folyamat. Ez teszi a stíluslapokat tökéletes szinte minden forgatókönyvhez.
Ön is kaphat ilyen eszközök létrehozása nélkül. Néhány tervező megy közvetlenül a drótvázakból nak nek részletes makettek. Egyes ügyfelek még csak nem is akarnak stílusstílust, mert nem fogják használni.
Dolgozzon projektenként, és döntse el, hogy mi a legjobb az egyik számára.
Élő példák
Tekintsük át ezt a borítással példák mind a stílusvezetők, mind a stíluscsempék. A Dribbble böngészése során találtam meg ezeket a terveket, és azt hiszem, hogy példaként szolgálnak a saját stílusvezetőkben vagy stíluscsempékben kívánt minőségben..
Stílus útmutatók
Ezt a hihetetlen Airbnb stílusú kalauzot Derek Bradley készítette. Ez nagyon egyszerű, de világosan illusztrálja főbb minták, színek és oldalelemek a tervben megtalálható.
Itt van egy sokkal nagyobb digitális stílus útmutató, amit Naoshad Alam tervező készített. Ez a példa sokkal szervezettebb val vel a színek, a tipográfia, az űrlapok, az interfész elemek és a többi felhasználói felület jellemzői.
A részletesebb stílus-útmutatók mindezeket a tervezési elemeket az interneten helyezték el, és tartalmazzon kódrészleteket mindegyikhez.
Cupi Wong tervező ezt az útmutatót az AfterShip számára készítette el. A tipográfia, a gombok, a színválasztások és a közös oldalelemek gondosan megtervezettek, és szekciókba szervezve.
Ez az internetre is átvihető, és az online referencia-dokumentációban sokkal nagyobb mértékben épülhet fel.
Greg Dlubacz UI tervező megosztotta saját felhasználói felületének útmutatóját egy webprojekthez. Ez a dolog komolyan hatalmas. A teljes képernyős előnézet 21 000 képpont magas!
Abszolút az egyik legjobb digitális stílusvezető, amit valaha láttam. Ez a portál tagjai számára elérhető online dokumentációs oldalra is átvihető.
Stílusos csempe
Az UI / UX tervező Abdus Salam megalkotta ezt a stíluscserépet egy bioélelmiszerbolt honlapjára. Ez nagyon egyszerű lapos design elemek, néhány kisebb felhasználói felület, és a szín paletta.
Adrian Cantelmi tervező igazán részletes volt az eladási stílusában. Színei és tipográfiája is megtalálható, de magában foglalja vektor illusztrációk.
Ezek a vektorok segítenek meghatározza a márkát, a hangulatot és az általános színsémát honlapján.
A világbajnokság-tanácsadók újratervezték a saját stíluscserépét, amely nagyon alapvető jellemzőkkel rendelkezik. Néhány ikon, néhány színválaszték, páros gombok. Egyszerűség a játék neve.
Ha megérzi, hogy milyen a webhely ránézésre akkor igazad van.
Íme egy szórakoztató példa az utazási projekthez használt elutasított stíluslapra. A Brennan Gleason tervezője csak egy kis mintát tartalmaz a lapkáról, de még mindig érzi magát a weboldal légkörében.
Végső szavak
Ha a weben keresztül keres, még több példát, tippet és erőforrást talál épület stílusvezetők és stíluslapok. De remélem, hogy ez a cikk lehet egy alapozó mindkettőn, és folyékonyan fogja megérteni és megteremteni ezeket a tervezési eszközöket.
