20 Stellar Websites with Robots

Artificial Studio

Blue Flavor

Derek Allard

goodsense

growBots

Iconfinder

Made In Space

Object Adjective

Pixelbot Webdesign

PixelLab Interactive

ROBOT 44

Robot Uprising

Sushi & Robots

thoughtbot

Unstoppable Robot Ninja

Web Burza

Web Development Bits

Wired Thing

WowWee

XHTMLized

• View Demo
• Download Files

Step 1

Firstly, the markup. To make the box scalable in all directions, I’d have to use a div for each side of the box. These divs would be nested in a wrapper which determined the width. After the markup, we’re going to use CSS to add a background and position to each div in order to create a seamless border.

<div class="border-box">
	<div class="top-left">
		<div class="top-right">
			<h1>Lorem ipsum</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</div>
	<div class="bottom-left">
		<div class="bottom-right"></div>
	</div>
</div>

Step 2

Next we need to add the CSS to position the nested divs correctly to allow the border to appear. As you’ll notice that the same large image being used for each div. It is being positioned according to what part of the background is visible. Padding is used to allow space around the content.

.border-box {width: 960px;}
	.border-box .top-left, .border-box .top-right, .border-box .bottom-left, .border-box .bottom-right  {
		background-image: url(../img/bg-box.gif);
		background-repeat: no-repeat;
	}
	.border-box .top-left {
		background-position: left top;
	}
	.border-box .top-right {
		background-position: right top;
		margin-left: 10px;
		padding: 20px 20px 10px 10px;
	}
	.border-box .bottom-left {
		background-position: left bottom;
	}
	.border-box .bottom-right {
		background-position: right bottom;
		height: 10px;
		margin-left: 10px;
	}

This is another variation using a different image border.

Additional Resources

Here is a similar approach from an article on Web Designer Wall. Their sample uses negative margins in addition to padding instead, but still works flawlessly. I’ve also grouped the box selectors so that you can change the background image all in one place.

The guys over at From The Couch have a good video tutorial for rounded corners. Their tutorial also allows a box to be flexible and scalable.

Whichever one of these methods you use it should get you the results that you are looking for.

12 Creative Workplaces

Zappos
Zappos should need no introduction as they strive for the very best customer service. Their main office is located in Henderson, Nevada which is just outside of Las Vegas. Zappos is defined by it’s employees (Zapponians) who are encouraged to decorate their own workspace.

Credits: Office Snapshots

Williams Group
Williams Group is a marketing firm out of Grand Rapids, Michigan. Their space supports the collaborative nature, team structure and strong service culture of their company.

Credits: http://www.flickr.com/photos/numstead

Twitter
The Twitter office is in the SoMA neighborhood of San Francisco, CA. I like how their space is big and open which should allow them substantial room to grow. Can’t forget to mention how cool their bright green buck statue is.

Credits: Office Snapshots

Tocquigny
Tocquigny is an interactive marketing agency based out of Austin, TX. Their office provides a stimulating, collaborative environment where employees and visitors alike find themselves creatively inspired.

Credits: http://www.flickr.com/photos/tocquigny

smashLAB
smashLAB is an interactive agency out of Vancouver, Canada. I especially like the lighting and choice of accent wall color in their office.

Credits: http://www.flickr.com/photos/50388434@N00

Meebo
Meebo’s Mountain View, CA office has a nice spacious and open feel. I also like how festive everything feels in this environment.

Credits: Office Snapshots

LinkedIn
The LinkedIn office is located in Mountain View, CA and is surprisingly colorful and bright.

Credits: Office Snapshots

Ideacodes
Ideacodes is a web design firm out of San Francisco, CA. Their studio is beautifully lit and accents the furniture well.

Credits: http://www.flickr.com/photos/emilychang

The Hive
The Hive is a collaborative co-working facility in Denver, Colorado. The furniture of choice might be loud for some but to others it screams creativity and inspiration.

Credits: http://www.flickr.com/photos/luter

Front
Front is a design studio out of Belfast, N.Ireland. I like all the wood they have throughout their workplace as it evokes feelings of warmth.

Credits: http://www.flickr.com/photos/designbyfront

Digg
The Digg office has a modern industrial feel to it and is located in San Francisco, CA.

Credits: Office Snapshots

