4 ms·

Early sketches from web designers

92 points by kellysutton 14y ago

flexxaeon 14y ago
I suck at design and I think omitting the sketch step is part of the reason why. Dick Tracy poster is great.
- ianstormtaylor 14y ago
  Yeah that poster is sick, and the notes he wrote next to his sketches are really interesting to read
- camus 14y ago
  You may suck at design because you lack some artistic culture , it is has nothing to do with sketching or even the ability to draw. Get a generic art history book , study a ton of design from other designers and you'll be a better designer.
  - deleted 14y ago
    [deleted]
  - flexxaeon 14y ago
    Your words are true, but not necessarily in my case. I think I've got the culture as I have the natural talent (and ability to draw), studied under and worked with some very talented designers over the years. I've pulled off some successful designs as well. The issue is that my passion to code is greater than my passion to design. Even if I do start at the sketch step, I all but salivate at the chance to get cracking on the CSS. I don't suck because I can't sketch, I suck because I don't sketch. :P Whenever I do sketch my designs come out better.
  - camus 14y ago
    well i dont sketch neither , doesnt make my designs bad, As long as one has a clear image of what one needs to make , the way one makes it real doesnt matter, weither it is using hand code css , dreamweaver, whatever...
  - jamesbritt 14y ago
    Get a generic art history book , study a ton of design from other designers, make a shit-load of bad stuff but keep on going anyway, and you'll be a better designer. You won't really know what you know until you apply it. You will likely suck at it. Doesn't matter. You'll suck a little less at it next time. "The experienced illustrator subscribes to the principle of the application of the seat of the pants to the seat of the chair. Should inspiration whisk down your chimney, be at your table. The first ten thousand drawings are the hardest. Put another way, you have ten thousand bad drawings within and should expel them as quickly as possible." http://en.wikipedia.org/wiki/Wallace_Tripp http://en.wikipedia.org/wiki/Wallace_Tripp
jon_kuperman 14y ago
These are really cool. I like seeing start and finish pictures from cool projects.
jameshsi 14y ago
I'd love to see more sketches just to see how much detail a designer puts into a sketch on average, and how that varies across different areas of design. It's nice to see barebone sketches like Maykel's and Ian's. Even after reading bill buxton's book on sketching, i still catch myself trying to refine sketches just so they look nice even after an idea is explored. Thanks for compiling these, looking forward to see more!
- allang 14y ago
  There are a bunch more that we hope to share soon. Glad you like this stuff!
- kellysutton 14y ago
  One of my favorite parts of watching allang write this post was proof that there is some hope for us developers out there. :)
sgdesign 14y ago
Very nice sketches. But I want to point out that if you don't sketch you shouldn't feel like you're "doing it wrong". Sketching is not a required step. Starting straight in Photoshop (or even in the browser) are both valid methods too.
- dave5104 14y ago
  It's definitely not required, but it can probably save you some time since it's a bit easier to erase some pencil than it is to start again in Photoshop.
  - jamesbritt 14y ago
    since it's a bit easier to erase some pencil than it is to start again in Photoshop. Not for me. I use a Wacom (with Illustrator, not PS, but same diff) and flipping around the the pen to erase is really no different from using a regular pencil. Except way faster. Since I can use layers and selective editing and save off versions I feel much more relaxed doodling and exploring this way. It's trivial to save the interesting ideas while obliterating the crap. If I really wanted to start fresh, select all -> delete is quite fast. The big wins for pencil and paper are: ease of transport and accessibly (much simpler to carry around a sketch pad and some pencils); the tactile feedback; the resolution. Much as with using a word processor vs. a typewriter and some Wite-Out there are interesting psychological differences at here, too.
- Falling3 14y ago
  I'm not a designer by any stretch, but for me there is something so gratifying about putting pencil to paper. I've always found it to be the best way to (at least initially) bring ideas out of my head and into the world.
- kidfropro 14y ago
  I've tried sketching in photoshop/illustrator and the paper and pencil method. I get way more iterations per hour done on paper, but that's just personal preference.
- adnrw 14y ago
amix 14y ago
I don't think sketching is only useful for designers. Before I solve complex coding problems I usually have a block where I can scribbled and sketch solutions. This method makes it much easier to brainstorm and think than using something rigid like a text editor (at least for me).
- gosu 14y ago
  I used to draw out little graphs representing data and more exotic structures, but I found that trying to focus on the paper would ruin my train of thought. I try to visualize that stuff in my head now, and it's gotten easier with practice. It's not intentional, but it seems like my method has turned into "stare at a wall for an hour, and then write function prototypes."
msurguy 14y ago
Submitted mine! =) https://twitter.com/BootSnipp/status/267356437364240385/photo/1 https://twitter.com/BootSnipp/status/267356437364240385/phot... And final result - http://bootsnipp.com http://bootsnipp.com !
- RDDavies 14y ago
  Really cool idea! Love the header background-image ;).
ChrisArchitect 14y ago
love seeing intial sketches alongside finished products. I should use my notebook or dot grid book or whatever more often but alot of my designs have their very first iteration on POST-ITS. Could start a tumblr for initial post-it sketches hehe.
hofmannsven 14y ago
Great post and great sketches! Inspired by these, I published some sketches (within wireframes), too! You find them on my page: » http://hofmannsven.com/2012/journal/wireframe-sketches/ http://hofmannsven.com/2012/journal/wireframe-sketches/

