Vytvořte rozšířený návrhový systém s WebFlow.

Skutečné problémy v životě: Proč je organizace velké organizace? „Ovládání designu“ není tady?

Cítili jste se někdy takto? Jako vedoucí vedoucího nebo vedoucí týmu se podíváte na webové stránky a aplikace společnosti a poté si musíte povzdechnout ... proč každý produkt vypadá odlišně od různých společností? Tým A používá tmavě modré tlačítko. Tým B používá jasně modrou a tým C právě vydal novou funkci s modrým tlačítkem! Toto je problém nazývaný „design nekonzistence“ nebo nekonzistentní design designu. Což je noční můra, s níž se velké organizace musí pravidelně setkat

Problém není jen to. Představte si:

• Design: Musím sedět a navrhnout novou sadu UI téměř pokaždé, když začnu nový projekt. Ztrácet čas a vytvořit něco, co by mělo být standardizováno
• Vývojáři: Musí se sedět a napsat kód pro základní komponentu (jako jsou tlačítka, formulář, karty) opakovaně, i když by měl být vytvořen pouze jednou a lze jej použít.
• Produktový manažer: Bolest hlavy a komunikace pro všechny týmy, aby pochopily, co je „nejnovější verzí“ designu?
• Uživatelé (end -ser): matoucí při používání produktů, které vypadají jinak. Snižte spolehlivost a dobré zkušenosti pro značky.

To vše jsou příznaky organizace, která chybí. „Jediný zdroj pravdy pro design, což je problém, který je bolestivý a drží obrovský růst organizace Pochopení důležitosti fáze objevování od začátku, pomůže tento problém z dlouhodobého hlediska snížit.

‍

Výzva pro ilustrace: Infographic styl obrazy, které ukazují chaos v kanceláři. Před počítačem sedí mnoho návrhářů a vývojářů, kteří ukazují různé vzory, tlačítka a barvy. S nudlemi způsobuje zmatek a nemá standardy

‍

Proč je tento problém: zdroj „ne systematického“

Mnoho lidí si může myslet, že tento problém je způsoben nevědomostí týmu, ale ve skutečnosti jsou jeho kořeny složitější, je to způsobena „pracovní metodou“, která vypadne a není vhodná pro velikost organizace. Uvidíme, co je hlavním důvodem:

1. Silo Work: Každý tým pracuje samostatně, jako by byli. Marketingový tým má svůj vlastní projekt. Produkční tým také vyvinul své vlastní funkce. Každý člověk nemá jádro, které spojuje rozhodnutí o návrhu dohromady. Vytvořte výsledky „Různí lidé v různých stylech“

2. Neexistuje žádný „jediný zdroj pravdy“: Mnoho organizací může mít nějaký „průvodce stylem“, ale většina z nich má ve formě souboru PDF nebo „mrtvého“ snímku, to znamená, že neaktualizuje skutečnou práci a nemůže se připojit k kódu, který vývojáři skutečně používají. Návrhář FIGMA, ale vývojáři se neaktualizují. A konečně, co pořady na webu stejně neodpovídají nejnovějšímu designu.

3. neefektivní předání: Tradiční pracovní procesy jsou „Design Designer -> Odeslat soubory Dave -> Dave, aby se postavil“. Tento proces má velkou mezeru zvanou „interpretace“, která způsobuje hádání vývojářů, jako je vzdálenost, velikost písma nebo dokonce přesná barva. Dělá práci pomalou a snadno chybu

4. Nedostatek vhodných nástrojů: Důležitým kořenem problému je použití samostatných nástrojů během návrhu (design) a vývoje (vývoj). Pokud design a kód nejsou na „jazyku“ nebo „platformě“, je udržování jeho neustále nemožné. To je smysl, že mnoho organizací začíná hledat kompletní řešení, jako je WebFlow Enterprise pro velké organizace.

‍

Výzva pro ilustrace: Síla Schedule, se 3 týmy (Design, Dev, Marketing) v samostatném kruhu. A ve středu jsou šipky v různých směrech. Dokument PDF je napsán „Průvodce stylem v.1 (zastaralý)“ je opuštěn. Předává neskonfikovanou práci

‍

Pokud to odejde, jak to ovlivní: katastrofa než jen „web není krásná“.

Ponechání problému nekonzistentního v chronickém designu to nejde jen o „krásu“, ale má přímý dopad na „obchodní čísla“ a „firemní kultura“ vážně

1. Náklady jsou vyšší a ve ztrátě času (zvýšené náklady a zbytečný čas): Pokuste se vypočítat, že za jeden rok, kolik hodin ztrácí váš tým? „Vytvářejte stejné věci opakovaně“ a „Úpravy designu, který se neshoduje.“ Čas a plat těchto zaměstnanců jsou náklady, které organizace musí platit marně.

