I would appreciate credit, either my Livejournal or this site 
Mar04 Pop-grunge: Icon texture set
No comments yet. Tagged with: icon textures
Mar04 Contrast in web design
One of the first things that they drummed into us at design school was that we are communicators. One of the first thing that was drummed into me when I started working for a web design firm was usability. In a way, these are the same concept.
Don’t let the design get in the way of the message.
One of the most biggest professional learning curves for me was understanding when to trim it back, when to simplify and when to accept that, yes, practicality will sometimes get in the way of my genius (har har). So, a few years on, I can still look back and understand why some websites are the way they are despite the usability flaws.
Which, belatedly, brings me to my point: there needs to be contrast in your design. I went on a joining spree of fanlistings lately and I’ve had a difficult time with some of them. Believe me, I don’t want to be the one to step into your creative vision waving the practicality flag, but if I can’t read your body text because it’s too close to the colour of the background, I’m going to leave. This is the same for form styling, I need to see what I’m typing! When you’re designing your site, you need to remember that lots of people with lots of different monitors are going to be viewing it, so even if it looks fine to you, it may be completely unreadable to others. So punching up the contrast ratio of your text/background is probably a good thing 1
I’m not going to go into the theory of Contrast as a Design Principle because, frankly I’ve written too many essays on such things. And, DesignMeltdown already has a great article.
1 To clarify, I’m talking about the content text, not headers etc.
No comments yet. Tagged with: design, principles of design, rants
Mar03 Tutorial: Centered layouts
This is a revamp of a tutorial I wrote years ago for my old blog (I think maybe 2006/7?)
This is the most effective way that I’ve found to center layouts. There are other ways, but this is the most simple. I’m going to assume that you have a basic knowledge of CSS, including selecting classes and IDs.
Firstly you need to create a container div and give it an id:
<div id="container"> </div>
This container will sit just inside the <body> tag and will contain all of your layout markup. For example:
<body>
<div id="container">
<p>this is your content!</p>
</div>
</body>
Next, in your stylesheet you need to align your text to center. We’ll do this on the body tag.
body {
text-align:center;
}
Next, select the ID that you created above. In this case it was id="container". Give that container a width (it can be any number):
#container {
width:800px;
}
Not too different from what you’d normally do, the trick is adding the margin values:
#container {
width:800px;
margin:0px auto;
}
This is telling the browser to make the top and bottom margins on the div 0 and for the left and right margins, make them auto. The auto allows the browser to calculate the margins on the side for you so it doesn’t matter what size the window is. You can also change the 0px value to anything you want.
The final thing you might want to do is stop all of the text inside the div from being centered. This is easily fixed by added a text-align to the div style itself, like so:
#container {
width:800px;
margin:0px auto;
text-align:left;
}
Hope it all makes sense! Please leave a comment if you have any questions
No comments yet. Tagged with: css, tutorial
Mar02 Two icon texture sets
Here are two icon texture sets that I’ve created for free use. I would appreciate credit, either my Livejournal or this site
No comments yet. Tagged with: icon textures
New blog? I wonder how long this one will last? 