Kickstart van een webontwerp met een afbeelding als basis

In deze korte tutorial laat ik je een van mijn favoriete snelkoppelingen zien voor het kickstarten van een webontwerp. Dit is een methode die ik veel heb gebruikt in freelance ontwerp, en het zal je echt helpen om die eerste hindernis te overwinnen, waar je moet uitzoeken wat het kleurenschema en het algehele 'gevoel' zullen zijn..

Deze techniek is eenvoudig, maar het hoeft niet noodzakelijkerwijs duidelijk te zijn totdat je het proces een paar keer hebt doorlopen. Het begint allemaal met het selecteren van de perfecte afbeelding. Dus met dat gezegd, laten we erin duiken!

Bekijk de Screencast

Een afbeelding selecteren

Zoals gezegd, het begint allemaal met een afbeelding. Iets dat verbonden is met de website die u aan het ontwerpen bent. Ik gebruik vaak Unsplash omdat het geweldig is, maar het aantal inspirerende foto's dat nu beschikbaar is op Envato Elements is ook uitstekend. 

Kies iets dat relevant is, maar iets dat ook kleuren bevat die u zich kunt voorstellen, past goed bij uw project. Als u iets ontwerpt voor een gevestigd bedrijf, moet u mogelijk binnen de merkvereisten blijven. In dat geval zal dit hele proces net zo goed werken met een logo als uitgangspunt.

Dit is de afbeelding waar ik mee start, door Kyler Trautner (het is prachtig en geeft ons een reeks uitgebalanceerde kleuren):

Je kunt het blauwachtige zwart van het asfalt zien, plus een oranje tint van de toendra als we de verzadiging tegenhouden, plus wat grijs lijkt, maar in werkelijkheid een kleur blauw is van de laaggelegen wolk.

Een afbeelding importeren in Adobe XD

Ik heb de afbeelding gedownload en opgeslagen, dus nu ga ik Adobe XD openen (wat toevallig mijn favoriete hulpmiddel is in dit geval, je kunt iets gebruiken dat je beter kent als je dat liever hebt). 

Ga naar Bestand> Importeren en selecteer de afbeelding om deze op je canvas te plaatsen. Verklein het zoals je wilt.

Kleuren kiezen

Door UI-objecten op het canvas te plaatsen, kunnen we de kleurenkiezer nemen en elke kleur met tinten uit onze afbeelding vullen. 

Bijvoorbeeld:

• Plaats een lichaamrechthoek om als achtergrond te dienen en geef het een "medium" schaduw van het asfalt.
• Maak een andere rechthoek voor het hoofdwikkelelement en geef het een donkerdere schaduw van de weg.
• Voeg een schaduw toe aan datzelfde wrapperelement en geef het een passend bijpassende donkerblauwe / grijze tint.
• Een bleke luchtkleur past bij een pagina-element onder de afbeelding.
• Hetzelfde geldt voor tekst, waarvan sommige op licht moeten worden donker en andersom.

Dit is wat ik tot nu toe heb:

Contrasterende UI-elementen

Laten we nu enkele contrasterende oranje tinten gebruiken voor sommige knoppen. Plaats enkele knoprechthoeken op de pagina en kies een beige / oranje tint uit de struikgewas langs de weg.

Het eerste effect is bijna "saai", dus het gebruik van de Vullen selectiegereedschap sleep de kiezer naar boven en naar rechts om de verzadiging te vergroten.

Probeer hetzelfde met een contrasterende blauwe kleur ook voor een secundaire knop.

Conclusie

Met slechts één geschikte afbeelding kunt u een heel kleurenschema beginnen en de basis van een compleet webontwerp. 

Het voorbeeld dat je hebt gevolgd, is afkomstig uit een cursus die "Code-vriendelijk ontwerp met Adobe XD" heet, dus houd dat in de gaten!

Als je geïnteresseerd bent in kleurentheorie, wil je misschien ook deze andere leermiddelen bekijken: