Dave Lim

Creative Pricing

2012-02-01T00:00:00+11:00

In addition to my day job, I’ve been freelancing design and web work in my SpareTime™ for about a year now. Not a huge amount of work, but enough to have stirred the ever present spectre of pricing and the two main questions that scurry around after it:

1. How to charge?

There are a couple of different ways to apply charges for a piece of work:

Time & Materials: Here you charge for time blocks of effort (such as an hourly or daily rate). It has the advantage that you should always get paid for the work that you do, but can be less attractive for clients because it is not linked to an outcome and shares the risk of budget and schedule blowout with the client. Hourly rates can seem proportionally high as they must take into account all of the standard and ongoing costs of doing your business (insurance, superannuation, sick leave etc.) and may require a minimum period of engagement to ensure that you don’t lose money on ramp up costs for small jobs.
Fixed Price: Here you agree to a goal or deliverable and set a fixed price. This is obviously more attractive to clients as they can get a good idea of how much a particular unit of value to them will cost. It less attractive for freelancers as it puts most of the risk and cost of scope and schedule blowout onto the freelancer.

2. What to charge?

Coming up with a rate ultimately comes down to one question—“How much is your time worth?”

Worth to You: Takes into account both your business related costs (insurance, superannuation, accountant, electricity, travel, hardware, software etc.) and personal considerations (spending time with family, quality of life etc.) and provides a baseline amount that you must earn to simply meet your costs.
Worth to Your Client: How much is your client happy to pay for your work? If the amount is less than the amount you arrived at in the previous step, then you have a problem, otherwise any positive difference between the two becomes your profit. This is not necessarily a fixed amount either. When charging time and materials your rate might slide lower for certain non-profits or regular customers, and higher for rush or our of hours work. When charging fixed price you can calculate your charge based on your effort, but you may also factor in the value of the outcome to the client.

There are a lot of moving parts to the pricing equation and different models can work for different people in different situations. I’ve barely scratched the surface here, but if you’re interested in some excellent further reading on the subject Jessica Hische’s wonderful Dark Art of Pricing is a must read, as is Jason Blumer’s Pricing Strategy for Creatives at A List Apart.

So, how do you do your pricing?

Bemio

2012-01-31T00:00:00+11:00

Lovely new font, Bemio, by Joe Prince of Admix Designs.

Bemio is an ultrabold sans with an extensive character set. It bridges the gap between old signage and craftsmanship with modern forms and simplicity. With more than 1000 glyphs, and full Language Support, Bemio is versatile and robust.

Available at the Lost Type Co-Op under their awesome pay-what-you-want model. You can get it for free, but remember that 100% of all donations go directly to the font designer, so please donate if you can.

Minimalist Business Card

2011-08-19T00:00:00+10:00

Yesterday I came across this short post by Google developer Boris Smus, who while designing a new personal business card realised that his email address actually captured all of the contact information that he wanted to share – his personal domain, email address and twitter account.

I though that the idea was really neat so I hacked up a little example web interpretation of the concept. Give it a try.

It’s still a bit rough around the edges, but if you’re interested in the code it’s available in my github repository.

Iconical

2011-04-27T00:00:00+10:00

My daughter is ten months old today. Rather than make you suffer through baby photos, I’ve decided to celebrate by giving away a set of social media icons from my portfolio that I put together a few months ago for a site redesign. It’s a small set, only covering a few services I was interested in at the time, but if there’s any interest I may expand it later.

The icons are available as a selection of transparent PNGs at 24x24, 32x32, 48x48, 64x64 and 96x96 pixel resolutions and can be downloaded as a bundle here.

The icons are licensed under a Creative Commons Attribution 3.0 Unported License. This means you can use them however you want, (including commercially) as long as you attribute me in some way for the work. Enjoy!

It's the little things: iOS4 wallpaper transition

2011-02-14T00:00:00+11:00

Okay, so inspired by Little Big Details I’ve decided to start a new category I’m calling The Little Things, which will aggregate short posts on cool stuff I come across where I think that a design or experience is really enhanced because someone has really paid attention to the details.

So, this morning I was changing the wallpaper on my iPhone. When you do this you have the option of setting different images for the lock and home screens.

If you set both wallpapers to the same image and slide to unlock there is a nice clean transition with the lock screen UI elements sliding off the top and bottom of the screen to be replaced by the home screen UI elements which slid back in. However, if you pick different images for each, as the lock screen UI elements slide out the wallpaper fades out to black and back into the new wallpaper as the home screen elements slide in.

It would have been very easy to just have the wallpaper fade out/in for both situations, but instead each use case a distinct, clean and smooth custom transition. Nice.

Quick Tip: Create a Fancy Rubber Stamp Border in Inkscape

2011-01-26T00:00:00+11:00

I’ve been playing about with drawing flat and embossed stamps in Inkscape and came across a fairly neat way of producing a fancy rubber stamp border shape, so I thought I’d share it as a quick tip.

Create the border tile

First off we create a simple shape that will be used as a repeated tile around the stamp border. You can use any particular shape that takes your fancy, but for this example we’re going to create a wavy border, so we want our tile to be a repeatable slice of the wave, kind of like a cosine curve.

Use the ellipse tool to create a small circle. Convert the circle to a path. Duplicate it twice and align the three shapes in a horizontal line.

Join the intersecting nodes and break the path at the sections that are no longer wanted.

Use the bezier tool to close off the shape and join the nodes to close the path.

The curves are still a bit clunky, so remove some of the mid slope nodes smooth the others to get a cleaner shape.

Fill the resulting shape and your tile is complete. Don’t worry that the base of the tile is flat, we’ll fix that later.

Build the border

Create a circle at the size you want the stamp border and covert it to a path.

Resize the tile you created in the last step to your desired scale.

Raise the level of the tile path so that it is above the border circle. Select both and then from the Extensions menu select Generate from Path then Pattern along Path.

In the settings dialog, toggle the Live Preview option so you can see the effects of your changes. Then set the Copies of the Pattern to Repeated, Stretched (so that the tile is repeated and it stretches enough to fill the entire path) and the Deformation Type to Snake. Jiggle the space and offset properties until you get a border you are happy with, then click Apply to set the changes and then close to close the dialog.

Cleanup

So now you have the basic outline, but there are still a couple of areas that need to be cleaned up. First, even with the stretching option, the join between the start and end of the repeated tiles along the path is a bit clunky. Zoom in and smooth it out.

Finally, the undersides of the tiles are flat rather than matching the curve of the circle.

To fix this we will fill the entire middle of the stamp and then cut out the centre. Select the original circle we used as a template for the stamp and fill it. Depending on the offsets you used earlier, you may need to adjust the size so that it fills the entire shape. Duplicate it and scale the duplicate to a smaller size.

Merge the large circle and the border to create a filled shape, and then use the smaller circe to cut a path out of the centre.

And your voila! You have a fancy border ready to be incorporated into your stamp design.

I hope you’ve found this useful. If you have any questions or suggestions please leave them in the comments.

Free iPhone Wallpapers: Day and Night Owls

2011-01-07T00:00:00+11:00

These two wallpapers of day owl and night owl were some of the first things I drew when I was experimenting with my new Wacom tablet and Inkscape. Nothing too flash, but I thought I’d offer them up for anyone who was interested.

The wallpapers are available as PNGs in both iPhone (320x480) and iPhone 4 (640x960) resolutions and can be downloaded as a bundle here.

These works are licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License. Share and enjoy!

Wacom Tablet with the GIMP and Inkscape on OSX

2011-01-06T00:00:00+11:00

When I started devoting more time to improving my design and illustration skills I decided that it would be a good idea to invest in a Wacom tablet. After browsing the range, I settled on the relatively cheap consumer Bamboo Pen and Touch. I was initially a bit worried about the smallish size, but as I tend to draw more from the wrist and elbow than the shoulder it’s actually ended up being quite comfortable.

I’m not generating any income from my illustration or design at the moment and I can’t justify the expense of Photoshop or Illustrator so I’ve been working with the GIMP and Inkscape. Unfortunately, these applications don’t run natively on OSX and I soon encountered problems with the tablet pressure sensitivity and key mappings. After a bit of tweaking I managed to get everyone to play nice and I thought I’d share what I learned in case it can be of help to anyone else.

Update X11

The drivers bundled with the tablet will get it working with OSX, but the GIMP and Inkscape were originally written for linux operating systems and as such use the X11 Window System. OSX includes a very basic X11 port that supports the tablet to a limited extent, but if you want extended functionality you should install an alternative X11 port like XQartz. Make sure you reboot after installation to avoid conflicts with the old X11 install.

Key Mappings

The next problem I came across was that the ALT key was not working properly in X11. This is due to the default way that keyboard mappings are handled by the bundled X11. I actually encountered this before installing XQuartz and found a solution on the Inkscape wiki which describes how to rectify this by creating and modifying an xmodmap to explicitly define the key mappings.

If you’ve already installed XQuartz however you can avoid all that messy mucking about with text files and just edit the X11 preferences to select Option keys send Alt\_L and Alt\_R and unselect Emulate three button mouse.

Pressure Sensitivity

To enable pressure sensitivity and in Inkscape and the GIMP you will need to tweak the input device settings in each program.

In Inkscape, launch the Input Devices dialog from the File menu. This dialog will have the tablet listed as an input device. Change any components marked as Disabled to Screen, select Use pressure sensitive tablet and restart Inkscape.

In the GIMP, launch the Preferences dialog from the Edit menu. in this dialog select Input Devices, Configure Extended Input Devices. In the dialog this launches, select the Pen device (you can also configure the eraser and such) and set the mode to Screen.

And that should be it. Good luck!

What I'm Working On (or A Poor Man's Dribbble)

2010-12-16T00:00:00+11:00

If you’re connected to the design industry then you’re probably already familiar with Dribbble, a site for designers, developers and other creatives to post little sneak peeks their work as small screenshots which the site community can follow, respond to and offer constructive feedback on.

There is no membership signup for Dribbble - to join you have to be offered an invitation by an existing member, thereby (at least theoretically) maintaining some control on the quality contributions and the culture of the community.

In practice, this can be a bit tricky on both sides - some people feel funny about asking around for an invite, while some members are uncomfortable having to judge or vet the work of people who ask them for memberships.

I haven’t build much in the way of a portfolio yet to justify asking for an invite, but I really like the idea of playing show and tell with what I’m working on. The idea of socialising snippets of my output motivates me to stretch myself - to do more work, at higher quality and to be prepared for feedback. So I’ve decided to use the utterly awesome Skitch to create a dribbble-esque way of sharing screenshots. You can find the gallery here or via a new link in the Stay In Touch portion of the site footer.

Please have a look if you’re interested, and any comments or constructive feedback would be greatly appreciated.

A Logo Design Process - The Melbourne Juggling Convention

2010-12-13T00:00:00+11:00

I’m a software developer, so it’s probably not entirely surprising that I juggle. I don’t juggle particularly well, but I juggle with gusto so hopefully that counts for something.

Anyhow, a couple of years ago I discovered and started attending the Melbourne Juggling Convention (MJC), organised by the amazing juggler Christian Parr. Until recently the MJC had changed their branding annually, but this year they decided to run a competition to design a new permanent logo. It’s not an area where I have any formal training, but I’m very interested in graphic design (and there was a lifetime membership at the convention up for grabs) so I thought I’d give it a try.

The brief included the following direction:

Logo Design - things to consider: Try to consider as many of these points as you can:

A simple design that MUST clearly show the words “Melbourne Juggling Convention”

Colourful

Works both on a white and black background

Clear & resizable, ie. stays recognisable whatever the size

The concept/idea is more important than the quality of the drawing. We can get a graphic designer to touch up your design if required, ie. you need a good idea more than good drawing skills! The new MJC logo needs to reflect the vision of the conventionʼs future. Some things to consider are: the community, the people, circus culture, performance, workshops (learning and teaching), environmental awareness, friendly & inviting, everybody is welcome.

Research

As a juggler I already had a fair amount of domain knowledge about props, disciplines, terminology etc., so for my research I had a look around at other juggling related logos and designs. The spectrum of examples I found was incredibly broad with varying levels of detail, complexity and finish, but it gave me a good general feel for the problem space.

Brainstorming & Concept Sketches

Based on my research, I decided to aim for a simple, descriptive image with fairly bold spaces and colors to make it as eye catching and recognisable as possible. I came up with some basic ideas about the representation and worked through a few iteration of sketches and mockups.

Shape

A lot of the examples I came across in my research tended use clubs as a descriptive symbol for juggling. While clubs are a very common prop, they tend to provide a bit of a psychological barrier to entry for casual and amateur jugglers. I figured that I could either represent every circus related prop I could think of (balls, clubs, scarves, rings, diablo, devil stick, unicycle, hula hoop, cigar boxes - ah! Too many!) or reduce it back down to the simplest, most basic and recognisable prop I could think of - the ball. It’s what most people start with and is instantly recognisable. With this decided, the overall shape of the design started to lean towards heavier use of circles symbolising the balls, the trajectory of the objects as they are juggled, and more abstract concepts like inclusiveness and sustainability. I also thought that it was very important to include the people and community around the convention in some way, and toyed with several different versions of human figures. I tried using groups of figures to represent a feeling of community, belonging and inclusion, but I though the resulting concepts were looking too busy. When I tried to use fewer figures I encountered issues where the symbolism attracted potentially unrepresentative connotations (for instance when I used a male, a female and a child to represent the different kinds of people who are part of the community it just ended up looking like an atomic heterosexual family). In the end I decided on a single gender ambiguous figure.

