Malinic is a leading London graphic designer and illustrator. In his latest project, The West End Show, he explores the magical and bustling part of the capital in a series of elaborately illustrated poster designs, bringing together classic old century design with the dazzling neon future of the 22nd century.

Through a combination of bold typography, illustration and poetry, each piece tells the delicate story of classic design over-shadowed by the limitless offerings of this exciting city.

Malinic interprets his love for London by exploring the true characters of the real life musical that is London’s West End. ‘The West End Show’ offers an inspiring touch of nostalgia for the frenetic capital resident.

The show is now open to public at Nancy Victor Gallery, London, admission is free until March 2. Check out the promo video and the posters after the jump…

The show is now open to public at Nancy Victor Gallery, London, admission free until March 2. Limited edition prints and merchandise are now sold at the gallery, online store fully opens on March 3.

Please share your comments on Malinic’s work below…

eBook: Host your Website in the Cloud – only $17!

As designers, we’ve gotten used to building pixel-perfect mockups as our web blueprints. But responsive design takes a different approach.

A designer’s role is no longer to produce a mockup and then pass it off to the developer because responsive design is not just a two step process, it is a series of revisions. Most of which are made in the browser. It is a collaborative effort between the designer and developer, no longer two separate tasks.

Here are some tips and a general workflow to make the transition from designing static sites to designing responsive ones a little easier.

Knowing your viewports

Before starting any project it is important to determine your viewports. A typical approach would be to build one layout for smartphones, one for tablets and smaller viewports, a larger desktop version, and maybe a second desktop version for even larger/wider screens, say 1200 or 1400 pixels or more.

Planning ahead

Sketching can be your best friend. Take one piece of paper and make 3-4 boxes to represent each viewport. Having all of your viewports on one page helps you to not focus on any one design more than the others. When laying out your design, take the most important content first and add it to each of the viewports, working your way down to the less important stuff as you go.

You will quickly realize that not all of the content may fit in the smaller viewports. Better to find that out now while doing sketches, instead of trying to make changes to a finished design.

Yup, those are my actual scribbles. You might not be able to make out what each element is but those are from an actual project. I did the design and development so I didn’t have to make it clear for anyone else. The point being, nothing is faster than pen and paper for quickly jotting down layout ideas.

Wireframes and mockups

The most important part of wireframing, is having the developer take an active role. He or she should know right away if your idea is going to work or not and can give suggestions on ways to get your vision across without having to reinvent the wheel.

With responsive design you can no longer spend 90% of your design time before the development begins. So mockups need to be quick and rough. Also, be open to changes because chances are your original ideas may not work exactly as planned.

The browser

Because of the large amount of testing involved, responsive design is best done as a process of revisions in the browser. As soon as a basic layout is agreed upon it is best to begin the development right away. Having your layouts viewable from a browser helps prevent a lot of design problems.

Another thing to consider as a designer is what elements of your design can be created with CSS alone. Many devises today are able to display drop-shadows, gradients, borders, rounded corners and other design elements created with CSS. CSS only elements are easier to change, takes less design time to create, and don’t require images or image slices to implement. Of course if you are not developing the site yourself you will need to be able to communicate your layout ideas with the developer.

Taking it into Photoshop

I highly recommend using one .psd for all the layouts. Here is a quick example using 1200 pixels as the largest viewport. So start with a new .psd at 1200 pixels wide by 2000 pixels tall. The other viewports will be 480, 1020, and 768 pixels wide.

To start, unlock your background layer and duplicate it for as many viewports as you need plus one. Fill in the original background layer black and leave the rest white. Put each white background layer in a folder and name it for its viewport (example: “480”).

Next set up each viewport in the .psd. Remember you only need to do this one time and just reuse the template for all of your projects.

First add guides at the edges of each viewport. (View -> New Guide and select “Vertical”). Add guides at 90, 216, 360, 840, and 1110 pixels.

Next create Layer Masks on each folder, which will form the edges of each viewport. Use the Rectangular Marquee Tool to select the area inside the center two guides (480 pixels).

Having Snap checked (View -> Snap) makes this a lot easier. With the selection made and the correct folder selected in the Layers Pallet, click the Add Layer Mask Button to apply it. Do the same step for the other viewports.

Now to see a given viewport simply turn off the other folders. I also included a photo of the Layers Pallet if you wanted to see what that should look like.

Mockups

If you already have a rough site developed, take a screenshot at each viewport and add those into your .psd in the correct folder.

