10 tervezési koncepció, amelyet minden webfejlesztőnek ismernie kell

Az elmúlt években a vizuális tervezés alapjaival foglalkozó workshopot tartottam fejlesztőknek. Mint a legtöbb webes dolog esetében, a tervezési ismeretek és az érdeklődés változatos szintjét tapasztaltam mind a hallgatóktól, akik részt vettek a műhelyemben, mind a fejlesztőktől, akikkel dolgoztam.

Ez a lista azon fogalmak rövid listája, amelyeket szeretnék, ha a fejlesztők, akikkel dolgozom, megértenék a dizájnt. Arra hivatott, hogy a fejlesztőket jó irányba terelje, bevezetésként a tervezéssel kapcsolatos gondolkodásba és kommunikációba.

01. A tervezés nemcsak vizuális

A tervezés nemcsak a homlokzatot; ez az alatta lévő személyiség. Valamilyen oknál fogva a dizájn megbélyegzéssel rendelkezik, mivel ez csak a weboldal vizuális része. Ez nem lehet hamisabb vagy félreértettebb. A dizájn a teljes élmény attól a pillanattól kezdve, amikor a felhasználók belépnek az Ön webhelyére, egészen a távozásuk után is.



A dizájn az, hogy az emberek hogyan és miért akarják használni a webhelyet; a helyszín betöltésének sebessége; a lebegés, kattintás és érintés közötti kölcsönhatás; valamint az új funkciók és tartalom megjelenítésének ütemét. Mindezek a fogalmak magukban foglalják a dizájnt.

Mivel a tervezés több, mint vizuális szempont, és kihat az egész élményre, a projektben részt vevő minden ember tervező. Minden csapattag, aki meg akarja fedezni a felhasználó interakcióját a weboldallal, tervező. A kezelőfelületnek, a háttérprogramnak és a projektmenedzsmentnek mind a tervezésre kell gondolnia.

02. Legyen felhasználóközpontú

A felhasználók a legfontosabbak, és mindig a webhelyével vagy alkalmazásával kapcsolatos döntések élén kell állniuk. A kialakításoknak lehetővé kell tenniük a felhasználók számára, hogy céljaikat gyors, hatékony és legfőképpen örömmel érjék el.

A műhelyemben arra késztetem a hallgatókat, hogy készítsenek egy kezdeti tervrajzot, miután kiválasztottak egy projektet, amelyen dolgoznak. Noha egyszerű útmutatásokat adok nekik, hogy kövessék őket, többnyire a felhasználóra összpontosítanak: kik ők, mit csinálnak az Ön webhelyén, és milyen érzéseket szeretne érezni, amikor meglátogatják, valamint amikor elmennek?

Bár ez jól működik a műhely kicsi projektjeinél, nagyobb projektek esetében nagyobb alapokon kell gondolkodnia ezen az alapítványon. A tervezők személyek, történetmesélés és egyebek segítségével jelzik, hogy kik a webhely felhasználói és mit akarnak csinálni az oldalon. Merüljön el ezekben az irányelvekben, bármilyen formában veszik is igénybe a projektet, és használja azokat az összes tervezési döntés befolyásolására.

A tervezőnek nem kellene teljes felhasználói élményt nyújtania; a tervezőknek csak vezetniük kellene. A tapasztalatokat ehelyett az egész csapatnak meg kell osztania (ha van ilyen). Számos olyan esetben támaszkodtam a fejlesztőkre, akik segítenek kitalálni a legjobb felhasználói élmény létrehozásának legjobb módját. Nemcsak a határaikat ismerik jobban, hanem minden lehetőségről világosabb elképzelésük is van.

03. A tervezés részletesen

A részletek képesek „jó” kialakítást „nagyszerűvé” tenni. A felhasználói élményben a részletekre való figyelem különbség lehet az elégedett és a bosszantó felhasználó között. A megfelelő kék árnyalatú, vagy a linket egy bizonyos szöveg köré tekerni nagyon fontos. A részletek problémája az, hogy könnyű belekerülni. A részletekre való túl korai összpontosítás felesleges és lelassíthatja a folyamatot. Fontos tudni, hogy mikor kell konkrét részletekre összpontosítani, vagy mikor hasznos a teljes, nagyobb kép vizualizálása.

04. Tervezéskor gyakran rajzoljon

