To kick off the new year in Web Design, I thought it would be best to go through a couple of my tell-tale signs that can help you gauge if and when your website’s design sucks. Obviously, “Website design” in this concept does not only include the graphical elements of the page, but of course the Information architecture, usability, accessibility, etc. So without further ado– Let’s get going with round one of “Your website design sucks because…” with Your website design sucks because users can’t find crap!

1. What the heck are you thinking?!

Whether or not you are running a corporate information site or a 15,000 page e-Commerce store- your content should be easy to find! The biggest problem is people think that you ALWAYS need a search box. Search on a website comes in many flavours, and sure; a search box would be awesome- as long as the results are easy to understand and filter to the right place. Having said that, not all great websites have search boxes or website search for that matter – but most if not all of them [great websites, that is] make the user experience worthwhile by making their content easy to find. Here are a few tips:

• If you are running a blog, make sure there is at least a way for the user to find an archive of all your content. After all, one of the main calling-cards, if you like – of a blog, is the fact that it is a chronological listing of posts or entries. Other important elements that help users searching for content is Tags and Categories. Try to make sure your posts only belong to one parent category. I.e. Not “Sydney Web Design” AND “Web Design” — after all, 99% of the time, one of the two (or more) categories makes the most sense. Tags help users by allowing to search for other posts which they might find interesting based on a common interest; i.e. Usability.
• If you are running a website; other than a web log , make sure that there is a common, geographical structure to your pages. I.e. there should always be the same header and footer on all pages – including any side-navigation or side elements. Doing this makes sure that users learn where things are and helps elevate any problems in looking for things all over your website.

2. Some conventional wisdom

Most webmasters and/or designers usually get search from a UI point of view under control. I mean come on! It’s basically three elements– A label “search for:”, a text box, usually pre-filled with “type query here” or something of the sort, and finally a “go/search/find” submit button… Easy, right? Wrong! Whilst the front-end features of site search are seen as simple, most websites/intranets (even the big players) crash and burn on the search results page.

3. A case study in Search Usability: Australia Post

Ahh, good old Australia Post! I love the fact that they deliver to anywhere in the world and the prices are not too bad — and I haven’t had anything major get lost whilst sending out *so far*. However, one thing that drives me insane about Australia Post is their website; http://www.austpost.com.au — not only is this website in need of a “major” overhaul. Let’s start with the essentials of this particular topic; Search.

The search on AustPost is located at: http://search.auspost.com.au. Nothing wrong with that so far- In fact, it’s smart to have search on either a sub-domain or a sub-folder at search.domain.com or domain.com/search. Moving right along. Oh wait! That domain does not work (Under Construction!!) unless you append the following to it: “/cse/auspost/” making the FULL-URI http://search.auspost.com.au/cse/auspost/ – Tsk, tsk AP!

If you type “test” in the search box and click the search button of the main page you get diverted to a search results page; which is okay so far– However, the diverted results page is a TOTALLY DIFFERENT website (in terms of overall look and feel). Check it out for yourself.

Australia Post Search Box - Main Page

All good so far… Let’s see what happens when we get diverted to the ‘actual’ search page.

Australia Post Search Results Page - Search.austpost.com.au

Oops! Something went completely wrong. Did I, as the user kill the site? Or is it meant to be a completely different site followed by a completely different user experience? [Both valid questions you don't need a visitor to your website, especially your search page asking!].

As Homer Simpson would say in a time of crisis; Doh! Different Logo, Different colour scheme, Different tab system, Different IA… Well, at least the logo is generally in the same place as before. Granted, I don’t know the reasoning behind this– Maybe they are in the process of moving sites across to a newer(?) design – but nonetheless, I think being a government corporation, this is pretty bad usability!
Anyway, let’s move right along… As if that first problem wasn’t bad enough, let’s see the search results form. Below is a screenshot of the “general” search form. By general search form I’m referring to the non-advanced variety!

Search Results Box

Wow, okay — where to start, where to start. Let’s rattle off some of the issues with this search box/form.

1. Why have a “Show search options >>” as well as “‘Advanced Search”. That is not only confusing, but a waste of visual space/real estate. Why not make general search easy to use with no extra-ordinary features, and leave advanced search for those people that need to dig deeper into the data mine. Ahhh, I slowly started to realise why, and you will see why soon!
2. See the “Select All” and “Clear All” check boxes? They only select/deselect one option — and that is the “Australia Post Website” check box. WHAT WERE YOU THINKING AUSTPOST DESIGNERS/DEVELOPERS!!! Give me three good reasons why this is necessary on this page (in its current format) and I will stop using Facebook for a month… Okay, a week! Not only is this stupid from a usability/IA point of view, but it’s NOT needed here. Why?, you ask?
   1. When you actually decide to click on “Search” you really DON’T end up having a choice in the matter, because the “Australia Post Website” check box is auto-ticked when the page has reloaded with the search results! Oh Oh!
   2. It’s a waste of a control to begin with! The same thing could be easily achieved with one button which toggles through the selections. I.e. starts off as “Select all options” then changes to “De-select all options” upon click… However…
   3. There is NO need for the control at all since there is NO other option/area to search from. I.e. If there was “Australia Post Website” and “Australia Post PO Box Search”, etc., then it would make sense — however, there is no other option!
3. The “Exact Phrase” check box control is USELESS in all formats of the word! In theory, the “Exact phrase” should let you search for the term “test” instead of the term test. What this ultimately means is that in reality, “Exact Phrase” should only find the search query if it exists EXACTLY in that format, and not part of other words, or as part of a phrase, etc. The only problem with this is that selecting “Exact Phrase” does NOT change the result set; in essence, returning the SAME number of results as well as in the same order! Yay for happy searching — Not!
4. Clicking “Show search options >>” reveals two fields/controls which are apparently meant to help the user whilst searching but not be enough to warrant the name “Advanced Search”. When you click this link, two new fields pop down; a) Format, and b) Modified. Fair enough, you say. They are letting the user choose what type of file format to search; i.e. PDF, Word, etc. as well as the ‘age’ of the document(s) in question or when they were last updated. So what’s the problem here? Let’s take a peek!
   

   Search Results - Modified drop-down

   Wow! That’s probably the best word to describe this drop-down. Sure, Australia Post must feel great giving thier users so many options to choose from, but on what planet would you be from if you need THAT many options in sorting last modified periods? Surely, a) “Anytime”, b) Past 24 hours, c) Past week, d) Past month, and e) Past year – would suffice? No? Granularity of options is something worth your time as an Information architect or Website designer/developer investing in! The more options you give the user that they don’t necessarily need or will never use, the more they have to think. The experience should not make them think! Just give them results, and quick!