Clearleft
Clearleft has to be one of my favorite workplaces on this list. They are a talented web design studio based out of Brighton, UK. I especially like their sleek computer desks, which were custom made.

Credits: http://flickr.com/photos/andybudd

More Inspiring Workplace Resources

• Office Design Gallery
• Flickr Pool: Inspiring Workplaces
• Creative Workplaces | Inspiration | Smashing Magazine
• 10 seeeeeriously cool workplaces
• Creative Work Environments

12 Web Design Galleries

Design Meltdown
Design Meltdown is usually the site I use when I’m looking for examples of a certain design element, industry, or color scheme. There’s a lot of good examples under each category and I love how they mark all visited sites for you.

Design Snack
Design Shack is the design showcase that you control. You can sort sites by category or by color. I enjoy the way the sites are presented and the ease of use.

Creamy CSS
Simplicity is how I would describe Creamy CSS. It is a WordPress driven site that doesn’t have a lot of banner ad noise. Which allows you to focus directly on the showcased sites.

CSS Vault
While their presentation of featured sites requires more clicks than I’ d like, CSS Vault offers a lot of great design resources and articles.

CSS Mania
I often checkout their “Creme de la Creme” entries in their blog, in which they feature the top 10 most exceptional designs out of their monthly selections. There is also an available API.

CSS Beauty
CSS Beauty offers a great deal of design resources and news.

CSS Drive
CSS Drive has a nice resource section for menu designs. They offer an abundance of other design resources including news, examples, and tools.

We Love WP
Simple and easy to use gallery of sites created with WordPress. About only 1 of 10 submissions get omitted to the gallery so the quality of the sites that are showcased are superb.

CSSelite
CSSelite features only sites of the highest-quality. I really like how you can sort by category, and it’s well worth to check out the dev resources as well.

Faveup
Faveup is part of the Envato Network. It is very easy to browse with it’s nice and simple design. Besides websites, Faveup also features inspirational logos, business cards, and Flash websites.

Best Web Gallery
Best Web Gallery is brought to you by the creator of Web Designer Wall and N.Design Studio. Eventhough there is a lot of banner ad noise on this site, I really like the hoverover effect for each thumbnail. Where it shows a larger screenshot of the site.

CSS Heaven
CSS Heaven is all about Fresh and innovative CSS / XHTML web designs submitted by web designers from around the world. Again I like how you can sort the gallery by category, but wish their gallery was updated a little more often.

More Web Design Gallery Resources

• The Great Website Design Gallery Roundup by CSS-Tricks
• The Ultimate Web Design Gallery Resource — Tyssen Design
• Ranking 80 of the Top CSS Galleries

If you are new to the designer vinyl toy scene, you might want to sit back and think about the precautions of proceeding. I purchased my first Kidrobot vinly toy (dunny series 5) a few months back and I’ve been hooked on vinyl since. There are a lot of inspirational vinyl toy artists out there that create amazing works of art. But what better way to become inspired than creating your very own piece of art?

In this write up, I’m going to explain how I went about customizing my first 7″ do-it-yourself Munny. The entire process, from conception to completion, took about 2 weeks since this was sort of a trial run. I think it came out great and was a total blast to do, so I hope this inspires others to go out and try it themselves.

I apologize in advance for the crappy photos I took with my iPhone. I was on a tight time schedule and didn’t get to borrow a decent camera in time, as this was a birthday gift for someone :)

Supplies

1. DIY Munny
2. Pencil and Paper
3. Masking Tape
4. Krylon Spray On Primer
5. Krylon Crystal Clear
6. Acrylic Paint and/or Spray Paint
7. Various Sized Paint Brushes
8. Permanent Paint Markers
9. Large Foam Base
10. Sticks or Dowls of some sort

DIY Munny Instructions

1. Purchase you choice of size & color Munny. They come in small (4″) & large (7″) sizes, and several colors including white, black, pink, blue, and glow in the dark.
2. Download a Munny Template so you can sketch your idea out on paper. Very much like designing things for online, if you sketch out your ideas first you can pick and choose your best ideas without having to come up with things on the fly.

   

3. Now that you’ve created a personality for your Munny, it’s time to prep him by giving him a good rinse off with soap and warm water to remove any remaining oil and grease.
4. Carefully remove the head and arms of your Munny and mask off both parts of where the joints meet with your masking tape. This will keep primer and paint off the moving parts and to make it easier to put him back together when you’re finished.

   

