38 Skinning Tips

Ga naar beneden

38 Skinning Tips Empty 38 Skinning Tips

Bericht van Lone Wanderer op do 6 feb 2014 - 19:50



38 TIPS VOOR HET ONTWERPEN VAN EEN SKIN

Note vooraf: dit is geen tutorial over hoe je het beste een skin kunt maken. Het gaat hier puur om wat tips en dingen waar je rekening mee kunt houden. Sommige dingen zul je al weten, sommige dingen zul je onbewust al toepassen, maar er zitten ook dingen bij die nog regelmatig verkeerd gaan bij forum-ontwerpen. Ik weet niet of de lijst volledig is; dit is alles wat ík me kon bedenken, maar als jullie ook nog toevoegingen hebben, aarzel dan niet om me dat te laten weten, dan zet ik ze er gewoon bij!


ALGEMEEN

1. Zorg dat je forum het onderwerp uitstraalt. Dit hoeft niet per se heel letterlijk door middel van afbeeldingen, want je kleurgebruik kan ook al een bepaalde sfeer oproepen, zo duidt een zwarte of donkergrijze skin eerder op een dramatische RPG dan op een sprookjeswereld.
2. Creëer rustpunten. Geef niet alle vlakken een texture, achtergrond afbeelding of felle kleur. Bewaar dat voor de dingen die op moeten vallen, zoals categoriebalken en banners, anders weet je bezoeker niet meer waar hij/zij moet kijken.  
3. Bepaal voor jezelf wat er uit moet springen. Zorg dat er niet teveel dingen om aandacht zeuren. Over het algemeen hebben links en NewPost-buttons de meeste aandacht nodig.
4. Verander je skin niet te vaak. Dat lijkt op het eerste gezicht misschien geen logische tip, maar bedenk goed dat de skin van het forum heel erg bijdraagt aan de sfeer van het forum. Een nieuwe skin betekent een andere sfeer!
5. Zorg voor een element dat bij elke skinverandering hetzelfde blijft, zodat het meteen duidelijk is dat het nog wel om hetzelfde forum gaat. Dit kan het logo zijn, maar ook de kleurstelling of bepaalde buttons. Voer alleen een volledige skin-verandering in als je met een schone lei wil beginnen, want de uitstraling van je forum wordt er enorm door aangetast.
6. Originaliteit is goed, maar verander niet zoveel ten opzichte van de standaard dat mensen niet meer weten waar ze alles kunnen vinden. Dit zal je niet snel overkomen, maar hou altijd in je achterhoofd dat de meeste leden liever gebruiksgemak hebben dan een superoriginele skin. Mensen zijn het gewend dat het hoofdmenu ergens rond de banner te vinden is en niet, bijvoorbeeld, onderaan je forum.
7. Zorg dat je skin niet alleen mooi is op een groot beeldscherm, maar op alle gangbare pc en laptopformaten. Dat betekent dat je je forum niet te breed, maar ook niet te smal moet maken, maar het betekent vooral dat je de achtergrond van je forum naadloos moet laten herhalen (bijv. door gewoon een kleurtje te gebruiken, een mooie texture of een afbeelding die meeverandert met het scherm). De achtergrond van dit forum is bijvoorbeeld niet goed afgestemd. Voor mij, met een beeldscherm van 1440x900 loopt hij zoveel horizontaal als verticaal niet mooi door, wat natuurlijk zonde is.
8. Hou rekening met de reclame. Op sommige hosts zien bijvoorbeeld alleen de normale leden reclame, of alleen degenen zonder adblock, but anyway, reclame neemt ruimte in. Zorg dat het er met reclame net zo goed uit ziet als zonder.
9. Gebruik een grid. Een wat? Een grid. Dat betekent dat je dingen verticaal gezien mooi op één lijn zet. Kijk even naar dit voorbeeld. De roze lijnen geven het grid aan en, zoals je ziet, alles staat netjes op dezelfde verticale lijnen uitgelijnd. De afbeeldingen staan precies op dezelfde lijn als de tekst, geen twee pixels verder naar rechts of naar links, zoals bijvoorbeeld hier, waar de banner toch wel 5 of 6 pixels naar rechts óf 4 pixels naar links zou moeten opschuiven om in het grid te staan. (om over de breedte van de banner nog maar te zwijgen, maar daar komen we later op terug).
10. Consistentie, voer kenmerkende elementen (bijvoorbeeld kleur of texture) op verschillende onderdelen van het forum door. Dit is een manier om ervoor te zorgen dat je forum een geheel wordt.
11. Less is more. Probeer niet alles toe te voegen wat er leuk uitziet, anders werkt het alleen maar ave-rechts. Een slider? Prima, als je er nuttige informatie in kwijt kunt. Een uitschuifbalk aan de zijkant van je forum? Ook prima, maar zorg dat er iets in staat wat ook echt op de index moet worden vermeld. Vraag jezelf bij alles af: is het nodig dat dit op de indexpagina staat?


BEWEGING

12. Voeg niet teveel beweging toe aan je forum. De aandacht wordt meteen naar beweging getrokken, dus als er teveel bewegende afbeeldingen op je forum zijn, weet de bezoeker niet meer waar hij moet kijken. Zet beweging in om extra aandacht voor bepaalde dingen te vragen, zoals bijvoorbeeld als er een nieuw privébericht is.
13. Overdrijf niet met sneeuweffecten en kerst/valentijn/paasversiering. Een klein beetje kan leuk zijn, maar het zorgt wel voor meer laadtijd en het past vaak niet in de stijl van je skin, waardoor het alleen maar afbreuk doet aan je skin.


KLEUREN

14. Gebruik een beperkt kleurpalet. Probeer niet de hele regenboog in je skin te stoppen, daar wordt het geheel chaotisch van. Als je kijkt naar Kickstart is het kleurpalet beperkt tot wit, blauw en een beetje rood/roze-achtig. Er komen nog wel meer kleuren voor, maar die zijn in zeer beperkte mate aanwezig (als groeps-kleur, bijvoorbeeld). Als je een forum gaat ontwerpen, kies dan zo’n drie basiskleuren uit die je wilt gebruiken.
15. Zorg dat er genoeg contrast in je forum zit. Dit is een mooi contrast, maar dit niet en dit ook zeker niet. Wat is het verschil? Op het eerste forum is alle tekst duidelijk leesbaar, ongeacht de instellingen van je beeldscherm. Op het tweede forum  is er té veel contrast; de tekst lijkt haast licht te geven. Dat is voor een regeltje tekst niet zo erg, maar je ogen gaan het je niet in dank afnemen als je hele lappen tekst op deze manier moet lezen. En wat het derde voorbeeld betreft: de kleuren vallen volledig tegen elkaar weg. Er zit wel contrast in, maar dat contrast zit tussen de verkeerde onderdelen van het forum. De tekst moet belangrijker zijn dan die leuke wolkjes in de categoriebalk.
16. Wat wil je uitstralen? Vraag je dat altijd af voordat je een skin gaat ontwerpen. Een skin is het visitekaartje van het forum en moet in één klap uitstralen wat jij wilt overbrengen. Is het een droevig onderwerp? Gebruik dan geen felle kleuren. Gaat het over dieren? Gebruik dan natuurlijke kleuren.


AFBEELDINGEN

17. Afbeeldingen zeggen meer dan tekst, maar overdrijf niet. Hoe meer afbeeldingen, des te langzamer je forum laadt en bovendien verliest een afbeelding zijn kracht als hij naast allerlei andere afbeeldingen staat.
18. Gebruik liever een texture die je kunt herhalen als achtergrond, dan een mega-afbeelding.  Ook dit heeft weer te maken met de tijd die nodig is om je forum te laden. Bovendien is een grote afbeelding vaak niet op elk beeldscherm mooi te zien: heb je een klein laptopje, dan zie je maar een kwart van de afbeelding, heb je een enorm full HD scherm dan zie je de afbeelding misschien dubbel.
19. Zorg dat al je afbeeldingen van goede kwaliteit zijn. Zichtbare pixels doen het nooit goed en vage afbeeldingen waarop niet te zien is wat er eigenlijk op staat zijn ook not done. De enige reden om pixel-art te gebruiken is als je een 8bit/Game Boy-thema hebt.  
20. Stem je afbeeldingen op elkaar af. Duidelijk getekende afbeeldingen naast foto’s, dat botst meestal. Soms kom je ermee weg, maar het werkt in ieder geval niet als je in je forumbeschrijvingen en in je banner allerlei afbeeldingen in verschillende stijlen gebruikt.


BANNER

21. Maak je banner niet te groot zodat hij het hele forum overheerst. Je banner kan het beste widescreen zijn, waarmee ik bedoel dat hij breder is dan dat hij hoog is, dat sluit namelijk goed aan op het gemiddelde beeldscherm. Een vierkante banner is alleen goed om op een verticaal beeldscherm te zien, zoals bijvoorbeeld een tablet. Zorg ook dat je banner niet te hoog is. “Te hoog” is misschien een vaag begrip, maar probeer zelf in te schatten wanneer je banner je site gaat overheersen. Het is niet goed als je eerst 1000 pixels naar beneden moet scrollen voordat je een keer bij het forum zelf aankomt, bij wijze van spreke. Denk aan die arme middelvingertjes die moeten scrollen!
22. Gebruik een goede compositie voor je banner. Je wilt dat het oog van je bezoeker naar een aantal belangrijke punten op je banner wordt getrokken, bijvoorbeeld de naam en dat deel dat het meest over je ondwerp zegt. Ik ga hier geen uitleg geven over composities (dat kan gemakkelijk een volledige tutorial in beslag nemen), maar ik zal de allerbelangrijkste hier even noemen: via De Regel van Derden kun je de positie van je belangrijke punten bepalen. Zet je onderwerp op één van de getrokken lijnen (dus op éénderde van de rand van je afbeelding). Als je je onderwerp op een kruispunt zet, zorg je voor extra focus. Andere manieren om de focus ergens neer te leggen is door middel van de Gulden Snede, door contrasten, een driehoekscompositie... Soms kan een verschuiving van een tiental pixels al een enorm verschil opleveren.
23. Zet een naam in of op je banner. Het klinkt logisch en dat is het eigenlijk ook: een naam maakt meteen duidelijk hoe het forum heet en zorgt ervoor dat mensen ook niet vergeten hoe je forum heet.
24. Je banner moet een onderdeel van het forum zijn, geen random los plaatje boven het forum. Zorg dat de banner even breed is als je forum en dat hij volgens het eerder genoemde grid geplaatst is.


