Så använder du mönster på din hemsida

Postat

Mönster och struktur är allt mer populära inslag i webbdesign. Här visar vi hur man på ett spännande sätt kan använda mönster på sin hemsida, och tipsar om sidor för inspiration.

Ett mönster i webbdesign är precis vad det låter som: ett grafiskt element som upprepar sig och oftast är symmetriskt. Till skillnad från mer färgglada element som bilder och illustrationer är mönster mer dekorativa, och består ofta av enkla linjer, cirklar eller kvadrater.

 

I dag talar man ibland om diskreta mönster på hemsidor – mönster som inte syns så tydligt, men ger en tredimensionell effekt till ett underlag. Företaget Six11ink använder sig exempelvis av en mycket diskret struktur som gör att hemsidan ser papperslik ut:

Det kanske vanligaste sättet att använda mönster är som bakgrund, istället för heltäckande färg eller en bild. Att ha en mönsterbakgrund ger en snygg och symmetrisk design, som ofta ser mer levande ut än en färgbakgrund.

 

På hemsidan för tryckeriet Print Mor NYC har man använt ett rutigt bakgrundsmönster:

Ett annat snyggt sätt att använda mönster är på knappar eller i menyfält. Förutom att det också ger knapparna ett mer unikt utseende så gör det att de här elementen sticker ut och blir mindre platta.

 

Så här ser exempelvis Quaintologys mönstrade meny ut:

I Hemsida24:s verktyg är det lätt att lägga till mönster: klicka på Ändra utseende > Anpassa designmall, och klicka sedan på Mönster under fliken Bakgrund. Där kan du välja mellan flera mönster, och även ladda upp egna mönster som du vill använda.

Om du vill se fler exempel på hemsidor som använder mönster på ett snyggt sätt så kan du bland annat titta på Vandelay Design, Smashing Magazine och Design Instruct.

 

För den som inte kan eller har tid att göra egna mönster, finns det många bra webbsidor där man kan ladda ner gratismönster som bildfiler. På Subtle Patterns kan du exempelvis ladda ner väldigt snygga, enkla mönster som är mer avskalade. Design Woop har också en liknande samling nedladdningsbara mönster, och Web Design Ledger har många mer dekorativa strukturer.

 

Patternizer är ett verktyg där du kan göra dina egna mönster. Titta även på Repper Patterns, som fungerar på ett liknande sätt.

 

Om du inte har Photoshop, kom i håg att du alltid kan använda Pic Monkey för att beskära och spara mönster.