So for those of you in Miami this coming wednesday, you might want to check out the August Refresh meeting. I’ll be one of the two featured speakers (the other being my good friend Alex de Carvalho ).

I will be talking about facebook primarily, but also the social graph (network to you noobs), and how it all ties into your business. So if you are interested in understanding the way the new facebook and other social platforms are going to be changing the way business on the net works, then definitely come by. The event is open to anyone, and I am guaranteeing* it will be interesting :-).

*Note guarantee not redeemable in 1st world countries.

I was discussing something with my favorite coworker and decided I would share the conversation.

So I figured I would share a few pics of my setup at my office. I’m kinda proud of it. One of these days, once I finish organizing the office a bit better, I’ll post pics of the rest. So here are the details:
- Mac pro (2×2.66Ghz Dual Core Xeon - 3GB Ram)
- 2 Dell 20″ digital widescreen monitors
- Microsoft natural keyboard
- Logitech mouse
- Powerbook g4 1.5ghz

p.s. the shot of me talking to myself was x’s idea.

So I’ve been playing around with grid based layouts a LOT lately. After seeing the blueprint css framework, I decided this was the perfect time to try designing with grids. For those of you who know me, I have been completely self taught as far as web design and interface design is concerned. Everything I know I learned from reading books or trial and error, so I don’t have the formal background most designers have regarding typography, style guides, etc. Anyway, back to the grids I saw on blueprint here, I decided to make my own grid template for laying out pages and wireframing them.
.
So to begin I went and created a pattern out of the background image in the grids sample above in photoshop. One thing to note with grids, they are supposed to be based on a font size as the defining unit for the sizes. Again, I’m not a graduate of any graphic design school, so my methodology might be weird. Here is how I start a design using grids (the wireframe at least).

Step 1: Create the canvas
First I usually create a document in photoshop 960px wide and 900px high (i’ve got a big screen, and usually end up making the page longer) and either a white or a transparent background. Here is a small example. Generally the grid layer I put over everything else, and make it translucent so i can see where everything is relative to the grid.

Another technique I tend to do is color code the site, so I have an idea of the content, the auxiliary material, the navigation, branding, etc. If you group the colors, it should help you get a better feel for what type of stuff you are really including in your design. Is your design looking 60% ads? Then chances are you need to rethink your site.

So with these steps in mind, you can theoretically start figuring out your layout/structure. The use of grids, especially frameworked grid layouts like Blueprint or YUI Grids will help you in regards to formatting your text, maintaining legibility, and giving your site a solid flow.

Next step will be an actual design, and then transitioning that design into a real xhtml site.

Welcome to the latest iteration of my personal home page. I whipped up this design last week, had it coded by a great CSS guy named Chris, and implemented it today.

So what can you expect in the all new brianbreslin.com ? Well for one, more articles about life, miami, dogs, sports, and cars. You’ll probably see more photos to my flickr and facebook accounts. Last but definitely not least, more videos.