Opret et udvidet designsystem med webflow.

Rigtige problemer i livet: Hvorfor er organisationen af den store organisation? "Design Control" er ikke her?

Har du nogensinde følt dig sådan? Som manager eller teamleder ser du på virksomhedens websteder og applikationer og skal derefter sukke ... Hvorfor ser hvert produkt anderledes ud end forskellige virksomheder? Team A bruger en mørkeblå knap. B -teamet bruger lyseblå, og C -teamet har netop frigivet en ny funktion med en blå knap! Dette er et problem kaldet "designinkonsekvens" eller det inkonsekvente design af designet. Hvilket er et mareridt, som store organisationer skal støde på regelmæssigt

Problemet er ikke kun det. Forestille sig:

• Design: Jeg er nødt til at sidde og designe et nyt UI -sæt næsten hver gang jeg starter et nyt projekt. Spilder tid til at skabe noget, der skal standardiseres
• Udviklere: Skal sidde og skrive en kode til grundlæggende komponent (såsom knapper, form, kort) gentagne gange, selvom det kun skal oprettes én gang og kan bruges.
• Produktchef: Hovedpine og kommunikation for alle hold at forstå det, der er den "seneste version" af designet?
• Brugere (slut -ser): Forvirrende, når de bruger produkter, der ser anderledes ud. Reducer pålidelighed og god oplevelse for mærker.

Alt dette er symptomerne på den organisation, der mangler. "Enkelt kilde til sandhed for design, som er et problem, der er smertefuldt og har den enorme organisations vækstforståelse af betydningen af opdagelsesfasen fra starten, vil hjælpe med at reducere dette problem i det lange løb.

‍

Spørg om illustrationer: Infografiske stilmalerier, der viser kaos på kontoret. Der er mange designere og udviklere, der sidder foran computeren, der viser forskellige designs, knapper og farver. Med en nudler formidler forvirring og har ikke standarder

‍

Hvorfor er det problem: kilden til "ikke systematisk"

Mange mennesker tror måske, at dette problem er forårsaget af holdets uvidenhed, men faktisk er dens rødder mere kompliceret, det er forårsaget af "arbejdsmetoden", der falder ud og ikke er egnet til størrelsen på organisationen. Lad os se, hvad hovedårsagen er:

1. Silo -arbejde: Hvert team arbejder separat, som om de var. Marketingteamet har sit eget projekt. Produktionsteamet udviklede også deres egne funktioner. Hver person har ikke en kerne, der forbinder designbeslutningerne sammen. Gør resultaterne "forskellige mennesker i forskellige stilarter"

2. Der er ingen "enkelt kilde til sandhed": Mange organisationer kan have nogle "stilguide", men de fleste af dem er i form af en PDF -fil eller "død" dias, det vil sige, det opdaterer ikke det faktiske arbejde og kan ikke oprette forbindelse til den kode, som udviklerne faktisk bruger. Figma Designer, men udviklere opdaterer ikke. Endelig, hvad der viser på nettet, stemmer ikke overens med det nyeste design alligevel.

3. Ineffektivt aflevering: Traditionelle arbejdsprocesser er "Design Designer -> Send filer til Dave -> Dave for at bygge sig selv." Denne proces har et stort hul kaldet "fortolkning", der får udviklere til at gætte, såsom afstand, skriftstørrelse eller endda den nøjagtige farve. Gør jobbet langsomt og let fejl

4. Mangel på passende værktøjer: Brug af separate værktøjer under design (design) og udvikling (udvikling) er den vigtige rod af problemet. Når design og kode ikke er på "sproget" eller "platformen" det samme, er det næsten umuligt at holde det hele tiden. Dette er det punkt, at mange organisationer begynder at lede efter en komplet løsning som WebFlow Enterprise til store organisationer.

‍

Spørg om illustrationer: Silo -planbilleder, med 3 hold (design, dev, marketing) i en separat cirkel. Og der er pile i forskellige retninger i midten, der er et PDF -dokument skrevet "Style Guide V.1 (forældet)" er forladt. Formidler ikke -forbundet arbejde

‍

Hvis det er tilbage, hvordan vil det påvirke: katastrofe end bare "webstedet er ikke smukt".

Efterladt problemet med inkonsekvent i kronisk design handler det ikke kun om "skønhed", men det har en direkte indflydelse på "forretningsnumre" og "virksomhedskultur" alvorligt

