

Good Vector-based Web Designs - babul
http://vectortuts.com/articles/inspiration/50-insanely-good-vector-based-web-designs/

======
callahad
I don't get it: They're all rasterized when they make it into a layout. In
what way does the process matter? Why isn't this just "Good Web Designs?"

~~~
alabut
That's a very narrow definition of vector vs raster, the end result looks very
different from a photograph. Vector-based drawings have a certain swoopy hand-
drawn style to them, vs the realism of altering and recombining photorealistic
images.

An example of the opposite style is the giant pencil in the new stopdesign
layout:

<http://stopdesign.com/>

It's obviously sourced from real life, rather than generated from scratch.

------
unalone
Glad to see Acko.net get a call-out: that's been a favorite design of mine for
a while.

~~~
alabut
As pretty as it is, I'm always on the fence about overcooked designs like this
for a blog - blogs always have more html to download than a typical static
page anyway and I just want to get reading. I based my current site design
around minimal reading-friendly sites like:

<http://informationarchitects.jp/>

<http://garrettdimon.com/>

------
diN0bot
how are these done? is the vector part that they're svg rather than gif, or
are the actually created using scripts in the browser?

[edit: i keep checking out sites in the list using firebug. i'm not a ui
person, but i am trying to learn. this looks complicated. is javascript
inserting the images?]

~~~
diN0bot
ok, here's one simple case: <http://www.glazaros.com/>

div backgrounds are jpg's.

same for <http://www.digitaldevotion.de/> and others.

ok, so it turns out very few are hella complicated. i'm really interested in
figuring out <http://www.mirasim.com/> if anyone has some tips.

[edit: nope. mirasim is also background jpg's in divs using css. ok. that was
easy. pick a static layout and stick with it!]

~~~
gabrielroth
Mirasim is just a background image in CSS. You can see the image alone here:
<http://www.mirasim.com/images/page_top.jpg> The Firefox Web Developer plugin
is useful for taking sites apart like this ...

