As I have said many times before I look at loads of iWeb sites everyday. I also look at a lot of non-iWeb sites too and, in particular I like to read the blogs of graphic and web designers. As you can imagine there is a huge difference in the standard of sites being produced between the two different user groups, but there are things you can do to your iWeb site to give it a more modern and crisp feel. Subtle changes and little tweaks here and there are all that is required, so here are a few ideas.
In order to help me explain further the points I have listed below all of the screen shots in this post are taken from non-iWeb sites unless otherwise stated.
Since the arrival of ‘Web 2.0’ all those years ago gradients have had their place in web-design. However there is knack to getting them right. We are not talking a multi-color rainbow gradient or even one of 2 difference colors; there is a word to remember: subtlety.
Adding these subtle gradients to your iWeb sites (as with lighting and shadows below) gives your iWeb site depth and prevents it from looking flat and boring; but the changes between color must be minimal. Gradients can be used to draw attention to areas of your iWeb site, for example the logo in the image above.
Creating gradients in iWeb 09 is now really simple and can all be done through ‘Inspector’. The trick is to select your colors carefully.
Strictly speaking this could be included in the gradient category above as you can use them to add lighting to your iWeb site. Lighting also adds depth to a web-page and can be used to highlight areas of importance such as a product or logo.
As a rule lighting sources should come from ‘above’, it’s what our eyes and brains are accustomed to. Adding light to an iWeb page could be as simple as a 1px line above an element, to make it lift from the page. And of course where you have light you also have…
Another area where less is more. Gone are the days where huge dark shadows appeared all over the www. Subtle shadows with only a few pixels offset is the order of the day. The default settings for iWeb are a little harsh, normally 6px offset with a 10px blur. These, along with the color of the shadow can be changed within Inspector.
I mention the color there as having a black shadow doesn’t always look right either. Why not pick a shadow the same color as the background to get something far more realistic. If you don’t want to use the shadow settings in Inspector you can try the reverse of the method applied to add lighting; simply place a 1px thick line just below an element to give it a shadow. There are some lovely subtle shadow elements in the header section of the site below.
These are becoming more and more common in standard web design and are used, again to provide depth to a page. Rather than use the lines to add light or shadow above or below an element on your iWeb page you should use them as physical parts of the page; as dividers. In the image below, you can see how the web designer has inserted a thin line between the nav-bar elements and as an internal border to the header image.
Just like white space can be used effectively to break up a page to make it easier to read, so can a few fine lines. By adding 2 lines together, one dark and one light, you can give the illusion of a groove in your iWeb-page. You can see from the examples below how this effect looks.
Achieving this in iWeb is a piece of cake using the ‘Shapes’ menu, a bit of copy/pasting and Inspector.
So you see, adding a few subtle changes to your iWeb site can give you a more modern, professional look for not much work. Don’t settle for the default settings, they are invariably too harsh. Keep gradient colors similar, shadows small and fine lines just that…fine.
Here is an example of a web-site that has it all. Lighting, gradients fine lines and shadows.
Have you made subtle changes to your iWeb site? Leave a comment and share your work.