Home | Top Skins | Tags | All Skins | Forums | Contribute | About

BlogSkins.com Forums

Forums > Tips & Tricks > "**Tips on making layouts*" (120 replies)
met3ora's icon Author: met3ora
Posted: 10.4 years ago
(link)
There are a few different questions you should ask yourself before submitting a skin.

1.) What is the main focus of my skin? Remember, this is a blog skin. The blog part should be the biggest part of the layout and should not be smaller than things like about me, links, etc.

2.) Is my skin messy/Is my skin presentable? Beats me, but a neat skin is a good skin though there are few exceptions to that rule. Use tables if you have to to make your layout organized and neat.

3.) Does my skin load fast? There are many things you can do to improve the loading time of your skin. First off, using DIV's instead of tables. Tables are good for beginners to easily organize a layout. They're not bad, but they load slower than DIV's would. Another thing to consider are images. Can you make the image out of a few DIV's? This makes for faster loading time as well. But, if you need to use an image, make sure the image's size is the size you are going to use on your page. Otherwise the computer will load the full sized picture, then resize it...which takes time. Another thing that slows down loading time are those FILTERS. Like those Opacity changing filters take lots of time to process, since IE is very slow at doing that.

4.) How much empty space is there? If you have a small layout, center it. If it's left to the side then it makes the layout look very empty and plain, but if it's centered it doesn't look empty and plain. Crazy eh? Even if you don't have much on your layout, a background color other than black or white can sometimes make up for lack of...something

5.) Who will my skin appeal to? Obviously you can't please everybody, but you should aim to please someone...other than yourself. For example, if you're making a skin with barbie dolls, make the skin girly, etc. If you're making a skin that's supposed to be depressing, make it look darker. Darker background...etc.

6.) Is it readable!? An important thing that a lot of people miss (I think I have too) is that the blog should be readable! The whole point of a blog is so that people can read it. Right? Well, then someone correct me. A light background with a light text color doesn't work, and neither does a dark and dark. Common sense.

I don't mean to make fun of anyone, just remember these things.

Pages: 1 2 3

 
 
puppie89's icon Author: puppie89
Posted: 10.4 years ago
(link)
  Well you've sure spent some time on typing these. Thanks for your help. =)
 
 
francey's icon Author: francey
Posted: 10.4 years ago
(link)
  another note. don't use the opacity filters at all. They are an IE-only feature, and on other browsers (safari, mozilla, opera, netscape, etc.) what will end up appearing is an ugly solid chunk of colour.

ugly huh?
 
 
met3ora's icon Author: met3ora
Posted: 10.4 years ago
(link)
  Agreed with francey-- you can use transparent PNG images to achieve the same effect.
 
 
met3ora's icon Author: met3ora
Posted: 10.4 years ago
(link)
  7.) Did I spend enough time on it? PLEASE ask yourself this question. The more you work on it to perfect it, the higher ratings it is going to get! So spend time on your layouts, it's not a speed contest.
 
 
francey's icon Author: francey
Posted: 10.4 years ago
(link)
  8.) Does it look alright? This means not just checking in Internet Explorer. I realize that a lot of you don't want to check in other browsers, or don't seem to get the point. This implies to me that you just don't care. You can download mozilla/firefox for free at http://www.mozilla.org and opera for free at http://www.opera.com

Just check. I know a lot of you say "I use dreamweaver, and dreamweaver makes them cross browser compatible". Not true. Dream weaver is a piece of software, and cannot guarantee that it's cross-browser compatible. You still need to check yourself.

If you're too lazy to check, then you must not really care. In my opinion.
 
 
met3ora's icon Author: met3ora
Posted: 10.4 years ago
(link)
  ^^that is true, but 90% of people on the web use IE, so if it doesn't look horribly wrong in mozilla and stuff, you should be fine. But, if you want to be a web designer, you do need to make them cross compatible.
 
 
met3ora's icon Author: met3ora
Posted: 10.4 years ago
(link)
  9.) Does my layout have appropriate colors?! This is **very** important. Too much of one color might hurt your eyes, while not enough of a color might confuse your viewers. First: Use a color scheme that matches! Red and yellow does not go well together, just use some trial and error if you need, spend those extra 5 minutes perfecting the colors. And instead of using an opacity filter to get a desired color, use the actual color. You can take a screenshot of your page, open it in photoshop and get the hex value of it instead of using a filter, also making it cross compatible. If you have an image, use colors from it!
 
 
