Archive

Archive for March, 2009

A Life Guide for the Anti-Social Freelancer

March 19th, 2009 No comments

In the workplace, we hear a lot about work-life balance and the need to be a well-rounded person.

For many freelancers language like that is reason enough to never work for another person again.

We aren’t very social animals and most of us aren’t normal workers either. Some of us do our best work at 2:00 in the morning after a feverish round of Halo 3.

Perhaps this T-shirt from ThinkGeek says it best:

Unfortunately there comes a time in the life of every freelancer when they must deal with that most dreaded of all creatures – other people. In order to prepare for this inevitable event, you have to look at your workday as a series of planned events. Sort of like a Warcraft raid, but only in real life. While we usually don’t have time to do anything but work, we have to make that time in order to keep our sanity.

WTF This is Too RL. Noob.

Most of us aren’t large enough yet to have an office, or we simply don’t want the added overhead of having an office. If you have enough clients and you’re making money, why have one unless you are working towards an agency business model? There’s nothing wrong with working from home if you work on the internet and in our case clients expect that we do just that. While we all work from home for a reason, there are some downfalls to working from home that we need to overcome in order to be successful.

Socialization

When I first started working from home, my mother-in-law asked me if I would miss socializing at the office. I thought it was a crazy question. Of course I wouldn’t miss the office. While I hardly hated my co-workers, I’ve always been the type that considered office socializing to be a massive time suck and useless in the bargain.

 

 

dontcomecloser

 

Any Closer and I Stuff Live Ferrets In Your Pants

Since I started I can’t say I miss socializing at the office, but I definitely need to get out and do something every day. Whether it is a quick coffee with a friend, a stolen half hour at the gym, or a quick drive, I make an attempt to reconnect with society for at least a few minutes per day. This process is apparently called “socialization” and it is defined as the process of learning our own culture and how to live within it.

It can be argued that we function in our online culture just fine, thank you very much, but I think you’ll agree that getting out to see people once in a while isn’t a bad idea. Apparently Plato, Montaigne and Rousseau all thought that socialization was necessary. We’re going to accept that one of those guys knew what they were talking about.

Srsly Go OUTSIDE!!!

What happens when we aren’t properly “socialized”? I think you all could come up with at least one example. I have always had an amazing capacity for saying the wrong thing. Before someone told me that it wasn’t quite appropriate, I told two children that whenever Hannah Montana sings, God kills a kitten. I did this because I thought, and rightly so, that it was hilarious. But think of the kid – I made the poor buggers think for a few seconds that God had a rifle range set up and was poling a kitten whenever Hannah warbled an unholy note. That just wasn’t cool. What’s worse – I came up with the idea from a piece of FaceBook flair. There’s nerd, and then there is anti-social nerd.

Please Hannah Noooos….

I Socialize Online. What’s The Difference?

When we socialize online, we tend to aggregate in groups and forums that represent our own interests. The negative aspects to socializing online are that we can create identities and roles for ourselves that are actually a far cry from our real characters. Most of us don’t even do this intentionally – we just have a different character online than off. In “The Social Net” by Yair Amichai-Hamburger, he writes about this role playing and alternate self as both a negative and a positive.

We are free to explore areas that we may not explore offline, but that can also lead to some anti-social behaviour as well. While Amichai-Hamburger is not trying to demonize online culture in his book, he turns the cold third-party eye of a team of psychologists on the whole affair with some interesting results. You can read excerpts over at Google Books.

socialnet

 

Since we tend to form groups with those of similar interests, we are often not challenged with opposing viewpoints as we may be offline. This can lead to a fundamentalism in belief structures, political ideals and just about anything else that we communicate about on the internet. While online socializing has its place, it should always be supplemented with real life socializing to keep yourself balanced.

Socializing online with something like Twitter is another issue entirely. This tool gives you up to the second insights into the lives of those of your tribe, such as other web designers and other freelancers. You may actually find yourself making some real life friends over Twitter if you aren’t careful.

Getting Resocialized

For those of you who are seeing themselves in my Hannah Montana debacle, you may want to do something a little more drastic than getting out to the gym everyday. You may want to join a group of some kind that encourages you to do public speaking such as Toastmasters or a similar organization. You may want to join a local volunteer organization, such as Rotary or the Kinsmen. Basically if you have absolutely nothing going on in your life except work, you need to give yourself some time away. This process is called resocialization. The term is usually applied to a major life change, such as going away to University or joining the military. If you’ve been at home working with nobody around for years, you may just find it to be extremely useful.

 

They Won’t Look Like This. Promise.

The Mobile Office is Not the Answer

A lot of people recommend changing your surroundings by taking your laptop and going to a cafe or a quiet room such as a museum lounge. While it can’t hurt to mix it up a little bit like this, you are still effectively in isolation. I’m sure that the odd freelancer has found work happiness in a cafe or in similar surroundings, but this only works if you have the concentration of a ninja master. Changing your surroundings usually won’t do much except reacquaint you with the negative aspects of human nature such as loud conversations about private medical issues and the need that some people have to talk in order to hear themselves. These types prefer coffee shops of the pricey variety *cough*(Starbucks)*cough*. If you need to go out, just go out. Leave your laptop at home.

That being said sometimes you do need a place to go if the family aggro is driving you to distraction. The best place to go is the library – no loud conversations, no distractions and no impossibly hot baristas.  Wait a minute – maybe that cafe isn’t looking like such a bad idea after all…

Your Spouse is Not Your Socializer

If you are lucky enough to have a spouse, you can’t use them as your socialization mechanism, regardless of how easy it is. Your spouse expects you to bring your own personality and beliefs to the table. As it is unfair for them to come home and complain about work, it is unfair for you to expect them to introduce you to the entire world around you. That’s your responsibility. As a freelancer it is almost more vital that you set up date nights for you and your spouse as it is too easy to just hop on the box after dinner to tighten up some code. You may find yourself tightening up your belt when the divorce papers are served.

Just in case you were wondering, the impossibly hot barista is not your socializer either. Just walk away.

Date Your Friends

Set up an ongoing meeting once a week with at least one of your friends during the day. If you know a mom who is at home with the kids, she’s probably dying to get the heck out of the house too. Change your location and activity from week to week. Go shopping, have lunch, go to a free lecture. Whatever you do, don’t do anything to do with work. Does once a week sound too often to you?  OK – that’s a sign that you need to do it.

Socialization and Sales

Even if it seems like work is coming in faster than you can finish it, there will come a day that you will have to conduct some sales-like activities to bring in new business. One of the first rules of sales is to not talk about sales. While you don’t want to waste your client’s time, if you are at a meeting it is expected that you start off with some small talk about family, current events or friendly banter of another sort.

This is where your socialization comes into play. If you are adequately socialized, you’ll ace all the nuances of a standard business meeting. If you aren’t, your prospective client will probably pick up on this fact with negative results for your business deal.

Sales Techniques

Sales techniques for the freelancer are a little different than the standard ones that you read about in your “Get Rich Quick” type books. It is much easier for a web developer to get clients than it is for an encyclopedia salesman to get clients. All you really need to do is pick up the phone, which is one of the main reasons for this article. Most web developers view the phone as an antiquated device that only troglodytes use. If it makes you feel better, hook yourself up on Skype and call with your computer. Whatever you do, commit yourself to one morning a month of picking up the phone and calling people you don’t know to get business.

 

This = $$

This method of getting business is so much easier than bidding on contracts on online bid sites and answering ads on Craigslist because you are competing with nobody. You are the first one “past the post” in the eyes of the business owner that you are talking to and therefore the favoured one. You may find that most contacts made through your cold calling don’t even shop around – they just have you do the job. Don’t feel restricted to cold calling in your local area either, although you may want to start there.

Contact people in other states, provinces and even other countries. Check to see how the dollar is doing against the Euro and the British Pound. If it is lower you may find yourself to be the discount option of choice for a UK customer. Make sure that you are respecting the time difference and calling in the equivalent of morning for them.

Don’t think that mass emails can replace cold calls either. Your effectiveness rate will be much better talking to someone on the phone than it would have been if you had sent an email. A phone call is more personal and feels more honest in the eyes of your buyer than e-mail. You’ll be assuring your buyer that you simply aren’t a design mill and you have interpersonal skills. I don’t know about you, but I am sick of unwanted e-mail filling my inbox and I am always happy to get a relevant telephone call.

While many of us are not adequately socialized human beings due to the nature of our work, most of us are remarkable human beings. Think of what you are depriving the world of if you don’t get out there. It’s actually almost criminal that people are not yet aware of the awesomeness of you. Especially that barista. Go get ‘em, tiger.

Is Google Chrome The New IE 6 For Web Designers?

March 19th, 2009 No comments

Just when you thought you were done with IE 6 and its hacks and exceptions, now you’ve got a new browser to consider: Google’s Chrome.

The good news is that Chrome is a lot more compatible with web standards than IE 5 and 6. However, Chrome has its own idiosyncrasies and bugs.

No one knows if Chrome is here to stay, but it has already captured a surprisingly decent share of the web browser market in a short period of time.

Here are some tips to get your web pages working in Chrome and hopefully looking the way they were designed to look.

Mac Users

As of February 2009, Chrome is still a browser for Microsoft Windows PCs. If you use a Mac, you will need to run Microsoft Windows through Bootcamp, or one of the virtualization products for the Mac (Sun’s VirtualBox, Parallels, VMWare Fusion). If you are really daring, you can try and get Chrome to run using Darwine. Google promises to have a native Mac version of Chrome available in the coming months.

Vanishing Pop-Ups

Pop-Up blocking is great unless your website really needs pop-up functionality. If you have a web page that must use pop-ups, you won’t see them in Chrome. By design, Chrome only displays the title of a pop-up and minimizes it to the bottom right corner of the browser window. Users will need to click and drag the pop-up’s title in order to view its content.

SSL is Broken?

By design, Chrome will only certify a valid SSL (secure sockets layer) page with the padlock icon if all the elements on the page are served via SSL. In other words, if your page is served via SSL but it calls elements via non-secured HTTP, Chrome will give your page an exclamation point icon indicating that it considers your page to be an inconsistent SSL transmission. To get around this, make sure that all the resources loaded by your web page, including all images, are prefaced with HTTPS.

Declare Encoding First

If your web page text is garbled or otherwise just plain wrong in Chrome, you may need to insert encoding information into the <head> section of each web page. If you already have encoding information, it must come first, before any CSS or Javascript. Otherwise, Chrome will just ignore it. A working example:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251?>
<script type=”text/javascript”>
… your JavaScript code …
</script>
… your CSS code …
Also, Chrome will ignore encoding specified by Javascript. Period. For example, the following would be ignored:

document.write(”<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251?>”);
Instead of using JavaScript, you must insert your encoding into the beginning of the <head> section of each web page as shown above.

Bookmark Favorites

When users choose to bookmark your web site, you can control the default bookmark name, description, link, and bookmark icon. Just make sure to place your code in the <head> section of your web pages. Here is a working example:

<head>
<meta name=”application-name” content=”Greatest Website”/>
<meta name=”description” content=”The very best on the web”/>
<meta name=”application-url” content=”http://www.superfantasticgreatestweb.com”/>
<link rel=”icon” href=”great-icon_32×32.png” sizes=”32×32?/>
<link rel=”icon” href=”great-icon_48×48.png” sizes=”48×48?/>
</head>

Fixing JavaScript

If your JavaScript is not working properly in Chrome, check Chrome’s JavaScript console, accessible from the Page menu icon -> Developer -> JavaScript console. That should give you some direction as to what you can change.

For the more advanced JavaScript developers, you can also use the JavaScript Debugger, accessible from the Page menu icon -> Developer -> Debug JavaScript. That will allow you to watch variables and set breakpoints.

chrome-developer

CSS Image Problems

If you are using images or backgrounds implemented through CSS and they are not rendering properly in Chrome, you might want to convert images between GIF, JPG, and PNG to see if a different image format solves your problems. Although this makes no sense, it sometimes works, especially with random spacing and image formatting problems.

CSS “First” Selector Hack

Chrome can be finicky and unforgiving about CSS and may ignore styles applied to certain page elements. You might try using the “first-of-type” keyword which will be ignored by all other browsers (except for Apple’s Safari). For example, if you cannot get a particular style applied to the <body> section of your web page to work in Chrome, add in something like the following:

body:first-of-type p {color:#ff0000;}

“First-of-type” will simply be ignored by the browsers that are already displaying your page the way you intended.

GiantIsland CSS Hack

Chrome interprets cascading style sheets (CSS) differently than other browsers. Then again, IE 5, 6, and 7 do not even interpret CSS the same! The GiantIsland CSS Hack is a relatively simple CSS markup hack that makes use of square brackets [ ] to target CSS on specific browsers like Chrome. As a bonus, it can also help you conform your CSS to IE 5, 6, 7, Safari, and Firefox, all at the same time. For more details, check it out at http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx.

Stay Away from HTML5

Chrome does not try to conform to HTML5 API standards yet, even though Webkit, its rendering engine, does support HTML5. If you use HTML5 features or syntax, you will likely run into problems. Stick with HTML4 standards and you should have an easier time. Chrome will likely support HTML5 in the near future.

Validate Your Pages

Before swearing at Chrome and throwing in the towel, validate your pages to make sure you have not inadvertently used a non-standard HTML call. You can validate any web page at http://validator.w3.org/. Some web browsers allow you to take some shortcuts with web standards, but Chrome is not very lenient.

Try it with Safari

If you can’t get your web pages to look right under Chrome no matter what you try, try your web pages in Safari before giving up. Safari is Apple’s web browser and is available for both Mac and Windows PCs. If you use Windows, you can freely download Safari from Apple at http://www.apple.com/safari/download/. Both Chrome and Safari are built using the open source “Webkit” browser rendering engine. If you can see a rendering error in both Chrome and Safari, there is a good chance that Webkit is the culprit. You can post a bug for the Webkit developers at http://webkit.org/quality/reporting.html.

Aw Snap!

The Chrome developers have provided some funny error messages (if an error can be considered funny). If Chrome gives you the dark grey “Aw Snap!” page which also says “Something went wrong while displaying this webpage,” it might not be your web page at all. Chrome has a tendency to crash on some PCs depending on system settings and other installed applications. Try a few other well-known web pages, and see if they crash. Also try closing Chrome, re-launching it, and then test your web pages again. Some people have found Chrome to be unstable on some PCs. Google intends for Chrome to become more sturdy with each new version.

Bug Reporting

If you find a bug with Chrome’s rendering, report it! You will be making the world a better place. Google maintains a public bug list for Chrome at http://code.google.com/p/chromium/issues/list.

Written exclusively for WDD by Derek Underwood, a professional web designer and software developer. You can read more about Derek and contact him at his website:

5 Things Your Clients Should Know

March 19th, 2009 No comments

Do you ever feel like you are endlessly repeating the same day? I do, every time I attend a kickoff meeting with a new client. Each time I find myself covering the same old issues from explaining the client’s role, to encouraging investment in content. I find it incredibly frustrating and this is what ultimately led me to write the Website Owners Manual.

This is not a criticism of clients, however. There is so little information that clearly defines their role. Sure, there is no shortage of material on usability, accessibility, online marketing and copywriting, but who has the time to read all of it?

The problem is that the client does need to have a very broad understanding (certainly more than can be communicated in a single article), however I have found that understanding certain key issues can make an enormous difference to the efficiency of a client.

What follows is a list of the 5 things that I believe will have the biggest impact on a client’s site. At least they should, if the client understands them and chooses to implement them.

1. The client is the secret to a successful website

I have worked on hundreds of websites over the past 15 years and each site’s success or failure has always been attributed to the quality of the client.

As web designers we, of course, like to emphasis our role in the process. This is what justifies our fee, however we can ultimately only point our clients in the right direction. It is their decisions that shape the site and their commitment that defines its long term future.

As web designers, I believe we need to clearly communicate to the client the importance of their role and dispel the misconception that they can hire a web designer and walk away.

Not only do we need to emphasis the importance of their role, we also need to define the extent of it.

2. Clients have a diverse and challenging role

I believe that the role of the client is by far the most complex and challenging in web design. Sure, dealing with IE6 is a pain, but that pales in comparison to the shear extent of issues that most clients need to handle.

A client has to be a:

  • Visionary – capable of establishing the long term direction of their site
  • Evangelist – able to promote the site both internally and externally
  • Content guardian – responsible for ensuring the quality and relevancy of content
  • Project coordinator – overseeing all aspects of the site as well as dealing with suppliers
  • Referee – making final decisions between conflicting priorities

What is even more is that the client is supposed to know enough about a broad range of disciplines (from marketing to interface design), in order to make informed decisions. It is hardly surprising that, as web designers, we sometimes feel our clients “just don’t get it!” They are simply expected to understand too much.

Unfortunately their role is also often massively under resourced. Most of those responsible for websites are not dedicated website managers. Instead, they run their websites alongside other responsibilities in IT or marketing.

It is our responsibility to explain the role of the client and ensure that they understand how much work is involved. We cannot assume that they instinctively know this.

The danger is that if you do not clearly define the clients’ role, they will end up trying to define yours instead.

3. Clients identify problems, designers provide solutions

One of the biggest problems in most web projects is that the client starts making the decisions that are best left to the web designer. Not only does this lead to bad decisions, but also inevitably leaves the web designer feeling undervalued and frustrated.

This problem can manifest in a variety of ways, however ultimately it comes down to a single issue – the client is trying to find solutions to their problems instead of relying on the web designer.

Let me give you two examples. The most obvious occurs at the design stage. After seeing your design the client comes back with comments such as ‘make the logo bigger’. This is their solution to a problem that they have with the prominence of the branding. If they had expressed the problem instead of the solution, it would have enabled you to suggest alternate approaches. Instead of making the logo bigger, you could have possibly added more whitespace or changed its position.

Another less obvious, but more significant example, is in a client’s invitation to tender. These documents are inevitably a wish list of ideas that they have for the site. They are the client’s attempt to solve an underlying issue. For example, their problem might be a failure to engage with customers, therefore in their invitation to tender, they suggest adding a forum. Of course, in reality there are many other ways to engage with customers, however unless they express the problem to you, you will never have the opportunity to suggest a solution.

At the beginning of every project, encourage your client to focus on problems and not solutions. Whenever the client suggests a solution ask why. This will enable you to understand the underlying issues.

Unfortunately by the time we have been engaged as web designers, the scope of a project has already been set and it is hard to contribute ideas. This is because the way clients commission websites is fundamentally broken.

4. Sites should evolve

A typical website goes through a constant cycle of redesign. After its initial launch, it is left to slowly decay. The content becomes out of date, the design begins to look old fashioned and the technology becomes obsolete. Eventually staff stop referring customers to the site and it is perceived as a liability rather than an asset. In the end, senior management intervenes and assigns somebody to ‘sort out the website’. This inevitably leads to the site being replaced by a new version, and the cycle repeats itself.

This problem primarily occurs because there is no real ownership of the website within the organization. Often the client you deal with is only assigned to it for the duration of the project. Afterwards, the site is left to stagnate.

This cycle of redesign is wasteful for three reasons:

  • It wastes money because the old site is replaced, and the investment put into it is lost.
  • It is bad for cash flow, generating large expenditure every few years.
  • For the majority of its life, the site is out of date and not being used to its full potential.

We need to start encouraging our clients to invest regularly in their websites. They need a permanent website manager and an ongoing relationship with their web design agency. Together they need to keep content up-to-date, improve the user interface and ensure that the technology keeps pace with change. Ultimately this is more cost effective than replacing the site every few years.

The ongoing management of content is an area that needs particular attention. Unfortunately it is often massively under resourced and generally neglected.

5. Content is king – Act like it!

I am constantly amazed at the difference between what clients says and what they do. Take, for example, content; most clients fully accept that content is king, yet few are willing to spend money on ensuring its quality. This is all the more absurd considering the amount they spend on implementing complex content management systems.

Most clients that I encounter feel that hiring a copywriter to ensure the quality and style of their content is unnecessary. Perhaps this is because they feel they are capable of writing copy themselves, however writing for the web is not like writing for any other medium. It presents some unique challenges that cannot be under estimated.

It is strange because clients are perfectly happy (well… maybe not quite ‘happy’) to pay for design. They realize that they cannot do the design without a professional designer, so why then do they believe that they can write good copy themselves?

Often when clients do write copy, it ends up being verbose and inaccessible. Stuffed with sales copy and jargon, which is largely ignored by most visitors to the site.

However, in many cases the reality is even worse than poorly written copy. In my experience, clients under estimate the time involved in producing copy for the web and resort to copying and pasting from a wide variety of offline printed material. This leads to Frankenstein copy, using a mix of styles that are often entirely inappropriate for the web.

It is our role as web designers to educate our clients about the importance of copywriting and explain the size of the task, if they choose to take it on themselves. Without previous experience most clients will significantly underestimate this task.

Conclusions

This is far from a comprehensive list. I have not mentioned success criteria, usability, accessibility, online marketing or subjective design. In fact I have hardly begun to touch on any of the things a website owner should know, however I do believe that if our clients were only to adopt the 5 points above, it would make a profound difference to the success of their website. Now it falls on you to persuade them.

Categories: Tips and Tutorials Tags: , ,

10 Web Typography Rules Every Designer Should Know

March 19th, 2009 No comments

When someone visits a website you’ve designed, the odds are that they don’t care much about the colors, images or sounds, they’re immediately looking at the text.

No matter how many bells and whistles you’ve built into a website, everyone relies on text to accomplish whatever they’re visiting the site to do.

That alone should make typography, the art of arranging type, a priority for any web designer.

In this article we take a look at 10 easy rules to keep in mind when designing your next web project.

1. Read through the text yourself

With a design like JonesingFor a designer without a great grasp of the text would have struggled to put together the typography that makes this site really work. As you tackle your own typography, you probably don’t have to worry about writing a site’s text — but you do have to read it!

jonesingfor

Some web designers think that just copying and pasting out of a text file constitutes the total of their textual duties. But reading through the text provides at least a basic idea of how the text can be integrated into a website, avoiding the disconnect between the writing and the design of a website.

You can kick your typography up yet another notch, if you can read through the text once it’s in place in your design. Take special note of the space around the letters. Do you have any unusually big spaces that look odd? A little careful typography can eliminate those issues. You can also get an idea of lines that might be too long to easily read, awkward line breaks and similar issues.

  • 2. Dump Lorem ipsum as soon as possible

    Do you think you could have designed Jesus Rodriguez Velasco’s website without the actual text? The site is heavily dependent on the written word — and very specific words too. Even the body text got special attention with a drop cap and some other tweaking that just wouldn’t have been possible with Lorem ipsum.

    2loremipsum

    Unless the text of your website is actually Lorem ipsum, dummy text will bear no similarity to the real thing. That means that any tweak you might make to the text — or the design surrounding it — will have to wait until you get the real thing. Asking for (and getting) text from your client as early as possible in the process will give you the ability to match your overall design and your typography.

    3. Show a clear hierarchy

    3hierarch

    When you arrive at Rik Cat Industries, you know immediately where you should start reading. Even though there are a few links at the top of the page, Rik’s welcome catches your eye first. It’s much bigger, using typography to establish a clear hierarchy.

    Every site needs a well developed hierarchy: indicators of where to start to start reading and how to proceed. Your typography can provide that hierarchy — just as Rik’s does — as long as you know your hierarchical order ahead of time. By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can’t provide.

    Your design’s hierarchy goes beyond just the typography you employ, of course, but since users almost always start with the text, it makes sense for designers to do the same.

    4. Pay attention to both macro and micro typography

    Relying entirely on typography for their front page, the Crowley Webb and Associate’s website was designed with two factors in mind: both macro and micro typography.

    Macro typography is the overall structure of your type, how it appears in the context of your design and its aesthetic when you consider your text as a block on its own.

    Micro typography is more concerned with the details of spacing, the issues that determine whether words are easy to read. Micro typography is an absolute necessity when it comes to putting together a block of text: if it isn’t legible, there’s no point in proceeding. Crowley Webb and Associates addressed this question through both careful writing and spacing out those words that the site would highlight.

    But macro-typography provides you with the opportunity to make your text more than well-spaced: it’s the chance to make it look appealing and a part of your whole design. The choice of typefaces and colors on this website create a viable whole. Ignoring either facet of typography is detrimental.

    5. Take care with type colors

    It would be so easy to lose text in the background of ArtofElan, especially the bright red on dark red combination used by the designer. When a web designer works with colored type, care is absolutely necessary, there’s no guarantee that a red on red combination, or even a yellow on red combination will be visible. After all, everyone has visited a website where the text seemed to be only one shade off from the background color and gotten a case of eye strain when they tried to read it.

    The easiest fix for this situation is to make sure that the color of your type is drastically different from that of your background. Black and white work so well because they are as drastically different as you can get, but there are some color combos that work well: something along the lines of a dark blue on a light pink will get the job done. Reversed out text is pretty tricky… while you can work with light pink text on a dark blue background, you’re more likely to get a complaint about it.

    6. Get serious about your CSS

    If your CSS is solid, you can move between pages of your website seamlessly, just as the different versions of Hutchouse.com rely on different stylesheets to create some impressive effects. Even if you don’t take things as far as Hutchhouse, CSS can help eliminate amateur typography issues like changing up typefaces and sizes between pages.

    CSS can provide easy consistency between your typography across the entirety of a website. If you are consistent in how you use type, however, breaking that consistency even a small amount can make whatever you wish to highlight truly stand out, just like establishing and then breaking a grid can make for an effective design. In web typography, keeping your fonts consistent can be a simple matter of CSS.

    7. Ditch the centered text

    Choosing an alternative to centered text can make a website design easy to read, just like DesignCanChange.org. Opting for centered text, especially on a page like this, would make for a problematic page: the jagged edges centering creates on each side make it much harder to read and there are plenty of opportunities for perfectly centered text to wind up distorting the rest of your designs on different displays.

    In some circles, centered type is only one step up from using Comic Sans in a website design. You might consider it for a headline, but in general, aligning your text to the left will make your readers much more comfortable, unless they read from right to left.

    8. Deal with smart quotes and other symbols

    Luigi Ottani’s site showcases what careful attention to quotation marks and other symbols will get you: a complete lack of problems when the site displays those symbols. Many websites are dotted with symbols a browser cannot display. It’s a legacy of the fact that most of the text a web designer works with was probably written in Microsoft Word or another piece of word processing software that makes all sorts of little changes to text without the writer paying much attention.

    One of the worst changes is smart quotes: the curly quotation marks Word automatically substitutes for straight quotation marks. Another problem area comes when you work with text written in another language: accents and umlats can cause just as much trouble as Word’s helpfulness. If you just copy and paste text with such changes into your design, you’ll likely have to go back and fix them later, at least for some web browsers.

    Instead, get them early in the design process so you can focus on making your text fit better with your design. If you do want those fancy symbols and smart quotes showing up in the final design, break out your HTML entities.

    9. Plan for your text to get larger

    When you increase the size of the text on Veerle Pieters’ website, it’s not quite as pretty than if you use the font size she picked out. However, you can still read everything, locate links and so forth, something that is true of very few websites.

    That’s because, in part, many designers make sure to layout text in 10 point font or even smaller. Most people are comfortable reading such fonts, but Baby Boomers make up a huge section of the web-browsing population and a lot of those aging web surfers are going to have their browsers set to display type as large as they can. Your text, as well as your design, needs to be able to adapt to that fact.

    It’s also worth taking into account the fact that browser size can vary dramatically, moving text around to unexpected locations if you aren’t careful. If bumping the size up a point creates problems, that older demographic is going to move on to the next website in a hurry. Having to scroll forever over to the side will have a similar result.

    10. Show a preference for sans serif

    If you look at the A List Apart’s website, pretty much every big block of text is set in a sans serif typeface, making it much easier to read. Headlines and other smaller blocks of text are laid out in serifed fonts, creating a balance between the two.

    When it comes to laying out text on a screen, sans serif fonts are almost always the best bet, especially if you chose a font like Verdana that was designed for display on a computer screen. Serifed fonts have a higher chance of displaying poorly, becoming blurry or even pixelated.

    It’s not possible to entirely avoid serifs, of course. But for large blocks of text especially, using a font without serifs can offer an extra level of guarantee that visitors will be able to easily read a site’s text. When you’re choosing fonts for a project, look through your sans serif options first.

Categories: Others, Tips and Tutorials Tags:

13 iPhone Apps for Graphic Designers

March 19th, 2009 No comments

If you’ve found a greater purpose for your iPhone besides calling or Googling directions, then you’d probably like to explore what your iPhone can offer you in the realm of graphic design.

I’ve compiled a collection of the most useful 13 iPhone apps for graphic designers that I’ve come across. Each contributes and offers a unique ability to aid you on your journey through graphic design.

We’ll be taking a look at applications that help with task management, enhance photos, sketching and a whole lot more. As usual, feel free to add your comments below and let us know which ones you like best and which ones you use.

1. Palettes

palette

Palettes is a great app that allows you to create color schemes. You’re able to sample colors from websites, photo albums stored in your iPhone, and more. You can also import and export palettes to Photoshop. Grab colors while you’re viewing a picture, a web page, or anything else on your iPhone. This can come in handy, for example, if you visit a website and find a color scheme that’s extremely appealing, with Palettes you’ll be able to introduce yourself to the exact colors used.

2. Omnifocus

OmniFocus:  Because task management is important for any graphic designer (despite the unhealthy managing many of us take part in), I’ve decided to include OmniFocus, a standalone application or a conjuncture app that syncs to your Mac. Set due dates for your latest projects, or a reminder that you need to submit your artwork soon. If you’re using it in conjunction with the Mac app you can also send yourself todo’s, notes, or quick memos through email and it automatically adds them to your OmniFocus inbox.

3. CameraBag

camerabag

CameraBag: This app allows you to simulate several different camera styles in a unique way. For example, you can take a picture of an individual and apply a wide range of effects to that specific photo. You could apply a fisheye lens effect, an infrared effect, a simulated cinema effect, a widescreen effect, and other effects that mimic the style of old cameras as well.

4. Pixelpipe

PixelPipe: enabled you to share a load of photos through your iPhone to over 50 supported sites such as Twitter, Flickr, MySpace, YouTube, Tumblr, WordPress, and FTP sites. The way this works is once you find a picture on your iPhone or on a site, you can then simply upload them to the sites mentioned above (and more) in an instant.

5. CliqCliq

CliqCliq:  Most of us use CSS, HTML, or Flash in order to design, however, we need something that can give us the exact match of the colors we’d like to utilize. CliqCliq allows you to find the exact colors you wish to use and immediately converts them to a variety of scales and formats. Integrate your iPhone camera and automatically extract colors with this simple palette app.

6. ZeptoPad

 

zepto-pad

ZeptoPad is a sketch pad tool for your iPhone. You can sketch, design, plan, and use your finger as a pencil to draw. You won’t be limited by screen space many times as you can enlarge your screen whenever you need to. You’re also able to cut and paste pictures, texts, and graphics onto your sketch pad to later edit and use.

7. ColorExpert

ColorExpert makes it easy to grab, identify, capture and showcase your chosen colors. If you find yourself looking at a picture or graphic art and you’d like to use this color scheme in your design, then you can simply click the ColorExpert button on your iPhone and find out the shade, color scheme, and palette you would like to match. You can later email your findings to yourself for desktop use, a friend, or to a client as well.

8. iBlueSky

If you’re on the go and ideas start flowing into your mind on your current or future project then you can use iBlueSky to map your brainstorming path while never forgetting to feed your creative side. Create a collection of ideas, thoughts, and suggestions, and then email them in PDF or PNG formats. You can also print a hard copy of your brainstorming in PDF format as well. This is a video that elaborates on the uses and further features of this mind mapping app.

9. Caliper

Caliper is a nifty measuring tool that like its names states uses caliper like jaws to measure objects. You can quickly and independently move the upper and lower jaw of the caliper with the swift move of a finger. This app takes measurement in pixels, inches, and centimeters.

10. iPhlickr

iPhlickr is great if you’d like to instantly browse the Flickr archive. All you have to do is go to the iPhlickr website (http://www.chandlerkent.com/iphlickr/#_searches)on your iPhone and begin to browse photo albums and any graphic on the Flickr site as well. You can access your photo album and search Flickr users too.

11. RulerPhone

RulerPhone’s  “motto” is that you can measure anything that you’re able to take a picture of. Convert your phone into a tape measure and take snaps of items you’d like to find out their sizes. Take a picture of a frame, window, silhouette, couch, or even a car and quickly find out the size of that item. Here’s how it works, once you have the picture taken, you position and align the arrows to the area where you’d like to find out the measurements of. Once these two steps have been knocked out you’ll be able to instantly reveal the objects measurement by dragging the ends of the virtual measuring tape to configure your desired distance.

12. Photobucket

Photobucket allows you to upload all of your photos to Photobucket and share them with your colleagues or clients all through your phone. You’re able to send any image through email, Instant Messaging, Facebook, and several other social networking and blogging sites.

13. Dexigner

screenshot

Dexigner News & Events: This application allows you to view the latest news, events, exhibitions, conferences, and competitions having to do with anything regarding design. Grab design news and stay up-to-date with breakthroughs at design events and competitions. It’s like your own mini design portal all on your iPhone. You do not need to download any software, all you need to do is navigate the developers site through your iPhone.

Categories: Designing Tags:

10 Writing Tips for Web Designers

March 19th, 2009 No comments

Writing for the web is a skill set of its own. Website text, or “copy”, needs to be written in a different tone for the web than a brochure. It needs to be built around the target keywords for the site and be written for a lower literacy audience.

Most web designers have a leg up on traditional freelance writers since they have their pulse on what the search engines like and don’t like to see on a site.

While practice is the best teacher, these 10 tips should get you on your way to providing an extra service for your customers that they will appreciate and you will find very rewarding.

Tip #1:  Do Not Copy the Print Brochure

This is the most common web writing mistake made by web designers. Brochures and print marketing materials use sales language that does not scan well on a website. Any use of sales language on a website beyond the usual “order our products here” stuff will make your users click off faster than a Guitar Hero champion can shred the final level. Ditto with puffed up marketing claims such as being “the best” or “the greatest”. Brochures are riddled with this stuff as countless marketing studies have shown that such language does work in print marketing materials.

Some clients will insist that you use their marketing materials since they are so heavily invested in them. It is your job as the web professional to explain to them that what works offline does not work online.

Tip #2:  Write for a Low Literacy Audience

Pfizer conducted an extensive study on web reading habits in order to ensure that they were communicating effectively with all web users. What they turned up is that 43% of web users are “low literacy” users who cannot understand a page written above a Grade 6 level. The upshot of the study was that top level pages should be written at Grade 6 level, while more in-depth pages used deeper in the site should be written at a Grade 8 level.

How do you do that? Google Docs. Under the Tools menu, select “Word Count”. This will give you a host of statistics, including Flesch-Kincaid Grade Level. That figure should be at or around 6 for your top level pages, as suggested. If it isn’t, go back and change larger words that you have used until you’ve worked it down to where it needs to be.

After you’ve tried a few exercises in whittling your language down, you’ll see that the result is clearer and more scannable than the version that you started out with. Most higher literacy web users know to drill down to the lower level pages in a site if they want more information; the only thing that you have to do is make sure that your site navigation allows for this.

Tip #3:  Avoid Landing Pages

There is a lot of internet noise on web writing that you have to tune out. The loudest noise comes from people who believe in “landing pages” as a proper online marketing technique. These pages do more to scare away customers than they do to attract them. While the following is a mock example, it isn’t far off what most of them look like:

Landing pages are too sale oriented, gimmicky and way too long.

If your website content can be described by any one of the above terms, you’ll want to pitch it out and start over.

Tip #4:  Write to a Flowchart

Most of you already do these up in the form of a sitemap. Do one with writing the content in mind; you may be surprised at how your site navigation changes. Submit your chart to the client and get clearance from them before proceeding so that they don’t feel that you are missing anything when you deliver the final copy and site to them. Keep menu items interesting and engaging for the consumer, with snappy and short headlines.

Click on the image above to download a sample flowchart.

Tip #5:  Do Your Research

Once you have your flow chart, creating the site copy is a matter of filling in the blanks. Do solid research on your client’s industry while writing these pages. Proper research will lead to factual copy that users will enjoy experiencing. Every sentence you write should be based on a solid fact. Think Twitter, not Great Expectations.

Tip #6:  Keep It Short

In general, no web page should be over 600 words or four paragraphs in length. If you need to have a larger page for any reason, consider creating a new category with a sub-menu and several lower level pages. If you must have articles in your site, create a separate blog section for them as your users are more likely to actually read them if they are done in a blog format.

Tip #7:  Write for Humans First

The more interesting you make your content, the more people will link to it and the better your search engine results will be. If you write for humans first and search engine bots second, you’ll end up with way more traffic.

Tip #8:  Keyword Optimize for Search Engines

Use keyword research tools such as Keyword Discovery from Trellian or Google Analytics to research target keyword phrases for both the entire site and each page. Make sure to place the site target keyword phrases on each page along with your page target keyword phrases. Keep it human readable and avoid repeating keyword phrases more than three times throughout the page. Don’t repeat them at all on shorter, top-level pages.

Here are some examples of good and bad keyword writing:

Note the repetition of the keyword in the bad example. As some of you know, this will make the search engines frown on your rankings, yet it is still a method that many search engine optimization writers use. Most search engine optimization experts will agree that meta-tags have almost gone the way of the dodo and on-page content optimization is far more critical. Apart from the keyword research mentioned here, the best way to optimize is to make your copy interesting and human readable. Clunky mechanical text that is obviously meant for search engines will discourage humans and their valuable clicks that the search engines track.

Tip #9:  Keep the Client in the Loop

Submit the copy to your client for review. Do not consider it finished until the client has had a chance to look at it.

If you don’t keep the client in the loop, you’ll be wasting a lot of time going back and doing rewrites. It isn’t possible for you to be an expert in their industry overnight and you have to accept their guidance.

Make it clear to the client that you will change anything that they like, but some items such as simpler language and keyword phrases are there for a reason.

Tip #10:  Hire a Pro

If you aren’t comfortable with the prospect of writing website copy or you just don’t feel that you have the time, consider hiring a professional. The best way to do this is to put out an open call on Craigslist in your area for a freelance writer. You’ll get about a million responses, but this is really the only downside. Narrow them down by asking for ‘experience with web writing’ and a portfolio that demonstrates live links of their work. While most freelance writers are professionals and experts at what they do, some do not have the awareness of web writing that you are looking for.

A good writer will cost you $50.00 to $100.00 per hour, depending on experience and how technical the writing is that you need them to do. Most writers are reticent about publishing their rates and will usually quote per project, but this puts you in the ballpark of what you should be paying.

Let your writer work directly with the client. Have them carbon copy you on all communications, but don’t funnel communications through yourself as this may lead to mistakes and delays. Simply don’t hire someone that you do not trust to communicate directly with the client.

Categories: Others Tags: ,

How to Create a Professional Logo

March 19th, 2009 No comments

A professional logo can enhance a company, an organization, or a product. On the other hand, an unprofessional logo can ruin a brand and mar an otherwise good designer’s portfolio.

Many logos in use are unprofessional and carry all the tell-tale marks of an amateur or a beginner. Everyone thinks they can design a great logo, but simply knowing your way around Photoshop is not enough.

Here are some insights into the process and workflow of effective and modern logo design. With these tips and your creativity, you can make your logo designs shine with the very best.

1. Design: Sketch and Brainstorm

A lot of beginners jump right onto the computer to create a logo. However, more often than not, a lot of time is spent fiddling with special effects and filters. While this can be useful, it usually means that the thoughtful design and artistry of the logo itself has taken a back seat.

A better way to start is to get a fresh sheet of paper and a pencil. Think about the meaning and the feeling you want the logo to impart to the viewer. Is it for a high tech game company or a historic non-profit organization? Should it be complex or simple? As you are thinking, sketch and doodle your ideas. Don’t worry about making everything perfect. You just want to let your natural creativity flow without your computer software taking over at this stage.

As you sketch different options, start eliminating the designs that seem weak or inappropriate. When you are satisfied with your ideas, move to the computer. (For those of you with graphics tablets, you can try sketching your ideas directly on your computer, but try and keep away from special brushes and effects.)

If you are designing a logo for a customer, keep in mind that they might not like all your ideas. So, before spending too much time on each design, you may want to present some work-in-progress designs to gauge their level of interest. This can be a huge time saver, especially if your customer has not given you a lot of direction or if they tend to be very particular.

2. Build: Vector Graphics

Ah, the world of vector graphics. This is a topic that many beginners (and some professionals) find confusing. In recent years, some software such as Photoshop, Paint Shop Pro, and Fireworks have blurred the lines between vector and bitmap graphics.

Common image formats like GIF, JPEG, BMP, and TIFF are all bitmap formats. Digital photos are perfect examples of bitmap graphics (also known as a “raster” images) – because they are made of dots which are also known as pixels. Bitmap graphics have a specific resolution. If you zoom in on a digital photo, you will see the individual pixels. You can scale a bitmap down in size, and get some decent results, but increasing the size of a bitmap means that you are blowing up the pixels and you will get mixed results depending on the amount of enlargement. Photoshop, Pixelmator, Paint Shop Pro, and Painter are all good examples of applications that are primarily designed for bitmap graphic creation and photo editing. They are not the best tools for logo design.
In contrast, vector graphic files are not made of dots or pixels. Instead, they are mathematical formulas for shapes. Vectors can be enlarged or reduced, to any size, with no loss in detail or sharpness. For example, the lines and curves of a vector graphic will look equally as sharp on a small business card as they will on a giant advertising billboard. Professional logos are made with vector graphics so that they can used for commercial printing, web sites, television, and all other forms of media. Vector-capable file formats include EPS (encapsulated postscript), PDF (portable document format), and AI (Adobe Illustrator).

If you learn to use vector-specific drawing software to create logos, you will be able to create perfect straight lines, smooth curves, and accurate shapes quickly and easily. Excellent commercial vector drawing programs include Adobe Illustrator, Lineform, FreeHand, and Corel Draw. In addition, there are excellent free alternatives including Inkscape which is shown below.
Using your pencil sketches as a guide, use your vector drawing software to recreate a crisp version of your ideas. If you are new to using vector software, take a few moments to learn the basics of using the pen tool to create lines and “bezier” curves. Keep in mind that vector shapes can have a “stroke” of varying thickness (the outside line of the shape) and a “fill” color or pattern (the inside of the shape).. Decorate: Color Schemes

When thinking about “fill” and “stroke” colors, try and use color combinations that make sense for the logo. For example, you might not use bright pink and orange for an investment bank. For color inspiration, look online at Adobe’s free Kuler service or pick up a copy of Jim Krause’s Color Index 2.

4. Versions: Black and White

After you’ve made brought your logo to life with color, consider how it will look when photocopied or faxed. If it looks muddy and incoherent when converted to black and white by a copier or fax machine, its time to get back on the computer and make a separate version of your logo that is purely black and white and ready for anything. The black and white version may differ somewhat from the original, but it should retain the overall look and feel. You may find yourself converting a solid shape to a hollow shape or vice versa.

5. Planning: Media

While developing a logo, keep in mind your target medium. For example, if a logo will only be displayed on a web site, you might jazz it up with multiple colors, fades, or even special effects. However, if a logo will also be used for commercial printing, you need to consider the complexity of the logo and the expense that multiple colors and effects will add to the printing costs. For some logos, you may want to create a web version and a less elaborate print version. In the printing world, each color is called a “spot” color and the more colors that are required, the more expensive the printing.

You should also take into consideration your “trapping” settings for your logo graphics. Trapping refers to the space between two colors. On a printing press, each color is usually printed separately and there can be some slight movement of the paper and machinery as each color is printed. These slight movements can cause thin hairline blanks between colors and even half of a millimeter will be noticeable if you have 2 colors that are designed to touch each other perfectly. This is equally important for colored shapes that are outlined in black. In your design, you can create an overlap (known as a “choke” or a “spread”) to occur between adjoining colors to reduce the chances that movement on the printing press will be noticeable.

However, if you look at a lot of professional logos, you will notice that different colors do not always touch and there is frequently blank space built into the designs. Blank space (”white space”) is not only an important visual tool but it can also eliminate trapping worries.

6. Refine: Typography

Words that form a part of a logo are just as important as graphics. A lot of beginners will use any old font for a logo. However, the lettering style, fonts, and even the case (uppercase, lowercase, mixed) in a logo can have a dramatic impact. Never underestimate the need to use effective typography. Also, if your logo uses a font, use your software to convert the letters into shapes/outlines. That way, if you need to send the vector file to someone, they won’t need to have your font installed on their system.

Categories: Others, Tips and Tutorials Tags:

14 Essential Magazines for Graphic Designers

March 19th, 2009 No comments

In spite of the tremendous expansion of the Internet, the power of the printed word remains strong and popular.

magazines

Print media is where it all began and today we take a close look at some amazing design magazines that can really boost your productivity and expand your design knowledge.

In addition to their printed versions, some magazines also offer online versions on their websites as well as PDF downloads and single issue orders. Order online or pick them up at your local bookstore.

Here’s our recommended list with descriptions taken from each magazine’s website…

Web Designer

Web Designer is the UK’s premier publication for the discerning online author.

Aimed at all those at intermediate to professional levels within the trendy 20-35 age bracket, its predominantly tutorial-based format follows cutting-edge projects in Dreamweaver, Flash, and Photoshop.

Supplemented by the latest industry news and feature topics, Web Designer reflects all that is inspirational and exciting about working with new media content – representing the only choice of its kind on the newsstand.

Layers Magazine

Layers magazine provides in-depth tutorials, cutting-edge techniques, secret tweaks, expert insights, and a wealth of information about the entire Adobe Creative Suite®, including InDesign®, Illustrator®, Photoshop®, Acrobat®, Lightroom®, After Effects®, Premiere Pro®, Dreamweaver®, and Flash®.

Published six times a year, Layers provides the design ideas, 3D rendering tricks, digital video concepts, artist portfolio profiles, unbiased product reviews, and current industry news that make Layers an absolute must-read for today’s creative professional.

Photoshop Creative

Photoshop® Creative is the perfect magazine for learning more about Adobe’s outstanding application.

Each issue is packed with inspirational tutorials covering the whole scope of the software, from creative projects, to practical guides to using tools and techniques.

Readers also benefit from a collectable CD-ROM each issue. Whatever you use Photoshop for, Photoshop creative will help you become a better digital artist.

 

.Net

.net is the world’s best-selling magazine for web designers and developers. As well as a host of great features, .net magazine also boasts more than 30 pages of tutorials each issue, covering topics such as CSS, PHP, Flash, JavaScript, web graphics, and more – all written by contributors from some of the world’s biggest design agencies.

Each month you’ll also receive a packed CD, including an hour of video projects, full software, templates, tutorial files, and more!

Each month .net includes the hottest new sites from around the web, features a bevy of brilliant tutorials, and covers the major issues affecting designers and developers.

Print

Print is a bimonthly magazine about visual culture and design. Founded in 1940 by William Edwin Rudge, Print is dedicated to showcasing the extraordinary in design on and off the page.

Covering a field as broad as communication itselfpublication and book design, animation and motion graphics, corporate branding and rock posters, exhibitions and street art—Print covers commercial, social, and environmental design from every angle. Engagingly written by cultural reporters and critics who look at design in its social, political, and historical contexts, Print explores why our world looks the way it looks, and why the way it looks matters.

A four-time winner of the American Society of Magazine Editors’ National Magazine Award for General Excellence, most recently in 2008, Print has been honored many times by ASME, the Society of Publication Designers, AIGA, The Art Directors Club, and The Type Directors Club.

I.D.

Looking for cutting-edge design from every discipline? Insight into what drives the hottest design trends? Unique coverage of the world’s best designers? Then discover I.D. and get the one design magazine that covers it all: concepts, products, environments, interactive, furniture, and more.

Published since 1954, I.D. Magazine is America’s leading critical magazine covering the art, business, and culture of design.

Winner of five National Magazine Awards, the publication appears seven times a year. Issues include the Annual Design Review (America’s oldest and most prestigious juried design-recognition program) as well as the I.D. 40, and Design + Business.

 

How

HOW magazine’s goal is to help designers, whether they work for a design firm, for an in-house design department or for themselves, run successful, creative, profitable studios.

HOW strives to serve the business, technological and creative needs of graphic-design professionals. The magazine provides a practical mix of essential business information, up-to-date technological tips, the creative whys and hows behind noteworthy projects, and profiles of professionals who are influencing design.

Founded in 1985, the HOW brand now extends beyond the print magazine to annual events for design professionals, yearly design competitions, digital products and books.

More info | Subscribe

Communication Arts

Communication Arts magazine is the leading trade journal for visual communications. It showcases the top work in graphic design, advertising, illustration, photography and interactive design.

Since 1959, more graphic designers, art directors, creative directors, commercial photographers and illustrators have turned to Communication Arts for ideas and inspiration than to any other creative publication. What makes Communication Arts so special?

Our unique combination of respected juried Annuals, in-depth profiles in our multi-topic issues and numerous informative columns makes Communication Arts the premier publication to cover all aspects of visual communications.

 

Digital Arts

Digital Arts is the UK’s leading resource for creative professionals, both in print and online. Digital Arts addresses the needs of those within the exploding digital media market by providing relevant and forward thinking content, and by consistently running more exclusive reviews and features than any other magazine or Web site in the market.

Now in its fifth year, Digital Arts consistently delivers high-quality content, providing its professional readership with the latest news and reviews first.

Digital Arts prides itself on providing unbiased product-led information and professional advice, across all platforms and disciplines. Digital Arts uses extensive in-house lab facilities for product assays, producing top-class reviews and trustworthy lab tests.

Before & After

Before & After magazine has been sharing its practical approach to graphic design since 1990.

Because our modern world has made designers of us all (ready or not), Before & After is dedicated to making graphic design understandable, useful and even fun for everyone.

The magazine is available as a PDF or printed as other magazines.

CMYK

CMYK Magazine is where aspiring creatives showcase their talents to an industry driven by inspiration and new ways of creative problem solving.

At the same time, CMYK Magazine is where creative directors, agency principals and art buyers recruit students and recent graduates at today’s top art-design schools: art directors, copywriters, designers, photographers and illustrators.

Each issue of CMYK Magazine features as many as 100 selections from more than 80 art-design students attending over 30 of the world’s leading art-design schools, departments and workshops.

Computer Arts

Computer Arts is the one-stop shop for professional advice on creating digital art and illustrations.

Computer Arts, the world’s best-selling magazine for digital artists and designers, boasts a strong line-up of tutorials every issue, covering everything from manipulating photographs with Photoshop to creating amazing vector illustrations with Illustrator.

You’ll also find tonnes of tips and tricks for web design, typography, 3D, animation, motion graphics and multimedia. It’s the one-stop shop for professional advice.

 

Computer Arts Projects

Computer Arts Projects is the only magazine to give you an in-depth guide to a different creative subject every month. Computer Arts Projects is the successful monthly spin-off of Computer Arts magazine.

Each issue gives you an in-depth guide to a different creative subject, and recent issues have covered themes such as print design, web design, Photoshop, typography, packaging, creative advertising, and how to start your own design business.

Inside every edition, you’ll find great step-by-step tutorials and tips from the best digital artists in the business, showcases and profiles of up-and-coming talent and established creatives, as well as explorative features on the subject in hand.

 

Advanced Photoshop

Advanced Photoshop magazine is the perfect magazine for polishing up already great Photoshop skills. Aimed towards Adobe Photoshop professionals and enthusiasts, every issue prides itself on its unbeatable quality and sophisticated content.

Every month you can have the chance to develop your techniques with a bunch of creative and challenging Masterclass and Workshop tutorials. Our intention is to give you the chance to learn new tricks and fine-tune your skills.

Whether you’re a design student, an enthusiast who is considering going into the design industry full-time, or an established pro, we guarantee that there will always be something new to get your teeth into.

How To Sell Stock Photos

March 19th, 2009 No comments

In the first part of this series, we presented stock photography from a marketing and advertising perspective.

You learned about different license types, the photo subjects most sought after by stock agencies, copyright, licensing and more.

In this second part, we’ll present the technical and design aspect of stock photography. You, the photographer, will learn the technical skills necessary to improve the quality of your photos in order to be accepted on stock photography websites.

We’ll cover photo composition, file formats, and post processing as well as a short list of insider tips.

Composition

There are times when we look at a photo and we say it’s beautiful, but we can’t say why that is. That is great composition.

Composition is the most important thing in stock photography, but every stock agency has its own guidelines that you should carefully read and examine. Composition, quality and professionalism go hand in hand from a stock agency’s perspective.

Composition is not always as easy as adhering to several rules, because photography could be very subjective and photographers must use their creativity to transmit their messages through their photos.

As with every other aspect of stock photography, when you decide to take a photo for the purpose of submitting it to a stock website, you have to look at what others submitted and what works and what doesn’t.

Stock agencies always welcome fresh new angles in photos where a little creativity is put into that photo and not just the same old boring shot-from-the-front angle. The best way to find fresh angles is to experiment and always think of how you can improve the composition you’re about to shoot. If you’re shooting a flower, try to get on the same level as the flower or shoot far above it.

Of course there are a few rules to keep in mind that it will greatly help improve your chance to be successful with stock websites, but one particular rule tends to be more important than the rest:

1. The Rule of Thirds

Rivertree

According to Wikipedia the Rule of Thirds states that “an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections”.

Essentially it’s not a good idea to put your subject in the center of your photo, because it would create  a snap shot instead of a professional photo. Always to imagine these horizontal and vertical lines when taking shots.

2. Taking Tack Sharp Photos

“Tack sharp photos” is the term that photographers use when they talk about the sharpest photos that you can take with a camera and a lens.

These little things set the professional photographers apart from the amateurs and stock agencies love these.

If you’re thinking it’s not necessary to use a tripod to achieve tack sharp photos, then you’re on the wrong path. A tripod is essential for sharp photos.

You have to eliminate every little vibration of the camera that might prevent taking sharp photos, but using a tripod is not enough. Simply touching the camera and pressing the shutter button can cause tiny vibrations that will be transferred to the photo. To prevent this, use a cable release. Every digital SLR camera nowadays has this feature, so you can easily attach a remote control to it, either wired or wireless. If you don’t want to or cannot use a remote control, the next best thing is to use the camera’s self timer.

Now, the following statements may sound a little silly. If you set up your camera on a tripod and you have a lens with image stabilization or vibration reduction, turn this feature off.

Let me explain why: Manufactures created this feature for situations where your hand holds the camera, but in situations where the camera sits on a tripod and it’s absolutely still, you should turn the image stabilization off to prevent the lens from looking for vibrations in the image. By looking for vibrations, it creates a slight movement in the lens, enough to cause a distortion on the photo.

canon-image

3. File formats

 

Many beginner photographers ask this question: What is the best file format for photographs? From a stock agency’s points of view, they recommend file formats that preserve the best quality of the photo.

There are a few commonly used file formats that are also available in digital cameras: Jpeg (JPG), PNG, TIFF and RAW.

The file format requirements usually varies on each stock photography website, but there are a few common steps that you should bear in mind in order to maximize your photo’s quality, which in turn will translate to a successful submission.

The RAW file format is the best to use when taking your photos, but stock agencies don’t accept it simply because it has several disadvantages: Firstly, the file size is too large. A typical RAW image file starts at around 14-15 MB. Secondly, each camera manufacturer’s RAW file format is different. It would be a tedious job for stock agencies to sort through these formats, therefore they simply don’t accept RAW files.

A RAW file preserves all of the information that the lens passes to the camera’s computer, everything from color space to EXIF information. Usually it’s the way to shoot the best quality photos and it’s also good for post processing too.

The Jpeg file format uses the lossy compression methods, meaning that not every piece of information is preserved when saving the photo, and it cripples the quality too, but stock agencies usually prefer this file format.

The best a photographer can do is to shoot photos in the RAW image format, post process it, tweak it and then convert it into a Jpeg with 100% compression quality.

4. Improving Photo Quality (Post Processing)

For a quality photo, the post processing work should be the absolute minimal, of course not every time we can get away with beautiful photos, so we need to tweak it here and there.

I will present the most common problems that a photographer will encounter and how to fix them, in order to get submitted on stock photography websites.

4.1. Noise Reduction

To keep this problem to the minimal or non-existent, you should think of this before you shoot your photos by setting your camera to the lowest ISO speed.

ISO speed is the camera’s sensitivity to light, the higher this number the more sensitive the lens is. This number can range from as low as 50 to as high as even 8000 on really expensive dSLR cameras. If the ISO is set to a high number, the noise which appears on the photos won’t be acceptable for stock photo submissions.

Given the fact that that we can’t always set the lowest ISO considering weather conditions (e.g. rainy day, cloud shade, etc.) we could post process the image to reduce this noise and improve the photo’s overall quality.

Luckily Adobe Photoshop CS3 has a really good noise reduction filter. Consider this image:

In Photoshop go to Filter -> Noise -> Reduce Noise

noise-reduction

Set the following values, strength 8, preserve details 75%, sharpen details 30%

reduce-noise

The result is shown below. You can clearly see the image is smoother and the noise is reduced significantly.

 

This technique is fairly simple. You can find a more complex and effective method at cambridgeincolour.com/tutorials/image-averaging-noise.htm using the Image Averaging technique.

4.2. Resolution Change

This is not really a post processing technique, but a good tip that you should always take into consideration. Always shoot at the camera’s highest resolution and you can then reduce the resolution if necessary in Photoshop. To do this, go to Image -> Image Size.One important thing to mention here: don’t ever scale up your photos, because this will result in mediocre quality. Stock agencies will notice this and reject them.

4.3. Sharpness

I will show you a really cool trick that you can use to sharpen your photos by using the Unsharp Mask. The name is a little confusing, but this method works best for me and I consider this technique the best, because it’s easy to apply, resulting in significant improvements.

Let’s take the following image:We need to change the Image Mode first, so go to Image -> Mode and choose Lab Color

sharpen-image-step1

Go to the Channels palette and select the Lightness channel. (If you can’t find the channels palette on the right then go to Window -> Channels to open that window).

 

Go to Filters -> Sharpen -> Unsharp Mask and adjust the values as you see fit.

sharpen-image-step-3

Usually, for portraits, the following values works best for me: Amount 130%, Radius 1, Thresold 10

 

Switch the Image Mode back to RGB by going to Image -> Mode -> RGB. You can see the final result below.

sharpen-image-2

5. Insider Tips

  • Always think before taking a shot. Are the light conditions good? Is the subject framed correctly?
  • Think of the following rules: Rule of thirds, Golden Ratio, horizontal and vertical symmetry
  • A little post processing won’t harm anybody
  • If you shoot portraits, always focus on the eyes. Make them pop out of the photo
  • Use the highest resolution your camera will allow and always use the RAW file format
  • Set the ISO as low as possible, even at night, and just put your camera on a tripod
  • Don’t post edit your images in JPEG or other lossy image file formats
  • Avoid harsh shadows, distorted colors, under/over exposed images, purple fringing and lens flare
Categories: Designing Tags:

7 Great Podcasts for Web Designers

March 19th, 2009 No comments

Whether you’re a seasoned professional or a student just diving in to the web design field, audio podcasts are a great way to learn about new techniques and listen to discussions with big name pros without spending a fortune on conference fees.

They’re perfect for busy multi-taskers. You can listen to them during your commute or while performing menial tasks at your computer.

Below is a list of 7 great podcasts for web designers:

1. UIE Brain Sparks

dpcwqxg_231zfzddfdw_b

Put out by User Interface Engineering CEO Jared Spool, this professional podcast focuses on usability and interaction design. Jared is a usability expert and frequent conference speaker who has worked with big clients like Microsoft, Apple and IBM. He invites big names like Molly Holzschlag, Luke Wroblewski and Cameron Moll to share their expertise.

2. Boagworld

dpcwqxg

Created by Paul Boag and Marcus Lillington of the UK Web design firm Headscape, Boagworld is the longest running (and perhaps most listened-to) web design podcast around. It has thrived because it is both entertaining and educational. Paul and Marcus banter back and forth while covering a wide range of topics of interest to both developers and designers. They know what they’re talking about and bring in great guests like Dan Rubin and Andy Budd. Along with the podcasts on the site you’ll find an active forum and follow-up blog posts that include summaries, links and interview transcripts.

3. The Rissington Podcast

 

Jon Hicks (famous for designing the Firefox and Thunderbird logos, among other things) and John Oxton produce this informal and humorous show. They answer listeners’ questions about web design, conduct interviews and pick a typeface of the week. The hosts are smart, smarmy and fun to listen to.

4. TypeRadio

 

While not specific to web design, this podcast is a great source of inspiration for designers of all types. Hosts by Donald Beekman and Liza Enebeis chat up designers at events around the world. Each designer brings something different to the table. Some are more interesting than others, but all give you valuable insight into their process and personality.

5. Rookie Designer

 

Rookie Designer is a weekly podcast by graphic designer Adam Hay. It is aimed at beginner designers but the content is useful to just about everyone in the field. Adam is friendly and humble, sharing brutally honest stories of “rookie mistakes”. He also shares tips, tricks and lessons learned… like how to get a freelance client to pay and how to survive a critique. He also covers specifics like Photoshop, SEO and Email design.

6. Web Design TV (video)

 

This one isn’t strictly audio, but it’s published by .net magazine and is well worth sitting down and taking time to watch. Older podcasts are hosted by Paul Boag of the aforementioned Boagword. Newer videocasts run 15-30 minutes and feature practical in-depth tutorials on specific web design projects and applications like Photoshop, Flash and Dreamweaver. .net is a great magazine filled with informative content and the videocast is a great way to get some for free.

7. You Suck At Photoshop

dpcwqxg_236hrc434fw_b

The first reason to watch this is that it’s hilarious. The second reason to watch is that you’ll actually learn a thing or two about Photoshop. Created by ad guys Matt Bledsoe and Troy Hitch, the podcasts are narrated by a socially-inept cubicle warrior named Donnie Hoyle. His bitterly sarcastic commentary is not only funny, it’s helpful. Each tutorial shows you a number of photo-editing tricks, which Donnie demonstrates by doing things like removing a wedding band from his cheating wife’s finger. It’s a YouTube phenomenon. If you haven’t seen it yet it’s time to get caught up.

The next time you’re bored at your computer, why not download a podcast or two and learn something new?

Written exclusively for WDD by Mindy Wagner.

Categories: Designing Tags: , ,