Share
Wat je gaat creërenIn deze tutorial zal ik je door het ontwerpproces van een eenvoudige en conversiegeoriënteerde landingspagina van de app leiden. We gebruiken de Tuts + Android-app voor de demo, benadrukken de functies en voordelen ervan en gebruiken calls-to-actions overal.
Bij het ontwerpen van bestemmingspagina's zijn er enkele dingen die u moet doen om te genieten van hoge conversiepercentages.
Volgens de groeihakker Neil Patel, heb je voor een concurrentie verpletterende bestemmingspagina het volgende nodig:
We gaan alle bovenstaande elementen implementeren om onze bestemmingspagina zo effectief mogelijk te maken.
Ik raad je ten zeerste aan om AIDA-principes in webdesign door Shaun Cronin aan te wenden. AIDA staat voor Aandacht, Interesseren, Verlangen en Actie; en deze principes kunnen worden toegepast op verschillende situaties waarbij producten of diensten worden verkocht.
Uit onderzoek blijkt dat mensen het niet erg vinden om te scrollen, dus als je eenmaal de eerste interesse hebt aangemaakt aan de bovenkant van de pagina, hoef je je geen zorgen te maken over het langer maken van je bestemmingspagina. Dit is nodig om een geweldig verhaal te vertellen en overtuigende elementen toe te voegen.
Effectieve bestemmingspagina's kunnen niet eenvoudig eenmaal worden ontworpen en goed presteren. Je moet blijven testen met verschillende combinaties van kopie, kleuren, call-to-action en andere elementen om de beste resultaten te behalen.
Zie A Web Designer voor meer informatie over A / B testen door Siddharth Deswan.
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.
Laten we een aantal hulplijnen instellen, 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 100px, 600px en 1100px.
Tip: U kunt ook de GuideGuide Photoshop-plug-in gebruiken om dit proces nog sneller te maken.
De koptekst of het gebied 'boven de vouw' speelt een zeer belangrijke rol bij het contact maken met gebruikers en ervoor zorgen dat bezoekers op de website blijven.
De belangrijkste functie van onze app-bestemmingspagina is om bezoekers te overtuigen om de app te downloaden. Om die reden zullen we ons concentreren op de voordelen van het uitproberen van de app en het gemakkelijk downloaden.
Laten we eerst een groep maken genaamd "Header" door op te klikken Laag> Nieuw> Groep ... of op het kleine pictogram onderaan het lagenpaneel. Daarna pak je een Horizontaal tekstgereedschap (T), Kiezen PT Sans (Bold) 18px lettertype, stel de kleur in op zwart # 000000 en voer de naam van uw app in als logo, plaats deze in de linkerbovenhoek rechts naast de eerste verticale hulplijn. Geef het wat ruimte erboven zodat het er niet krap uitziet.
Laten we een call-to-action-knop maken die we tijdens ons ontwerp opnieuw zullen gebruiken om ervoor te zorgen dat bezoekers actie ondernemen. Maak een nieuwe groep met de naam "CTA btn" en kies de Afgerond rechthoekgereedschap (U), reeks Radius naar 2px, verander de voorgrondkleur in lime groen # 17e594 en teken een 206x38px rechthoekige vorm.
Klik nu met de rechtermuisknop op de laag, selecteer Meng opties… en controleer de Beroerte keuze. Daarna donkerder groen aanbrengen # 09ba74.
Kies het Horizontaal tekstgereedschap (T) nogmaals en voer de kopie in voor onze knop. Ik heb gebruikt PT Sans (Bold) 12px en de kleur wit #FFFFFF.
Kies nu het Rechthoekgereedschap (T) en teken een 1200x600px (elke kleur) rechthoekige vorm en plaats deze direct onder onze minimale topnavigatie. Ik heb verlaten een 25px opening tussen het logo en de vorm zoals ik deed voor het bovenstaande logo, dus het is consistent.
Pak nu een Toolkit-foto uit Unsplash en plaats deze 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 in 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 een filterlaag van grijs toevoegen, zodat we onze achtergrond klaar maken voor kopiëren en het screenshot van de app.
Verander de voorgrondkleur in donkergrijs # 222325 en maak een nieuwe laag, plaats deze dan boven de fotolaag en maak opnieuw een Knipmasker. Na die slag Alt + Backspace om de laag met grijs te vullen. Tot slot, verminder de lagen ondoorzichtigheid naar 80%.
Grijp de Horizontaal tekstgereedschap (T) verander de kleur opnieuw naar wit #FFFFFF en gebruiken PT Sans (Bold) 48px grootte voer het hoofdbericht in. Zorg ervoor dat je er veel ruimte boven geeft.
Verlaag nu de lettergrootte naar 21px, kiezen normaal lettertype, voer een meer beschrijvend bericht in en plaats het onder het hoofdbericht. Als u de lijnen evenwichtig en gemakkelijk leesbaar wilt maken, verhoogt u de lijnhoogte ten minste 30px. Plaats de beschrijving onder de hoofdkop, in mijn geval ben ik verhuisd 40px naar beneden.
Laten we onze call-to-action (CTA) -knop herhalen, zodat het voor de bezoeker duidelijk is wat hij vervolgens moet doen nadat hij de kopie heeft gelezen. Zoek de "CTA btn" -groep en dupliceer deze door erop te slaan CMD + J, plaats het daarna onder het secundaire bericht.
We zijn klaar met de kopie en de belangrijkste call-to-action, dus laten we een echt app-voorbeeld weergeven om te laten zien hoe de app eruit ziet voordat mensen besluiten deze te downloaden.
Download de gratis Samsung Galaxy S5 mockup van Martin Adamko en plaats deze in uw document. Houd daarna de CMD toets, klik op alle lagen die bij die mockup horen en klik met de rechtermuisknop om te kiezen Omzetten naar slim object. Gebruik CMD + T om het formaat te wijzigen en naar rechts te gaan vanuit onze hoofdkopie en beschrijving.
Plaats daarna uw app-scherm op het mockup van de smartphone door op de laag met het slimme object te raken en deze op te slaan. Ik heb een schermafbeelding van een nieuwe Android-app Tuts + Cursussen gebruikt.
We zijn klaar met de header. Minimaliseer de groep en maak een nieuwe aan met de naam "Voordelen".
Daarna kies je de Horizontaal tekstgereedschap (T) verander de kleur opnieuw naar hetzelfde donkergrijs # 222325 we hebben het filter gebruikt (maak je ontwerp consistent en samenhangend in plaats van meer kleuren te brengen) en gebruik PT Sans (Bold) 30px voer een sterke verklaring in en plaats deze onder het koptekstgebied, zodat er veel ruimte erboven overblijft.
Nu hebben we een kans om onze bezoekers te overtuigen waarom onze app het downloaden waard is. Denk aan voordelen ten opzichte van functies, zodat mensen zichzelf kunnen visualiseren door het te gebruiken. Verander de kleur in een subtiel grijs blauw # 6a7588 en voer een aantal regels in om uit te leggen waarom mensen uw app moeten gebruiken. Ik ben gegaan voor PT Sans (Regular) 21px met de regelhoogte ingesteld op 32px, dezelfde instelling als gebruikt voor het secundaire bericht in het koptekstgedeelte.
Let op de afstand tussen tekstblokken, laat voldoende ruimte vrij om dat lichte gevoel aan je ontwerp te geven.
Nogmaals, laten we de call-to-action (CTA) -knop herhalen, zodat bezoekers die niet eerder zijn overtuigd onmiddellijk actie kunnen ondernemen nadat ze uw uitkeringskopie hebben gelezen. Dupliceer de "CTA btn" -groep door op te raken CMD + J en plaats het onder de voordelenkopie. Verplaats het naar de groep "Benefits" om uw document overzichtelijker te maken.
We zijn klaar met het voordelengebied, dus minimaliseer de groep en maak een nieuwe aan met de naam "Functies". Hier zullen we enkele app-functies benadrukken, zodat bezoekers die meer willen weten en al geïnteresseerd zijn meer te weten komen over de app.
Verander de voorgrondkleur in lichtgrijs #fbfbfb, we gebruiken een andere achtergrondkleur voor het gedeelte Functies om het van de rest te scheiden. Kies daarna de Rechthoekgereedschap (U) en teken een 1200x700px formaat dat als achtergrond zal dienen. Zorg ervoor dat u de sectie hierboven ruimte geeft.
Om het Functies-gebied apart te zetten, plaatsen we 1px horizontale lijnen tussen de achtergronden. Kies het Lijngereedschap (U), stel de Gewicht naar 1px en verander de kleur in een donkerder grijs #eeeeee.
Tip: ingedrukt houden Verschuiving toets om een perfect horizontale lijn te tekenen.
Open de groep "Benefits" en zoek de kop van de kop, druk op CMD + J om het te dupliceren en naar de groep "Functies" te gaan. Bewerk deze om aan uw behoeften te voldoen en plaats deze in de eerder gemaakte grijze achtergrond.
We zullen drie blokken met functies maken met een pictogram, kop en een korte beschrijving. Maak een nieuwe groep en noem deze "Feature 1" of iets wat meer beschrijvend is. Ga naar Iconfinder en download a 48x48 px gebruikerspictogram. Klik met de rechtermuisknop op de naam van de laag en pas de volgende opties toe.
U merkt misschien dat we de knopstijl eigenlijk nabootsen, zodat alles consistent is.
Nogmaals, dupliceer de koplaag, plaats deze in de groep "Feature 1" en gebruik de Horizontaal tekstgereedschap (T) verminder de lettergrootte naar 16px en regelhoogte naar 22px.
Gebruik hetzelfde Horizontaal tekstgereedschap (T) schrijf drie korte regels op die je functie verklaren. Zorg ervoor dat de typekleur verandert in het eerder gebruikte grijsblauw # 6a7588. Plaats onder het pictogram en de kop.
Minimaliseer de groep en dupliceer deze twee keer door erop te slaan CMD + J. Pas daarna de gedupliceerde groepen aan uw app aan. Voor deze tutorial heb ik de markerings- en klokpictogrammen van Iconfinder gebruikt. Zorg ervoor dat er voldoende ruimte tussen de blokken is zodat het er uitgebalanceerd uitziet.
Hoe meer u laat zien hoe het werkelijke product er beter uitziet, we zullen een ander perspectief gebruiken van onze smartphone-mockup. Ik heb de eerder gebruikte Samsung Galaxy S5-mockup omgedraaid en de schermafbeelding op Google Play vervangen. Klik met de rechtermuisknop op de mockup-laag bovenaan en selecteer Nieuw slim object via kopiëren om een onafhankelijke kopie te maken.
Om het model van de smartphone aan te passen, klik je twee keer op de laagminiatuur en plaats je het app-scherm daar.
We voegen wat sociale geloofwaardigheid toe voor onze app door enkele testimonials van app-gebruikers te tonen.
Minimaliseer alle groepen en maak een nieuwe aan met de naam "Testimonials". Voer een kop van een sectie in zoals eerder gedaan en plaats deze onder de "Functies" -groepsachtergrond zodat er een constante hoeveelheid ruimte overblijft.
Open nu de groep "Functies", dupliceer een ervan en verplaats deze naar de groep "Testimonials". We zullen de groep hergebruiken voor onze getuigenissen. Bewerk de kopie, verander de kop in de naam en beschrijving van een persoon in de kopie van de getuigenis.
Verwijder het pictogram en, met behulp van de Ellipse Tool (U), teken een cirkelvorm. Plaats daarna de profielfoto van de persoon boven de cirkelvormlaag en maak een Knipmasker. Ik heb een gezicht van User Inter Faces gebruikt.
Kopieer ten slotte de pas gemaakte testimonialgroep en pas deze aan met verschillende namen, getuigenissen en profielfoto's.
Minimaliseer de groep 'Testimonials' en maak een nieuwe 'Footer'. We plaatsen hier een laatste call-to-action (CTA) -knop en een aantal links naar binnenwebpagina's terwijl de meeste mensen naar beneden scrollen om naar de architectuur van de site te zoeken.
Ga naar de "Header" -groep en houd de toets ingedrukt Verschuiving toets, kies de rechthoekvorm en grijze filterlagen. Na die slag CMD + J om ze te dupliceren en naar uw nieuwe "Voettekst" -groep te verplaatsen. Plaats vervolgens een foto naar keuze tussen de rechthoekige vorm en grijze filterlagen en maak een Knipmasker.
Voeg nog een kop toe en moedig mensen aan om actie te ondernemen en uw app te downloaden. Maak het wit #FFFFFF dus het is goed zichtbaar op de donkere achtergrond. Dupliceer daarna de call-to-action (CTA) -knop en plaats deze onder de titel.
plukken Horizontaal tekstgereedschap (T) nogmaals en voer een aantal links van uw website in. Ik heb wit gebruikt #FFFFFF PT Sans (Regular) 16px en een regelhoogte van 29px.
Dupliceer uw tekstlaag en pas deze aan uw app aan. Hierna plaats je een copyright-regel helemaal onder aan je voettekst en laat je veel ruimte boven en eronder.
Dat is het! We zijn klaar met het themaontwerp, bekijken nu uw documentlagen, verwijderen de onnodige en leggen deze over aan uw ontwikkelaar, of, nog beter, codeer hem zelf!
Accentsconagua