Detail

I made a conscious decision to avoid excessive detail in the rendering to make it more easily resizable, identifiable and recognisable.

Color

As there was a requirement to display the logo on a both black and white backgrounds I decided to go with a very simple monochromatic palette, only using black and white so that I could reverse them for the opposite colored backgrounds. I went with green as the base color as a fairly obvious tip of the hat toward environmental awareness and sustainability (and with the option that different base colors could be used to differentiate between different convention years).

Type

Looking back I think this was the biggest weakness of my submission I left the text until last, and I didn’t put enough importance on integrating the type with the imagery so it ended up looking very generic, tacked on and didn’t really add to the overall concept.

I submitted the two color mockups above and (as the focus was on the concepts rather than a polished product) I also included some of the sketches. I received feedback that my concepts had been accepted with some changes made by the selection board and the designer including a different typeface and incorporation of concept ideas into the mockup.

You can see the final results that were sent back to me below:

Things I’d do differently

Because I’m still learning I tend to have the feeling that whatever I’m doing now is the best thing I’ve ever done, and everything I’ve done before is terrible. Looking back over these materials brings to mind some obvious things that I’d do differently now:

Type - When I took on this project I didn’t know much about typography and completely under appreciated its importance in the finished product. In the end the client chose their own font, but even with the requirement for a free font, I think that the overall design would have been better if I’d lead rather than followed in this instance.
Tools - The mockups here were raster images produced in the GIMP - partially because the final concept was going to be cleaned up by a designer, but to be honest mostly because at the time I didn’t know any better. Since then I’ve learned a lot more about vector graphics and I produce all of my scalable stuff in Inkscape now.
Color - At the time I liked the idea of negative images for the white and black backgrounds, but my taste has matured a bit now and I’d probably go with some more subtle use of greys instead.
Texture - I’ve been producing some stuff lately that makes use of textured overlays to give a slightly worn poster effect and I think this would have really benefited from the additional depth.
More feedback! - It’s not really in the nature of competitions to be collaborative, but I having just thrown some ideas over the wall, I can appreciate the advantages of going through iterations of client interaction starting early in the process to minimise any gap between client expectations and the product and avoid wasted effort.

This project was well outside my comfort zone at the time and I was nervous enough about rejection and critique that I almost didn’t enter. I think that the lesson I take away from this is the understanding that you have be willing to embrace failure as a learning experience if you’re going to learn and improve. If you don’t take that risk you’re safer, but you’ll never get off the ground.

Oh, and sometimes you can win stuff :)

A Quick Introduction to CSS3 Gradients

2010-12-08T00:00:00+11:00

Before CSS3, gradients on websites generally required the use of images - a somewhat inflexible solution with an impact on load times. CSS3 brings support for gradients, but unfortunately Mozilla and Webkit can’t seem to agree on the syntax for these attributes yet (and IE does it differently again), so it is still necessary to use a combination of vendor specific properties to achieve the desired effect.

Webkit

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Where:

type is either linear or radial
point is a pair of space-separated values designating the X and Y start and end points of the gradient.
stop is a color-stop which is like a split point on the gradient (where the first parameter is the percentage of the distance from the start point to end points of the gradient and the second parameter is the color at that location). If there are no stops, then there is a 100% smooth gradient from the start to finish.
from and to are special stops that describe the start and end colors

For example, the following:

  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2C4161), to(#71A7FA))

Would produce something like:

Mozilla

  -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )  
  -moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

This is similar to the webkit syntax, with a few subtle differences. Here instead of specifying start and end points for the gradient, the point describes the starting point of the gradient and angle the angle of the gradient’s direction. For the radial gradient, shape allows specification of a circular or elliptical as well as size and position of the origin (in this it is more flexible than the webkit syntax which only allows circular radial gradients).

