Design en App Landing Page i Photoshop
Hva du skal lage
I denne opplæringen vil jeg lede deg gjennom designprosessen av en enkel og konvertering orientert app destinasjonssiden. Vi bruker Tuts + Android app for demo, med vekt på dens funksjoner og fordeler, og sysselsetter samtaler til handling gjennom.
Essentials av høy konverterings
Når du utformer destinasjonssider er det noen ting du trenger for å få rett til å nyte høy konverteringsfrekvens
Ifølge vekst hacker Neil Patel, for å ha en konkurranse-crushing landingsside du trenger.
en morder overskrift
Overbevisende subheadlines
Bilder fra
Forklaring
Verdi proposisjoner eller fordeler
Logisk flyt
troverdig attester
Kraftig oppfordring til handling
Vi kommer til å gjennomføre alle de ovennevnte elementer for å gjøre vår destinasjonsside så effektiv som mulig.
AIDA Modell
jeg anbefaler deg å ta en titt på Ansette AIDA Prinsipper i Web design av Shaun Cronin. AIDA står for oppmerksomhet, interesse, Desire og handling; og disse prinsippene kan brukes til ulike situasjoner som innebærer å selge produkter eller tjenester.
Forskning viser at folk ikke har noe imot å rulle, så når du har opprettet første interesse på toppen av siden bør du ikke tenke på å gjøre destinasjonssiden lenger. Dette er nødvendig for å fortelle en god historie og legge bevisende elementer.
A /B-testing
Effektive destinasjonssider kan ikke bare være utformet en gang og gjøre det bra. Du må holde testing med ulike kombinasjoner av kopi, farger, oppfordring til handling og andre elementer for å oppnå de beste resultatene.
For mer informasjon om dette sjekk ut en Web Designer Introduksjon til A /B-testing av Siddharth Deswan .
Instruksjons eiendeler
for å kunne følge med dere trenger noen (fritt tilgjengelig) eiendeler:
Bilder fra Unsplash
PT Sans font fra Font Squirrel
Bruker ikonet fra Iconfinder
Marker ikonet fra Iconfinder
Klokke-ikonet fra Iconfinder
Samsung Galaxy S5 mockup av Martin Adamko
Få Document Klar
Trinn 1
Begynn med å opprette en ny Photoshop-dokument (Fil > New ...) med de innstillingene som er vist nedenfor. Du er fri til å bruke et lerret av hva dimensjonene du foretrekker.
Trinn 2
La oss sette noen guider så vår layout har nok plass og ser balansert. Sette noen retningslinjer skal sikre ryddighet og vil bidra til å definere vår hjemmeside bredde i forbindelse med denne designen. Gå til View > Guide New ... og sette noen retningslinjer. Jeg pleier å velge 1000px som utgangspunkt og legge noen retningslinjer fra hjørnene slik at den har plass til å puste
Merk:. Retningslinjer brukes for denne opplæringen. Vertikal på 100px, 600px og 1100px
tips: Du kan også bruke GuideGuide Photoshop plugin for å gjøre denne prosessen enda raskere
Designing header området
overskriften eller "over fold" spiller en svært viktig rolle i å engasjere med. brukere og sørge for at besøkende opphold på nettstedet.
Vår app destinasjonssiden viktigste funksjon er å overbevise besøkende til å laste ned programmet. Av den grunn vil vi fokusere på fordelene med å prøve ut programmet og gjør det enkelt å laste ned
Trinn 1
La oss først opprette en gruppe som heter "Header" ved å klikke på Layer >.; New > Gruppe ... eller treffer den lille ikonet nederst i Lag-panelet. Etter at grip en horisontal Type Tool (T), velger PT Sans (Fet) 18px størrelse tekst, sett farge til svart # 000000 og skriv inn navnet på appen for å tjene som en logo, plasser den på toppen i venstre hjørne rett ved siden av den første vertikale retningslinje. Gi det noen plass over så ser det ikke trangt.
Trinn 2
La oss lage en oppfordring til handling knapp som vi kommer til å bruke hele vår design for å sørge for at besøkende ta handling. Opprett en ny gruppe kalt "CTA btn" og plukke Avrundet rektangel Tool (U), satt Radius til 2 piksler, endre forgrunnsfargen til limegrønn # 17e594 og tegne et 206x38px størrelse rektangel form.
Nå kan du klikke på høyre museknapp på laget, velg Blending Options ... og sjekk Stroke alternativet. Etter det gjelder en mørkere grønn # 09ba74.
Velg den Horisontal Type Tool (T) på nytt og gå inn i kopien for våre knappen. Jeg har brukt PT Sans (Fet) 12px og fargen hvit #FFFFFF.
Trinn 3
Nå plukke rektangel Tool (T) og tegne en 1200x600px (alle farger) rektangel form og plassere den rett under vår minimal øverst. Jeg har forlatt en 25px gap mellom logo og form som jeg gjorde for logoen på toppen, så det er konsekvent.
Nå ta en Toolkit bilde fra Unsplash og plassere den over rektangelet formlag. Etter det holder nede Alt-tasten og musa over bildet laget til du ser en liten pil som peker ned, og slipp musa for å skape en Beskjærings Mask Hit CMD + T for å endre størrelsen på bilder, noe som gjør at du holder nede Shift-tasten, slik at du endre størrelsen proporsjonalt. La oss legge til et filter lag av grå, så vi gjør vår bakgrunn klar for kopi og app skjermbilde. Endre forgrunnsfargen til mørk grå # 222325 og opprette et nytt lag, og deretter plassere den over bildet laget og igjen skape en < em> Clipping Mask Grab Horisontal Type Tool (T) på nytt, endre fargen til hvit #FFFFFF og bruker PT Sans (Fet) 48px størrelse angir hovedbudskapet. Sørg for at du gir den mye plass ovenfor. Nå redusere skriftstørrelsen til 21px, velge Normal skrift vekt, skriv inn et mer beskrivende melding og legg den under hovedbudskapet . For å gjøre linjene ser balansert og lett å lese øke linjehøyden til minst 30px. Plasser beskrivelse under hovedoverskriften, i mitt tilfelle flyttet jeg 40px ned. La oss gjenta vår oppfordring handling (CTA) for å så det er klart for den besøkende hva de skal gjøre etter å ha lest kopien. Finn "CTA btn" gruppe og kopiere den ved å trykke CMD + J, etter at plassen det under den sekundære meldingen. Vi er ferdige med kopien og viktigste oppfordring til action, så la oss sette en faktisk app forhåndsvisning for å vise hvordan applikasjonen 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. Etter det, hold nede CMD-tasten, klikk på alle lagene som tilhører den mockup og høyreklikk for å velge Convert to Smart Object Etter det, plasserer app-skjermen på smarttelefonen mockup ved å trykke på smartobjektlaget og lagre det. Jeg har brukt en skjermdump av en ny Tuts + Kurs Android app. Vi er ferdig med spissen. Minimer gruppen og opprette en ny en som heter "fordelene". Etter det, plukke Horisontal Type Tool (T) på nytt, endre fargen til den samme mørke grå # 222325 vi brukes for filteret (lage din design konsekvent og sammenhengende i stedet for å bringe flere farger) og bruker PT Sans (Fet) 30px angi en sterk uttalelse og plassere det under overskriften området, ha massevis av plass over den. nå har vi en sjanse til å overbevise våre besøkende hvorfor vår app er verdt å laste ned. Tenk på fordeler sammenlignet med funksjoner slik at folk kan visualisere seg å bruke det. Endre fargen til en subtil gråblå # 6a7588 og skriv et par linjer om hvorfor folk bør bruke appen. Jeg har gått for PT Sans (Regular) 21px med linjehøyden satt til 32px, samme innstilling som brukes for den sekundære meldingen i topptekstområdet. Vær oppmerksom på avstanden mellom tekstblokker, lar nok plass til å gi den lys følelse å utforme. igjen, la oss gjenta samtalen handlingsknappen (CTA) til slik at besøkende som ikke var overbevist om tidligere kan iverksette tiltak rett etter lese dine fordeler kopiere. Duplisere "CTA btn" gruppe ved å trykke CMD + J og plassere den under fordelene kopiere. Flytt den inn i "fordelene" gruppe for å gjøre dokumentet mer organisert. Vi er ferdige med fordeler området, så minimere gruppe og lage en ny en som heter "Spesifikasjoner". Her vil vi fremheve noen av de app funksjoner slik at besøkende som ønsker å vite mer, og allerede er interessert kan finne ut mer om programmet. Endre forgrunnsfargen til lys grå # fbfbfb, vil vi bruke en annen bakgrunnsfarge for Features delen for å skille det fra resten. Etter at plukke rektangel Tool (U) og tegne en 1200x700px størrelse form som vil fungere som en bakgrunn. Sørg for å gi den delen plassen over. For å beskikket området Funksjoner enda mer la oss si 1 piksler horisontale linjer mellom bakgrunn. Plukk Line Tool (U), sett Vekt til 1PX og endre farge til en mørkere grå #eeeeee Tips:.. Hold nede Skift-tasten for å tegne en perfekt horisontal linje Åpne opp "fordeler" gruppe og finne overskriften lag, traff CMD + J for å kopiere det og gå inn i "Egenskaper" gruppe. Rediger det til å passe dine behov og plassere den i den tidligere opprettede grå bakgrunn. Vi vil opprette tre blokker av funksjoner med et ikon, overskrift og en kort beskrivelse. Opprett en ny gruppe og kaller det "Feature 1" eller noe mer beskrivende. Head over til Iconfinder og laste ned en 48x48 px brukerikon. Klikk på høyre museknapp på sin lagnavn og bruke følgende alternativer. Du kan legge merke til at vi faktisk etterligne knappestilen slik at alt er konsekvent. Ved å bruke samme Horisontal Type Tool (T) skrive ned tre korte linjer som forklarer ditt funksjonen. Sørg for å endre type farge til tidligere brukte gråblå # 6a7588. Sett under ikonet og overskrift. Nå minimal gruppen og kopiere den to ganger ved å trykke CMD + J. Etter at tilpasse dupliseres grupper for å passe din app. For denne opplæringen jeg har brukt markør og klokke ikoner fra Iconfinder. Sørg for å forlate nok plass mellom blokkene så det ser balansert. Jo mer du viser hvordan selve produktet ser det bedre, vi kommer til å bruke et annet perspektiv på vår smarttelefon mockup. Jeg har snudd den tidligere brukte Samsung Galaxy S5 mockup og erstattet sin skjermbilde funnet på Google Play. Høyreklikk på mockup lag på toppen og velg Ny Smart Object via Copy å skape en uavhengig kopi. For å tilpasse smarttelefonen mockup, klikk to ganger på laget miniatyr og plassere app-skjermen der. Vi vil legge til noen sosiale troverdighet for vår app ved å vise noen anbefalinger fra app brukere. Minimer alle gruppene og lage en ny en som heter "Uttalelser". Skriv inn et avsnitt overskrift som vi gjorde før, og legg den under "Funksjoner" gruppe bakgrunn forlate en konsistent mengde plass. Nå åpner opp "Funksjoner" gruppe, duplisere en av dem og flytte den på innsiden av "Uttalelser" gruppe. Vi vil bruke gruppen for våre attester. Rediger kopiere, endre overskriften til en persons navn og beskrivelse til en vurdering kopien. Fjern ikonet og ved hjelp av Ellipse Tool (U), tegne en sirkel form. Etter at stedet personens profilbildet over sirkelen formlag og skape en Beskjærings Mask Til slutt, duplisere rykende fersk vurdering gruppe og tilpasse den med forskjellige navn, attester og profilbilder. Minimer "Uttalelser" gruppe og lage en ny en som heter "bunntekst". Vi vil sette en endelig oppfordring (CTA) knapp her og noen linker til indre nettsider som folk flest bla nedover for å se etter områdets arkitektur. Leder over til "Header" gruppe, og holde nede Shift-tasten, velge rektangel form og grå filterlag. Etter det traff CMD + J for å kopiere dem og flytte dem inn i den nye "bunntekst" gruppe. Deretter plasserer et bilde av ditt valg mellom rektangel form og grå filterlag skape en Beskjærings Mask Legg til en annen overskrift oppfordrer folk til å ta affære og nedlasting app. Gjør det hvite #FFFFFF så det er godt synlig på mørkere bakgrunn. Etter det, duplisere samtalen handling (CTA) -knappen til og plassere den under overskriften. Velg Horizontal Type Tool (T) på nytt og skriv noen linker til ditt nettsted. Jeg har brukt hvit #FFFFFF PT Sans (Regular) 16px og en line-høyde på 29px. Duplicate din tekst laget og tilpasse den til å passe din app. Etter det, plasserer en opphavsrett linje helt nederst på bunnteksten forlater god plass over og under det. Det er det! Vi er ferdig med temaet design, nå gjennomgå dokument lag, slette unødvendige seg og overlate den til utvikleren, eller, enda bedre, kode det selv!
slik at bildet er bare synlig i området av rektangelet.
Trinn 4
. Etter at treffet Alt + Backspace for å fylle laget med grå. Til slutt, redusere lagets Opacity til 80%.
Trinn 5
Trinn 6
Trinn 7
Trinn 8
. Bruk CMD + T for å endre størrelsen og flytte til høyre fra vår hoved kopiering og beskrivelse.
Designe fordelene området
Trinn 1
Trinn 2
Trinn 3
Designing Funksjoner området
Trinn 1
Trinn 2
Trinn 3
Trinn 4
Trinn 5
< p> igjen, duplisere overskriften lag, plasser den på innsiden av "Feature en" gruppe og ved å bruke Horisontal Type Tool (T) redusere skriftstørrelsen til 16px og line-height til 22px.
Trinn 6
Trinn 7
Trinn 8
Designing Uttalelser området
Trinn 1
Trinn 2
. Jeg har brukt et ansikt fra bruker Inter Faces.
Trinn 3
Designing bunntekstområdet
Trinn 1
.
Trinn 2
Trinn 3
Trinn 4
Gratulerer!