BUTTONS

25. Gebruik duidelijke symbolen of tekst. Vaak leiden leuke plaatjes af van het eigenlijke doel van een button. Zorg dat het meteen duidelijk is waar een bepaalde button voor gebruikt wordt: een nieuwe post, een nieuw topic,...
26. Zorg voor een duidelijk verschil tussen NEW en NO NEW, je wilt immers dat je leden wel zien dat er nieuw gepost is.
27. Zorg dat de marker voor een nieuwe post meer opvalt tegen de achtergrond dan als er geen nieuwe post is.
28. Buttons hoeven niet altijd per se afbeeldingen te zijn, met CSS (en dan met name CSS3) kun je een hoop bereiken. Neem eens een kijkje op Pokemon Database. Alle buttons die je daar ziet (de menuknoppen, de knoppen van elk type pokémon, de knoppen van de social media) zijn volledig met CSS gemaakt. Zelfs de search-knop, die toch een redelijk 3D-effectje heeft meegekregen! En ook dichter bij huis, hier op Kickstart: die grijze blokjes voor elke forumtitel zijn in feite gewoon borders van 10px breed.
29. Gebruik alsjeblieft niet de standaard buttons. Je hoeft je buttons natuurlijk niet zelf te maken, maar de standaard buttons geven al snel het gevoel dat er niet veel aandacht aan de skin is geschonken. Hier een voorbeeld van een skin met de standaard buttons van Invisionfree. Het koste mij in ieder geval een tweede blik om te zien dat er echt wel wat meer aan het forum veranderd was t.o.v. de standaardskin naast alleen de kleur. De buttons halen het geheel erg naar beneden qua kwaliteit.


TEKST

30. Gebruik niet meer dan 3 of 4 verschillende lettertypes en ook niet teveel verschillende lettergroottes, zo zorg je dat je forum een eenheid is.
31. Zorg dat er een nette ruimte zit tussen borders en tekst. Dit kan door middel van margins of paddings, afhankelijk van welke tekst opgeschoven moet worden. Als tekst tegen de randen aangedrukt staat, geeft het een rommelige uitstraling.
32. Maak de tekst niet te klein. Het ziet er misschien mooi uit en jij zelf kunt het misschien nog goed lezen omdat je toch dicht op je beeldscherm zit, maar sommige mensen hebben moeite om kleine tekst te lezen. Hou er rekening mee dat jij niet de enige gebruiker van je forum bent!
33. Beperk je tekst op de indexpagina. Geen enkele internetgebruiker heeft zin om hele lappen tekst te lezen, zelfs RPG’ers niet. Lange teksten schrikken af.
34. Gebruik een leesbaar lettertype! Voor je banner en je buttons kun je elk lettertype gebruiken dat je wilt, maar voor langere stukken tekst kun je je het beste op een schreefloos lettertype richten, zoals Arial, Calibri of Verdana. Lettertypen met schreef (zoals Times New Roman en Georgia) zijn ook niet zo geschikt voor beeldschermen. (Note: een schreef is dus het horizontale stokje onder een letter).
35. Niet elk lettertype is bij iedereen beschikbaar. Hoewel er wel manieren zijn om lettertypen te gebruiken die niet iedereen heeft, kun je je toch het beste op standaard lettertypes richten, zodat je zeker weet dat iedereen jouw forum precies hetzelfde ziet. Lettertypes die je zelf hebt moeten downloaden, zullen andere mensen niet hebben.


LINKS

36. Zorg dat je links een hovereffect hebben. Dit kan iets heel simpels zijn: de tekst wordt bold als je er met je cursor overheen gaat, of een plaatje wordt bijvoorbeeld doorzichtig. Een hover-effect zorgt ervoor dat het meteen duidelijk is dat het om een link gaat.
37. Geef je links een andere kleur dan normale tekst, zodat het meteen duidelijk is dat het om een link gaat. Jij weet natuurlijk precies wat er aanklikbaar is en wat niet, maar je gasten weten dat niet meteen.
38. Gebruik alleen submenu’s in je menu als ze daadwerkelijk iets toevoegen. Doe het niet omdat dat nou eenmaal zo professioneel staat.

Lone Wanderer
Lone Wanderer

Aantal berichten : 177
Registratiedatum : 14-12-13
Leeftijd : 25
Naam : Anja

Profiel bekijken http://hongerspelenrpg.actieforum.com/forum

Terug naar boven Ga naar beneden

Terug naar boven


 
Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum