Webfejlesztési koncepciók Minden webes tervezőnek meg kell értenie

Sokat kell mondani a tervezők és a fejlesztők közötti különbség. Megengedett, hogy sok tervező / fejlesztő hibrid van megértsék az érme mindkét oldalát, de kevés és messze van.

A kreatív projektek fejlődnek megfelelő kommunikáció. Ez azonban nehéz lehet, ha a tervezők és a fejlesztők nem biztosak abban, hogyan kell beszélj egymással. Nem hiszem, hogy a tervezőknek tudniuk kell, hogyan kell írni a megfelelő JavaScript-et, sem a fejlesztőknek nem kell a tipográfia kiválasztását. De van néhány alapvető témák azt hiszem, mindkét irányba megy.

A következő témakörök a saját személyes felvételem létfontosságú webfejlesztési ötletek, amelyeket minden tervezőnek meg kell értenie. Mint tervező / fejlesztő, tudom, hogy milyen zavaró lehet mindkét terület tanulmányozása. De mindig érdemes megtanulni a tanulást, mert a világos megértés javítja a kommunikációt és a tervezőt sokkal értékesebbé teszi egy kreatív csapat számára.

Frontend kód viselkedése

A webes tervezők gyakran úgy gondolják, hogy a tervezési tehetségükkel párosulnak a frontend készségek. Ez egy melegen vitatott téma, főleg azért, mert ott van nincs helyes válasz.

A tervezőknek meg kell tenniük azt, amit kényelmesek. Ha ez csak vizuális tervezési munkát jelent, akkor legyen az. Ugyanakkor a frontend technológiák rövid megértése ugyanazt a tervezőt hozhatja létre intuitívabb a fejlesztők számára eszközkészlet létrehozásakor.

Úgy vélem, minden tervezőnek legalább meg kell értenie a frontend fejlesztésének három alapvető nyelve (HTML, CSS és JS), valamint azok használatának módja. Például a legtöbb legördülő menü a JavaScript-re támaszkodik, de CSS-alapú alternatívák is vannak.

Amikor egy tervező egy legördülő menüt készít, gondolkodhatnak a a kódexen keresztül történő végrehajtásának összetettsége. A tervező, aki megérti, hogy melyik elemeket igényel a JavaScript, jobban felkészülhet arra, hogy megértse, mit kérnek a fejlesztőktől.

Ez lehetséges anélkül, hogy megtanulnánk egyetlen kódsor írását.

CSS készül stílusa a weboldal. A CSS animáció és a CSS túlnyomórészt statikus létrehozza a legtöbb képet egy oldalon. A legtöbb dinamikus tulajdonság a JavaScript segítségével jönnek létre.

Ha megértheted ezt a szakadékot, tudatos erőfeszítéseket fog lélegezni a tervezési munkában. Azt is kényszeríti az UX mozgástervezőit, hogy mérlegelje, hogy mennyi munkát végez az interfész animálásához.

Érzékeny technikák

Minden webdesignernek legalább ismernie kell a kifejezést reszponzív dizájn. Ez lehetővé teszi a webhelyek számára alkalmazkodni a különböző képernyőméretekhez, mindegyikhez más elrendezés tartozik. A készülék méretei új elrendezés alkalmazása esetén pontok által meghatározott, hozzáadódik a (z) (egyik) CSS fájlhoz.

A töréspontokat a bizonyos pixelszélesség (és / vagy néha magasság), vagy minimális vagy maximum, amelynél az elrendezés alkalmazkodik a képernyő méretéhez. Tehát egy 1080px-os monitoron egy érzékeny elrendezés másképp néz ki, mint egy 320px-os okostelefonon.

Ha meg szeretné tekinteni, hogy a pontok hogyan működnek a valós webhelyeken, nézze meg a Média lekérdezések weboldalát.

A tervezői feladata, hogy megvizsgálja, hogy az egyes töréspontok milyenek lehetnek befolyásolja a makettet. Lehet, hogy több feladatot terveznek, mindegyiket különböző képernyőméretekbe illeszthető.

Miután megértette, hogy a CSS töréspontja meghatározza az elrendezés megváltoztatásának feltételeit, sokkal könnyebb lesz az eszközök átadása a dev csapatnak.

Gondolj moduláris kialakításra

A fejlesztők mindig akarnak újrafelhasználási kód amennyire csak lehetséges, mivel ez a megközelítés a fejlesztést teszi lehetővé kevésbé verbose és csökkenti a fájlméreteket - valójában ez egy fontos kód optimalizálási technika.

Moduláris kialakítás leírja a webhelyek kiépítésének módját “modulok” ez lehet idővel újrahasznosítható. Gondolj gombok, bemenetek, fejlécstílusok vagy blokkjegyek képzeletbeli stílusokkal.

Ha te tervezési elemek modulárisan, a fejlesztők számára könnyebb kódolni az elrendezést újrafelhasználható CSS ​​osztályok. Mindig jó ötlet arra gondolni, hogy hol lehet ésszerűen újrahasználható ugyanazok a színek, textúrák és oldalelemek, de okoskodnia kell nem károsíthatja az általános esztétikát.

