Navrhování prototypů 5 aplikací, které to lépe než Photoshop

Photoshop je populární nástroj s designéry a jeho rozšíření, jako je CSS3Ps a FontAwesomePS z něj činí dobrý nástroj pro vytváření prototypů webového designu stejně. Nicméně, pro tento účel to nebylo opravdu vytvořeno a vzhledem k tomu, že současné trendy se vyvíjejí s citlivým designem, CSS Pre-procesory, CSS Frameworky a grafikou nezávislou na rozlišení (SVG), Photoshop se stává méně relevantním pro web design.

Není třeba se bát, protože existuje spousta alternativních aplikací postavených nezávislými vývojáři, kteří pomohou vyplnit mezery. V tomto příspěvku se podíváme na tyto aplikace a zjistíme jak daleko jejich funkce vynikají ve srovnání s Photoshopem pro vytváření prototypů webového designu.

1. Webflow

Webflow umožňuje navrhovat webové stránky přetažením. Webflow vytváří rozvržení založené na Bootstrap mřížce, takže vaše webové stránky jsou připraveny na reakci. Webflow také přichází se sadou standardních webových komponent, jako jsou bloky, seznamy a formátování textu, které můžete přidat do pracovního prostoru Webflow..

Styly lze snadno přidat z postranního panelu a také můžete upravit vlastnosti prvků. Po dokončení návrhu můžete výsledky návrhu exportovat do kódu HTML a CSS. Můžete také sdílet svou práci s týmem.

2. Avocode

Avocode podporuje soubory PSD a umožňuje okamžitou úpravu a transformaci na funkční web s HTML a CSS. Avocode bude extrahovat všechna aktiva ve vašem projektu včetně CSS, obrázků a SVG (pokud existuje). Můžete snadno extrahovat CSS ve formě Méně, SASS nebo Stylus pro libovolnou vybranou vrstvu, protože byla integrována s CSSHat.

Avocode je navíc vybaven kontrolou revizí, která vám umožní vrátit se k vašim předchozím návrhům, jen v případě, že se něco pokazí.

3. Papoušek

Papoušek vám umožní navrhovat webové rozvržení a webové prvky, pokud pracujete na editoru obrázků jako je Adobe Photoshop. Můžete vytvořit sloupce nebo blokové oblasti, upravit jejich umístění a podle potřeby nastavit typografii. Papoušek vám umožní změnit styly více prvků na jednom místě. Knihovnu můžete také použít k uložení všech prvků pro pozdější použití.

Chcete-li vytvořit citlivý design, Macaw vám umožní nastavit zarážky a optimalizovat vaše stránky pro všechna zařízení. Když je proces návrhu dokončen, Macaw vám může vygenerovat správné HTML a CSS.

4. Skica

Skica je ideální pro navrhování rozhraní a webových stránek. Vytvoří objekty založené na vektoru namísto bitmapy. Když tedy změníte velikost plátna, váš návrh neztrácí kvalitu. Funkce jako „vestavěná mřížka“ vám pomohou lépe uspořádat objekt nebo umístění webového rozložení.

Skica navíc vykresluje písma podobná tomu, co je zobrazeno na Webkitu (myslím Chrome, Opera a Safari). Nemusíte se tedy starat o výsledky textu v obrázku, který není tak ostrý a přesný jako původní text zobrazený v prohlížeči. Skica může také exportovat CSS pro každý prvek ve vrstvě.

5. Antetyp

Antetyp je aplikace založená na vektoru, která je zaměřena na vizuální design, ideální pro vytváření prvků rozhraní, jako je přechod, stín, vnitřní stín, stín textu, styl ohraničení a zaoblené rohy. Antetyp také poskytuje stovky widgetů, které můžete použít přímo v projektu.

Chcete-li vytvořit citlivý design, můžete nastavit zarážky, které upraví velikost obrazovky. Každý prvek můžete také exportovat ve formě obrázku nebo CSS.