5. Don’t even get me started on the “Advanced Search” link! Let’s just say that it’s a little more advanced than what an “advanced search” needs to be. So much so that a PhD in Comp. Science would definitely help! I mean for Pete’s sake, there is a field called “Custom query” which lets you, quote “Create a query using search operators (and, or, not, near, quotes and parenthesis) and system fields.” unquote! WHAT THA?!?! Sure, I may get it, hell you might even get it as a developer or designer, but your average Joe who might need just that little bit more input into his or her search would most likely freak out! Take it off PLEASE! I’m not searching the CIA Central Repository here, people!

3. In conclusion…

Okay, so I must admit at this point in time that I’m getting a little bit more critical and more importantly a touch “harsher” in my blogging and reviews — but I think it’s important to look at problems like these that normal web browsers would AND DO encounter on a day-to-day basis surfing the Interweb! So hopefully you have picked up a few pointers from this blog post that will help you with your upcoming search page design/re-design. Remember, these are above all just some ideas of what not to do, but the field is huge! Make sure you get people with limited Internet experience to trial all software you create (if possible!) but more importantly, keep in mind some of these ideas for next time and I’m sure your users will thank you!

Thanks for comin’ back guys. Please leave your comments or critisisms below – and be sure to Subscribe to the RSS feed so you can keep up-to-date on all the latest goss and posts from C2.0 Web Design Blog. Till next time, Cheb.

We are  going to start this week by tackling the issue web designers (and developers) for that matter always face at some stage in their careers; a loss of creative juices. Sometimes losing your creative juices can’t come at a worst time; i.e. you have an appointment to go through a concept with your boss in 1 hour and you haven’t started! Oh Oh!

So let’s get going and look at a couple of ways which have helped me get my creative juices flowing in the past.

Web design inspiration: Getting your groove back…

1. Look around you for inspiration

Where we live, work, eat, sleep and more has a lot to offer in terms of inspiration. Whether it be the retro ‘Astro Boy’ poster on your wall or pattern-infused bed sheets – look around you and you will find something that will get your visual and creative juices flowing. Next time you are on a trip in the car or on a bus/train, look around you. Signage, foliage, Zebra-stripes and more can help.

2. Check out web design galleries

Web design galleries have been shown to offer tons of inspiration. Galleries like: CSS Remix, CSS Mania, CSS Drive, CSS Elite, CSS Beauty, CSS Vault, CSS Import, Screenfluent, Screenalicio.us, We Love WP, Design Snack, Web Creme, Best Web Gallery and more showcase some exceptional design work which will definitely give you a bit of an edge when designing your own websites.

3. Visit your local record store

You may think this is a bit left-field, but there have been numerous times when I have rummaged through a record store for inspiration. Record stores hold a lot of design inspiration in the form of CD/DVD album art. I have found that many alternative/rock bands have cool album art – generally not a physical representation of the band, but a graphical or uber-cool concept art. Here are some examples of cool album art that can offer plenty of design inspiration.

We shot the moon album art

Joint effort album art

James Blunt - All the lost souls album art

Dashboard Confessional - The shade of poison trees album art

4. Visit an art gallery or museum

Art galleries are a great place to find inspiration. Whether it be a painting, or a statue of a 15th-century water creature – but above all, the buildings themselves! – as they say, don’t knock it till you’ve tried it!

Denver Art Museum

5. Buy some books

Books are always great for inspiration – even non design-based books! Anything from the spine of the book to the front or back cover can provide inspiration – however, actual books based on designs are great too.

Some of the best books I’ve read/found to help with inspiration include:

6. Check out other designer’s work

This is an important one… There is nothing like looking at your peers’ designs for inspiration. Start with sites like Deviant Art and  Threadless – both design communities which are constantly updated with heaps, and I mean heaps of design and other forms of inspiration.

7. Take some photographs of interesting objects and textures

Next time you’re out on a walk or driving around with mates, keep a camera handy. It doesn’t have to be a $900 SLR or anything like that – just anything which is capable of taking, ahh, photos! This is an important step in getting your groove back because you just never know what you come across that offers some sort/form of inspiration. It could be as simple as graffiti which gets those juices flowing, or maybe the sun setting above green pastures. Seriously – what do you have to lose? Try it!

8. Walk around a thrifty or antique store

You know those beaten-down stores that you might have to travel 20km or miles to get to? Yup, those stores that only seem to invite in old(er), men or women – or in certain cases, maybe your mum (or dad, for that matter) seeking that something special. Perhaps a dog-eared special edition of a novel which you cannot find anywhere else, or maybe that Tibetan-inspired lamp. Rummage through these stores for ideas – you will never know how much visual ‘gold’ they store until you walk into one.

As they say, one person’s  trash, is another man’s treasure. If you don’t want to buy something, at least take a notepad and a pencil, or perhaps a camera and take happy snaps… As long as the shop owner doesn’t mind, that is!

9. Plan out your designs by creating wireframes and prototypes

I feel that when I have a mental blank and can’t come up with any design goodness, i mockup a few ideas around grid-based designs. Axure or Microsoft Visio are great tools to do this on.

