DesignM.ag

30 Beautiful Multi-Colored Websites

Brant Wilson — Mon, 06 Feb 2012 16:52:13 +0000

In this post we’ve compiled some well designed colorful websites. Enjoy!! If you like these designs you might also want to check out our previous posts below.

Examples of Solid Colors in Web Design

Examples of Orange in Web Design

Examples of Purple in Web Design

besser-leben-mit-lehm

baucargo

art4web

werbeagentur-kopfnuss

Advertise here with BSA

28 Cute Children’s Book Illustrations from Digital Artists

Jake Rocheleau — Wed, 01 Feb 2012 22:36:16 +0000

Advertise here with BSA

Illustrators have found a nurturing community on the web where they can share awesome work. Artists drawing for children’s books were almost always done by hand. But with the popularity of Adobe software and the many tablet devices it’s easier than ever to move your work digital!

In this design showcase I’ve put together 28 heartwarming illustrations from Dribbble artists. These are all featured from many different children’s books and relate to individual projects. If you enjoy any parts of our collection of have example illustrations of your own please let us know in the post discussion area.

Book Leaf Cover

A Sandman Story

Wildlife

Pop-up Book

Illustration for Book Cover

Snowday Recon

Picky Alligator

Phil Lately

Sea Turtle

Behind the Moon Concept Art

Snuglug

Land of Nod

Hansel and Gretel

Super Hero Kids

Captain Hook

Rocket to Planet Charlie

Pirate Stripes

Run Boy Run

Halfway Herbert

Spot Dog

Norb’s Shakes and Sweets

Cat Meets a Baby Seagull

You Can’t Eat That

Best Friends

Picture Book City Detail

Kitchen Detail

Ghouls

Bear with Coffee and Croissant

Advertise here with BSA

40 Negative Space Logo Designs

Brant Wilson — Fri, 27 Jan 2012 14:51:12 +0000

Advertise here with BSA

In this post we have collected 40 well design negative space logo designs. Enjoy!! If you like these logo designs you might also want to check out our previous posts below.

40 Creative Logo Designs

28 Clean and Creative Logo Designs

24 Clever and Unique Logo Designs

Three Nuts General Contractors v.2

Texas Wine Logo Design

SHIFT

Dolphin & Seal Logo Designer

Negative Reality Logo Design

Mouse Universe Logo Design

Fantom

The Small Garden Logo

Banana Bird

Wineforest

Shift logo

Beat Fettish – Final Logo

Advertise here with BSA

Logo Design: 36 Emblems & Badges

Brant Wilson — Tue, 24 Jan 2012 16:48:41 +0000

Advertise here with BSA

In this post we have 36 well design and emblems & badges. Enjoy!! If you like these logo designs you might also want to check out our previous post below.

28 Clean and Creative Logo Designs

40 Creative Logo Designs

Tokyo Bicycles

Personal L ogo V.1

Growcase Simplexity Service

Assembly 36

River Jam Soccer Tournament Logo

Lavender Fastener Company

Van De Laar Automaten

Grass Roots Lawn Service

Web Machine

Baggie’s Brew Pub Logo V3

Advertise here with BSA

10 Essential Guidelines for Freelance Collaboration

laura — Thu, 19 Jan 2012 15:22:47 +0000

Advertise here with BSA

Freelance collaboration is on the rise. Increasingly, teams of freelancers are now doing the work that in-house departments used to do. Graphic designers are now working on teams with writers and programmers.

But many freelancers are used to working alone. Collaboration definitely requires freelancers to make a few adjustments.

In this post, I’ll provide ten essential guidelines to help you put the pieces together for freelance collaboration. If you enjoy this post, you may also enjoy reading 15 Questions to Ask Before Collaborating.

Guideline #1: Do Your Homework

In the same way that you would research a potential client, learn all you can about a potential collaborator. Study their LinkedIn profile and other online profiles. Read any testimonials and recommendations they have received to see what past clients think of their work. Review their portfolio to get an idea of the type of work they produce. Remember, if you work together on the same project, your reputation will become linked with that of your collaborator.

Guideline #2: Provide Details

Once you have selected a freelance collaborator, provide them with as many details as you can about the job. Be specific. Remember, if the freelancer is working in a different specialty from your own, they may need entirely different information to get their job done. Give them an opportunity to ask their own questions and make sure that they get their answers. The more your colleague knows, the better able they will be to fulfill their part of the project.

Guideline #3: Use a Contract

Most freelancers understand that it’s important to get the terms of an agreement with a client in writing, preferably in contract form. However, when the project becomes a collaboration you now have an additional agreement to consider. First, there’s the agreement between you and your client. And second, there’s the agreement between you and your fellow freelancer. The second agreement should be handled as carefully as the first–get it in writing.

Guideline #4: Take Advantage of Online Tools

There are many online tools that can make managing a group project easier. Take advantage of them. Don’t try to reinvent the wheel and create your own online tools from scratch. This will only eat into your project time and cause additional frustration. Here is a list of collaboration tools, but there are many others to choose from.

Guideline #5: Designate a Lead

Whenever a group is responsible for a project, someone needs to act as project lead. If you’re the project lead, your job is to make sure the project keeps moving forward and to coordinate all the various players. If you’re not the project lead, your job is to make sure that your parts of the project are on schedule and make the leader aware of any needs that you have to get your job done.

Guideline #6: Exercise Respect

Be sure to show plenty of respect for your freelancing collaborator. Remember, you hired them because of their skills and abilities. Treat them like the professional that they are. Don’t try to rush them unnecessarily or underpay them for their part of the work. If credit is being given for the project, make sure that their part is acknowledged. Your goal should be to make working on the project a positive experience for both of you.

Guideline #7: Communicate Well and Often

Adding another person to a project adds a whole new dimension. Now, not only must you communicate regularly with the client, you must also communicate regularly with your collaborator. You may even need to schedule meetings from time to time. Good communication is an important part of a successful project. Allow for some extra time in your project plan to answer additional emails and phone calls.

Guideline #8: Keep Adequate Records

All freelancers should keep good records. After all, when you freelance you are basically running a small business. All businesses need good records. However, when you collaborate your recordkeeping impacts not only your own business, but that of your collaborator. Make sure to keep copies of all records that pertain the project including meeting minutes, important communications, project expenses, and any payments made.

Guideline #9: Pay Promptly

If the client is paying you a single flat fee for the project and you are responsible for paying the team members, be prompt. Don’t make your fellow freelancers wait to get paid for their part of the job. Nothing can sour good morale like late payments. Besides, you like to get paid on time for your work and so do your colleagues.

Guideline #10: Be Open to Feedback

Feedback is an important part of any project. No matter how well the project went, there is always some room for improvement. Ask for feedback from both your fellow freelancers and your client. Also, make sure to pass along any relevant feedback from the client to your team members.

Your Turn

Have you been collaborating on projects with other freelancers? Add your own tips and suggestions in the comments.

Image by Genista

Advertise here with BSA

Showcase: 33 Examples of Brilliant Industrial Photography

Jake Rocheleau — Mon, 16 Jan 2012 16:51:15 +0000

Advertise here with BSA

The Industrial Revolution is a significant part of our history on this planet. It seems like a long time in retrospect, but only 100-150 years ago we were just kicking off the creation of American corporations and factories nationwide. Now we can see much of the remnants in heavily populated city areas.

In this showcase I’ve put together 33 stunning examples of industrial photography. These pictures capture the essence of our industrial society as we move forward in the 21st century. These are very inspiring photographs and really make you think about our deep, rich history in these lands. As always let us know your thoughts or ideas in the comments discussion area.

Industrial Pipes

Sunset Over Industry

Hemp Factory

Factory Units

Industrial Patriot

Sugar Factory

Abandoned Factory – Inside

Exterior Industry

Abandoned Factory Mills

Factories at Urumqi

Industrial District, Tokyo

Cloud Factory

Train Tracks

Domino Sugar

Industrial Complex

Ostrava, industrial

Metal Factory in the City

Industrial Landscape

Jersey City Industrial Park

Railroads Crossing

Sunrise on Sleepy Industry

Port of Richmond

Industrial Age

Deep Dark Trainyard

Port of Long Beach

Some Industrial Stuff

Smoke Stacks @ Sunset

Bethlehem Steel

Machine Churning Sunset

Niagara Falls

Industrial Serpentine

Small Town Business

Ratina Bay

Advertise here with BSA

30 Super Oversized Footers in Modern Web Layouts

Jake Rocheleau — Wed, 11 Jan 2012 15:49:32 +0000

Advertise here with BSA

Designing a working footer layout can be difficult. There are so many styles and attributes including columns, link lists, bylines, and custom illustrations. My personal favorite trend is the oversized layout style which leaves plenty of room for custom link menus.

Thus I’ve collected a wonderful set of 30 super-oversized footer designs from modern websites. If you’re a fan of this design trend I highly recommend checking out some of my examples below. Similarly if you know of any great footers you don’t see on this list, be sure and let us know in the comments area below.

Branded07

Ready Made Designs

FudgeGraphics

Frisk Design

Design Bombs

DesignShack

The Rissington Podcast

Web Designer Wall

43 Folders

Sam Rayner

Productive Dreams

Kaleidoscope App

Colorburned

Vimeo

Sketch Odopod

YoDiv

Bits & Pixels

Carsonified Events

Crazy n Funny

Destiny Islands

Catalyst Studios

Florida Flourish

BlogHelpr

Hongkiat

Koorman

Brad Candullo

ecoki

Apple Reviews

Fubiz

Kiva

Advertise here with BSA

45 Useful Photoshop Tutorials From 2011

Brant Wilson — Fri, 06 Jan 2012 16:23:00 +0000

Advertise here with BSA

In this roundup we have collected 45 outstanding Photoshop tutorials released in 2011. If you like these photoshop tutorials you might also want to check out some of our previous posts below. Enjoy!

35 Amazing Photo Effect Photoshop Tutorials

30 Awesome Photoshop Text Effect Tutorials

Create a Powerful Human Disintegration Effect in Photoshop

Create a Futuristic Bicycle Icon in Photoshop

Design a Detailed Audio Receiver Icon in Photoshop

Create a Medieval Landscape in Photoshop

Character Design for the Boomrock Saints

Create “Cool” Typography Using Paths in Photoshop

How to Create Cityscape Concept Art

Use Photoshop to Create a Still-Life Lamp, Nightstand, and Picture Frame

Design a Conceptual Album Cover in Photoshop

How to Make a Textured 3D Spray Can

Mockup Blister Packaging in Photoshop

Undress a Giraffe in Photoshop

How to Create Dramatic Sci-Fi Photo Manipulation in Photoshop

How to Create an Out of This World, Medieval-Fantasy Themed Photo Manipulation

Create a Fictional Arctic Snow Frog in Photoshop

How to Create Feet Shoes in Photoshop

Create an Intense “Wings of Fire” Photo Manipulation

Design a Retro Typography Poster in Photoshop

Create an Explosive Flaming Poker Card in Photoshop

How to Make Your Photos Look Hipster with Photoshop

How to Develop a Handmade Illustration with Photoshop

Design a Vintage Baseball Card in Photoshop

How to Draw a Classic Electric Guitar in Photoshop

Create a Detailed Vintage TV from Scratch in Photoshop

Design a Retro Postcard with 3D Text

How to Create a Vintage Circus Poster with the Photoshop Puppet Warp Tool

Make a Retro Space Themed Poster in Photoshop

Making a Superhero Movie Teaser Poster

Create an Ice Cream Type Treatment in Photoshop

Nike Hair in Photoshop

Flaming Car in Photoshop by Lincoln Soares

Easy 3D Globe in Photoshop

Captain America Shield in Photoshop

Awesome Amp Controls in Photoshop

Dark Knight Rises Poster in Photoshop

Design a Vintage Style Swissair Travel Poster In Photoshop

“Piece of the Artic” Pie Chart Photo Manipulation

ERODED FASHION PORTRAITS

CREATE SUPER PSYCHEDELIC ARTWORK

PAINT A MULTILAYERED SURREAL PORTRAIT

GIVE A PORTRAIT A COSMIC MAKEOVER

Create a Realistic Blueprint Image From a 3D Object

TYPE THAT’S FIT TO EAT

Vintage Typography Tutorial using Ornamental Styles

Manipulate a Dancer Illustration in Photoshop

Advertise here with BSA

26 Free High-Quality PSDs to Download from 2011

Jake Rocheleau — Tue, 03 Jan 2012 17:13:22 +0000

Advertise here with BSA

Every web designer should love freebies. There are so many artists offering their work for free download on the web, and with hundreds of thousands of blogs these links are reaching a new audience like never before. The year 2011 has seen substantial numbers of free releases and 2012 is on-par for an even better year! So in celebration I’ve collected 26 of my favorite downloads from this past year which you can check out below.

Lion OSX UI Kit

Simple Buttons

Clean UI Elements

Image Frames

Three Box Shadows

Portfolio Website Template

Glossy Shield PSD

Abstract Bokeh Backgrounds

Grunge Stone

Vintage Checkered

Design Lab Web Template

Slick Elegant vCard

Under Construction PSD

WordPress Personal Template

Cafe and Restaurant Template PSD

Blue UI Free PSD

Peeling Sticker Icon

Social Media Icons

Simple Pricing Boxes

Stylish Web Ribbons

3D Box Icon

Clean UI Element Pack

App Under Construction

E-Commerce Facebook Page Template

Paper VCard Template

Custom Video Player

Advertise here with BSA

How to Properly Design a Print CSS Stylesheet

Jake Rocheleau — Thu, 29 Dec 2011 14:41:07 +0000

Advertise here with BSA

Targeting unique CSS styles is a simple process based around media queries. Web designers have been using these techniques for years to much success. Yet in just a short couple of years recently stylesheets have grown in tremendous popularity. Now more than ever it’s important to offer not only mobile but print layouts for your visitors.

I’ve put together this small guide for beginners to quickly craft a print-based design. There are standard concepts and layout techniques you should utilize for quicker loading speeds. You also need to be conscious of page length when the design is printed on paper.

Web v. Print Design

We should start off taking a quick look into both areas. These are two completely different design studies which are frequently secluded from each other. But printers are much more common in the everyday household – so it’s not strange for your visitors to expect pages to print nicely.

Unfortunately you are working with much less space on a plain white sheet of paper. This means oftentimes your layout will contort in very strange ways. You’ll have to be considerate of dynamic content including image galleries, content sliders, tabbed divs, and so forth. You almost need to build a mobile-based template but with even less functionality! Visitors won’t need any of it on the printed layout anyways.

But this doesn’t intrinsically mean you should remove all other media from the page. My recommendation is to keep images within the main content, plus your logo, but remove them elsewhere deemed a distraction. It’s best to remove entire areas of your layout which don’t serve a purpose in print – such as sidebar(s) or an extended footer.

Plain White Backgrounds

This is a crucial topic to mention right from the start. Nobody enjoys wasting their ink, and colored backgrounds in your page will do just that. Make sure you remove all repeating images, background textures, and preferably all solid color BGs as well. Even printing in black and white can make content difficult to read with a multi-colored background.

Obviously the solution is plain white, which will work the best in practically every situation. If you have trouble overwriting the default styles include !important declarations into your print CSS code. Also use this if needed to ensure all text is dark enough to read. Keeping everything plain and simple is generally the best strategy.

Identify the Key Elements

Ponder a bit and consider why your visitors would even be printing out your web pages. Would it be for reading material, or maybe part of an image gallery? This is important since you’ll want to manipulate your layout in such a strategic way.

As an example you may have a sidebar which only holds a small navigation menu, ads, and a signup form. None of these elements are helpful to the printed version of your content – so why not hide the sidebar altogether? Using the CSS display: none; property you can totally remove certain aspects of your page. Similarly you could widen the main content area so text will fill up more space, thus printing out less pages.

For some websites it may be too much work to recreate an entire stylesheet from scratch. This is especially true if you visitors wouldn’t mind keeping the same layout in printed form with just a few minor changes. For this task you can incorporate CSS media queries which target print devices only.

Stand-Out Links

Hyperlinks will surely be sprinkled all about your documents. These aren’t entirely important in printed context, but you should keep them distinguished just in case people re-visit your website looking for more reading. You could stick with the standard blue/purple colors which also appear great in black & white print.

Believe it or not we can also manipulate direct hyperlink URLs right into the page using CSS2+ properties in compliant browsers. A List Apart provides some good code examples of this even using relative URL schemes(ie. /articles/2011/mypost.html).

body a:link:after, body a:visited:after { content: " (" attr(href) ") "; font-size: 10%; }

This will insert both parentheses in quotation marks and the href value directly after the hyperlink text. It’s a great way to provide printer-friendly support for links on your website. Note that for this to work properly you should be using full URLs which include the root domain of your site.

Using CSS Media

To first clarify there is a difference between the @media query and the HTML media attribute. Both of these delineate between printed CSS code, but @media is included within the document itself.

In the example above we’re looking at an alternative stylesheet which you would include into your document header. The media attribute means these styles will only be applied when the page goes through a print action. So you won’t actually be able to test these without printing a live copy. But how else could you check the results realistically?

If you’re trying to keep print styles running in modern browsers you could also use the @import statement. This is just another alternate way of including print-specific code. But you won’t be mixing up alternate stylesheets as this bit of code is overlooked in legacy browsers.

Otherwise CSS Media is definitely an option, albeit targeted towards thinner stylesheets. These media queries can be included directly into your default stylesheet – so it’s best to keep them below 15-20 lines of code. The difference is how properties would cascade depending on which document you’re using. Some styles may overwrite your new rules or ignore them altogether. In general it’s best to keep these two document styles separate whenever possible.

Direct Page Margins

There is one more technique which doesn’t appear in too many CSS resources. Using the @page method along with a class of selectors you can apply new printed margins on the outside of your content. I’ve included the basic code syntax below:

@page selector { margin: 0.5in; }

The selector code is optional and can use either :first, :left, or :right to target the first page only, or the left/right margins on all pages respectively. In my example above we’re using the standard margin property to expand on all sides by half an inch. You could also use centimeters(cm) if the units fit your layout better.

If you want to check out some further reading I highly recommend WebDesigner Depot’s post from back in 2010. It includes a lot of reference guides and great tactics for using page margins by default. These properties aren’t exactly “beginner” material, but the information is easy to pickup and with practice you’ll retain the knowledge very quickly.

Conclusion

Regardless of how you include the styles or what changes you makes on the page, having any type of print stylesheet is better than nothing at all. It offers your visitors an easy way of taking your content portable without the need for a mobile device. And since CSS makes it so easy the entire conversion process can be completed in an afternoon. If you have similar ideas for print-based CSS styles please share with us in the discussion area below.

Advertise here with BSA