Az előnyök nak,-nek felhasználói tapasztalatok felvázolása vannak jól dokumentált . A vázlatkészítés segít átgondolni a tartalmat, a hierarchiát és a folyamatot többek között. A vázlatok olcsóak, könnyen elvégezhetők és nagyon gyorsak. Harminc másodpercenként képesnek kell lennie egy új ötlet létrehozására. A vázlatkészítés az egyik legjobb módja az elrendezéssel, a felhasználói tapasztalatokkal és a webhely felhasználói folyamatával kapcsolatos ötletek közlésének.

A vázlatok lehetővé teszik az ötletek gyors iterációját, és sok időt takarítanak meg modellekkel vagy kódokkal kísérletezve

A vázlatok lehetővé teszik az ötletek gyors iterációját, és sok időt takarítanak meg modellekkel vagy kódokkal kísérletezve

Az első főiskolai professzorom ezt hallgató koromban belém ültette. Addig nem engedte használni a számítógépet, amíg vázlatokon oldalakat nem látott. A fiatal tervezők hajlamosak spórolni a vázlatokkal, vagy teljesen kihagyni őket. Még mindig azt látom, hogy sok tervező túl korán tér át a vázlatokról a magasabb hűségű kialakításra anélkül, hogy előbb feltárná az összes lehetséges megoldást.

A vázlat készítésének az a legjobb része, hogy bárki meg tudja csinálni. Mindenki tudja, hogyan kell rajzolni a dobozokat, vonagló vonalakat és nyilakat. Ezek azok az alapeszközök, amelyekre a tervezés megkezdéséhez szükség van - ez valóban ilyen egyszerű. Nem keresünk felbecsülhetetlen értékű műalkotásokat, és biztosan nincs szüksége képzeletbeli művészi diplomára. Csak tudni kell világosan közölni vázlatait és a mögöttük álló gondolkodási folyamatot.

05. Használjon szóközt

Úgy tűnik, hogy ez a legnehezebb koncepció a fejlesztők számára: a megfelelő mennyiségű üres terület legnagyobb előnye a felhasználó számára egy kis kikapcsolódás. A szünetek fontosak az információk feldolgozása szempontjából, különösen akkor, ha elegendő mennyiségű feldolgozásra van szükség. Ezért vannak bekezdéseink és mondataink a futó szöveg egyetlen, hosszú blokkja helyett.

A legfontosabb annak biztosítása, hogy a szóköz köze legyen az oldal többi objektumához, beleértve a másik helyet is. Ha egyetlen oszlopa van a térköznek, akkor ellenőrizze, hogy van-e még egy üres oszlopnyi térköz a kiegyensúlyozásához.

A függőleges térhez csak a törzs betűméretének töredékeit használja. Hajlamos vagyok egyszerűbbé tenni a dolgokat, és 0,25-ös skálát használok, de vannak ilyenek számos más mérleg, amelyet használhat . Például, ha a törzs betűmérete 16px (1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. Ez lehetővé teszi a betűméretek kiválasztását a skála egyszerű felfelé és lefelé mozgatásával, ahogy én nagyobb vagy kisebb típust akar.

Az Apple nagyon jól használja a szóközöket, hogy kiemelje és bemutassa termékeit

Az Apple nagyon jól használja a szóközöket, hogy kiemelje és bemutassa termékeit

06. A rácsok nem csak CSS keretrendszerek

Őrült, igaz? A rácsok először a dizájnban kapták meg a hangsúlyt, amit ma hívnak Nemzetközi tipográfiai stílus .

Rácsot kell használni:

  • Hozzon létre kapcsolatokat az objektumok között
  • Biztosítson egy alaprendszert a vizuális igazításhoz
  • Segítsen vízszintes és függőleges ritmus létrehozásában
  • Segítsen az optikai egyensúly megteremtésében

Mindezek a fogalmak együtt működnek, hogy a lehető legjobban hozzanak létre egy jobb vizuális rendszert a felhasználók számára. A választott rács befolyásolja a tervezés egységét; A legkönnyebben megvalósítható rács kiválasztása nem feltétlenül a legjobb választás a tartalom és a felhasználók számára. Végül ez még mindig csak egy eszköz, és csak olyan jó lesz, mint az azt használó személy.

Don

Ne csak a rácsra gondoljon CSS keretrendszerként. Ez egy tervező eszköz, amelyet céllal kell használni

07. Amikor minden hangsúlyos, semmi sem

Olyan ez, mintha egy embercsoporttal beszélgetnénk, akik mind egyszerre kiabálnak, hogy különböző dolgokat tegyenek. Csak egy elemnek kellene hangsúlyt fektetnie az oldalra: a legfontosabbat. Ha egyetlen elemre helyezi a hangsúlyt és világos hierarchiával rendelkezik, akkor az olvasók számára áramlást biztosít, és a kívánt irányba kell mutatnia őket.

08. Tartson egy inspirációs mappát

Tartson egy galériát azokról a dolgokról, amelyek vizuálisan inspirálnak. Ezek lehetnek fotók, videók, plakátok, pólók és weboldalak; bármi, ami ötleteket kelthet az adott tervezési probléma megoldására.

Ez nemcsak referenciapontként működik, hanem arra is kényszerít, hogy folyamatosan figyelje és értékelje a dizájnt. A tervdarabok kiválasztásának és mappába mentésének egyszerű folyamata arra kényszeríti Önt, hogy használja ezeket a tervelemző izmokat.

Tartson inspirációs galériát. A fényképektől a pólókig, az, hogy hivatkozhat fényképekre, tervekre vagy bármi másra, elősegítheti a saját tervei ötletét

Tartson inspirációs galériát. A fényképektől a pólókig, az, hogy hivatkozhat fényképekre, tervekre vagy bármi másra, elősegítheti a saját tervei ötletét

09. A tervezés a probléma megoldásáról szól

A tervezéshez a megoldást igénylő problémák halmazaként kell közelítenie. Az oldalon található minden oknak meg kell indokolnia, hogy ott legyen, és megoldania kell egy speciális problémát a felhasználó vagy a tervezés szempontjából. Hajlamos vagyok eltávolítani a szolgáltatásokat a funkciókészletből, amíg a megoldandó probléma nagyon nyilvánvalóvá nem válik.

Néha nehéz megmondanunk a problémákat, nem pedig megoldáshoz kell ugranunk. A visszafelé történő munka ebben valóban segít. Például annak eldöntésekor, hogy valaminek pirosnak kell-e lennie, álljon meg, és gondolkodjon el azon okokon, amelyekre először is vágyott. Kérdezd meg magadtól: mit próbálok elérni azzal, hogy pirosra teszem? Mi volt a gondolkodási folyamatom? Lehet, hogy vissza fog térni oda, ahol elkezdte, de jobban meg fogja érteni, miért és mit csinál.

10. Tudja, hogyan kell beszélni és bírálni a dizájnt

A tervező bosszantásának biztos módja az, ha elmondja nekik, hogy egy piros blokknak kéknek kell lennie, hogy egy szövegrészt át kell helyezni, vagy hogy nagyobb legyen a logó. Szerintem megvan az ötlet.

A konstruktív visszajelzés legjobb módja a tervezéssel kapcsolatos problémákra való felhívás. Rendelkezzen bizonyítékokkal a felhasználók, a webhely áramlása, a tervezési célok és a vizuális elvek alapján, hogy támogassa a tervezéssel kapcsolatos problémákat. Ez alátámasztja véleményét arról, hogy mit kell megváltoztatni, és erős alapot nyújt a felhasználó számára elért sikerekhez, valamint a tervezéshez.

Remélhetőleg a tervező veled fog együtt dolgozni, hogy megoldást találjon a problémára. Ez a lehetősége, hogy javaslatot tegyen egy állásfoglalásra; csak ne kérje, hogy nagyobb legyen a logó.

Források és workshop

Ha érdekesnek találta, nézze meg bátran az én oldalamat tervezés a fejlesztői erőforrásokhoz és tanösvények megtervezése . Szívesen látlak benneteket bármelyikben is online változat vagy a személyes változat a műhely.

Szavak: Kyle Fiedler

Kyle Fiedler a thinkbot tervezője, aki segíti a Rails és az iOS alkalmazások felépítését. Valamilyen formában a dot-com boom (és a mellszobor) óta tervez és fejleszt, és azóta sem állt le.

Ez a cikk eredetileg itt jelent meg net magazin 244. szám

Tetszett ez? Olvassa el ezeket!

Van egy remek tervezési tipp? Oszd meg a kommentekben!