5 nejlepších nástrojů pro odpovědný design
Nechte mě začít tím, že v tomto seznamu nebudou obsahovat nástroje pro navrhování typu point-and-click (myslím, že Adobe Edge Reflow). Důvod je dost jednoduchý, věřím, že jsou pro každého špatné; projektantů, klientů, programátorů ... všichni trpí.
Není to otázka kvality výstupu kódu těmito programy. Není to proto, že to dělá design "příliš snadné". Je to proto, že bez ohledu na to, jak dobře jsou tyto programy, budou vždy omezovat lidi, kteří je používají.
Budou omezeny, a to ani tím, co program může dosáhnout, ale tím, co si myslí, že to dokáže. Pokud o tom přemýšlí, průměrný uživatel je pravděpodobně srovná s nástroji, jako je PowerPoint a / nebo libovolným počtem tiskových programů, které znovu padnou do starých myšlenek. V tom je problém. Nástroje pro publikování webových stránek se vždy pokusí použít staré procesy na nové technologie.
Skutečně webově orientovaný pracovní postup je ten, který zahrnuje základní koncepty a technologie, na kterých je web vybudován. Jistě, můžete použít libovolný počet vizuálních nástrojů k vytvoření webů, které jsou technicky reagující, ale chyběli byste.
Nejde o adaptabilní uspořádání. Jedná se o zpřístupnění informací co nejvíce lidí. Některé věci, jako je program Edge Reflow, prostě nedokážou. Stručně řečeno, musíte napsat kód.
Proto jsou nejlepším nástrojem, který vám pomůže v rychlém designu, a to ty nástroje, které vám pomohou pochopit a využívat webové technologie, plánovat své webové stránky důkladně, psát lepší kód efektivněji a testovat / prezentovat vaše reagující návrhy klientům v kontextu.
Začněme zřejmým:
1) Váš prohlížeč
Ne. Dělám si legraci. To je doslova nejdůležitějším nástrojem, který máte, protože vám ukazuje přesně to, co vaše webové stránky vypadají za vašich konkrétních podmínek.
Došlo k rozsáhlé debatě o tom, zda je design v prohlížeči lepší než návrh v editoru obrázků, jako je Photoshop nebo GIMP. Dovolte mi to vyřešit pro vás ...
Budou uživatelé vašeho webu procházet ve Photoshopu? Editor obrázků může vytvářet hezké obrázky, neumírají skutečné zážitky. Použijte editor obrázků pro úpravu obrázků. Pomocí prohlížeče můžete vytvářet webové stránky.
Je načase, abychom ztratili své klienty z hyper-podrobných mockups, které si zvykli. Jak se změní web a naše procesy se stanou tekutějšími a iterativními, musíme pokračovat.
Nainstalujte alespoň jeden prohlížeč s každým hlavním vykreslovacím modulem a získejte nějaké rozšíření pro vývojáře. Zvykněte si, abyste se dívali na zdrojový kód tak, jak to váš prohlížeč vidí, protože budete tady chvíli.
2) Výkresová aplikace Disku Google
Technicky, téměř jakýkoli editor obrázků na bázi vektorů by mohl dělat práci při vytváření rámců vašich webových stránek a aplikací. Mám sklon k tomu, abych nejdříve vytvořil verzi mé stránky pro stolní počítače, vytvořil kopii souboru, změnil velikost plátna a odtamtud odjede. Použití vektorů usnadňuje rychlé změnu velikosti a uspořádání prvků, když jste stále ve fázi plánování.
Upřednostňuji aplikaci pro kreslení Disk Google z několika důvodů:
Funkce sdílení a spolupráce: Společnost Google sdílí informace lépe než jen o všech ostatních. S komentářem v kontextu, současnou úpravou a integrací Hangout jsem zamilovaná.
Automatické vodítka: V každém výkresu jsou vodítka automaticky vytvořena na základě rozměrů každého objektu, který jste vložili do dokumentu. Díky tomu je snadné zobrazovat dokumenty v konzistentní velikosti, což je skvělé pro designéry, jako je já, posedlé v síti.
Jelikož tyto drátěné rámce sdílím s klienty, je to profesionální hledisko konzistence velkým plusem. A přesto nejsem nucen k těm průvodcům. Vidím to jako dobrou alternativu k mockup aplikacím, které se snaží vás přinést k mřížce.
Oh, a je to zdarma. Potřebuji říci víc?
3) Prototypy stylu
Na základě stylových dlaždic, Stylové prototypy jsou dodávané v prohlížeči, které vám pomohou poskytnout svým zákazníkům představu o tom, jak vypadají jejich typografické, barevné a uživatelské prvky. Vzhledem k tomu, že je určen k prohlížení v prohlížeči, bude po vytvoření webové stránky méně nesrovnalostí.
Dále bych chtěl, aby stylové prototypy pomohly našim klientům psychicky oddělovat pojmy UX a estetika. A opravdu, všechno, co pomáhá našim klientům lépe pochopit proces tvorby webových stránek, může být jen dobrá věc.
4) Responsinator
Responsinator je jednoduchý nástroj, který zobrazuje vaše webové stránky v různých velikostech. Velmi napodobuje několik různých velikostí zařízení a kontextu. Tento nástroj není pro vaši výhodu. Chcete vidět, jak vypadá váš web v menších velikostech? Změňte velikost okna prohlížeče. Ještě lepší je, získáte skutečné mobilní zařízení a proveďte skutečné testování.
Tato webová aplikace se nejlépe používá k tomu, aby svým klientům ukázala rychlé přiblížení toho, co budou vypadat v jiných kontextech než v stolním nebo přenosném počítači.
Opět existuje mnoho nástrojů, které by mohly dělat stejnou práci jako Responsinator, a stejně tak účinně, předpokládám. Tuto volbu jsem si vybral, protože zobrazuje několik siluet zařízení po sobě, aby bylo možno snadno přečíst.
5) Adobe Edge Inspect
Teď je to pro tebe. Pokud máte mobilní zkušební laboratoř (a čím dřív si můžete udělat, tím lépe) Edge Inspect synchronizuje všechna vaše zařízení, aby zobrazila stejnou stránku najednou. Obnovte stránku na jednom zařízení a aktualizujete je všechny.
Na rozdíl od ostatních v tomto seznamu není tento volný. Nicméně, pokud si můžete dovolit dostatek mobilních zařízení potřebovat takové řešení, je to pravděpodobně stojí za to peníze.
Závěr
Jako vždy je nejdůležitějším přínosem váš mozek. Tyto nástroje a jiní, jako jsou ti, vám mohou pomoci jen na cestě. Vybral jsem si tyto, protože provádějí velmi specifické funkce, které mi pomáhají při navrhování reaktivních stránek. Oni neomezují, co mohu udělat.
Nejlepší nástroje jsou opravdu ty, které zůstávají mimo cestu.
Používáte tyto nástroje? Jaké jsou vaše 5 nejlepších nástrojů pro citlivý design? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, obrázek nástroje přes Shutterstock.