Archive for the ‘Design’ Category

I’m sure anyone, who has ever down any hardcore web development or developed a web application will know that after you reach a certain size, your CSS files start to get unwieldy — That is, they become hard to edit, cumbersome to make bug fixes to, and sometimes start taking a month of Fridays to load.

A Common solution to this is to use CSS Indexing, where you set up a system of comments to be able to quickly find your way around your files. While this method of having Comment Headings for each section works, it still leaves you with a massive file size.

Another solution is to go the way of a Framework, where by you break each part in your css down to it’s core components. A list of the core components may look quite similar to the following:

reset.css
Yes, I use a reset stylesheet, simple because it makes it easier to develop styles consistently across browsers.
typography.css
This includes everything to do with type. From the Baseline and Line-height settings, right through to font-sizes and image alignment.
grid.css
A standard style grid systems. Typically including CSS for doing column layouts and table grids.
importer.css
One file to @import in all your CSS files, alternatively you can just link in each of your stylesheets using the <link> tag in HTML.

From that basic layout of files, I then use a I trick call “Body Identification”, this is simply the method of applying a unique ID to each type of page in your site. e.g. If your ‘about us’ page needs a red background, then I’d use this selector to apply the CSS rule.

With using a unique page ID, it’s probably a good practice to put all the CSS files named by their unique ID’s in a folder called ‘pages’ or ‘layouts’. You’re file structure is now looking much more like this:

  • ./ grid.css
  • ./ reset.css
  • ./ typography.css
  • ./ pages /
    • aboutus.css
    • frontpage.css
    • blog.css
  • ./ importer.css

So there you have it, a simple way to manage your css, with the benefits of being in small chunked files, having an abstracted framework to work around — a Scaffold, if you will — and, you also have highly specific stylesheets targeting individual pages of your application.

You can Learn more about CSS Frameworks at:

What’s your own take on the Use of CSS Framworks and They’re Applications?

Okay, So I’m back from no posts, so I thought I’d write about a nice little gem I found while searching for some techniques, tutorials and ways of doing certain things in The Gimp. I’ll probably post more tutorials soon, but here’s the first one, It’s heavily based on this tutorial by Antichange on deviantart.

Painting Clouds In The Gimp

  1. Create a new blank canvas any size you want, I used 1600×1200, set the canvas up with the following settings:

    Transparency

    Colour Space: RGB; Fill With: Transparency

  2. Here comes a fun part: Take out the paintbrush tool (P), select a nice greyish blue colour – #6caad8 maybe? – and then paint on a few circular scribbles:

    Quite simple to do, and also, quite fun if you make it.

    Animation Of Painting: Quite simple to do, and also, quite fun if you make it.

  3. Now, take out the Dodge/Burn tool ( Shift + D ), and start Dodging colour away from the inside out ­– I used a brush size of 15, a scale of 1, no pressure settings, mode of Midtones, and an exposure of 40.
    Note, This needs to be done in one mouse click
  4. Now, still with the Dodge/Burn tool, Repeat the process of step 3. You should end up with something like:

    What I ended up with; After trial and error, you'll get something that looks about right.

  5. Here’s another fun part: Take out the Smudge tool ( S ), and start smudging the colour from the light area to the transparent area.
    Note,
    I had to fill up the transparent areas that I’d left, simply by using the paintbrush and Selecting the colour I needed to patch up.)
  6. Duplicate the first layer below itself, and add a Gaussian Blur (Filters -> Blur -> Gaussian Blur), and set the radius to around 60 (or whatever looks right to you).
  7. Merge the two layers together. Add a Layer Mask to the resulting layer, we want to select “Black (full transparency)”. Switch to that layer mask – next to the layer preview, there should now be a black box with a white border. (You’re cloud will disappear, due to the layer mask)
  8. Now, take out the gradient tool ( L ), select the shape of Radial and the colour to be white. Then, draw on to several gradients from the center of your cloud out. (As you do, you’re cloud will become visible again)

    I'll be the first to admit that this is kinda cheating, but it gives the desired effect.

    I'll be the first to admit, that this is kind of cheating.

  9. And now we’re pretty much done, you may want to add another layer select the cloud via “alpha to selection” and filling it with white, so you’re cloud isn’t a bright blue. But other then that we’re all done. Here’s the original tutorial, once again.
The Final Piece of Work, with a few additions

The Final Piece of Work, with a few additions

Recently there’s been a load of discussion about the flow of development different companies use in order to make websites or applications. Continue Reading »

Well, sort of. As You’ve guessed if your here, I’ve yet again changed the theme of the blog, for those interested in knowing, the header photo is my own, you can find it in my deviantART gallery. That’s all for me right now.

Over the past few months, some would’ve noticed that i haven’t been too active; other would’ve noticed it in the past two weeks. The reason is simple, I’ve been cracking away at the design for this site, once I get a domain name and host sorted.

I’ve gone for a simple and minimalist look, whilst using a grid based layout combined with a dark palette to emphasis on the content. I’m still undecided on the final color palette, but now it’ll include colors around #a0a0a0 and #4a4a4a.The new colour palette for Yet To Be Branded

For typography, I’ve gone with a mixture of serif and sans-serif fonts. I’ve tried to use the serif type for headings or areas which need emphasis, as it stands out against the body text of sans, you can see this in the image to the left. A sample of typography in the new YTBB, both sans-serif and sans!

As for layout, I’ve started by prototyping the design on a few of 960.gs’s grid templates, very handy for use in a boring school class with a substitute teacher. Then i progress to use simple XHTML and CSS. The grid system used is 20/80 in header and content and 50/50 in the footer, all is centered in a container of 78% (there’s a reason for that odd number, but ten points if you can work out why =P )

That’s all for now on the new design; Keep watching and if you’ve got any feedback, by all means, leave a comment and tell me, happy browsing 🙂

Update: You can see the work in progress periodically at this deviation on deviantART.com