For example, the following would produce the same gradient as the previous example:

  background: -moz-linear-gradient(top, #2C4161 0%, #71A7FA 100%);

IE

  filter:progid:DXImageTransform.Microsoft.Gradient(properties)

Where properties are taken from the following set of key value pairs:

enabled - whether the filter is enabled.
startColorStr - initial color for the gradient.
endColorStr - final color for the gradient
gradientType - the orientation of the gradient.

The IE gradient filter doesn’t support color-stop, gradient angle, and radial gradient, so you can only set horizontal or vertical linear 2 color gradients.

For example, the following would produce the same gradient as the previous examples:

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2C4161', endColorstr='#71A7FA',GradientType=0 );

Helpers

The syntax can be a bit tricky, especially if you’re trying to reproduce a complex effect cross browser.

If this is all a bit much to juggle, you can find a lot of nice tools and helpers for gradients online. Westciv offer a nice set of tools for web developers including a nifty gradient tool that helps you specify both linear and radial gradients with multiple stops, and generates the corresponding code for both webkit and mozilla browsers.

The firefox extension Colorzilla also offers a nice gradient generator on its website. Though it doesn’t do radial gradients, it does provides code for IE in addition to mozilla and webkit.

Quick Tip: How Preloaders work

2010-12-07T00:00:00+11:00

A preloader is simple little animation that shows while a sub component of a web page is loading (such as a gallery image or some remotely queried information). These are relatively simple to implement with basic html, only requiring Javascript when you want to display the loaded content.

Step 1 - Get a preloader image

The preloader animation is itself just a simple animated gif like the one below.

If you’re feeling eager, or are are after a specific look and feel you can create these yourself, but for the general case there are a variety of free online resources that allow you to generate and download images for a variety of indicators, background colors and sizes such as ajaxload.info and preloaders.net.

Step 2 - Place the preloader image

Once you have generated an image, it is simply placed in your page html as an img element.

  <div id="loaded-content">
    <p>
      Loading image...<img src="loader.gif" />
    </p>
  </div>

Step 3 - Replace the preloader image with the loaded content

So now you have the page element displaying the loader, the final step is to use Javascript to replace the image section with the loaded content once it is available.

Easy!

A Couple of Nifty Color Tools for Web Designers & Developers

2010-12-06T00:00:00+11:00

Having just gone through the design and development process for this site, I thought I’d share a couple of nifty free color related web applications I’ve been playing around with.

Kuler

Kuler is a beautiful flash based color scheme generator. You can build completely custom schemes, generate from a base color using a variety of standard color scheme rules (Analogous, Monochromatic, Triad, Complementary, Compounds, Shades) or generate themes from uploaded images.

One of the interesting facets of Kuler is that is has a community of contributors actively providing feedback and a big library of saved schemes. You can use Kuler without registration, but if you login with an Adobe ID you get the ability to save and download schemes as Adobe Swatch Exchange (ASE) files. And if you’re using CS5 software, you can also access Kuler via a built in panel.

On the down side, schemes are restricted to a 5 colour palette. This wont suit everyone’s needs, but should still provide a nice starting point for most projects. As someone who uses open source software like the GIMP and Inkscape pretty heavily, it would also be nice if they supported the GIMP palette format. However a cursory google suggested the availability of plugins to import ASEs, and as Kuler supplies a range of color codes (HSV, RGB, CYMK, LAB and HEX) at the worst you might have to cut and paste 5 values, which isn’t really that big a chore.

0to255

0to255 is tool designed and developed by Shaun Chapman that suggests a spectrum of lighter and darker colors around a selected base color. This is really handy tool for finding minor color variations for things like link hovers or text and border effects. It’s beautiful, easy to use and a huge improvement for me over the convoluted (and to be quite honest, downright shoddy) process of guestimation and blind luck I’d been using previously.

I hope these are of some use to people. If you have any favourites or suggestions, please mention them in the comments.

First Post!

2010-12-03T00:00:00+11:00

Hello? Hello? Is this thing on?

This is a short post for the soft launch of my new website and blog.

I’ve hacked most of the structure, but there are still a few corners to sand down and some furniture to shuffle before I get this thing nailed down. Over the next few weeks I’ll be cleaning up the code, tweaking the styling, and then probably fixing anything that falls over as a result of my cleaning and tweaking. So if things change a bit over the next few weeks, don’t be alarmed - I’m doing it on purpose.

If you encounter any problems with the site - broken links, crazy layout or formatting, strange content, ninjas - whatever - please drop me a line and let me know.

Cheers

Dave