5. Having a foam base to stick your Munny parts makes it a lot easier to handle your Munny while you prime and paint. It keeps you from handling the pieces directly and smudging your coats.
6. To begin with, spray on a light coat of primer and wait for it to completely dry. Spray on a couple more heavier coats of primer and be sure to allow enough time to dry between coats to avoid drips. This will allow your paint to stick better and make your top coat look even nicer. I used gray Krylon spray on primer and like it a lot. It dried quickly and smoothly with no runs. Others have also used Gesso primer paint or even auto primer with success. Also do this outside in a well ventilated area please!

   

7. Now that your primed Munny is nice and dry, it’s time to bring him to life! With a pencil, begin to sketch out the design you mocked up directly onto your Munny. With masking tape, mask off any parts for a straight clean edge.

   

8. I used student grade acrylic paints as my medium and they worked fine for the design I created. For finer details people use a variety of mediums including oil based paints and air brush. I learned quickly that patience and a steady hand is they key when painting your Munny. Consider using 3 – 5 coats of paint to ensure that your Munny is coated evenly. It’s better to use a bigger brush with long strokes over large areas to avoid uneven brush strokes. You shouldn’t worry too much about minor unevenness and ridges because it should even out after you spray the clear coat on. I also used a Sharpie paint marker to make outlines and accent smaller details.

   

   

   

   

9. Now your Munny is all painted and dry, so it’s ready for its protective clear coat. Several coats of clear coat will keep your paint from chipping and will keep it from being sticky. Krylon spray on clear coat comes in a variety of finishes depending on how shiny or matte you want it to look. Since the original toys have a satin non-shiny finish, I opted to use the Krylon Satin Crystal Clear finish. To start out, it’s best to cover your Munny with a couple of light coats first to seal the paint. It is important that you wait for it to dry and very gradually apply heavier coats to avoid running and spots. If you apply the coats too heavily to being with, it will cause discoloration with your paint. Also note that if you used any sort of markers avoid any clear coat that contains Acetone because it will cause it to bleed. Again do this step in a well ventilated area, preferably outside.
10. Allow a day for your Munny to completely dry, and after that he should be ready to share and enjoy!

    

    

    

    

This is just one of many ways to customize your Munny. Depending on how crazy you want to get, you can completely overhaul the base and use modeling clay or even cut out parts of it you want to change. There’s a lot of really cool examples out there done by really talented people. I’m sure my example doesn’t stack up anywhere near the better artists out there. So I’m sure this won’t be my last Munny, because it was just too much fun creating my very first custom vinyl toy. Please feel free to share any of your newest creations!

More Munny Resources

• Kidrobot MUNNY Forum
• Munny Template
• Munny Flickr Pool
• 30+ Incredibly Beautiful Custom Designer Toys
• Amazing Toy Art: Munny
• Mega Roundup of 60 Cool Custom Designer Toys
• Custom Toy Lab Munny Category

What’s really nice is you don’t have to sign up to use the service. Just simply enter your user name, wait a few seconds and it graphs all of your Twitter stats. My up to date stats are below and you can see where my Twitter usage dropped way off from my first time using it at SXSW 2008. Help motivate me to keep increasing my stats by adding me. ;)

Some other neat statistics that are available are trends and stats for the whole Twitter universe. This allows you to observe stats like top 10 Twitter apps and subjects being Twittered about. Check it out and see how you and the rest of the world spends time on Twitter.

Photo by Fion Byrne

Out with the old and in with the new. What better time than New Years to revamp your whole online presence? My name is Roy and I’m a Web Designer from Houston, Texas. Yeeehaw! (totally joking about that “yeehaw” part, no one really says that here…)

My portfolio has gone unseen & thoughts have gone unheard…I am motivated by a variety of everyday things, especially design. Even ordinary things translate into design for me. This is the reason design moves me. Design is truly everywhere and is in everything. Anything you can touch, feel, smell, or hear has some aspect of design applied to it.

What will be included in this blog is anything that is design or having anything to do with design. I hope you can keep up with what I have in stored for all of you. I especially hope I can inspire & motivate some of you as well. And remember the time is now, don’t let it pass you by!