Generally it is easier to start with the smallest viewport and work your way up to the larger ones in Photoshop. So flesh out your 480 pixel design, then duplicate the layers and drop them into the 768 pixel folder.

There is no need to be pixel perfect with any of your layouts. I tend to get one viewport looking correct but for the rest I only change the elements that are truly different in each. Don’t worry about getting the margins around text blocks perfect. Really just ignore text as much as you can because Photoshop cannot render it the way it will appear in the browser, and most of the text design will be done with CSS.

Understand how content changes

When thinking about the design you need to understand how the layout will be altered as it changes from one viewport to another. You also need to consider what happens if a layout is slightly smaller or larger than the viewport you are designing for.

There are a few options for allowing your content to adapt to each layout. Each element can be fixed, hidden, floated (left or right), liquid, or they can scale. Any give responsive design will use a combination of all of these.

Floating elements are most commonly seen in content areas that sit side-by-side in large layouts, but stack on top of each other in smaller viewports. As the viewport begins to get smaller and each element is floated left, the elements on the right side will begin stacking below the elements on the left side.

Liquid content adapts best to changing viewports but can become awkward if used on large viewports. Liquid content is typically used for columns of text that scale as wide as the viewport allows. They work great on smaller viewports but can become too wide on larger ones, so it can be best to switch to fixed for those.

Similar to liquid, scaling elements are given a percentage size and scale as small or wide as the viewport allows. These are different in that it can apply to images and text sizes. These elements are given a percent width and/or height and adjust to the viewport.

Fixed is the most rigid way of laying out content. If you have a piece of content that you don’t want it to scale or change size in any way, it will be fixed. The best thing to do with fixed elements is design them to fit the smallest viewport. It is a lot easier to use a small elements in a large viewport over trying to fit a huge element in a small viewport.

When you want to remove an element or just don’t have room for it you can hide it. Hidden elements will not be seen by the user but will still be downloaded. So if you are using large images but hiding them from mobile users, the page will still take the same amount of time to load whether the images are visible or not.

Remember that you can and should use a combination of all of these on the same element. That means a text box will be fluid in one viewport, fixed and floating left in another, and may be hidden in a third.

Designers are not being forgotten

Because so much of a layout can be created with CSS it may feel like your role as a designer has diminished. Really, your role has just changed. Web design for too long has been about designing the interface while neglecting the content.

The layout is still important but the developer can do much of it. The designer should focus on making sure the goals of the website are met. Spend the most time on strengthening the conversion process, emphasising important content, and making it more palatable and digestible.

To be perfectly honest, I tried looking for some good examples of this in responsive design, but really couldn’t come up with any good examples.

Graphical elements and images

There are some special considerations to make when dealing with images in responsive design. The safest approach is to make images that fit the smallest viewport. This way you keep the file size down and have images that will work in each viewport size.

Here is an example images that can easily be displayed in multiple viewports from Orestis.nl.

Large background images can be particularly problematic when scaled down for smart phone use. If you plan on using them make sure to do it in a way that keeps file sizes and load times to a minimum.

Consistency

One of the biggest problems with responsive design is the lack of consistency. Users may have trouble navigating your site on a tablet when they are used to their desktop design.

Make sure to use the same color scheme on every layout and keep at least one consistent element throughout. The logo being the easiest element to transition through all. Always make navigation clearly marked and easily found. If you have to remove elements from smaller viewport designs, have other methods of getting to that content.

Don’t reinvent the wheel

When you are designing a static website you can have a lot of freedom but in responsive design there are more things to account for. Use a method that works and spend your time making that look great. If people can make email templates look awesome you can do the same with a responsive design, it just takes a little creativity.

Tyler Herman is a web designer and blogger. You can follow him on Twitter @couchable where he serves up design and web business related news and articles worth taking a look at. Or at his blog Couchable.

What do you think is the most difficult thing to keep in mind when designing a responsive site as opposed to separate mobile and static sites? Let us know in the comments!

eBook: Host your Website in the Cloud – only $17!

One of the great things we love about Threadless is that the designs are submitted by designers like you and get voted on by their community. The winning designs are then printed on clothing and other products and sold through their website (designers get paid for their designs!).

Today, in partnership with our site Mighty Deals, we bring you an awesome giveaway where you can win 5 gift vouchers for Threadless merchandise, worth $100 each!!

You can use them in anyway you wish on Threadless.com - whether you want to get yourself some cool t-shirts, books, iPhone cases, etc.

Read on for more details:

Check out just some of the many awesome designs and let the drooling start…

Terms of contest and how to participate:

• Enter your email address in the form below and then leave a comment.
• Results will be announced here on WDD on February 15th, 2012
• Coupons must be redeemed within 1 year

Good luck to everyone!!!

This contest is sponsored by Webdesigner Depot and our own MightyDeals.com which we believe is the best place to find awesome deals for designers. Note that Threadless is in no way affiliated with our sites or sponsoring this contest in any way.

eBook: Host your Website in the Cloud – only $17!

I tried marking my lunch. I tried notes pleading with people to not take my lunch. I tried hiding my lunch behind cans, etc. Nothing worked. One day, after my lunch disappeared, I shut the refrigerator door and laughed maniacally. Someone asked me what was so funny.

“Today is the day I find out who has been stealing my lunch,” I replied. “I put rat poison on my sandwich! We’ll find the thief in about an hour when he or she starts dying.”

Sure enough, a coworker screamed and ran around like she was on fire. As she was about to be taken to the hospital to have her stomach pumped, I laughed and admitted it wasn’t really poisoned. Naturally, I was fired. It didn’t matter that this woman had stolen my lunch for her mid-morning snack every day. It seems my “joke” was considered “dangerous” and I was chastised for possibly “giving (her) a heart attack.”

In one office, coworkers had small refrigerators in their cubicles to keep their lunch and drinks cold and safe. The energy bills must have been too much for the company so a memo went around informing people that these appliances were against the fire code. The kitchen refrigerator then became a repository of science experiments as people forgot half sandwiches and slabs of meatloaf for weeks and months. Sometimes you couldn’t even tell what was in the Tupperware it was so furry and moldy.

Being a smoker, I often found that people would pop into my cubicle to borrow my lighter, which sat out with my pack of cigarettes. Switching to gag lighter that gave those who pushed the button to light it a severe shock, I was once again chastised for a dangerous item that could “give someone a heart attack!”

Again, it would be a telltale sign of who was stealing my lighters. Sometimes there’s just no justice in the world and certainly not an office.

When you are hired by a large company or corporation, you are shown a video on office harassment. The video looks like a 1970s porn film without the sex. Bad acting and rhythmic guitar rifts, but the common thread throughout the video is that even when you are in the right, if someone complains about you, then you are guilty and wrong. With a small cast of characters in this video, it’s always the same person being offended by the actions of coworkers. One might wonder why the old rules of society aren’t followed and the constant complainer isn’t just buried up to his or her neck and hit in turn by every other employee with a polo mallet until dead. The modern office has a strange political hierarchy and it will not bend or break to your will or common sense. Learn to deal with it safely and with a sense of good-natured flair!

Save your lunch

And do it without the expense of poison and explosive booby traps that blow off human fingers! Try these sickening lunch bags with horrid mold or cockroaches printed on them.

Of course, if you’re like the people in my last office, mold and disease-carrying vermin will not get in the way of a free meal. Try nuclear waste and the threat of mutated offspring!

Having been situated in Missouri, the threat of mutant AND inbred children was just too exciting for my coworkers, so if you have the same territorial problems, far from civilization, try this locker that fits in a refrigerator.

I would, however, suggest testing the Fridge Locker before placing expensive food items into it. Judging by the claws on former coworkers, some people will just tear through the lock and plastic as if it was made of freshly-baked Twinkies. Nothing, aside from a freshly-baked Twinkie, will draw out the animal hunger in an office thief like a nice, juicy, meaty meatloaf. An inflatable meatloaf, like the one below, will fool the hungry animalistic worker and at least give them plastic poisoning as they won’t realize what they are chewing until it’s too late!

“What about my precious condiments?” you might ask. Do you relish a sandwich with expensive mustard? Well, then screw on the mustard head cap and know that most coworkers will be sickened by the yellow ooze spewing forth from his mouth. Some coworkers, unfortunately, will be turned on and suck the mustard right from the mouth as if they were deriving pleasure in the privacy of their own bedrooms.

There’s nothing worse then finding lipstick marks on your cup and it’s not the shade of lipstick you wear! So, guys, why not use this handy mug with a removable plug you can put on your key ring when you’re not using your personal cup. It’s like an evil dribble glass that will scorch the heck out of a mug thief when they try enjoying a hot cup of tea or coffee with someone else’s private property.

Who will you catch with their hand in the cookie jar? Not one person when they think you’re storing toxic waste in your cubicle! If people ignore the obvious warning, just bake some cookies with glass chips and keep them on the top of the pile. Pilfering will stop within the first day…or first hour.

Show ‘em who’s boss!

On your first day of work, coworkers will size you up to see how far they can push and dominate you. Why not let them get the message the minute you walk in? Hope for rain so you can start by appearing heavily armed with these katana and tanto umbrellas strapped to your side or slung at your waist. Nothing say, “don’t borrow money from me” like implements that can cleanly slice off the outstretched palm of the biggest office mooch.

Meetings can be soooo boring and stressful. Sit among coworkers and relieve stress with this cute stress squeezer that resembles a real set of brass knuckles! Well, it will relieve YOUR stress. Those around you may have increased stress levels but they will be very receptive to your ideas and probably won’t offer any of their own.

If brass knuckles is a bit too over the top for you, just consider wearing finger tentacles for a more demure and friendly appearance. Just make a “brouuurp!” noise every now and then to convince doubters you actually have real tentacle fingers.

Evetually, coworkers will enter your office or cubicle to chat, drop off work, discuss a project or steal something while you’re not there. People will judge you by what they see, aside from the company phone, chair, and computer. Toys and accessories say a lot about the person, so let them see the real you when they glance at your bulletin board and see these little, chrome “stars of the office!”

If you’re in an area of the world that experiences colder then average winter weather, chances are that your employer wants to save money to spend on expensive cars and prostitutes by turning down the heat in the office. Most people will leave a sweater in their office for just such an occasion. Some people will dare the sarcasm and cruel taunts by using a Snuggie™. Don’t become the office joke…use this warm outfit and coworkers won’t so much as snicker. In fact, they will probably avoid walking by your cubicle or office altogether!

Are your interoffice memos not effective? Do people smirk at your note taking in meetings? Well, use these fun post-it notes and people will pay attention. In fact, they will agree to anything you ask and give you money and other gifts, even if it’s not your birthday!

Naturally, there’s something you don’t want people to see in your cubicle. One former coworker had a small TV in her desk drawer. One coworker actually had a camping mattress and pillow and blanket under his desk. One coworker LIVED in his cubicle! Small things can be hidden in this handy keyboard-slash-storage compartment. If anyone finds it, they can be a coworker-slash-sorry-they-ever-came-into-your-office!

Life goes fast in the age of technology and sometimes you need to make a personal call… like to report your employer to the labor board or tell your five year-old that he or she has to make their own dinner because uncle mean-boss is making you work until two in the morning again. With these stealth covers for your iPad and iPhone, you can fool coworkers into believing you have an Etch-a-Sketch for amusing down-time…as if you are suppose to have down-time. GET BACK TO WORK!

Working 9-5 is an old Dolly Parton song and an even older concept to employers who believe in gulag-style work hours. Sometimes you might need to spend your ten minute lunch break shutting your eyes for a power nap. Well, lunch break or not, employers aren’t fond of sleeping employees using company heat and chairs for such personal time. Just slip into this cute bear sleeping bag and chances are, no one will stay in the are long enough to figure it out.

Curious coworkers might pluck up the courage to peak into your workspace while you’re not there. Maybe they’ll touch your stuff! Well, with this handy pen/video camera, you can keep your friends close and your enemies closer. Catch someone in the act and you can blackmail them for money, or blackmail them first and THEN have them fired!

Although the image for the video pen seems to show the male coworker using video to look directly at his female coworker’s er, breastular region…probably for later use, which I won’t go into here but trust me, it’s not office appropriate…like the rest of this article…sometimes you need to know what coworkers may suspect about you…or are just making up in office gossip. Use this sound enhancer to overhear conversations far away. People will think you’re just wearing a Bluetooth but you’ll really be hearing tidbits of information that will make you king or queen of the office. Forewarned is forearmed!

Don’t get mad…get even!

So, maybe some of your coworkers haven’t heeded the message that you will kill them and gnaw on their bones. Some people are just a bit slow when it comes to obvious signs. A little extra persuasion may be needed. With this little device, hidden somewhere in their office, it will only take about three days for them to go completely insane. Buy two and hide one in their car, too! There’s a reason they call it the “Annoy-a-Tron!”

Sometimes, as the old saying goes, a little sugar attracts more flies than vinegar. So does the rotting carcass of a missing coworker, lying in a ditch at the edge of town, but please don’t get me wrong. Making nice is the best way to win over the hardest heart in the office and what could be better then sealing an interoffice memo with a kiss? Of course, you might not want to kiss every memo or wear lipstick, so just use this innovative pre-inked stamper. If someone is still mad or suspicious of your intentions, just stamp their shirt collar and let their spouse become enraged and divorce them, causing emotional problems and a downward spiral in the person’s life that usually ends with a self-inflicted gunshot wound.