1. Omkostningerne er højere og i spild af tid (øgede omkostninger og spildt tid): Prøv at beregne, at på et år, hvor mange timer spilder dit team? "Opret de samme ting gentagne gange" og "redigering af designet, der ikke stemmer overens." Tiden og lønnen for disse ansatte er de omkostninger, som organisationen skal betale forgæves.

2. langsommere tidsmarked: Mens dine konkurrenter kan frigive nye funktioner om 2 uger, kan dit team tage en måned, fordi de kun sidder og diskuterer om knappen. Manglen på systemet bremser. Og det betyder at miste forretningsmuligheder

3. Reducer værdien af mærket (brandfortynding): Konsistens er hjertet i en stærk brandbygning. Hver gang kunder har forskellige oplevelser i hver kanals tillid og enhed af mærket, falder gradvist.

4. Dårlig brugeroplevelse: Brugeren forventer, at din web eller app vil være "let" og "gætte vejen". Men det andet ansigt er blåt, det skaber en byrde for brugerne at lære igen hele tiden. Og kan føre til en fejl i brug

5. Team Burnout: Ingen ønsker at arbejde for at sidde og løse de samme problemer. Eller arbejde gentagne gange både designere og udviklere vil føle sig frustrerede og modløse. Hvilket påvirker den arbejdsmæssige atmosfære og fratræden for medarbejdere i sidste ende og vælger mellem WebFlow Agency eller Freelancer, der forstår, at dette problem er vigtigt.

‍

Spørgsmål om illustrationer: 2 linjegrafbilleder er "omkostninger", der stiger. Og en anden linje er "udviklingshastighed", der faldt ned nedenunder har et stort brandikon. Og den forvirrende brugers ansigt til at formidle negative effekter i mange dimensioner

‍

Er der nogen løsning? Og hvor skal det starte: vil gerne anbefale "skalerbart designsystem på webflow"

Løsningen af alt dette er oprettelsen af "Design System"! Men ikke kun et normalt designsystem, men et "skalerbart designsystem", der kan vokse og udvide med din organisation og "webflow", er det mest perfekte værktøj til at skabe det.

Hvad er designsystemet? At tale med den nemmeste forståelse er "LEGO -værktøjskasse på dit brand", som alle i organisationen kan bruge til at skabe noget. Men resultaterne vil altid være det samme brand, fordi det bruger komponenter fra den samme boks, det er ikke kun en designfil, men det er et "levende system", der forbinder design og kode sammen.

Så hvorfor er det en webflow? Fordi webflowen blev oprettet specielt for at løse dette problem:

• Sandhed en enkelt kilde til sandhed: Du kan oprette alt fra farver, skrifttyper, afstande, til komponenter, der er komplekse (såsom Navbar, skyderen) på et sted. Når du opdateres i midten, bruges alle komponenterne også automatisk opdateret.
• Genanvendelige komponenter: Dette er hjertet. Du kan oprette en "komponent" som "Køb nu" -knappen, der allerede har indstillet alt. Hver gang du vil bruge denne knap, skal du bare trække den til at placere noget behov for at oprette en ny, og når du vil ændre teksten eller farve på hver knap på nettet, skal du bare rette hovedcomputeren, lære mere om webflow -komponenter her.
• Forbind design med udvikling: Det, du ser og designet på WebFlow Designer, er det, som brugerne virkelig vil se på websiden. Det reducerede "fortolkning" mellem designeren og Dave til nul. Fordi begge hold arbejder på det samme værktøj
• Variabler: WebFlow giver dig mulighed for at oprette farveprøver, globale skrifttyper, og det nyeste er CSS -variabler for forskellige værdier, såsom rum eller størrelse, hvilket gør stiljusteringen af hele webstedet let og er aldrig før.

Den bedste start er at oprette en levende webstedsstil -guide på webflowen, som vil være grundlaget for det komplette designsystem.

‍

Spørg om illustrationer: Infografisk billede viser "værktøjskasse" med et webflow -logo på låget i boksen. Der er et "LEGO -stykke", der har et tegn på, at knapper, formularer, farver, skrifttyper, kort er arrangeret i en ordnet. Og designerens og udviklernes hænder tog de samme dele ud

‍

Eksempler fra den rigtige ting, der plejede at få succes: når "TechCorp" vipper spillet med webflow -designsystem.

For at være klarere vil jeg gerne løfte virksomhedens opløsningssag "TechCorp", et SaaS -selskab, der vokser så hurtigt, at der er mere end 10 underprodukter.

