Got Inspired by this video http://vimeo.com/​30578363 and decided to shoot some short clips around the studio and on the streets of DC/Metro using my shinny new iPhone 4S.

Spent an hour or so editing the clips on iMovie. The result is not as smooth as I’d like it to be, but it’s my first time shooting with a 4S and I must say I’m impressed with the quality.

I will definitely be trying this again! Next time I’ll have a plan.

The In-House Designer

Due to the varying nature of business models, responsibilities appropriated to the in-house designer varies greatly from company to company. On the most basic level, however, an in-house design position includes meeting with internal and external customers, creating concepts, mocking up proofs, presenting those ideas to the team, executing the overall layout, processing proofs, production of final files, archiving of native and final files, and updating all projects as needed. Further responsibilities can also include acquiring bids from printers, illustrators, photographers, and other freelance designers, press checks, project management, and image or topic research.

The upside?

• The team succeeds or fails as one. Everyone is in the foxhole together. Working in such close and constant contact propagates a feeling of camaraderie with coworkers. The team environment comes with a vested interest in the company as a whole and includes everything the company releases for public consumption.

• The in-house designer is often more involved with varying projects which don’t necessarily fall under the “design umbrella� as well as the conceptual or brainstorming process than a freelance designer may be. Fulltime, in-house designers are often valued by other departments as an equal team members whose opinions carry more weight. With this level of involvement, the designer can take pride and ownership in their work and give them a receive a true feeling of career fulfillment which some freelance designers find lacking in their day-to-day transactions.
• There is something to be said for getting to know a brand and style so well the designer becomes the go-to style expert. Once the brand requirements are second nature, a new layer of design can begin. On this level, constantly refreshing and updating projects or pages is an art in and of itself. Success as an in-house designer often means appreciating the little things, and understanding that small changes make big differences.

• And most obviously, a consistent paycheck is quite favorable and reassuring. The security of knowing that the next paycheck is only a few days away helps to keep many-a-graphic-artist from starving, not to mention the added benefit of paid vacations and sick leave. Many companies also subsidize part of the employees’ health, short-term and long-term disability insurance, and provide a group retirement plan (in some cases, they even match the employee contribution up to a certain percentage) and reimburse continuing education efforts.

The downside?

• Working within the same style can feel repetitive, and it is difficult to keep the design feeling original and fresh.

• Organizations sometimes confuse design with production, and designers are often expected to simply execute what has been dictated.

• The constant proximity to coworkers can be difficult if the tense and subjective design environment causes personality conflicts.

• Most positions are salaried instead of compensated on a per-hour basis, and the modern day in-house designer will be working far more than the standard 40-hour week without any additional monetary gains. The economy also plays a role in the designer’s day-to-day workload. When companies down size, the responsibilities of the remaining staff are exponentially increased.

• Typically, an in-house designer makes less per hour than their freelance counterpart, they have to work more and take home less. This trade off is made to finance the aforementioned benefit package.

The Freelance Designer
Freelancing truly requires a jack-of-all-trades mentality because the designer’s success or failure depends on how well they advertise and sell their skills long before the actual act of designing is able to begin. In addition to the networking and marketing necessary to grow a client base and build lasting business relationships, the freelance designer is also responsible for their own administration and accounting needs. The freelancer must also be comfortable creating and writing bids for projects, presenting proposals and ideas, and be available to the client at all times. Once a client and project have been won over, the actual design work can begin and includes spec and design work, reworks, proofs, production and archiving.

The upside?
• A freelance designer gets the luxury of variety. The variety of projects, styles, clients and hours is a great way to keep day-to-day work and a portfolio fresh impressing.

• There is great independence in working for one’s self. The designer may not be calling all the shots (after all, it is the client’s project), but they are definitely at the helm and as such can create a work environment, flow and process of their choosing.
• Repeat business is the equivalent to money walking in off the street and is a marker of a job well done. The in-house designer does not get paid per project or hour, so repeat business doesn’t always feel like a positive, but to the freelance designer it means dollar signs. The trust a client shows by returning validates the designer’s design skill and business acumen. As client lists grow, the designer is able to spend less time on marketing and advertising and more on the design work. As these relationships solidify and grow, natural working relationships and rhythms emerge and speed the process as well as underscore the client’s confidence in the designer.

• The ability to truly control one’s income is quite empowering. Freelance designers can make as much or as little as they want by effectively managing time to achieve whatever goals they may choose.

The Downside?
• All business ventures have highs and lows, emotionally and economically. A freelance designer must be prepared to withstand inconsistent paydays, delinquent clients, and poor communicators.

• Building relationships, winning projects, and proving not only design agility but also professionalism are all important and time consuming pieces to the freelance puzzle. A considerable amount of time and energy must be devoted at the outset of a freelance career to things not necessarily design- related but instead to tasks that don’t qualify as billable hours which makes a long day feel even longer.

• When bidding on projects, the designer must track the pulse of the economy and constantly price themselves within the competitive ballpark without under or over charging for their services. Charge too little and the quality of work may come into question, charge too much and business may be driven away.
• There is not a benefit package waiting to backup the designer should they fall ill or take a holiday.

