Web design is always evolving, but I reckon I can pick out 5 layouts which a lot of sites seem to follow lately. Of course there are many more out there, this is just a subset of what I consider the most popular.

For each trend I will give a brief description and then give what I call the “poster boy” of the trend.

Horizontally Striped (Marketing Layout)

This layout is typified by the website being compartmentalized into horizontal sections. Each segment serves a specific purpose, with the amount of “real” information increasing as you move further down the page, and the amount of “marketing” information decreasing as you move down the page.

First is a relatively thin header which contains the logo and some simplified navigation.

Second is the “marketing” section where things such as cute vector icons/characters go promoting the most attention-grabbing aspect of the product/service on offer.

Third is the “content” heavy section which contains must more detail about the product or service. If the second section has grabbed the user’s attention, it is up to the third section to capitalize on the users intrigue.

Fourth, is usually the footer.

There were heaps and heaps of sties to choose from for this layout trend. In the end I settled with Wishlistr.com.

Bare, White and Pastel

This trend is typified by sites with white backgrounds, straight to the point text and pastel colors for subtle styling.

In my opinion these sites are for “products that speak for themselves”. That is not to say that products with graphic-heavy websites are not good - far from it - but this bare-feel to a website gives me the sense that “hey we are not going to spend oodles of money on employing some whiz bang graphic designer. look at our product.. we know you will like it”. I guess this is kind of similar the approach Google took when designing their website.

Because the site is relatively bare, typography becomes very important. Certain words or phrases are made to stand out even more due to the bare feeling. This is great for marketing, as long as you don’t over do it.

Pastel colors provide a subtle way to highlight certain section of the website to once again stand out above the bare white. Pastel yellows and blues seem to be the most popular colors for this.

Poster-boy for this trend is 37signals:

Busy, Artsy Headers

Next up is the layout trend which I am seeing used for a lot of blogs (particularly blogs of talented graphic designers). They are taking website headers to an all new level with some beautiful artwork to catch the users attention.

One possible problem with this style is that the header overwhelms and distracts the user too much. So best to use styling elements such as swirls, leaves, grass, flowers, sky etc rather than real-life objects like people or furniture.

If you’ve got the talent, use it!

Poster-boy for this trend is one of my favorite blogs, Web Designers Wall:

Distressed, Textured and Intense

Now onto a bit more of a darker theme. Textures are back, bigger than ever. Wood textures in particular are very much in-style now. As is the typical grungy look and feel.

This all adds up to a distressed and intense web design which oozes personality.

One thing to be aware of is that not everyone is a fan of this style. Some may find it too dark, depressing or lets face it, EMO!

Poster-boy for this style is a site I found on one of the CSS galleries - Artworks by Dan Friml:

Grids Galore

When most people think of grids, they think of newspaper websites. And that’s a fair enough thing really since that is the most common place we see the style. Grids are usually for content heavy sites.

Typography plays a huge part, but color and images should also help draw the users attention to certain grid boxes of the website.

Designers have to be careful not to overwhelm the user. There is a definite technique involved with getting the information out there, but still giving the site a feeling of structure.

Poster-boy of this trend is Kineda:

Well there’s five trends. I am not implying the poster-boy sites were the first to have the trend, but in my eyes they typify the trend best.

Are there other sites which you think typify one of the trends better? Or are there any other trends which you think are far more popular than the ones I identified?

Tags: trends, web, web design

I know everyone is sick of hearing about “web 2.0″.

So am I.

But the main reason I am sick of hearing about “web 2.0″ is because the people that say it normally have a limited understanding of what it is. Now, I know there is not a universally accepted definition of the term, so there is no right or wrong answer.

So here’s my take on the term “web 2.0″.

Web 2.0 doesn’t mean having cute vector icons, rss feeds, pastel colors, jquery login boxes, ajax star ratings, blogs or social networking tools.

To me web 2.0 represents an Internet revolution. Back in the late 1990’s, many of us could never have imagined sites becoming so integrated into our lives as they are now.  It is incredible what cool technologies and websites have been setup to keep us all connected to each other.

Web 2.0 means an Internet revolution which is helping us all be connected.