Problemer (rodet): Tidligere havde TechCorp oplevet en masse problemer. Hvert produktteam lavede deres egne websteder, hvilket gjorde landingssiden for produktet A og B til at se helt anderledes ud end forskellige virksomheder. Marketingteamet tager en uge at oprette en mikrosite til en kampagne, fordi de er nødt til at vente på al den nye condersionshastighed, fordi brugeren er forvirret med et ukendt websted.

Løsningen: TechCorp beslutter at investere i at skabe "centraliseret designsystem" på WebFlow med et team af WebFlow. De sætter alle UI -systemer for at fremstille revision (farver, skrifttyper) og de mest almindeligt anvendte komponenter, såsom Heeler, prisbord. Testimonial sektion gemmes i det midterste system.

Resultater (resultatet): Kun 3 måneder efter begyndelsen af at bruge det nye designsystem. Resultaterne er meget imponerende:

• Reducer tiden til at udvikle en ny webside til 70%: Marketingteamet kan oprette en ny destinationsside uden at skulle forene udviklingsteamet, bare træk de komponenter, der allerede er tilgængelige.
• Brandkonsistensen steg 100%: hver side og det nye produkt, der blev lanceret og følte det samme TechCorp -mærke.
• Den nye medarbejder ombord er 2 gange hurtigere: En ny designer og udvikler kan starte jobbet med det samme, fordi der er "manualer" og "værktøjer", der er klare at følge.
• Konverteringshastighed Et gennemsnit steg med 15%: på grund af mere glat og pålidelig brugeroplevelse.

Dette er ændringen fra "separat arbejde" til "arbejde på det samme system", som WebFlow kan give til din organisation.

‍

Spørg om illustrationer: Før & efter sammenligning. Den første side viser skærmen 3-4 websted, der slet ikke stemmer overens. Der er et rod. Efter at have vist skærmskærmen, de websteder, der er justeret for at have et smukt og ordnet design. Med en graf "produktivitet" stiger

‍

Hvis du vil følge, hvad skal du gøre: 5 trin for at oprette et skalerbart designsystem på webflow (kan bruges med det samme).

Klar til at oprette et ordnet system til din organisation? Dette er de 5 hovedtrin, som du kan starte med det samme på webflow:

Trin 1: Audit & Foundation),
inden du opretter noget nyt. Skal vide, hvad vi har. Indsamle alt UI i organisationen. Kom for at se (UI -revision) og angive hvilke komponenter (hvor mange knapper, hvor mange stilarter). "Central Standard" i organisationen og start de grundlæggende indstillinger i dit webflow -projekt:

• Globale farver: Tilføj hovedfarve, farve, farve til bogstaver og forskellige meddelelser om mærket i de globale farveprøver
• Indstil skrifttypen (typografi): Angiv stilen med overskrift (H1-H6), afsnit, link og andre til at være standarden via HTML-tags.
• Indstil afstandssystemet: Brug numre-til-husketalnumre (f.eks. 8-punkts gitter) i konfiguration. Margin/polstring, så alt har en konstant afstand på hele stedet

Trin 2: Opret build kernekomponenter,
startende med den mindste og oftest anvendt først og derefter gradvist at samle kroppen er større. Opret hver ting og konverter den til en "komponent" i webflowen med det samme:

• Knapper: Opret al status (primær, sekundær, handicappet, svæver)
• Formular (formularer): Opret inputfelter, tekstområder, afkrydsningsfelter, dropdowns og formknapper.
• Kort (kort): Designkort til display såsom blogindlægskort, produktkort

Trin 3: Opret komplekse komponenter og sektioner (Bygningsmønstre og sektioner).
Medbring kernekomponenter fra trin 2 til en større og ofte brugt del. Dette er ofte "forskellige dele af websiden", der kan bruges gentagne gange, såsom:

• Navbar og sidefod: Opret en komponent til hovedet og slutningen af det websted, der skal være tilgængeligt på hver side.
• Prisetabel: Design en pristabel, der let kan redigeres.
• Heltafsnit: Opret forskellige helt, hvor marketingteamet kan vælge.

Trin 4: Opret en Opret sideskabeloner.
Når der er et komplet afsnit, er det samlet som en "skabelon" af forskellige typer sider, der ofte bruges, såsom den første side, side om os, produkter/tjenester, blogsider og sider. Kontakt os. At have en skabelon vil hjælpe med at skabe nye ansigter. Kan gøre på få minutter

