Gäst: Webbdesign Tips och Tricks, Erik Bernskiöld

Erik är en 16-årig student som driver webbdesignföretaget XLD Studios samt e-lärningssidan Bernskiold Media. Han har hållt på med webbdesign i över fyra år och håller även på att lära ut både design, kod, foto och program genom sin mediasida.

Photoshop är ju ett program som går att använda till väldigt mycket saker. Webbdesign är ett av dem och jag tänkte dela med mig idag av lite tips som har gjort designandet enklare för mig och som jag har lärt mig genom åren.

Organisera dina lager i grupper

Det är lätt att bara skapa massa olika lager med de olika delarna på utan att tänka efter så mycket. Det går ju snabbt! Men, när man nu har kommit en bit och behöver ändra på den där delen i menyn som låg på ett av alla lager, blir det genast lite svårare… För din egen skull senare, skapa en struktur med grupper. Man behöver inte nödvändigtvis namnge varje lager utan grupperar man flitigt kan detta vara väl så bra.

Själv brukar jag använda en basgruppstruktur vid nästan alla projekt. Den bygger på att jag har en grupp för huvudet, navigationen, innehållet, sidmenyn, och foten. Då kan jag mycket enkelt öppna en grupp och veta vad som finns i, utan att behöva ha en gigantisk lista med lager för detta. Inuti dessa grupper grupperar jag gärna lager som bygger upp en del, t.ex. en knapp. Anledningen till att jag bara inte länkar ihop dem, är att jag inte oftast behöver se knappen som fem olika lager, utan som en grupp som jag enklare kan kontrollera.

Fyll designen med innehåll

Låt inte huvudet behöva tänka sig innehåll i designen du lagt ut! Istället, placera in text som du har tänkt dig med de stilar du har tänkt dig. Detta är speciellt viktigt om man skickar iväg något till en kund, eftersom de inte kan veta hur du har tänkt.

En mycket bra sida om man behöver fylla en design med text är Lorem Ipsum. Glöm bara inte att säga att texten inte är riktig om du skickar iväg det till en kund… det finns alldeles för många som anmärker på att de inte vet vad texten betyder.

Variera gärna sans-serif med serif

Något som kan användas och bli riktigt snyggt är en måttlig blandning typsnitt av sans-serif (utan klackar) och serif (med klackar). En sådan blandning är t.ex. att ha innehållstexten med sans-serifer (just för att det är enklare att läsa mycket text i serif på en dataskärm) och rubriker med serifer. Beroende på design stilen som är tänkt kan detta skapa en trevlig känsla och få just rubrikerna att sticka ut lite lagom mycket. Även bildundertexter kan med fördel få ett annat utseende mycket enkelt genom att just använda seriftypsnitt.

Drop Shadow – överanvänd effekt som kan bli rätt!

Lagereffekten drop shadow har länge varit överanvänd men mest i en viss form! En skugga som ligger lite snett till höger bakom objektet. Ungefär som standardalternativen ger. Man kan dock använda en skugga på många bra sätt där den passar. Både i sidans olika delar och på text. Ett tips för en snyggare skugga är att sätta avståndet till noll och minska synligheten lite. Generellt leka runt lite med inställningarna på storleken dessutom. Det blir på så sätt en lite mindre tydlig skugga bakom och ger bara en liten upphöjande effekt, som kan vara mycket elegant.

Låt designen ligga till sig

Något som är mycket lätt och som jag verkligen har lärt mig den hårda vägen, är att göra en design som man för stunden är nöjd med och gå direkt till kod med den. Det är aldrig kul när man sedan nästa dag vaknar upp och känner sig missnöjd med den. Låt den gärna ligga till sig, minst över natten så att du kan se den med ett fräscht huvud nästa dag. Många gånger är du kanske inte alls så nöjd med den som du var dagen innan.