Share
Wat je gaat creërenIn deze zelfstudie zal ik Photoshop CS6 gebruiken om een eenvoudige, schone bestemmingspagina te ontwerpen voor een fictief reizend opstarten. Tijdens dit proces zullen we kijken naar het creëren van aangepaste rasters met richtlijnen, typografische lettertypen, veel witruimte gebruiken en de inhoud van onze website op een zeer schone en professionele manier samenstellen. Het voltooide PSD-bestand kan worden overgedragen aan een ontwikkelaar voor codering.
Om mee te kunnen doen heeft u de volgende (gratis beschikbare) middelen nodig:
Begin met het maken van een nieuw document (Bestand> Nieuw ... ) met behulp van de hieronder getoonde instellingen.
Zorg ervoor dat de resolutie is ingesteld op 72 pixels / inchLaten we een aantal hulplijnen instellen, zodat onze lay-out voldoende ruimte heeft en er in evenwicht uit ziet. Ik gebruik niet altijd een raster, maar het instellen van enkele richtlijnen zorgt voor pixelperfectie en zal helpen de breedte van onze website te bepalen. Verdeel het canvas verticaal in twee helften zodat je een gecentreerde compositie kunt creëren. Ga naar Bekijken> Nieuwe gids ... en stel een aantal richtlijnen. Ik kies meestal 1000px als een website-breedte en voeg een aantal richtlijnen toe vanuit de hoeken, zodat er ruimte is om te ademen.
Notitie: Richtlijnen gebruikt voor deze tutorial: verticaal op 200px, 260px, 700px, 1140px en 1200px.
Tip: U kunt ook de GuideGuide Photoshop-plug-in gebruiken om dit proces nog sneller te maken.
We houden ons document vanaf het begin goed georganiseerd, dus laten we drie lagengroepen maken met de naam Header, Features, Social Proof, Final CTA en Footer. Door aan deze etiquette van Photoshop te blijven, blijft alles overzichtelijk en gemakkelijk te navigeren of te bewerken. Ga naar om groepen te maken Laag> Nieuw> Groep ... en geef elke een titel zoals vermeld. Klik op het pictogram om snel een groep te maken.
De header is erg belangrijk voor elke website omdat het de eerste mogelijkheid is om een nieuwe bezoeker te overtuigen dat het nuttig is om op de website te blijven. Dit is waar wij, ontwerpers, opvallende beelden en een duidelijke boodschap met wat acties voor bezoekers moeten gebruiken.
Laten we eerst de achtergrondkleur veranderen in iets heel gemakkelijks voor het oog, in mijn geval gebruikte ik lichtgrijs #ebebeb. Daarna open je de hoofd groep en gebruik de Rechthoekgereedschap (U) teken een rechthoek van 1000x600px en plaats deze tussen de verticale richtlijnen. Download vervolgens de fietstransferfoto, sleep deze naar het Photoshop-document en plaats deze boven de rechthoeklaag. Houd daarna de alt toets en muis over de fotolaag totdat u een kleine pijl naar beneden ziet wijzen en laat deze vervolgens los. U hebt zojuist een gemaakt Knipmasker.
Nu slaan CMD + T en wijzig het formaat van de foto om aan uw behoeften te voldoen.
Tip: ingedrukt houden Verschuiving sleutel om proportioneel te transformeren.
Nu moeten we een laag transparante kleur toevoegen om de afbeelding donkerder te maken, zodat de heldere delen van de afbeelding donkerder worden en witte tekst gemakkelijk leesbaar is. Maak een nieuwe laag boven de afbeelding en maak er ook een knipmasker voor. Vul die laag vervolgens met een effen donkere kleur en wijzig de ondoorzichtigheid rond 20% zodat we het beeld nog steeds duidelijk kunnen zien.
Laten we nu een eenvoudig op typografie gebaseerd logo en navigatie bovenaan plaatsen. Kies een Horizontaal tekstgereedschap (T) en noteer je startup-titel aan de linkerkant. Zorg ervoor dat het leesbaar is en er voldoende ruimte omheen is. Ons logo bevindt zich in de linkerbovenhoek, omdat dit veel voorkomende webconventies zijn en wat veel bezoekers verwachten.
Ik heb gebruikt Aller lettertype voor de titel en Open Sans voor de navigatie-items.
Laten we nu met het hoofdbericht spelen. Je moet de strapline altijd beperken tot een of twee zinnen en ervoor zorgen dat deze kort en gemakkelijk leesbaar is. In mijn geval heb ik 32px gebruikt Open Sans om het hoofdboodschap te schrijven, waarbij de nadruk wordt gelegd op "u reist" door het moediger te maken.
De tweede regel is veel kleiner en dwingt hem om van ondergeschikt belang te worden beschouwd, dus mensen zullen deze lezen nadat ze klaar zijn met de hoofdboodschap. Ik heb het met een grotere spatiëring tussen letters gestileerd, omdat de karakters hoofdletters zijn.
Merk op waar ik het bericht plaats, denk altijd aan het contrast en waar het beter is om je exemplaar gemakkelijk door de lezer te laten lezen.
Maak een eenvoudig oproep tot actie bezoekers informeren wat ze moeten doen. In mijn geval is het een eenvoudig bericht dat suggereert dat bezoekers zich abonneren op de nieuwsbrief. Ik heb gebruikt 14px grootte PT Serif (cursief) doopvont.
Laten we een eenvoudig e-mailformulier maken waarmee onze bezoekers hun e-mailadres kunnen invoeren en zich kunnen abonneren op de lijst. Maak een nieuwe groep met de naam E-mailformulier. Gebruik de Afgerond rechthoekgereedschap (U) met 3px radius om een eenvoudig wit te maken (#FFFFFF) kleurinvoer.
Voeg hinttekst toe zodat mensen weten waar ze hun e-mail kunnen invoeren en een call-to-action-knop kunnen maken. Ik heb gebruikt 13px Open Sans (Semibold) grijs (#Bdbdbd)voor de invoertekst en 13px Open Sans (Bold) wit (#FFFFFF) voor de knoptekst. Kies een pakkende kleur voor je belangrijkste call-to-action, zodat hij opvalt en actie aanmoedigt.
In mijn geval heb ik groen gebruikt (# 51a200) voor de belangrijkste call-to-action. Kies een Rechthoekgereedschap (U) en teken een rechthoekige vorm boven de witte invoer. Houd vervolgens de knop ingedrukt alt toets en muis over de groene rechthoek totdat u een pictogram met de pijl naar beneden ziet, laat de toets los en u maakt een Knipmasker.
Dit is het hoofdgedeelte vlak boven het vouwgebied. Als mensen geïnteresseerd zijn in wat u te bieden heeft, zullen ze naar beneden scrollen om te zien wat u in meer detail hebt.
Vouw de koptekstgroep samen door op de kleine pijl naast de groepsnaam te klikken. Nu moeten we een enigszins andere achtergrond creëren voor het hoofdgedeelte van onze website. Ik heb de Afgerond rechthoekgereedschap (U) met een straal van 5px en witte kleur #FFFFFF.
Plaats uw nieuw gecreëerde vorm direct boven de hoofdachtergrondlaag.
Vouw de groep Functies uit en begin met het typen van uw exemplaar. In mijn geval heb ik de hoofdberichtregel en twee kolommen met functies met een titel en een korte alinea toegevoegd.
Zorg er bij het maken van boeiende kopieën voor dat het leesbaar is en niet te lang. Gebruik verschillende lettergewichten, -grootten en -kleuren om een visuele hiërarchie te maken. Ten slotte, maar heel belangrijk; gebruik veel witruimte. In mijn geval heb ik gebruikt Open Sans lettertypevariaties, donkergrijs # 545454 en lichtgrijs # a2a2a2 voor mijn exemplaar.
Nu is het tijd om ons tweede lichaamsgedeelte te ontwerpen waarmee bezoekers van de website een goed beeld kunnen krijgen en actie kunnen ondernemen. We ontwerpen een sociaal bewijsgebied met een aantal getuigenissen.
Eerst moeten we het vorige gebied op een subtiele manier scheiden. Ik heb de Lijngereedschap (U) ingesteld op 1px met de kleur die lichtgrijs is # e8e8e8.
Minimaliseer de groep Functies en vouw de Social Proof-groep uit. Schrijf opnieuw een titel op met dezelfde grootte als voorheen. De sleutel tot een schoon ontwerp is consistentie, dus als u eenmaal eerder een kleur en maat hebt gebruikt, houdt u die vast.
Voor het gebied van sociale bewijzen heb ik twee fictieve getuigenissen van fictieve mensen gebruikt. Het lettertype dat wordt gebruikt voor het citaat is PT Serif en de rest is de eerder gebruikte Open Sans met verschillende afmetingen en gewichtsvariaties.
Zoals je kunt zien heb ik wat ruimte achtergelaten voor de namen. Ga naar User Inter Faces om een aantal avatars te krijgen. Kies daarna een Ellipse Tool (U) ingedrukt houden Verschuiving sleutel teken een cirkel. Eindelijk kopieer en plak je je avatar boven de cirkellaag en beweeg je muis over de avatarlaag alt sleutel, zodat u een Knipmasker.
Om dingen georganiseerder te maken, maakt u twee groepen binnen de Social Proof-groep en plaatst u de testimonial-lagen in afzonderlijke groepen.
Volgens GoodUI moet je je primaire call to action altijd herhalen, zodat mensen die niet meteen een beslissing hebben genomen, dit kunnen doen nadat ze meer van je website hebben gezien.
Laten we het vorige gebied scheiden met dezelfde regel. Zoek de lijnlaag en druk gewoon op CMD + J om het te dupliceren en vervolgens onder de testimonials te plaatsen, zodat er voldoende ruimte overblijft.
Noteer daarna de hoofdkop van de sectie en een eenvoudige subkop die meer informatie of richtlijnen bevat. Zoals u kunt zien, heb ik dezelfde lettertype, gewicht en maat gebruikt als in voorgaande secties. Houd vast aan één stijl voor al uw kopieën.
Ga naar de Header-groep en vind je formuliergroep, na dat duplicaat (CMD + J) en ga naar de laatste CTA-groep. Plaats het onder de berichten en pas het een beetje aan door een groene streek rond het invoerveld toe te voegen.
Klik met de rechtermuisknop op de invoerlaag en selecteer Meng opties… daarna solliciteer een Beroerte effect zoals hieronder weergegeven. De kleur die ik heb gebruikt is # 51a200.
We zijn klaar met de laatste CTA-groep, dus minimaliseer het en breid de voettekstgroep uit. Laten we tot slot enkele links toevoegen naar de interne pagina's van uw website en een eenvoudige copyrighttekst op een nieuwe regel plaatsen. ik heb gebruikt Open Sans (Semibold) lettertype voor de links.
Merk op hoe het buiten de achtergrond van het lichaam wordt geplaatst om het te onderscheiden van de hoofdinhoud. Zorg ervoor dat u een consistente spatiëring boven en onder de kopie gebruikt, zodat deze in evenwicht is.
En we zijn klaar met de lay-out. Gefeliciteerd!In deze tutorial heb ik je door het proces van het maken van een zeer eenvoudige en schone landingspagina voor reiswebsites geleid, inclusief een aantal belangrijke gedeelten waarmee je de aandacht van je bezoekers kunt vastleggen en verdere actie kunt aanmoedigen.
Het resultaat is een gebalanceerde en lichtgewicht lay-out met een sterke focus op beelden in het bovenste gedeelte en een zuivere typografie in het gebied van het lichaam. Laat het ons weten in het opmerkingenveld als u vragen of opmerkingen heeft!
Als u onbekend bent met het ontwerp van bestemmingspagina's, raden we een aantal inleidende zelfstudies aan om u op de hoogte te brengen van de basisbeginselen:
.
Accentsconagua