For denne opplæringen jeg har bestemt meg for å fokusere på sterke bilder og generøs bruk av negativ plass til å skape en følelse av frihet og klarhet. Jeg vil at design for å se stilig og appellere til folk som bryr seg om sitt bilde.

Forberedelse

Før hopping i Adobe Photoshop og får visuelle ned, la oss definere noen variabler som farger, stil og generell retningen.

Trinn 1

Begynn å samle bilder du liker for din moodboard og fargepalett. Jeg pleier å bruke Pinterest, men gomoodboard.com er veldig nyttig og er designet utelukkende for å lage moodboards.
Gomoodboard.com er en enkel og lett å bruke moodboarding verktøyet.
Trinn 2

Neste opp la oss danner et fargevalg for design; en som er relevant for din merkevare og vil appellere til målgruppen. Det er ofte lurt å bruke en fargepalett generator som Adobe Color CC (tidligere Kuler) som kan spare deg tid til å plukke farger.

Last opp et bilde fra din moodboard og se hvilke farger blir generert. Justere palett å passe dine behov og lagre fargene for fremtidig referanse.
Adobe Color CC lar deg lage fargepalett fra et bilde.
Velge Skrifttyper

Inspirert av noen av elementene i vår moodboard vi vil gå med Source Pro skrifttypefamilie, inkludert både sans og serif versjoner av skriften. En blanding av begge vil legge en balansert følelse og sterke overskrifter.

Få Document Ready

Før vi får kreative i Adobe Photoshop la oss sortere noen housekeeping ut, som å lage et nytt dokument og sette noen retningslinjer.

Trinn 1

Åpne opp Adobe Photoshop og lage et nytt dokument CMD + N. Definere målene for hva du føler passer dine design behov-i mitt tilfelle er det 1400x3564px.

Trinn 2

Etter det satt noen guider så vår layout har nok plass og ser balansert. Stille noen retningslinjer vil sikre ryddighet og vil bidra til å definere vår hjemmeside bredde i forbindelse med denne designen. Gå til View > New Guide ... 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å 200px, 500px, 550px, 700px, 850px, 900px og 1200px

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

Innbydende nye kunder

Vi starter vår butikk utforming ved å opprette en visuelt tiltalende øvre området for å fange oppmerksomheten til de besøkende og sende en direktemelding på hva nettstedet handler om.

Trinn 1

Opprett en ny gruppe kalt "Navigasjon" og sette en ny horisontal retningslinje på 130px. Det er der våre logo, navigasjonskoblinger og søk vil ligge. Plasser logo på venstre side. Hvis du ikke har en, opprette et rektangel form og plassere tekst på den.

Trinn 2

Nå plassere navigasjonselementer som en ren tekst. Fra planleggingsfasen bør du allerede vet hva du trenger å ta med i navigasjons så den potensielle kunden finner det nyttig. Bruk Horizontal Type Tool (T) for å skrive din link titler og plassere dem ved siden av din logo forlate en god del plass.

Trinn 3

Search er en utrolig viktig funksjon der e-handel er bekymret. Gjør din søkefeltet fremtredende og tilgjengelig ved å plassere den til høyre på hovedsiden toppen navigasjon. For å skape den bruke rektangel Tool (U) og Horizontal Type Tool (T). Legg merke til hvordan fargene er inspirert av det bildet vi har brukt med Adobe Color CC.

Trinn 4

Nå er det på tide å plassere et slående bilde som vil være et samlingspunkt for hele nettstedet gang den besøkende ser det for første gang. Som du ser ganske ofte på nettet i disse dager, velger vi høy kvalitet på bilde med en sterk og tydelig fokus, noe som åpner for tekst- og UI elementer å legges over.

Ved hjelp av rektangel Tool (T) tegner en 1400x700px (hvilken som helst farge) rektangel form og plassere den rett under toppen navigasjon (husk 130px horisontal retningslinjen? Det er for denne form). Deretter drar du et bilde av ditt valg og plassere sitt lag over rektangelet formlag.

Etter det holder nede Alt-tasten og musen over bildet lag til du ser en liten pil som peker ned, og slipp musen til å opprette en Beskjærings Mask
slik at bildet er bare synlig innenfor området av rektangelet.

Hit CMD + T for å endre størrelsen på bilder, noe som gjør at du holder nede Shift-tasten, slik du endre størrelsen proporsjonalt.

Trinn 5

For å hjelpe vår image trekke oppmerksomheten mer mot det horisontale sentrum, la oss legge til en gradient som går fra gjennomsiktig til svart nederst. Plukk opp Gradient Tool (G) og tilpasse det til å gå fra svart # 000000 til gjennomsiktig. Etter det holder nede Skift-tasten og dra med musen fra bunnen av bildet til rundt midten for å lage en gradient. Deretter gjøre det til en Beskjærings Mask Hotell og redusere Opacity til 50%, så det er ikke like intens. Endre navnet på laget til "Shadow", så det er lett å identifisere.

Trinn 6

Nå er det på tide å bruke en kraftig overskrift som tiltrekker de besøkende øyet og oppfordrer dem til å finne ut mer. Bruk store og dristige Kilde Sans Pro og skrive en kort overskrift. Jeg har brukt Source Sans Pro (svart) 70px størrelse og 160 for brev sporing.

Trinn 7

Du har fått brukerens oppmerksomhet, nå gir en sekundær melding og, viktigst, en oppfordring til handling (også kjent som CTA
.) Jeg har brukt 28px størrelse Kilde Serif Pro (Regular) for sub-overskrift og gjenbrukes på søk-knappen for å holde UI konsekvent. Anmeldelser

Legg merke til avstanden jeg bruker. La det alltid være nok plass rundt elementene slik at de oppleves raskere og ser mer organisert. Også, hvis du ser nøye vil du se at tekstlag er nærmere hverandre. Dette skyldes Gestalt lov av nærhet.
"Ifølge loven om nærhet, ting som er i nærheten av hverandre ser ut til å bli gruppert sammen."

Opprette tillit Anmeldelser

Og vi er ferdige med "innbydende nye kunder", eller header, området. Etter at vi har den besøkendes oppmerksomhet og interesse er det på tide å vise dem noen flere fordeler vår butikk har å tilby.

Trinn 1

Som vi holdt vår øverste området av nettstedet ganske minimal vi vil gå med en ren og enkel estetisk for resten av oppsettet.

Sett en overskrift som kan være interessante for de besøkende og en kort beskrivelse som vil oppmuntre dem enda mer. Jeg har brukt Kilde Sans Pro (halvfet) 24px og en mørk grå # 282723. Sørg for å forlate god plass over overskriften, så det er i samsvar med det øverste området.

For beskrivelsen bruk noe lysere så det er visuelt svakere og umiddelbart oppfattes som sekundær betydning. Jeg har brukt 16px Kilde Serif Pro (Regular) og fargen er grå #adadad.

Trinn 2

En effektiv måte å skape tillit er å bruke høy kvalitet attraktiv symbolikk som utløser hjernen, skape ønske. Sørg for å investere tid å ta flotte bilder av dine produkter eller få en profesjonell fotograf for å få jobben gjort. For denne opplæringen vil jeg bruke fiktive produkter slik at jeg slipper å ta bilder selv-stedet bruke de fra Unsplash og hamstre.

Velg rektangel Tool (U) og tegne et rektangel form. Etter det drar produktet ditt bilde inn i Photoshop, legg den over rektangel og lage en Beskjærings Mask
. Endre størrelsen på bildet hvis nødvendig ved å trykke CMD + T.
Plasser rektangel mellom første og andre vertikale retningslinjer som vi har definert lik områder for produktbilder i begynnelsen.
Trinn 3

Å holde ting enkelt vi vil gi bare grunnleggende informasjon om produktet, inkludert tittel og prisen (som du kan finne triggere brukerne ønsker å finne ut mer).

Velg den samme Kilde Serif Pro font og skriv inn tittelen hjelp mørkere grå som brukes for seksjonen overskrift. Etter det bruker lysere grå for prislappen, som det er en sekundær informasjon og ikke kreve for mye visuell styrke. En ting å huske på er at våre butikk elementer som titler, ringe til handlingsknapper og beskrivelse blokker er sentrert.

Trinn 4

Nå settes alle produkt lag i én gruppe og duplisere dem ved å trykke CMD + J, plasserer dem mellom de tidligere definerte vertikale retningslinjer forlater mellomrom mellom.

Trinn 5

Vi er ferdig med en "Tendens" -delen med tre produkter. Ifølge Paul Seys, er tre alternativer det optimale antallet for å gjøre tilbudet mer overbevisende.
"En slik teknikk er kjent som" Goldilocks Effect "(eller" Gullhår Pricing '). Begrepet stammer fra Brødrene Grimm fortelling i-som Gullhår spiser tre skåler med grøt; den første var for varmt, det neste for kaldt, men den endelige bare rett. "

Nå la oss sette litt skillevegg slik at det skiller layout i seksjoner. Jeg har brukt the Line Tool (U) 1px lysegrå # e6e6e6 så det er synlig, men ikke for sterk

Tips:.. Hold nede Skift-tasten for enkelt å tegne en perfekt horisontal linje

Trinn 6

La oss nå lage en ny seksjon som viser flere produkter og kaller det "Popular". Folk er alltid søker for validering og viser populære produkter som andre folk likte gi dem sosial bevis på at disse produktene er verdt pengene.

Duplicate CMD + J og tilpasse overskrift, beskrivelse og produkter av "Tendens" -delen . Duplisere flere produkter og lage et rutenett av 3x2 av dine beste produktene.

Fange Leads

Etter å utsette det meste av det visuelle å fremkalle interesse og ønske om det er på tide å ta besøkende informasjon i tilfelle de don 't føler for å kjøpe akkurat nå, slik at du kan nå ut senere.

Trinn 1

Vi har en enkel blogg seksjon bruker samme overskrift og beskrivelse format og noen utdrag fra bloggen innlegg å omdirigere brukere til innhold som kan interessere dem.

Velg rektangel Tool (U) og tegne et stort rektangel som vil fungere som en bakgrunn av denne nye delen. Bruke lette, lyse grå til å skape en svak atskillelse fra produktene. Jeg har brukt #fbfafa. Nå duplisere tittel og beskrivelse av forrige avsnitt, og plassere dem på toppen av den nye bakgrunnen.

Trinn 2

Nå plukke Horisontal Type Tool (T) og skriv inn tittel, dato og korte utdrag av blogginnlegget. Jeg har nok en gang brukt Kilde Serif Pro for tittel og beskrivelse og Source Sans Pro for datoen.

Selv i denne bloggen blokken vil du merke tydelig visuell hierarki, tittelen blir mørkeste og største og andre elementer mindre og lysere i fargen. Ansette alltid visuell hierarki å oppnå logisk flyt. For å holde konsistens gjør blogginnlegg så stor som blokkerer produktet.

Trinn 3

Nå settes alle blogginnlegg lag i en gruppe, og kopiere det to ganger ved å trykke CMD + J, plasserer den mellom vertikale retningslinjer forlater mellomrom i mellom som med produkter.

Trinn 4

Etter å ha vist noen kule produkter og verdifulle blogginnlegg det er på tide å presse de besøkende litt og gi en form med en klar oppfordring til handling for å abonnere.

Nok en gang ta rektangel Tool (U), velge en mørkere farge, som # 282723 og tegne en bakgrunn for vår tegningsblankett. Ved å bruke en merkbart mørkere bakgrunn vil du skape kontrast som automatisk vil trekke seernes oppmerksomhet

Trinn 5

Nå skrive en kort blurb som forklarer hvorfor folk bør abonnere.; uttrykke fordeler
løpet har
. Etter at navigere til navigeringen av vår design og duplisere søkefeltet inkludert knappen, vil vi gjenbruke det for tegningsblanketten.

Dra de dupliserte lag og plassere dem på toppen av vår nyopprettede bakgrunn tilpass input felt og handlingsknapp.

Trinn 6

Til slutt, har hver mal for å ha en bunntekst med linker inkludert, slik at folk kan bla nedover og finne navigasjon til viktige sider, som kundestøtte, kontaktinfo, sosiale nettverk og mer.

Igjen, kopiere blogginnlegg tekstlag og tilpasse dem til å vise koblinger av ditt valg. Splitte ulike koblingsgrupper og skjema kolonner som er likt fordelt på rad

Siste touch:..! Legge en opphavsrett linje helt nederst av oppsettet

Gratulerer

Det er alt! Vi er endelig ferdig med temaet design for våre Shopify drevet butikken, nå gå videre og se gjennom dokument lag, slette unødvendige seg og overlate den til utvikleren, eller, enda bedre, kode det selv! Anmeldelser