Koncepty vývoja webu, ktoré by mali všetci web dizajnéri pochopiť

Je veľa čo povedať rozdiel medzi dizajnérmi a vývojármi. Udeľuje sa, že existuje veľa návrhárov / vývojárskych hybridov, ktorí dokážu pochopiť obe strany mince, ale sú len málo a ďaleko.

Kreatívne projekty sa darí správna komunikácia. Avšak to môže byť ťažké, keď dizajnéri a vývojári nie sú istí, ako to hovorte s druhým. Nemyslím si, že dizajnéri potrebujú vedieť, ako napísať správny jazyk JavaScript, ani vývojári by nemali vyzdvihnúť typografický výber. Ale niektoré sú základné témy že myslím, že ide obe strany.

Nasledujúce témy sú moje osobné vzatie životne dôležité myšlienky vývoja webu, ktoré by všetci dizajnéri mali rozumieť. Ako dizajnér / vývojár sám, viem, ako mätúce to môže študovať obidve oblasti. Ale vždy stojí za to sa učiť, pretože jasné pochopenie zlepšuje komunikáciu a robí dizajnéra oveľa cennejšie pre kreatívny tím.

Správanie kódu frontu

Web dizajnéri sú často predpokladá, že majú frontend zručnosti spolu s ich dizajnérskym talentom. Toto je horko diskutovaná téma, väčšinou preto, že existuje žiadna správna odpoveď.

Dizajnéri by mali robiť to, čo oni sú pohodlné. Ak to znamená len robiť vizuálnu dizajnovú prácu, tak to tak. Stručné pochopenie technológií frontend však môže robiť toho istého dizajnéra intuitívnejšie pri vytváraní prostriedkov pre vývojárov.

Verím, že každý dizajnér by mal aspoň pochopiť troch základných jazykov vývoja frontend (HTML, CSS a JS) spolu s tým, ako sa používajú. Napríklad väčšina rozbaľovacích ponúk sa spolieha na JavaScript, ale existujú aj alternatívy iba pre CSS.

Keď návrhár vytvára rozbaľovacie menu, môžu premýšľať o tom zložitosť implementácie prostredníctvom kódu. Návrhár, ktorý chápe, ktoré prvky vyžadujú JavaScript, môže byť lepšie pripravený na pochopenie toho, čo žiadajú vývojárov o vybudovanie.

To je možné bez toho, aby ste sa naučili písať jediný riadok kódu.

CSS je vytvorené štýlu webovej stránky. Je to väčšinou statické okrem animácie CSS a CSS vytvára väčšinu vizuálov na stránke. Väčšina dynamických funkcií sú vytvorené pomocou jazyka JavaScript.

Ak pochopíte tento rozdiel, dôjde k dizajnovej práci. Takisto prinúti návrhárov pohybov UX zvážiť, koľko práce ide do animácie rozhrania.

Odpovedajúce techniky

Každý webový dizajnér by mal tento termín aspoň poznať citlivý dizajn. To umožňuje webovým stránkam prispôsobiť rôznym rozmerom obrazovky, ku každému z nich patrí rozdielne usporiadanie. Rozmery zariadenia pri použití nového rozloženia sú definované zlomovými bodmi, pridal (jeden) súbor (y) CSS.

Body zlomu sú špecifikované a určitú šírku pixelov (a / alebo niekedy výšku), či už minimálne alebo maximálne, pri ktorých sa rozloženie prispôsobí veľkosti obrazovky. Takže odpovedajúce usporiadanie bude vyzerať odlišne na monitore s rozlíšením 1080 pixlov než na telefóne s veľkosťou 320 pixlov.

Ak chcete zistiť, ako fungujú kritické body na reálnych stránkach, skontrolujte webovú lokalitu Media Queries.

Vašou úlohou ako dizajnéra je zvážiť, ako môže každý bod zlomu ovplyvniť model. Môžete mať za úlohu navrhnúť niekoľko zložiek inštalácia do rôznych rozmerov obrazovky.

Akonáhle ste pochopili, že hraničný bod CSS definuje podmienky, kedy sa rozloženie zmení, budete mať oveľa jednoduchšie dodanie týchto prostriedkov tímu dev.

Myslite modulárne s návrhmi

Vývojári vždy chcú kód opätovného použitia pokiaľ je to možné, keďže tento prístup je vývojom menej verbózne a znižuje veľkosť súborov - v skutočnosti je to dôležitá technológia optimalizácie kódu.

Modulárny dizajn opisuje spôsob vytvárania webových stránok mimo “moduly” môže byť opätovne používané v priebehu času. Zamyslite sa nad tlačidlami, vstupmi formulára, štýlmi záhlavia alebo blokovými kvótami s elegantnými stylingmi.

Ak ty konštrukčné prvky modulárne, stáva sa pre vývojárov jednoduchšie kódovať rozloženie opakovane použiteľné triedy CSS. Je vždy dobré premýšľať o tom, kde môžete rozumne opätovne používať rovnaké farby, textúry a prvky stránky, ale musíte byť na to šikovný neškodiť celkovú estetiku.

