A web agency weblog

My first web site that appears at CSS Mania. In less than twenty minutes has already received 500 hits from the gallery.

There are many occasions when you need to take a snapshot of a web page, maybe one of yours to include in your portfolio or other’s when commenting on design, usability or maybe writing a book or tutorial.

Windows users are used to pressing the print screen key and then pasting into their favorite graphics application. There are also some commercial applications available for this apparently easy task.

I’ve been using using KSnapshot under Fedora Linux for a few years and was enough for most of my needs.

But there are times when you need a snapshot of a complete web page, including parts below the fold, parts that aren’t in your browser’s viewport. What’s a clever guy got to do?

Vertically scrolling, taking two or more snapshots and putting them together in your graphics application is the obvious solution but takes a little more time and soon becomes tiresome, specially when many snapshots are needed.

Some commercial applications include the feature but come on! there are smart and free solutions for almost everything.

I was thinking about that when I found ScreenGrab!, a neat Firefox extension. ScreenGrab is the solution for the long web pages snapshot problem and, as every Firefox extension, can be installed with just a click and a restart. Then you just have to visit a web page and right click to capture it.

ScreenGrab offers three options for capturing a web page: document, viewport and window.

Choose document is you want the complete web page saved as an image, including parts below the fold. Viewport captures just what’s visible and window includes your browser in the picture. The images are saved in PNG format.

Here’s a capture I just made from my music, movies and books reviews site. The image was later scaled with Gimp. Nice, uh?

Some days ago I made a public question to my favorite web designers.

Unfortunately I did not get the feedback I expected.

Yesterday I got an email from Dave Shea (thanks!), who kindly pointed me to some clever, and logic, issues to get a better feedback from designers.

So, it would be great if you, everybody into web design, could tell us:

What are the two first steps you take when starting a web design project?

A quick and simple answer is enough, for example, in my case is:

Logo and color palette.

Of course you can elaborate and include more steps.

Regards!

I had a dream, it’s not a joke, I really dreamed this two nighs ago:

” What if I asked all the people whose work I admire to tell us about what inspire them and how they get from idea to design?, better yet: What if they post those ideas at my blog?! “

Well, let’s try, worst thing that could happen is that nobody participates.

I think it is fair, for my readers and for the (hopefully) guests to come that I begin telling you how I do it. I don’t intend to compare myself with so many good designers, I just want to share.

First steps

I try to understand what I will create, what are the site owner expectations?, what are his audience interests and needs?, what are their products or services?

I have to find a theme for the web site, sometimes it is clear, for example: In creating a basketball team site the theme is just “basketball", but what happens when we are talking about a consultancy or some other business, let’s say something more abstract as human resources?. Well, in that case I have to go to some other sources.

Pictures and nature

Sometimes I just get a picture, a good one and try to get a theme from it, a color palette, abstract shapes, whatever can trigger imagination and be converted to something usable in Photoshop. I really like using my own pictures, wherever I am I try to carry my camera with me, experiment with it, taking pictures of everything, you don’t know when you will taking a really great picture.

I had read about using nature as an inspiration and you know what?, it really works! Go to the zoo and look at any animal or flower, everything in nature has a good combination of colors, nature is the perfect designer and you can get great ideas from it. If you don’t have the time look at the Discovery channel or go to the park.

Look all around you

Try looking at everything with a designer mind: Your car, other cars, a house, your clothes, your watch, anything! You can get an idea from every simple object, keep you mind alert for any detail.

Forget about it!

As Al Pacino told to Johnny Depp in Brasco: Forget about it. Sometimes you need to stop thinking about design, just go for a walk, watch TV, take a shower (this one has worked for me many times, not only with design but with business ideas, writing issues, etc), play some music, do anything !, but forget about design. Your mind will relax and your subsconscious could be a better designer than you.

Look great designers portfolios

Visit your favorite designer web site, read magazines, watch TV ads. Learn from the pros. Don’t copy, get inspiration, it is different.

Feeling lucky?

This may not sound too “professional” but sometimes it works: I just randomly play with different filters and effects in Photoshop or Illustrator until getting something that looks nice. Sounds familiar?, well, don’t forget to look, with a very critical mind, at what you get some hours or days later, if you still think your creation looks good then congratulations!, you were lucky!

I am not a great designer, I will try very hard to be one.

Now for the difficult part of my dream: I will invite the people who inspire my every day work to comment on this post and share with us how they create their magic. I will do my best to contact them and hope they can participate. They are, in no particular order:

• Jeffrey Zeldman
• Douglas Bowman
• Todd Dominey
• Dan Cederholm
• Dan Rubin
• Dave Shea
• Cameron Moll
• Ryan Sims
• Shaun Inman

I hope you can help me making this dream come true.

I really enjoy talking about design, many times I notice how some great designs use so little elements to get amazing effects.
In this article by Ryan Sims, we can read about the poster created for the sequel of Ocean’s Eleven, a film full of Hollywood celebrities, the poster does not use any face but still is a piece of really good design. Judge yourself.