Share
I denna korta handledning ska jag visa dig en av mina favoritgenvägar för att starta en webbdesign. Det här är en metod som jag har använt mycket i frilansdesign, och det hjälper dig verkligen att komma över den initiala hinder där du behöver utarbeta vad färgschema och övergripande "känsla" kommer att vara.
Denna teknik är enkel, men det är inte nödvändigtvis uppenbart tills du har gått igenom processen ett par gånger. Allt börjar genom att välja den perfekta bilden. Så med det sagt, låt oss dyka in!
Som nämnts börjar allt med en bild. Något som är kopplat till webbplatsen du designar. Jag använder ofta Unsplash eftersom det är awesom, men volymen av inspirerande foton som nu finns på Envato Elements är också utmärkt.
Välj något relevant, men något som också innehåller färger som du kan tänka dig passar ditt projekt bra. Om du designar något för ett etablerat företag, kan du behöva hålla dig inom kraven för varumärke, i vilket fall hela processen kommer att fungera lika bra med en logotyp som utgångspunkt.
Här är den bild jag börjar med, av Kyler Trautner (det är vackert och ger oss en rad balanserade färger):
islandDu kan se den blåaktiga svarten från asfalten, plus vad blir en orange nyans från tundran om vi stöter upp mättnaden, plus vad som verkar vara grå men är faktiskt en nyans blå från det lågljudda molnet.
Jag har bilden laddad och sparad, så nu ska jag öppna Adobe XD (som bara råkar vara mitt valfria val i detta fall kan du använda något som är mer bekant för dig om du föredrar).
Gå till Arkiv> Importera och välj bilden för att ta den på din duk. Ändra storlek på det som du tycker är lämplig.
Genom att placera UI-objekt på duken kan vi sedan ta färgplockaren och fylla varje med nyanser från vår bild.
Till exempel:
Detta är vad jag har hittills:
Låt oss nu använda några kontrasterande orange nyanser för vissa knappar. Placera några knapprektanglar på sidan och plocka en beige / orange nyans från skrubben bredvid vägen.
Den ursprungliga effekten är nästan "tråkig", så att använda Fylla urvalsverktyget dra plockaren upp och till höger för att öka mättnaden.
Testa detsamma med en kontrasterande blå färg också, för en sekundär knapp.
Från bara en lämplig bild kan du sparka av ett helt färgschema och grunden för en komplett webbdesign.
Exemplet du har följt är taget från en kommande kurs med titeln "Kodvänlig design med Adobe XD" så håll ett öga på det!
Om du är intresserad av färgteori kanske du också vill kolla in dessa andra läromedelar:
Accentsconagua