matthewgruman.com

gruman.me/hulku

I’ve redesigned my portfolio.

I finally put up a portfolio!

Over the past couple of months, I’ve read a number of articles about formatting CSS. To my surprise, there’s actually a large debate about horizontal VS vertical formatting. Vertical formatting, like I’m used to, looks like this:

abbr, acronym {
border-bottom: 1px dotted #666;
cursor: help;
font-style: normal;
}

Horizontal formatting rewrites that same rule as:

abbr, acronym {border-bottom: 1px dotted #666; cursor: help; font-style: normal;}

At first glance, individual properties are much easier to parse vertically; and this is true when it comes to small style sheets.

Huge Style Sheet

Some people separate their CSS into separate sheets: one for structure, one for fonts, etc. I got in the habit of using tab-styling/comments in my CSS and prefer not to make it modular; this works great for the average CSS. With large sites that have a large number of styles however, it starts to get a bit ridiculous. I’m a neurotic adjuster and constantly access and change my CSS throughout the development of a site. And, while I like to think I’m well-organized/structured, I also have the habit of throwing random styles in random places and forgetting about proper tabbing until it’s too late. Leaves me with a mess of a CSS that needs lots of time to work with, and too much maintenance.

I’ve been working on a database entry system that’s going to be used by a lot of different students, so static appearance and usability are incredibly important. My CSS was approaching 1000 lines and I just couldn’t deal with it anymore, so I tried converting it to a horizontal format. It was one of those shave-off-all-your-hair moments (“why did you close the program Matthew! You can’t even Undo anymore! We’re all doomed!”) But then I looked at the length: ~150 lines.

Alphabetization

That first day I started working with the horizontal sheet was the day I stopped doing things vertically. The amount of time I’m able to save by quickly scanning is incredible. While I thought declarations would be difficult to parse, they’ve actually given me a good reason to keep them alphabetical — and this makes ALL the difference.

We usually see alphabetization in list form, but it’s surprisingly easy when it’s in-line, too. Just choose a random place in the string and scan left and right; there’s the property you were looking for. Another benefit of alphabetization is portability: anyone taking over from you will have an easier time understanding your work.

Think of it like putting your alarm clock on the other side of your bedroom. You know logically you should get up when it goes off (alphabetize), but sometimes it’s just not going to work out if you’re close enough to hit snooze (vertical CSS).

Hooray for Horizontal

I’m about to start work on renovating the first major website I ever made with CSS. I kid you not, it’s ~2000 lines long and is probably responsible for the deaths of a million helpless children. You can bet that the first thing I’m doing is a reformat.

Logo Design

I am not a good logo designer. Logo designers are a very special breed of designers who need to focus an incredible amount of time, research, and effort into what might end up as simple as a swoosh. Three of North America’s most easily recognizable logos are as minimal as possible:

ABC and Nike have taken everyday things (the first three letters of the alphabet, a swoosh) and managed to brand them. Gap, like Nickelodeon (orange), have actually managed to brand colour. None of this is an accident.

Design Process

My logo design process involved creating a number of goals:

1. This is my personal website, so it has to be representative of that.
2. It is for the web.
3. It has to include green. In this case: #078C00.
4. It should be minimal enough to fit in with my site design.

Goal one was the hardest, and will always require the most effort for any logo design. If I was working for a corporate client, it would have to be as representative of their company as mine should be for me. The first part of meeting this goal was a self-indulgent period of reflection.

Insulin

I’ve been a Type One diabetic since 1992 and have recently started using an insulin pump; this is on my mind a lot lately. I have always been fascinated with theoretical cell structures. I’m also a big science geek who once considered majoring in Biology.

I thought it would be a good idea to use insulin in the logo, but to what end? I made some sketches involving syringes, liquids, etc.; but nothing worked. Then I started Googling around and found a generated image of insulin hexamers on Wikipedia that I absolutely loved, so I brought it into Illustrator and started making shapes.

Illustrator

Adobe Illustrator is my program of choice for graphic design. I love the non-destructive editing process, and years of working in various mediums/sizes have given me a great appreciation for vector-based images.

I started by focusing on the outer triad (I think that’s carbon), but wasn’t feeling anything I came up with. Then I started looking at the inner structure (zinc, I think) and sketched a few ideas from there. From there, it was a matter of anal adjustments (at work, my reputation is “if you need something done, give it to Matthew; he’ll be finished in a half hour, but then he’ll spend the rest of the day adjusting everything pixel-by-pixel”) until it felt right.

The New Logo

Goals Revisited

1. The insulin is obvious; but the green — and the fact that the logo looks like a flower — is a reflection of my environmentalism, the plants I take care of, and my favourite colour.
2. It’s size and minimal colours make it very web-friendly.
3. Green: #078C00; Red: #980738.
4. I feel that the addition of red works very well.

Reflection

I’m happy with the logo for now. As I said, I’m not a good logo designer, so this was really a way to continue learning the logo design process. I intend to actively make changes to get more comfortable with identity branding.

Update

I had a chat with Dany about my logo, and he voiced similar concerns to the ones I had. I decided to rework a couple of my other ideas, and ended up sketching out something new.

Newer New Logo

Interesting little post on the current trend of Green and White here:

www.matthewgruman.com

Matthew is a Creative Person with some of the most clear ideas on design, both on the whole as well as personal approaches to it. He’s a fantastic human, designer, and musician. He is also has the largest collection of my artwork in the world.

D.

I’ve always said that Dany is incredibly insightful.

“Little Optimum”, from Thomas Doyle‘s Reclamation series.

Yanko, via Gizmodo.