Share
Wat je gaat creërenIn deze zelfstudie maken we een lay-out voor een winkel met handgemaakte artikelen. Ik zal niet te veel praten over specifieke tekengrootten of kleurcodes, maar zal me in plaats daarvan concentreren op het uitleggen van de lettertype-opties, kleuren, verhoudingen enzovoort.
Om te kunnen volgen, heb je een aantal (gratis beschikbare) middelen nodig:
Voordat u begint met het ontwerpen van uw lay-out, moet u eerst definiëren wat de zakelijke doelstellingen van deze oefening zijn. Is de hoogste prioriteit om merkbekendheid te vergroten? Is het om producten aan nieuwe klanten te verkopen, of om hen eerst waarde te bieden, hun gegevens te krijgen en ze later te verkopen? U moet nadenken over marketing, zakelijke doelstellingen en uw gebruikersbehoeften om een lay-out te ontwerpen die uw doelgroep overtuigt om acties te ondernemen die u wilt.
Begin met het stellen van de volgende vragen:
Voor deze zelfstudie heb ik besloten me te concentreren op sterke beelden en genereus gebruik van negatieve ruimte om een gevoel van vrijheid en duidelijkheid te creëren. Ik wil dat het ontwerp er stijlvol uitziet en aantrekkelijk is voor mensen die om hun imago geven.
Voordat we naar Adobe Photoshop gaan en visuals down krijgen, moeten we enkele variabelen definiëren, zoals kleuren, stijl en algemene richting.
Begin met het verzamelen van afbeeldingen die je leuk vindt voor je moodboard en kleurenpalet. Ik gebruik meestal Pinterest, maar gomoodboard.com is erg handig en werd puur ontworpen voor het maken van moodboards.
gomoodboard.com is een eenvoudige en gemakkelijk te gebruiken moodboarding-tool.Laten we vervolgens een kleurenschema voor uw ontwerp maken; een die relevant is voor uw merk en een beroep op uw doelgroep zal doen. Het is vaak een goede gewoonte om een kleurenpaletgenerator zoals Adobe Color CC (voorheen Kuler) te gebruiken, waardoor u tijd kunt besparen met het kiezen van kleuren.
Upload een afbeelding van je moodboard en kijk welke kleuren worden gegenereerd. Pas het palet aan uw behoeften aan en sla de kleuren op voor toekomstig gebruik.
Met Adobe Color CC kunt u een kleurenpalet van een afbeelding maken.Geïnspireerd door enkele items in ons moodboard, gaan we met de Source Pro lettertype-familie, inclusief zowel sans als serif-versies van het lettertype. Een combinatie van beide voegt een gebalanceerd gevoel en sterke koppen toe.
Voordat we creatief worden in Adobe Photoshop, gaan we een aantal zaken uitzoeken, zoals het maken van een nieuw document en het instellen van enkele richtlijnen.
Open Adobe Photoshop en maak een nieuw document CMD + N. Definieer de afmetingen ervan naar wat u denkt dat past bij uw ontwerpbehoeften - in mijn geval is dat zo 1400x3564px.
Stel daarna een aantal hulplijnen in, zodat onze lay-out voldoende ruimte heeft en er in evenwicht uit ziet. Het instellen van enkele richtlijnen zorgt voor netheid en zal helpen om de breedte van onze website te definiëren voor de doeleinden van dit ontwerp. Ga naar Bekijken> Nieuwe gids ... en stel een aantal richtlijnen. Ik kies meestal 1000px als beginpunt en voeg wat richtlijnen toe vanuit de hoeken, zodat er ruimte is om te ademen.
Notitie: Richtlijnen gebruikt voor deze tutorial: verticaal op 200px, 500px, 550px, 700px, 850px, 900px en 1200px.
Tip: U kunt ook de GuideGuide Photoshop-plug-in gebruiken om dit proces nog sneller te maken.
We beginnen met ons winkelontwerp door een visueel aantrekkelijk bovengebied te creëren om de aandacht van de bezoeker te trekken en direct een bericht te sturen over waar de site over gaat.
Maak een nieuwe groep met de naam "Navigatie" en stel een nieuwe horizontale richtlijn in op 130 x. Dit is waar ons logo, navigatielinks en zoekfunctie zullen blijven. Plaats uw logo aan de linkerkant. Als je er geen hebt, maak dan een rechthoekige vorm en plaats er tekst op.
Plaats nu uw navigatie-items als een zuivere tekst. Vanaf de planningsfase moet u al weten wat u in uw navigatie moet opnemen, zodat uw potentiële klant het nuttig vindt. Gebruik de Horizontaal tekstgereedschap (T) om uw linktitels te schrijven en deze naast uw logo te plaatsen, waardoor u veel ruimte overhoudt.
Zoeken is een ongelooflijk belangrijke functie voor e-commerce. Maak uw zoekveld prominent en toegankelijk door het aan de rechterkant in uw hoofdnavigatie bovenaan te plaatsen. Gebruik het voor het maken van het Rechthoekgereedschap (U) en de Horizontaal tekstgereedschap (T). Merk op hoe kleuren worden geïnspireerd door de afbeelding die we met Adobe Color CC hebben gebruikt.
Nu is het tijd om een opvallende afbeelding te plaatsen die een centraal punt van de hele website zal zijn zodra de bezoeker deze voor de eerste keer ziet. Zoals je tegenwoordig heel vaak zult zien op het web, kiezen we voor een hoge beeldkwaliteit met een sterke en duidelijke focus, waardoor tekst en UI-elementen kunnen worden overlay.
Gebruik makend van Rechthoekgereedschap (T) teken een 1400x700px (elke kleur) rechthoekige vorm en plaats deze rechts onder de topnavigatie (onthoud 130px horizontale richtlijn? Het is voor deze vorm). Sleep vervolgens een afbeelding naar keuze en plaats de laag boven de rechthoekige vormlaag.
Houd daarna de alt toets en muis over de afbeeldingslaag totdat u een kleine pijl naar beneden ziet wijzen en laat de muis los om een a te maken Knipmasker dus de afbeelding is alleen zichtbaar binnen het gebied van de rechthoek.
Raken CMD + T om de grootte van de foto te wijzigen, en zorg ervoor dat u de knop ingedrukt houdt Verschuiving sleutel zodat u het proportioneel aanpast.
Laten we, om ons beeld te helpen de aandacht meer te richten op het horizontale midden, een verloop toevoegen dat van onder naar transparant gaat. Haal de op Gradient Tool (G) en pas het aan om van zwart te gaan # 000000 transparant. Houd daarna vast Verschuiving toets en sleep met je muis van de onderkant van de afbeelding naar het midden om een verloop te maken. Maak er dan een Knipmasker en verminder zijn ondoorzichtigheid naar 50% dus het is niet zo intens. Hernoem de laag naar "Shadow" zodat het gemakkelijk te identificeren is.
Nu is het tijd om een krachtige kop te gebruiken die het oog van uw bezoeker trekt en hen aanmoedigt om meer te weten te komen. Gebruik de grote en krachtige Source Sans Pro en schrijf een korte kop. Ik heb gebruikt Source Sans Pro (zwart) 70px grootte en 160 voor brief bijhouden.
U hebt de aandacht van de gebruiker gewekt, biedt nu een secundaire boodschap en, belangrijker nog, een oproep tot actie (ook bekend als CTA.) Ik heb gebruikt 28px grootte Source Serif Pro (standaard) voor de subkop en hergebruikte de zoekknop om de gebruikersinterface consistent te houden.
Let op de afstand die ik gebruik. Laat altijd voldoende ruimte rond elementen zodat ze sneller worden waargenomen en er meer georganiseerd uitzien. Als u goed kijkt, ziet u ook dat tekstlagen dichter bij elkaar liggen. Dit is te wijten aan de wet van Nabalt van Gestalt.
"Volgens de wet van nabijheid lijken dingen die bij elkaar in de buurt zijn te worden gegroepeerd."
En we zijn klaar met de "verwelkomende nieuwe klanten", of header, gebied. Nadat we de aandacht en interesse van de bezoeker hebben gewekt, is het tijd om ze wat meer voordelen te laten zien die onze winkel te bieden heeft.
Omdat we ons bovenste gedeelte van de website redelijk minimaliseerden, gaan we voor de rest van de lay-out met een schone en eenvoudige esthetiek.
Plaats een kop die uw bezoekers kan interesseren en een korte beschrijving die hen nog meer zal aanmoedigen. Ik heb gebruikt Bron Sans Pro (Semibold) 24 px en een donkergrijs # 282723. Zorg ervoor dat er voldoende ruimte boven de kop is, zodat deze overeenkomt met het bovenste gedeelte.
Gebruik voor de beschrijving iets helderder, zodat het visueel zwakker is en direct wordt gezien als secundair in belang. Ik heb gebruikt 16px Source Serif Pro (standaard) en de kleur is grijs #adadad.
Een effectieve manier om vertrouwen te creëren, is door gebruik te maken van aantrekkelijke beelden van hoge kwaliteit die de hersenen triggeren, waardoor een verlangen ontstaat. Zorg ervoor dat u tijd investeert door geweldige foto's van uw producten te maken of door een professionele fotograaf te vragen om de klus te klaren. Voor deze tutorial zal ik fictieve producten gebruiken, dus ik hoef zelf geen foto's te maken-in plaats daarvan gebruik ik die van Unsplash en Stock Up.
Kies het Rechthoekgereedschap (U) en teken een rechthoekige vorm. Sleep daarna uw productfoto naar Photoshop, plaats deze over de rechthoek en maak een Knipmasker. Verklein de afbeelding indien nodig door erop te slaan CMD + T.
Plaats uw rechthoek tussen de eerste en tweede verticale richtlijnen omdat we aan het begin gelijke gebieden voor productafbeeldingen hebben gedefinieerd.Om het eenvoudig te houden, bieden we slechts basisinformatie over het product, waaronder de titel en prijs (die mogelijk gebruikers triggers die meer willen weten).
Kies hetzelfde Source Serif Pro lettertype en voer de titel in met donkerder grijs zoals gebruikt voor de kop van het gedeelte. Gebruik daarna lichter grijs voor het prijskaartje, omdat het een secundaire informatie is en niet te veel visuele sterkte vereist. Nog een ding om in gedachten te houden is dat onze winkelelementen zoals titels, call-to-action-knoppen en beschrijvingsblokken gecentreerd zijn.
Plaats nu alle productlagen in één groep en dupliceer ze door erop te slaan CMD + J, plaats ze tussen de eerder gedefinieerde verticale richtlijnen en laat spaties tussen.
We zijn klaar met een "Trending" -sectie met drie producten. Volgens Paul Seys zijn drie opties het optimale aantal om uw aanbod overtuigender te maken.
"Een dergelijke techniek staat bekend als het 'Goldilocks-effect' (of 'Goldilocks-prijszetting'). De term is afgeleid van het verhaal van de gebroeders Grimm waarin Goldilocks drie kommen pap eet; de eerste is te heet, de volgende is te koud, maar de laatste is 'precies goed'. "
Laten we nu een kleine scheidingslijn plaatsen zodat deze de lay-out in secties scheidt. Ik heb de Lijngereedschap (U) 1px lichtgrijs # e6e6e6 dus het is zichtbaar, maar niet te sterk.
Tip: Houd ingedrukt Verschuiving toets om eenvoudig een perfect horizontale lijn te tekenen.
Laten we nu een ander gedeelte maken met meer producten en het 'Populair' noemen. Mensen zijn altijd op zoek naar validatie en het tonen van populaire producten waarvan anderen genoten hebben, geeft hen sociaal bewijs dat deze producten het geld waard zijn.
Duplicaat CMD + J en pas de kop, beschrijving en producten van de sectie 'Trending' aan. Dupliceer meer producten en maak een raster van 3x2 van je beste producten.
Na het blootstellen van de meeste visuals om interesse op te wekken en te verlangen dat het tijd is om bezoekersinformatie vast te leggen voor het geval ze nu geen zin hebben om te kopen, kunt u later contact opnemen.
We voegen een eenvoudige blogsectie toe met dezelfde kop en beschrijving en een aantal fragmenten van de blogposts om gebruikers om te leiden naar inhoud die hen mogelijk interesseert.
Kies het Rechthoekgereedschap (U) en teken een enorme rechthoek die als achtergrond voor deze nieuwe sectie zal dienen. Gebruik subtiel lichtgrijs om een lichte scheiding van de producten te creëren. Ik heb gebruikt #fbfafa. Kopieer nu de titel en beschrijving van het vorige gedeelte en plaats deze boven op de nieuwe achtergrond.
Kies nu het Horizontaal tekstgereedschap (T) en voer de titel, de datum en het korte uittreksel van je blog in. Ik heb het opnieuw gebruikt Source Serif Pro voor de titel en beschrijving en Source Sans Pro voor de datum.
Zelfs in dit blogblok zie je een duidelijke visuele hiërarchie, waarbij de titel het donkerst en grootste is en andere elementen kleiner en lichter van kleur. Gebruik altijd visuele hiërarchie om logische flow te bereiken. Om consistentie te behouden, worden blogposts zo groot als de productblokken.
Plaats nu alle blogberichten in een groep en dupliceer deze twee keer door op te slaan CMD + J, plaats het tussen de verticale richtlijnen en laat de tussenruimten er tussen, net als bij producten.
Na het tonen van enkele coole producten en waardevolle blogposts is het tijd om je bezoekers een beetje te pushen en een formulier met een duidelijke call-to-action te bieden om je te abonneren..
Grijp opnieuw de Rechthoekgereedschap (U), kies een donkerdere kleur, zoals # 282723 en teken een achtergrond voor ons inschrijfformulier. Door een merkbaar donkerdere achtergrond te gebruiken, creëert u een contrast dat de aandacht van de kijker automatisch trekt.
Schrijf nu een korte blurb waarin wordt uitgelegd waarom mensen zich moeten abonneren; uitdrukken voordelen over- Kenmerken. Daarna navigeer je naar de navigatie van ons ontwerp en dupliceer je het zoekveld inclusief de knop, we zullen het hergebruiken voor het inschrijfformulier.
Versleep de gedupliceerde lagen en plaats ze bovenop onze nieuw gemaakte achtergrond en pas vervolgens de invoervelden en de call-to-action-knop aan.
Ten slotte moet elke sjabloon een voettekst bevatten met links zodat mensen naar beneden kunnen scrollen en navigeren naar belangrijke pagina's, zoals klantenondersteuning, contactinformatie, sociale netwerken en meer.
Nogmaals, dupliceer de tekstlagen van de blogpost en pas ze aan om links van uw keuze te tonen. Splits verschillende koppelingsgroepen en vorm kolommen die op gelijke afstanden in een rij staan.
Laatste tip: voeg een auteursrechtlijn toe helemaal onderaan de lay-out.
Dat is het! We zijn eindelijk klaar met het themaontwerp voor onze Shopify-winkel, ga nu door en bekijk uw documentlagen, verwijder de overbodige en laat deze aan uw ontwikkelaar over, of, nog beter, codeer hem zelf!
Accentsconagua