Whether this is just with friends (blogs and social networking sites etc) or work (blogs and project management tools etc) - what we can do today is a huge step forward. The buzz word “web 2.0″ is just a term to identify this phase of internet development.

All the ajax stuff and design trends are just things which have come along for the ride to help increase the popularity and ease-of-use of these websites.

Web 2.0 means blurring the lines between “real-life” and “internet-life”. We now conduct so much of our lives through websites. Once upon a time, to communicate with our friends we used letters, then phones, then email/im’s and now websites such as facebook, myspace or twitter.

Now I think this revolution is a absolutely fantastic thing… but it just makes me wonder what the next phase of the Internet could be?

And do you agree with my loose definition of web 2.0? What does it mean to you?

Tags: web 2.0. web design

I have wanted to buy a macbook for some time now. There was a huge promise of some “bargains” at the online Apple Store for Black Friday. Apparently Black Friday is a big deal over in the USA, but it was the first time the post-Thanksgiving sale was held by the Australian Apple Store.

And… they may have well not bothered.

I don’t want to sound un-gracious (yet I probably will anyway) but some of the savings were a bit disapppointing. Not all products were included in the savings either (Macbook Pro, Macbook Air and Mac Pro).

I could already get an educational discount, and so the saving on a white macbook was a whole $1. Yes.. $1.

But still, I guess you gotta take what you can - why are Apple’s products so damn appealing (and expensive)? It makes life so agonizing.

Oh well, there’s always eBay…

Tags: apple, black friday, buy, macbook

My Internet connection was down for what seemed like ages. In fact it was only a couple of hours, but it really is tragic how edgy I get when it is down.

You start to feel disconnected from the world. What facebook status updates am I missing? My RSS reader unread items are going to pile up into an unmanageable size! Twitter is going to delete my account because I haven’t updated it in a few hours!

I went back and forth between:

• Ringing the ISP support line. Busy signal.
• Used my iPhone to check some forums to see if anyone else was having the same problems
• Refreshing google.com on my PC

Rinse and repeat a few hundred times, getting more and more tense each iteration.

Anyways, all of this got me thinking, what do you do when the Internet is down? Do you go outside and get some (god forbid) fresh air? Cry? Sit in the fetal position and rock back and forth? Run to a internet cafe?

Tags: internet

As you can probably tell, I am female. And I am a geek.

I have been around the I.T. industry long enough to be able to comment on how females are treated in I.T. and Internet communities. Of course, my experience will probably be completely different to many others.

First of all, I am certainly not a feminist at all, so don’t worry I am not on my high horse.

I still get people who are amazed that I play games, program or generally know a lot about the Internet and Internet-related stuff. Have I ever felt that guys felt threatened about me potentially knowing more than them (or holding my own when playing the latest FPS)? Hell no! In fact all the guys I know have actually been encouraging and intrigued by it all.

Having said that, it does get frustrating when I get extra attention just because I am female. I remember a few years ago when I was playing Counter Strike (yes that geeky) I was sick an tired of getting the “omg girl”, “omg the girl killed me with the deagle”  comments during play that I changed my nickname from “****girl” to “****dude” just so that I could play the game without being hassled.

I don’t really post in forums much. But when I do, I reckon about 60% of the time I get the obligatory reply with “a/s/l? ;P” or “oh girl, wanna chat?”. Of course these posts are just the guys having some fun so I don’t care at all, in fact I find them kinda funny. But it still makes you wonder if comments like that will happen forever? Or will there ever be a time when that kind of behavior becomes extinct?

Work-wise, I haven’t found there to be any barriers at all in the 3 different companies I have worked for. If anything, being female in I.T. actually makes it easier as companies love to hire a female to keep the “equal opportunity” levels right. But you still have to be good at what you do, as being female doesn’t get you all that far once you get your foot in the door.

At work I still haven’t encountered any untoward feelings or vibes along the lines of “she’s a woman how would she know anything about XXX”. This might be because I am the type of person who will say up front if I don’t understand or have a good knowledge about a particular area. But still, the extent of acceptance surprises even me particularly because I am female AND “young”. I kind of expected at least a little bit of wariness or second-guessing at some stage.

