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

40 Beautiful PSD Slicing Websites

Nifty XHTML

PSD to HTML

MediaGirl

Markup4U

markmeup

HTML Burger

Feather Code

The Designer’s Chop Shop

CSS Rockstars

CSS Ninjas

CMSthemer

The Choppr

247xhtml

9xhtml

YummyCSS

XHTML Team

XHTML Slicer

XHTML Slice

xHTML Master

XHTMLized

XHTMLiT

WPfromPSD

WPCoder

We Do Markup

W3 Markup

ThemeSlice

SnobbySlice

Slice’r'us

Slice&Go

RetroXHTML

QualityXHTML

PSD to WordPress

psdtolife

PSD to Any

PsdSlicing

Psdslicer

PSDgator

PSD2HTML

PixelCrayons

Outline to Design

• 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

I’ve been a big fan of their work for a long time, and hopefully get to attend one of their amazing galleries someday. Until then I’ll just enjoy having a bunny fish around.

The story of the bunnyfish is the sad and true story of evolution. Looking today at history one can’t wonder why this creature did not survive and prosper, one can only depend the blame on a random divine whim. However, the world can give and take, but the ideas are forever ours, and so some will create and recreate the bunnyfish, love it and cherish it, and will build a world to surround it. This is what Kozyndan are busy trying to do, and with quite a charming success.

Artwork

War of the Monsters

The Household

Bunny Blossom

Uprisings

Pacific Drift

Night Sun

Oh No, Sour Apple-chan!

Catch of the Day

More Kozyndan Resources

• Kozyndan Website
• Flickr: kozyndan’s photostream
• Kozyndan Indoorland

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

42 Web Design Companies

Merix Studio
The slide show navigation displaying their recent work is very interesting and intuitive.

Corvus Design Studio
They have a beautiful illustrative floral background that uses a lot of vibrant colors.

thepixelage
Nice attention grabbing hero shot of a Rubik’s cube. Each section is highlighted with a different color and hero shot that lets you know what section you’re in.

Third & Grand Website Design

Dizzain
Using soft oceanic imagery, Diazain pulls off a look which is very soothing and looks great at the same time.

FuzeCreative
Fuze Creative uses a natural stylistic approach and a neutral color palette. They list the step by step process a customer goes through when they use their service. This seems to be a good practice for putting customers minds at ease.

electric pulp
This site is very clear and concise, without being too bland or boring. I especially admire the textures they used.

31Three
31Three uses great imagery in their header to make this website hard to forget. This site always seems to keep popping up so it has quickly became one of my favorites because of the cleanliness and organization.

StylesLab
Nice simple one page layout from the studio that created the Vimeo website.

Sidebar Creative
Sidebar Creative has a lot of high profile clients and is always contributing to the web design community. Sidebar Creative is amongst the authors of one of my favorite CSS books, The Art and Science of CSS.

nclud
nclud uses a left aligned layout which isn’t very prominently used by modern web design companies. That’s not saying they haven’t used it very effectively allowing space between the left side of the screen and their main content area. A very talented studio that has a new company website redesign up their sleeves. I can’t wait to see it!

Kyan
Kyan is a web design & web development agency based out of the UK. Aside form the great work they do, I love their office and is especially jealous of their view from their meeting room.

FortySeven Media
FortySeven Media has a really nice array of portfolio pieces. I can’t decide if their use of reverse psychology with the “Don’t Hire Us” banner is effective or not. Well it got my attention and made me want to read it that’s for sure, so perhaps?

Web Design Beach
As you would guess, Web Design Beach uses a beach theme which is very pleasing and tastefully done.

HUGE
HUGE uses an awesome hero shot to grab users’ attention, no pun intended…HUGE has some really high profile clients which has led to a different kind of company culture.

Twiggle Graphics

South Creative
Nicely organized site, and even nicer portfolio section.

Deluge Studios
South Creative, a web design company out of Memphis, effectively uses a one page layout to display all their information. Again a step by step order process is given which customers greatly appreciate. I guess the only thing that’s lacking is a blog?

GIANT Creative
I’m really digging the simplicity and big text. also not to mention the big deer.

Substrakt
Substrakt uses the handmade and organic feel for their website. I took a look at their source code because I was really liking their slider to display featured portfolio pieces, and was pleasantly surprised by their ASCII art. Check it out to see what I mean ;)

work4sure

Doejo
Doejo uses a very cool martial arts theme, without over doing it. I especially appreciate the origami crane used as a Twitter bird.

old loft
old loft gives off a playful feel and look to their site. They have great illustrations of animals while keeping the layout easy to use.

Adam Glenn & Associates
I really like the color scheme and minimalist design. Simple and clean, yet effective.

Crome Internet
Crome Internet has a really creative footer, complete with dinosaur bones!

Agami Creative
I can never get enough of the paint brush look. Nicely done but I wish they would get away from using the default Photoshop check box shapes in their portfolio section.

LOUD! Creative
High-quality and professional web design studio out of Houston, TX. Just re-branded with new website and logo. A nice improvement!

Fresh Coat of Paint
Interesting slider using a background image and transparency to show featured projects.

Eleven Media

Carsonified
Carsonified is a small and friendly team in Bath, England. They are also the folks behind the web design conference, Future of Web Design, and a variety of other web related events and projects.

Viget Labs
Vigets Labs provide innovative solutions for success online. They have divisions that each have a unique web site and theme; including Viget Inspire (design), Viget Extend (development) and Viget Engage (marketing).

Blue Flavor
Blue Flavor is composed of a highly talented team of individuals, including web designer Jeff Croft. I really enjoy the simplicity and clarity of their site, oh and can’t forget to mention their cool robots Bart and Z-Bot.

Webson Design
Webson might not have the most innovative and exciting design, but the layout and content provide the user what they want to see quickly. Showing prices on the home page would be a disadvantage to most companies, but by having their low prices highly visible it entices customers to explore more about their services.

dibusoft
This site uses some really nice illustrations on every section of their site.

Koves Technologies

Carrot Creative
Carrot Creative has a nice warm feel to their site. They use an interesting animated horizontal scrolling technique to navigate through their sections.

383 Project

Falken Creative
Falken Creative has a classic and very intuitive layout. It is simple and easy to use that is a result from consistency.

Artifice Studios

Astuteo
Worth checking out their Free Advice Blog.

Aeon Interactive

Lifetree Creative
Lifetree Creative has one of the cleanest designs I’ve encountered. Their services section is laid out especially well and it’s nice how they include up front pricing on their pricing page.

Unit Interactive
Awesome typography and layout. Unit Interactive overhauled the whole online strategy of Woot! and all their sub brands.

This round up by Abduzeedo truly amazes and moves me. The time and effort all these remarkable portraits required is beyond my comprehension. To think these were made primarily with a graphics program and aren’t photos is astounding. A double take is needed to see if some of these really aren’t photos.

Digital Painting is an art that takes a lot of knowledge and a lot of time, and these artists sure took some time to create these amazing portraits, there is no easy job when it comes to recreating faces and you will be amazed to see these.

See all the exmples and the rest of the article at http://abduzeedo.com/50-amazing-digital-painting-portraits

Design Moves Me is the result of their advice. I poked around and took a look at what was popular and what kind of designs were getting traction and attention from these galleries. The approach I took was an artsy brush stroke organic feel with attractive bright colors. I’m still refining the design and making the blog functionality easier to use as it grows.  I’d just like to thank everyone for the saves and recognition this site receives. I promise more substantial design related articles are coming soon!

Newest design gallery additions are below.

CSSFury

CSSBake

CSSHeaven

CSS Creme