Post by coolbyrne on May 27, 2007 23:10:49 GMT -5
We’ve been asked several times in emails or PMs how to go about building a website. We’ve been asked what our resources are, what we recommend and why we made the choices we did for our own site and why we don't like blue. This might be a bit long, so if you’re not interested, please feel free to skip!
First and foremost, neither RM nor I are professional web designers/builders. Anything we do, we’ve picked up along the way just through trial and error, really. (I started with the generic “drop and save” templates from Geocities!) I think patience is probably your best weapon! LOL!
The template- I’m going to take it for granted that anyone reading this has a fair idea of what a source code is. If you don’t, go to MandanaFC.com, and anywhere on the page, right click, go to "This Frame", then click on “View Frame Source”. All that text makes up that page. The good news is, very little needs to be changed from page to page. The template we use is CSS, not HTML. I find HTML coding to be extremely limiting, and for the most part, what you see with HTML is what you get- changes in font size, font colour, and background colour are a pain in the arse, if even possible. With CSS coding, I can have five different font sizes and 4 different font colours if I want, and changing the background is as simple as typing in a new 6-digit code. (We’ll get to that later!)
We use a pre-built template; we didn’t build ours from scratch. You can easily find hundreds of free templates just by typing in “free web templates” in the Google window, but for us, we absolutely recommend Open Source Web Design. They’ve got some really sharp looking templates, they’re free to use (you don’t even have to sign up!), and you’re allowed to change them in anyway you like. We only changed one or two things from the original template, but if we want to take out the wood? We can do that. If we want to change the colour of the banners or the fonts? We can do that. Etc. I also find using pre-made templates helps with the learning process. By having the code already written, you can tinker with it and see how you can change it and have something that looks really good.
We liked it because to us, something about it said, “Mandana”. The template itself is called “zenlike” and I think that says it all. It’s not in your face, but it’s not boring, either. There is a really nice mix of colours and textures happening. Even though there is more white than anything else, it is framed nicely by the background that is not a colour, but surprisingly, an image. That on its own gives it a unique look. As well, the top black banner really grounds the page and the green menu isn’t your usual green, making the transition from the black to the white less jarring.
Colours and Images- You can spend the whole day looking at images from Stock Xchng! From food to rocks to clothing to paper to anything, you’re bound to find whatever image you want here. We took the rock image we have as the second banner from that site. (You do have to join, though.) We liked it because it fit the “zen” idea, but also because it gave the site more visual texture. RM then added the text, which are snippets of Mandana quotes. I don’t think we changed any of the font colours, but if you want to do that, or change the background colour, you can find a really good colour code chart here.
I have been asked about the lack of blue on the site and while it might have been a tongue-in-cheek reference to another site, I wasn’t sure how to answer it without being snarky. I will say this much- use one colour as much as you want, but without using another colour as a really nice contrast, it looks flat and, I’m sorry, amateurish. You don’t even need to use another colour as a background or an image- change the font sizes and font colours and you can have something really sharp. Change the titles (like “Update” or “Welcome”) to larger white fonts, and maybe make those fonts a bit funky. You can find 1000’s of free fonts to download here. Change your content fonts so that they’re smaller than the titles, but also a different colour than the titles and the backgrounds. I really, really don’t recommend taking the colour of the font from the same colour pool as your background, but if you’ve got your heart set on an all-brown palette, make the background bold and dark (chocolate, say) and the font lighter (coffee with cream, maybe), or vice versa. You NEED that contrast between the two to give your page “pop”. And don’t fall into the trap of thinking only blues and beiges are “workable”. Check out this site for some AMAZING sites in different colours. I mean, really- PINK?? But it works if you have a nice contrast in colours and fonts.
Hmmm.. is that it? Template, fonts, colour, images, examples. Those are the basics. Of course, once you figure that out, you can add java, video stream, flash, etc. But work on the basics first before tackling the bigger stuff. Other things not mentioned- we use Ripway to store our files, images, etc. I believe RM uses Photoshop 6.0 for her images and icons.
If you have any questions about our site, or are trying to build your own site and need help, just ask! No guarantee we’ll have all the answers (in fact… LOL!) but we’ll do the best we can.
First and foremost, neither RM nor I are professional web designers/builders. Anything we do, we’ve picked up along the way just through trial and error, really. (I started with the generic “drop and save” templates from Geocities!) I think patience is probably your best weapon! LOL!
The template- I’m going to take it for granted that anyone reading this has a fair idea of what a source code is. If you don’t, go to MandanaFC.com, and anywhere on the page, right click, go to "This Frame", then click on “View Frame Source”. All that text makes up that page. The good news is, very little needs to be changed from page to page. The template we use is CSS, not HTML. I find HTML coding to be extremely limiting, and for the most part, what you see with HTML is what you get- changes in font size, font colour, and background colour are a pain in the arse, if even possible. With CSS coding, I can have five different font sizes and 4 different font colours if I want, and changing the background is as simple as typing in a new 6-digit code. (We’ll get to that later!)
We use a pre-built template; we didn’t build ours from scratch. You can easily find hundreds of free templates just by typing in “free web templates” in the Google window, but for us, we absolutely recommend Open Source Web Design. They’ve got some really sharp looking templates, they’re free to use (you don’t even have to sign up!), and you’re allowed to change them in anyway you like. We only changed one or two things from the original template, but if we want to take out the wood? We can do that. If we want to change the colour of the banners or the fonts? We can do that. Etc. I also find using pre-made templates helps with the learning process. By having the code already written, you can tinker with it and see how you can change it and have something that looks really good.
We liked it because to us, something about it said, “Mandana”. The template itself is called “zenlike” and I think that says it all. It’s not in your face, but it’s not boring, either. There is a really nice mix of colours and textures happening. Even though there is more white than anything else, it is framed nicely by the background that is not a colour, but surprisingly, an image. That on its own gives it a unique look. As well, the top black banner really grounds the page and the green menu isn’t your usual green, making the transition from the black to the white less jarring.
Colours and Images- You can spend the whole day looking at images from Stock Xchng! From food to rocks to clothing to paper to anything, you’re bound to find whatever image you want here. We took the rock image we have as the second banner from that site. (You do have to join, though.) We liked it because it fit the “zen” idea, but also because it gave the site more visual texture. RM then added the text, which are snippets of Mandana quotes. I don’t think we changed any of the font colours, but if you want to do that, or change the background colour, you can find a really good colour code chart here.
I have been asked about the lack of blue on the site and while it might have been a tongue-in-cheek reference to another site, I wasn’t sure how to answer it without being snarky. I will say this much- use one colour as much as you want, but without using another colour as a really nice contrast, it looks flat and, I’m sorry, amateurish. You don’t even need to use another colour as a background or an image- change the font sizes and font colours and you can have something really sharp. Change the titles (like “Update” or “Welcome”) to larger white fonts, and maybe make those fonts a bit funky. You can find 1000’s of free fonts to download here. Change your content fonts so that they’re smaller than the titles, but also a different colour than the titles and the backgrounds. I really, really don’t recommend taking the colour of the font from the same colour pool as your background, but if you’ve got your heart set on an all-brown palette, make the background bold and dark (chocolate, say) and the font lighter (coffee with cream, maybe), or vice versa. You NEED that contrast between the two to give your page “pop”. And don’t fall into the trap of thinking only blues and beiges are “workable”. Check out this site for some AMAZING sites in different colours. I mean, really- PINK?? But it works if you have a nice contrast in colours and fonts.
Hmmm.. is that it? Template, fonts, colour, images, examples. Those are the basics. Of course, once you figure that out, you can add java, video stream, flash, etc. But work on the basics first before tackling the bigger stuff. Other things not mentioned- we use Ripway to store our files, images, etc. I believe RM uses Photoshop 6.0 for her images and icons.
If you have any questions about our site, or are trying to build your own site and need help, just ask! No guarantee we’ll have all the answers (in fact… LOL!) but we’ll do the best we can.