I have a love/hate relationship with web design.

It’s what I like to do. When I first coded a website, looked at it and thought “hey, that’s nice”, I decided that’s what I wanted to do for a living. Even though I have a Computer Science degree and I’m lacking in graphic skills, I love learning about the basics of design through trial & error.

On the other hand, empty Photoshop documents scare me to death. When a project starts and I have to start thinking out of the box, my mind shuts down. For a person as dependent on method and rules as I am, creativity is a huge struggle sometimes. I can prototype and wireframe a project’s ass off, but when it comes to design, I feel like a rabbit in front of headlights. So many possibilities!

Long story short, I get quite paranoid while designing a website. And I thought I should share it with you, dear readers.

Here are the phases I’m going through while designing:

1st phase: Fear of the dark blank slate

Launch Photoshop. File > New. Stare at the screen till eyes feel tingly. Shut down Photoshop and open WoW. Play till eyes bleed.

2nd phase: GTD

I’m feeling quite guilty at the moment, so I usually break up the design process in itsy little steps and enter them in OmniFocus. I start working on the first todo, typically “Launch Photoshop”. Something fancy gets my attention on Twitter. 90 minutes and 12 clicks later, I launch Photoshop and create a new document.

3rd phase: Procrastination

I start translating my wireframes to .psd talk. Typically, that means that I just copy my wireframe to Photoshop, trying as hard as possible to avoid any kind of creative thinking at this point. I obsess over grey boxes and alignment, till I remind myself the finished result will hopefully not look anything like it. I try to switch my mind to creative mode.

4rd phase: Guilt

By now, quite some time has passed and I’ve got nothing to show. I turn to the web for inspiration. It dawns to me: every web designer out there is more productive and creative than me! Every single link I click on is a nightmare. There’s a devil on my shoulder whispering “See how well she’s done it? And in so little time? Try to beat THAT”.

5rd phase: Denial

This is the worst phase, both for me and the people around me. I become moody and unapproachable. I answer to questions with grunts. I mope around the house, wearing pj’s and eating trash food. I’m convinced I’m a fraud, that I somehow managed to cheat people into thinking I’m a designer. No colour scheme works, Photoshop tools give me hell, I can’t even draw a straight line. I sometimes cry. I sometimes have fits. All in all, I behave like a brat.

6th phase: Spark

While browsing every website from Dribbble to Youporn [NSFW obviously / but safe for MY work / mwahahaha / yeah.] and squeezing my mind trying to come up with something, I see it. My spark. My inspiration igniter. It doesn’t have to be a full website, it can be a background or a button or a textured line. The world shifts, everything clicks into place, a feeling of warmth inside me tells me: Everything’s gonna be alright.

7th phase: Execution

That’s where the real design happens. I form a bubble around my design. I’ve been known to talk to myself during this phase – things like “Oh I know! It’ll look exactly like this” are occasionally heard in Casa Sugar. I design like there’s Devil hot on my tail. Sometimes I forget to breathe. Double rainbows all across the sky, unicorns fetch me sandwiches and I keep wondering “Gee, how could I question myself? I’m a great designer”. Yeah, modesty doesn’t really work in this phase.

8th phase: Delivery

[Save for Web|Archive]. Fire up Gmail. Attach & send.

And this happens every. Single. Time.

If that’s not a love/hate relationship, I don’t know what is.

You may or may not know this, but I’m a terrible wannabe overachiever.

When I start working on a project, I don’t just want it to succeed, I want it to be the best. I have visions of extended A+ reviews from fellow web designers and enthusiastic phone calls from clients, analytics pages that go really over the top and thousands millions of happy users.

Of course, all this fantasy gets me in trouble more often than not. I bet you know why: creative procrastination.

What does it mean, in a nutshell? I’ll visualize it for you: me, staring at the screen, pen & paper in hand, designing in my mind, laying out HTML snippets, styling with CSS, solving complex design problems, conducting usability reports and studying ROI analyses.

All. In. My. Head.

That’s a bit too much, as you know. It usually means that by the time I lay down a single line of CSS I’m so tired and confused it’s not even fun anymore. But I love my work, so it should be fun right? Right. That’s why you just need to keep going.

Every time you stumble upon a web design roadblock and lose two minutes of your precious time thinking of how to overcome it, stop and run in the opposite direction, immediately.

If you’re pondering too much over a design problem, do a bit of brain-dead form coding. If you’re totally bored of coding HTML, stop and sprinkle a bit of CSS magic to your project. If you feel confined in your browser window, fire up Photoshop and start designing out of the box. Most important: never stop working on your project. Less thought, more work.

I guarantee, a moment’s gonna come that your project will just look at you, shiny, finished, and you’ll marvel at how streamlined your process was this time.

“But, Sug, what about the correct way of web designing?”, I hear you thinking. As with most design workflows, there is really no spoon. No panacea, no proper way of doing stuff. Hell, I always say “HTML first, CSS second” yet I always start coding CSS as soon as I get a vague idea of the site. Nasty, nasty Sug.

