5 ms·

Good Vector-based Web Designs

16 points by babul 18y ago

unalone 18y ago
Glad to see Acko.net get a call-out: that's been a favorite design of mine for a while.
- alabut 18y ago
  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://informationarchitects.jp/ http://garrettdimon.com/ http://garrettdimon.com/
deleted 18y ago
[deleted]
callahad 18y ago
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 18y ago
  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/ http://stopdesign.com/ It's obviously sourced from real life, rather than generated from scratch.
diN0bot 18y ago
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 18y ago
  ok, here's one simple case: http://www.glazaros.com/ http://www.glazaros.com/ div backgrounds are jpg's. same for http://www.digitaldevotion.de/ 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/ 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 18y ago
    Mirasim is just a background image in CSS. You can see the image alone here: http://www.mirasim.com/images/page_top.jpg http://www.mirasim.com/images/page_top.jpg The Firefox Web Developer plugin is useful for taking sites apart like this ...
- gabrielroth 18y ago
  For the most part they're images created in a program like Adobe Illustrator, then converted to gif or jpg and placed on the site via CSS. In some of them, the images are used as cels in Flash. The web technology aspect is (for the most part) not especially complicated; the point is to draw attention to the use of illustration as a design element. One exception to the above is http://www.volll.com http://www.volll.com, which has some nifty JavaScript animations. Edit: sorry, cross-posted with you.

16 points by babul 18y ago

unalone 18y ago

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

alabut 18y ago
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://informationarchitects.jp/ http://garrettdimon.com/ http://garrettdimon.com/

deleted 18y ago

[deleted]

callahad 18y ago

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 18y ago
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/ http://stopdesign.com/ It's obviously sourced from real life, rather than generated from scratch.

diN0bot 18y ago

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 18y ago
ok, here's one simple case: http://www.glazaros.com/ http://www.glazaros.com/ div backgrounds are jpg's. same for http://www.digitaldevotion.de/ 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/ 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 18y ago
  Mirasim is just a background image in CSS. You can see the image alone here: http://www.mirasim.com/images/page_top.jpg http://www.mirasim.com/images/page_top.jpg The Firefox Web Developer plugin is useful for taking sites apart like this ...
gabrielroth 18y ago
For the most part they're images created in a program like Adobe Illustrator, then converted to gif or jpg and placed on the site via CSS. In some of them, the images are used as cels in Flash. The web technology aspect is (for the most part) not especially complicated; the point is to draw attention to the use of illustration as a design element. One exception to the above is http://www.volll.com http://www.volll.com, which has some nifty JavaScript animations. Edit: sorry, cross-posted with you.