A dose of reality

As this is a global publication, some readers from other cultures as well as Americans who will take this article as good ideas, may not understand that I’m writing this with humor and I am not suggesting one should threaten or harm coworkers. If one were to act out on any one of these scenarios, they would probably be fired (and possibly imprisoned).

When you are fired, or so I have heard, you are usually walked out by security, sometimes with a guard holding each one of my limbs…er, your limbs, and you will not be allowed to return to your office to pack your personal items. Coworkers will usually loot your items like wild dogs fighting over a dead carcass. Having worked at places where we produced collectible licensed merchandise, things can disappear very easily. As creatives, we tend to like having colorful things around us like collectible vinyl figures and such. It’s best to keep personal items of any value out of the office.

So, what can we have around to brighten our personal workspaces, set in Nazi-gray office color schemes? It should be things we can throw away without a second thought. So, try custom paper toys! Buy a book of them and you can have all the cute and cool you want until it’s time to walk the last mile out of your place of employment, leaving nothing but memories and perhaps…burning paper toys?

Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine and has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon among other notable companies. Speider is a former member of the board for the Graphic Artists Guild, co-chair of the GAG Professional Practices Committee and a former board member of the Society of Illustrators. Follow him on Twitter @speider

Do you have a favorite office toy? What web site do you like for great, fun office toys? Do you understand this article was written tongue-in-cheek and you shouldn’t scare coworkers? Is it just too late to write a disclaimer?

eBook: Host your Website in the Cloud – only $17!

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

The Psychology Behind Color In Design or Nothing Should be Random http://cot.ag/zpB2NM

The Amazing World of Icon Fonts http://cot.ag/y0oAP6

Interesting insights from Aaron Gustafson: From “Mobile Friendly” to “Mobile First” http://bit.ly/qukmio #css #rwd /via @smashingmag

5 Tips to Help Home-Entrepreneurs Set Up a Great Office http://cot.ag/yPx1EP

We like this: Responsive Design Test Bookmarklet http://bit.ly/yIiIyp

The amazing drawing world of Pat Perry http://cot.ag/y5mbYP

The Future Of Screen Typography Is In Your Hands http://bit.ly/yZpy9D (via @smashingmag)

27 Best free WordPress Plugins for Musicians http://bit.ly/vZtOz4 (thanks @daviddas for the mention)

Leeds Print Festival posters or the beautiful art of marbling by Jemma Lewis http://cot.ag/ziNp1R

Working locally: providing a greater flexibility and creativity? http://cot.ag/zIL8ET

Ten Things To Think About When Designing Your iPad App http://bit.ly/zNmLdW *Great read

The gap between traditional and digital mediums illustrated perfectly for China Mobile in “Wireless City” http://bit.ly/xYeBJs

Sleep: Are you getting enough? http://bit.ly/zff73Z *Interesting read for those of you staying up all night

Time to Ruby dooby do? Perhaps. Take A Quick Look at Ruby on Rails http://bit.ly/yYUm1u

A super fun calendar for those obsessed with bubble wrap – it has a bubble to pop for every single day of the year! http://bit.ly/yBXQSa

Take a look at the making of Novum’s magazine geodesic front cover and get inspired! http://bit.ly/zPcJVb

Make Funky Animations With CC Circle And Radio Waves http://bit.ly/A4s0le

Gentlemint: Pinterest For Men http://bit.ly/xRb3A0 *Looks fun

Yosemite HD: amazing time lapse video collaboration between Sheldon Neill and Colin Delehanty http://bit.ly/yz6vao

This Short Film About Letterpress Will Make You Yearn For An Ink Roller http://bit.ly/AFqDjE

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

eBook: Host your Website in the Cloud – only $17!

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

A little preoccupied

Almost daily

The whiz kid

Can you relate to these situations? Please share your funny stories and comments below…

eBook: Host your Website in the Cloud – only $17!

Released first and exclusively on WDD, it’s an infographic vector kit, with the most used elements that you may need for your infographic designs.

Included in this set is a world map, gender elements, as well as multiple pie and bar charts. You can easily combine and modify all the elements to create a distinctive infographic.

The elements in the kit can be used for personal and commercial purposes. The file cannot be redistributed or sold in any shape or form.

The file is available for free for all Webdesigner Depot and Mighty Deals subscribers. Simply enter your email address below to download it. See the full preview after the jump….. Enjoy!

eBook: Host your Website in the Cloud – only $17!

