Keys That Click - Minding your own design business and other observations

Archive for the ‘Design’ Category

A Creative Moleskine Pen Holder

Posted in Design, Miscellaneous, on May 9th, 2010 by Carlos.

When I picked up a new Moleskine notebook last week, I discovered a problem that I didn’t encounter with other notebooks I used in the past – I had no where to put my pen! Previously I had always used notebooks with spiral coils which would conveniently house my pen when not in use. Given the fact that the clip on my pen is oddly shaped, I couldn’t just clip it on the front cover, well not without it creating a massive bump and causing my self-diagnosed OCD to kick and drive me nuts, that is.

I hunted online for some solutions which included using leather straps, metal clips or even duct tape. Then I came across Kate Lightfoot’s blog, ScarlettCat,  where she has a quick how-to on creating a simple pen holding solution for your Moleskine. Her solution includes using a hammer, a nail, a button and a needle and string. As you can see in the photo below, the button is used to hold the elastic strap in place. It still keeps your Moleskine shut, but also gives you a place to put your pen!

With a little determination, but more importantly, a lot of help from my wife (I can’t be trusted with a needle and string), I put my brand new Moleskine under the knife nail. It was a surprisingly quick and easy exercise, even with having to restring the button after my first attempt at it, which left the string bound too tightly and didn’t leave enough room for the Moleskine’s elastic strap to fit underneath! That’s when my wife took over and did it the right way. In fact, I think it took longer for me to decide on what button I was going to use!

Yet Another Social Media Icon Pack, but the first by Keys That Click

Posted in Design, Freebies, on April 28th, 2010 by Carlos.

I know the web is quite saturated with social media icons already, but given I still had to wind up making my own for this site because I couldn’t sift through the thousands to find a style I liked, I thought I’d share the ones I made, plus a handful of others I decided to add. My other motivation is that it still frustrates me when I find a set of icons that look good but are for personal use only. So, I am making this set available free for both personal and commercial use. You don’t have to email me for permission. If you do have it in your heart to let me know where you are using them, that would be great, as I’d just like to see them in action! If there’s interest in these, I’ll look to add more icons, as well as sizes.

I hope you enjoy them! Download the Keys That Click 28×28 Social Media Icon Pack zip file.

My Very Own Panic-inspired Status Board

Posted in Design, on April 13th, 2010 by Carlos.

[Update: You can check out a Live Preview of the Status Board by reading my post, Panic-Inspired Status Board Live Preview Using HTML5 and contentEditable.]

I recently picked up a beauty of a monitor (Dell U2711) which left me with my 24″ Samsung looking for a home. Given that the displays are very different, I wasn’t truly digging the two monitor side-by-side idea, but did want to do something with it so I would have it handy in case when having two monitors makes life easier (working with presentation documents seems to make me wish I had the second monitor).

Anywho, I started to think about the Status Board that Panic created and blogged about a while back and thought I could do something similar to replace the white board I have next to my desk. In fact my second monitor is currently blocking the view of my white board, so I only found it appropriate! I basically wanted a glorified to-do list split up by clients, while having some handy information at my fingertips (time, weather and Twitter feeds). I had and still have some delusions of grandeur which would make this thing fully AJAX enabled where I can drag and drop items and lists, but I had to start somewhere, and I’m not quite there yet. The DIV’s that contain the lists do expand as you type more in, and the DIV’s themselves will automatically position them self in the page columns as the lists grow. It is by no means done, as I have several more tweaks I’d like to make to it.

I will likely break out how I created the Status Board over a few blog postings so I don’t glance over too many of the details, but here’s a quick overview of the elements I used to create it:

  • The Status Board is really just a HTML page set to full-screen at 1920×1200 resolution . I had to use Chrome for this as other browsers/methods failed with the two displays. I also wanted to keep it based on Webkit, so I didn’t look at any Mozilla alternatives.
  • Several helpful jQuery scripts and plugins including:
    • The really nifty HTC-esque clock and weather that is displayed in the corner (jDigiClock)
    • Real-time Twitter feed using Juitter
  • HTML5 properties such as contentEditable to make the lists editable right on the screen, and localStorage to keep a copy of the list stored on the local machine (really only did this as I need some assistance with saving it to a mysql database)
  • CSS3 layout properties such as columns, rounded corners, opacity and shadows

I must say, designing a site that you can control the audience, browser, resolution – everything – was fun, but surprisingly challenging. Old habits die hard, I suppose, but I really shouldn’t get use to developing sites for only one platform.

I’m hoping that this will provide a clever use of a secondary display and that I actually do wind up using it! I’ll do my best to share my findings as I enhance the web app further, at the same time asking for help if anyone is willing to provide it!

Karvt Introduces Wooden MacBook Skins

Posted in Design, on April 8th, 2010 by Carlos.