francey's icon Author: francey
Posted: 10.4 years ago
(link)
  Heck, cross browser compatibility is just the tip of the iceberg. I think *everyone* should make their templates cross-browser compatible.

If you really want to get into it, you should be using valid xhtml, using css-based layouts (tables for tabular data only), and valid css. You should also use semantic mark-up.

Key idea is, cross browser compatibility is just the tip of the iceberg when it comes to creating accessible websites.

For example, all the templates at my site, http://design.francey.org , are not only fully cross-browser compatible, validate as xhtml, but most will display properly on screen-readers (for blind people), cell-phones, and pda's as well.

So, in short, cross browser compatibility is not a lot to ask for, and I think anyone who wishes to distribute their work over the internet, should in the very least ensure that their code works in a browser other than Internet explorer.
 
 
met3ora's icon Author: met3ora
Posted: 10.4 years ago
(link)
  10.) Is my layout original? Probably every eight of ten skins I see coming through this site are all the same. Image banner with text below it. Think outside the box! Make new inventive ideas! Don't make something that you could have done changing a color scheme and image on someone elses. Use things like images, CSS and whatever you wish to make your layout unique. Make it stand out
 
 
met3ora's icon Author: met3ora
Posted: 10.4 years ago
(link)
  11.) Who does my layout appeal to? Ok, so you're layout can look nice, but who will it appeal to? For example a Star Wars layout can look nice, but it will only appeal to a select group the people. I'm not saying that you shouldn't make skins like that, but as a general rule, make sure people other than you will like it as well.
 
 
met3ora's icon Author: met3ora
Posted: 10.4 years ago
(link)
  whoops already said that...haha sry guys
 
 
met3ora's icon Author: met3ora
Posted: 10.4 years ago
(link)
  11.) Is my layout organized? Too many times have I seen blog entries below archives, the title on the bottom, etc, etc. Make the layout presentable, make it show all the information easily...use tables, if you have to.
 
 
Sirene's icon Author: Sirene
Posted: 10.3 years ago
(link)
  great thread...I enjoyed seeing how well my skins follow these questions. I LOVE tip #9. hahaha. the one thing people always ask when they comment on my skins is, "can I use it and change the colors?" and cross-browser compatible? well, I have MSIE, Opera, and Mozilla, and I must say, I do get lazy. then again, I haven't designed many skins lately, so...I can't really remember. hm...organized? maybe. readable? yes. main focus? lol, wow. I think the only one of these tips that I can say I really do follow is #10: Is my layout original? that's the first and foremost goal in my mind whenever I create anything--- is it new? is it innovative, or has someone already done this?
 
 
met3ora's icon Author: met3ora
Posted: 10.2 years ago
(link)
  Sirene-- you're probably doing better than a the average BlogSkinner. :)
 
 
myles's icon Author: myles
Posted: 9.7 years ago
(link)
  Thank you very much for this, everybody.
 
 
jeeohdee's icon Author: jeeohdee
Posted: 9.7 years ago
(link)
  I think point number one is very important. very very important. what's up with those tiny blog entry spaces man?
 
 
met3ora's icon Author: met3ora
Posted: 9.7 years ago
(link)
  I'd like to thanks myles very much for posting this on the main page, and add another insight.

12.) Is my layout practical? Alright, well you might think this one is a no brainer, but you'd be surprised on the amount of non-practical (for lack of a better work) layouts there are. Having millions of animated gifs, millions of scrolling marquees and stuff, is not practical. I guess this really goes with 1-12 above. You need to make sure that it is practical for use, and not just eye candy. Again, this has to do with readability and color...matching, I guess. Please
 
 
melodia04's icon Author: melodia04
Posted: 9.7 years ago
(link)
  this is nice. and *eherm* i'm using an image filter and i'm sure it looks a LOT better than having it without style.
 
 
met3ora's icon Author: met3ora
Posted: 9.7 years ago
(link)
  I'm not saying *don't* use filters, but I'm saying they slow down the load a lot. I read somewhere that if a page doesn't load within 3 seconds, a user will usually hit 'back.'Also, filters are for IE only. Mozilla and others will see how it looks without the filters, so remember that. For opacity, you can use photoshop and just slide the opactity slider down, instead of using the filter.
 
 