Trin 5: Dokument & regulering,
oprettelse af en side om det samme projekt, der skal være "Guide Center" eller webstedsstilguide. Denne side viser alle komponenter med en forklaring "hvad der er" og "når" at bruge alle på holdet. (Selv ikke -designere) kan let komme til at se og forstå. Dette klare system vil hjælpe virksomhedens webstedsudvikling af dig er glat og mest effektiv.

‍

Spørgsmål om illustrationer: Infografiske billeder viser 5 trin fra venstre mod højre. Med ikoner for hvert trin: 1. revisionsbriller (revision), 2. Lego (komponenter), 3. sektioner (sektioner), 4. dokument (skabeloner), 5. folk ryster (styrer)

‍

Spørgsmål, som folk har en tendens til at undre sig, og de svar, der er ryddet

Jeg kompilerer et populært spørgsmål om at skabe et designsystem på webflowen med et klart svar og let at forstå.

Q1: Hvad er forskellen mellem stilguide?
A: Style Guide er som en "regel", der siger, at mærkets ansigt er som (såsom logo, farve, skrifttype), men det er normalt et stabilt dokument. Designsystemet er det "levende system", der kombinerer stilguider, der kan bruges gentagne gange (genanvendelige componnts) og guilds. Den version, der kan "handle" og "faktisk oprette forbindelse til koden"

Spørgsmål 2: Er det nødvendigt at bruge Figma sammen med WebFlow?
A: "Meget anbefalet"! Den bedste arbejdsproces er at bruge Figma til at udforske ideer, udføre wireframe og designe UI i den indledende udforskning, fordi den er meget fleksibel. Derefter, når konklusionen derfor bringer et stadig design "Opret et levende system" på WebFlow, som vil blive en rigtig enkelt kilde til sandhed, som alle kan fortsætte med at bruge. Lær mere om Figmas designsystemer for at se et klarere arbejde.

Q3: Er et lille team eller SMV -selskab nødt til at have et designsystem?
A: "Nødvendigt", men behøver muligvis ikke at være så kompliceret som en stor organisation. Begynder at skabe et "centralt system" tidligt, selvom det kun er et par enkle globale stilarter og komponenter, hjælper det med at lægge et godt fundament for fremtidig vækst. Det er en intelligent investering, der hjælper dig med ikke at komme tilbage til at "afvikle" alle de nye systemer på den større dag.

Spørgsmål 4: Er det vanskeligt at vedligeholde designsystem på WebFlow?
A: lettere end en helt separat systemvedligeholdelse. For når du vil opdatere, såsom at ændre hovedfarven på mærket, kan du gå ind for at fikse den globale farveprøve i webflowet og farven i hver komponent og hver side ændres automatisk i overensstemmelse hermed. Nøglen er at have 1-2 "vedligeholder" (vedligeholder), der kontrollerer og kommunikerer ændringer til alle i holdet.

‍

Spørg om illustrationer: Spørgsmål og svar billeder med et stort spørgsmålstegn i ikonet (?) Og en pære (!) Med korte spørgsmål og svar. Hvilket opsummerer ovenstående vigtige problemer for at få det til at se interessant og let at fordøje

‍

Resumé for let forståelse + tid at gøre!

Oprettelse af et designsystem på webflow er ikke kun "trend", men det er "strategiske investeringer", der vil ændre arbejdsmetoderne i hele organisationen. Det er en ændring fra kaos, duplikering og forsinkelse til det "systematiske og hastighedssystem".

Hvad din organisation vil modtage, er ikke kun et "godt" websted, men "digitalt aktiv", der kan udvide, et team, der arbejder sammen lykkeligt og effektivt, og vigtigst af alt "fordelen ved konkurrence", fordi du kan levere bedre produkter og oplevelser til kunderne end nogen anden.

Lad ikke den ikke -systematy holde potentialet i din organisation længere! At begynde at skabe regler fra i dag er det vigtigste skridt i at lægge grundlaget for bæredygtig vækst i fremtiden

Det er tid til at ændre kaoset til et system! Begynd at planlægge at oprette et skalerbart designsystem på din webflow fra i dag. Vent ikke på, at problemet eskalerer mere!

Hvis du leder efter en professionel partner, der vil hjælpe med at lægge grundlaget og skabe et stærkt designsystem til din organisation. Vision X Brain Team har specialiseret sig i webstedsudvikling med WebFlow er fuldt konsulent og tjenester. For at oprette et system, der møder virksomhedswebstedet specifikt til dig, kontakte os for gratis konsultation i dag!

‍