Design en Elegant "Gratitude Log" Landing Page Med Photoshop
Hva du skal lage

I denne opplæringen vil jeg lede deg gjennom prosessen med å utforme en elegant landing side for en fiktiv "takknemlighet log" service. Vi vil begynne helt fra bunnen av, utarbeidelse av layout med Adobe Photoshop på et blunk. Vi skal bruke noen grunnleggende og middels teknikker for å lage dette designet med konvertering i tankene. La oss få det i gang

Instruksjons Eiendeler

For å følge langs du trenger noen (fritt tilgjengelig) eiendeler:

Chillin 'i Søn bilder fra Skitterphoto

PT Serif font fra Font Squirrel

Playfair Dislay font fra Font Squirrel

Source Sans Pro font fra Font Squirrel

Bruker avatarer fra Bruker Inter Faces

Få Document Klar

Trinn 1

Begynn med å skape en ny Photoshop-dokument (Fil > New ...) med de innstillingene som er vist nedenfor. Du er fri til å bruke et lerret av hva dimensjonene du fore-nettet er ikke fast bredde, tross alt.

Trinn 2

La oss sette noen guider så vår layout har nok plass og utseende balansert. Jeg har ikke alltid bruke en forhåndsdefinert rutenett, men å sette noen retningslinjer vil sikre ryddighet og vil bidra til å definere vår hjemmeside bredde. 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, 500px, 700px, 900px og 1200px

Tips: Du kan også bruke GuideGuide Photoshop plugin for å gjøre denne prosessen enda raskere.

Trinn 3

Stikker til Photoshop etikette vi vil holde ting organisert og derfor lett å navigere og redigere. La oss lage tre lag grupper oppkalt Header, innhold og bunntekst. Å opprette grupper gå til Layer > New > Group ... og gi hver enkelt en tittel som nevnt. For rask etablering av en gruppe bare klikke på mappeikonet.

Designing Header området

Overskriften eller "over fold" (uansett hvor det er i disse dager) spiller en svært viktig rolle i engasjerende med brukere og sikre at besøkende opphold på nettstedet. For denne landing sideoppsettet vil jeg bruke et bilde av to personer som sitter på en benk; en av dem holder hendene opp i luften portretterer positive følelser og lykke.

Trinn 1

La oss først opprette bakgrunnen av bloggen. Inne i "Header" gruppe tegne en svart # 000000 farget rektangel form ved hjelp av rektangel Tool (U).
I mitt tilfelle jeg trakk en 1400x728px størrelse rektangel og plassert den på toppen av dokumentet.

Nå laste ned Chillin 'i solen bildet, drar du den til Photoshop dokumentet og plassere den over rektangelet laget. Endre navn på bildelaget til noe du vil kjenne igjen senere, i mitt tilfelle har jeg brukt IMG. 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
. Endelig redusere IMG lag Opacity til 70% slik at teksten vil vi sette på toppen vil være mer lesbar.

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å la oss lage en global navigasjon for vår landing. side slik at folk kan navigere gjennom nettstedet.

Opprett en ny gruppe kalt "Navigasjon", plasser den inne i "Header" gruppe. Etter at plukke rektangel Tool (U) og tegne et hvitt rektangel form mellom den første og den siste vertikale retningslinjer. Gjør det rundt 60px i høyden slik navigerings elementer vil ha noen plass til å puste og ser rent. Endelig flytte den 30px ned fra toppen, slik at vi kan ha denne flytende effekt som pent forblir på vårt bilde.

Trinn 3

La oss nå plassere en logo og noen linker for å gjøre vår navigasjonsfeltet utseende som noe folk kan bruke. For logoen har jeg bare skrevet "Grttd" ved hjelp av Playfair Display (Fet Kursiv) font 26px størrelse og farge mørk grå # 0e0e0e.

For navigasjonslenkene jeg har brukt Kilde Sans Pro 14px med utvidet avstand mellom bokstavene. For hoved oppfordring til handling "Sign Up" Jeg har brukt svart og fargen grønn # 96c218. Vi er ferdig med "Navigasjon", så minimere den ved å klikke på den lille trekanten ikonet ved siden av gruppenavnet.

Trinn 4

La oss skrive en inspirerende melding medfølgende bildet og generelle Tanken på nettsiden. Jeg skal bruke en stor fet skrift med en sub-overskrift som forklarer konseptet i mer detalj.

Som vi har en ganske mørk bakgrunn for vår øverste området er det lurt å bruke blek tekst for å skape høy kontrast og sikre lesbarhet. Jeg har brukt hvit #FFFFFF Kilde Sans Pro (svart) 80px med en line-height of 86px. Plasser den på 120px under navigeringslinjen så meldingen har nok plass rundt for å bli oppfattet som viktig.
Zoomet ut 70% visning.

La oss nå plassere sub-overskrift som vil avklare hele konseptet og svare på noen spørsmål besøkende kan ha. Å skape en fin typografisk kombinasjon la oss blande de viktigste sans serif overskrift med elegant serif font vi brukt tidligere for logoen