Ev0nE's icon Author: Ev0nE
Posted: 9.7 years ago
(link)
  Oh I read about this. Really glad that you got the time to type all this out. I do kinda agree with your saying. I do see people making depressing layouts with colourful fonts. That feeling is just so contradicting. I hope they read about this topic. Good luck. =)
 
 
raecen's icon Author: raecen
Posted: 9.7 years ago
(link)
  i use a blog but dont know the base form of blogger templates so i dont know how to make a template.

Edited 3.5 years ago.
 
 
9aLr0x1t's icon Author: 9aLr0x1t
Posted: 9.7 years ago
(link)
  =O i didnt noe tt filters dun work on other browsers! and it loads slower. thnx sooo much for remindin mi x)) i'll use less of opacity filters in mi skins. =D
 
 
lovejoynpeace's icon Author: lovejoynpeace
Posted: 9.7 years ago
(link)
  Also, just to add on, please ensure that you type your html and css correctly.
Some errors in the html will not load, but it makes it very difficult for someone who is trying to edit your skin, eg. adding a tagboard.
 
 
Athenaia's icon Author: Athenaia
Posted: 9.7 years ago
(link)
  I don't post layouts, but I do look for some here. One thing that gets me are the PpL wHo UzE nEtSpK & kNt SpEl TgS tHaT i CuN uNrStNdZ & Pu+ Va\\Ri)Ou{S s*YmBu(Ls !N wRdZ in the titles and descriptions. If I can't easily understand the title and/or description, I don't even bother to look at the skin, no matter how good the layout is.

If you're taking the time to create and submit a layout, please, for the sake of the sanity and eyesight of potential viewers of your skin(s), use proper spelling and grammar. And if you think it doesn't really make a difference, check out the titles and descriptions from the past Featured Contributers and the scarcity of the netspeak.

And now I'll stop sounding like an English teacher. ;)
 
 
myles's icon Author: myles
Posted: 9.7 years ago
(link)
  Athenaia - I love your point (good examples!) and wholeheartedly agree with you, but unfortunately I think it's a lost cause. That type of language is undoubtedly going to continue, especially now with companies like AOL, Nokia, Verizon, etc using it in promotional stuff for text messaging and instant messenging.
 
 
met3ora's icon Author: met3ora
Posted: 9.7 years ago
(link)
  13.) Is my HTML code alright? I've seen too many codes with multiple body tags, or head tags, or no body tags, etc, etc. Please make sure your code has the following: html,/html,head,/head,body,/body. It may look alright in IE, but most browsers will freak if one of those is missing.
 
 
myles's icon Author: myles
Posted: 9.7 years ago
(link)
  A good way to check #13 is to use the W3C HTML Validator at http://validator.w3.org/
 
 
mela's icon Author: mela
Posted: 9.7 years ago
(link)
  :: horrified :: They're actually using that 'type of language' in advertising?

:: aghast, mortified ::
 
 
babbirow's icon Author: babbirow
Posted: 9.7 years ago
(link)
  heys.. anione can help me? i wanna learn h0w to make a blog skins.. but when i read all these things.. it seems so confusing.. so.. i need a easier explanation.. anione can help me?? add me in msn at rowena24@hotmail.com =) thanksx =)
 
 
rhozie's icon Author: rhozie
Posted: 9.7 years ago
(link)
  hey,.....i juzz wanna know if im n the RIGHT
 
 
met3ora's icon Author: met3ora
Posted: 9.7 years ago
(link)
  What?
 
 
brokencord's icon Author: brokencord
Posted: 9.7 years ago
(link)
  This is really good.
 
 
bwei_chiang's icon Author: bwei_chiang
Posted: 9.7 years ago
(link)
  hahaz! These are really good tips...but where do i start? i mean with the html...i tried to read html codes from my friend's sites but still dun know how to make a skin.....
 
 
met3ora's icon Author: met3ora
Posted: 9.7 years ago
(link)
  Start using an editor like Microsoft Frontpage or Dreamweaver. With those you won't have to code any HTML, you just point and click. After you get a sense of webpages, then you can learn HTML. You can learn some HTML at wc3schools.org. Good luck.
 
 
