Winner
Entry #95 - Button & icon design - by Akhil K.

LiveReload picked a winning design in their button or icon contest

For just $401, they received 84 designs from 24 designers.

From logos and business cards to websites and stationery, you can get anything designed by running your own design contest on 99designs.

Mac app icon for LiveReload

Guaranteed
$401

Custom Button or icon package

Purchased for $401

(including 99designs fees)

By Andrey Tarantsov
  • Last feedback - Sun, 24 Jul 2011 15:34:47 +0000
  • Feedback 99%
  • Refunds - 0

1

  • Open
  • The contest was open to all designers

2

  • Selected a winner
  • The contest holder awarded a winner

completed

Congratulations to the winner, Akhil K.!

Top entries

Design brief

Organization name

LiveReload

Description of business

LiveReload is a desktop application + a Safari/Chrome/Firefox extension that:

1. Applies CSS and Image changes when you save a file, without reloading a page.

2. Automatically reloads a page when any other file changes (html, server-side script, etc).

3. Optionally compiles SASS/LESS/Stylus/HAML/Jade/CoffeeScript files into css/html/js.

See http://livereload.com (the content is there, design is not finalized)

Version 1.x has been free and open-source, and had only a command-line interface: https://github.com/mockko/livereload.

Now I'm making version 2.x for the Mac (and, eventually, Windows) which includes 3 most-requested features: (1) native Mac UI, (2) easy installation, (3) compilers support (feature #3 above).

Organization industry

None specified

Description

Mac application icon, to be used in:

1) Mac App Store (sizes up to 512x512)
2) icon of the LiveReload.app application bundle
3) Mac menu bar when the app is running, in several states

The app is recognized as a revolution in web designer's workflow, so I want something bold. I also want it to look crisp and polished. Can be playful and crazy, can be clean and professional or anything in between, you decide.

The menu bar icon should match the small-size app icon and is needed in several color-coded states (see the LiveReload-example-screenshots.zip for referenced examples):

* inactive: no browser connected. Icon: grayed out or something like that (see example of how a similar system icon looks: system-wifi-bluetooth-off.png)

* active: normal state, browser(s) connected (see example of how a similar system icon looks: system-wifi-bluetooth-on.png)

* highlighted: while the app popup is open; white, displayed over the blue system highlight background (see example of how a similar system icon looks: system-wifi-highlighted.png, system-bluetooth-highlighted.png)

* change detected: displayed for about 0.25sec after each change; green right now, should be something colorful and noticeable because it's only visible for a short time

* drop target: while dragging a folder into the app's icon; blue right now, but I would like some glowing effect instead (see example: twitter-glowing.png)

Old menubar icons attached in LiveReload-old-icons.zip. Note that the height is fixed, but the width is flexible, +/- couple of pixels is no problem.

Please pay attention that we're creating an utility here, not a document app, and what Apple Icon Guidelines say about those: http://developer.apple.com/library/…Icons.html

SOME ICONS I LOVE:

* Reeder: http://itunes.apple.com/en/app/reed…5554?mt=12 (simply good icon)
* Wikibot: http://itunes.apple.com/en/app/wiki…8583?mt=12
* Divvy: http://itunes.apple.com/en/app/divv…7545?mt=12 (this is very close to our case; note how an element of the big icon becomes the small icon in menubar, on the screenshot)
* Code Runner: http://itunes.apple.com/en/app/code…5799?mt=12
* FaceTime, utility app from Apple: http://itunes.apple.com/en/app/face…7850?mt=12
* a few more random utilities: http://itunes.apple.com/en/app/snip…5721?mt=12, http://itunes.apple.com/en/app/patt…9079?mt=12
* Coda: http://itunes.apple.com/en/app/coda…1464?mt=12 (very brave and bold, and I do love it, but I wouldn't want my icon to look as abstract as that)

ICONS I LIKE, BUT NOT AS MUCH:
* http://itunes.apple.com/en/app/grap…4640?mt=12 (good icon and to the point, but too obvious and boring)
* http://itunes.apple.com/en/app/view…2759?mt=12 (nice icon, but too crowded, could use more simplification)
ICONS I DON"T LIKE - LOOK AMATEUR:
* http://itunes.apple.com/en/app/ootp…6626?mt=12
* http://itunes.apple.com/en/app/cook…6874?mt=12
* http://itunes.apple.com/en/app/swac…0209?mt=12
* http://itunes.apple.com/en/app/tank…4920?mt=12

Further requirements

The target audience is web site designers and developers.

Possible keywords to guide your thinking: refresh/reload, monitor (the changes on the file system), notify, automate, helper, utility. I encourage you to try less-obvious associations.

Read full brief
99designs is the #1 marketplace for crowdsourced graphic design,
connecting 296,632 designers with customers seeking design services.
I need something designed I'm a designer