Saturnboy
 11.6

Designing with Inkscape and Blueprint CSS

, ,

I don’t know how a real designer does it, but when I attempt a design, particularly a blog design, I always start with a simple theme. If the ideas begin to flow, I’ll know I chose well. If not, and I still think it’s a good theme, I’ll visit the usual suspects for some inspiration.

On this blog, I started with robots, which quickly lead to gears and mechanics. For this post, I started with circles. Actually, I started with Ironman’s HUD. The whole movie was super cool, but the HUD was the best. And the HUD had all this motion and targeting, and that’s what got me to circles. So that’s the theme. I already know I’m going to apply this theme to a simple grid-based blog layer that I discussed earlier.

Palette

After the theme, I worked on the color palette. I’ve used Kuler in the past to build out a couple of palettes, but this time I just jumped into Inkscape and started messing around. I came up with a nice blood red and black palette.

palette
Circles

Now that I have a palette, I shift my design focus back to circles. It’s not just gonna be “Dot, dot, dot” as my daughter likes to say, so it’s back to Inkscape. Here’s the result:

circles
Layout

Not much left but the real work – make a cool blog design with circles plus some pretty colors. I know my layout, so once again it’s back to Inkscape. There is a nice Inkscape template generator for Blueprint CSS grid layouts. Choosing which colors go where isn’t too bad, because I love dark text on white for blogs. Following that decision, I go with lots of circles in the header in blood red, over a black background. We know the main content will be white with black text, so I decide to make the sidebar really stand out with a bold blood red.

The circles in the header are really easy, I just pick random sizes and put them in random locations. Darker usually means further away, so I just reduce the opacity to let more black through. I use a rounded rectangle with a thick stroke for the main content area. I also add a black shadow around the entire content area to highlight the content. The finished design is here, and I’m calling it Circles Of Doom. Here is a closeup of the header:

Next, we slice and dice

Files

Comments

Angie

11.16.2008

1

Hey there!

Thanks for introducing me to Blueprint CSS and the Inkscape Template Generator! I’m looking forward to using both of them in the near future.

I like the way you write! It’s easy to understand and it flows really well. Your site’s quite pleasant on the eyes too.

Just giving you a shout out so you know that you’re not talking to a wall, haha.

Can’t wait for the next post.

Sean

12.7.2008

2

After reading your article, I wanted to drop a note of thanks! Can’t wait for the next installment.

Bradley

12.16.2008

3

Forever grateful for this one bro. Exactly what I was looking for. On my way now, no looking back.. Thanks again

Bradley

Vlad

8.19.2009

4

Nice! Just looking into blueprint, ran across this. Much likes the current blog design as well.

Pleasant writing style too…

GO BRONCOS 2009!

© 2017 saturnboy.com