Design en Travel Startup Landing Page Bruke Photoshop
Hva du skal lage
I denne opplæringen vil jeg bruke Photoshop CS6 for å lage en enkel, ren og destinasjonsside for en fiktiv reise oppstart. I løpet av denne prosessen vil vi se på å lage egendefinerte rutenett med retningslinjer, styling skrifttyper, bruker massevis av mellomrommet og komponere vår nettinnhold i en veldig ren og profesjonell måte. Det ferdige PSD filen vil være klar til å overlate til en utvikler for koding opp
Instruksjons Eiendeler
For å følge langs du trenger følgende (fritt tilgjengelig) eiendeler.
Bike reisebilde fra Unsplash
PT Serif font fra Font Squirrel
Aller font fra Font Squirrel
Åpne Sans font fra Font Squirrel
< li> avatarer fra bruker Inter Faces
Hent
Trinn 1
Begynn med å lage et nytt dokument Dokument Klar plakater (Fil > New ...) ved hjelp av innstillingene vist nedenfor.
Kontroller at oppløsningen er satt til 72 piksler /tomme
Trinn 2
La oss sette noen guider så vår layout har nok plass og ser balansert. Jeg har ikke alltid bruke et rutenett, men å sette noen retningslinjer vil sikre pixel perfeksjon og vil bidra til å definere vår hjemmeside bredde. Fordel lerretet i to halvdeler vertikalt slik at du kan opprette en sentrert komposisjon. Gå til View > New Guide ... og sette noen retningslinjer. Jeg pleier å velge 1000px som et nettsted bredde og legge noen retningslinjer fra hjørnene slik at den har plass til å puste.
Merk:
Retningslinjer brukes for denne opplæringen. vertikal på 200px, 260px, 700px, 1140px og 1200px
Tips: Du kan også bruke GuideGuide Photoshop plugin for å gjøre denne prosessen enda raskere.
Trinn 3
Vi kommer til å holde våre dokumenter godt organisert fra begynnelsen, så la oss lage tre lag grupper oppkalt Header, funksjoner, sosiale bevis, Slutt CTA og bunntekst. Stikker til denne Photoshop etikette vil holde ting organisert og enkle å navigere eller redigere. Å opprette grupper gå til Layer > New > Group ... og gi hver enkelt en tittel som nevnt. For rask etablering av en gruppe bare klikk på ikonet.
Designing Header området
Overskriften er svært viktig for hver nettside som det er den første muligheten til å overbevise en ny besøkende at det er gunstig å bo på nettstedet. Det er her vi, designere, må bruke slående bilder og et klart budskap med noen tiltak for besøkende å ta.
Trinn 1
La oss først endre bakgrunnsfargen til noe veldig enkelt for øyet, i mitt tilfelle brukte jeg lys grå #ebebeb. Etter det åpne opp Header gruppen og bruke rektangel Tool (U)
tegne et 1000x600px rektangel og legg den mellom de vertikale retningslinjer. Deretter laster du ned Bike reisebilde, dra den til Photoshop dokumentet og plassere den over rektangelet laget. Etter det holder nede Alt
tasten og musen over bildet lag til du ser en liten pil som peker ned, og slipp den. Du har nettopp opprettet en Beskjærings Mask
.
Nå treffer CMD + T Hotell og endre størrelsen på bildet slik at det passer dine behov.
Tips :
hold nede Skift
nøkkelen til å forvandle proporsjonalt
Trinn 2
Nå må vi legge et lag med gjennomsiktig farge å gjøre bildet mørkere så lyst bilde. deler vil bli mørkere og hvit tekst vil være lett lesbar. Lag et nytt lag over bildet og lage en Clipping Mask for det også. Deretter fyller at lag med en solid mørk farge og endre Opacity
til rundt 20%
så vi kan fortsatt tydelig se bildet.
Trinn 3
< p> Nå la oss sette en enkel typografi basert logo og navigasjon på toppen. Plukk en Horizontal Type Tool (T) Hotell og skrive ned oppstarts tittel på venstre side. Sørg for at den er lesbar og har nok plass rundt den. Vår logo er i øvre venstre hjørne, da dette er en vanlig web-konvensjoner og hva mange besøkende vil forvente.
Jeg har brukt Aller
font for tittelen og Åpne Sans
for navigasjonselementer.
Trinn 4
Nå la oss leke med hovedbudskapet. Du bør alltid begrense Straplinen til en eller to setninger, og sørg for at det er kort og lett lesbar. I mitt tilfelle har jeg brukt 32px Åpne Sans
å skrive hovedbudskapet, legger vekt på "du reiser" ved å gjøre det dristigere.
Den andre linjen er mye mindre, derfor tvinger det å bli oppfattet av underordnet betydning, slik at folk vil lese det etter at de er ferdig med hovedbudskapet. Jeg har stylet den med større avstand mellom bokstaver, på grunn av karakterene blir store bokstaver.
Legg merke til hvor jeg plasserer meldinger, alltid tenke på kontrast og hvor det er bedre å plassere kopien skal være lett leses av leser.
Trinn 5
Lag en enkel oppfordring til handling
informere besøkende hva de skulle gjøre. I mitt tilfelle er det et enkelt budskap som tyder besøkende abonnere på nyhetsbrevet. Jeg har brukt 14px
størrelse PT Serif (Kursiv)
font.
Trinn 6
La oss lage en enkel e-skjema som gjør at våre besøkende til Skriv inn din venns e-postadresse og abonnere på listen. Opprett en ny gruppe kalt E-post form. Bruk Avrundet rektangel Tool (U)
med 3px
radius å lage en enkel hvit (#FFFFFF) fargeinndata.
Trinn 7
Legg hint tekst for folk å forstå hvor du skal skrive sin e-post og opprette en oppfordring til handling knappen. Jeg har brukt 13px Åpne Sans (halvfet)
grå (#bdbdbd)
for innspill tekst og 13px Åpne Sans (Fet)
hvit (#FFFFFF) for knappen teksten. Plukk en fengende farge for din viktigste oppfordring til handling så det skiller seg ut og oppfordrer handling.
I mitt tilfelle har jeg brukt grønn (# 51a200) for hoved oppfordring til handling. Plukk en rektangel Tool (U) Hotell og tegne et rektangel form plassert over den hvite innspill. Så hold nede Alt
tasten og musen over det grønne rektangelet til du ser en pil ned-ikonet, slipp nøkkelen og du vil skape en Beskjærings Mask
.
Designing Funksjoner Område
Dette er den viktigste kroppsdel rett over fold området. Hvis folk er interessert i hva du har å tilby de vil bla nedover for å se hva du har i mer detalj.
Trinn 1
Slå sammen Header gruppe ved å klikke den lille pilen ved siden av gruppe navn. Nå må vi lage en litt annen bakgrunn for kroppen område av vår nettside. Jeg har brukt den Avrundet rektangel Tool (U)
med en radius på 5px Hotell og hvit farge #FFFFFF.
Plasser nyopprettede form rett over hovedbakgrunnslaget .
Trinn 2
Utvid Funksjoner gruppen og begynner å skrive din kopi. I mitt tilfelle har jeg lagt hovedbudskapet linje og to kolonner av funksjoner med en tittel og et kort avsnitt.
Når du oppretter engasjerende kopi sørge for at det er leselig og ikke for lang. Bruke ulike skrift vekter, størrelser og farger for å skape visuell hierarki. Til slutt, men svært viktig; bruke rikelig med mellomrom. I mitt tilfelle har jeg brukt Åpne Sans
skriftvariasjoner, mørk grå # 545454 og lys grå # a2a2a2 for mitt eksemplar.
Designing Social Proof området
Trinn 1
Nå er det på tide å designe våre andre område på kroppen som vil hjelpe besøkende til å gjøre seg opp en mening og ta affære. Vi skal designe en sosial bevis område som viser et par av attester.
Først må vi skille forrige område på en subtil måte. Jeg har brukt den Linje Tool (U)
satt til 1px
med fargen er lys grå # e8e8e8.
Trinn 2
Reduser Funksjoner gruppe og utvide sosiale bevis gruppen. Nok en gang skrive ned en tittel holde samme størrelse som du brukte før. Nøkkelen til å rydde design er konsistens, så når du har brukt en farge og størrelse før, hold deg til dem.
For den sosiale bevis området har jeg brukt to fiktive attester fra fiktive personer. Skriften som brukes for sitatet er PT Serif Hotell og resten blir den tidligere brukte Åpne Sans
med størrelse og vekt variasjoner forskjellige.
Trinn 3
Som du kan se jeg har igjen litt plass foran navnene. Head over til Bruker Inter Faces å få noen avatarer. Etter at plukke en Ellipse Tool (U) Hotell og holde nede Shift
nøkkelen tegne en sirkel. Endelig kopiere og lime avataren over sirkelen lag og musen over avataren lag holding Alt
nøkkel slik at du vil skape en Beskjærings Mask
.
For å gjøre ting mer organisert lage to grupper inne i Social Proof gruppen og plassere vitne lagene i separate grupper.
Designing Final Call to Action området
Ifølge GoodUI bør du alltid gjenta den primære oppfordring til handling, slik at folk som ikke gjøre opp deres sinn i utgangspunktet kan gjøre det etter å se mer av ditt nettsted.
Trinn 1
La oss skille den forrige området med samme linje. Finn linjen lag og bare trykke CMD + J
å kopiere det og deretter flytte den under attester forlater nok plass.
Etter det, skrive ned hoved overskrift av seksjonen og enkel sub-overskrift gi mer informasjon eller veiledning. Som du ser har jeg brukt samme stil, vekt og størrelse fonter som brukes for forrige avsnittene. Hold deg til en stil for all din kopi.
Trinn 2
Leder over til Header gruppen og finne formen gruppen, etter at duplisere ( CMD + J
) det og flytte til finalen CTA gruppen. Plasser den under meldinger og tilpasse den litt ved å legge en grønn strek rundt tekstfeltet.
Klikk på høyre museknapp på input lag og velg Blending Options ...
etter som gjelder en Stroke
effekt som vist nedenfor. Fargen jeg har brukt er # 51a200.
Designing Footer
Vi er ferdig med Final CTA gruppen, så minimere det og utvide gruppen bunntekst. Til slutt la oss gå inn i noen linker til de interne sidene på nettstedet ditt, og sette en enkel copyright tekst på en ny linje. Jeg har brukt Åpne Sans (halvfet)
font for linkene.
Legg merke til hvordan den er plassert utenfor kroppen bakgrunnen for å skille den fra hovedinnhold. Kontroller at du bruker konsekvent avstand over og under kopien så det ser balansert.
Og vi er ferdig med oppsettet. Gratulerer!
Konklusjon
I denne opplæringen jeg har vandret deg gjennom prosessen med å lage en veldig enkel og ren reise destinasjonsside inkludert noen sentrale deler som lar deg fange de besøkendes oppmerksomhet, oppmuntre ytterligere tiltak .
Resultatet er en balansert og lett layout med et sterkt fokus på symbolikk i det øverste området og ren typografi i kroppen området. Hvis du har spørsmål eller tanker, vennligst gi oss beskjed i kommentarfeltet området!
Ekstra Resources
Hvis du er ny til Landing Page Design, vil vi anbefale en rekke innledende tutorials å få deg opp til hastighet med det grunnleggende:
Landing Page Design Principles: Åpne Assignment - Akkompagnement til Tuts + kurs ved Adi Purdila
En nybegynners guide til vellykket konvertering av Ian Yates
Tips for utforming av nisje destinasjonssider av Keir Whitaker
Hvis du er interessert i å få litt hjelp med Landing Page design, har Envato Studio en flott samling av Landing Page Design & Utviklingstjenester som du kanskje har lyst til å utforske. Du kan også ta en titt på destinasjonssider Temaer på Envato Market. Anmeldelser