For mer inspirerende font kombinasjoner sjekk ut:. Google Web Fonts typografi prosjekt og en nybegynners å Paring fonter.

For denne opplæringen har jeg brukt hvit #FFFFFF 26px Playfair Display (Kursiv) font og plassert den 40px under hoved overskrift.

Trinn 5

La oss legge noe mer engasjerende slik at besøkende kan se fordelen av å bo på nettstedet. En takknemlighet logg er basert på registrering av ting du er takknemlig for, så noen sosiale bevis ville være en god idé, viser folk noen faktisk bruker det og viser noe mer ønskelig som en strek
.
< p> Opprett en ny gruppe kalt "Eksempel", deretter plukke den Ellipse Tool (U), og holde nede Shift, tegne en sirkel. I mitt tilfelle er det 60x60px. Etter det satt noens ansikt på toppen av sirkelen lag og holder nede Alt-tasten, musen over lag til du ser en liten pil som peker ned, og slipp den for å lage en Beskjærings Mask
. Nå kan du endre størrelsen på bildet hvis nødvendig ved å klikke CMD + T

For denne opplæringen jeg bruker en tilfeldig ansikt fra Bruker Inter Faces

Pro tip:.. Hold nede Skift-tasten for å tegne /endre størrelse proporsjonale former.

Nå må vi sette en indikator på rad logger. La oss lage en sirkel form, denne gangen mindre, og plassere et nummer inni den. Enkel, men forståelig, og gjør jobben. For sirkelen farge har jeg gjenbrukt den tidligere brukte grønne # 96c218. I mitt tilfelle den størrelsen er 30x30px og teksten inni er hvit #FFFFFF Kilde Sans Pro (Fet) 14px.

Til slutt la oss gi vår person et navn og klargjøre hva dette tallet står for. Plukk Horizontal Type Tool (T), og skriv inn et navn og strek lengde. I mitt tilfelle har jeg brukt PT Serif (Fet Kursiv) 16px for navnet og Source Sans Pro (Regular) 13px for strek. Sørg for å bruke en linjehøyden stor nok slik elementene har plass til å puste.

Great, en siste ting før han flyttet til innholdsområdet. Vi trenger en sterk oppfordring (CTA)
slik at brukeren kan gjøre noe etter å ha sett det visuelle og lese overskriftene. Opprett en ny gruppe kalt "CTA", sett forgrunnsfargen til hvit #FFFFFF og hente rektangel Tool (T). Etter at tegne et rektangel form, i mitt tilfelle sin størrelse er 280x60px. Legg merke til konsistens i høyden tidligere brukt for navigasjonslinjen.

Etter det, skriv noen overbevisende kopi for knappen. Jeg har brukt "START LIVING →", fargen blir som tidligere ble brukt på navigasjonsfeltet mørk grå # 0e0e0e, font Kilde Sans Pro (halvfet) 16px med sporing satt til 140.

Trinn 6 Anmeldelser

Nå er vi ferdig med "Header". La oss åpne opp "innhold" gruppe og lage en ny en som heter "Beskrivelse". Vi setter en sterk overskrift etterfulgt av mer detaljert beskrivelse av hele nettsiden. Det er viktig å gjenta oppfordring (CTA)
slik at brukeren ikke trenger å tenke for hardt, men er fortsatt i stand til å ta affære når klar.

Velg Horizontal Type Tool (T), og velg en kraftig font for overskriften. I mitt tilfelle bruker jeg den vakre og elegante, men autoritativ utseende Playfair Display (svart) 60px. Sørg for å gi dette dyret mye plass til å puste, har jeg flyttet den 100px ned fra header image.

Nå bruker samme Horizontal Type Tool (T) lage et rektangel ved å klikke og dra. I mitt tilfelle er det en 600x140px stor boks der jeg satt noen overbevisende kopi for brukerne til å gjøre opp sin mening å klikke på CTA
. Å etablere en klar visuell hierarki beskrivelsen teksten skal være mindre og ikke så tung. I mitt eksempel bruker jeg grå # 666666 PT Serif (Regular) 18px, linje høyde 28px. Hele elementet beveges ned ved 50 piksler fra overskriften å gi dette et rent og profesjonelt utseende.

Etter å ha lest kopien våre besøkende kan være overbevist om å gi det et forsøk, så det er lurt å gjenta oppfordringen til handling (CTA) knappen igjen. Åpne opp "Header" gruppe, finner "CTA" gruppe og kopiere den ved å trykke CMD + J. Etter det flytte den til i "Beskrivelse" gruppe og endre knappen farge til vår tidligere brukt grønn no # 96c218 og for teksten bruke hvit #FFFFFF. Flytte det ned 50 piksler fra kopien å ha konsekvent avstand.