When it comes down to it, every position has both positive and negatives. The trick to finding your niche in the design community is to be perfectly honest with yourself about your strengths, weaknesses, and career expectations. Armed with the guide above and the career goals you’ve set for yourself, you should have all tools you need to get started on the right path for your future.

First, if you haven’t checked out Designers.MX yet I suggest you head over there now. They have wonderful mixes with beautifully designed covers by fellow designers, a match made in heaven! Truly fantastic. I even contributed my own mix.

Before I tell you how to set up your DesignersMX Desktop App, let me show you what it looks like:

We are basically taking advantage of the beautifully optimized mobile experience and serving it on the desktop as an app. Isn’t it awesome?

Set Up Your Designers.MX Desktop App:

Download and install Fluid (Older Version with all features at http://fluid.en.softonic.com/mac), launch it and set the URL field to http://designers.mx/, Give it a name (I chose DesignersMX) and Click “Create�.

Once you receive the success message, launch the app. Go to the App’s menu, set the User Agent to “Mobile Safari� and refresh (Command+R).

You should be able to see the mobile optimized version of DesignersMX at this point. Adjust the window to the width/height you prefer.

Go to the preferences menu.

Click on appearance and change window style to “HUD (Black) and re-start the app.

The window chrome now matches the color scheme of the site:

At this point you already have a nice DesignersMX app. If you prefer having a floating window on your desktop you are done… However if you are like me and prefer menu bar icons follow the next step.

Go to the app’s menu, select “Convert To MenuExtra SSB� and click ok.

The app should restart and you should now see a menu bar icon on your toolbar like so:

Voilà!

You now have a beautiful Designers.MX Desktop App.

Thanks go to Cameron Moll for providing the soundtrack while I wrote this blog post, to Designers.MX for providing an awesome service and to all those that have contributed awesome mixes and covers.

Cheers all, enjoy!

These past few months I’ve been exploring CSS3, trying to learn some of it’s new features and getting a feel for which browsers support it. A few weeks back I put out my first experiment exploring @font-face and transforms. This time, I set out to experiment with border-radius, and what I thought was going to be a boring little project turned out to be quite interesting.

Our Solar System in Modern Browsers

Take a look for yourself, using only CSS and HTML I managed to create a small simulation of our solar system.

For a better experience please view it on Safari, under chrome the animations lag for some reason.

The Details

Orbits and planets are all created using border-radius, while the animation is done via –webkit animation properties and transform. Below are examples of the code used.

border-radius

ul.solarsystem li.sun {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Animations & Transforms

ul.solarsystem li {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
}
ul.solarsystem li.earth span {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:moon;
}
ul.solarsystem li.mercury {-webkit-animation-duration:5s;}
ul.solarsystem li.venus {-webkit-animation-duration:8s;}
ul.solarsystem li.earth {-webkit-animation-duration:12s;}
ul.solarsystem li.earth span {-webkit-animation-duration:2s;}
ul.solarsystem li.mars {-webkit-animation-duration:20s;}
ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;}
ul.solarsystem li.jupiter {-webkit-animation-duration:30s;}
ul.solarsystem li.saturn {-webkit-animation-duration:60s;}
ul.solarsystem li.uranus {-webkit-animation-duration:70s;}
ul.solarsystem li.neptune {-webkit-animation-duration:100s;}
ul.solarsystem li.pluto {-webkit-animation-duration:120s;}

@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) } }

Animations and transitions will only work on –webkit browsers, other modern browsers will display a static version of the solar system rendered using border-radius, with the exception of IE of course.

Internet Explorer’s Parallel Flat Universe:

Yep, in the eyes of Internet Explorer our universe is flat and boring.

So there you have it, I think it’s pretty impressive what we can accomplish with a few lines of CSS these days.

Oh, and yes… I kept Pluto ;-)

Who doesn’t love looking at clean, simple, beautiful graphic design? I’m obsessed with discovering great talent and great design. Ever since I can remember wanting to be a designer I’ve collected and/or cataloged bits of designs I find inspiring and useful. Like many of you however, I’ve struggled to find the perfect solution for my image bookmarking needs.

Over the last few years I’ve been using web based services for my design bookmarking, and while there are some good solutions out there, non are perfect for me.

The Problem with Current Solutions

My biggest issue with current image bookmarking services is their lack of simplicity, both from a design perspective and the features they offer. All of these services ffffound, imgspark, vi.sualize, emberapp, while good solutions for most, are just not what I’m looking for.

I want a service that let’s me focus on the images themselves and not it’s related content/metadata. I don’t want to see how many people liked a specific image, or if it has other related images, or how many tags it has etc. I’m there to consume the visuals, the image!.

A Note on Dropular

Dropular is an image bookmarking service that showed promise, it had a simple interface and a very elegant solution for bookmarking images via a simple bookmarklet. I started using the service last year and I finally felt I had found the perfect solution. That is, until they destroyed any confidence I had in them. Not only did they shut down for several months promising a new and improved service, but ended up launching a completely useless website. I respect the people behind dropular, but they really let me down.

After the dropular fiasco, I figured it was time to find my own solution.

Enter Visual Bits

Visual Bits is my own personal image bookmarking website. I had one goal in mind when setting it up, it needed to be simple, it needed to feel simple.

The site is powered by tumblr and it’s using a custom tumblr theme I designed that basically eliminates any other piece of data associated with the image and leaves the image and source intact. No related images, no tags, no followers, no “likes�, etc.

It’s perfect.

Flavors.me is a service that lets you to create your own personalized webpage, it gathers your content from various social media sites and displays it nicely and neatly in a one-pager. In their own words “Ideal for personal homepages, lifestreaming, splash and microsites, celebrity fan pages, commercial promotion, brand marketing – and everything in between.�

Now this isn’t something new, there are plenty of services out there that offer the same functionality, however, none of them offer a simplistic approach like flavors.me does.

My Flavors.me Page

Within minutes of creating an account I was able to put together my own personal customized webpage. The beautiful thing about is it’s easy of use. Basically everything you need to do to customize your page is accessible via a single panel. Within this panel you can select services you want to connect to, you can add a blurb about yourself, chose a layout you like, upload a background image, set your color scheme and choose the typefaces you prefer.

It’s so simple and yet you have just the right options you need to create something compelling. Kudos to Rob Morris and company for putting together an excellent service.

What are you waiting for? Go give it a try.

The last few months have been pretty exciting, with all the talk about new CSS3 features and how browsers are adding support for them, it’s a great time to be a designer for the web. It’s a lot easier these days to experiment with different typefaces, layouts and techniques previously not available.

Take a look at the image below:

No, it’s not a poster. It’s a web page completely designed using basic CSS and new CSS3 techniques. Pretty impressive right?

How’s it done?

Pretty easy actually, I used basic CSS positioning and some of the newer CSS3 features to put it together. Below are a few samples of the code so you can get an idea:

@font-face

@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('Chunkfive.eot');
	src: local('ChunkFive'),local('ChunkFive'),
	    url('Chunkfive.woff') format('woff'),
	    url('Chunkfive.ttf') format('truetype'),
	    url('Chunkfive.svg#ChunkFive') format('svg');
}

Transforms

-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);

Text-Shadows & Box Shadows

text-shadow: 2px 8px #b5c1b8, -1px -1px #fff;
box-shadow: 4px 6px #b5c1b8;

The font used is called Chunk, a nice bold slab serif. The text is an excerpt from the Universal Declaration of Human Rights.

Works in these browsers

• Firefox 3.6
• Safari 4
• Chrome 5
• Opera 10

IE can suck it.

So there it is. Nothing out of this world, however I think it shows the potential of CSS specifically the potential in using new CSS3 features.

In the words of Matt Brett:

“if you showed me that 10 years ago, my head would have exploded!�

Indeed. We’ve come a long way.

Should be a damn good time!

On a side note

Make sure you check out the code behind the beercamp site, No images! all HTML5 and CSS3. Created by Dave DeSandro. The dude is mad I tell you, MAD!

They say that as a designer you should surround yourself with things that inspire you, whether they are books, posters, music, magazines etc.

A few days ago while going about my daily browsing and came across a beautiful quote:

“Design is an opportunity to continue telling the story, not just to sum everything up.�

— Tate Linden

I quickly found myself searching for more quotes about design, there are tons of really good ones out there. After a while I started thinking, wouldn’t it be great if we could display these quotes on our computers in fullscreen mode? maybe as a screensaver or an interactive slideshow?

I’m all about surrounding myself with things that inspire me, things that help set a mood and get you thinking. Over at the nclud studio we have a set of LCD screens where we display client work during meetings or sometimes use to play Mario Kart. When not in use the screensavers come on and I figured, let me setup a system that allows us to display these inspiring quotes in full screen mode, as a screensaver. What better to get you in the mood when designing than reading design quotes from some of the great minds of past times and our time?

Enter Design Quotes

Head over to http://neography.com/designquotes/ and take a look for yourself.

It is a web page where quotes appear one after another at random, I accumulated just under 200 quotes and with the help of a WP plugin and a bit of jQuery I was able to put the visualzation together.

How to set it up as a screensaver

Mac users can use IdleWeb, a nice little app that allows you to set up any webpage as your screensaver. Just make sure you set it up in “kiosk� mode within the screensaver options.

• Download IdleWeb Snow Leopard compatible: IdleWeb 2.1
• If you are not on Snow Leopard yet, you can download an older version here: IdleWeb 2.0 or use WebSaver.

There are similar options for windows users, although I haven’t tested any of them.

Another option is to use browser plugins to set the browser window in fullscreen mode, again I haven’t tried yet, but I’m sure it’ll work just fine.

Features & improvements to come:

• More Quotes
• Ambient Sound
• Prev/Next links
• An RSS Feed
• iPhone optimized version
• Color Schemes

So there you have it, enjoy and if you have any comments or suggestions feel free to let me know.