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.

Project management is really a science. There are hundreds of things to learn and techniques to pick up. Having done Prince 2, (Projects in controlled environments), a project management methodology and accreditation started by the UK government to aid in the successful running of projects; I picked up little bits and peaces which definitely helped me in my time as project manager.

One of those things that I am now glad I can use in my day to day projects is the Critical Path Method. The Critical Path Method (CPM) is basically a tool for scheduling project activities and tasks. Essentially, its an easy method to help plot a sequence of activities for the project’s runtime.

Critical activities or the The Critical Path, as they are known, are those activities which basically determine the total project length (runtime, above) as well as make up the longest overall duration. If those activities are not completed on time, there is a major/real chance that the project will not meet its deadline(s).

For example, let’s give it a shot! consider a project, ‘Bob’s Health Foods Website design’ involving six tasks; A to F. The tasks have the following requirements, restrictions and time estimations.

Obviously, what the above mean for us in the long-run includes the following:

1. Tasks/activities A and B have no predecessors. What that means is that they don’t have to wait for any other task to start and/or finish before they themselves can start. That’s good news! It means we can get going on A and B right away
2. Activity C however is a little bit of a brain teaser. This activity cannot begin until activities A and B are completed.
3. Activities D, E and F also have predecessors but only one per activity.

Okay, let’s find the critical path, shall we?

[click to maximize]

As we can see from the cool Critical Path diagram above, it all starts to make a little more sense! Our project should technically not be finished before 13 days if everything goes to plan. We calculated this by plotting the activities along a time line based on days and compared the activities in terms of any predecessors.

If an activity had a predecessor, obviously It would not be able to begin until the predecessor has run its course. This is why E, in the diagram comes right after A - because our rules stated that E cannot start until A, E’s predecessor has occurred/been completed.

Just briefly, activities such as C can be classed as having “total float”, or in layman’s terms; having the ability to be delayed without affecting the overall time line of the project. As can be seen from the critical path diagram, the path from activity C to activity F has leeway of one day! What this essentially means is that if C ran over by one day, the project would not be delayed because of the extra day between the two activities.

Having said that - if anything is delayed on the critical path; i.e. activities A and/or E, you would probably want to call it catastrophic failure (depending on the size of the project) - because it means you have just pushed your deadline! [I.e. watch out!]

Hopefully this process sinks in for you a bit more than before now. Modern project management tools like Microsoft Project can automatically work out the critical path for you - thus isolating those tasks that have to be completed on time to meet a project’s deadline. However, I must admit, it’s always a little more fun doing it yourself; especially if it’s a fairly small project!

So there you go guys, my first project management in detail article. Hopefully you are a little bit more across how the Critical Path analysis/diagram works now and how it can aid you in your next project.

Obviously the critical path is also good at helping to estimate how long a project will take in terms of dates. You’d never just tally up the individual ‘time to complete’ rows! For example, based on our project in this case, we have 6+4+5+8+7+5 = 35! Obviously our project isn’t going to take that long! Good project management, and more importantly better project planning taking into consideration Critical Path analysis will definitely aid you in getting it right!

Hope this has helped! Drop me a comment if you have any further questions, or subscribe to the RSS feed for more posts! Till next time, Cheb.

Tags: Critical Path, PRINCE, Project Management, web development

No, really - What makes a great website?

That really is the million dollar question. Many people have tried to tie this down to mitigating factors - but at the end of the day, in my opinion - a great website is one which meets the following rules:

Content

Content is easy to find

It’s simple - if a user can’t find information they are looking for, they have no reason to be on your site. You need to make sure content is easy to find; and in a variety of ways. For example, on Cheb 2.0, you can search the site for any keyword which will return a list of matching articles/posts, or you can click on ‘Archives‘ menu to show every article posted sorted by date. Further to that, there is a tag cloud to search by keyword or a direct link to each month with the number of posts that were published during that month.

You might be wondering why I have left that as a way to search for posts? Well, in essence it was a really easy decision. Not only does it just add another form of search - but there are times when monthly archives make sense. For example, if a website regular was to go on holidays for 2 weeks in one month and then come back to your website next month, all they want to see is what they missed out on - and this is where monthly-archiving achieves a sense of purpose.

Besides, my reporting/stats definitely show people are using it! 172 uniques can’t be wrong, right?

All in all, make sure you take every step you can possible to make sure the user experience is a good one; allowing them to find content easily will definitely help that endeavour.

Original and fresh content that brings people back

Cheb 2.0 has lots of RSS subscribers. I’m a huge advocate of RSS feeds! It means people can stay in touch with your website/blog/online endeavour and not have to worry about constantly reloading for new content. On the flip-side, it’s that new content that keeps people coming back. Whether or not they actually physically click on your site to see it, or read it through their RSS; they are still a visitor and they still have to be tracked!

Google itself considers the freshness of a link a massive importance when determining PageRank and relevance. Make sure you set yourself a blogging/posting/editing schedule and follow it to the best of your ability! SEO-wise, make sure you keep your homepage fresh and beaming with new content - but importantly, do not neglect your inner pages as well.

When I say inner pages, I don’t mean to go back and worry about a blog post you did 10 months ago; we’re talking about your ‘About’ page, or your ‘Services’ page! Keeping those integral pages fresh makes sure: 1) they don’t fall into supplemental results, and 2) Google and other search engines show you some love for those pages too!

Aesthetics/Look and feel

The website is physically appealing to look at

Let’s face it - the only reason people still visit UseIt - Jakob’s usability portal is because of his tremendous advise. No one is going there to admire his website design!

Unless you are an online giant who already has a user-base that will never deplete, i.e. Google, (who when you think about it has great website design because it’s fit for purpose) - you really need to make sure you look into your website design. It doesn’t have to be glitzy and glow; just appealing to look at.

I mean you might have people looking at the screen whilst browsing your site or blog for more than 5 minutes on end (or you hope, anyway!). Do you want them to not come back because they found the site looked a little too 1998?

I’ve seen numerous websites my friends have set up with an amazing idea, or great content that have simply given way due to the in-assurances that come along with badly-designed websites.

Things are where the user expects them to be

This is an important one. If you can’t get your website to look ‘amazing’ - meet the user half way and at least promote a sense of structure and conformity. You need to make sure you set out your page elements to be where the user expects to see them. Unless you are going for an ‘outlandish’ theme or look which you are trying to get noticed for [i.e. Cheb 2.0] - make sure you take into consideration what I’m going to call the ‘6 section grid model for website layout’.

As you can see to the right [click to maximise], web users are now confortable with the following grid on many websites. Unless you are trying to break the Interweb apart [laughs] - make sure your logo is on the top-most left section of the website. Same goes for your site search (if any) and top-level navigation.

You might be thinking - but why doesn’t Cheb 2.0 have navigation directly to the right of the logo? Obviously that’s not the point I’m trying to make. My navigation is easily recognisable, as well as still sticking to the top right section of the page. Please keep in mind these grids are only meant to be a guide and are not meant to be followed to the ‘tee’.

As long as content is easy to find, sections are split into bite-sized chunks of similarly-grouped information, and your content area is the most-prominent section of your layout, you should be good to go!

Consistency in colours and scheme

Make sure you try to keep everything consistent! Colours, headings, everything! Sometimes plugins, and other things like Google ads might not help you because they only allow you to change certain bits of detail. Don’t let that stop you from making sure everything that is in your power is consistent. There’s nothing worse than 43.5 different types of link styles. You don’t want one link to have an underline, one not!

Consistency above all means that users find it easier to connect to your website and also get more a feel for how everything works and what stands for what - e.g. links.

User-centered

Usability and accessibility is practiced

This one is important for many reasons. Check that you have taken adequate steps to enhance the usability and accessibility of your website. If you have forgotten the difference between accessibility and usability, check out ‘10 reasons to justify a website redesign‘. I will be blogging in more detail about accessibility more than anything else in a future post - but for now, a little teaser:

Make sure you check how your website, and more importantly, links - look to someone who suffers from varying degrees of colour blindness.

For example, the thumbnail on the left shows how Cheb 2.0 looks to someone suffering from Protanopia (Red-Green colour blindness).

You might think that checking things like that are ‘way too left-field’ - but something as simple as this can be checked in 10 seconds and can mean the difference between someone with colour-blindness not being able to distinguish between your linked content and non-linked content! You still thinking it’s not worth it?

If there was anything I could do to give everyone equal chance of viewing my content/website or what I had to offer - then of course I’m going to do everything in my power to achieve that!

Look carefully at the link colour on “Continue reading Facebook launches chat toolbar. Now they’re talking!”. Notice how it’s already changed from the real, default colour that non-colour blind people should make out?

The user always has an opportunity to right their wrongs

Make sure there is always a way out for the user. A top navigation, side navigation, search and links back home are great players in this field. No matter how good your website is, there will always be users who get lost along the way. Depending on the type of site you are running, you might want to try the Hansel and Gretel tactics of ‘breadcrumbs’. Whatever you choose, make sure the user has ways to right any wrongs they create along the way getting them off-track!

Meaningful file names

This isn’t only great for SEO; it works wonders for the user experience. The address http://www.cheb.com.au/what-makes-a-great-website/ is a lot better than http://www.cheb.com.au/index.php?pageid=283&level=2. I mean it’s not rocket science! Make your URL’s as easy to follow as possible. I should know what the link is about before I even click it! Cloaking or hiding information in strange URL’s kill the user experience and kill user-confidence in your website. Don’t do it!

Site architecture

Logical site structure

Make sure your website structure makes sense. Top-down, there should be a logical flow. The header should come first, followed by navigation (if not already part of your header section), followed by the content with any sidebars or side-navigation, and ultimately followed by the footer of the page.

Footers are just as important as headers. a good footer helps the user determine if the page has fully loaded. If the user doesn’t see what they are used to seeing at the base of your page, they should know that the page has not fully loaded yet; bet you didn’t think about that one!

Folksonomy and taxonomy

Tag your content as much as you can. Tagged content means related content. Try to relate articles wherever you can. It doesn’t have to be a ‘Related articles’ or ‘related posts’ section. It could be as easy as linking the user to relevant articles/web pages based on the current content of the page. Don’t just link-out for the fun of it - or to get more hits!

The way you classify and connect your information is just as important as the information itself! Keep that in mind when you are writing your next article or designing your upcoming website.

Purpose

At the end of the day, if there is no purpose to your website, then it won’t survive for long. Find a niche if you can and tackle it. if you are dealing with something that is ‘way beyond your marker’ or something which is totally hard to place yourself in; whether it be ‘Web design’ or ‘Get rich quick schemes’; the process is the same: find a reason to bring visitors back for me! Whether it is super-cool, fresh, relevant content, or a cool flash game that people just can’t get enough of!

Everything you create online should have an ultimate purpose to succeed!

Tracking and reporting

Finally, great websites learn from their mistakes! Use tools such as Google Analytics to help you determine popular and not-so-popular sections of your website. See if you can get down to the reason why ‘x’ is not as popular as ‘y’.

Good webmasters compare pages that work and don’t work and will simply weed-out or unpublish something which just isn’t pulling in the visitors as it did before. Great webmasters/designers will isolate the page and find out WHY it is failing.

Did you recently put some plugins such as text-ads or any other plugins which may have affected that page? Is there even a way to reach that particular page from other prominent sections of your website?

Put it this way: articles which you may have written 12 months ago, may become tomorrow’s most popular article online! History can and does repeat itself. What was last year’s news may, for whatever reason become popular again. Do not unpublish articles or remove pages simply because ‘they are getting too old’ or ‘you are running out of space’. Get more space!

There you go guys - another one bites the dust. Hopefully these articles/tutorials are hoping you achieve the best you can out of your website and online experience. Please digg/stumble this post if you enjoyed it and subscribe to my RSS feed to keep updated.