Home Notes Web design

Unconventional design E-mail
Monday, 12 January 2009 18:33

I realize there is a reason why so many websites are based on traditional designs, using grids and columns.  They're easy to read and predictable in their rendering across browsers.

But sometimes you just want to see something different, something out-of-the-box.  That's what I had in mind when I made the homepage to my domain, Pranshuarya.com.  There are some very elegant examples of both traditional and unconventional designs out there, and I just wanted to share a couple I've come across.  (I'm sure these people won't mind me talking about their websites since I only have good things to say about them.)

http://www.safetygoat.co.uk/ - no columns, no grids, but very creative and visually appealing.  I was especially taken by the Last.fm listening list displayed in a vine at the bottom.

http://www.veboolabs.com/ - more traditional but at least there aren't any visible column borders or immediate give-aways that there's a grid behind it all.  It all fits together without any borders or obstrusive lines.

Incidentally, I've also noticed how much web design talent comes in from outside the U.S.  The websites above, for example, are based out of the U.K. and Poland, respectively.  I came across a couple of others out of Spain and Brazil.  It sounds cheesy to say and to hear, but design knows no limits.

All of this is not to say that conventional designs can't be appealing.  Design Logix, for example, has a grid-like layout that renders well across browsers but is also elegant and not unoriginal.

Interface E-mail
Tuesday, 16 December 2008 13:29

Since the interface you design is a picture (containing words), it makes sense to communicate changes you want made to that interface in pictures instead of words.  Clients should keep in mind that the shorter and more effective the communication between them and the designer, the quicker the job will get done right.  For example,

interface example


is a lot quicker to comprehend than: Change hover color for header navigation bar.  Change the recently posted test to red and change it to show 15 latest entries.

Granted, this is a very simplistic example, but the point (and the advantage) is easy to see when you have ten or twenty changes that need to be made to very specific sections of a very complex page.  I made this post to say that it's beneficial to both the client and the designer/developer if the client takes a little time to graphically outline the changes they need, instead of spending much more time trying to explain it in words.

Giving credit E-mail
Wednesday, 19 November 2008 00:38

I believe in giving credit where it's due to the hard work of others, so I wanted to briefly list where I got the elements of this web page's design from:

  • The background splatter pattern came from KeepDesigning.com.  I took one of the patterns on the sheet and modified the colors.  That's it.
  • The template is the default template Joomla! comes with, rhuk_milkyway.  I made some minor modifications, like removing elements and changing some colors.  I'm very impressed with the thorough and hard work the designer of this theme did.  They offered a convenient menu to select different colors for both background and foreground.  Well done.
  • The header graphic is something I put together in Inkscape.
Invaluable tools - design E-mail
Tuesday, 18 November 2008 18:16

These are a few tools I find invaluable for web design:


  • Inkscape - free open-source alternative to Adobe Illustrator.  Though maybe not as powerful, it serves the basic needs I have for vector design.
  • Paint.NET - open-source alternative to Photoshop.  This one is especially not as powerful as Photoshop, but I find it great for resizing images, converting into and out of PNG, JPG, and GIF formats, and making stylistic modifications to images I receive from others.


  • Firebug - this is a great extension for Firefox, especially for CSS debugging.  The "Inspect" mode lets you see just which properties apply to any element.  I only wish it extended to JavaScript effects such as hover, because those are the elements I find most tricky to style.


Here is a list of tools I find invaluable for the development side of things.


Page 3 of 3