Just remember, designs don’t always start out in Photoshop (or whatever you use!). Great designs have a back-story; a skelaton, per say. Start by laying down the basic foundations – i.e. logotype on the top left, search/login on the top right, navigation, sub-navigation, content area and footer – and you will find you are half way there. Simple ideas such as effects on hovers, etc. will guide your design juices into the right direction. Combine that with some imagery and a bit of flair, and you’re suddenly the main actor in ‘How Stella Got Her Groove Back II’.

10. Check out other types of media for inspiration

Turn on the TV, check out the local newspaper – heck, even listen to the radio. You will most likely see or hear something that will get you off the beaten track. I find magazines and newspapers have plenty of inspiration. Something as simple as a telephone advert in a newspaper can give you ideas about your next gig. It’s that simple. I know it sounds like something every designer shoud know – but apparently some designers believe that the only medium they can seek an oracle on is the ‘net. Reality check, anyone?

So there you go guys – another one bites the dust. I will hopefully have a bit more time on my hands to draft up some more inspiration but for now sign up to the RSS Feed for more news and articles. Till next time, C.

As most of you would probably remember, around mid-May of this year, Cheb 2.0 blogged about the upcoming design and functional changes to Facebook! – Well, I am pleased to report that we are getting very close! With just over a few days to go, and Facebook slowly begining to phase in the new changes, we now have a clearer picture of excactly what we are in for.

Let’s get cracking and check out the upcoming changes to the ‘book.

New Facebook Profile Page

The new Facebook Profile page is pretty wicked, if I do say so myself! Not only is the design still minimal, yet intriguing – but it is very functional and still has that touch of Facebook-y goodness to it which have kept Facebook in the same group as Apple and other leading sites which take a heavy focus on web design!

Check out our screenshot of the new profile page.

Facebook Profile Page

As you can see if you click on the screenshot to the left, there are quit a bit of functional differences between the current, or old(er) style profile page and the updated, shinier profile page.

Some of the most prominent changes include:

1. Complete re-design of web page as well as header and footer.

2. Tab-based system to access profile content such as Wall, Info, Photos and Boxes (which essentially are all the applications that are not displayed on the front page), and a “+” button so you can add a new tab from your applications (shown below).

Facebook info tab showing 'Add a new tab'

3. A bunch more interactivity with Facebook now allowing you to make a lot more changes ‘off’ your current page as opposed to going into your profile’s ‘Edit’ screen to do so. This includes such things as allowing you to edit ‘About me’ information, as well as ‘Networks’ off the profile page.

4. Status messages have now been given the space they deserved from the start, as well as the ability to ‘Add Photos’, ‘Add Video’, ‘Share Link’, ‘Write’ and more (again, based on applications installed) – See below for an animated GIF.

Facebook header preview (animated)

Facebook’s new friends page

The Friends page has been redesigned and re-formatted as well. The coolest gadget to be found on this page is the new ‘Friend Lists’ feature. Facebook says that you can now “easily organize your friends into convenient lists for messaging, invites, and more. You can create whatever kinds of lists you want; all lists are private”. It’s a pretty neat little feature that will make it a lot easier for you to manage a ‘distribution list’ of some sorts which will make your life easier on the long run if you message lots of your friends, for example. I can see this developing into a ‘Friends’, ‘Work Mates’, and ‘Annoying People’ type list! Here’s one I just created called “Test”.

Facebook's new friends list

Facebook’s new homepage

Facebook’s new homepage (when a member logs in) is very much similar to the original, current design – however it is a lot more cleaner and functional in terms of physical separation of related content and sections. There is now a main right-side navigation which contains all the usual stuff like ‘Who poked you’, or ‘Upcoming Birthdays’, as well as any requests or user updates as well as status updates in general that flow through.

The main content area is simply a listing page showcasing in a Facebook v1.0 style gallery of upcoming uploaded photos and videos, as well as the usual array of friendly updates.

Overall, there are quite a few more cool additions such as Facebook now allowing you to decide how ‘The Wall’ is organised. In essence, you can decide if each new update/addition, such as you uploading four photos, are shown on one line, short, or full views classed as “Story Options”.

Click on the screenshot below for a bigger view.

Facebook's new homepage

So there you have it guys – in again with another exclusive review of the new changes to the new Facebook redesign. Hope you’ve enjoyed this post. I’m sure you’re going to love the changes that are in store for you as soon as the new profiles begin to roll-out sometime this week or next.

Till next time, subscribe to the RSS feed for updates on new posts. For an up close look yourself, login to the preview page here.

I’m back and it’s time to blog again. Today we are going to kick things off by talking about Project Management; What is it, methodologies involved and breaking down the life cycle. In this, part 1, we will be dissecting the first two phases: Project Initiation and Project Planning. Hang around for part 2, which will finalise the phases with Project execution and control, and Project closure.

So without further ado, let’s kick things off.

What is Project Management?

Put simply, project management is the discipline of planning, leading, monitoring and organizing a team and resources in order to effectively bring about the successful completion of a project based on predefined budget, time, quality, scope and resources allocated.

What is the project management life cycle?

That’s a question I get asked quite a lot when consulting with firms on project management and procedural process management alike. In theory, the project management life cycle is dependant on the industry, the methodology used by the manager and other factors – however, there are generally four stages of the project management life cycle. These include Project Initiation, Project Planning, Project execution and control, and Project closure. Let’s take a look at the first two:

1. Project Initiation

In kicking off a project,  the scope of the project is considered very important. Depending on the scenario and the work environment, a project manager is usually chosen with a number of pre-selected team members whose skills the company believes will meet the objectives required to be completed for the project to be successful. However, there are times when the project manager also has the oppurtunity to select his/her team, or just has to settle with who ever is free to be resourced at that time; (generally what happens in the Sydney Web Design and general web design industry).

It is at this stage of the game that the tools required or methodologies which are to be followed (for example PRINCE 2) are selected.