If we as interactive designers we’re able to take a little more time when it came to typography, than the results would show a unique, well thought of design as oppose to a “run of the mill” creation.

There is a good chance that the majority of designers and designs you admire showcase good examples of typography.

I’ll show you a few steps I take in tweaking set type to be more appealing than those default scenarios of 24px H1 tags along with 13px set in Times New Roman.

Don’t settle for default settings, everyone is doing it.

Here we have the ever- so- common look of a heading along with a chunk of body copy to follow. This doesn’t exactly pull you in or set itself apart from all the other samples just like it, right? So to make the text sample more visually appealing, first, we’re going to make a few changes with our font selection.

Choose a font that will have more visual weight with your headline

Although font selection is not exactly “typography,” it is in fact a quintessential component to help the type on a page distinguish itself from other elements. With the onset of @font-face, massive amounts of choices are available to designers anywhere.

Here I’ve used an Extra Condensed Gothic Style font that can easily be found on a free font site like FontSquirrel.com. If we stop and think about it, the name “Condensed” should mean something, because it is in fact more dense than it’s normal book style family member, which is exactly what we want out of a headline:, something that pulls the user in and truly sets itself apart from the body copy. It certainly succeeds in grabbing your attention better than the original but there are a few things we could do to further improve the text.

Make it more appealing with two lines of CSS

The immediate change is in the letters; they’re all capitalized now but they also now have negative kerning between each of the letters (a technique carried over from newspaper design).

Both of these characteristics can easily be accomplished through CSS, {text-transform:uppercase; and letter-spacing:-Xpx;}. By making these two lines worth of coding changes, it results in a major improvement in visual weight, especially over the original .

Work out any last little tweaks

In the next step, the font used in the body paragraph has in fact changed to a cleaner sans-serif, which better compliments the headline text. We’re getting closer to a much more visually appealing design, but there are a few changes we can make to clean it up even more.

As the green indicators show, there are unequal margins and what typographers like to call an “orphan.” Which is a single word that falls to the last line of the paragraph. It creates a very unequal weight visually as compared to the rest of the text, and this issue can be solved easily by rewording the text slightly.

When it comes to margins, there is no rule that all must be equal. However, if you are starting a young web design career, it’s good practice to have equal margins throughout until you experience and learn techniques that allow you to extend beyond the guidelines of typesetting and still accomplish your goal visually.

After creating a more balanced visual canvas by removing the orphan and adjusting the margins you can see the end result, a well set type sample that’s comfortable where it lays.

Dallas is an Interactive Designer at 352 Media Group, a digital marketing and web design company.

What are your best tips for web typography? Let us know in the comments!

eBook: Host your Website in the Cloud – only $17!

This time around we’ll be giving away 5 prizes of 250 die cut business cards each!

What makes these cards different is their unique and attractive shapes. They are sure to get you noticed and will make your clients look twice!

Use them as appointment reminders, mini-resumes, service lists, calendars, portfolios and product samples, to name a few.

Read on for more information on how to participate….

Each of the 5 winners will receive:

• 250 Die-cut business cards for 5 winners
• 2 x 3.5″ Rounded Corners, 2″ x 2″ Rounded Corners, 1.75″ x 3.5″ Rounded Corners, 2″ x 3.5″ Leaf, 2″ x 3.5″ Rounded One Corner, 2″ x 3.5″ Half-Circle Side, 2″ x 3.5″ Oval, 2.5″ Circle
• 14pt Cardstock Gloss / Matte / High Gloss (UV), or 13pt Cardstock Uncoated
• 6 Business days print turnaround time
• Free shipping
  

How to participate:

• Twitter: Send a tweet about this contest (and include the URL to the contest page) and then post one comment with the url of your tweet in the comments area below. You can get the url of your tweet by clicking on the date/time stamp of your tweet.
• “LIKE” Uprinting in Facebook
  
• Contest will end February 8th, 2012

Thanks to UPrinting for bringing us these great prizes and good luck to all of you!!!

[UPDATE] Winners are:

#9 – Nenadkostic
#21 – April Silva
#66 – Wes Noel
#64 – Fina Tishina
#71 – donielle

eBook: Host your Website in the Cloud – only $17!

I don’t want to mention any names here or tell you what to use.

Instead, I’m going give you some important points to consider, so that you can make an educated decision on your own.

And hopefully, not invest a huge amount of time and energy into a CMS you will have to abandon a year or two down the road.

The learning curve