Karvt is releasing a line of wooden skins to slap on your MacBook’s for an extra bit of style. What’s neat is that they’re actually made from real wood. I personally like this Bamboo Caramel colour. There are also a few Artist series options that feature some nifty designs on the wooden backgrounds. Here’s a bit from their About page:

Our skins are personally hand-crafted and offer our customers a simple and effective way to completely remodel their computer. Our skins are made of 100% real authentic wood that use a professional grade 3M backing adhesive that sticks perfectly to your notebook.

[Karvt via Engadget]

Designers Toolbox – Die lines, contracts and more!

Posted in Design, on March 26th, 2010 by Carlos.

Here’s a great resource site for you designers out there. Designers Toolbox includes both free and paid resources that you will no doubt find useful.

Perhaps one of the coolest things offered on this site (and it looks free so far from what I’ve been seeing) are die lines for various brochure sizes/foldings, as well as size templates for postcards, business cards, DVDs, etc. It’s nice to have these things all together on one site.

Paid resources include country maps (something that I always find myself needing from time to time), and contracts and forms. The contracts and forms are templates that you can customize for projects and clients you are working with.

The site is definitely worth checking out! [Designers Toolbox via 1stwebdesigner]

More Inexpensive Resources for Designers – Envato Marketplaces

Posted in Design, on March 19th, 2010 by Carlos.

Earlier this week I mentioned MediaLoot, a resource site for designers. Thanks to commentor Don, I checked out his recommendations – the Envato marketplaces. Envato runs many sites that you may have already heard of like psdtuts+. Their marketplace sites are a series of sites that offer design resources for many applications. GraphicRiver is a marketplace for layered Photoshop files, vectors, icon packs and more. Its sister sites like ActiveDen sell Flash and Flex resources, while others are dedicated to audio, video, 3D and more.

The prices for the their resources start at $1, $2, or $4 depending on the marketplace. For example, a site theme purchased from the ThemeForest marketplace starts at $4 seeing as how the files you’d be purchasing there are more sophisticated and involved. To get the lowest possible price, you need to prepay to add money to your account. Seeing as your account works across the various marketplace sites, you’re very likely to find things to spend your money on. For whatever reason I had been stuck on iStockphoto for quite some time even to buy vectors, but I’m starting to realize that there is a lot more choice out there at much more competitive prices. [Envato marketplaces wiki]

MediaLoot – Offering Premium Graphic Design Resources

Posted in Design, on March 17th, 2010 by Carlos.

I’ve run across a premium design resource site called MediaLoot that seems to provide an interesting value proposition. It is a subscription-based site (currently $14/month, though they say it will go up to $29/month) that offers graphic resources like textures, brushes, icon sets and even templates to its paying members. They do not limit how much you can download in a given month (which most other subscription services do), so theoretically you can sign up for a month, grab everything and cancel. But that wouldn’t be very nice – and besides, they are promising continual additions so you will have more and more reason to stay subscribed. I’m happy to see a company offer something like this because it really means that they will need to provide a quality product to keep its members interested. And I hope that it doesn’t get abused so that it forces them to change their model.

If you start to compare this against other subscription based services like istockphoto.com, MediaLoot is certainly a bargain. However at the moment their resource library isn’t very large and of course does not come close to the size of the istockphotos of the world. But that is part of their draw as they claim they will offer only premium resources, so you don’t have to sift through hundreds of sub-par images/graphics to find what you need.

Given I easy spend more than $14/ month on istockphoto.com, but could never justify their restrictive and expensive monthly subscription, I might give this one a shot. There are already several goodies that I see there that I could put to use in my projects. It will be interesting to see how this community grows and what it has to offer down the road.

Go check out their site to see what they have to offer. They also have some freebies that you can use as sort of trial-run. [MediaLoot]

17 Logo Design Case Studies Compiled by DesignM.ag

Posted in Design, on March 17th, 2010 by Carlos.

DesignM.ag has compiled a list of 17 case studies on the process of logo design. The logo shown above is that for Vivid Ways, designed by Chris Spooner. It’s interesting to see the steps taken to wind up with the final product. This makes me want to work on some new logos! [DesignM.ag via Webdesigner Depot]

Free Web Icons, from Web Icon Set

Posted in Design, on March 16th, 2010 by Carlos.

Here’s a cool site, Web Icon Set, that offers up free web icons for use in your design projects. I looked at a few and they seem to be available for both Personal and Commercial use, but I recommend having a look yourself just to be sure. Visit the site to download various sizes and styles in PNG format. [Web Icon Set via Smashing Magazine]

Panic’s Status Board

Posted in Design, Uncategorized, on March 15th, 2010 by Carlos.

WANT. I think I’d be more productive with one of these. Though instead of bus schedules I’d have reminders to eat lunch and go outside and see daylight. [Panic Blog via Daring Fireball]