Share
Hva du skal skapeI denne veiledningen vil jeg veilede deg gjennom prosessen med å designe en elegant destinasjonsside for en fiktiv "takknemlighet" -tjeneste. Vi starter helt fra begynnelsen, og utarbeider layoutet med Adobe Photoshop på kort tid. Vi bruker noen grunnleggende og mellomliggende teknikker for å lage dette designet med konvertering i tankene. La oss få det i gang!
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 - Internett er ikke fast bredde, tross alt.
La oss sette noen guider slik at vårt layout har nok plass og ser balansert ut. Jeg bruker ikke alltid et forhåndsdefinert rutenett, men å sette noen retningslinjer vil sikre nøyaktighet og vil bidra til å definere bredden på nettsiden vår. Gå til Vis> Ny guide ... og sett noen retningslinjer. Jeg pleier å velge 1000px som nettsidebredde og legge til noen retningslinjer fra hjørnene, slik at det har plass til å puste.
Merk: Retningslinjer brukt for denne opplæringen: vertikalt ved 200px, 500px, 700px, 900px og 1200px.
Tips: Du kan også bruke GuideGuide Photoshop plugin for å gjøre denne prosessen enda raskere.
Ved å holde fast i Photoshop-etikett, holder vi ting organisert og derfor enkelt å navigere og redigere. La oss lage tre lags grupper med tittelen Header, Content og Footer. Å opprette grupper går til Lag> Ny> Gruppe ... og gi hver en tittel som nevnt. For rask opprettelse av en gruppe, klikk bare på mappeikonet.
Overskriften eller området "over brettet" (hvor det er i disse dager) spiller en svært viktig rolle i å engasjere seg med brukere og sørge for at besøkende blir på nettsiden. For dette destinasjonssiden layout vil jeg bruke et skudd av to personer som sitter på en benk; En av dem holder hendene oppe i luften og viser positive følelser og lykke.
La oss først lage bakgrunnen til bloggen. Inne i "Header" -gruppen tegner en svart # 000000 farget rektangelform ved hjelp av Rektangelverktøy (U). I mitt tilfelle tegnet jeg et 1400x728px stort rektangel og plasserte det øverst i dokumentet.
Last ned Chillin 'i solbildet, dra det til Photoshop-dokumentet og legg det over rektangellaget. Gi nytt navn til bildelaget til noe du vil gjenkjenne senere, i mitt tilfelle jeg har brukt IMG. Etter det holder du nede alt tast og mus over fotolaget til du ser en liten pil pekende ned, så slipp den. Du har nettopp opprettet en Clipping Mask. Endelig reduser IMG-laget opacity til 70% så teksten vi legger på toppen, blir mer lesbar.
Nå hit CMD + T og endre størrelsen på bildet slik at det passer dine behov.
Tips: holde nede Skifte nøkkel for å transformere proporsjonalt.
La oss nå lage en global navigasjon for destinasjonssiden vår, slik at folk kan navigere gjennom nettstedet.
Opprett en ny gruppe kalt "Navigation", plasser den i "Header" -gruppen. Etter det plukker du Rektangelverktøy (U) og tegne en hvit rektangelform mellom de første og de siste vertikale retningslinjene. Gjør det rundt 60px i høyde slik at navigasjonselementene vil ha litt plass til å puste og se rent ut. Endelig flytte den 30px ned fra toppen slik at vi kan få denne flytende effekten som holder pent på bildet vårt.
La oss nå plassere en logo, og noen koblinger for å gjøre navigasjonslinjen vår 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ørkegrå # 0e0e0e.
For navigasjonslinkene jeg har brukt Source Sans Pro 14px med utvidet avstand mellom bokstavene. For hovedoppfordringen til å registrere "Sign Up" jeg har brukt Svart og fargen grønn # 96c218. Vi er ferdige med "Navigasjon", så minimer det ved å klikke på ikonet for lite trekant ved siden av gruppenavnet.
La oss skrive en inspirerende melding som følger bildet og den generelle ideen til nettstedet. Jeg bruker et stort fet skrift med en overskrift som forklarer konseptet mer detaljert.
Da vi har en ganske mørk bakgrunn for vårt øvre område, er det klokt å bruke blek tekst for å skape høy kontrast og sikre lesbarhet. Jeg har brukt hvit #FFFFFF Source Sans Pro (svart) 80px med en linjehøyde på 86px. Legg det om 120px under navigeringslinjen, slik at meldingen har nok plass til å bli oppfattet som viktig.
Zoomet ut 70% visning.La oss nå plassere underoverskriften som vil avklare hele konseptet og svare på noen spørsmål besøkende måtte ha. For å lage en fin typografisk kombinasjon la oss blande hoved sans serif overskriften med den elegante serif fonten vi tidligere brukte for logoen.
For mer inspirerende skriftkombinasjoner, sjekk ut: Typografisk prosedyre for Google Webfonter og En nybegynner for å parre fonter.
For denne opplæringen har jeg brukt hvit #FFFFFF 26px Playfair Display (kursiv) font og plassert den 40px under hovedoverskriften.
La oss legge til noe mer engasjerende, slik at besøkende kan se fordelene ved å bo på nettstedet. En takknemlighet er basert på å registrere de tingene du er takknemlig for, så noe sosialt bevis ville være en god ide, vise folk noen som faktisk bruker den og viser noe mer ønskelig som en strek.
Opprett en ny gruppe kalt "Eksempel", velg deretter Ellipseverktøy (U) og holder nede Skifte, tegne en sirkel. I mitt tilfelle er det 60x60px. Deretter legger ansiktet på toppen av sirkellaget og holder nede alt nøkkel, mus over laget til du ser en liten pil pekende ned, og slipp den så å lage en Clipping Mask. Nå kan du endre størrelsen på bildet ved behov ved å klikke CMD + T.
For denne opplæringen bruker jeg et tilfeldig ansikt fra User Inter Faces.
Pro tips: Hold nede Skift-tasten for å tegne / endre størrelse på proporsjonale former.
Nå må vi sette en indikator på sammenhengende logger. La oss lage en annen sirkelform, denne gangen mindre, og plasser et tall inne i den. Enkel, men forståelig, og gjør jobben. For sirkelfargen har jeg brukt den tidligere brukte grønnen på nytt # 96c218. I mitt tilfelle er størrelsen 30x30px og teksten på innsiden er hvit #FFFFFF Source Sans Pro (fet) 14px.
La oss endelig gi navnet vårt navn og avklare hva dette tallet står for. Velg Horisontal Typeverktøy (T) og skriv inn et navn og en streklengde. I mitt tilfelle har jeg brukt PT Serif (fet kursiv) 16px for navnet og Source Sans Pro (Regular) 13px for strekningen. Pass på at du bruker en linjehøyde stort nok, slik at elementene har plass til å puste.
Flott, en siste ting før du flytter til innholdsområdet. Vi trenger en sterk Ring til handling (CTA) slik at brukeren kan gjøre noe etter å ha sett bildene og lese overskriftene. Opprett en ny gruppe kalt "CTA", sett forgrunnsfargen til hvit #FFFFFF og ta tak i Rektangelverktøy (T). Etter det tegner et rektangelform, i mitt tilfelle er størrelsen den 280x60px. Legg merke til konsistensen i høyde som tidligere ble brukt til navigeringslinjen.
Deretter skriver du inn noen overbevisende kopi for knappen. Jeg har brukt "STARTLIVING →", fargen er som tidligere brukt i navigasjonslinjen mørkegrå # 0e0e0e, font Source Sans Pro (Semibold) 16px med sporing satt til 140.
Nå er vi ferdige med "Header". La oss åpne "Innhold" -gruppen og opprette en annen som heter "Beskrivelse". Vi legger et sterkt overskrift etterfulgt av en mer detaljert beskrivelse av hele nettstedet. Det er viktig å gjenta Ring til handling (CTA) så brukeren trenger ikke å tenke for hardt, men er fortsatt i stand til å handle når det er klart.
Velg Horisontal Typeverktøy (T) og velg en kraftig skrift for overskriften din. I mitt tilfelle bruker jeg den vakre og elegante, men likevel autoritative utseende Playfair Display (Svart) 60px. Sørg for å gi dette dyret mye plass til å puste, jeg har flyttet den 100px ned fra topptekstbildet.
Nå bruker du det samme Horisontal Typeverktøy (T) lag et rektangel ved å klikke og dra det. I mitt tilfelle er det a 600x140px størrelse boks hvor jeg legger noen overbevisende kopi for brukerne å gjøre opp for å klikke på CTA. For å etablere et klart visuelt hierarki bør beskrivelsen være mindre og ikke så tung. I mitt eksempel bruker jeg grå # 666666 PT Serif (Regular) 18px, linjehøyde 28px. Hele elementet flyttes ned med 50px fra overskriften for å gi dette et rent og profesjonelt utseende.
Etter å ha lest kopien kan vår besøkende være overbevist om å prøve, så det er klokt å gjenta Call-to-Action-knappen (CTA) igjen. Åpne "Header" -gruppen, finn "CTA" -gruppen og dupliser den ved å trykke CMD + J. Deretter flytte den til i "Beskrivelse" -gruppen og endre knappens farge til vår tidligere brukte grønne no # 96c218 og for teksten bruk hvitt #FFFFFF. Flytt den ned 50 piksler fra kopien for å ha konsekvent avstand.
Ser bra ut så langt. La oss sette en enkel linje for å visuelt skille beskrivelsesblokken fra den neste. Velg Linjeverktøy (U), sett Vekt til 1px og tegne en horisontal linje over de første og siste vertikale retningslinjene. I mitt tilfelle har jeg brukt en lysegrå farge # e6e6e6 som ikke er for sterk, men gjør jobben perfekt.
Pro tips: Hold nede Skifte nøkkel til å tegne en perfekt rett linje.
Nå er vi ferdige med "Beskrivelse" -blokken, det er på tide å gå videre til neste. Opprett en ny gruppe kalt "Bli inspirert". Deretter dupliserer overskrift og beskrivelse lag fra "Beskrivelse" -gruppen og flytter dem inn i gruppen "Få inspirert". Rediger lagene og endre kopien. Nedenfor er mitt eksempel:
Gå nå til «Header» -gruppen og finn "Eksempel" -gruppen. Dupliser hele gruppen ved å trykke CMD + J og flytt det inn i gruppen "Få inspirert". Vi vil gjenbruke vårt eksempel fra toppen og vise noen brukerhistorier for å inspirere vår besøkende til å handle.
Endre navn på gruppenavnet til "Historie" og bli kvitt den grønne indikatoren. Du må også endre tekstfargen til mørkegrå # 0e0e0e så det er lesbart på en hvit bakgrunn. Bruk et annet bilde for avataren og skriv personens posisjon og plassering i lysere grå # 666666 slik at folk kan forholde seg mer til den personen.
Deretter oppretter du en tekstboks rundt 300x160px størrelse ved hjelp av Horisontal Typeverktøy (T) og skriv et eksempel på takknemål oppdatering. Jeg har brukt PT Serif (kursiv) 16px størrelse mørkegrå farge som brukt før # 666666.
Nå dupliserer du «Story» -gruppen to ganger og endrer avatarer, navn og beskrivelser. Plasser disse to gruppene i horisontal rekkefølge, og etterlate like store mellomrom mellom og sett en linje etter alle disse gruppene som vi tidligere brukte.
Nå, siden vi er ferdig med gruppen "Få inspirert", la vi gå videre til den siste delen av destinasjonssiden vår. Finalen Oppfordring til handling (med noen flere detaljer) vil oppfordre besøkende til å registrere seg ved å skrive inn en e-postadresse.
Opprett en ny gruppe kalt "Email" og naviger til forrige gruppe for å finne et overskriftslag, og dupliser det ved å trykke CMD + J og flytt det til nyopprettet gruppe. Endre overskriften til noe oppmuntrende og flytte rundt 100px under linjen for å opprettholde konsistens.
Flott! Sett nå forgrunnsfargen til lysegrå # f5f5f5 og velg Rektangelverktøy (U) å tegne en boks for et e-postfelt. Det skal være samme høyde som vår viktigste Ring til handling (CTA) knappen, men bredden spiller ingen rolle så mye. I mitt tilfelle er det 430x60px. Ta så tak i Horisontal Typeverktøy (T) og skriv "Skriv inn din e-post" eller noe lignende, pass på at du bruker en mørk farge slik at den er lettlestelig.
Gå nå over til "Beskrivelse" -gruppen i vårt lagpanel og finn "CTA" -gruppen. Dupliser det ved å trykke CMD + J og flytt det inn i "Email" -gruppen. Plasser knappen rett ved siden av e-postfeltet og senter hele elementet.
Zoomet ut 80% visning.Enden er nær! La oss minimere alle gruppene og åpne opp "Footer" -gruppen. Still forgrunnsfargen til mørkegrå # 2d2d2d og, ved hjelp av Rektangelverktøy (U), tegne et full bredde rektangel på ca. 230px i høyde. Dette vil være vår footer bakgrunn og vil skille innholdet området med sin kontrast.
Gå videre og finn «Navigasjon» -gruppen og logolaget, dupliser det ved å trykke CMD + J og flytte den til "Footer" -gruppen. Endre fargen til hvit #FFFFFF og flytte den rundt 50 piksler under kanten av bunntekstrektangelet.
Til slutt plukk opp Horisontal Typeverktøy (T) og legg til noen linker som brukere kan finne nyttige. Sørg for å gruppere koblingene dine slik at de lett kan tilknyttes. I mitt tilfelle har jeg brukt Source Sans Pro (Semibold) 16px for koblingsgruppeoverskrifter og PT Serif (Regular) 14px for link titler.
Det er det! Vi er ferdige med layoutdesign, så nå gjennomgå lagene, slett unødvendige og overlaste dem til utvikleren din, eller enda bedre kodes det selv. Jeg har rørt noen grunnleggende teknikker og demonstrert arbeidsflyten min for å designe weboppsett, jeg håper du har lært noe.
Jeg vil gjerne høre tilbakemeldingen din og se resultatene av denne opplæringen!
Hvis du er ny på Landing Page Design, vil vi anbefale en rekke innledende opplæringsprogrammer for å få deg raskere med det grunnleggende:
Hvis du er interessert i å få litt hjelp med destinasjonssiden din, har Envato Studio en flott samling av Landing Page Design & Development-tjenester som du kanskje vil utforske. Du kan også ta en titt på Landing Page Temaene på Envato Market.
Accentsconagua