Of course I am outnumbered (for lack of a better word) as there are far more males in the office, but as a female in I.T. you have to be pretty darn used to that by the time you get a full-time job. I remember back when I was studying Computer Science at Uni, it was about 5 girls out of 100-strong lecture hall. You get used to it and if anything I find it easier to be friends with guys anyway.

I would be interested to know if my experiences align with others. So please leave a comment. And what about the guys? What kind of interaction do you have with females in I.T. or web communities? Are you one of the “omg girl” type people, and if so, do you just do it for fun?

Tags: female, industry

I am always on the lookout for some good icons for web development. The other day I stumbled upon the Dry Icons website, which has an impressive list of free icons. I have used some of these icons on this very blog in fact.

As with most icons, they are free for non-commercial use provided you have a trackback link on the pages using them. Most would probably agree that this is a very small price to pay for such quality iconage. There are commercial licenses available, and we are talking around US$10 so it’s hardly going to break the bank.

Here are some of my favourite sets:

Coquette Icons (50 Icons)

“Coquette” free icon set contains 50 high quality, free icons in these sizes: 16×16px, 32×32px, 48×48px, 64×64px and 128×128px and 32-bit transparency PNG file format.

Coquette Icons Part 2 (50 Icons)

This playful free icon set contains curvy and colorful free icons made with one goal, to get all the affection to your projects. “Coquette” free icon set contains 50 high quality, free icons in these sizes: 16×16px, 32×32px, 48×48px, 64×64px and 128×128px and 32-bit transparency PNG file format.

Aesthetica Version 2 (181 icons)

The improved Aesthetica icon set, “Aesthetica version 2.0″ contains 181 high quality web icons in 32-bit transparency in PNG file format. They come in 16 x 16px; 24 x 24px; 32 x 32px; 48 x 48px; 64×64px and 128 x 128px size.

Classy Icons (300 Icons)

Classy” contains 300 high quality web icons in 32-bit transparency in PNG, ICO and ICNS file formats. They come in 16×16px; 24×24px; 32×32px; 48×48px; 64×64px and 128×128px size.

Socialize Icons (12 Icons)

lthough initially intended to be used by bloggers, these icons go beyond that and can be used in almost any website. This free icon set contains 12 high quality, free icons in these sizes: 16×16px, 32×32px, 48×48px, 64×64px and 128×128px and 32-bit transparency PNG file format.

I am sure everyone could find a use for many of these icons. And there’s plenty more sets available on their website, so go check them out for yourself.

Tags: design, icons

I take a lot of screenshots, both for work and at home. I was previously using Firefox Fireshot to take the screenshots of web pages (which is what I do 90% of the time). That was until I heard about a program called Jing. Oh and in case you are wondering, it’s 100% free!

Now, FireShot worked well enough for me (except for the occasional crash) so I didn’t really know I was even in the market to find a new screenshot taking program - but Jing is one of those programs where you wonder how you survived without it.

First up you will have to download and install it from the Jing Project website (just under 5MB) .They have clients available for both Windows and Mac. It does require the .NET framework 3.0, but the Jing setup program takes care of this all for you.

At the end of the setup process, you get prompted to create a Jing account. Its all very simple, a few form fields and your all done.

Then look to the sky, as you now have a incredibly handy sun at the top of your monitor - this is your gateway into the world of Jing magic.

Jing actually does a lot more than just screenshots. You can take videos of an area of your desktop too (complete with audio). Basically everything you could possibly need to make a professional looking screencast.

For screenshots you can also annotate the image as you would expect:

It also provides many ways to save the image (to your file system, copy to clipboard, to your flickr account, to screencast.com or to your own FTP server). In fact the worst thing about doing this post was that I couldn’t use Jing to get the screen captures!

As you can probably tell, I am hooked. But there are some things I would like to see in the next version of JIng:

• Ability to save an entire browser window, but without having to include the browser tool bar etc (basically I just want the entire webpage). I still have to use FireShot to do this..
• More annotation options. At the moment you have text boxes, highlighting, normal boxes and arrows. They are all customisable in colour, but I would like to see more things like straight lines, squiggly lines, round framing etc.

Give Jing a go - it’s free and I reckon you will be just as impressed as me.
Let me know what you think of it.

Tags: jing, reviews, screenshot, software, tools, utilities