Share
Wat je gaat creërenIn deze tutorial zal ik je helpen bij het ontwerpen van een elegante landingspagina voor een fictieve "dankbaarheid log" -service. We beginnen helemaal opnieuw en maken de lay-out snel met Adobe Photoshop. We zullen enkele basis- en tussenliggende technieken gebruiken om dit ontwerp te maken met conversie in gedachten. Laten we beginnen!
Om te kunnen volgen, heb je een aantal (gratis beschikbare) middelen nodig:
Begin met het maken van een nieuw Photoshop-document (Bestand> Nieuw ... ) met behulp van de hieronder getoonde instellingen. Je bent vrij om een canvas te gebruiken van elke gewenste dimensie - het web heeft immers geen vaste breedte.
Laten we een aantal hulplijnen instellen, zodat onze lay-out voldoende ruimte heeft en er in evenwicht uit ziet. Ik gebruik niet altijd een voorgedefinieerd raster, maar het instellen van enkele richtlijnen zorgt voor netheid en zal helpen om de breedte van onze website te bepalen. Ga naar Bekijken> Nieuwe gids ... en stel een aantal richtlijnen. Ik kies meestal 1000px als een website-breedte en voeg een aantal richtlijnen toe vanuit de hoeken, zodat er ruimte is om te ademen.
Notitie: Richtlijnen gebruikt voor deze tutorial: verticaal op 200px, 500px, 700px, 900px en 1200px.
Tip: U kunt ook de GuideGuide Photoshop-plug-in gebruiken om dit proces nog sneller te maken.
Door aan de etiquette van Photoshop te blijven, houden we de dingen overzichtelijk en kunnen we dus gemakkelijk navigeren en bewerken. Laten we drie lagengroepen maken met de naam Koptekst, Inhoud en Voettekst. Ga naar om groepen te maken Laag> Nieuw> Groep ... en geef elke een titel zoals vermeld. Om snel een groep te maken, klikt u op het mappictogram.
De koptekst of het gebied "boven de vouw" (waar dat ook is) speelt een zeer belangrijke rol bij het contact maken met gebruikers en ervoor zorgen dat bezoekers op de website blijven. Voor deze lay-out van de bestemmingspagina gebruik ik een foto van twee mensen die op een bank zitten; een van hen houdt zijn handen omhoog in de lucht met positieve emoties en geluk.
Laten we eerst de achtergrond van de blog maken. Teken in de groep "Header" een zwarte # 000000 gekleurde rechthoekige vorm met behulp van de Rechthoekgereedschap (U). In mijn geval heb ik een rechthoek van 1400x728 pixels getekend en deze bovenaan het document geplaatst.
Download nu de Chillin 'in de zonfoto, sleep deze naar het Photoshop-document en plaats deze boven de rechthoeklaag. Hernoem de afbeeldingslaag naar iets dat je later zult herkennen, in mijn geval dat ik heb gebruikt IMG. Houd daarna de alt toets en muis over de fotolaag totdat u een kleine pijl naar beneden ziet wijzen en laat deze vervolgens los. U hebt zojuist een gemaakt Knipmasker. Eindelijk de IMG-laag verkleinen ondoorzichtigheid naar 70% dus de tekst die we bovenaan plaatsen is beter leesbaar.
Nu slaan CMD + T en wijzig het formaat van de foto om aan uw behoeften te voldoen.
Tip: ingedrukt houden Verschuiving sleutel om proportioneel te transformeren.
Laten we nu een algemene navigatie voor onze bestemmingspagina maken, zodat mensen door de website kunnen navigeren.
Maak een nieuwe groep met de naam "Navigatie", plaats deze in de groep "Koptekst". Kies daarna de Rechthoekgereedschap (U) en teken een witte rechthoekige vorm tussen de eerste en de laatste verticale richtlijn. Maak het rond 60px in de hoogte zodat de navigatie-items enige ruimte hebben om te ademen en er schoon uit te zien. Eindelijk verplaats het 30px vanaf de bovenkant, zodat we dit zwevende effect kunnen hebben dat mooi op onze afbeelding blijft.
Laten we nu een logo en enkele links plaatsen om onze navigatiebalk eruit te laten zien als iets dat mensen kunnen gebruiken. Voor het logo heb ik eenvoudigweg "Grttd" geschreven met Playfair Display (vet cursief) doopvont 26px grootte en kleur donkergrijs # 0e0e0e.
Voor de navigatielinks die ik heb gebruikt Bron Sans Pro 14px met een grotere afstand tussen de letters. Voor de hoofdaanroep 'Sign Up' die ik heb gebruikt Zwart en de kleur groen # 96c218. We zijn klaar met de "navigatie", dus minimaliseer het door op het kleine driehoekje naast de groepsnaam te klikken.
Laten we een inspirerende boodschap schrijven bij het beeld en het algehele idee van de website. Ik gebruik een enorm vet lettertype met een subkop die het concept gedetailleerder uitlegt.
Omdat we een vrij donkere achtergrond hebben voor ons bovenste gedeelte, is het verstandig om bleke tekst te gebruiken om een hoog contrast te creëren en de leesbaarheid te garanderen. Ik heb wit gebruikt #FFFFFF Source Sans Pro (zwart) 80px met een regelhoogte van 86px. Plaats het ongeveer 120px onder de navigatiebalk, zodat het bericht voldoende ruimte rond heeft om als belangrijk te worden beschouwd.
70% zicht uitgezoomd.Laten we nu de subkop plaatsen die het hele concept verduidelijkt en een aantal vragen beantwoordt die bezoekers mogelijk hebben. Om een mooie typografische combinatie te maken, mengen we de belangrijkste schreefloze kop met het elegante serif-lettertype dat we eerder voor het logo gebruikten.
Raadpleeg voor meer inspirerende lettertypecombinaties het typografische project Google Web Fonts en een handleiding voor beginners voor het koppelen van lettertypen.
Voor deze tutorial heb ik wit gebruikt #FFFFFF 26px Playfair Display (cursief) lettertype en plaatste het 40px onder de hoofdkop.
Laten we iets interessants toevoegen zodat de bezoeker het voordeel van een verblijf op de website kan zien. Een dankbaarheidslogboek is gebaseerd op het vastleggen van de dingen waarvoor je dankbaar bent, dus wat sociaal bewijs zou een goed idee zijn, mensen laten zien die het echt gebruiken en iets wenselijker tonen zoals een streep.
Maak een nieuwe groep met de naam "Voorbeeld" en kies vervolgens de Ellipse Tool (U) en, ingedrukt Verschuiving, teken een cirkel. In mijn geval is dat zo 60x60px. Leg daarna iemands gezicht op de bovenkant van de cirkellaag en houd de toets ingedrukt alt toets, beweeg de muis over de laag totdat je een kleine pijl ziet die naar beneden wijst, laat hem dan los om een a te maken Knipmasker. Nu kunt u het formaat van de afbeelding aanpassen door op te klikken CMD + T.
Voor deze tutorial gebruik ik een willekeurig gezicht van User Inter Faces.
Pro tip: houd de Shift-toets ingedrukt om proportionele vormen te tekenen / vergroten / verkleinen.
Nu moeten we een indicator van opeenvolgende logboeken plaatsen. Laten we nog een cirkelvorm maken, deze keer kleiner en een cijfer erin plaatsen. Eenvoudig, maar begrijpelijk, en doet het werk. Voor de cirkelkleur heb ik de eerder gebruikte green opnieuw gebruikt # 96c218. In mijn geval is de grootte 30x30 px en de tekst binnenin wit #FFFFFF Source Sans Pro (Bold) 14px.
Laten we tenslotte onze persoon een naam geven en duidelijk maken waar dit nummer voor staat. Kies het Horizontaal tekstgereedschap (T) en voer een naam en streak-lengte in. In mijn geval heb ik het gebruikt PT Serif (vet cursief) 16 px voor de naam en Bron Sans Pro (standaard) 13px voor de streak. Zorg ervoor dat u een lijnhoogte gebruikt die groot genoeg is zodat de elementen ruimte hebben om te ademen.
Fantastisch, een laatste ding voordat ik naar het inhoudsgebied ga. We hebben een sterke nodig Call To Action (CTA) zodat de gebruiker iets kan doen nadat hij de beelden heeft gezien en de krantenkoppen heeft gelezen. Maak een nieuwe groep met de naam "CTA", stel de voorgrondkleur in op wit #FFFFFF en pak de Rechthoekgereedschap (T). Teken daarna een rechthoekige vorm, in mijn geval is de grootte 280x60px. Let op de consistentie in hoogte die eerder werd gebruikt voor de navigatiebalk.
Voer daarna een aantal overtuigende kopieën in voor de knop. Ik heb "START LIVING →" gebruikt, de kleur is zoals eerder gebruikt op de navigatiebalk donkergrijs # 0e0e0e, doopvont Bron Sans Pro (Semibold) 16px met tracking ingesteld op 140.
Nu zijn we klaar met de "kop". Laten we de groep "Inhoud" openen en een nieuwe maken met de naam "Beschrijving". We plaatsen een sterke kop gevolgd door een meer gedetailleerde beschrijving van de hele website. Het is belangrijk om het te herhalen Call To Action (CTA) dus de gebruiker hoeft niet te hard na te denken, maar kan nog steeds actie ondernemen wanneer hij er klaar voor is.
Kies het Horizontaal tekstgereedschap (T) en kies een krachtig lettertype voor uw kop. In mijn geval gebruik ik het mooie en elegante, maar gezaghebbende uiterlijk Playfair-display (zwart) 60px. Zorg ervoor dat je dit beest veel ruimte geeft om te ademen, ik heb het verplaatst 100px naar beneden uit de headerafbeelding.
Nu hetzelfde gebruiken Horizontaal tekstgereedschap (T) maak een rechthoek door erop te klikken en te slepen. In mijn geval is het een 600x140px formaat doos waar ik een overtuigende kopie voor de gebruikers zet om een beslissing te nemen om op de. te klikken CTA. Voor een duidelijke visuele hiërarchie moet de beschrijvingstekst kleiner zijn en niet zo zwaar. In mijn voorbeeld gebruik ik grijs # 666666 PT Serif (regulier) 18px, lijnhoogte 28px. Het hele element wordt 50 x naar beneden verplaatst vanaf de kop om dit een nette en professionele uitstraling te geven.
Na het lezen van de kopie is onze bezoeker misschien overtuigd om het eens te proberen, dus is het verstandig om de knop Call To Action (CTA) nogmaals te herhalen. Open de "Header" -groep, zoek de "CTA" -groep en dupliceer deze door op te slaan CMD + J. Verplaats het daarna naar binnen de "Beschrijving" groep en verander de knopkleur in onze eerder gebruikte groene en # 96c218 en voor de tekst wit gebruiken #FFFFFF. Verplaats hem naar beneden 50px van de kopie om een consistente spatiëring te hebben.
Ziet er tot nu toe geweldig uit. Laten we een eenvoudige regel plaatsen om het beschrijvingsblok visueel van het volgende blok te scheiden. Kies het Lijngereedschap (U), reeks Gewicht naar 1px en teken een horizontale lijn over de eerste en de laatste verticale richtlijnen. In mijn geval heb ik een lichtgrijze kleur gebruikt # e6e6e6 die niet te sterk is, maar perfect werkt.
Pro tip: houd de knop ingedrukt Verschuiving toets om een perfect rechte lijn te tekenen.
Nu zijn we klaar met het blok "Beschrijving" is het tijd om verder te gaan naar de volgende. Maak een nieuwe groep met de naam "Laat je inspireren". Kopieer daarna de kop en beschrijvingslagen uit de groep "Beschrijving" en verplaats ze naar de groep "Laat u inspireren". Bewerk de lagen en wijzig de kopie. Hieronder is mijn voorbeeld:
Navigeer nu naar de "Header" -groep en zoek de "Voorbeeld" -groep. Dupliceer de hele groep door op te raken CMD + J en verplaats het naar de groep 'Laat je inspireren'. We zullen ons voorbeeld van de top opnieuw gebruiken en enkele gebruikersverhalen tonen om onze bezoeker te inspireren om actie te ondernemen.
Hernoem de groepsnaam in "Verhaal" en verwijder de groene indicator. U moet ook de tekstkleur wijzigen in donkergrijs # 0e0e0e dus het is leesbaar op een witte achtergrond. Gebruik een andere afbeelding voor de avatar en schrijf de positie en locatie van de persoon in lichtgrijs # 666666 zodat mensen meer kunnen relateren aan die persoon.
Maak daarna een tekstvak van ongeveer 300x160px grootte met behulp van de Horizontaal tekstgereedschap (T) en schrijf een voorbeeld van een update van het dankbaarheidslogboek. Ik heb gebruikt PT Serif (Italic) 16px maat donkergrijze kleur zoals eerder gebruikt # 666666.
Dupliceer nu de "Verhaal" -groep twee keer en verander de avatars, namen en beschrijvingen. Plaats deze twee groepen in horizontale volgorde, laat op gelijke afstanden openingen tussen en plaats een lijn na al deze groepen zoals we eerder gebruikten.
Nu we klaar zijn met de groep 'Laat ons inspireren', gaan we nu naar het laatste gedeelte van onze bestemmingspagina. De laatste Oproep tot actie (met wat meer details) zullen bezoekers aanmoedigen om zich aan te melden door een e-mailadres in te voeren.
Maak een nieuwe groep met de naam "E-mail" en navigeer naar de vorige groep om een koplaag te vinden en dupliceer deze door op te slaan CMD + J en verplaats het naar nieuw gemaakte groep. Verander de kop in iets bemoedigend en beweeg rond 100px onder de lijn om de consistentie te behouden.
Super goed! Zet nu de voorgrondkleur op lichtgrijs # f5f5f5 en kies de Rechthoekgereedschap (U) om een vak voor een e-mailveld te tekenen. Het moet dezelfde hoogte hebben als onze hoofdlijn Call To Action (CTA) knop, hoewel de breedte er niet zoveel toe doet. In mijn geval is dat zo 430x60px. Pak dan de Horizontaal tekstgereedschap (T) en schrijf 'Voer uw e-mailadres in' of iets dergelijks, zorg ervoor dat u een donkere kleur gebruikt zodat deze gemakkelijk leesbaar is.
Ga nu naar de groep "Beschrijving" in ons lagenpaneel en zoek de "CTA" -groep. Dupliceer het door erop te slaan CMD + J en verplaats het naar de groep "E-mail". Plaats de knop rechts naast het e-mailveld en centreer het hele element.
80% -weergave uitgezoomd.Het einde is nabij! Laten we alle groepen minimaliseren en de "Voettekst" -groep openen. Zet de voorgrondkleur op donkergrijs # 2d2d2d en, met behulp van de Rechthoekgereedschap (U), teken een rechthoek met een volledige breedte van ongeveer 230px in hoogte. Dit wordt onze voettekstachtergrond en onderscheidt het inhoudsgebied met zijn contrast.
Ga je gang en vind de "Navigation" -groep en logolaag, dupliceer het door erop te slaan CMD + J en verplaats het naar de "Voettekst" -groep. Verander de kleur in wit #FFFFFF en verplaats het rond 50px onder de rand van de footer-rechthoek.
Pak ten slotte de Horizontaal tekstgereedschap (T) en zet enkele links die gebruikers nuttig kunnen vinden. Zorg ervoor dat u uw links groepeert, zodat ze gemakkelijk kunnen worden gekoppeld. In mijn geval heb ik het gebruikt Bron Sans Pro (Semibold) 16px voor koppen van koppelingengroep en PT Serif (regulier) 14px voor linktitels.
Dat is het! We zijn klaar met het ontwerp van de lay-out, dus bekijk nu de lagen, verwijder de overbodige en geef deze over aan uw ontwikkelaar, of codeer het zelf nog beter. Ik heb enkele basistechnieken aangeroerd en mijn workflow voor het ontwerpen van weblay-outs aangetoond, ik hoop dat je iets hebt geleerd.
Ik zou graag uw feedback horen en de resultaten van deze tutorial zien!
Als u onbekend bent met het ontwerp van bestemmingspagina's, raden we een aantal inleidende zelfstudies aan om u op de hoogte te brengen van de basisbeginselen:
Als u geïnteresseerd bent in hulp bij het ontwerp van uw bestemmingspagina, heeft Envato Studio een grote verzameling diensten op het gebied van bestemmingspagina-ontwikkeling en -ontwikkeling die u misschien graag zou willen verkennen. Je kunt ook de Landing Page Themes op Envato Market bekijken.
Accentsconagua