Je to ešte lepšie, ak vy opatriť poznámkami ktoré prvky ste skopírovali v rôznych modeloch, aby vývojári mohli označte tieto časti stránky opakovaným kódom - čím je vývoj rýchlejší a jednoduchší.

Modulárny dizajn sa týka atómový dizajn, oba prístupy sú skôr zamerané na vývojárov. však vizualizácia vám pomôže pochopiť, ako funguje kód, takže ak sa snažíte vizualizovať modulárny dizajn pozrite si tento príspevok a uvidíte niekoľko príkladov.

Pochopte Retina Images & SVG

Zvyčajne je to návrhárka práca na prípravu obrázkov, zachytenie všetkých potrebných fotografií a návrh ikon od začiatku. Znamená to, že návrhári sú výhradne zodpovední poskytovanie vizuálnych prostriedkov že vývojári nakoniec kód do rozloženia. Preto je dôležité pochopiť veľkosti sietnice a prechádza aktíva podporované sietnicou vývojárom spolu s finálnymi maketmi.

Veľmi by som odporučil tento príspevok Smashing Magazine, ak sa chcete dozvedieť viac o pracovných postupoch dizajnu sietnice. Retinize Je to bezplatná kolekcia akcií programu Photoshop, ktoré môžu automaticky vytvoriť verziu sietnice vášho majetku.

Väčšina návrhárov už vie, že ich podporujú @ 2x obrázky, ale nové zariadenia iPhone 6+ majú @ 3x rozlíšenie. Niektoré projekty sa však neobťažujú s veľkosťou obrázkov @ 3x, takže pred ukončením akéhokoľvek majetku sa porozprávajte s vedúcim projektu.

Posledná vec, ktorú je potrebné zvážiť, je postup SVG na webe. Všetky moderné prehliadače podporujú SVG, ktorý je a vektorový obrazový formát. To znamená, že ikony SVG budú automaticky stupnice bez straty kvality, takže pre SVG grafiku nepotrebujete aktíva sietnice.

Nie všetky kreatívne tímy sú ochotné ísť so SVG pre web dizajn hoci. Podporujú ich prehliadače, no v niektorých prípadoch môžu byť aj ťažké implementovať. To je dôvod, prečo je komunikácia nevyhnutná pre úspešný vzťah dizajnérov / vývojárov.

Diskutujte o klady a zápory používania vektorovej grafiky a rozhodnite sa, čo bude najlepšie pre každý projekt. Prostým porozumením týchto funkcií budete môcť jasne komunikovať s vývojármi a dokonca im pomôcť kódovať rozloženie pre podporu sietnice.

Pochopte dostupnosť

Progresívne vylepšenie a pôvabná degradácia sú dva rôzne spôsoby riešenia toho istého problému: prístupnosť. Nie všetci používatelia sa budú nachádzať na zariadeniach alebo prevádzkovať prehliadače, ktoré podporujú 100% dynamických funkcií webových stránok.

Títo používatelia by mali stále dostať skúsenosti, ktoré fungujú, a to je potrebné zaobchádzať s riadnym kódovaním. Niektoré čítačky obrazovky môžu ignorovať všetky kódy JavaScript a CSS, ale webové stránky ešte musí fungovať.

Nedávno som spravil príspevok progresívne vylepšenie ako je to moja prednostná metóda vývoja. Progresívne vylepšenie začína veľmi jednoduchými funkciami, potom funguje až na viac “pokročilý” Vlastnosti.

Pôvabná degradácia je opačným prístupom kde všetky hlavné funkcie sú navrhnuté ako prvé, potom vývojár rozhodne, ako zvládnuť tieto funkcie, ak používateľ nepodporuje JavaScript alebo CSS.

Je nepravdepodobné, že by projektant bol vyzvaný, aby urobil mockups pre niektorú z týchto situácií. Je však dôležité, aby dizajnéri pochopili tieto pojmy a čo znamenajú, pretože oni ovplyvňujú vývojový proces. Platí to najmä pre projekty, pri ktorých je prístupnosť veľkou obavou.

V závere

Niektoré témy som preskočil, pretože ich považujem za nepovinné. Ovládanie verzií, spracovanie chýb a animácie v jazyku JavaScript sú niektoré zložitejšie témy, na ktoré sa dizajnéri môžu chcieť ponoriť.

Pravda, body uvedené v tomto príspevku budú viac než pomôcť dizajnérom pochopiť požiadavky vývojového tímu. Stačí skimming povrchu vývoja webu získať prehľad ktoré vám pomôžu komunikovať nápady a sympatizovať s problémami, ktoré sa vyskytujú počas výroby.

Ak hľadáte ďalší súvisiaci obsah, pozrite si tieto príspevky:

• Ako efektívne komunikovať s vývojármi (Smashingmagazine.com)
• Pomôžte projektantom a vývojárom naučiť sa navzájom chápať (Uie.com)
• Učenie sa vám prináša výhody ako návrhár UX (Jessicaivins.net)