Share
Hva du skal skapeI denne opplæringen vil jeg gå gjennom designprosessen av en enkel og konverteringsorientert app-destinasjonsside. Vi bruker Tuts + Android-appen for demoen, understreker dens funksjoner og fordeler, og bruker anrop til handling overalt.
Når du designer destinasjonssider, er det noen ting du trenger for å få det rette for å nyte høye konverteringsfrekvenser.
Ifølge vekst hacker Neil Patel, for å få en konkurranse-knusende destinasjonsside, trenger du:
Vi skal implementere alle elementene ovenfor for å gjøre destinasjonssiden så effektiv som mulig.
Jeg anbefaler at du tar en titt på å ansette AIDA-prinsipper i webdesign av Shaun Cronin. AIDA står for Oppmerksomhet, Renter, Ønske og Handling; og disse prinsippene kan brukes til ulike situasjoner som involverer salg av produkter eller tjenester.
Forskning viser at folk ikke har noe imot å bla, så når du har opprettet opprinnelig interesse øverst på siden, bør du ikke bekymre deg for å gjøre destinasjonssiden lenger. Dette er nødvendig for å fortelle en flott historie og legge til overbevisende elementer.
Effektive destinasjonssider kan ikke bare utformes én gang og fungerer bra. Du må fortsette å teste med ulike kombinasjoner av kopi, farger, ring til handling og andre elementer for å oppnå de beste resultatene.
For mer informasjon om dette, sjekk ut en webdesigners introduksjon til A / B-testing av Siddharth Deswan.
For å følge med vil du trenge noen (fritt tilgjengelige) eiendeler:
Begynn med å opprette et nytt Photoshop-dokument (Fil> Ny ... ) ved hjelp av innstillingene vist nedenfor. Du er fri til å bruke et lerret av uansett dimensjoner du foretrekker.
La oss sette noen guider slik at vårt layout har nok plass og ser balansert ut. Innstilling av noen retningslinjer vil sikre nøyaktighet og vil bidra til å definere nettsidens bredde for formålet med denne utformingen. Gå til Vis> Ny guide ... og sett noen retningslinjer. Jeg velger vanligvis 1000px som utgangspunkt og legger til noen retningslinjer fra hjørnene, så det har plass til å puste.
Merk: Retningslinjer brukt for denne opplæringen: vertikalt ved 100px, 600px og 1100px.
Tips: Du kan også bruke GuideGuide Photoshop plugin for å gjøre denne prosessen enda raskere.
Overskriften eller området "over fold" spiller en svært viktig rolle i å engasjere seg med brukere og sørge for at besøkende blir på nettsiden.
Vår hovedside for appens landingsside er å overbevise besøkende om å laste ned appen. Derfor vil vi fokusere på fordelene ved å prøve ut appen og gjøre det enkelt å laste ned.
La oss først opprette en gruppe kalt "Header" ved å klikke Lag> Ny> Gruppe ... eller trykke på det lille ikonet nederst på lagpanelet. Etter det ta en Horisontal Typeverktøy (T), velge PT Sans (fet) 18px størrelse skrift, sett farge til svart # 000000 og skriv inn navnet på appen din for å fungere som en logo, plasser den øverst i venstre hjørne rett ved siden av den første vertikale retningslinjen. Gi den litt plass over, så det ser ikke trangt ut.
La oss lage en ring til handlingsknapp som vi skal gjenbruke gjennom hele vårt design for å sikre at besøkende gjør noe. Opprett en ny gruppe kalt "CTA btn" og velg Avrundet rektangelverktøy (U), sett Radius til 2 piksler, endre forgrunnsfargen til lime grønn # 17e594 og tegne a 206x38px størrelse rektangel form.
Klikk nå på høyre museknapp på laget, velg Blandingsalternativer ... og sjekk Stroke alternativ. Deretter gjelder en mørkere grønn # 09ba74.
Velg Horisontal Typeverktøy (T) igjen og skriv inn kopien for vår knapp. Jeg har brukt PT Sans (Bold) 12px og fargen hvit #FFFFFF.
Velg nå Rektangelverktøy (T) og tegne a 1200x600px (hvilken som helst farge) rektangelform og plasser den under vår minimale toppnavigasjon. Jeg har forlatt en 25px gap mellom logoen og formen som jeg gjorde for logoen over, så det er konsistent.
Ta nå et Toolkit-bilde fra Unsplash og legg det over rektangelformlaget. Etter det holder du nede alt tast og mus over bildelaget til du ser en liten pil pekende ned, og slipp deretter musen for å opprette en Clipping Mask så bildet er bare synlig i rektangelområdet.
Truffet CMD + T for å endre størrelsen på bildet, sørg for at du holder nede Skifte nøkkel slik at du endrer størrelsen på det proporsjonalt.
La oss legge til et filterlag med grått, slik at vi gjør bakgrunnen klar for kopiering og appskjermbildet.
Bytt forgrunnsfargen til mørkegrå # 222325 og lag et nytt lag, legg det over fotolaget og lag en gang til Clipping Mask. Etter det treffet Alt + Backspace å fylle laget med grått. Endelig reduser lagets opacity til 80%.
Ta tak i Horisontal Typeverktøy (T) igjen, endre fargen til hvit #FFFFFF og bruke PT Sans (fet) 48px størrelse angir hovedmeldingen. Pass på at du gir det mye plass over.
Reduser nå skriftstørrelsen til 21px, å velge Normal skriftvekt, skriv inn en mer beskrivende melding og legg den under hovedmeldingen. For å få linjene til å se balansert og lett å lese, øke linjens høyde til minst 30px. Sett beskrivelsen under hovedoverskriften, i mitt tilfelle flyttet jeg 40px ned.
La oss gjenta vår CTA-knapp, så det er klart for den besøkende hva du skal gjøre neste etter å ha lest kopien. Finn "CTA btn" -gruppen og dupliser den ved å trykke CMD + J, Deretter plasserer du den under sekundærmeldingen.
Vi er ferdig med kopien og hovedaksjonen, så la oss sette en forhåndsvisningsvisning for å vise hvordan appen ser ut før folk bestemmer seg for å laste den ned.
Last ned gratis Samsung Galaxy S5 mockup av Martin Adamko og legg den inn i dokumentet. Deretter holder du nede CMD nøkkel, klikk på alle lagene som tilhører den mockupen og høyreklikk for å velge Konverter til Smart Object. Bruk CMD + T å endre størrelsen på det og flytte til høyre fra vår hovedkopi og beskrivelse.
Deretter plasserer du appskjermbildet på smarttelefonmockupen ved å trykke på det smarte objektlaget og lagre det. Jeg har brukt et skjermbilde av en ny Tuts + Courses Android-app.
Vi er ferdige med overskriften. Minimer gruppen og opprett en annen som heter "Fordeler".
Deretter velger du Horisontal Typeverktøy (T) igjen, endre fargen til det samme mørkegrået # 222325 Vi brukte filteret (gjør utformingen konsistent og sammenhengende i stedet for å bringe flere farger) og bruke PT Sans (Bold) 30px skriv inn et sterkt utsagn og legg det under overskriftsområdet, og la det være mye plass over det.
Nå har vi sjansen til å overbevise våre besøkende hvorfor vår app er verdt å laste ned. Tenk på fordeler over funksjoner slik at folk kan visualisere seg selv ved å bruke den. Bytt farge til en subtil grå blå # 6a7588 og skriv inn et par linjer som forklarer hvorfor folk skal bruke appen din. Jeg har gått for PT Sans (Regular) 21px med linjens høyde satt til 32px, samme innstilling som brukt for den sekundære meldingen i overskriftsområdet.
Vær oppmerksom på avstanden mellom tekstblokker, la nok plass til å gi den lyse følelsen til designet.
Igjen, la oss gjenta handlingen CTA (CTA) slik at besøkende som ikke var overbevist tidligere, kan foreta seg rett etter å ha lest fordelerkopien din. Dupliser "CTA btn" -gruppen ved å trykke CMD + J og legg det under fordelene kopiere. Flytt den til gruppen "Fordeler" for å gjøre dokumentet mer organisert.
Vi er ferdige med fordelerområdet, så minimer gruppen og opprett en ny som heter "Funksjoner". Her vil vi markere noen av app-funksjonene, slik at besøkende som vil vite mer og allerede er interessert, kan finne ut mer om appen.
Bytt forgrunnsfargen til lysegrå #fbfbfb, Vi bruker en annen bakgrunnsfarge for funksjonsseksjonen for å skille den fra resten. Etter det plukker du Rektangelverktøy (U) og tegne a 1200x700px størrelse form som vil fungere som en bakgrunn. Sørg for å gi delenes plass over.
For å skille ut funksjonsområdet, gir vi enda mer 1px horisontale linjer mellom bakgrunnene. Velg Linjeverktøy (U), sett Vekt til 1px og endre fargen til en mørkere grå #eeeeee.
Tips: holde nede Skifte nøkkel for å tegne en perfekt horisontal linje.
Åpne gruppen "Fordeler" og finn overskriftslaget, trykk CMD + J å duplisere det og flytte inn i "Funksjoner" -gruppen. Rediger den for å passe dine behov og plasser den i den tidligere opprettede grå bakgrunnen.
Vi lager tre blokker med funksjoner med et ikon, overskrift og en kort beskrivelse. Opprett en ny gruppe og ring den til «Feature 1» eller noe mer beskrivende. Gå over til Iconfinder og last ned a 48x48 px brukerikon. Klikk på høyre museknapp på lagets navn og bruk følgende alternativer.
Du kan legge merke til at vi faktisk etterligner knappestilen slik at alt er konsekvent.
Du må igjen kopiere overskriftslaget, plassere det i "Funksjon 1" -gruppen og bruke Horisontal Typeverktøy (T) reduser skriftstørrelsen til 16px og linjehøyde til 22px.
Bruke det samme Horisontal Typeverktøy (T) skriv ned tre korte linjer som forklarer funksjonen din. Pass på å endre type farge til den tidligere brukte gråblå # 6a7588. Legg under ikonet og overskriften.
Minimér nå gruppen og dupliser den to ganger ved å trykke CMD + J. Deretter tilpasser du de dupliserte gruppene for å passe din app. For denne opplæringen har jeg brukt markør- og klokkeikonene fra Iconfinder. Pass på at du forlater nok plass mellom blokkene slik at den ser balansert ut.
Jo mer du viser hvordan det virkelige produktet ser best ut, vi bruker et annet perspektiv på smarttelefonmockupen vår. Jeg har vendt den tidligere brukte Samsung Galaxy S5 mockupen og erstattet skjermbildet sitt på Google Play. Høyreklikk på mockup-laget øverst og velg Nytt smart objekt via kopi å lage en uavhengig kopi.
For å tilpasse smarttelefonoppslaget klikker du to ganger på lagminaturen og legger appskjermen der.
Vi legger til litt sosial troverdighet for appen din ved å vise noen anbefalinger fra appbrukere.
Minimer alle gruppene og opprett en ny som heter "Testimonials". Skriv inn et overskriftsoverskrift som vi gjorde før, og legg det under "Funksjoner" -gruppens bakgrunn, slik at du får en jevn mengde plass.
Åpne nå "Funksjoner" -gruppen, dupliser en av dem og flytt den inn i gruppen "Testimonials". Vi vil gjenbruke gruppen for våre vitnemål. Rediger kopien, endre overskriften til en persons navn og beskrivelse til testamente kopien.
Fjern ikonet, og bruk Ellipseverktøy (U), tegne en sirkelform. Deretter plasserer personens profilbilde over sirkelformlaget og lager en Clipping Mask. Jeg har brukt et ansikt fra User Inter Faces.
Til slutt, dupliser den nyopprettede testgruppen og tilpass den med forskjellige navn, testimonials og profilbilder.
Minimer gruppen "Testimonials" og opprett en annen som heter "Footer". Vi legger en endelig oppfordringsknapp (CTA) her og noen lenker til interne nettsider som de fleste ruller ned for å se etter områdets arkitektur.
Gå over til "Header" gruppen og hold nede Skifte nøkkel, velg rektangelform og gråfilterlag. Etter det treffet CMD + J å duplisere dem og flytte dem til din nye "Footer" -gruppe. Legg deretter et bilde av ditt valg mellom rektangelformen og gråfiltrelagene som lager en Clipping Mask.
Legg til en annen overskrift som oppfordrer folk til å handle og laste ned appen din. Gjør den hvit #FFFFFF så det er svært synlig på den mørkere bakgrunnen. Deretter dupliserer du handlingen CTA (CTA) og legger den under overskriften.
Plukke Horisontal Typeverktøy (T) igjen og skriv inn noen koblinger på nettstedet ditt. Jeg har brukt hvit #FFFFFF PT Sans (Regular) 16px og en linjehøyde på 29px.
Dupliser tekstlaget og tilpass det for å passe din app. Deretter plasserer du en opphavsrettslinje helt nederst på foten, og gir god plass over og under den.
Det er det! Vi er ferdige med temaoppsettet, nå gjennomgå dokumentlagene dine, slett unødvendige og overlaste dem til utvikleren din, eller, enda bedre, kodes det selv!
Accentsconagua