Modulbaserad design

Njut av den bästa kodfria app buildern och skapa en vacker design till din app

Allmän design+

  • Anpassad till varje enhet

    GoodBarber har designen under kontroll hela vägen från mobil till dator. Våra designelement anpassar sig perfekt till varje skärmstorlek, så att kvaliteten är densamma på alla enheter: smartphone, surfplatta, bärbar eller stationär dator.

  • Global Style Tool

    Styr hela stilen i din app från en enda meny: färgtema, typografi, åtgärdsknappar, hover-effekter och andra element. Skapa din design och använd den i hela din app med ett klick. 

  • Hantering av bakgrundsbilder

    GoodBarber låter dig integrera bilder i din design och visa dem i bakgrunden.

  • Marginaler som går att anpassa

    Anpassa marginalerna i ditt projekt: vågräta för alla skärmar, lodräta bara för visning på mobilskärmar.

  • Hover-effekter på texter

    Lägg en hover-effekt på dina texter: understrykning, ljusare eller mörkare textfärg.

  • Hover-effekter på bilder

    Lägg en hover-effekt på dina bilder: zooma in, zooma ut eller genomskinlighet.

  • Byte av tema

    Du kan byta tema med ett klick och samtidigt behålla ditt navigeringssätt och projektets övergripande struktur och innehåll.

  • En lösning för varje syfte

    Mångfalden av mallar och bredden och kraften i de anpassningsalternativ som finns gör att du kan skapa en app som passar exakt ditt syfte.

  • Stileditor

    Styr dina stilar på global nivå för att säkra en sammanhängande design i appens olika vyer.

  • Ändringslogg

    GoodBarbers backoffice innehåller en ändringslogg där du ser historiken över alla ändringar som gjorts i ditt projekt.

  • Uppdatering av designen utan att bygga om appen

    Uppdateringar av projektets design kräver inte att du bygger om din app. När de är godkända träder de automatiskt i kraft och blir synliga för dina användare utan ytterligare åtgärd.

  • Bildbibliotek

    Spara bilder i ditt personliga bibliotek, så att du enkelt hittar dem igen senare.

  • Selektiv ändring av bildstorlek

    Bilder anpassas till flera storleksförhållanden, komprimeras och cachas för att träffa den bästa kombinationen av filstorlek, prestanda och visningskvalitet. Laddningstiderna optimeras utan att visningskvaliteten offras.

  • Monokrom effekt

    Tack vare bildeditorn i GoodBarbers backoffice kan du lägga en monokrom effekt på dina bilder.

  • Oskärpeeffekt

    Lägg en oskärpeeffekt på dina bilder med ett klick direkt från GoodBarbers backoffice tack vare den inbyggda bildeditorn.

  • Zoomeffekt

    Använd zoomeffekter när musen förs över bilderna, i datorversionen av ditt projekt.

  • Assistent för att skapa ikon och startskärm

    GoodBarbers backoffice erbjuder ett verktyg som hjälper dig att skapa din appikon och din startskärm helt från grunden.

  • Hantering av färgövergångar

    Integrera färgövergångar i designen i din app genom att välja en ur hela biblioteket (som använder tjänsten https://uigradients.com). När du har valt en skapas och tillämpas färgövergången automatiskt i designen i din app.

  • Genius Palette

    Överlåt din färgpalett till AI. Med ett klick skapar Genius Palette en sammanhängande, professionell färguppsättning, redo att användas i hela din design.

  • Design System

    GoodBarber vilar på ett formaliserat designsystem: grunder, atomer och komponenter plus ett bibliotek med färdiga layouter. Reglerna gäller som standard för varje sida, så att ett projekt förblir sammanhängande från vy till vy.

  • Haptisk återkoppling och animationer

    Native appar har ett sinnligt lager: haptisk återkoppling under fingret, mjuka övergångar från en lista till dess detaljvy, och rörelse som svarar på rullningen.

  • Former på knappar och formulärfält

    Bestäm formen på varje knapp i din app, fyrkantig, rundad eller rund, tillsammans med formen, storleken och etikettens placering på dina formulärfält.

  • App Walkthrough

    Guida dina användare genom den första starten med en interaktiv genomgång. Välj hur den visas, och gör skärmarna levande med Lottie-animationer.

Startsida+

  • Modulbaserad startsida

    Startsidan är den första sektionen i din app. Den består av widgetar och är helt flexibel. Med det stora utbudet av widgetar bygger du ditt projekt så att din app blir helt sin egen.

  • Slå på eller av

    Du kan välja att slå på eller av startsidan i din app. Slår du av den beror navigeringen enbart på det navigeringssätt du väljer. 

  • 77 widgetar

    Med widgetar har du en enastående frihet att organisera startsidan i din app.

  • Innehållswidgetar

    Content apps

    Gör startsidan i din app mer levande med widgetar som uppdateras automatiskt varje gång nytt innehåll publiceras i ditt projekt.

  • Navigeringswidgetar

    Content apps

    Ge direkt tillgång till de viktigaste sektionerna i din app med widgetar för navigering. Det perfekta sättet att leda din användare till kärnan i ditt projekt.

  • E-handelswidgetar

    eCommerce apps

    Skapa direkta ingångar till dina produkter och kollektioner från startsidan i din app med widgetarna för produktlistor och kollektionslistor

  • Kampanjwidget

    eCommerce apps

    Visa ett kampanjmeddelande så snart användarna kommer till startsidan i din butik. Du kan lyfta fram en produkt, en kollektion eller en lista med kollektioner. Kampanjwidgeten är mycket flexibel och hjälper dig att öka försäljningen.

  • Halvdynamiska widgetar

    Dessa widgetar låter dig bygga en startsida som uppdaterar sig själv varje gång nytt innehåll publiceras, samtidigt som användaren får en tydlig struktur att navigera appen efter.

  • Andra widgetar

    Den här kategorin samlar användbara widgetar som sökning, nyhetsbrev, annonser, nedräkning och HTML-widgetar.

  • Uppbyggnad med dra och släpp

    Det är enkelt att ordna de olika widgetarna på din startsida. Du drar dem bara dit du vill ha dem.

  • Sorteringsalternativ

    Du har ett brett urval av sätt att styra ordningen på elementen i dina innehållswidgetar: efter datum, popularitet, alfabetiskt, slumpmässigt och så vidare.

  • Antal element

    Antalet element en widget visar kan ställas in för varje enskild widget, så att du har största möjliga frihet att organisera din startsida.

  • Widgetar med egen kod

    Bygg dina egna widgetar i HTML, CSS och JavaScript, och placera dem på startsidan bredvid standardwidgetarna.

Anpassning av navigeringen+

  • Header, Body & Footer

    Varje navigeringsmeny består av 3 olika delar: Header, Body och Footer, som alla går att anpassa. Det är inte obligatoriskt att visa Header och Footer.

  • Visning av logotyp

    Visa din logotyp i headern till ditt navigeringssätt genom att ladda upp logotypen eller lägga till text direkt.

  • Länk till användarprofilen

    Lägg till en direktlänk till användarens profil i ditt navigeringssätt. Redigera text, ikon och länkfärg.

  • Lägga till genvägar

    Lägg till genvägar i ditt navigeringssätt och låt användarna enkelt nå vilken sektion som helst i din app, en extern länk eller till och med utföra en åtgärd som att logga ut eller skicka ett SMS eller ett e-postmeddelande.

  • Avdelare som går att anpassa

    Lägg till avdelare i din navigeringsmeny och anpassa deras färg och höjd i pixlar.

  • Länkområde som går att anpassa

    Bygg din navigeringsmeny genom att lägga till länkar till sektioner i din app.

  • Upphovsrätt

    Lägg till ett upphovsrättsområde i projektets navigeringsmeny. Välj färg och text samt teckensnitt och teckenstorlek.

  • Avancerade designalternativ

    GoodBarber ger möjlighet till avancerad anpassning av navigeringsmenyns design. Teckensnitt, färger, justering, ikon, cellhöjd, tillägg av en rubrik och mycket mer.

  • Menyns standardvisning

    För menyerna Swipe, Little Swipe, Grid och Slate väljer du menyns standardläge: alltid dold eller alltid visad när appen startar.

Designresurser+

  • Ikongalleri

    En samling med mer än 1000 ikoner, skapade särskilt av vårt designteam och organiserade i 3 olika uppsättningar, finns i ditt backoffice.

  • Ikoner som går att anpassa

    Skapa din egen ikonsamling genom att ladda upp dina egna ikoner eller bilder direkt från projektets backoffice i .png-format, 260 px x 260 px.

  • Professionella teman

    GoodBarbers backoffice rymmer 25 professionella teman framtagna av vårt team av erfarna designers. Inspirerade av vår mobile first-filosofi är de utformade för att anpassa sig perfekt till varje enhet, i linje med dagens trender, och de går att anpassa fullt ut.

  • Google Fonts-bibliotek

    GoodBarber rymmer ett urval på mer än 400 Google Fonts som kan användas direkt i backofficet utan att lägga in extra kod.

  • Pexels-bibliotek

    GoodBarbers kunder har tillgång till fotobiblioteket Pexels direkt från backofficet, med över 500 000 högupplösta bilder.

  • Avancerad bildsökning

    Pexels-biblioteket i GoodBarbers backoffice har en avancerad sökfunktion, så att du kan sortera bilder efter tema, nyckelord eller färg.

  • Egna teckensnitt

    Ladda upp dina egna teckensnitt, .woff2 för webbappen och .ttf eller .otf för native appar, och hitta dem i alla teckensnittsväljare i backofficet bredvid Google Fonts-biblioteket.

  • Google Material Icons

    Lägg till Google Material-ikonuppsättningen i din app i stilarna solid, rounded, contour och two-tone, och använd den överallt där det finns ikoner, även i navigeringsmenyn.

Sektioner+

  • 30 olika sektionstyper

    GoodBarber erbjuder 30 olika sektionstyper som du kan använda för att bygga ditt projekt.

  • Avancerade inställningar för uppgifterna som visas

    För varje sektion väljer du vilka uppgifter som ska visas, till exempel datumet eller författaren i en artikelsektion.

  • Anpassning av verktygsfältet

    Content apps

    För varje sektion väljer du vilka åtgärder som är tillgängliga i verktygsfältet: kommentarer, delning, textstorlek och bokmärkning av elementet.

  • Tillgång till kommentarer

    Content apps

    Ge användarna tillgång till kommentarssidan från varje innehållsvy.

  • Direktlänk för delning i sociala medier

    Lägg till direkta delningslänkar till sociala medier på varje innehållssida.

  • Gradvis laddning av sidan

    Intuitiva gester låter användaren hämta fram extra innehåll vid behov när en sektion besöks. Det ger snabbare visning och bättre användarupplevelse.

  • Global svävande knapp

    En åtgärdsknapp som svävar över ditt innehåll och förblir tillgänglig i hela appen, med den etikett du väljer.

Redo att bygga din app?

Kom igång gratisSe priser