Sadly, many designers pick a CMS on this point alone. Don’t get me wrong, choosing a CMS you can actually figure out is important, but you are investing a lot of time and energy into this piece of software. Potentially, years of your life will be spent working with this CMS. Don’t just go with the easiest one to configure without taking in some other considerations. A one-click install is nice, but should not be a deciding factor.

With that said, how fast you can get up-and-running, and building simple sites is important. Every CMS has a learning curve but some are much steeper than other. Consider how much time you have before making a choice. If you are a student, you might consider taking the plunge and digging into a more difficult to learn but feature-rich CMS, because you have the time available to do it. If you are working and need a CMS solution yesterday, you may be forced to go with something you can get up in running in a few days.

Theming

If you are not familiar with the term, by theming I mean creating the skin, the visible part of the front-end of the website. How this is done should be a huge consideration. Remember developers are the people building CMSes and they like to make development easier, sometimes before considering you the designer, and unfortunately, the end user, too. Which means, the way the front-end is put together might have been neglected or made unnecessarily complicated. Some CMSes are much easier to theme than others. Also, how the control panel is set up and how easy it is to use should greatly influence your decision, because you will be spending huge amounts of time working with it.

You need to consider how flexible theming for the CMS is. Are you able to create or import static HTML and CSS or are there a ton of hoops to jump through first? How is the file structure set up and are you required to save separate pieces of your design all over the back-end? A good CMS, once you are proficient with it, will save you time. But there are definitely some CMSes out there where development takes extra time.

How much freedom are you given to build the website you want? Every CMS has some design hurdles you have to jump over. Are you forced to begin with a starter or default template? That can be a big cramp in your design style and it can eat up extra time. Although, some people prefer having templates to start with. Which do you prefer? Do you have to write markup right in the browser or can you use a text editor? Think about how you prefer building static webpages and check to see if you can use the same process or will you be forced to do things differently.

Documentation and resources

A CMS is only as good as its documentation. I’ve played around with a few amazing CMSes that I ended up having to abandon because I got stuck, and realized there wasn’t enough proper documentation to get me out of the jam I was in. So right after looking at the basic specs for a CMS, dig into the documentation. You should be able to start with zero knowledge and build a complete website just from reading the documentation. If it doesn’t look like that is the case, you might want to look into another CMS.

Most CMSes list their features but the documentation is really where you can see exactly what is offered. For example, a CMS will probably offer some sort of shopping cart solution, but what that is exactly, can vary greatly from CMS to CMS. If there are one or two things your CMS must have, be sure to read the documentation about them specifically, and see if they will work for you.

Community

Even the best documentation cannot answer every question you will have. Is there a place to go where people will answer your questions? If there is, how helpful is the community to designers and novices? Some communities can actually be quite hostile or simply ignore beginner’s questions.

If you would like to ask some questions, don’t be that person who gets on the forums or Twitter asking “Is this CMS any good?” Browse around a little bit. Someone has probably already asked the question you have. A good way to gauge the quality of the community is to see what kinds of responses people are getting to their questions, and how many hours/days it takes to get them. Nothing is worse than having a question you cannot answer and not having a resource to turn to.

Another consideration not often thought of is paid support. Do the CMS developers provide support and how much does it cost? If they don’t, are there people in the community that you can trust to get timely support from? Inevitably, there will come a time when you need a custom add-on built or something else comes up that is over your knowledge level. Someone needs to be there to do it for you or walk you through it.

Community also includes the third-party developers. Who and how many people are building add-ons for the CMS? Most CMSes have a central add-on community. Have a look around and see what is available.

Usability

Not every website you build will be for yourself. How easy a client can add and edit their own content is very important. Complicated back-ends and lack of features means more development time and more time training clients. One of the most basic and most important features of any CMS is the text editor. Editing site content should be a primary concern for you and the people you will be building websites for. How easy is the WYSIWYG editor to use and goes it write clean markup? Will clients who are not computer savvy be able to use it?

Also, along the same lines is the file upload system. How easy is it to upload images, video, PDFs, et cetera? Many clients don’t have the software or knowledge to edit and resize images, yet need this functionality on their website. Is there built-in image resizing your clients can take advantage of?

The usability of the control panel should be considered as well. You may have to train people to use the system, which can be many hours of work over the years. Is it simple enough your grandmother could use it? Also, how configurable is the control panel? Can you turn off or hide areas the client doesn’t need access to? It is nice to be able to only let clients edit the areas of the site they need to without having to deal with other parts of the control panel that might confuse them, or worse, allow them to break the website.

Clients need to be able to do these basic things:

• Edit existing page content
• Add new pages easily and have the navigation updated automatically
• Add photos, documents and video content
• Give access to the control panel to other employees