Még jobb, ha te kijegyzetel mely elemeket másolta át különböző maketteken, így a fejlesztők képesek jelölje meg a webhely ezen részeit ismétlődő kóddal - a fejlesztés gyorsabbá és egyszerűbbé tétele.

Moduláris kialakítás kapcsolódik atomtervezés, mindkét megközelítés inkább a fejlesztők felé irányul. azonban megjelenítés segíthet megérteni, hogyan működik a kód, így ha küzd ábrázolja a moduláris felépítést nézze meg ezt a bejegyzést, hogy néhány példát láthasson.

Ismerje meg a retina képeket és az SVG-t

Általában a tervező feladata, hogy készítsen képeket, rögzítse a szükséges képeket és a design ikonok a semmiből. Ez azt jelenti, hogy a tervezők kizárólag a felelősek a vizuális eszközök szállítása a fejlesztők végül kódolnak az elrendezésbe. Ezért fontos megérteni retina méretek és a átadja a retina által támogatott eszközöket a fejlesztőknek az utolsó makett (ek) mellett.

Erősen ajánlom ezt a Smashing Magazine-t, ha többet szeretne megtudni a retina design munkafolyamatairól. Retinize Ez egy ingyenes gyűjtemény a Photoshop-akciókból, amelyek automatikusan létrehozza a retina verziókat eszközeit.

A legtöbb tervező már tudja, hogy támogatja @ 2x kép, de az újabb iPhone 6+ eszközöknek vannak @ 3x felbontás. Néhány projekt azonban nem zavarja a @ 3x képméreteket, ezért beszéljen a projektvezetőjével, mielőtt véglegesítené az eszközöket.

Egy utolsó dolog, amit figyelembe kell venni az SVG előrehaladása az interneten. Minden modern böngésző támogatja az SVG-t, amely a vektor-alapú képformátum. Ez azt jelenti, hogy az SVG ikonok lesznek automatikusan minőségi veszteség nélkül skálázható, így nincs szükség retina eszközökre az SVG grafikához.

Nem minden kreatív csapat hajlandó SVG-vel menni a webes tervezéshez. Biztosan böngészők támogatják őket, de bizonyos esetekben nehézkesek is lehetnek. Ezért a kommunikáció létfontosságú a sikeres tervező / fejlesztő kapcsolat szempontjából.

Beszélje meg a vektorgrafika használatának előnyeit és hátrányait, és döntse el, hogy melyik a legjobb az egyes projektek esetében. Azáltal, hogy megértjük ezeket a funkciókat, egyértelműen kommunikálhat a fejlesztőkkel, és még a retina támogatás elrendezését is segítheti.

Ismerje meg a hozzáférhetőséget

Fokozatos javítás és kecses degradáció ugyanaz a probléma két különböző módja: hozzáférhetőség. Nem minden felhasználó lesz az eszközökön, vagy olyan böngészőket futtat, amelyek a webhely dinamikus jellemzőinek 100% -át támogatják.

Ezeknek a felhasználóknak még mindig meg kell kapniuk a tapasztalat, és ezt megfelelő kódolással kell kezelni. Egyes képernyőolvasók figyelmen kívül hagyhatják az összes JavaScript és CSS kódot, de a webhelyet még mindig működnie kell.

Nemrég tettem egy postafedelet fokozatos javítás részletesen, mivel ez az előnyben részesített fejlesztésem. Fokozatos javítás nagyon alapvető funkciókkal kezdődik, ezután többre is működik “fejlett” jellemzők.

Kecses lebomlás az a ellentétes megközelítés hol minden főbb funkciót először terveztek, akkor a fejlesztő dönti el, hogyan kezelje ezeket a funkciókat, ha a felhasználó nem támogatja a JavaScriptet vagy a CSS-t.

Nem valószínű, hogy egy tervezőt felkérnénk, hogy készítsen makettet bármelyik ilyen helyzetben. De fontos, hogy a tervezők megértsék ezeket a kifejezéseket és mit jelentenek, mert ők befolyásolják a fejlesztési folyamatot. Ez különösen igaz olyan projektekre, ahol a hozzáférhetőség nagy aggodalomra ad okot.

Zárva

Vannak olyan témák, amelyeket átugrottam, mert nem kötelezőnek tartom őket. Verzióvezérlés, hibakezelés és JavaScript animációk Néhány bonyolultabb téma, amit a tervezők érdemes beágyazni.

De őszintén, az ebben a hozzászólásban megfogalmazott pontok több mint segítenek a tervezőknek, hogy megértsék a fejlesztési csapat követelményeit. Azáltal, hogy csak a webes fejlesztés felületét vesszük át betekintést nyer ez segít az ötletek kommunikálásában és a termelés során felmerülő problémák szimpatizálásában.

Ha több kapcsolódó tartalmat keres, tekintse meg ezeket a bejegyzéseket:

• Hogyan lehet hatékonyan kommunikálni a fejlesztőkkel (Smashingmagazine.com)
• Segíts a tervezőknek és a fejlesztőknek, hogy megtanulják megérteni egymást (Uie.com)
• Tanulás a kódhoz Az előnyöket UX Designer-nek adják (Jessicaivins.net)