Kategorier

Starka färger kan separera erbjudanden, kategorier eller innehållsstatus, men markeringen behöver fortfarande en tydlig hierarki. Dessa HTML-mallar kombinerar palettledd presentation med återanvändbara avsnitt och en responsiv struktur som förblir förståelig oavsett skärmstorlek.

Sidor
Block

Sortera:

Nästa >>

Other Konstdesign HTML-mallar

Färglagda HTML-mallar byggda på en tydlig innehållsordning

I en skrivbordsdemo ser tre serviceblock på tre olika bakgrunder ut att vara avsiktliga. Färgerna sitter bredvid varandra; kontrasten är en del av kompositionen, och hela raden läses med en blick. Öppna samma mall på en telefon, och dessa block blir en vertikal rad ljusa rektanglar. Ingenting har ändrats förutom den ordning i vilken innehållet anländer, och den ordningen bär nu sidan.

När kolumner blir vertikala staplar

Sida vid sida säger en färgad bakgrund tyst att tre objekt hör ihop. När de staplas försvinner meddelandet eftersom läsaren aldrig ser dem samtidigt. En HTML-färgmall har antingen något under för att hålla grupperingen, eller så gör paletten allt arbete.

Tre kontroller är värda att köra innan du bestämmer dig för en fil:

Föreställ dig att bakgrunderna är borta och se om avsnitten fortfarande är separerade. Om de bara finns som färg, finns de inte alls.
Läs telefonvyn uppifrån och ner och bekräfta att sekvensen berättar den historia du vill ha, med skrivbordskompositionen ur bilden.
Leta efter allt som kännetecknas av enbart färg: kategorier, tillgänglighet, utvalda objekt. En besökare bör också kunna skilja dem åt genom orden.

Markering som överlever omordning

Rubriker bär gruppering genom en layoutändring. När varje tjänst eller fallstudie öppnas med sin egen rubrik, och jämförbara objekt upprepar samma struktur, överlever grupperingen. En läsare vet var ett objekt slutar och nästa börjar även på en vanlig bakgrund. Nicepage Grid Element placerar text, bilder och knappar i celler som ordnas om på mindre skärmar, och Responsive Modes låter dig kontrollera telefonvyn separat från skrivbordsvyn.

Tre saker är värda att titta på i den smalare vyn:

Varje färgat block öppnas fortfarande med en rubrik, inklusive de långt under huvudpersonen.
Jämförbara kort behåller samma interna struktur istället för att förvandlas till tre anpassade varianter.
Texten förblir läsbar oavsett vilken accent den landar på när stapeln bildas.

Ett tankeexperiment i gråskala

Här är det snabbaste sättet att bedöma en HTML-färgmall. Föreställ dig sidan med varje bakgrund inställd på vit och varje accent inställd på grå. Kan du fortfarande se vilka sektioner det finns, vilka objekt som hör ihop och vad som kommer först? Om svaret är ja, är paletten fri att vara så högljudd som projektet behöver. Om sidan faller isär, höll färgen uppe en struktur som ingen byggt.