They all sound pretty easy but there can actually be a number of problems. Tabular data or heavily styled areas that require HTML and CSS knowledge can be difficult for a client to edit, and some WYSIWYG editors don’t do a very good job here. Some CMSes don’t provide an intuitive way of adding additional pages or easily up-datable navigation. You don’t want to leave these things up to the client if you don’t have to. I like to follow the rule that if a client could break something, they will break it. Some CMSes don’t allow certain file types to be uploaded or have an upload file size limit, which can cause headaches for clients trying to upload large PDFs or PowerPoint presentations.

All things to consider.

Programing knowledge requirements

You chose to be a designer for a reason, right? Some of us might be proficient in a language like PHP but that doesn’t mean we want to spend all of our time doing it. Take a look at the language the CMS is written in and see if it is something you are familiar with and could work in if you had to. Also, see how much scripting is done in the templates. Some CMSes do a really good job of keeping the PHP or whatever language out of the templates, so you can focus just on the HTML and CSS. Other CMSes can have their own templating language to use.

They are all a little bit different and, depending on your comfort level with code, you will have to choose one to live with. Generally, I say don’t go with a CMS where you have to learn a whole new language to get started, unless you really would rather be a developer and not a designer.

How active are the developers?

How good the CMS is now is important, but where it is going in the future is just as important. So find out what the developers are up to. Look at the time it takes for each major release and each dot release to come out. If it has been two years since the last dot release, the CMS might be dead or on hold. There is no perfect CMS but the more the developers are working the better a CMS is going to get. And what may be the best CMS now might not be five years from now. Don’t get stuck with a dying CMS.

Find the bug tracker and see just how long bugs go unfixed. If something is broken on a site you build, clients are going to rely on you to fix it. Telling them the CMS developers haven’t fixed the bug yet, isn’t a very good excuse.

Flexibility and reach

What does the CMS come with out of the box? A CMS with little functionality means you have to rely heavily on 3rd party add-ons. On the other hand a CMS with everything built in may be bloated and difficult to get up and running, especially if you are building a simple website. There needs to be a happy medium between the two. An ideal CMS can be set up quickly without a lot of configuration needing to be done, yet has all the tools required for more complex features.

Just because you are only building simple websites now doesn’t mean you might not be building more complex websites in the future. Think about the types of websites you would like to build or may be asked to build and does the CMS allow for it. How hard is it to add a membership area to the website, multi-language support, or to add a store?

Does it make you better?

Learning how to build website with a CMS is a great thing to know but just how much larger your skill set becomes, can vary. Being able to let clients edit their own content is the central feature of a CMS, but they can offer so much more:

• Ecommerce
• Membership functionality
• Multi-language support
• Dynamic media galleries
• Multi-site installations
• Integrating blogs and forums
• Pagination
• Easy syndication

To name a few. You probably would not have been able to create this type of work without some development knowledge but a good CMS can make that possible.

After working with a good CMS for a while, you should find that you are able to work at the same speed or even faster than if you were building a static website. A good CMS saves you development time, but should also help improve the way you develop the front-end as well, by creating reusable snippets of content, embedding templates inside each other, and displaying content from the database that you would have had to markup yourself in a static site.

Where are you going?

Think about where you are in your career now, and where you want to be five and ten years from now. The CMS you choose will be with you at least that long. Are you going to be working for a big design firm or do you want to work for yourself? Will you be doing freelance work on the side?

Not every firm uses the same CMS but there are some that are used more regularly. If you really fall in love with one CMS in particular, you can always find the firms that use it, too. Less popular CMSes have less job opportunities but the firms that do use them would be much more inclined to hire you, being proficient with the CMS, over someone who has never touched it before. Using a less popular CMS makes you more of a specialist. Using a popular CMS means you have a broader range of opportunities.

If you plan on freelancing full or part time, you will want a CMS where you are comfortable doing every aspect of development. Typically, your projects will be smaller in scope as well, so a huge CMS with a long setup time might not be the best option.

Conclusion

Every person is different and what CMS works for me might not be the best option for you. So take these points into consideration. Take a look at what CMSes are available, and pick the one that will work best for you.

Written exclusively for Webdesigner Depot by Tyler Herman, a web designer and blogger at Couchable.co. You can also follow Tyler on Twitter @couchable to find out what he ate for lunch, see photos of his 24 cats, and read rants about sports teams you don’t care about.

What do you look for when choosing your CMS? Share other tips with us!

eBook: Host your Website in the Cloud – only $17!