Abagail148's icon Author: Abagail148
Posted: 9.7 years ago
(link)
  um can anyone tell me how to make a blog skin?
 
 
Abagail148's icon Author: Abagail148
Posted: 9.7 years ago
(link)
  um can anyone tell me how to make a blog skin?
 
 
rocheno's icon Author: rocheno
Posted: 9.7 years ago
(link)
  ermz,sorry but i think in making a layout,just one simple question will do..'is it nice?',that's all..
 
 
met3ora's icon Author: met3ora
Posted: 9.7 years ago
(link)
  "Is it nice?" is a generalization for most of this stuff.
 
 
kogoroshi's icon Author: kogoroshi
Posted: 9.7 years ago
(link)
  Hey, I have some free time from not doing my college applications like I'm supposed to, so I guess I'll contribute to this thread. I do agree with what met3ora has said, and I'll just add a few of my own words (sorry if some of this is repetition).

Since I've been in art for who knows how long, I tend to think of successful layouts in terms of the successful usages of artistic elements.

1) Colour
Please, please, please have a colour scheme. The safest colour scheme is monochromatic, where you have 1 colour in different shades +white, black, grey, or brown. Then you get up to analogous which is the next safest. Analogous colour schemes use three colours that are side-by-side on the colour wheel. Many high school classes will insist on using 5 instead of 3, but it should not exceed 5. The hardest to pull off are complimentary colour schemes. These colours involve colours across from each other on the colour wheel. An alternative to this are the split compliments where you go one to either side of the direct compliment. It doesn't matter which one you choose as long as you have one.

2) Composition
So many blogskins have bad composition. What is composition? Composition is setting up how a viewer's eye moves through the piece. In a good composition, the viewer will find a good entrance and a similarly smooth line throughout the piece. The viewer's eye finds an entrance usually through a portion of the layout where the layout runs off the screen. This is why isolated boxes of text on the center of the screen do not have good composition. The eye just sits there and it feels empty.

In addition to avenue of entrance and compositional shape, good composition involves the continuous flow of a layout. In other words, DO NOT have an image floating around in nowhere and your boxes on the other side of the screen. Your eye is disconnected from the two sections and it is hard to see the entire layout, rather the viewer is lead to see a portion of it.

4) Value
It's strange for me to apply value, something that is usually applied to black and white drawings, to layouts. However, layout makers need to find the BALANCE of value. Value is very hard to explain. It is better felt than taught, but I will try my best to do so.

Do not try to squeeze everything onto one corner of the screen if your layout in that corner does not have significant value. In other words, don't put a little yellow box on the corner of the screen and expect it to carry the weight of the rest of the window. If you have an image that has enough value and compositional shape, THEN you can do that, because the values will balance each other. The safest thing to do is to make your value uniform throughout. This means that if you have a light image, use a light background. If you have a dark image, use a dark background.

5) Line and Shape and Form
Have a shape that repeats itself throughout the layout if you can. This brings unity to the layout. For the sake of my sanity, PLEASE try to make that shape something other than a rectangle. Try something new like a hexagon or an octagon! Circles are pretty too!

6) UNITY
I don't need to explain this one. Just...have it...please.

And thus ends my rant on artistic elements and layouts. I have left texture out simply because it's not that important in layout making, and it's commonly ignored without any immediate ill effects.

Have fun and drive safely.
 
 
met3ora's icon Author: met3ora
Posted: 9.7 years ago
(link)
  Great post kogoroshi, and I agree with all of that 100%. I should have shared this earlier, but I found a website that has a color wheel, and will give you analogous, triads etc etc colors if you just enter in the HTML color. http://www.webwhirlers.com/colors/index.asp

Pages: 1 2 3

Subscribe To This Thread: RSS 2.0 or Atom (?)
This thread has been locked, and no new replies can be posted.


Site

- Home
- About
- Feeds
- Privacy Policy
- Contact Us

Skins

- Tags
- Search Skins
- All Skins
- Random Skin
- Skin Of The Day
- Contribute

Forums

- General
- Tips & Tricks
- Help!
- Suggestions
- Skin Requests
- Blogging Software
- Web Hosting

Account

- Log In
- Register
</BlogSkins>

Warning! Do not follow this link! It is a trap for poorly-behaved bots. If you follow this link, you will be banned from accessing this site and several others. I will not have mercy on you. Do not follow this link!