2. pomalejší časový trh: Zatímco vaši konkurenti mohou vydat nové funkce za 2 týdny, váš tým může trvat měsíc, protože jen sedí a hádají se o barvě tlačítka. Nedostatek systému zpomaluje. A to znamená ztrátu obchodních příležitostí

3. Snižte hodnotu značky (ředění značky): Konzistence je jádrem silné budovy značky. Kdykoli mají zákazníci různé zkušenosti s důvěrou kanálu a jednota značky se postupně sníží.

4. Špatná zkušenost uživatelů: Uživatel očekává, že váš web nebo aplikace bude „snadný“ a „hádání cesty“. Ale druhá tvář je modrá, vytváří pro uživatele zátěž, aby se mohli neustále učit. A může vést k chybě při použití

5. Vyhoření týmu: Nikdo nechce pracovat, aby seděl a vyřešil stejné problémy. Nebo práce opakovaně jak designéři, tak vývojáři se budou cítit frustrovaní a odrazovaní. Který ovlivňuje pracovní atmosféru a míru rezignace zaměstnanců nakonec výběr mezi agenturou WebFlow nebo na volné noze, který chápe tento problém, je důležité.

‍

Výzva pro ilustrace: 2 liniové grafy jsou „náklady“, které rostou. A další řádek je „rychlost vývoje“, která se propadla dole, má velkou ikonu značky. A matoucí tvář uživatele, aby v mnoha rozměrech zprostředkoval negativní účinky

‍

Existuje nějaké řešení? A kde by to mělo začít: chtěl bych doporučit „škálovatelný systém designu na webflow“

Řešením toho všeho je vytvoření „návrhového systému“! Ale nejen normální designový systém, ale „škálovatelný návrhový systém“, který může růst a expandovat s vaší organizací a „WebFlow“ je nejdokonalejším nástrojem k jeho vytvoření.

Co je to návrhový systém? S nejjednodušším porozuměním je „Lego Tool Box vaší značky“, kterou mohou všichni v organizaci použít k vytvoření všeho. Výsledky však budou vždy stejnou značkou, protože použití komponent ze stejného pole se nejedná jen o návrhový soubor, ale je to „živý systém“, který spojuje design a kód dohromady.

Tak proč je to webflow? Protože byl vytvořen webflow zejména k vyřešení tohoto problému:

• Pravda Single Zdroj pravdy: Můžete vytvořit vše od barev, písma, vzdáleností, až po komponenty, které jsou složité (jako je navbar, posuvník) na jednom místě. Když aktualizujete uprostřed, všechny komponenty se také používají automaticky aktualizovány.
• Opakovaně použitelné komponenty: Toto je srdce. Můžete vytvořit „komponentu“, například tlačítko „Koupit nyní“, které již všechno nastavilo. Pokaždé, když chcete použít toto tlačítko, přetáhněte jej a umístit k tomu, abyste vytvořili novou, a když chcete změnit text nebo barvu každého tlačítka na webu, stačí opravit hlavní počítač, dozvíte se více o komponentách WebFlow zde.
• Connect Design s vývojem: To, co vidíte a navrhnete na Webflow Designer, je to, co uživatelé skutečně uvidí na webové stránce. Snížilo to mezeru „interpretace“ mezi návrhářem a Daveem na nulu. Protože oba týmy pracují na stejném nástroji
• Proměnné: WebFlow vám umožňuje nastavit barevné vzorky, globální písma a nejnovějšími jsou proměnné CSS pro různé hodnoty, jako je prostor nebo velikost, což usnadňuje úpravu stylu celého webu a nikdy předtím není.

Nejlepším startem je vytvoření průvodce stylem na živém webu na WebFlow, který bude základem kompletního systému designu.

‍

Výzva pro ilustrace: Infographic Image ukazuje „Box nástrojů“ s logem WebFlow na víku v krabici. K dispozici je „kus Lego“, který má znamení, že tlačítka, formuláře, barvy, písma, karty jsou uspořádány v řádném. A ruce designéra a vývojářů vytáhli stejné části

‍

Příklady ze skutečné věci, která byla dříve úspěšná: Když „TechCorp“ převrátí hru pomocí designového systému WebFlow.

Abych byl jasnější, chtěl bych zvednout případ „TechCorp“ společnosti, společnost SaaS, která roste tak rychle, že existuje více než 10 dílčích produktů.

Problémy (The Mess): Dříve, TechCorp zažil mnoho problémů. Každý tým produktů si vytvořil vlastní webové stránky, takže vstupní stránka produktu A a B vypadala úplně jinak od různých společností. Marketingový tým trvá týden, než vytvoří microsite pro kampaň, protože musí čekat na veškerou novou míru konverze, protože uživatel je zaměňován s neznámým webem.

Řešení: TechCorp se rozhodne investovat do vytváření „centralizovaného designového systému“ na WebFlow s týmem WebFlow. Vložili všechny systémy uživatelského rozhraní, aby provedli audit (barvy, písma) a nejčastěji používané komponenty, jako je patro, cenová tabulka. Sekce osvědčení je uložena ve středním systému.

Výsledky (výsledek): Pouze 3 měsíce po zahájení používání nového návrhového systému. Výsledky jsou velmi působivé:

• Snižte čas na vývoj nové webové stránky na 70%: Marketingový tým může vytvořit novou vstupní stránku, aniž by musel sladit vývojový tým, stačí přetáhnout komponenty, které jsou již k dispozici.
• Konzistence značky se zvýšila 100%: každá stránka a nový produkt, který byl spuštěn a cítil stejnou značku TechCorp.
• Nový zaměstnanec na palubě je dvakrát rychlejší: nový návrhář a vývojář může tuto práci zahájit okamžitě, protože existují „manuály“ a „nástroje“, které lze sledovat.
• Míra konverze Průměrná se zvýšila o 15%: kvůli hladšímu a spolehlivějšímu zažívání uživatelů.

Toto je síla změny z „samostatné práce“ na „práci na stejném systému“, který může webflow poskytnout vaší organizaci.

‍

Výzva pro ilustrace: před a po porovnání. První strana ukazuje obrazovku webových stránek 3-4, která se vůbec neshoduje. Je tam nepořádek. Po zobrazení obrazovky obrazovky jsou ty webové stránky, které jsou upraveny tak, aby měly krásný a řádný design. S grafem „produktivita“ stoupá

‍

Pokud chcete sledovat, co dělat: 5 kroků k vytvoření škálovatelného návrhového systému na webflow (lze jej okamžitě použít).

Jste připraveni vytvořit řádný systém pro vaši organizaci? Toto je 5 hlavních kroků, které můžete okamžitě začít s WebFlow:

Krok 1: Audit a nadace)
před vytvořením něčeho nového. Musíte vědět, co máme. Sbírejte veškeré uživatelské rozhraní organizace. Přijďte se podívat (UI Audit) a uveďte, jaké komponenty (kolik tlačítek, kolik stylů). „Ústřední standard“ organizace a spusťte základní nastavení ve vašem projektu WebFlow:

• Globální barvy: Přidejte hlavní barvu, barvu, barvu pro písmena a různá oznámení značky do globálních vzorníků
• Nastavte písmo (typografie): Určete styl hlavičky (H1-H6), odstavec, odkaz a další jako standard prostřednictvím značek HTML.
• Nastavte mezerový systém: Použijte snadno zapamatovatelný čísla (například 8-bodová mřížka) v konfiguraci. Marže/polstrování tak, aby všechno mělo konzistentní vzdálenost na celém webu

Krok 2: Vytvořte jádrové komponenty sestavení,
počínaje nejmenším a nejčastěji používaným nejprve a poté postupně sestavení těla je větší. Okamžitě vytvořte každou věc a okamžitě ji převeďte na „komponentu“:

• Tlačítka: Vytvořte veškerý stav (primární, sekundární, zdravotně postižený, vznášející se)
• Formulář (formuláře): Vytvořte vstupní pole, textová oblast, zaškrtávací políčka, rozbalovací nabídky a formy.
• Karty (karty): Konstrukční karty pro zobrazení, jako je blogová karta, karta produktu

Krok 3: Vytvořte složité komponenty a sekce (vzory sestavení a sekce).
Přineste základní komponenty z kroku 2 do větší a často používané části. Jedná se o často „různé části webové stránky“, které lze použít opakovaně, například:

• Navbar a zápatí: Vytvořte komponentu pro hlavu a konec webu, který musí být k dispozici na každé stránce.
• Cena tabulka: Navrhněte cenovou tabulku, kterou lze snadno upravit.
• Sekce hrdiny: Vytvořte různé hrdiny, ve kterém si marketingový tým může vybrat.

Krok 4: Vytvořte šablony Vytvořit stránky.
Jakmile existuje kompletní sekce, je sestavena jako „šablona“ různých typů stránek, které se často používají, jako je první stránka, stránka o nás, produkty/služby, stránky blogu a stránky. Kontaktujte nás. Mít šablonu pomůže vytvořit nové tváře. Může dělat jen pár minut

Krok 5: Dokument a vládu,
vytvoření stránky na stejném projektu, která má být „Guide Center“ nebo Guide Web Guide. Tato stránka zobrazí všechny komponenty s vysvětlením „co je“ a „kdy“ použít všechny v týmu. (Dokonce i non -návrh) se mohou snadno vidět a porozumět. Tento jasný systém pomůže vývojem firemních webových stránek je hladký a nejúčinnější.

‍

Výzva pro ilustrace: Infographic obrázky ukazují 5 kroků zleva doprava. S ikony pro každý krok: 1. auditní brýle (audit), 2. LEGO (komponenty), 3. sekce (sekce), 4. dokument (šablony), 5. Lidé se chvějí (vládne)

‍

Otázky, které lidé mají tendenci divit a odpovědi, které jsou vymazány

Kompiluji populární otázku o vytvoření návrhového systému na webflow s jasnou odpovědí a snadno pochopitelným.

Otázka 1: Jaký je rozdíl mezi průvodcem stylem?
Odpověď: Průvodce stylem je jako „pravidlo“, které říká, že tvář značky je jako (jako je logo, barva, písmo), ale obvykle se jedná o stabilní dokument. Konstrukční systém je „živý systém“, který kombinuje stylové vedení, které lze opakovaně používat (opakovaně použitelné komponty) a cechy. Verze, která může „jednat“ a „skutečně se připojit k kódu“

Q2: Je nutné použít FIGMA společně s WebFlow?
A: „Velmi doporučeno“! Nejlepší pracovní proces je použít FIGMA k prozkoumání nápadů, provádět dráty a navrhnout uživatelské rozhraní v počátečním průzkumu, protože je vysoce flexibilní. Poté, když závěr tedy přináší na webflow statický design „vytvořit živý systém“, který se stane skutečným jediným zdrojem pravdy, který každý může i nadále používat. Další informace o návrhových systémech FIGMA najdete na jasnější práci.

Q3: Je třeba mít malý tým nebo SME společnost?
Odpověď: „nezbytné“, ale nemusí být tak komplikované jako velká organizace. Začíná vytvářet „centrální systém“ brzy, i když je to jen několik jednoduchých globálních stylů a komponent, pomáhá položit dobrý základ pro budoucí růst. Je to inteligentní investice, která vám pomůže vrátit se k „demontáži“ všech nových systémů ve větší den.

Q4: Je obtížné udržovat konstrukční systém na WebFlow?
Odpověď: Snadnější než zcela samostatná údržba systému. Protože když chcete aktualizovat, například změna hlavní barvy značky, můžete jít a opravit globální vzorník v webflow a barva v každé komponentě a každá stránka se odpovídajícím způsobem automaticky změní. Klíčem je mít 1-2 „správce“ (správce), který ovládá a komunikuje změny všem v týmu.

‍

Výzva pro ilustrace: Obrázky ve stylu Q&A s velkou ikonou otazníku (?) A žárovkou (!) S krátkými otázkami a odpověďmi. Což shrnuje výše uvedené důležité problémy, aby to vypadalo zajímavě a snadno se trávilo

‍

Shrnutí pro snadné porozumění + čas!

Vytvoření návrhového systému na WebFlow není jen „trend“, ale je to „strategická investice“, která změní pracovní metody celé organizace. Je to změna z chaosu, duplikace a zpoždění na „systematický a rychlostní systém“.

To, co vaše organizace obdrží, není jen „dobrý“ web, ale „digitální aktivum“, který se může rozšířit, tým, který spolupracuje šťastně a efektivně, a co je nejdůležitější, „výhodu konkurence“, protože zákazníkům můžete dodávat lepší produkty a zkušenosti než kdokoli jiný.

Už nenechte, aby ne -systemat držel potenciál vaší organizace! Začínáme vytvářet předpisy od dnešního dne je nejdůležitějším krokem k tomu, aby v budoucnu pokládala základ pro udržitelný růst

Je čas změnit chaos na systém! Začněte plánovat vytvoření škálovatelného návrhového systému na vašem WebFlow od dnešního dne. Nečekejte, až problém více eskaluje!

Pokud hledáte profesionálního partnera, který pomůže položit nadaci a vytvořit silný designový systém pro vaši organizaci. Tým Vision X Brain se specializuje na vývoj webových stránek s WebFlow je plně konzultace a služby. Chcete -li vytvořit systém, který splňuje firemní web speciálně pro vás, kontaktujte nás pro bezplatnou konzultaci ještě dnes!

‍