Ser bra så langt. La oss sette en enkel linje å visuelt skille beskrivelsen kvartal fra den neste. Plukk Line Tool (U), satt Vekt til 1px og tegne en horisontal linje over den første og den siste vertikale retningslinjer. I mitt tilfelle har jeg brukt en lys grå farge # e6e6e6 som ikke er for sterk, men gjør jobben perfekt

Pro tip:.. Hold nede Skift-tasten for å tegne en perfekt rett linje
< h3> Trinn 7

Nå er vi ferdig med "Beskrivelse" block det er på tide å gå videre til neste. Opprett en ny gruppe som heter "Get Inspired". Etter at duplisere overskrift og beskrivelse lag fra "Beskrivelse" gruppe og flytte dem inn i "Get Inspired" gruppe. Redigere lagene og endre kopien. Nedenfor er mitt eksempel:

Nå naviger til "Header" gruppe og finne "Eksempel" gruppe. Duplisere hele gruppen ved å trykke CMD + J og flytte det inn i "Get Inspired" gruppe. Vi vil bruke vårt eksempel fra toppen og viser noen brukerhistorier å inspirere våre besøkende til å ta affære.

Gi nytt navn på gruppenavnet til "Story" og bli kvitt den grønne indikatoren. Også, må du endre tekstfarge til mørk grå # 0e0e0e så det er lesbar på en hvit bakgrunn. Bruke et annet bilde for avatar og skrive personens posisjon og plassering i lysere grå # 666666 slik at folk kan forholde seg mer til den personen.

Etter det, opprette en tekstboks på rundt 300x160px størrelse ved å bruke Horisontal Type Tool ( T) og skrive et eksempel på takknemlighet log oppdatering. Jeg har brukt PT Serif (Kursiv) 16px størrelse mørk grå farge som brukes før # 666666.

Nå duplisere "Story" gruppe to ganger og endre avatarer, navn og beskrivelser. Plasser disse to gruppene i horisontal rekkefølge forlater like linjeavstand gap mellom og sette en strek etter alle disse gruppene som vi brukte før.

Trinn 8

Nå som vi er ferdig med "Get Inspirert "gruppe, la oss gå videre til den siste delen av vår destinasjonssiden. Den endelige handlingsfremmende plakater (med noen flere detaljer) vil oppfordre besøkende til å registrere seg ved å skrive inn en e-postadresse.

Opprett en ny gruppe kalt "E-post" og naviger til den forrige gruppen til finne en overskrift lag deretter kopiere den ved å trykke CMD + J og flytte det inn i nyopprettede gruppe. Endre overskriften til noe oppmuntrende og flytte rundt 100px under streken for å opprettholde konsistens.

Great! Nå satt forgrunnsfargen til lys grå # f5f5f5 og plukke rektangel Tool (U) for å tegne en boks for en epost-feltet. Det bør være i samme høyde som vår viktigste oppfordring (CTA)
knappen, men bredden gjør ikke saken så mye. I mitt tilfelle er det 430x60px. Så ta tak i Horizontal Type Tool (T) og skriv "Skriv inn din e-post" eller noe lignende, må du bruke en mørk farge slik at det er lett lesbar.

Nå gå over til "Beskrivelse" gruppe i vårt lag panel og finne "CTA" gruppe. Kopiere den ved å trykke CMD + J og flytte det inn i "E-post" gruppe. Plasser knappen rett ved siden av e-postfeltet og sentrere hele elementet.
Zoomet ut 80% visning.
Trinn 9

Enden er nær! La oss minimere alle gruppene og åpne opp "bunntekst" gruppe. Sett forgrunnsfargen til mørk grå # 2d2d2d og ved hjelp av rektangel Tool (U), tegne en full bredde rektangel på ca 230px i høyden. Dette blir vår footer bakgrunn og vil skille innholdsområdet med kontrast sin.

Gå videre og finne den "Navigasjon" gruppe og logo lag, kopiere den ved å trykke CMD + J og flytte den til "bunntekst" gruppe. Endre fargen til hvit #FFFFFF og flytte den rundt 50 piksler under kanten av bunnteksten rektangelet.

Til slutt plukke opp Horizontal Type Tool (T) og sette noen linker som brukere kan finne nyttig. Sørg for å gruppere linker slik at de lett forbundet. I mitt tilfelle har jeg brukt Kilde Sans Pro (halvfet) 16px for link gruppe overskrifter og PT Serif (Regular) 14px for lenketitler.

Gratulerer!

Det er det! Vi er ferdig med layout design, så nå gjennomgå lag, slette unødvendige seg og overlate den til utvikleren, eller enda bedre kode det selv. Jeg har berørt noen grunnleggende teknikker og demonstrert min arbeidsflyt for å designe web layouts, jeg håper du har lært noe.

Jeg vil gjerne høre din tilbakemelding og se resultatene av denne opplæringen! Anmeldelser
Ekstra Resources

Hvis du er ny til Landing Page Design, vil vi anbefale en rekke innledende opplæringsprogrammer for å komme 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 stor 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