92 points by kellysutton 14y ago

flexxaeon 14y ago

I suck at design and I think omitting the sketch step is part of the reason why. Dick Tracy poster is great.

ianstormtaylor 14y ago
Yeah that poster is sick, and the notes he wrote next to his sketches are really interesting to read
camus 14y ago
You may suck at design because you lack some artistic culture , it is has nothing to do with sketching or even the ability to draw. Get a generic art history book , study a ton of design from other designers and you'll be a better designer.
- deleted 14y ago
  [deleted]
- flexxaeon 14y ago
  Your words are true, but not necessarily in my case. I think I've got the culture as I have the natural talent (and ability to draw), studied under and worked with some very talented designers over the years. I've pulled off some successful designs as well. The issue is that my passion to code is greater than my passion to design. Even if I do start at the sketch step, I all but salivate at the chance to get cracking on the CSS. I don't suck because I can't sketch, I suck because I don't sketch. :P Whenever I do sketch my designs come out better.
- camus 14y ago
  well i dont sketch neither , doesnt make my designs bad, As long as one has a clear image of what one needs to make , the way one makes it real doesnt matter, weither it is using hand code css , dreamweaver, whatever...
- jamesbritt 14y ago
  Get a generic art history book , study a ton of design from other designers, make a shit-load of bad stuff but keep on going anyway, and you'll be a better designer. You won't really know what you know until you apply it. You will likely suck at it. Doesn't matter. You'll suck a little less at it next time. "The experienced illustrator subscribes to the principle of the application of the seat of the pants to the seat of the chair. Should inspiration whisk down your chimney, be at your table. The first ten thousand drawings are the hardest. Put another way, you have ten thousand bad drawings within and should expel them as quickly as possible." http://en.wikipedia.org/wiki/Wallace_Tripp http://en.wikipedia.org/wiki/Wallace_Tripp

jon_kuperman 14y ago

These are really cool. I like seeing start and finish pictures from cool projects.

jameshsi 14y ago

I'd love to see more sketches just to see how much detail a designer puts into a sketch on average, and how that varies across different areas of design. It's nice to see barebone sketches like Maykel's and Ian's. Even after reading bill buxton's book on sketching, i still catch myself trying to refine sketches just so they look nice even after an idea is explored. Thanks for compiling these, looking forward to see more!

allang 14y ago
There are a bunch more that we hope to share soon. Glad you like this stuff!
kellysutton 14y ago
One of my favorite parts of watching allang write this post was proof that there is some hope for us developers out there. :)

sgdesign 14y ago

Very nice sketches. But I want to point out that if you don't sketch you shouldn't feel like you're "doing it wrong". Sketching is not a required step. Starting straight in Photoshop (or even in the browser) are both valid methods too.

dave5104 14y ago
It's definitely not required, but it can probably save you some time since it's a bit easier to erase some pencil than it is to start again in Photoshop.
- jamesbritt 14y ago
  since it's a bit easier to erase some pencil than it is to start again in Photoshop. Not for me. I use a Wacom (with Illustrator, not PS, but same diff) and flipping around the the pen to erase is really no different from using a regular pencil. Except way faster. Since I can use layers and selective editing and save off versions I feel much more relaxed doodling and exploring this way. It's trivial to save the interesting ideas while obliterating the crap. If I really wanted to start fresh, select all -> delete is quite fast. The big wins for pencil and paper are: ease of transport and accessibly (much simpler to carry around a sketch pad and some pencils); the tactile feedback; the resolution. Much as with using a word processor vs. a typewriter and some Wite-Out there are interesting psychological differences at here, too.
Falling3 14y ago
I'm not a designer by any stretch, but for me there is something so gratifying about putting pencil to paper. I've always found it to be the best way to (at least initially) bring ideas out of my head and into the world.
kidfropro 14y ago
I've tried sketching in photoshop/illustrator and the paper and pencil method. I get way more iterations per hour done on paper, but that's just personal preference.
adnrw 14y ago

amix 14y ago

I don't think sketching is only useful for designers. Before I solve complex coding problems I usually have a block where I can scribbled and sketch solutions. This method makes it much easier to brainstorm and think than using something rigid like a text editor (at least for me).

gosu 14y ago
I used to draw out little graphs representing data and more exotic structures, but I found that trying to focus on the paper would ruin my train of thought. I try to visualize that stuff in my head now, and it's gotten easier with practice. It's not intentional, but it seems like my method has turned into "stare at a wall for an hour, and then write function prototypes."

msurguy 14y ago

Submitted mine! =) https://twitter.com/BootSnipp/status/267356437364240385/photo/1 https://twitter.com/BootSnipp/status/267356437364240385/phot... And final result - http://bootsnipp.com http://bootsnipp.com !

RDDavies 14y ago
Really cool idea! Love the header background-image ;).

ChrisArchitect 14y ago

love seeing intial sketches alongside finished products. I should use my notebook or dot grid book or whatever more often but alot of my designs have their very first iteration on POST-ITS. Could start a tumblr for initial post-it sketches hehe.

hofmannsven 14y ago

Great post and great sketches! Inspired by these, I published some sketches (within wireframes), too! You find them on my page: » http://hofmannsven.com/2012/journal/wireframe-sketches/ http://hofmannsven.com/2012/journal/wireframe-sketches/