Some documents you should expect as a project manager to complete or work on include:

• Project Charter/Definition
  • This will be a document containing a statement of the scope (the total work needed to complete a project), the projects’ objectives and a listing of team members involved in the project.
• Business Plan
  • A plan of the business goals and how they are going to be acheived – whether short term or long term. I.e. drop legacy systems, etc.

2. Project Planning

The second phase of project management, the planning phase is one of the most important phases. Planning a project correctly can truly mean the difference between failure and success!

Project management planning IDE’s and applications such as Microsoft Project will help you to lay out your project in WBS format. WBS stands for Work Breakdown Structure; an important, principal project management tool which help you to structure a project in a way to define groups of work to be done.

For example, generally speaking a project working off the general SDLC (Software development life cycle) would probably be laid out in the following tree-line structure:

1. Planning
2. Analysis & Information Architecture
3. Design
4. Implementation/development
5. Support/Quality Assurance/Launch

What WBS allows you to control is everything from the subordinate costs for each task as well as materials needed and resources to allocate the work to. In essence, what you see above will obviously then be broken down into smaller, objective-based tasks; hence the ‘breakdown’.

if you are interesed in getting more acquainted the Work Breakdown Structure, head over to another article discussing the Critical Path Method of Project Management.

So there you go guys! Keep clicking around for part 2 which will talk more about project planning and the last two phases of the project management life cycle – as well as more exciting blogging coming up soon!

Don’t forget to Subscribe to our RSS feed for more content as soon as it gets posted!

Thanks for reading, C2.0

Decked out on three elaborate levels containing ‘everything-Apple’, it was a geek’s ultimate night out in the Sydney CBD! The atmosphere was spectacular to say the least: bright lights, free Internet and of course the now-famous, Applesque glass-staircase.

Apple's legendary staircase

What never ceases to amaze me is the amount of detail and attention Apple places on it’s products – the humble iPod, iPhone, Macbook Pro, Macbook Air, and obviously the ‘hot’ Cinema Displays. However, the crowning achievement of the night was definitely the amazing architecture, design and ambiance of the store itself!

I was lost for words when even the walls themselves were adorned with a shiny, ‘Macbook Pro-like’ feel to them. Yep, no white paint here at all. Everything was where it was supposed to be – any doors were recessed as to not look ‘out of place’ and even the lifts screamed Apple! It was definitely an awe-inspiring moment or two.

A monumental apple hung from the ceiling of the interior leaving passers-by with no need to guess what stood before their eyes.

For those who have not yet been or cannot make it – here is the run-down of what you can find on the three levels.

Apple Store Sydney Level One (Ground Floor)

This floor is filled with every Apple computer you can find under the sun! From Mac Mini to iMac, Macbook, Macbook Pro, Macbook Air, Mac Pro and Mac Cinema Displays [Phew, that was a mouthful!] as well as housing some software.

Apple Store Sydney Level Two

This floor is filled with everything iPod and home-entertainment. From Apple TV to every current generation iPod; including the iPod Shuffle, iPod Nano, Classic iPod and of course the iPod Touch. You can also find the Apple Hi-Fi on this floor and a range of other iPod Hi-Fi systems from Bose, Belkin, Sony and more. This is the level that also houses pretty much all software and even hardware you can buy for your Macs, ranging from ‘The Sims II’ game to the Mac Air’s Superdrive and laptop bags.

Apple Store Sydney Level Three

This floor holds more computers and cinema screens as well as the renowned Genius Bar, which has finally made its way to Sydney! Here you can get help with almost anything-Mac from Mac experts, as well as ask questions ranging from how much money the ‘Genius’ thinks Steve Jobs raked up last financial year, to ‘What is automation in Mac OS X?’ Also on this floor free one-on-one training sessions are run ranging from ‘How to use your new Mac’ to an ‘Introduction to iLife’.

If nothing else, the view from this floor alone of down-town George Street is crazy!

Overall, I found the new Apple Store, Sydney – which as a little tid-bit is the second biggest Apple Store world-wide; to be a man-made design marvel. Not only was it pretty on the outside, but the interior design is strictly Apple in all senses of the word! I mean even the tables were gorgeous – and believe me when I say that office furniture generally doesn’t do anything for me!

You’d have to be gobsmacked not to feel a sense of achievement that Apple would have felt upon completion of this masterpiece in all its forms; inside and out.

If sales from the first three days of operation are anything to go by (let’s just say they can close down for another year and still be profitable!), then this store is really going to be crowning achievement of Apple’s time in Australia.

Looking forward to seeing how the next one to open in Chatswood is going to look, but for now – Geeks beware! There’s a new place to hang out!

Check it out for yourself:

Store hours:

Mon – Wed, Fri, Sat: 8:00 a.m. to 8:00 p.m.
Thu: 8:00 a.m. to 9:00 p.m.
Sun: 10:00 a.m. to 6:00 p.m.

Genius Bar:

Mon – Wed, Fri, Sat:

7:00 a.m. – 9:00pm

Thu:

7:00 a.m. – 10:00 p.m.

Sun:

9:00 a.m. – 7:00 p.m.

Till next time!

Grab the RSS Feed today!

I needed a new computer for work and as you might already know I am a sucker for Mac – so what did I do? Go out and get a Macbook Air, of course!

Overview

Coming from a 24″ iMac and I guess to a certain extent, a ’smaller’ 15″ Macbook Pro, I was hesitant that I would have a hard time getting used to the 13.3″ – albeit, wide-screen display. Boy was I wrong!

The 13.3″ screen is so much brighter than I am used to – that it even looks brighter than the iMac’s screen – which is bright!

I was worried that the specs on the mobile notebook would not be enough for what I needed – something powerful enough to handle PSD’s and other design documents (and obviously run those applications!). What I found out is that even at 1.6Ghz Core 2 Duo, this little notebook is a small beast.

Day-to-day running

Sure, applications take just a little longer to load and when saving big Photoshop files, you might have to wait an extra few seconds – but all that is relatively minor nuisance when considering whilst the application is running there really is no major difference between this notebook and the higher-end Macbook Pro’s; showing that the 2Gb RAM actually does help a lot and you could say, makes up for the somewhat-slower CPU.

I won’t be running games on this lil’ thing anytime soon – but if that’s the reason you are getting this notebook then you are going to be sadly let down. With shared graphics, the furthest I want to take this masterpiece of design is Flash production.

Battery life

Battery life on this machine is very, very good! I’ve come from a few issues with past batteries; especially as an early-adopter of the 15″ Pro. I find that on a full charge with full brightness and functionality as standard I can get at least 3.5 hours in. Drop down the brightness and change Energy Saver Optimization to ‘Better Battery Life’ and you might just found out that the Apple-claimed 5 hours is not just a marketing ploy!

Design

Being a web design blog I figured that this would be a huge part of this review. I’m not going to lie and not say that one of the main reasons I got this notebook (as apposed to other similarly-specced notebooks on the market) was the form-factor and design. It just simply amazes me and others how small this little thing is! Sure, you miss out on the benefits of a CD/DVD drive (you can still use another computers’ drive through Remote Connection!), and you might have the iPod’s 80Gb hard-drive entailed, but boy does it look HOT HOT HOT!

The keyboard, is definitely THE best keyboard I have EVER typed on! Not only is it evenly-spaced, and full-sized, but it is back-lit, just like its predecessors – which makes it awesome to type on at night!

The trackpad is SUPERB to say the least. It is huge compared to every other laptop I have seen, whether 13.3″ or 17″ in size. The new gestures you can make now, coming off the iPhone/iPod Touch platforms are not only a time-saver, but cool!

For example, you can scroll down a page if you run two fingers simultaneously in a downwards direction; or if you wanted to get a little more geeky, run three fingers side-by-side from the right to the left of the trackpad and quicker than you can say ‘Bob’s your uncle’ it has taken you back a page in your browser or while using Coverflow to look at your doc.

So to wrap this up here is my top pros and cons of this marvelous piece of technology.

Macbook Air Review Wrap

Pros

• Incredibly thin and light and yet sturdy
• Very bright, LED, back-lit 13.3″ screen
• Amazing keyboard and trackpad
• You can remote connect to another computer/notebook to use their CD drive
• Good battery life
• Mini DVI
• Wow factor

Cons

• Relatively low on connectivity options (compared to Macbook’s and Macbook Pro’s)
• No Ethernet (RJ45) , only one USB 2.0 port so get yourself a USB hub if you’re buying one!
• Slower than other Macbooks

There you go guys, hope you liked the review. I will upload more photos as soon as I have some time. Thanks for reading! Make sure you subscribe to the RSS feed.

Edit: This article is linked to an article which has recently been posted. Read more about “Facebook redesign: The countdown begins“.

From somewhat of a smallish leak to a full-on development cycle to get it going; Facebook is currently in the process of redesigning the Facebook social network. Whilst it isn’t a full-on re-brand, per say – there will be elements such as the start page, the profile page and feed pages which will change!

Why is Facebook redesigning the site?

Whilst they aren’t necessarily redesigning the entire site; Facebook is changing important sections such as the ‘Profile’ in an attempt to clean up the clutter which is being produced by over 25,000 applications ranging from ‘blood sucking vampires’ to ‘am I hot or not’. We all know how annoying some applications can sometimes be, and in particularly how cluttered up they make our profile look.

Since its creation, Facebook has been a shining ‘beacon’ of “What to do” on a major portal/social network. They got the usability right, the site was easy to use and it even looked simple and clean – the direct opposite of Facebook’s biggest competitor; MySpace. So what happens when developers are allowed to build applications which get in the way of such as mantra of excellent web design? You re-design, of course!

Let’s take a look at some of the proposed changes and what you could stand to lose/gain from them. As always, you can click on the images for a larger-sized view.

The Feed and Wall Tabs

To start off with, as you can see, the proposed change to the main profile page (i.e. when you click on ‘Profile’) is to clear up all that clutter left by all your applications flowing down the left-side gutter of the page as well as in the content area as well.

If Facebook has their way, you will expect to see that sort of change on this page.

The changes to this page include:

1. The status message, e.g. “Cheb is now partying”, or in this case “Holly is at school” is shown directly under the profile photo and not directly under the name, as currently is.
2. There is now somewhat of a secondary menu/navigation which is tab-structured allowing you to jump to different ‘views’ of your/or someone else’s profile.
3. The new view allows you to directly post information such as a link or photo off the sub-section in the secondary nav.
4. The ‘Feed’ view, i.e. the current page – above, will combine both the current feed page as well as the wall. What that means is there is no current way to filter either or – and it also means that the normal view, or the ‘Feed’ view will show both; other people leaving wall posts for you and your updates at the same time.

Secondly, the view to the left shows what would happen when someone clicks on the ‘Wall’ tab.

As you can see, no major changes there except that you will be able to remove the ‘Wall’ tab at anytime but the ‘Feed’ tab has to stay put! This makes sense, considering the Feed tab will show both types of inputs – whilst, for good usability, having another tab for just that type of content, i.e. ‘Wall’ is a great idea and kudos to Facebook for setting it up that way.

The new publishing system

The publishing system will be the centralized spot to add a wall post, post a video or photo, as well as post a link to your feed/profile.

I believe that as a user adds new applications which present more ways to post content, such as ’send a gift’ or anything of the sort, they should be added to the tabs which currently stand at ‘Wall Post’, ‘Video’ and ‘Post a Link’.

Overall, I think this is a great way to combine content into categorically-linked sections. I am not a huge fan of combining the wall posts with the feed, but the structure and navigation for getting to places as well as ‘publishing’ content is possibly second to none! Let’s just say that we can’t even begin to compare it to MySpace!

The applications view

Ahh, where would we be without our much-loved applications? Well, with a wall and notes, I guess! Anyway, the cool news is that there is no way applications are being eradicated or anything – quite the contrary! They will be given their own tab, or view if Facebook has any say in it! Let’s check out the proposed changes:

Hrrmmm! There’s quite a bit to contemplate on this view. Whilst being a working title, I don’t know what Facebook is thinking calling this page ‘Boxes’! I think it was some insider joke or something of the sort, because the first application in the main content area is ‘Family Tree’ with quite a bit of boxes! [Or was it a publicity stunt?!?] *conspiracy conspiracy*

I quite like the idea of zoning out the applications into their own section – after all, it really is those applications that started to clutter things everywhere on Facebook.

The name ‘Boxes’ has to go! No two buts about it. However, what would be cool is if Facebook allowed users to call this what they liked; for example, ‘My Appz’ or ‘My Stuff’ – however, you could see why this would be a problem when people start calling it ‘Fo Shizzle’ or ‘Crack Pipe’ – which absolutely make no sense whatsoever! [Yes, I can be weird at times!]

I think Facebook will eventually just call this ‘Applications’ or ‘My Applications’ – leaning towards the former.

Conclusion

So there you go guys – another design review/did you know style of post! Hope you liked the review and more importantly enjoyed seeing the changes that Facebook should be implementing very soon.

To have your say on the matter, feel free to send an email to profilespreview@facebook.com with the subject heading: ‘Feedback on the new Profile’ or join the group.

Drop us a comment and let the community know what you think; share this post with a friend and make sure to subscribe to the RSS feed if you haven’t yet for further updates.

Another Photoshop tutorial because you guys asked for it! This time we are going to take a look at how to create realistic-looking smoke. Whether you use it to add that eery effect to a night-time scene, or to jazz up that photo that just looks too cool – you will find a dozen or so uses of this effect.

So let’s do it shall we…

1. As always, for the purposes of this demo, let’s go ahead and create a new document with canvas size 460×600 and black; #000000 as the background.

2. Create a new layer called “Smoke”. As always, you can achieve this in the Layer menu; ‘Layer > New > Layer’, or Shift+Control+N (Shift+Command+N on a Mac).

