template design tutorial
POST CREATED Dec 9, 2014 17:37:55 GMT -8
darth vader, beekeeper, and 9 more like this
Post by redox-kun on Dec 9, 2014 17:37:55 GMT -8
this is not a coding tutorial. most people can probably code better than i can anyway.
this is a template design tutorial. I AM NOT AN EXPERT (i'm pretty sure everyone is self taught) but if you've seen my shit then you'll know what to expect.
I WILL NOT BE 100% IMPARTIAL. i lean towards minimalist designs of circa 2014. soz if that's not what you're looking for. can't help you there.
i'm just here to give tips and pointers for people who want to improve or get their feet wet in template designing.
the most important rule is that all forms must serve function.
it means that everything you put on a template should have some kind of intention in mind. is a line leading the viewer's eye somewhere? why is your template 300px wide or 500px wide? which colors should you pick? how are you using your negative space? is there too much positive space?
ultimately it all boils down to, you want this post to be read clearly. the template should never dominate the actual post. also, the viewer should never have to question why you put an element in a template. if it's a good design, then the function will speak for itself.
this guide is literally 1.6k words so just...pick which tabs you want to read
positive space is occupied space. negative space is everything else around it that defines its form. positive is full, negative is empty.
people don't want to read claustrophobic text. give them negative space instead. make sure you use padding for your text so that you get
unless ofc that's what you want. but i'm assuming that you're not reading this to break the rules.
in design, negative space can often substitute for positive space as long as you invert the other eelements to create that negative space.
ANYWAY this is all that i can think of for now really. if you've got questions or concerns, tag me and i'll get back to you asap *finger guns*
this is a template design tutorial. I AM NOT AN EXPERT (i'm pretty sure everyone is self taught) but if you've seen my shit then you'll know what to expect.
I WILL NOT BE 100% IMPARTIAL. i lean towards minimalist designs of circa 2014. soz if that's not what you're looking for. can't help you there.
i'm just here to give tips and pointers for people who want to improve or get their feet wet in template designing.
the most important rule is that all forms must serve function.
all forms must serve function
it means that everything you put on a template should have some kind of intention in mind. is a line leading the viewer's eye somewhere? why is your template 300px wide or 500px wide? which colors should you pick? how are you using your negative space? is there too much positive space?
ultimately it all boils down to, you want this post to be read clearly. the template should never dominate the actual post. also, the viewer should never have to question why you put an element in a template. if it's a good design, then the function will speak for itself.
this guide is literally 1.6k words so just...pick which tabs you want to read
FONTS/TEXT:
pretty much everything on the pb default is pretty golden. maybe skip the comic sans though. otherwise seriously the defaults will be your bread and butter.
HOWEVER, the most important thing (imo) is limiting the number of font styles. try not to use more than 2-3 different fonts whenever possible! you get more leeway with big projects but a template is not that big. more fonts = more distraction as a general rule. this is kind of hideous so please don't do it too much.
if you must use multiple fonts, then make sure they don't clash too much. pick similar fonts if you're not confident.
use letter spacing to ur advantage!!!
don't underestimate a template's ability to affect the mood of the post!!
FULL STOP. all this advice is for lyrics/quotes really. DO NOT GET OVERLY CREATIVE WITH THE MAIN POST. DO NOT. people will LOVE YOU for using times new roman or arial. i think the font size standard is 11px or 12px. nobody's gonna kill you for going bigger but any smaller and people are gonna have to squint. nobody likes squinting.
HOWEVER, the most important thing (imo) is limiting the number of font styles. try not to use more than 2-3 different fonts whenever possible! you get more leeway with big projects but a template is not that big. more fonts = more distraction as a general rule. this is kind of hideous so please don't do it too much.
if you must use multiple fonts, then make sure they don't clash too much. pick similar fonts if you're not confident.
use letter spacing to ur advantage!!!
closer spacing adds tension
and wide spacing gives a relaxed appearance.
don't underestimate a template's ability to affect the mood of the post!!
FULL STOP. all this advice is for lyrics/quotes really. DO NOT GET OVERLY CREATIVE WITH THE MAIN POST. DO NOT. people will LOVE YOU for using times new roman or arial. i think the font size standard is 11px or 12px. nobody's gonna kill you for going bigger but any smaller and people are gonna have to squint. nobody likes squinting.
COLORS:
oh god, colors. there is SO MUCH COLOR THEORY THAT YOU COULD BE LEARNING but all i'm gonna say is, make em readable. if you're not confident about colors then there are plenty of palette websites on the internet. you don't want to be too jarring but if your colors are really similar in value then they're just gonna all blur together (highlight so that you don't hurt ur eyes)
a lot of color stuff is just personal preference and experimenting. preview preview preview is ur bff.
personal tips:
1. neon colors look gr8 on dark skins. or dark backgrounds in general
2. the less colors you use, the easier it is to customize for the rp community
3. always try to use colors you've never tried before!!! that's how u grow
4. never underestimate what color accents can do for you! add them to a monochrome design for a pop and bang
5. please please please try not to go too color crazy for anything. there is no such thing as an ugly color except when put in relation with a color that doesn't compliment it.
6. do not blind the reader. for the love of god this red is not a good color for text background. don't do it.
7. most skins are off white or the darkest shade of grey. take advantage of this!! you can have a subtle background shape if you use a shade of grey very close to most backgrounds. however, make sure to use high contrast for lines since they frame your shit.
8. the more color there is, the less effective color accents become.
LIKE SO. see, it doesn't matter that these colors are different hues. same values=hard to read
a lot of color stuff is just personal preference and experimenting. preview preview preview is ur bff.
personal tips:
1. neon colors look gr8 on dark skins. or dark backgrounds in general
2. the less colors you use, the easier it is to customize for the rp community
3. always try to use colors you've never tried before!!! that's how u grow
4. never underestimate what color accents can do for you! add them to a monochrome design for a pop and bang
5. please please please try not to go too color crazy for anything. there is no such thing as an ugly color except when put in relation with a color that doesn't compliment it.
6. do not blind the reader. for the love of god this red is not a good color for text background. don't do it.
7. most skins are off white or the darkest shade of grey. take advantage of this!! you can have a subtle background shape if you use a shade of grey very close to most backgrounds. however, make sure to use high contrast for lines since they frame your shit.
8. the more color there is, the less effective color accents become.
POSITIVE/NEGATIVE SPACE
Negative space, in art, is the space around and between the subject(s) of an image.
-wikipedia
positive space is occupied space. negative space is everything else around it that defines its form. positive is full, negative is empty.
people don't want to read claustrophobic text. give them negative space instead. make sure you use padding for your text so that you get
this sexy thing courtesy of 10px padding
instead of this unsexy thing aw shucks why didn't i listen to redox
unless ofc that's what you want. but i'm assuming that you're not reading this to break the rules.
positive and negative space can work together to create some pretty accents! by padding the inside of the first box by even one pixel, i've created visual interest that gives a little more depth. of course this is not all that you can do.
double borders rely on negative space, which makes them interesting
nevertheless this design is very structured and packed -- which can be what you want. consider what kind of effect you're going for.
consider what kind of effect you're going for. negative space is actually capable of creating tension when they're broken up.
in design, negative space can often substitute for positive space as long as you invert the other eelements to create that negative space.
instead of an actual box for my text, i used the negative space to hold my post instead. this is because positive elements can create negative space. see how there's practically an imaginary rectangle created? i like to use this technique because it makes use of the board's background color, which unifies the overall composition
don't be afraid to experiment to see what works!! there is so much that you can do!!
negative space means that your temps don't even have to be defined boxes tbh. the text creates its own box, even though all i coded was a line and a small icon as an accent. space matters!!! think about your space!!!
SIZE
simply put, how big is ur template? well it depends on the poster. i make templates that i would use myself, which is why my temps range at about 300px or so. i short post a lot. if you're the type who likes to post giant paragraphs, consider upgrading a lil. be wary, though. there are designs that look good as wide templates and there are designs that don't. use your best judgement.
also consider that bells and whistles like icons will add to overall post width.
for the most part you should make sure that your design will look good as a long post because you can't reliably expect people to always use it for 300 words or so. in general i find that wide templates with small text to be intimidating because that often creates a wall of text effect.
also consider that bells and whistles like icons will add to overall post width.
for the most part you should make sure that your design will look good as a long post because you can't reliably expect people to always use it for 300 words or so. in general i find that wide templates with small text to be intimidating because that often creates a wall of text effect.
ICON
take advantage of the fact that icons draw a viewer's attention! you should position icons in a way that leads the reader's eye where you want them. for example.
in this example, the design is straight up top to bottom. it's very intuitive, especially since the icon focuses your attention first before leading you to the post
HOWEVER if you place your icon at the bottom of the template, your reader's eyes are drawn all the way to the bottom to the post because an icon is what adds a lot of the visual interest. use this to your advantage!
if you float your icon, then it can also focus the reader's attention at where the post begins. this creates a zigzag effect as your icon follows the natural path of a reader: top to bottom and left to right.
coding a square icon to a square template can add uniformity, but consider coding a circle icon to a square post every now and then and see if you like that better.
in this example, the design is straight up top to bottom. it's very intuitive, especially since the icon focuses your attention first before leading you to the post
HOWEVER if you place your icon at the bottom of the template, your reader's eyes are drawn all the way to the bottom to the post because an icon is what adds a lot of the visual interest. use this to your advantage!
if you float your icon, then it can also focus the reader's attention at where the post begins. this creates a zigzag effect as your icon follows the natural path of a reader: top to bottom and left to right.
coding a square icon to a square template can add uniformity, but consider coding a circle icon to a square post every now and then and see if you like that better.
LINES:
lines are so fundamental to framing your template unless you go for pure solid shapes. in general i try not to use dotted or dashed lines unless the rest of the template is uber simple because the broken up effect is visually jarring. also, why not go for solid lines if you wanted to frame an object? sometimes simple is better.
whenever people use dashed and dotted in the same template i kind of have to question why they did that because both of those kinds of line basically achieve the same thing. form will serve function whether you like it or not. while that effect breaks up the form effectively, it also conflicts with the overall unity of the template.
consider that shapes can be lines too!! at what point is a shape thin enough to be considered a line? it's always a line, man. every edge frames something else.
here is the best kept secret: lyric lines are perfectly functional as horizontal dividing lines!
whenever people use dashed and dotted in the same template i kind of have to question why they did that because both of those kinds of line basically achieve the same thing. form will serve function whether you like it or not. while that effect breaks up the form effectively, it also conflicts with the overall unity of the template.
consider that shapes can be lines too!! at what point is a shape thin enough to be considered a line? it's always a line, man. every edge frames something else.
here is the best kept secret: lyric lines are perfectly functional as horizontal dividing lines!
consider the following
do you see how the above lyric line frames the top of the post? yeah, don't forget that even text creates its own forms. they're part of the composition too.
do not use too many different lines or i will literally come beat you up!!
OVERFLOW
i hate scrollbars because i'm a young lady of the new generation. if you absolutely must use them, then please code them with classy tags so that they match the template instead of being the visually jarring default.
scrollbars should always be the last resort because a lot of rpers are on mobile and as someone whose laptop broke for months SCROLLBARS ARE THE NEMESIS OF MOBILE
scrollbars should always be the last resort because a lot of rpers are on mobile and as someone whose laptop broke for months SCROLLBARS ARE THE NEMESIS OF MOBILE
UNITY
i think my main problem with a lot of templates is that they assume that tried and true elements that work on their own can just be slapped together with other elements that are fine on their own. the thing is, ur coding a single template. they all have to be unified. in the examples above, most of those temps are unified by negative space. you can also create positive space unification by putting every thing inside of a background (preferably a solid color or a subtle texture). if you have to put elements like icon, post, and tag on seperate positive spaces, then consider using the negative space to connect all of them together.
ANYWAY this is all that i can think of for now really. if you've got questions or concerns, tag me and i'll get back to you asap *finger guns*