Kickstarting av et webdesign Bruke et bilde som en base

I denne korte opplæringen skal jeg vise deg en av mine favoritt snarveier for kickstarting av et webdesign. Dette er en metode jeg har brukt mye i freelance-design, og det vil virkelig hjelpe deg med å komme over den første hindringen der du trenger å finne ut hva fargeskjemaet og den generelle "følelsen" vil være.

Denne teknikken er enkel, men det er ikke nødvendigvis åpenbart før du har vært gjennom prosessen et par ganger. Alt starter ved å velge det perfekte bildet. Så med det sagt, la oss dykke inn!

Se på Screencast

Velge et bilde

Som nevnt begynner alt med et bilde. Noe som er knyttet til nettstedet du designer. Jeg bruker ofte Unsplash fordi det er awesom, men volumet av inspirerende bilder nå tilgjengelig på Envato Elements er også utmerket. 

Velg noe relevant, men noe som også inneholder farger som du kan forestille deg, passer godt til prosjektet ditt. Hvis du designer noe for en etablert virksomhet, må du kanskje holde deg innenfor merkingskrav, i så fall vil hele prosessen fungere like godt med logo som utgangspunkt.

Her er bildet jeg skal begynne med, av Kyler Trautner (det er vakkert, og gir oss en rekke balansert farger):

Du kan se den blåaktig sorten fra asfalten, i tillegg til hva som vil være en oransje fargetone fra tundraen hvis vi støter opp metningen, pluss det som ser ut til å være grå, men er faktisk en nyanse av blått fra den lavtliggende skyen.

Importerer et bilde til Adobe XD

Jeg har bildet lastet ned og lagret, så nå skal jeg åpne Adobe XD (som bare skjer for å være mitt valgfrie verktøy i dette tilfellet, du kan bruke noe som er mer kjent for deg hvis du foretrekker det). 

Gå til Fil> Import og velg bildet for å få det på lerretet ditt. Endre størrelsen på det som passer best.

Plukkerfarger

Ved å plassere UI-gjenstander på lerretet, kan vi da ta fargeplukkeren og fylle hver med nyanser fra bildet vårt. 

For eksempel:

• Legg et kroppsrektangel for å fungere som bakgrunn, og gi det en "medium" nyanse fra asfalten.
• Opprett et annet rektangel for hovedinnpakningselementet, og gi det en mørkere nyanse fra veien.
• Legg til en skygge på samme innpakningselement, og gi den en passende matchende mørkblå / grå nyanse.
• En blek himmelfarge passer til et sideelement under bildet.
• Det samme gjelder tekst, noen av dem må være mørke på lys og omvendt.

Dette er hva jeg har så langt:

Kontrasterende brukergrensesnitt

La oss nå bruke noen kontrasterende oransje nyanser for noen knapper. Legg noen knapprektangler på siden og velg en beige / oransje fargetone fra skrubben ved siden av veien.

Den første effekten er nesten "kjedelig", så bruker du Fylle valgverktøy drar plukkeren opp og til høyre for å øke metningen.

Prøv det samme med en kontrastfarge blå farge også, for en sekundær knapp.

Konklusjon

Fra bare ett passende bilde kan du slå av en hel fargeskjema og grunnlaget for et komplett webdesign. 

Eksemplet du har fulgt er tatt fra et kommende kurs med tittelen "Kodesvennlig design med Adobe XD", så hold øye med det!

Hvis du er interessert i fargeteori, kan du også sjekke ut disse andre læringsressursene: