Jon Phillips

Designer, guitarist, and blogger. The simplicity of this blog is what strikes me the most. Everything from his logo to color scheme tickles my fancy, or maybe I’m just easily tickled.

yongfook

The domain name made me laugh a bit at first but, when I looked at the site, I was amazed. Once again, it’s the simplicity here that captures me. Not only that but the blog entries are cleverly organized into simple images, which act as nodes on a tree. Talk about different.

Designspasm

What struck me about this particular portfolio was its use of non-Flash-based animation! I’m not too sure what technology is behind it but it certainly feels cool when things start following your mouse. Definitely worth a look!

Outlaw Design Blog

This guy has some serious illustrative skill. I like the outlaw theme and especially like his the way he’s organized all his categories. I’ve added this guy on Facebook, as well as Twitter, so I couldn’t recommend him more!

CasJamMedia

This site is rather “dry” compared to the others. However, what I like the most is the way they’ve organized their testimonials, process, and blog links – simple, neat and to the point. I may even take a lesson or two from this for my own portfolio.

The Bygone Bureau

Now, you might be wondering why I chose to include this site. Its design has Thesis written all over it but, what strikes me here is its sidebar widget labeling. Instead of using some bland header, they decided to use a “Table of Contents” and “Current Series” Insignificant, maybe, but I dig it. The other reason I included this site is because I especially liked their blog content!

Carsonified

Ah, another wonderful blog! Apart from is wonderful content, the design of this powerhouse is “enlightening.” The “vitamin” theme is carried successfully throughout the site and occasional splashes of orange work where they’re intended. Another great blog I encourage you all to view! Oh, and also take a look at his main site – that’s pretty darn good too!

Simon Cillison | Colly

This is one of my favorite sites! It’s very sophisticated and makes real good use of animals. (If you’ve been reading my site, you may well be aware of my fascination with animals.) The layout is very unique and really allows you to scan everything the site has to offer. I almost feel like I’m being immersed into Simon’s private life – most probably due to his ‘journalistic’ approach to the design of the site.

Rubiqube

I think I like the design of this site because it makes me feel child-like. I don’t know but the sketchy headers make me think back to my preschool days. Regardless, the designer composes everything in a well-thought out layout. Even the simple two-column display of relevant posts after individual posts – brilliant.

James Hutson

AV, design & web content from Melbourne, Australia – represent! This guy has a real nice, straight-forward layout. Just check it out!

I. The strength of the pack is the wolf.

When dealing with clients, know that you are the one helping them. That puts you in a position of power. However, don’t abuse that power by acting arrogant, snobbish, selfish or self-centered. Although you are important, there are many other freelancers in the world for clients to fish and choose from.

A good leader can dominate without patronizing or degrading others. Alpha males are strong, invaluable leaders within a pack that is neither a democracy nor a dictatorship. In the words of Cesar Millan, be “calm and assertive,” and your balanced energy will garner respect.

II. The strength of the wolf is the pack.

We are interdependent beings, meaning we all thrive on each others’ efforts – directly or indirectly. In a pack, a wolf will not survive well without the help of his companions (for hunts). The same can be applied to freelancers. If a project seems too big to handle, look at outsourcing to other fellow freelancers. This will not only help to complete a project on time, but it will also help to build relationships.

We must not forget those around us, even if we are working for ourselves.

III. Boundaries, Limits and Rules

This is a no-brainer. We all know that, in the wild, animals obey territorial rules, limitations and boundaries. We can apply this to freelance work by educating our clients on what is expected when working together. We can also set boundaries by laying out contracts or terms of agreements, or we could simply post a Production Process for Clients page on our websites. Either way, be sure to lay down the rules and boundaries before starting on any project.

IV. Know your role

The reasons why wolves work so well together is because each of them have a purpose – and they all know their roles within the pack. Although we could argue that freelancers are “lone wolves” when dealing with clients, we will often find ourselves creating small, temporary packs for particular jobs. So it would be best to come into theses relationship with a “pack mentality,” evaluating each others’ roles and sticking to them throughout the duration of the project. This will, in turn, cause less headaches and promote more balance between us and the clients.

I. Understand the Basics of HTML/CSS

If you’re looking to build your own Wordpress theme, you’ll need to make sure you’re efficient in some basic coding (HTML/CSS). If you wish to learn coding quickly, and efficiently, I highly recommend HTML Dog. It’s so good that I still use it as a reference from time-to-time.

II. Constantly Research

I’m always on the prowl for inspiration and most often Google in “best css wordpress web design.” There are so many websites out there but it’s important that you go through as many as you can.

Some of my inspiration comes from sites like BestWebGallery, CSSElite and designiskinky.

III. Bookmark or RSS Your Finds

Only do so for the ones you like, though. This serves as a backup for whenever you have “designer’s block” (yes, it happens). Just browse through your favorite hubs and, wallah, more often than not, something will kick-in in the left hemisphere.

My tools of choice (for bookmarking) are Diigo and Firefox’s Xmarks add-on.

IV. Utilize Pre-made Themes

This is a great place to start. Instead of re-inventing the wheel, grab some themes that have already been made. Try simple ones that allow for more flexibility. This allows you to fiddle with the CSS as much as you like, in order to get your desired look. If you have some money to spend, or know a bit more coding, try messing around with premium themes or some more advanced layouts.

I used Thesis as a basis for this blog’s design, simply because it provides the most versatility, and functionality, against its rival frameworks.

That’s all for now! Hope these tips have helped but, if not, please feel free to post some of your own. Happy web-designing!

Rob Mason

This site is really well laid out, and definitely helps the reader/viewer find his way around without too much hassle. The comical feel also brings a lightness to it that is not typically felt on very many portfolio sites.

Dave Harrison

What I like about this site is its simplicity – in the use of colors, layout and script! The top toolbar (with the “call me now” text) is also an invaluable feature that gives a professional and personal feel to the overall site. The large Verdana font is a bit of a let-down, on the front page, but I think everything else blends in quite well.

Kilmer House

This site has the softest feel to it, which is taken from the well-known Johnson & Johnson brothers blog, and I simply love it! The other the neat feature of this blog is that it embeds non-standard fonts into it without you even knowing! Actually, I’ve also managed to do this with this blog using the spectacular Wordpress theme Thesis, which I highly recommend.

Michael Muller

Have you ever wondered who does all those movie posters you see at the cinemas? Well, this is one of the guys! Michael Muller is a photographer who has an exquisite website, which showcases his work in a neat and unobtrusive manner. Check him out!

Maxvoltar

Here’s another site with a clean, yet slick layout. The menu sidebar is absolute, meaning it stays static as you scroll through the site’s content. The contrasting of dark and light colors is used superbly, as dark colors are used to emphasize feature titles, while the lighter colors are reserved for sub-headers and content. If anything, I’d love to adopt some of this site’s aesthetics into my next design!

*Please note that this brief tutorial is based on my own, personal experience with Flash CS4. If you have any questions or comments, write them below this post.

UPDATE: Before reading on, please make sure that you have upgraded your Flash version with the latest hotfix: http://bit.ly/iiXm0.

As I looked across the web, I realized there weren’t any real good tutorials on how to export linear, Flash-based animations in quicktime – and properly – for Flash CS4. So, after a lot of rummaging and trial-and-error, I came up with the “correct” settings.

File > Export > Export Movie… > Save > Quicktime Settings

Under “Video”
Compression: Animation
Depth: Millions of Colors+
Quality: Best
Frame rate: current
Key frame rate: (whatever your frame rate is)
Dimensions: current

These settings will help you render out video that will be easily editable in other video-editing and compositing apps (i.e. After Effects, Final Cut Pro, etc.). One thing to look out for though (if you are still experiencing slow or choppy renders) is the use of filters.

In my experience with Flash CS4, if you use more than one filter on a movieclip, quicktime will almost break itself and produce a video twice in length, with a slower framerate. For now, though, use the above settings for best output when dealing with linear-based Flash animations.

Now, this article is more about my own personal work-flow than anything else. During a recent project, I was forced to re-arrange it. For design purposes, I was comfortable using Apple’s iWeb application. Why? Simply because it used drag and drop features that are not apparent in Adobe Photoshop (at least, none that I was aware of).

When it came time to convert my design to XHTML, I was faced with a dilemma. Unfortunately, iWeb didn’t do a very good job of creating “clean” code, therefore, I had to look for alternatives. After much research, I came across a fairly seamless integration of three applications: Rapidweaver, CSSEdit and TacoHTML.

Rapidweaver (RW)
This app is the most commonly used Mac app for users looking to switch over from iWeb. Reason being that its application allows you to easily copy and paste code from iWeb, straight into RW’s modules. For some tutorials on this migration, go here and here.

CSSEdit
For your CSS needs, this Mac application creates a way for you to easily locate your different element styles (in a pleasant, visual format). I use this because it also has a live preview option, which allows you to see your changes on-the-fly.

TacoHTML
This application may not be the “best” out there but it suited my needs for the project. Until (or if) I find something else, this application will stay under my current workflow. It’s used to edit HTML code, with options to batch change chunks of it, as well as preview changes in real-time. It’s simple and robust.

So, to recap everything, my workflow looks like this:

Rapidweaver > TacoHTML > CSSEdit