Naar de inhoud springen

Ontwerp en merk.

Kleuren, lettertype en logo van je shop in ShopBuilder ai — uit je BrandStudio of zelf gekozen, met contrastcontrole zodat alles leesbaar blijft.

VideoEigen ontwerp gebruiken — en terug
Op deze pagina

Het ontwerp komt uit je BrandStudio

Heb je in BrandStudio ai een merk ingericht, dan neemt je winkel het vanzelf over: kleuren, lettertype, logo, bedrijfsgegevens, colofon en de pictogrammen van je sociale netwerken voor de voettekst van de pagina. Wijzig je het merk, dan neemt de winkel dat kort daarna vanzelf over; de werkbank laat het zien zodra je ernaar terugkeert.

Onder “Ontwerp” staat dan bovenaan “Ontwerp en gegevens komen uit BrandStudio” en wat er precies wordt overgenomen. Kleurenpalet en logo zijn in deze toestand vergrendeld. Zou een merkkleur in de winkel moeilijk leesbaar zijn, dan gebruikt de winkel in plaats daarvan zijn standaard of zwart of wit, en het vak noemt de betreffende kleur.

Legt je merk geen kleuren, lettertype of logo vast, dan zegt het onderdeel ook dat — met de weg naar BrandStudio.

“Ontwerp” van Café Lumen, de winkel volgt het merk: bovenaan het vak “Ontwerp en gegevens komen uit BrandStudio” met de knop “Eigen ontwerp gebruiken”, daaronder het vergrendelde kleurenpalet, rechts het voorbeeld in de merkkleuren.
De opname toont de Engelse interface.

Eigen ontwerp gebruiken — en terug

Moet de winkel er anders uitzien dan je merk, klik dan op “Eigen ontwerp gebruiken”. De huidige stand wordt je uitgangspunt — er verspringt niets —, en de velden worden vrijgegeven. Vanaf dan volgt de winkel het merk niet meer.

De weg terug is “Terug naar het merk”: de winkel draagt weer het merk en volgt het ook als je het later wijzigt. Je eigen kleurenpalet wordt daarbij opzijgelegd; met “Ongedaan maken: eigen ontwerp van …” haal je het terug. Er is precies één stap — de volgende “Terug naar het merk” vervangt die.

“Ontwerp” van Café Lumen: Ana klikt op “Eigen ontwerp gebruiken”, de velden worden vrijgegeven en het label “eigen ontwerp” verschijnt; daarna klikt ze op “Terug naar het merk”, en de knop “Ongedaan maken: eigen ontwerp van …” staat klaar.De opname toont de Engelse interface.
  1. Open “Ontwerp”.
  2. Klik op “Eigen ontwerp gebruiken”.
  3. Klik voor de weg terug op “Terug naar het merk”.

Kleurenpaletten, eigen kleuren, lettertype

Onder “Kleurenpalet en lettertype” staan acht “Kant-en-klare paletten”, elk met een passend lettertype en gecontroleerd op leesbaarheid. Een kleurenpalet vult vier rollen: “Paginaachtergrond”, “Oppervlak” van de kaarten, “Tekst” en “Accent” voor knoppen en links.

Onder “Eigen kleuren” typ je elke rol als hexwaarde van zes tekens — #004D40 — of kies je die met de kleurkiezer ernaast; daaronder kies je het “Lettertype”. Een klik op een kleurenpalet slaat nog niets op: het formulier meldt “Niet-opgeslagen wijzigingen” totdat je op “Uiterlijk opslaan” klikt.

“Terugzetten op de standaard” haalt je eigen kleuren weer weg. De winkel draagt dan de kleuren van je merk of, zonder merk, het eerste van de kant-en-klare kleurenpaletten.

“Ontwerp” met eigen ontwerp: Ana tikt het kleurenpalet “Zand” aan, het voorbeeld wisselt van kleur, “Niet-opgeslagen wijzigingen” verschijnt, en ze klikt op “Uiterlijk opslaan”.De opname toont de Engelse interface.
  1. Kies een kant-en-klaar kleurenpalet of typ eigen kleuren.
  2. Controleer onder “Leesbaarheid” de drie paren.
  3. Klik op “Uiterlijk opslaan”.

Leesbaarheid wordt berekend

Onder “Leesbaarheid” berekent de werkbank voor drie paren het contrast: “Tekst op de paginaachtergrond”, “Tekst op kaarten” en “Tekst op knoppen”. Elk paar krijgt een getal en een woord, van “Zeer goed leesbaar” tot “Niet leesbaar”.

Elk paar moet minstens 4,5:1 halen, anders kan het kleurenpalet niet worden opgeslagen, en de werkbank zegt welk paar te zwak is. Zo blijft je winkel voor iedereen leesbaar, ook voor mensen die slecht zien.

Het vak “Leesbaarheid” met drie regels, elk met contrastgetal en beoordeling, waarvan één “Krap — moeilijk te lezen”, daaronder de melding dat de winkel dit kleurenpalet niet accepteert.
De opname toont de Engelse interface.

Logo en ondertitel

Het logo kies je onder “Logo” met “Kiezen uit MediaStudio” uit je afbeeldingen; het staat dan bovenaan elke pagina van je winkel. Zonder logo staat daar de naam. Net als de productafbeeldingen wordt het niet gekopieerd: vervang je het in MediaStudio, dan verandert het in de winkel mee, en zolang het in de winkel staat, kan het daar niet worden verwijderd. “Logo verwijderen” haalt het uit de winkel.

De “Ondertitel” is één zin onder de naam van je winkel — “Vers gebrand in Lissabon”. Hij is van jou en wordt niet vertaald; leeg laten is prima.

“Ontwerp” van Café Lumen: Ana klikt onder “Logo” op “Kiezen uit MediaStudio” en tikt het logo aan — “Logo overgenomen.” verschijnt —, vult als ondertitel “Vers gebrand in Lissabon” in en klikt op “Opslaan”.De opname toont de Engelse interface.
  1. Klik onder “Logo” op “Kiezen uit MediaStudio” en tik je logo aan.
  2. Vul onder “Ondertitel” je zin in en klik op “Opslaan”.

Het voorbeeld

Naast de velden toont een voorbeeld je winkel zoals je kopers hem zien: logo, naam, ondertitel en een van je producten met afbeelding, prijs en knop, in het gekozen lettertype. Op smalle schermen klap je het open met “Voorbeeld”.

Het is alleen een weergave — er kan niets in worden gekocht en er wordt niets gepubliceerd. Je kopers zien nieuwe kleuren pas als je hebt opgeslagen.

Het voorbeeld naast het kleurenpalet: kop met logo en “Café Lumen”, de ondertitel en een kaart “Lumen Blend” met afbeelding, prijs en knop in de accentkleur.
De opname toont de Engelse interface.

Gerelateerde handleidingen en volgende stappen

Maak kennis met de tool: ⁦ShopBuilder ai⁩

Help ons KENJTEC te verbeteren

Google Analytics helpt ons de website te verbeteren. Google ontvangt gebruiks- en apparaatgegevens; verwerking in de VS is mogelijk.

Vrijwillig. Je keuze geldt 180 dagen en je kunt die op elk moment wijzigen in de cookie-instellingen.

Privacyverklaring