Kleurenschema samenstellen (colorscheme)

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Een website die je absoluut kan helpen bij het bepalen jouw kleurenpalet is deze! Paletton.com.

Deze website is behoorlijk uitgebreid en je zult er wel enige tijd aan moeten spenderen, om een beetje thuis te komen in alle mogelijkheden.

Ik laat er een paar zien.

Je kunt kiezen om te beginnen starten met één hoofdkleur, drie hoofdkleuren of meerdere.

Stel dat ik drie hoofdkleuren wil.

Gebruik dan de kleurencirkel om de juiste kleurcombinaties te kiezen.

In het voorbeeldvenster zie je welke kleurcombinaties dit oplevert.

Zet de voorvertoning bijvoorbeeld op Color Scheme Designer versie . Deze vind ik wel prettig.

En kijk in de kleurenkiezer. In de buitenste ring staan drie stippen.

Met de middelste stip bepaal je de hoofdkleur.

Met de buitenste stippen bepaal je de bijkleuren.

In het midden van de cirkel kun je de verzadiging en de helderheid aanpassen.

Ook hier is het weer een kwestie van slepen met de stippen.

En zoals de middelste cirkel al aangeeft.

Houd de shift-toets ingedrukt om elke kleurvariant apart op te pakken en te verplaatsen en aan te passen qua kleur.

De optie Presets toont andere variaties op jouw kleurthema.

Ook een van deze kan je dan kiezen.

Wil je weten hoe dit kleurschema er op een webpagina uitziet?

Klik dan op de kop Examples.

Deze kun je in een lichte uitvoering bekijken, een donkere een positief ontwerp of een negatief ontwerp.

Bepaalde kleuren kunnen het lezen van een pagina voor mensen met een vorm van kleurenblindheid nogal moeilijk maken.

Ook daar heeft deze site aan gedacht.

Je kunt bij de menuoptie Visual simulation kiezen voor een soort kleurenblindheid.

Nu kun je precies zien hoe mensen met deze specifieke aandoening de kleuren zien.

Daar kun je dan rekening mee houden bij het kiezen van je kleuren.

De regels voor toegankelijkheid worden alleen maar strenger.

Dus het is goed dat je hier vanaf het begin aan denkt en rekening mee houdt.

Ik sluit het venster.

Om de kleuren te exporteren worden ook verschillende manieren aangeboden.

Klik op de knop Tables/Export.

Een venster verschijnt met een overzicht van de door jou gekozen kleuren.

En je hebt opties hoe je deze wilt exporteren.

Direct bruikbaar voor ons is als css.

In de browser verschijnt een css-pagina.

Je kunt hier de kleuren selecteren, kopiëren en plakken in je eigen stijlblad. Hoe mooi is dat.

Je krijgt ze zowel als hexadecimale kleurcode aangeboden als in rgb.