Hej designéři, řídíte své vývojáře vrstevníky šílené?

Je pravděpodobné, že máte nějaké návyky, které se netýkají zvláště kódu, a dělá život pro vývojáře, který s vámi pracuje na projektech. Chcete být lepší spolupracovník (a přítel)?

Naučte se, jak lépe komunikovat a navrhnout tak, aby vás vývojáři milovali. Urychlí projekty a usnadní práci. A to není ani otázka přinášení cukroví na schůzky. Vývojáři můžete oslovit tím, že děláte nepatrné změny ve způsobu práce.

1. Přiveďte vývojáře v časných ranních hodinách

Největší problém mezi návrháři a vývojáři je, že často pracují v bublinkách. Jednotlivci nebo týmy nezačnou mluvit o projektu, dokud nebude dokončen první návrh návrhu. Následně je návrhářovi předán developerovi.

Povzdech.

To prostě není způsob, jak pracovat. Návrháři a vývojáři by měli být od začátku zapojeni do společného projevu. Zatímco se návrhář může soustředit na barvy, písma a obrazy, může vývojář poskytnout přehled o použitelnosti, funkci a výkonu.

Návrháři a vývojáři by měli mít dobrou představu o tom, jak vypadá druhá strana. Návrháři by měli rozumět dostatečnému kódu a použitelnosti, aby mluvili s vývojáři a pochopili problémy; vývojáři by měli mít malou znalost teorie designu, aby mohli vytvářet návrhy, když návrhové nápady nejsou správné pro web.

2. Procvičte konzistentní správu souborů

Jedna z největších věcí, kterou může návrhář udělat, je příprava a balíček souborů stejným způsobem pokaždé.

Kolikrát jste otevřeli dokument aplikace Photoshop se stovkami nepomenovaných vrstev? Tento typ souboru nedávejte vývojáři. Každá vrstva a styl - bez ohledu na to, jaký software používáte - by měly být správně označeny.

Kolikrát jste otevřeli dokument aplikace Photoshop se stovkami nepomenovaných vrstev?

Styly, barevné vzory a typografie by měly být konzistentní v celém návrhu. (Tlačítko A by nemělo vypadat od stránky na stránku.)

Názvy souborů a stylů stejným způsobem pro každý projekt. Skupinové prvky podobným způsobem a používají konzistentní systém složek. Tímto způsobem vývojář nemusí muset vzít na vědomí, jak najít součásti a prvky s každým novým projektem.

3. Použijte písma Google

Jedním z největších výzev pro designové projekty, které zahrnují tiskové a digitální díly, je typografie. Nepoužívejte stolní písma pro tiskové projekty pro návrh webových aplikací a aplikací a předpokládejme, že budou fungovat. (Často ne.)

U digitálních projektů se rozhodněte pro fonty Google pro typografii. To znamená, že budete muset najít podobný typ písma pro web tak, aby odpovídal tomu, co používáte pro tisk. (To je v pořádku.)

Nedělejte to vývojáři to pro vás. Vybírejte srovnatelné písma Google a používejte je od začátku. Můžete dokonce zaznamenat tisk versus digitální písmo ve vašem průvodci styly.

Důvodem je jednoduché: vkládání písem se může trochu zklidnit. Navíc jsou písma Google zdarma a zajistí, že vám nevzniknou další náklady na projekt. (Zatímco se na to podíváte, zvážit to, že děláte totéž s ikonami a používáte balíček, jako je písmo Awesome, které umožňuje vývojářům vytvářet ikony ve stylu pomocí CSS, neimportovat banda obrazových souborů!)

4. Balík Image Assets

Zatímco jsme na téma obrazových prostředků, export a balení souborů správně je velmi důležité. Zatímco vývojář může otevřít a exportovat všechny obrazové soubory tak, aby vyhovovaly jejich potřebám, můžete se zeptat, co potřebují a dělat to na cestě.

Tím zajistíte, že na obrázcích získáte požadované plodiny a zároveň komprimujete soubory, které vám pomohou rychle načíst vaše webové stránky.

Nesnažte se to dělat sami. Požádejte vývojáře, jak mají být soubory uloženy, pojmenovány a komprimovány pro nejlepší využití.

5. Přemýšlejte o životním prostředí

Existuje jen tolik pomůcek a poměrů stran, které je třeba uvažovat při návrhu webových stránek a mobilních aplikací. Jako návrhář potřebujete znát velikost plátna, okraje, polstrování atd., Abyste vytvořili model, který je skutečně použitelný.

Předtím, než začnete kreslit, promluvte s vývojářem a ujistěte se, že víte, jak vypadá návrhové prostředí dříve, než začnete. Není to nic horšího než design, který vypadá úžasně ve Photoshopu nebo Sketchu a padá plochě ve výrobě.

Tyto věci musíte vědět předem:

  • Pokud rám má specifické vycpávkové specifikace v různých velikostech
  • Šířka žlabu mezi sloupci (a pokud se mění)
  • Velikost nejužší velikosti obrazovky, kterou bude vývojář kódovat

6. Ptejte se na otázky

To už bylo již zmíněno, ale komunikace mezi návrhářem a vývojářem je opravdu klíčem k tomu, aby to všechno fungovalo. Komunikace může provést nebo přerušit projekty, termíny dopadu a ovlivnit konečný návrh projektu a funkčnost.

Komunikace může dělat nebo přerušit projekty

Vezměte svého vývojáře na oběd. Poznejte je. Zeptejte se spoustu otázek. Pokud si nejste jisti, zda něco funguje nebo ne, prostě se zeptat. Vývojáři nejsou strašidelní lidé a je mnohem snazší odpovědět na otázku v rané fázi procesu, než je třeba přehodnotit a celou koncepci.

7. Zjistěte některé základní informace o zařízeních

Zatímco mluvíte s vývojářem a kladíte otázky, ponořte se hlouběji. Naučte se některé základy vývoje, pokud ještě nemáte tyto schopnosti ve svém designovém arzenálu.

Návrháři, kteří pracují na digitálních projektech, by se měli samy vylíčit v:

  • HTML a CSS (měli byste být schopni změnit velikost písma nebo barvu a pochopit, jak jsou různé)
  • Společné uživatelské vzory (návrh způsobu interakce uživatelů s obsahem)
  • Normy dostupnosti (takže váš návrh bude fungovat pro více uživatelů)
  • Jaké typy prvků je třeba sloužit jako obrázky a co je možné vytvořit pomocí čistého CSS
  • Jak fungují hraniční body v citlivých rozloženích
  • Trendy v návrhu webových stránek

Pravděpodobně nikdy nenapsáte kód, ale principy vývoje učení vám udělají lepší návrháře, protože pochopíte hodnotu nástrojů a pracovních postupů.

8. Použijte příručku "Životní styl"

Proces návrhu se rozšiřuje i na vývoj. Návrháři, musíte si uvědomit, že vývojář je pro proces návrhu stejně důležitý jako vy.

Z tohoto důvodu vytvořte průvodce "živým" stylem, který nejen obsahuje barvu a písma, ale také komponenty. Každý by měl mít přístup a aktualizaci dokumentu, jakmile projekt přichází do života.

Dobrý stylový průvodce pomůže všem, kteří pracují na projektu, udržovat konzistenci s vizuálními prvky, poskytovat kontext pro výběr návrhů, sloužit jako místo spolupráce pro projekt a pomáhat standardizovat kód. Živý styl průvodce umožňuje všem sdílet nápady a poskytovat poradenství v průběhu celého projektu. Není to jen dokument, který si někdo vytvoří těsně předtím, než bude návrh fungovat.

Vložte následující informace do příručky pro štíty, abyste co nejvíce využili:

  • Logo styly
  • Paleta barev
  • Paleta písem
  • Paleta ikon
  • Prvky navigační nabídky (a tam se propojí)
  • Možnosti rozvržení pro různé stránky
  • Útržky kódu, které se na webu opakovaně používají (například tlačítka)

9. Použijte mřížku

Respektujte mřížku. Při vytváření citlivých webových stránek je mřížka více než jen vodítkem pro umístění prvků na obrazovce, může také diktovat, kde se prvky pohybují v různých velikostech obrazovky a jak se sloupce hromadí a shuffle.

Mřížka vám může pomoci navrhnout a udržovat průtok. (Výzvou je, že nemůžete libovolně přerušit pravidla návrhu.)

Přemýšlejte takto: Váš návrh má čtyři obsahové bloky seřazené po celé obrazovce v řadě (se stejnými šířkami žlábků) na monitoru na plné obrazovce. Pak na tabletu se tyto bloky posunou do dvou sloupců se dvěma řádky. Na mobilním zařízení se posunou tak, že tvoří jeden sloupec se čtyřmi řádky.

Pochopení toho, jak mřížka ovlivňuje velikost objektů a jak se objekty posunou na různá zařízení, je důležitá, protože může diktovat, jak navrhnout obsah, který máte. Přemýšlejte znovu o stejném scénáři. Co kdybyste měli pět obsahových bloků? Bude to vyžadovat redesign, abyste zajistili, že vytvoříte konzistentní vizuální obrys.

10. Nenechte se jíst

Skutečným klíčem k tomu, aby se projekty snadno spojily, je flexibilita. Designové techniky a standardy pro web se stále mění. Vzhledem k tomu, že některé projekty vám umožňují být poutačnější pro detaily a neměnný, citlivý design ve skutečnosti nefunguje tímto způsobem.

Zlatým pravidlem, pokud jde o práci s vývojáři, je ... nebuď blbec.

Návrháři, s nimiž se snadno pracuje, získávají více respektu a lepší vztahy s vývojáři. To povede k lepším a úspěšnějším projektům. Mělo by to být samozřejmé, ale příliš často tam je spousta jerk-ish chování tam venku. Nespadněte do této pasti.

Buďte flexibilní, otevřte se a promluvte si s vaším vývojářem. Budou tě ​​milovat za to.