In the five and a half years of running an agency (nclud) we learned the importance of having the right environment for creatives; we understand how much of an impact the right space can make in the creative process.

We designed nclud’s HQ all by ourselves, we modified the floor plans, picked all finishes, paint, furniture, decor, all of it. We designed a workplace every one of us was proud to call our ‘office’.

There is just something about walking into work every morning and feeling like you are in the right place, a space that ‘feels’ creative.

This feeling is something wanted to mimic for the creative community in DC. Freelancers, independents startups, all should have a space they are proud to work from.

We also want to change how people look at DC, it’s not just about goverment jobs and contractors, DC has amazing creative talent and we want everyone to notice this.

Canvas will become not just a place to work from, but a place where the community meets, where events happen, a hub for creatives.

We want canvas to have the same success nclud has had. We’re following the same formula and we hope it works one more time.

We called it canvas because a canvas is where a creative begins and where eventually a masterpiece is created.

View more photographs of the canvas space.

Learn more about canvas at http://canvas.co/work

Inspired by Arley McBlain’s site and his clever use of CSS Media Queries, I set out to explore the posibilites using this technique. In my first try I wanted to use simple CSS transitions to create a compelling piece. The result is a good one, but the possibilites of what can be done are endless.

Go on… Click & resize your window.

Typekit is used for all the different typefaces, a bit of CSS3 Transforms, background transitions and bam. Done.

Simple Code

Here’s an example of how I’m making the switch from one word to the next:

@media screen and (min-width:580px) {
li.t2{color: rgba(0, 0, 0, 0);
-webkit-transform: rotateX(0deg)
}}
@media screen and (min-width:580px) {
li.t3{color: rgba(0, 0, 0, 1);
-webkit-transform: rotateX(0deg);
font-size:140%;
}
body {background: #8fc447;}
}

Pretty basic, when the browser window reaches a certain size, in this case 580px it hides one word, displays the next one and it applies font-size changes, background changes and rotations.

This experiment works best when viewed in Safari, but it should work just fine in other browsers.

So there it is, a simple experiment, but I’m excited at the possibilites.

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.

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.

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.

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: 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.

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

That’s right, as if I didn’t have enough websites to keep updated, I’ve decided to start my own personal blog in an effort to share some of my thoughts and at the same time try to improve my not so hot writing skills. In addition, this website will serve as a hub for all things me, a place to share all my daily findings, my work, photographs, etc.

Before You Judge

I’ve been working on this site for over a year. Shameful, I know, it’s what I get for not setting a deadline. At the end of 2009 I decided I had to get the site up in January of 2010, so here we are. I had to get this out there before another year went by.

The site isn’t 100% complete. There are sections of the site which are unfinished and still need improvement, the markup and CSS will possibly be re-written, so please look at it as a living thing that will be constantly changing as I go.

Stay tuned, it will get interesting around here in the next few months.

In the mean time, have a look around, and if you have any feedback, feel free to send me a note or leave a comment below.

Thanks!

Allentesque metus egestas sit sit accumsan in luctus, id tortor ornare commodo tincidunt est. netus Praesent ante. Donec facilisis lacus sed, senectus tortor eget volutpat. vitae, Donec Quisque dui eros eleifend elit feugiat malesuada pharetra. egestas. eu porttitor, Aenean facilisis. eget, cursus Mauris ac erat et sit et sit sagittis felis. eu ullamcorper mi habitant et Aliquam faucibus, morbi eros placerat condimentum egestas amet, ac wisi. vulputate quam, tempus pulvinar libero tristique fames turpis dui.

Introduction

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

1. vulputate eget, arcu
2. In enim justo, rhoncus ut
3. imperdiet
4. venenatis vitae
5. Nullam dictum felis eu pede

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Design In The Details

Quisque dui eros eleifend elit feugiat malesuada pharetra. egestas. eu porttitor, Aenean facilisis. eget, cursus Mauris ac erat et sit et sit sagittis felis. eu ullamcorper mi habitant et Aliquam faucibus, morbi eros placerat condimentum egestas amet, ac wisi. vulputate quam, tempus pulvinar libero tristique fames turpis dui. neque ultricies Ut enim vitae turpis wisi, enim neque semper. condimentum, Vestibulum orci, rutrum est sapien quam erat. amet, tempor augue, tincidunt mi, ipsum quis, leo. Nam non amet Aenean dapibus, Vestibulum magna vitae, amet ultricies fermentum, eu erat Pellentesque metus egestas sit sit accumsan in luctus, id tortor ornare commodo tincidunt est. netus Praesent ante. Donec facilisis lacus sed, senectus tortor eget volutpat. vitae, Donec

• vulputate eget, arcu
• In enim justo, rhoncus ut
• imperdiet
• venenatis vitae
• Nullam dictum felis eu pede

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.