Learn your way of working and try to live with it. Don’t fret over the little things, they will eventually get ironed out before launch, promise.

Just don’t stop working.

If you’re one of the few people that grace my Adium contact list pretending to be away, you should have observed it so far: I gave up on IM. I just had to.

It wasn’t that hard, I just stopped using this means of communication. Nowadays, I mainly use Twitter and e-mail to get in touch with people, the former more so than the latter. OK, I do use IM, but just for intranet purposes at work, using our homemade Pathfinder Instant Messenger. And that’s about it.

Why, I can hear you ask. I’ll tell you why. Because it’s so damn time-consuming I couldn’t do anything with Adium in the background anymore. It was the feeling that I cheated on people and made them feel bad when I wasn’t promptly replying to their messages. That’s why I found Twitter so liberating: noone expects you to be there and reply to every given moment. Well, noone should anyway.

So at first was productivity. I found myself more productive and efficient while at home. I wrote more, designed more and learned more. I learned to manage Twitter distractions and incorporate it in my workflow without serious drawbacks. And everything was fine for a while.

But I lacked something, and that was real-time human communication. And for that, I decided to take my Friday (traditionally at home) nights on IM. Just to keep in touch with friends and add to the overall relaxing feeling. Some light gossip, some link exchanging and that’s it. You give a little but you gain a sense of social satisfaction.

So I was wondering, am I the only one that declared IM bankruptcy? Surely there are more of you that just stopped using it at some point.

Do you still keep tabs on IM friends by logging in every once in a while? Or you just use Twitter and Facebook to communicate with people?

Do share your opinions in the comments.

I blame my university years for my procrastination curse.

Not that anything (much) was wrong with my academic studies, but the whole mentality of (greek) university oozes procrastination: most of the time, there’s not an everyday reason for you to do stuff. There were projects and exercises, yes, but those could be easily (?) tackled the last two or three days of the deadline. Or not.

Since I’m trying hard to face this aspect of myself, I’ve given a chance to time tracking software. I found that I focus more easily on a task if there’s a visible timer around the screen, ticking away, measuring my attention time. Believe it or not!

My first try was something in the lines of Billings and On The Job for Mac OS X. They’re clearly an overkill since I don’t use the invoicing features for my personal projects (or maybe I should) but I like the fact that I can set timers for tasks and group them into projects. But I’m still on the lookout for a better, more effective, less bloated solution.

So my questions are: Do you use some kind of time tracking device or application? Is it online or offline? Digital or analog?

Do share your experience in the comments.

I think my latest desktop sums it up sweetly.

I really missed the excitement of it all. But I’ll get it back, I promised to myself. I’m making baby steps.

On other news, kittens.

I’m a weird creature.

I can spend hours working with music jamming around, feeling completely concentrated. At times though, any possible sound can make me snappy and turn my mind off work, immediately.

Eventhough I tend to have my days on this issue, I’ve observed that most of the creative work I’ve done was under some (i)tunes. Most of the times, I set my player to shuffle and just listen. If I want something easy and not too distracting, it’s Chicane or Sten. If I want something more party-ish, it’s Hôtel Costes and Ministry of Sound collections. If I want to wake up, Placebo & Unkle. If I want some deep concentration, there’s nothing better than Carbon Based Lifeforms.

So my question is…

What do you listen to while designing or developing websites? 

Is there anything particular that makes you zone in (as acidsmile puts it)?

Do you listen to shuffled tunes, a particular playlist or some random radio station?

One of the newest kids on the productivity (or as all the cool kids call it, GTD) field is The Hit List, a polished task management app from PotionFactory, the mama of Voice Candy and Tangerine!.

Having used (for just a bit) a ton of task management apps, both on Windows and on Mac OS, I can tell if one of those buggers is gonna be a hit or not. And this, my friends, is a direct crossé to the jaw of procrastination.

Things? I never quite got used to it. Sounds illogical, but it never managed to fit my workflow. I didn’t like the way it handled tasks and projects and ‘areas’, plus it stayed in beta phase for too long.

OmniFocus? I would love it. If I was Merlin Mann. I’m a quite simple-minded girl and OF was just too much for me.

iGTD? Anything with “todo” somewhere in their name? You name it, I’ve tested it. Nothing worked. So I’ve settled with TaskPaper and all its simple-text, cross-platform goodness. I use it everyday for simple lists, but I wanted an application to keep track of greater projects and complex to-dos. Enter The Hit List.

It’s sexy (even in its public beta incarnation), it’s pleasant to use, it makes you wanna do things, cross them off your list and then add some more (actually, I don’t think that’s a very good side-effect, but whatever).

What I loved:

• Getting around using only the keyboard. I cannot remember myself ever learning all the shortcuts of an application, but I’ve quickly mastered THL ones. It even has a ‘game mode’, where you can move tasks around with W, A, S, D. Support for vi and emacs text shortcuts included. Quicksilver-like “Go To…” functionality. What’s not to love?
• Nested tasks. Yes, at lasts, a task is not just a single action, it’s a tree. Thank you.
• Tabbed view, so handy and card view, which lets you focus on one task alone, adding notes at will. Perfect for brainstorming.
• When you finish a task, a pleasant sound greets you. That is one of the things that makes you wanna complete more and more. Excellent work in visual and aural cues.
• The overall level of polish, given the fact that it’s still in beta (I cannot get over Things prohibiting me from dragging stuff to the sidebar).

I have heard many people comparing The Hit List to Things, but this is like comparing your sexy new girlfriend to your interesting-looking, but pyjama-wearing ex. Yes, THL is a polished task management app like Things, but fares better in almost everything in my starry eyes.

Be sure to download it and give it a go if you’re into it. And check the default Learn The Hit List project for more insight.

* If you don’t get NKOTB, jesus. I’ve gotten way old.

As every web worker I know, I already have a collection of screenshots scattered around my iMac HD. I never felt quite good about it, really; I needed a way to gather all inspiring bits from here and there to a single system, simple and trusty enough to make me use it all the time.

So far, I’ve tried stuff like Skitch (I hate the non-Apple interface, so ugly), a combination of Snapz Pro X and Flickr, a combination of some random Firefox add-on and a trusty folder in my Finder, Curio (which is a great alternative to Microsoft OneNote but kinda of an overkill for this job).

Nothing really felt right. What I really wanted was something like iPhoto, but for screenshots.

And then the fine folks at Realmac software went ahead and released the public beta of LittleSnapper. Let there be light!

Easy screenshots through shortcuts, websnaps (full web site archives actually), built-in browser, DOM targeting (this is COOL), organize photos through collections and smart folders, tagging, rating… What more could a poor designer ask?

Well, some simple stuff:

• Tags autocomplete. That’s a must.
• Some way to view untagged stuff. I tried creating a smart folder for this, but there was no option for “tag is empty”, so…
• An easy way to share through e-mail and upload to my service of choice. Like, one-click easy.
• The option to copy LittleSnapper tags to Spotlight comments. My PIM of choice, Together, already has that and it’s way convenient.
• Small but an annoyance: LittleSnapper icon, please stop jumping up and down when I’m saving a websnap, thank you very much.

Give me those and I’m sold, Realmac.

I really think that even in version 1.0, LittleSnapper is the absolute screenshot tool for every web designer who happens to work on a Mac. And it has a decent jingle to it that makes you use it again and again – always a factor of oomph for every Mac app.

Try it now, people!

And I don’t mean the fiction ones, I mean the ones you read to actually learn about something.

For example, I’m currently reading Pro Javascript Techniques by John Resig.

When I start such a book, I always create a new page in Backpack to hold the key points and some ideas that always seem to slip my mind. I use the prefix “Book – ” for this kind of pages to keep them sorted nicely in my sidebar. I use dividers to separate between the different chapters of the book and the notes feature to add anything I like. It’s quite powerful if you get the hang of formatting.

I then proceed with the book, skimming through the chapter and getting to know its structure. Afterwards, I proceed to reading it thoroughly, going through any examples (if any) to see if I got the hang of it, and underlining main points. 

Yes, underlining, I think that some books must be used as textbooks to actually be useful. So if you’re the faint of heart that can’t stand the idea of spoiling a book with a *gasp* pencil, sorry, I’m not your kind of learner.

I then transfer those vital points to my Backpack page. In this way, I use it like my personal wiki.

I find that this method yields the best results when I really want to learn about something from a book.

So how do you read this kind of books, people? Are you even using books as part of your learning process, or do you rely solely on blogs and web content to gain expertise?

P.S. All content shown on my Backpack page preview is copyrighted to mr. John Resig.

I’ve recently installed the latest Adobe Photoshop CS4 beta and I’m really happy with it – however bloated, the application itself looks a bit more lightweight and usable than previous versions, plus the integration with the rest of the Adobe apps is pretty remarkable.

There is (about) a ton of ways to do things with Photoshop and I know that some of my methods are not the best or the most efficient. But one thing that always bugged me was this:

How can I create a new file easily, containing only a layer I select?

This is something I stumble upon all the time when slicing .psds, yet I never seem to find a proper way to handle it.

Until last week! I then discovered the (hidden) joys of Duplicate Layer.

Say you’ve got a layer (or a group of layers) that you want to transfer to a separate file. Right-click, and you’ll see the relevant Duplicate… command:

Now choose a name for the duplicate layer (or just leave it as it is) and select a target for it from the list of opened documents below. Scroll down and you’ll see a New option:

That’s what you want. Select OK and a new file will be opened automatically, containing your favourite layer.

And tada!

It’s not something new, this way, but I just discovered it (as tons of other things) and I just thought to share.

Do you have a better way to do this?

Please do, and share.