3. We are going to select a ‘Hard Round’ brush at about 20 pixels (which you can also select by right-clicking on the canvas with the brush selected and changing the settings. Make sure the brush is set at 100% opacity and obviously 100% hardness. Select white for the foreground colour; or #FFFFFF. Once we have these settings set-up we can roll ahead to step four!

4. Okay, as you can see in the image below, we are just going to create some ‘beanstalk’ style swirls or better yet; back to front question marks without the colon – on the canvas! Make sure to start from the left to the right. We are going to be reducing the size of the brush as we move from left to right; and the easiest way to explain this is to probably show you how it should look over a couple of screens. So here we go!

5. Okay, now that you have created the above brush patterns at different sizes, let’s create the magic. Let’s go to ‘Filter > Blur > Gaussian Blur’ at 7 pixels radius. Here’s the screeny.

If you got it right it should be looking like this so far:

6. You might not have used the ‘Maximum’ and ‘Minimum’ effects before. These two effects, which can be found under ‘Filter > Other’, are useful for modifying masks.

The Maximum filter basically applies a choke to the layer; basically spreading out white areas and choking in black areas. Whereas, the Minimum filter has the effect of applying the direct opposite; a spread. It achieves this by spreading out black areas and consequently  shrinking white areas.

The great thing about the Maximum and Minimum filters is both effects look at individual pixels in a selection. As mentioned in Adobe’s documentation, ‘within a specified radius, the Maximum and Minimum filters replace the current pixel’s brightness value with the highest or lowest brightness value of the surrounding pixels.’ 

That’s just what we need for this effect! We want to basically ‘blend’ the pixel brightness values by going over the layer with a ‘Maximum’ pass – so let’s go ahead and do just that.

Head over to the ‘Filter > Other > Maximum’ filter and select a radius of 4 pixels. Notice how the higher up you go in radius, the less-realistic it starts to look.

7. Okay, if you managed to get that section okay, your canvas should start looking like this:

8. Alright, let’s add  a few more effects. Let’s go to ‘Filter > Distort > Spherize’ and select ‘-100%’, select okay, and then go to ‘Filter > Distort > Twirl’ and select a setting of ‘-75%’. Your canvas should now be looking like this:

9. Alright, we are almost there! Let’s setup a Surface Blur by going to ‘Filter > Blur > Surface Blur’ with the following settings:

10. Okay! We are pretty much done! Let’s find an interesting image to use as a backdrop. Through the magic of Stock Xchange, here’s one CraigPJ created earlier. [http://www.sxc.hu/photo/788512] 

Insert this image, or any other as a separate layer but make sure it is underneath the ’smoke’ layer we have been working on.

There you go! Cool hah? Feel free to play around with the Smoke effect to get it looking a little better. Try duplicating the ’smoke’ layer and playing with the opacity of that layer, or moving it around the canvas.

You can use the ‘Warp Tool’ to make the smoke move in a certain direction. Maybe something like this? [Click to maximise]

So here’s just one of the ways this effect can go in terms of Levels and Curves.

So there you go guys! Enjoy playing with this effect. There are many ways to create smoke in Photoshop, but this method usually gets you good results. Not only that, it gives you ample oppurtunity to experiment with not only the settings, but the post-production after the effect has been setup.

So once again, thank you for following – let us know what you think by posting a comment if you liked it or it helped you and share, share, share. Don’t forget to subscribe to our RSS feed for updates on future content (It’s free and easy!).

Till next time, Cheb 2.0.

Thank you all for the lovely comments and feedback I have been receiving! I thought I’d take a bit of a change from the normal tutorials and/or reference articles for one post and go through just some online (as well as offline) advertising I really like.
I hope that these ads will inspire you to create great designs or inspire you to think a little bit outside the box; because that is what makes them impressive to me. Not only that – but great web designers achieve design inspiration from the world around them, and more importantly, other great design; whether it’s a web page or billboard.

Online advertising as well as other forms are great for igniting that creative spark you may need to get you through those rough times!

Feel free to drop me a comment and let me know what you think of them or head over to Ads of the World for more.

Bandaid – Sweat Proof

Cheb’s thoughts: Awesome concept and art direction.

What is the ad trying to portray? That Bandaid’s are so sweat-proof that they are being used for a undercover bust!

Rating: 5/5

Bic Shaver

Cheb’s thoughts: This ad might not make sense to everyone, but regardless, still a memorable one! Great marketing ploy to connect two product segments.

What is the ad trying to portray? Bic make shavers, but they also make those notable Bic pens. Appearing as a ‘running gag’ over multiple pages, the man has suddenly looks ‘well shaven’!

Rating: 3.5/5 (Not everyone will get the ‘Bic also makes pens’ bit!)

Brisbane Council – Boy Meets Girl & Short Story

Cheb’s thoughts: The first one is a ‘Romeo and Juliet’ classic, followed by a ‘Lord of the Rings’ style ad. Great direction and Photoshop work but the idea is heavily overdone.

What is the ad trying to portray? If you worked for Brisbane Council you would actually have time to read the books/novels rather than having to hear the ‘two second’ intro, plot and conclusion in one.

Rating: 4/5

Comedy Central – The chair

Cheb’s thoughts: Another running gag, this one is a crowd-pleaser. Smart, easy on the eyes, and effective – it sells the Comedy Channel!

What is the ad trying to portray? This one is a funny one. The first page shows two pins on a chair; classic school-boy trick on a teacher! A few pages later, it get’s funnier, with the pins now spot-on where it is going to really hurt the person who is going to sit on the chair! – Hilarious to think about.

Basically, it is saying that there is funny, then there is funny! – I.e. Comedy Central funny!

Rating: 5/5

Ford Expedition – Rearview camera Kitten and Tricycle

Cheb’s thoughts: Another set from Ford. Great direction and even better retouching. I like!

What is the ad trying to portray? The rear view camera on the Ford Expedition is so good that small things like a cat or kitten, and a child on a tricycle are now huge comparatively.

Rating: 4.5/5 (Some people may think this is a little misleading!) [Note: I stress "some"]

Gardena – Quite Mower

Cheb’s thoughts: Cool, simple post-production work. Good use of white space.

What is the ad trying to portray? Gardena lawn mowers are so quiet that not only are they mowing the lawn, but they are also silencing the ‘lawn’ or the sound frequency, from higher to silent in the areas that are freshly cut!

Rating: 4/5

Nestle Kit-Kat – Have a break…

Cheb’s thoughts: Another great use of white space as well as needing to use nothing more visually than the product’s logotype/tag line and the product itself.

What is the ad trying to portray? Simple! a pair of Kit-Kat’s setup in the ‘Pause’ position, as you would normally see on a audio player, etc. It is simply saying pause your life, take a break, and have a Kit-Kat!

Rating: 5/5

Olympus Zoom – Koala (Australia)

Cheb’s thoughts: Great post-production and Photoshop work.

What is the ad trying to portray? Olympus binoculars and more importantly their zoom-factor is so good, that the object you are viewing; in this case a Koala will appear ‘right before your eyes’, or again, in this case, ON the binoculars! In this actual ad, it appears as though the Koala has been catapulted into tourist’s face!

Rating: 5/5

Pain without borders – Cambodia

Cheb’s thoughts: Great 3D rendering, animation, and post-production work

What is the ad trying to portray? Pain in Cambodia is a continuous cycle. There seems to always be grief and suffering and it is shown clearly by the revolving belt.

Rating: 5/5

Pedestrian Council of Australia – Don’t Speed

Cheb’s thoughts: Great concept, direction and implementation.

What is the ad trying to portray? Another simple one. The crossing itself has become the jail cell for the ‘purpotretor’ – who we can only imagine has ran over someone whilst speeding and as a result of his actions has been sentenced. This obviously is more of a concept rather than a real case – but is a reality of what is possible if you speed.

Great use of ambiance and everyday scenarios.

Rating: 5/5

Rolling Stone – Steve

Cheb’s thoughts: Cool idea. Simple, but unfortunately places a little too much emphasis on the object and not as much on the product itself.

What is the ad trying to portray? The masked-man in this ad, Steve, can now benefit from Rolling Stone’s guide to restaurants, cinemas, books, etc and does not have to waste time downloading at work’s expense!

Rating: 3.5/5

Surf -White Nurse

Cheb’s thoughts: Excellent direction! Love the nurse’s facial expression and the doctor’s looking so ‘deep in thought’ only adds realism.

What is the ad trying to portray? Surf leaves your whites looking so white that you can be used as a X-Ray light screen and save your hospital electricity bills! ;p

Rating: 5/5

Vegemite – Cricket car

Cheb’s thoughts: Finally, another nice ambient shot with great post-production and Photoshop effects to boot.

What is the ad trying to portray? Vegemite, an Australian icon, is known to have vitamins which support growth and strength. Obviously the ad is targeted for an Australian audience, and lovers of Cricket.

The ad is trying to say that the Australian side must have had thier Vegemite before the game, because they have so much strength that the shot flew out of the stadium; shown in the background!

Rating: 4.5/5

So there you go guys, another design inspiration post! Feel free to share this post with a friend and subscribe to our RSS feed for further posts.

Till next time, Cheb.

I’ve been playing with glow effects lately for an upcoming website redesign, and I’ve been noticing quite a bit of work being done with Photoshop’s pen tool and cool lighting effects, so I figured I’d share some introduction to the pen tool itself as well as a glow/lighting technique which can be used in many, many ways with you guys. Sit back, relax, and enjoy another Photoshop tutorial.

Just as a sneak peak, this is what we are going to be creating…

Okay, Let’s start from the top!

If you’ve never used the pen tool in Photoshop before, you are definitely missing out. The pen tool is great for working with vectors as well as creative bezier curves.

Considering the pen tool in itself is usually classed as a intermediate/advanced tool in Photoshop, we will just touch up on the basics so you can get going with this tutorial.

The Pen Tool

The Pen tool has the following five options:

1. The Pen tool is mostly likely going to be the main tool you use. The ‘Pen Tool’ allows you to create straight lines and curves that make up most your paths.
2. The Freeform Pen tool is designed to let you create paths quickly by just drawing freehand with the mouse. The main downside is that it’s hard to create accurate paths and especially curves due to the nature of drawing with a mouse.
3. The Add Anchor Point Tool allows you to insert additional anchor points into your path, basically splitting a line segment into two. This helps you when you have already started a curve but you want to convert this into a more complex shape.
4. The Delete Anchor Point Tool removes anchor points from your path. What happens as you remove an anchor point is that the anchors on either side of the removed anchor join up to form one longer line segment, as if you have just snapped them into a single line. This tool helps you when you have too many anchor points on your path.
5. The Convert Point Tool allows you to convert a smooth anchor point to a corner anchor point, and convert a corner anchor point into a smooth one.

Even though that was a gentle introduction to the pen tool; today, we will mainly work with the Pen tool itself – so create a new document, 460×460 and let’s go! Try to create the following easy curves and lines by following the simple steps.

If you can get these down-pat, it’ll make the next part easy as anything! NB: I have created a little compass to help you with the angles of the curves. :0) Good luck!

If you have made it this far, I’m assuming that you can now make a straight line, a simple curve, and take a curve a little bit further and create a wave of sorts! Well done..

Okay, let’s create a new document, 460×460 and set background colour to black, #000000. Before we get kicking, let’s make sure we have some settings where they need to be.

Firstly, when you click the pen tool or press P on your keyboard you should see the preceding options on the top of your screen. Make sure you select the second option of the three ’squares’ – the ‘Paths’ option highlighted in green above. Then make sure that ‘Pen tool’ is selected, which should be on by default anyway. Finally, click on the down-ward arrow after the custom shape icon; the star-looking icon. This buttom (down-ward arrow) is tool settings, and as you can see there is a ‘Rubber Band’ option.

What’s the Rubber Band option for?

The Rubber Band option is used to help show you where the curve is heading and how it’s looking before you click to set it on the next segment or anchor. This is a good option for beginners because it helps to show you where the path will go next. The Rubber Band option might be hard to begin with, because even when you are done with a curve, the line just ‘follows’ you. Click escape, ESC, on your keyboard when you are done with a curve and that will get rid of the stalker!

Just a little tip – when you are done with paths and this effect, and you want to draw shapes, make sure you select the first of the three squares, or ‘Shape Layers’ and not ‘Paths’. Obviously we can keep ‘Paths’ on for now because we need this option.

So back to your 460×460 canvas with a black background.

Making sure to incorporate a new layer for each object, draw three objects on the canvas, separating them across the canvas if you can. We want to draw what we have just learnt; a straight line, a curve and a wave.

Don’t worry about the foreground colour for now because we will apply layer styles later to dress each one up. So obviously, create a new layer, call it ’straight line’ or something, draw the straight line and then create a new layer for the curve, and another for the wave. If done right, you should see something like below.

If that’s what you see on your screen, well done! Let’s keep going.

Click the brush tool and select a soft round brush, 5 pixels in size – or if you have a later version of Photoshop, simply select the brush tool, (press B), and then right click on the canvas and change the ‘Master Diameter’ to 5px and leave hardness at 0% (obviously! it’s soft, right!). Select white, or #FFFFFF [thanks Hank!] for the foreground colour for now so we can straight away see a result, then click back into the pen tool.

This is the fun part! You might be wondering why we setup the brush? Well worry no longer, we are about to find out why!

Get the Flash Player to see this player.

Okay, let’s recap.

If you right click on the paths you should see a ‘Stroke Path’. What this will do is just what it says; Stroke the path you have made using the option you tell it to. Because we edited brush settings beforehand, we choose ‘Brush’ and make sure we keep ‘Simulate Pressure’ ticked. After that, you’ll want to right click again and ‘Delete Path’ because we now have a stroked layer in its place and don’t need the ‘guide’ anymore!

What exactly is simulate pressure?

Simulate pressure simply gives the curve a more realistic stroke. It does this by tapering-off the ends of the curve/line as if the pressure has started off light, and then eased-off on the end of the curve. Trust me, you want to keep this selected – it makes everything look much better!

Okay, if you followed the video, you should now have something like below.

Cool hah? Okay, let’s get some glowing happening.

If you apply the following Layer effects to your now-stroked paths, your glow should start forming.

When you select the above layer styles; if the paths are all on one layer (even though we talked about splitting them up before), as an example, should start looking something like this:

Cool hah?

Quick Tip 2.0

If you want to make your life easier, you can click the “New Style” button as seen in the above Layer style selection screens; immediatly under ‘Cancel’. This will let you clone all the settings that are open on the current Layer style screen to be used on another layer/path, etc. When you want to re-use the settings, go to: ‘Layer > Layer Style > Blending Options’, click on the ‘Styles’ tab, on top of ‘Drop Shadow’, and ‘Inner Shadow’, etc – and then select your new style from the list; press ‘OK’ and you’re done!

So there you go! Experiment with your curve, brush master diameter and type, and also your lighting (fill/layer effects) and you could come up with something like below…

So there you go people, hope you learnt something about the pen tool today and some effects you can create using stroke paths.

Enjoy and drop a comment if you liked the tutorial or you need something explained – or feel free to share it with your mates. Get on the RSS Feed to keep up to date about when I next post!

Thanks for reading, Cheb.