Many of us have been stuck with a website of maybe 900 to 1000 pixels wide which smaller devices would reduce in size. The mobile users would have to constantly zoom in and out to access various parts of the site (read: navigate away from the site never to return!)

Should your website be responsive?

In a word, yes. A web design should respond to a visitor’s needs rather than the other way round.

I know of no other single website tweak that I’ve made in the last 6 years that has meant over 100 more visitors daily:

Is your website responsive to handheld devices?

The simplest way to test a website against different sized screens is to simply re-size your browser’s window and see what happens. Go ahead and narrow the browser window on this website and see the design respond to the width of the browser.

Have a look at this great free tool to test your website’s responsiveness. Yes, “responsiveness” is a word, just not a very nice one.

One of the best responsive websites, in my opinion, is Chris Coyier’s CSS-tricks.com, here it is on that tool:

And here is this website tested with the tool:

If you’re seeing any horizontal scroll bars with your site, you might start thinking about responsive design.

How to make your website responsive

Well, I cheated! I simply installed the Streamline theme by Genesis and tweaked accordingly. I also like the Eleven40 theme which has a much wider design on the monitors that can handle it of, guess, 1140 pixels! These are affiliate links, however there are many free responsive WordPress themes out there.

However, there are a couple of changes necessary to make a website responsive. This isn’t the only way of doing it but it is the best and simplest I’ve come across.

First of all you need to add this to the head to stop the iPhone from scaling the whole website to fit it’s screen.

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Other than that it’s a question of adding media queries to your CSS to adapt your website to different sizes of browser window.

CSS media queries

In your CSS you need to change the styles of different elements as they adapt to different widths. This is, strictly speaking, “adaptive design” but I think people are more comfortable with the term “responsive design” so that is what I’m using to describe this process.

This website is 960 pixels wide when viewed on a large monitor. If the site is viewed on a device narrower than 960 pixels the design would be inappropriate, so the first media query we add is for 960px.

The whole website is sitting within a containing div called #wrap.

#wrap { width : 960px; margin: 0 auto; }

This #wrap div, along with many other elements, is set to change as soon as the browser window narrows to less than 960 pixels wide by this media query:

@media only screen and (max-width: 960px) { #wrap { width: 100%; margin: 0; } }

So now the website will squeeze or stretch to fix the width of the browser if it is less than 960 pixels wide.

But you also have to make sure that other elements of the website behave the way you want them to. So, similar to the #wrap div, both the div containing this article (.content-sidebar #content) and the sidebar (.sidebar) have specified widths in the main CSS…

.content-sidebar #content { width: 642px; }
.sidebar { width: 316px; }

… when added together they come to less than 960 pixels – the width of the website – and so appear next to each other. And when the browser is narrower than the width of the website they change to 100% …

@media only screen and (max-width: 960px) { .content-sidebar #content, .sidebar { width: 100%; } }

… so the sidebar (coming after the content area in the HTML) drops underneath the content area when using the portrait iPad, for example.

And there are numerous other changes you can make. For example, once this website is viewed at a width of less than 960 pixels, the logo in the top left moves over to the center and the social media icons top right disappear, the sign up form at the top of the sidebar disappears to avoid too much repetition of this element, and the logo changes to a narrower version for devices not wider than 300 pixels:

@media only screen and (max-width: 300px) { .header-image #title-area { background: url(images/logo-symbol.jpg) no-repeat top center; } }

You can add media queries in at any width, 240px, 320px, 480px, 768px, 960px and 1024px, are the most common. But I was thinking mostly of the portrait tablet width (around 760 pixels) and a portrait smart phone (around 320 pixels).

Images and video

With responsive sites everything has to respond. Getting the images to size to the window is easy, put this in the main CSS:

img { height: auto; max-width: 100%; }

And for the videos, I used a WordPress plugin called FitVids.

What you can do

Making my website responsive was actually ten times less painful than I thought it would be. I’m no hard-headed code geek so if I can do it you certainly can.

I’ll be writing more on this topic soon with a video. Also there are great article here about responsive web design and media queries by Chris Spooner.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

There are three main ways you can teach yourself web design.

1. By doing. People learn by actually creating websites.
2. By using online resources. Everyone at some point finds answers online about how to design websites.
3. By reading. This one surprised me. Most designers say they learn web design, in part, by reading books.

So, let’s go through each of these categories to find out how to teach yourself web design.

1. Learning web design by doing

The best way to start to understand web pages is to look how existing websites are put together and build them yourself.

Observe how other websites work

To start off, most web pages on the internet are written, at least in part, in HTML. In order to see the HTML that creates this page you need to “View Source” in the browser you are using. Try going Cmd/Ctrl-U (for Firefox), go Cmd/Ctrl-Alt/Opt-U (for Chrome), and if you’re using Internet Explorer, you really need to ask yourself if web design is the right career path for you.

Try looking through the HTML to see how the different elements on a web page are marked up. You may be able to identify certain tags straightaway. For example <p> is for paragraph, <h1,2,3> are headings, <img> is for an image, etc. You will notice that most of these tags work in pairs to denote the beginning and end of the mark up, for example <p>Text here</p> shows the opening and closing of the paragraph tag with the slash (/) preceding the closing tag. Other tags don’t work in pairs, for example the image tag self closes <img src = "http://robcubbon.com/images/rob.jpg" /> this instructs the browser to display an image with a particular web address as the source (src).

Another thing you might notice from the HTML source is that all HTML pages have similar structure. They all start with a <!DOCTYPE> declaration saying which version of HTML it’s in, followed by an <HTML> declaration, followed by the <head> of the document which is a container of various elements including links to scripts, style sheets, the meta information, etc. After the <head> comes the <body> where the elements of the web page are marked up.

Exercise: Select all the source code of this page into a NotePad (PC) or TextEdit (Mac) document and save it to your computer as “test.html” or something. Open this file in a browser and it should look exactly the same as the online version. Now turn off your connection to the internet and see what the test page looks like. Pretty different, huh? Try to work out why.

Tools of the trade

While you’re doing this, there will be certain tools you’ll need.

• Multiple browsers and smart phones. Try testing your own sites on different browsers and phones (this is where you’ll start a long standing hate affair with Internet Explorer).
• Text editor. You may use the basic NotePad (PC) or TextEdit (Mac), or maybe Coda (Mac) or Dreamweaver – don’t use Dreamweaver in the visual mode, just work on the code, you need to understand how this stuff works under the hood.
• Validator. Validate your web pages with the HTML Validator and the CSS Validator (use a browser plugin like Web Developer for Chrome to call on them quickly).
• Chrome Developer Tools and Firebug for Firefox. These tools help you understand CSS and JavaScript which, if you thought HTML was difficult, do take some understanding.
• Graphics and image editors. Central to web design are image editors like Photoshop or Fireworks. These are quite expensive but there is GIMP plus a host of online image editors if you’re just starting out.

Creating your own static HTML websites

While your understanding of HTML, CSS and JavaScript grows you should be creating static HTML sites, either locally or on a web server. Continuously play with the code to try to do cool things. Try to recreate certain elements in other websites by copying bits of the code.

Although the websites you eventually create are not likely to be made from HTML files, it vital you understand how to create static HTML sites first before you can start using PHP and/or Content Management Systems (CMSs) to create HTML.

Creating your own websites with CMSs

Most websites are created by CMSs – software that can create HTML pages within specified templates. The best ones are WordPress, Joomla and Drupal, but there are a host of lighter, open source CMSs you can experiment with, these will teach you how PHP, and with other CMSs, ASP, are used to piece together websites.

Use MAMP (Mac) or WAMP (Windows) on your computer to run these systems locally so that you can get a good understanding of how they work.

Using image editors

You will need to know how to use Photoshop or something similar. You will need this to create graphics for the site as well as to provide complete visuals of how the site will look when finished to aid the design process.

Get designing

Of course, I haven’t mentioned that the resulting websites will not only have to validate, work, be found by search engines, serve a purpose and be marketed but also … they have to look good.

In order to improve your artistic eye, regularly produce work and then try to better it. Sketch designs on paper then work on them in Photoshop or whatever graphics program you have. Practice will help you become a better designer. I will be recommending more resources later that will help you with design principles.

2. Online resources

When people want answers they go to the internet and “Google it” or search YouTube. Web design is no different. There are many resources that will help you online. First and foremost there is W3 Schools which web designers refer to as the best online self teaching resource, there is also Tizag. Some people recommend Lynda.com although I’ve not used it personally.

Blogs

There are a number of great design blogs out there. There are big ones that can help you like SmashingMagazine, WebDesignerDepot, 1stWebDesigner and the Envato network.

Personally, I get more from the independent web and graphic designers who blog. There are, however, loads that I have learned from over the years so here are just a few and I apologise to any excellent bloggers that I’ve left off the list.

• Chris Colyer‘s CSS Tricks is a great looking responsive website but also has great web design info and tricks
• Veerle Pieters has great Photoshop and Illustrator tutorials on Veerle’s blog
• David Airey is someone I’ve followed for a while on his own eponymous blog, LogoDesignLove and IdentityDesigned. David is interested in the overarching identity of organisations amongst other things.
• Chris Spooner has taught me a lot with tutorials at his blog at SpoonGraphics and plus information and inspiration at Line25
• Fabio Sasso‘s wonderfully designed site Abduzeedo offers great inspiration and weirdness.
• Nick La‘s N.Design Studio and WebDesignerWall have some fantastic information and great inspiration.

Please feel free to add your favorite design blogs in the comments below.

Forums

When you are bashing your head against a brick wall forums are great places to get answers. Post a description of your issue and the web address and very often someone will get back to you with a solution. Here are some of my favorite forums.

I like Estetica Design Forum, DesignForums.co.uk, and Designer’s Talk. There’s Digital Point and Sitepoint for more wider ranging queries, the WordPress forum is excellent and there’s the Warrior Forum for internet marketing.

3. Books

Many web designers maintain that good old-fashioned physical books have helped teach them web design. Here are a few of my favorites and some others that have been recommended to me. The links are Amazon.com affiliate links.

• Build Your Own Website The Right Way Using HTML & CSS 3th (third) edition by Ian Lloyd is a Sitepoint book I read years ago. It really helped me at the time as it focuses on web design best practices. Make sure you buy an up-to-date edition (at the moment the third edition which includes a lot on HTML5).
• CSS: The Missing Manual by David Sawyer McFarland includes explanations, examples, and step-by-step tutorials. This book is especially recommended as it gives you the background to CSS and includes a lot about CSS3.
• The Principles of Beautiful Web Design, 2nd Edition by Jason Beaird, maintains that design is a skill that can be learned and teaches you the fundamental principles of design.
• Color Design Workbook: A Real World Guide to Using Color in Graphic Design by AdamsMorioka (editor) provides the vital information necessary to apply color creatively and effectively to design work.
• Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug an instant classic on web usability, loaded with insights and practical advice.
• Getting Real: The smarter, faster, easier way to build a successful web application by 37 Signals may be about creating web applications not sites, but it has such a marvellous way of simplifying web processes that I found it such a useful read.
• Digging into WordPress by Chris Coyier & Jeff Starr comes highly recommended as the great WordPress book. Available as a PDF version (handy for copying code) as well as a physical version.

There are many more books I could have included especially about design theory. If you have any suggestions of books that have helped you with web design, please let us know about them in the comments.

What you can do

Many designers maintain that failure is actually the best teacher. So get out there and design websites! When, as undoubtedly will happen, you come across a brick wall, you can use some of the online resources here to help you. And, when you can’t look at the computer screen any more, you can read a book about it!

I would love to hear your suggestions of web design resources and tips for teaching yourself here in the comments. Plus, ask me here if there’s anything you’re stuck on at the moment.

And you can download my e-book on how to run your own design business.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

But wait! Before you reach for your phone, look at the designer’s website to see if (s)he has done similar work to what you want doing first. That done, here are some questions to ask:

1. Have you done this type of work before?

Even though you know this designer’s work, it’s a good idea to ask them this question anyway. A designer may have created the type of website you’re looking to build, but have they worked in your particular niche before? That would be a useful talking point.

Ask for samples of work that may be particularly pertinent to your project. Most designers will have work that isn’t in their portfolio but may be much more relevant to you.

2. What processes will you use?

What steps and stages are involved in the design? How many revisions? You should be able to get firm answers to this sort of question. Avoid anyone who is completely vague about this.

3. How long will it take?

Although the answer to this question will generally depend on you, the client, the designer should be able to give you a rough estimate of the amount of time to complete all the stages that were elicited in the previous question.

You should not only want to know how long the project will take but also if the designer has the time to do it.

4. How much is it going to cost?

There are many different ways to charge for design work. Smaller jobs maybe charged by the hour. Whereas designers may prefer to give an estimated fee for larger projects.

If given a fixed fee also ask for the hourly rate and see how they compare.

5. Are we going to have a contract?

Most designers will prefer to draw up a contract for new clients. The contract should benefit both parties as it will specify the various stages and deliverables of the project as well as the payment deadlines.

There may be clauses in the contract to stipulate what happens if the project is stopped before completion as well as information on who retains copyright or ownership of the designs. Which brings me on to my next question…

6. Who will own the copyright?

Typically, the designer will retain the copyright to any work unless it is signed over to the client in the contract. Most designers will be happy to do this.

Legal tussles can ensue as a result of lack of contract and copyright agreement but they are extremely rare. The most important thing is communication, and this brings me on to my next question…

7. Do you understand the purpose of this project?

Many clients will say what they want without explaining why they want it. It is essential that a web designer, for example, understands the purpose of the website. Otherwise they’re just making it look pretty – and that’s not design.

8. Can you meet in person?

It is always better to talk face-to-face rather than on the phone but the designer’s time is precious. Make an effort to meet the designer near or at their place and buy them a coffee.

Try to find out their core values as a designer and see if they resonate with what you’re trying to build.

9. What’s your gut instinct?

At the end of the day we are human beings and we make decisions emotionally. Sometimes rightly; sometimes wrongly. But, usually, it’s better to go with your heart than with your head when hiring designers.

What can you do?

Remember to do your homework when hiring designers:

• Research their websites and previous work to see if they may be a good fit for you
• Think through the project to decide what you need and why you need it
• Communicate the above to the designer in an email before the conversation

And, designers, make sure you have good answers for the above.

Thanks go to Cheryl Picket on Google+ and the In-House Designers group on LinkedIn for ideas.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

If you are reading this on my blog you’ll notice 7 beautiful grayed out social media icons on the right side of the header which turn into full technicolor when hovered over.

I seem to be getting more and more traffic from these various social media avenues so it makes sense to fill up that empty space with them – even though I’ve always had them in the sidebar.

Think speed!

As you will already know, Google takes loading speeds into account when ranking pages. Also, I hate waiting for sites to load. So I wanted to create these header buttons with a minimum amount of HTML, CSS and, more importantly, HTTP requests.

Here I have 7 social media icon images and all of them have rollover states. That means there could potentially be 14 HTTP requests for images just for these little buttons. The images themselves maybe small but it’s the separate requests to get the images that can severely increase page load.

So how do we cut down those image requests? Simple, by creating one big image.

Say hello to my best friend – the image sprite

Here is the image sprite I used to create the social media buttons and their hover states:

As you can see a sprite is one big image that can be shifted around to only display parts of it at particular times. Here each button is 32 pixels by 32 pixels. They are put right next to each other so that there is no space in between – this makes it easier later on when you do the CSS positioning.

HTML for the social media buttons

As I’m using the Genesis theme for WordPress (that’s an affiliate link), I enter the HTML into a text header widget.

Here is the HTML:

<div id="head-soc">
<ul>
<li id="g"><a href="">Google+</a></li>
<li id="rss"><a href="">RSS Feed</a> </li>
<li id="sub"><a href="">Subscribe</a></li>
<li id="fb"><a href="">Facebook</a></li>
<li id="twit"><a href="">Twitter</a></li>
<li id="li"><a href="">LinkedIn</a></li>
<li id="youtube"><a href="">YouTube</a></li>
</ul>
</div>

As you can see that is just a simple HTML list for each social media item and each list element has it’s own ID (this is for the CSS positioning). I’ve taken the links and the titles out so you can see what’s going on.

CSS for the social media buttons

And now here comes the clever bit.

#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(images/social-media.gif) no-repeat; display: block;}

#head-soc li#g a {background-position: 0px 0px;}
#head-soc li#g a:hover {background-position: 0px -32px;}

#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}

#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}

#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}

#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}

#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}

#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}

As you can see, the CSS imports the image “social-media.gif” just the once and then alters the position of the image within the 32 pixel square space to show the correct button.

Social media buttons in the header

So why am I putting them in the header when they’ve always been in the sidebar? I’ve learned through testing websites over the last few years that being obvious works: a big button is much more likely to be clicked than a small one.

When I find a good website, I usually look for the Twitter link. If I really like what they’re doing I’ll sign up for newsletters. If I can’t see where to do this within one second, I’ll leave, maybe never to return!

So, I’ll hopefully get more followers on these social sites – I’ll let you know if I do or I don’t.

Finally here is the list of buttons. Why don’t you join me in one of these places?

• Google+ This is the social network which has the greatest trajectory for improvement. Google rules the search engines so it’s going to try to push this social network as far as it can. I write quite a lot here, contribute to discussions, arrange hangouts and post my latest blog posts
• RSS Feed You can subscribe to all my blog posts by a feed-reader such as Google Reader
• Subscribe Here you can subscribe to my newsletter and get a free copy of my e-book “How to Market Yourself Online”
• Facebook This is really coming along, we’re having great discussions and I post my latest posts here as well
• Twitter Here I tweet out my latest stuff plus all the stuff I read everywhere. I can tweet up to 10 times a day!
• LinkedIn This is my LinkedIn profile. But I love LinkedIn Groups and I have one called Niche Site Marketing
• YouTube This contains about 50 tutorial videos about web design and internet marketing – more to come here soon!

What do you think?

Do you have social media links in your sidebar or header? How did you create them? What do you think of mine? Are they the right shape and in the best position?

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

There is certainly no need to be daunted by a financial barrier to entry when starting your own web design company. Don’t be put off by the price of Photoshop or the whole Creative Suite – there’s loads of free software for web designers that can help you keep costs down.

Online image editors

Photoshop is the application that is potentially the biggest financial outlay for a web designer. But there are a few online image editors out there. Pixlr is one of the best. FotoFlexer is also worth a try.

Open source alternatives to Creative Suite

There are free open sources versions of Creative Suite applications. GIMP has been around for a long time and boasts plugins, brushes and tools to extend the basic functionality of the software. Pixelmator is not free but is cheap compared to Photoshop.

Inkscape, which is popular with the Linux community, is a free alternative to Adobe Illustrator. This free vector graphics manipulator produces SVG files without unnecessary code to a reduced file size.

Text and code editors

Aside from an image editor, a web designer will always be in need of a good code editor. There are cheap alternatives to Dreamweaver such as Textmate and Coda.

Obviously there are the free text editors available with the operating systems such as Notepad which comes with Windows and TextEdit which comes with OS-X. I’ve been really impressed with Text Wrangler which has a multi-file search & replace feature that is really handy.

FTP

For me, it’s Filezilla all the way. Easy to use and quick. It used to not be available for Mac so in the old days I used Cyberduck. I miss that yellow duck icon!

If you don’t want to download an app there’s net2ftp which gives you an FTP client in your browser. There’s even a skin designed for the iPhone.

File Sharing

If you want to deliver large files to a client there are a host of free services, I use YouSendIt. And to store files on the cloud to access from multiple devices you can use DropBox. For downloading torrents there’s µTorrent for Mac and BitTorrent.

Images

There are lots of places to get great free stock photography, stock.xchage and Flickr Creative Comms search are two of my favorites.

There are lots of great free vector resources but, instead of searching through these resources, I find a Google image search for “free vector” does the trick. Likewise, it’s not always necessary to get a free vector logo from Brands of the World but just Google the logo you want with “vector” in the search query.

Fonts

You can pick up free fonts at DaFont and a host of other places. WhatTheFont can identify a font from an image.

Google Fonts now has a catalog of around 300 excellent fonts that will work across most browsers with just a line of code in the head and a CSS declaration.

Compare and contrast the fonts with TypeTester.

Grids

If you like to use grids in your web design (or even if you don’t) then check out 960 Grid System where you can download grid templates in HTML & CSS, Photoshop, Illustrator, GIMP, etc. All these grids are for websites that are 960 pixels wide.

Web developer tools

These are a standard fare for most web designers with many of us using these tools many times a day:

• Firebug – awesome Firefox add-on that will inspect and change HTML and CSS and help you de-bug JavaScript.
• Developer Tools for Chrome and Internet Explorer – these do about the same as Firebug and are bundled with their respective browsers. Handy for working out IE hacks.
• Web Developer add-on for Firefox and Chrome – ultra handy add-on that can disable styles, disable browser default styles (handy for cross-browser compatibility), show alt text for images, resize window, validate, etc. The list is endless.

Web design online “must-haves”

The above mentioned HTML and, to a lesser extent, CSS Validators that can be reached with one click using the Web Developer add-on are services that most web designers will use all the time.

Other online services of huge importance to the web designer are Google Analytics, Google Webmaster Tools and Google Docs.

Cross browser checks

You can check websites across different browsers at BrowserShots and Adobe BrowserLab. ViewLikeUs allows you to check out how your website looks in the most popular resolution formats.

Speed

In order to analyse your page speed, use Google’s PageSpeed (try to get your score up to 100) and Yahoo!’s Y!slow.

Downtime

Use Pingdom‘s free service to be instantly informed of any downtime on your site so you can contact your host and sort it out asap!

Email marketing

I’m not sure if this really comes under the heading of “web designing” but with 2,000 subscribers for free, MailChimp is an awesome free email sending service.

Color

Color Scheme Designer can help you choose complimentary colors for your website designs.

Billing

Freshbooks tracks your time and invoices your clients automatically, saving you time and getting you paid quicker. Mint tracks all your business finances and transactions and has a free mobile app. Square will accept credit card payment off you mobile phone.

CMSs

The best things in life are free – but then again you tend to forget how amazing they are because you don’t have to pay for them! The best ones are, obviously, WordPress, Drupal and Joomla but there are loads of incredible free Content Management Systems that power most of the web.

Video

Also going under the title of “Been around so long I almost forgot about them” are the free video storage services YouTube and Vimeo, etc. If it wasn’t for these services we’d spend ages uploading our video to servers or paying services like Amazon S3 to host them for us.

Give me your suggestions!

Is there any free software you use that I have missed out? Please give me your suggestions in the comments section below. And, if you enjoyed this article, please vote for it by Tweeting, Facebook Liking or Google +1′ing it!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

How much should graphic designers or design companies specialize? Should they hone their skills and expertise to a particular niche? Or should they provide a range of services for their clients?

Starting out

When a graphic designer first starts out as a freelancer or when a new graphic design company has just set up, the temptation is to take any work that is offered. This is only natural, especially in a flat economy.

However, a lot of the designers I have spoken to about this say that pretty soon afterwards they were drawn to an area of design that they enjoyed the most.

If I asked you to think of a designer that does logos and brand identity you may well think of David Airey. David urges caution at first, “I think when you’re learning, it’s important not to limit yourself to a niche. The more you know about design in general, the better equipped you are when it comes to specialising.”

Knowing more about design and the experience of designing helps you to choose your speciality but, as Karen McDade points out, experience teaches you to choose your clients carefully as well:

“When I started freelancing a few years ago I took any work that came my way in an effort to build my business. After a while I had a lot of clients but, because I wasn’t selective, some of them were less than desirable. I ended up working long hours for all these clients who wouldn’t pay me on time (or at all). I was quite naïve and trusted in their word that they would eventually pay up. It came to ahead one night when, at about 3am, I realised I was working way too hard for the level of income I was actually bringing in.”

Having streamlined her clients, Karen now provides a better service to them and her portfolio has improved as a result. I can certainly attest to the importance of keeping good clients and letting the low quality, late paying clients go.

How do I specialize?

How do you choose the area of design to specialize in? Most designers say that this happens naturally as you are drawn to a particular area as it is particularly interesting or enjoyable for you.

Chris Spooner says, “I think it’s important to find a specialism, but it’s up to the designer to figure out how wide or narrow their specialism will be. For instance some designers might only offer design services in a very specific niche, which can establish them as the go-to expert in that field, whereas other designers might offer a wider range of services under the umbrella of a particular aspect of design, which obviously increases their potential client base. It all boils down to the designer’s interests and what kind of work they enjoy creating.”

I think Chris is absolutely right here. Seek out what you enjoy doing.

What do I specialize in?

An example of a particular niche would be WordPress websites and themes.

Mike Smith explains this: “I was someone who did a bit of everything when starting out. Ad Banners, CD covers, Flyers, Website headers (yes, just he headers lol), etc. I stumbled on WordPress and started building sites for myself and just learned the ins and outs of it so much that it only seemed right to offer WordPress themes as a service. Once that took off and started doing well, I started doing less and less of the other stuff. Nowadays I spend 90% of my days working with WordPress: Designing themes, coding my own themes, PSD to WP for other people, etc. I like specializing because it gives me the ability to focus on one thing and do it really well – people like that ”

Your speciality can be any aspect of design: logos, brand identity, WordPress themes, WordPress and SEO, print collateral, anything!

However, designers tend to specialize in one aspect of design. Not in any particular industry. None of the designers who I spoke to specialized in a specific niche industry like education, retail or pharmaceuticals, for example. This may have happened with larger design companies in the recent past but not, it seems, with smaller design companies and independent designers now.

Taking it to the next level

So, you’ve specialized in your favorite aspect of design, what next? This isn’t the end of the story.

For instance, Adii Rockstar (I’m not sure if that’s his real name), specialized in creating WordPress themes and then hooked up with a couple of other guys and created WooThemes – a hugely successful theme company that have sold over 80,000 themes. Both Chris Pearson, the creator of the Thesis Theme and Brian Gardner, the creator of the Genesis Theme, have taken design to the next level by creating scalable businesses.

Here, Douglas Bonneville describes how he was able to turn his “active” design skills into “passive income”: “I really started to think about a product, and how I could step back from the crowd and say, ‘how can I help graphic designers and not so much clients anymore?’ I focused on treating myself as a client, producing my eBook and a few apps focused on typography. Things have gone extremely well since then, and I’d never go back!”

So, it is also possible to find a speciality that is beyond the client work and focusses on selling products.

And finally…

I hope this has given you a few ideas about how you can develop, specialize and grow your business – whether it’s to do with design or not. Are you specializing in anything at the moment? Can you think of an area you particular enjoy that you would like to move into? What can you do to make sure you can get more work and specialize in that area?

As always, I would love to hear your opinions in the comments below. And, I would appreciate a tweet or a vote.

Thank you to all the designers who participated in this that weren’t mentioned above, for example Derek Kirk from Web Designers London, Randa Clay from Randa Clay WordPress Design, Lynne Venart from The Art Monkey, Kyle Richardson and Craig Wilson.

Read more about running your own design business from home in my e-book “Running a Web Design Business.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

This article is more of a “plea” to web designers. Don’t look at a web page as a work of art. Look on it as something that does a job and, for God’s sake, make it legible! Too many times we see readability sacrificed at the alter of web design.

But first, some statistics for you to think about:

• Nearly 26.6 million Americans (nearly 9%) are visually impaired, meaning their vision cannot be completely corrected with lenses.
• 1 in 12 people in the world (over 8%) suffer some sort of color blindness

Here are 4 rules about readability and accessibility on websites.

1. Font size

I recently read an article arguing that body text should be at least 16 pixels in size. I was really pleased to see Smashing Magazine publish this article – although it was rather ironic that they had to create a special design with a large body text size for the article as it would have been hypocritically smaller in their normal template.

What does 16 pixels actually mean? It’s a fixed size measurement. If you’re familiar with the point measurement (1/72 of an inch), then it’s 12 points. If you’re reading this text on my website then it is set at 15 pixels in size if the browser isn’t zoomed in or out.

Another method of setting font size in CSS is with ems. Ems are usually used in combination with percentages. If the body font size is set to 100% then 1 em equals 16 pixels. This used to be considered the most accessible way to set text as it would adapt to the device. However, now that most modern browsers and devices can scale the whole page, I now prefer to use pixels.

OK, we know you can zoom in and zoom out when viewing web pages. But users shouldn’t have to do this!

Either way, body text should never be much smaller than 16 pixels, 12 points, 100% or 1 em.

2. Color and contrast

You should always think about the visually impaired and color blind when choosing the text color and background color. If the two colors are too similar some people will have difficulty reading.

Be especially careful if you are putting text on a background with a pattern or on an image as this can be very difficult for some people to make out. The are tools online such as the color contrast check which can help you.

The next two rules will help the SEO as well as the accessibility of your web pages.

3. Make your text scannable

Don’t have long paragraphs of tight text. The line height, the spacing of the line of text or leading, should be at least 25% more than the font size. So, a font size of 16 pixels should have a line height of at least 20 pixels which will make body text readable.

Furthermore, you should seek to break up your text as much as possible with headings, bullet points, bolds, italics, blockquotes. People don’t tend to read web pages from top to bottom. (Sadly you probably won’t read every word of this article! )

These extra elements will make your text more readable – and the increased use of subheads will help with SEO.

4. Use of images

Lastly, it’s important to always include an alt text for images you use in a web page. Alt text is a tag in the HTML which describes images to

<img src="http://yoursite.com/images/green-flower.jpg" alt="a bunch of green flowers in a vase on a table" />

A visually impaired reader of your web page that is using a screen reader will hear the alt text in place of the image. The alt text will also show on screen when the image can not be rendered.

Again, this is also a good practice for SEO.

Conclusion

Have a look at the websites you are responsible for. Is the body text size readable to those with slight visual impairment? Is the size smaller than 15 pixels? Are there any quick changes you can make to improve it’s readability and accessibility?

Can you add to these rules? Do you disagree with any of them? Let us know in the comments.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The internet is daunting, disorganized and idiosyncratic. Web designers should try to make the user’s journey as simple and as pleasant as they can. What’s more, there are certain actions that webmasters would like visitors to perform – to go to a page, to submit some information, for example. For these reasons, knowing how to design and code a beautiful web button is an essential skill for web designers to have.

Sometimes we’ll mock-up a web page design in Photoshop first before creating it with code and mark-up. The two operations are quite different but have the same effect. Firstly, I’m going to show you one way I’ll make a web button in Photoshop. And then I will explain how to reproduce the exact same visual effect using HTML and CSS.

How to make a button in Photoshop

First of all create a new document in Photoshop, making sure the color mode is RGB and it’s 72 ppi.

Then in the Tool bar (on the left-hand side, usually) select the Rounded Rectangle Tool.

And then in the Options bar (at the top, usually) set the Radius to 5 pixels. The larger the radius the more curved the corners. You will specify this value later in the CSS.

Now you can draw your button by clicking and dragging (with the Rounded Rectangle Tool selected). Don’t worry about what color it is as we will set this using Layer Styles effects in the Layer Palette.

So, once you’re happy with the shape, with the rounded-corner rectangle layer selected, click on the effects icon at the bottom of the Layers palette which is a lower case bold italic fx. Choose any of the options in the resulting drop-down menu and this will open the Layer Style dialog box which hosts a bucket-load of Photoshop goodness!

It doesn’t matter which style you work on first but let’s start with the gradient. Click on Gradient Overlay on the left-hand side of the dialog box.

Set your gradient by clicking on the, er, gradient and then choosing two colors in the Gradient Editor.

By clicking on the “color stops” at the beginning and end of the gradient, and then clicking Color underneath, you can eventually choose colors from the Color Picker. (Maybe one too many clicks here, Adobe!) The important thing here is to click to shades of the same color that are quite similar, so that the gradient isn’t too steep.

Next, let’s do the Stroke or border. After OKing everything, click on Stroke on the left-hand side of the Layer Style dialog box and, annoyingly you’ll get a default red border of 3 pixel. (How about making this default to 1 pixel, Adobe!?)

So, change the width to 1 pixel and pick the color of the stroke or border. It’s sometimes nice to make it the same color as either the beginning or end of the gradient. In this case the darker of the two colors.

Finally, we want to give the button a subtle one-pixel highlight on the top, under the border. This can be done by making a one-pixel high selection on a different layer but you can do it within the Layer Style dialog box as well. Click on Inner Shadow on the left-hand side.

Now, usually shadow styles are dark but they can provide glows or highlights. Click on the black rectangle after the Blend Mode drop-down and change the color from black to white. Choose Normal for the Blend Mode (you won’t see white in Multiply). Make sure the Angle is straight up 90º and that the Distance and Size are 1 pixel.

This is really subtle and you can barely see it on this lighter example (the left-hand one of the buttons at the top of this article. But on the darker one it is more noticeable. Either way, this one-pixel highlight at the top of a button gives it a slight 3D effect that will make the visitors love to click on it and your client happy to hire you again!

That concludes the styling for the button, now for the text.

Get the Type Tool (T) from the Tool bar and click on the Photoshop document where you want the text to go. Type your text: “Click me”, in this example.

Use the Options bar to select the font, color and size of the text.

To give the dark text a glow under it and the light text a shadow under it we can choose Drop Shadow from the Layer Styles dialog box.

Again on the left-hand example on the top, we want to give the text a subtle highlight underneath it so it looks like the text is slightly indented into the button. To do this we, change the Blend Mode to Normal and change the color from black to white. Make sure the Angle is straight up 90º and that the Distance and Size are 1 pixel. (For the example on the right, the Blend Mode will be Multiply and the color a very dark blue.)

And that’s how you do it in Photoshop. After your client has approved the design of the buttons you shouldn’t just save the image out as a JPG and source it in the HTML. You should use CSS to style up the element (which may be input or a p class or an a class).

How to style a button in with CSS

Here I will give you the styles, for the button below which is similar to the one up top but with slight smaller text. (If you’re reading this on an RSS feeder, by email or on a scraper site, you won’t see the following button so you best check it out on the website).

Here is the button styled in CSS

Here is the HTML for the text example immediately above. However, most of the time, buttons are marked up with the input tag.

<p class="button"><a href="">Here is the button styled in CSS</a></p>


Before you can start on the CSS you need to go back to the Photoshop document. Zoom in to your button and select with the Rectangular Marquee tool (M) a one-pixel wide selection. The height will be the eventual height of the button. You may like to take the Stroke off for this as it may complicate matters and you will be setting this in the CSS.

Cmd/Ctrl-Shift-C to Copy Merged the sprite and then make a New Document in Photoshop (Cmd/Ctrl-N).

The size of the new document will be the size of the sprite you just copied if you have Preset set to Clipboard.

Paste the 1-pixel wide background gradient into the new document and Save for Web & Devices (Cmd/Ctrl-Opt/Alt-Shift-S) as a fairly good quality JPG to avoid banding.

The other information you want from the Photoshop document of your button visual is the HEX value of the button’s Stroke or border and the HEX value of the text color.

And here’s the CSS.

p.button {
background: url("path/to/1px-wide-background.jpg") repeat-x #C2CBF4;
border: 1px solid #C2CBF4;
border-radius: 5px;
moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
font-weight: bold;
padding: 5px ;
text-align: center;
font-family: Helvetica, Arial, Tahoma, sans-serif;
font-size: 15px;
font-weight: bold;
line-height: 24px;
width: 350px;
}

p.button a {
text-shadow: 0px 1px 1px white;
color: #4E5FAB;
text-decoration: none;
}


Notice the background has a color as well as a background image (gradient) this is for people who browse without images.

Every button should have a hover state

Every link or button on a web site should change itself visually when the user’s mouse is over it. This gives the user the impression that it is a “live” or “active” area of the screen and therefore will do something if clicked, otherwise it’s just inactive text or imagery.

So make sure you set styles for the hover state.

p.button a:hover {
text-decoration: none;
color: #6E80D0;
text-shadow: 1px 1px 1px #fff;
}

p.button:hover {
border: 1px solid #8b9be4;
}

In this particular example the background gradient of the button doesn’t change on the hover but it should do. You can do this by doubling the height of the background sprite by creating a lighter or darker strip of pixels underneath and changing the background image’s y co-ordinate to show the different pixels.

p.button:hover { background-position: 0 40px; }

Here the background image will be moved up by 40 pixels when hovered over, showing the lighter or darker pixels. 36 pixels being the height of the button.

But I’ll do a proper sprite tutorial on another day!

Other tutorials

I have another tutorial about more bulging, shiny, jelly buttons. Here is one for a cool, shiny, web 2.0 button.

And, here’s another tutorial about how to create cool shiny buttons in Illustrator alone.

Let me know what you think

Any other top tips for web buttons? I would love to hear what you think in the comments down below. Plus, please feel free to vote for this article with a Tweet, a Like or a Plus One!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

There has never been a better time to start a web design business. Although the western world’s economy is stagnant and demand flat the opportunities for entrepreneurs are enormous. If you have a passion and love for the internet, you can do it.

You don’t need a lot (in fact you just need a laptop, phone, electrical supply and decent internet connection) but here’s what I’ve learned in the last few years.

Business

In order to have a successful web design business you need to attract good clients. Trust me, the attitude of “any client is a good client” will not get you very far. By all means, give the same great service to all clients both big and small, but you will need regular and quality work and you are more likely to get this from quality clients. And “quality clients” are usually – but not always – from quality companies.

Either way, you need to look, talk and act professionally at all times. You will never get anywhere by being “cheap and cheerful”.

• Open your own business bank account with your business’s name. If you set yourself up as a freelance, you’ll earn a freelance wage. The bigger and more professional your company looks, the better it will be for you.
• Design your own logo. I’ve found designing my own logo to be one of the hardest jobs ever but it has to be done. Put this logo everywhere: on your invoices; your contracts; in your email signature.
• Purchase a domain and use it for your website and email address. If you want to be taken seriously you must purchase you own domain (from GoDaddy or NameCheap, for example) and then have an email address which is you@yourdomain.com.
• Build your own website advertising your services. You will need to spend a lot of time on this. I would advocate using WordPress for your business website and use a blog to attract business.

The paint is never dry on a designer’s logo or website. You should be continually looking for ways to improve your website as it is the hub of your brand. If you haven’t started blogging then start now. Write about what you do – it’s a fantastic way to get clients from long tail keyword searches.

How to get clients

Getting clients and establishing a steady work flow is the hardest and most important challenge your web design business will face. Your best clients are your current clients as you will find people will come back to you after you’ve done a good job for them. But, how do you start the ball rolling?

• Attract clients through your website. This is the best way to do it. Work hard on SEO and building links to your website with “web designer” in the anchor text. Make sure all your online activity points back to your website. Nurture your relationships with other designers as well as with potential clients online.
• Get work through social media. To be honest, I have never got much work from Twitter or LinkedIn, however I have found developing relationships on social media with designers and other professionals indispensable in terms of what it’s taught me.
• Meet potential clients offline by joining professional groups. As much as I’ve had great success getting clients online, you can never beat face-to-face interaction. It may take you a while to find out which where your potential clients will be hanging out but the Meetup website can help.
• 3rd party sites. I’ve never been a big fan of these sites and I certainly don’t use them myself but other people do so I will mention a few here. Try PeoplePerHour, oDesk and Elance.

The best network is your network. Most business comes from contacts you already have. But constantly strive to attract potential clients by performing well in the search engines for certain keywords.

You may like to read my survey on how designers work, how they find clients and how they get paid.

Skills

I can’t tell you here how to design a website. You do need technical and creative skills. But, surprisingly, these are NOT the most important skills you need.

• Listening to and understanding clients. The most important skill is your ability to master client relationships. You need to put yourself in the client’s shoes and deliver exactly want the client wants and no more and no less. Lots of designers suffer as they think they know what’s best for the client. The first rule of graphic design is to listen. Don’t ever get carried away with your talent and think that you know everything.
• Understanding the web and UI. The reason you are doing this job is because you have a love of the internet. Make sure you harness that love correctly. Always think of the users as well as the client when you are designing.
• Creativity. You shouldn’t only be creative in your designs to develop your style. You should be creative in your relationships, your marketing and every possible area of your business life. Don’t get stale and always look for fresh challenges.
• Ability to write well for the web. Another skill that is not often mentioned is the ability to touch type and write well for the web. Your clients will thank you if you re-write areas of their website so that they work better and you need to always write good English with correct spelling and grammar in your emails.
• Technical skills. At the very least you will need to master HTML and CSS as well as a graphics program such as Photoshop or Fireworks. HTML shouldn’t take you long to master. CSS will take a little longer. Use Firebug in Firefox and Developer Tools in Chrome and Internet Explorer to give you a start. You may like to progress onto JavaScript, PHP, or whatever you are interested in. Try W3Schools for tutorials. The trick is to keep learning. And not just about website design – it’s about designing email, mobile sites and apps for iPhone, Android and iPad.

Tools

I did a survey recently and discovered some interesting facts about the hardware, software and backup graphic designers use. Certainly everyone’s different. Don’t worry, you don’t have to use Macs but unfortunately most of them use Creative Suite.

• Hardware – The type of computer you get is largely up to you. I’ve been very happy using iMacs for the last few years. I also need a PC for testing. I would urge you to max out your RAM, disc space and broadband connection, but … we all have our budgets!
• Software – Although it is perfectly possible to run a design business with no software at all I wouldn’t recommend it. Most of us use some sort of text editor (Dreamweaver, TextMate), some sort of graphics program (Photoshop) and some sort of FTP client (Filezilla).
• Backup – Not strictly necessary, but incredibly handy. I would advise backing up onsite with an external drive and offsite with something like Dropbox.

Self motivation

Personally, I couldn’t think of anything better than working for yourself at home so I’ve never found motivation a problem.

However, for some people it is and you can learn how to work from home successfully by exercising and organising your time properly.

Collaboration

Since you are working in splendid isolation it’s always great to meet up with other web designers. You can moan about Microsoft together (very therapeutic), exchange jobs and help each other out with bugs and other problems. I have this relationship with Derek Kirk who lives near me in north London. Derek runs a couple of great sites called creative web design and web designers London.

It’s also good to form partnerships with all sorts of professionals and experts. These are great as a sounding board for ideas and to exchange advice and work. Try to network on behalf of your clients as well as on behalf of your other contacts.

Payment

Don’t forget at the end of the day you are running a web design business to get money. Whether you are charging fixed-rate fees or hourly/daily/weekly rates you should be charging at least twice as much as you would earn in a normal job to complete the same task. You will never be able to do web design for 8 hours a day so the charging structure should reflect this.

Make sure the price as well as the nature and extent of a web design job is properly recorded in emails or in a contract. You may like to insist on half the fee upfront with new clients.

Finding and developing your niche

As with most design work you may want to specialise into a certain type of client or a certain type of web work. This may come as a result of your passions or you may be moved in a certain direction by the tide of work that comes your way. Whilst it’s good to specialise you should always be alert to the new developments and opportunities within the industry.

Diversify and outsource

There are many ways to diversify your design business. You can offer your clients hosting, social media packages, email marketing, website maintenance, SEO services, copy writing, etc. you can branch out into a host of different directions. If you are asked to do something by a client it is usually a good idea to say “yes”. This way you can get paid to learn a new skill. Sometimes it may be possible to outsource new services.

You can do it!

I’ve wanted to write this article for ages and I’m very glad I’ve written it. I would really love to see you, the person who is reading this, try to earn money this way because it certainly beats working for somebody else.

You can start anywhere, anytime, anyhow. You just need a website. Even if you have a fulltime job at the moment or if not, you can start this work in your spare time (as I did) and take it from there.

I don’t want to make out that it’s easy. Of course, you have to work hard. But I have been getting paid to do something I really love so it would be great to see other people benefitting from this unique opportunity of our times.

If you have any experiences or you would like some help in this area, please leave a comment down below.

And don’t forget to click one of those nice sharing buttons too!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

It is usually better to show a client what a website will look like before the development stage starts. Here are a few tricks for creating website visuals in Photoshop.

Getting started

Create a large Photoshop document, at least 1200 pixels wide by 900 pixels deep (this can be increased later with Canvas Size), RGB at 72 dpi.

I then usually center the design within the 1200 pixels wide canvas by drawing a couple of guides. (Pet peeve: websites that are aligned left with the browser window.) Draw vertical guides by dragging them out from the vertical ruler on the sides of the document. If you can’t see the rulers go Cmd(Mac)/Ctrl(PC)-R.

You can do this by eye, although I usually want the width of the website to be exactly 1024 pixels. Zoom in [Cmd(Mac)/Ctrl(PC)-plus] for greater accuracy. You can view/hide the guides by going Cmd(Mac)/Ctrl(PC)-;.

The above example of the guides on the canvas is viewed at a magnification of 17.5%, obviously you will want to work on your design at 100% magnification. The magnification percentage can always be seen in Photoshop at the top of the document’s window.

Use vectors, Shapes and Smart Objects

When creating squares, rounded corner objects, buttons, navbars, sidebar backgrounds, etc., it is better to use the Shapes from the Tool bar rather that to create them with selections. These are essentially vectors rather than bitmaps so later editing will be easier. If you want to change their color you can click on the layer thumbnail box and select a color with the Color Picker, or add a Layer Style if you want a gradient.

Similarly, when dealing with logos or any graphical element within a website design it is always better to use vectors not raster graphics. So when pasting in your logo from Illustrator, be sure to keep it as a Smart Object as you can see below. Now you will be able to increase and reduce the logo’s size multiple times without worrying about it’s quality. If you enlarge and reduce a bitmap logo you will soon see the quality affected.

Another benefit of Smart Objects in Photoshop is that you can double click their icon in the Layers palette and edit the graphic in Illustrator, once this is saved the Smart Object updates in the Photoshop document. If this Smart Object has been copied and used multiple times in the design (an arrow, an icon, a graphic device) then all instances of this Smart Object will be updated. This is awesome!

Name Layers and Layer Groups to keep everything organized

A web page can easily have over a hundred different elements and you will need to be able to select them and groups of them quickly in order to move them around.

So group all your layers into layer groups of the main areas of the page (header, footer, sidebar, etc.) this will make things easier if the client suddenly says, “can we have the sidebar on the opposite side?”

One little irritation is that inevitably as you work down the page from top to bottom on the document the layers end up stacked the other way round. I haven’t found a way around this yet!

Layer styles for text shadow

We all love layer styles for the ability to add drop shadows, glows, gradients, etc., on to almost anything. It is particularly useful when mimicking the CSS3 text shadow effects in browsers.

For dark text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the Distance and Size to 1 pixel.

For light text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the color from black to white, the Blend Mode to Normal from Mulitply, and the Distance and Size to 1 pixel (see below).

Grab your color with the Eyedropper

To use the Eyedropper tool, simply press the I key and click on the area you want to sample the color from. Then click on the foreground color at the bottom of the Tool bar to open the Color Picker.

You then get a HEX version of the color that you can use in your CSS mark up. Click “Add to Swatches” if you want to easily access this exact color elsewhere in the design.

Presenting a web page design to a client

You’ve finally finished the page and you save it out as a JPG, what do you do? Do you just send the JPG to the client? No! Put it in a web page for the client to look at in a browser so there’s no confusion as to how it looks.

It’s also a good idea to add any hover states or drop-downs in the page so the client knows exactly what they’re getting.

Here is the HTML I use to show a large JPG centered in a webpage:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Home page visual number 1</title>
</head>

<body style=”padding:0; margin:0; background:#fff”>
<div style=”margin: 0 auto; padding:0; height:1900px; text-align:center;”>
<img src=”home-1.jpg”/></div>

</body>
</html>

You have to enter a height on the containing div if the page is very deep, otherwise the client won’t be able to scroll down.

Save it as “home-1.html” along with the JPG in a folder on your website (I use /dev/client-name) and send the link to the client. When the client comes back with comments, just re-save the HTML file as “home-2.html” and don’t forget to change the image name and title. This allows easy reference to earlier versions.

What about you?

What little tricks do you employ when creating the visual look of a website in Photoshop? Or do you use Fireworks or some other tool? Please put your excellent suggestions plus any queries in the comments section down below.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

This is a story of how I increased my conversions by 200% by making my sign-up form easier to use and having more of them on the site.

Design vs. Sales

The stereotypes of the sales person and the designer are of two totally different animals.

Sales people, on one hand, are grubby desperate types who like garish colors, big headlines and obvious sales copy.

Designers, on the other, are aloof, creative souls who wince at unsubtle sales pages – they even get upset at the use of a certain font in a movie (Papyrus in Avatar).

The problem with the sales person

The sales person just wants sales. If something works, if it has been proved to sell more or convert more, it’s used. So we get a proliferation of pop-ups, animation and repetitious sales copy.

The problem with the designer

Designers like white space and they like to de-clutter. Sometimes they set type so small that older people or people with poor eyesight will have trouble with reading it. This is because designers often have very good eyesight.

So when a designer has finished a design, it must be understood by the general public, not just by the designer and the client.

The happy medium

Two of the most important characteristics of the sales process are clarity and usability.

I have a great example of this here on my blog and I’m so ashamed that it took me so long to work this out.

My shame: number one

On my website I have a form to take visitors’ email addresses so that they can receive newsletters and a free eBook on How to Market Yourself Online.

When I first put the form on the website I put it on one page only – the page that advertised the eBook and left it at that.

I was looking at my site too hard and too much. I forgot that most visitors look at it for only a few seconds.

One day I wondered to myself, “what would happen if I put a sign-up form on the sidebar”. I’d probably noticed that sign-up forms were there on lots of other sites.

“But,” I thought, “it probably won’t make much difference as visitors can follow the links to the sign-up page because they will want to read more about the newsletter and incentive first.”

Wrong! My subscriptions increased by 100%

My shame: number two

But there’s more. I used to have a field for the first and last name on my form on the email company’s site. I quite liked having it there as I could start my emails “Dear so-and-so” which makes them nice and personal.

The first name field wasn’t required and so didn’t exist on the form on my site so you got an annoying pop-up form when you signed up. I didn’t worry about this for months and months as I thought my visitors wouldn’t mind the extra click at this stage.

Wrong! I got rid of this annoying, unnecessary barrier to the sign-up process and … my subscriptions increased by 100% again.

Keep it simple, stupid!

I really should have know better.

Don’t put any barrier, confusion or unnecessary distracting element in your designs. Perfect design, so the saying goes, is when nothing needs to be added and nothing needs to be taken away.

What do you think?

Have any of you got a sign-up form on your website? Or have you signed up to a newsletter on a website? (I guess that would be most people!) What do you think of the sign-up process here? Is there anything that can be done to improve it here or on your website?

This is a very interesting subject. I’m currently split testing the sign-up squeeze page and I’m getting some interesting results that I will share with you shortly.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

We have many dreams when we were young. Some want to be rich. Some want to create great things. Some want to make a difference and do work that they enjoy.

However, many of us find ourselves disillusioned by corporate structures when we start to work. If this has happened to you then, don’t worry, you’re not alone. It’s happened to many designers. And more and more of them are starting their own companies.

Advice for Running a Graphic Design Business from the Experts

I sent off a quick questionnaire to a few freelance or independent graphic designers to see if there were any “rules” or common practices involved in running a graphic design business from home. The answers were fascinating, we found out, for example, that most of us charge 50% up front, only 50% of us always use contracts and that we spend on average 1.6 hours a day indulging in personal social media unrelated to work. More results here:

• Graphic Designers’ Hardware, Software and Back-up
• Survey Results: How Graphic Designers Get Paid
• What Designers Do, How They Make Money and Where They Find Clients

At the end of the questionnaire there was space for the designers to write a few more words of advice to up-and-coming designers who want to “go it alone”. When I put these all together I thought they comprised a great “how-to” for mastering the design industry. I agree with all of them 100%. Follow these words closely and you can’t go wrong.

David Airey

David Airey is a brand identity designer or the “go-to logo guy” who’s clients include the Yellow Pages (Canada), Giacom (England) and Berthier Associates (Japan). His graphic design blogs Logo Design Love, DavidAirey.com and brand identity showcase Identity Designed attract more than one million monthly page views. His successful book Logo Design Love: A Guide to Creating Iconic Brand Identities has been translated into Chinese, Portuguese, Czech, German, Polish, Korean, and Russian.

I’ve been reading’s David’s blogs for years, in fact, I almost use David as a “yardstick” to judge my site against as he is that much of a shining example of a graphic designer in business. Interesting that David, a man who doesn’t seem to make mistakes, chose this quote as one to advise designers with:

“Don’t be afraid of mistakes. Everyone makes them. The important part is accepting responsibility and learning from your errors.”

Douglas Bonneville

Douglas Bonneville runs a “small and nimble” graphic design firm in Rhode Island and has serviced Providence, Boston and the world since 1992. Doug began his blog and moved his site over to WordPress two years ago and quickly became established as a typography expert. He has been published on Smashing Magazine and other industry blogs on the subject of font combinations and now offers The Big Book Of Font Combinations eBook as well as the Font Combinations iPhone app on his site.

This strategy of finding what you’re good at and sticking at it is reflected in this piece of advice:

“Find a niche and fill it. You may have to start broad but narrow your skill set and master some specialty niches. If you don’t, you will join the nameless ranks of generalists who were also afraid to specialize, and now pay the price of flipping burgers with most of their time. Generalists have little definable expertise and thus little definable value.”

Randa Clay

Randa Clay is an awesome designer and WordPress expert. She seeks to help her clients become successful, utilising a complete package of services that includes custom logo design, print design and production, custom web site and blog design and customization. So like me she considers herself a marketing consultant as well as a graphic designer.

Randa came up with a couple of things. The first was a link to this rather fantastic image created by Ben Crick:

“Do not work for free under the guise of good exposure. It is bad exposure. If you don’t value your own work, neither will anyone else.”

I’m not going to disagree with that! As soon as a potential client asks for free work from me, they’re 5 seconds away from the end of the conversation! Her second piece of advice is just as good. This goes along with something I’ve been saying here for years: start your own blog and forge partnerships with others in your field. Read every word of it:

“If you want to get business you must have an awesome website, showing your best work and a nice, friendly picture of yourself. People prefer to hire someone who looks friendly rather than a faceless internet presence. Include a blog on the site (for the SEO value if nothing else). Find successful designers in the same niche and get to know them by commenting on their blogs, Twitter, etc. Once you’ve established a relationship, send them a nice note, complementing their work, and let them know you do similar work.Tell them if they ever have pass-along work they don’t have time for, you’d appreciate a referral.”

Chris Spooner

Chris Spooner doesn’t just sit in front of his shiny Apple computer all day long creating snazzy designs for cool folks from around the world, he blogs about it as well. His first blog contains beautiful tutorials for designers on Photoshop, Illustrator and the like as well as fantastic video advice for designers. And in March 2009 he launched Line25, an equally excellent blog covering all aspects of web design. He also has a labrador called Jake and goes on a lot about Black Ops which I believe is some sort of computer game.

Chris’s advice is pure Chris. Read it carefully as it basically summarises his success in the last few years in only a few words:

“I always advise up-and-coming designers to just keep practicing and experimenting. Use things that capture your interest in everyday life as material for personal projects, then share your thoughts, processes and the things you learn with others. This is essentially what I do on a daily basis and has seemed to land me some great opportunities so far!”

Ryan Scherf

Ryan Scherf is an designer, developer, author, teacher and entrepreneur from Minneapolis, MN, USA. You just have to look at some of the work featured on his homepage to see that Ryan produces some of the most beautiful and creative websites you will ever see. When he’s not slaving away at night for his clients, he’s working on his healthcare startup Bloom Health. Although Ryan has only had 5 hours sleep in the last 3 weeks due to a new addition to his family, he still found time to contribute to this project. Thanks and congratulations, Ryan.

Ryan sent two, equally useful pieces of advice. The first one I agree with wholeheartedly. I’ve said many times on my blog it’s far easier to get clients to come to you rather than the other way round.

“Always be promoting yourself. The best way to find new leads is let them come to you.”

And secondly, he echoes the advice we found from our survey results about how designers get paid:

“Require 50% upfront, and don’t accept payment on monthly plans. It never works out how you intended.”

Mike Smith

Mike Smith runs Made By Guerrilla a WordPress design studio from Knoxville, Tennessee, USA as well as a hugely interesting freelance design blog. Since he started working online in 2007, he has worked with over 200 clients, built hundreds of websites and wrote and published over 200 articles on various blogs, with topics ranging from freelance tips, design resources, showcase, tutorials and to “Guerrilla Marketing”. Mike describes guerilla marketing as “any of a number of unconventional methods of marketing with minimal resources for maximum results; any marketing campaign that uses non-mainstream tactics and locations”.

“Advice for other designers looking to start a freelance business – it’s not always going to be fun (invoicing, accounting, etc) but at the end of the day, it beats the hell out of going to someone else’s building and working to make someone else rich while we receive a small pay check ”

Karen McDade

Karen McDade is a South African freelance graphic designer currently working in Ireland. She has a blog where she writes about graphic design, mac stuff, software, games, books, etc., and displays her portfolio at OmegaRed.

Karen’s advice is right on the money for me where she stresses the importance of distinguishing between clients and time wasters:

“I would advise people to not take on just any client – if they hassle you about your price, or give you a lot of uphill then don’t bother with them. Nurture the relationships you have with your good clients, they are hard to find. Be prompt when corresponding with them and always give them your best work.”

John O’Nolan

John o’Nolan is a designer, entrepreneur, speaker, author, photographer but has taken to using the phrase “creative professional” to describe himself. He is the Deputy Head of the UI group for WordPress, founder and owner of Lyrical Media and avid twitterer.

It’s a little surprise then that this man of many words chose comparatively few to advise people in the business of graphic design:

“Under-promise, over-deliver, over-charge. If you fail to do any of these, you will make a loss.”

Now it’s your turn

Did we leave anything out? Is there anything you’d like to add to these words of wisdom? Which was your favorite?

I’ll leave you with this limerick from Douglas Bonneville:

There once was a graphic designer
Who could not draw a straight liner
Fresh out of school
She thought she was cool
And soon was a cook in a diner!

Download my e-book on how to run your own design business!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Being an independent graphic designer and running your own business from home is the best life ever – at least that’s what we think. Here is a guide to the hardware, software and back-up used based on the answers from my representative sample of graphic designers.

Further fascinating results from this survey can be found in these two recent posts:

• What Designers Do, How They Make Money and Where They Find Clients
• How Graphic Designers Get Paid

So, let’s get going. Remember, this sample of graphic designers were taken from every continent of the world and included hugely successful designers as well as people who were just starting out.

Graphic Designer’s Hardware

Hardware-wise, our designers came from both Mac and PC denominations of computer worship with the majority being Apple fans.

Macs

Designers have to regularly update both their hardware and software so the answers I got depended on where the designers were in their update cycle. For example, I had been struggling along with an old 21″ white iMac with a 2.16 GHz processor, 2GB RAM and a 250GB hard disc. And I’ve recently purchased a 27″ iMac with a 3.2 GHz, 4GB RAM and a 1TB hard disc – and I’m loving the extra speed and power.

For example, here is Steven Tiano‘s set-up: “I currently work on a 24-inch iMac with a second 23-inch Apple CInema Display. The iMac is a 2.93 GHz Intl Core 2 Duo machine with 4GB of RAM and a 640 GB hard drive.”

Having multiple screens or machines is quite popular. For example, Jon Phillips uses a 13inch Mac Book Pro (2.4GHz Intel Core 2 Duo with 4GB of RAM) and with an external Samsung monitor. David Airey has a 27″ iMac and a 15″ MacBook Pro.

Many Mac people have PC laptops and vice versa!

PCs

The designers who have PCs really know how to get the most out of them. Take Andrew Keir for example, who has a 2.6GHz Quad Core CPU with 12GB of RAM. This beast is security cabled to his desk. Another set up belongs to Carmia Cronje who has an Intel Celeron CPU 2.6GHz Dual-core with 2GB RAM and a Samsung 17″ TFT LCD monitor.

Lucas Tetrault, however, built his own PC running Windows 7 Ultimate 64 bit with an Intel i7 processor, 6GB of DDR3 RAM, Nvidia GTX Video Card and a 1TB hard drive.

Mice/Mouses

Many designers, including myself, use the Mac Magic Mouse. However, tablets are popular, for example the Wacom Bamboo tablet. Also, Logitech mice and Microsoft Arc Mouse were mentioned.

Phones & Tablets

Many designers listed smart phones, iPhones and iPads as part of their hardware arsenal as they dip their toes into app development. Xcode is being used to develop Mac apps.

Graphic Designer’s Software

Adobe Creative Suite & graphics programs

No surprise which was the common suite of programs that designers used! Adobe’s Creative Suite was being used by all of our designers in some incarnation, the most popular being the Design Premium CS5. But Quark, CorelDRAW X5 and Sketchbook Pro 2 were also mentioned.

Photoshop was the most popular graphics/image editor although some web designers much preferred Fireworks. One of our designers used Pixelmator a Mac image editor that’s much cheaper than Photoshop. Another alternative is GraphicConverter. Downsize is a utility that can batch resize images in bulk.

Other applications

Some of us splash out on the MS Office so as to read and create Word, Excel and Powerpoint documents. Whereas some of us make do with the open source OpenOffice.

Free text editors used were Notepad for PCs and TextEdit on the Mac. However, some designers preferred the following premium text editors: Textmate and Coda.

For font management Suitcase Fusion was the most popular.

And FTP-wise, the favorite open source solution was Filezilla, with many preferring to pay for either Fetch or Transmit.

Back-up

On-site

Many of our Mac users utilised Time Machine with some sort of external disc drive (usually 500GB or 1TB). For those of you that aren’t familiar with this utility it automatically saves up-to-date copies of everything on your Mac. Plus, if you ever delete or save over a file you can’t retrive, you can easily “go back in time” to recover it using one of the most exciting interfaces I’ve ever seen!

One of our designers had a Time Capsule which is an automatic wireless backup for your files. Available in 1TB and 2TB models.

Off-site

Not all of our designers had off-site back-up as a precaution against fire or theft. But the ones who did use the following:

• Dropbox Dropbox allows you to sync your files online and across your computers automatically. Ideal for cloud living!
• Mozy Founded in 2005, Mozy is “the world’s most trusted online backup service with more than 1 million customers backing up 70 petabytes of information to multiple data centres around the globe” according to their website.
• Backblaze Only $5 a month per computer for unlimited storage.

Thank you

A huge thank you to everyone who participated. I learned a lot from this. So, as ever, heartfelt thanks to the following:

Lucas Tetrault from Phoenix Wave Portfolio
Lynne Venart from The Art Monkey
Matthew Harpin from Freelance Web & Logo Design
Michael King from Black Swan Image Works
Mike Smith from GUERRILLA
Randa Clay from Randa Clay WordPress Design
Ryan Scherf from Ryan Scherf
Stephen Tiano from Freelance book designer, page compositor & layout artist
Derek Kirk from creative web design
Andrew Keir from Melbourne graphic designer, Andrew Keir
Andrew Kelsall from Andrew Kelsall Design
Anne Swanson from Anne Swanson Graphic Design
Bob Raynor from Bob Raynor – Graphic Designer
Carmia Cronje from Clementine Creative
Chris Metzner from data visualization graphic designer
Craig Wilson from Craig Wilson
David Airey from David Airey, graphic designer
Douglas Bonneville from freelance graphic designer
Hernan Valencia from The Construct Creative
John O’Nolan from John O’Nolan
Jon Phillips from SpyreStudios
Justin Miller from Magnum Creative Group
Karen McDade from Omega Red
Kyle Richardson from Enrich Design
Lauren Krause from Creative Curio
Liam Swift from Attract Love to Your Brand

More to come

So that’s it … well not quite, there is one more entry in the questionnaire that I haven’t published. I left a “final thoughts” section at the end where I got some great entries. I’ll put them in a blog post together with a few more I can lay my hands on.

What do you think?

Are you a graphic designer who runs their own business or thinking of becoming a self-employed work-from-home type? What did you think of this survey? As always, I’d love to hear your thoughts.

More info about independent graphic designers’ set-up and how they make their money in my e-book.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

This is the second part of my survey of independent graphic designers working from all corners of the globe and it throws up some interesting results about how they charge. The first survey results concentrated on what designers do and how they make money.

Questions about charging are the most common I get in my inbox. Here’s how my trusty designer respondents answered…

Do you typically charge clients fixed-rate fees or hourly/daily rates?

Clients and designers are most comfortable with fixed rate fees. Here, if both parties agree on the parameters of the task, the designer and the client know exactly how much it’s going to cost or pay before starting the project. Larger jobs are especially likely to be charged this way; whereas smaller jobs may be charged out at hourly rates.

Do you typically charge clients before or after project is completed?

But when can the designers expect to get their grubby hands on the wonga? Half of it up front and the rest on completion is the most common arrangement, although many designers mentioned that this was only normal with new clients. When there is a good working relationship, a more lax attitude to payment can be adopted.

How quickly do you expect your clients to pay you after you invoice?

I was pleasantly surprised to see that many designers get paid straight away. Especially as the law in my country, the UK, permits 30 days to elapse between billing and receiving the money.

Do you bill manually or use billing software?

Nearly half of our designers use billing software. Here’s what they use:

• Freshbooks helps you send and manage invoices online, allows auto-billing to automatically charge your client’s credit card and gives your clients online access to their invoices and account history.
• Harvest Set up takes seconds. Invoices created in minutes and in different currencies.
• FreeAgent builds professional estimates and proposals which can be tracked through to approval and converted to invoices.
• Billings 3 for Mac combines powerful features with stylish designs so you can send elegant invoices right out of the box.

Further information about charging

Our designers gave these further points of clarification about their charging – some excellent advice here:

• “For publishing companies I usually get paid at the end of a project, within 15-30 days. For individual clients, typically self-publishers, I get 1/3 paid up-front, and the remaining 2/3 on completion of the project.”
• “I have an Access program that will create invoices as well as estimates.”
• “You can use PayPal to create invoices for you and you can also send W9′s electronically thanks to the good ol’ IRS.”
• “I charge per project on everything except for maintenance work. For that, I charge by the hour, with a minimum charge of 15 minutes. But for projects, the way I figure my fee is to calculate the number of hours and then add 50% for communication (emails, phone calls, NOT including face to face meetings. Because those can easily get long, I charge extra if I know a client will want any) and unforeseen problems that always crop up.”
• “If the client is a new client I usually ask for payment upfront (100% if it’s a small project or 50% upfront for bigger projects and the remaining 50% once completed). With my standard clients I invoice them monthly.”
• “New clients are fixed rate. Established clients are hourly.”
• “I tend to take a 20-30% deposit”
• “In regards to receiving payment after billing a client, it depends on the client. My biggest client takes literally weeks to pay, as all invoices are dealt with by people further up the chain, so-to-speak. However, for most work for regular clients, about 1-2 weeks appears to be the norm. I sometimes offer clients the change to pay in full before the project starts for a 5% discount. A fair few clients take this option, too.”

As ever, there are some interesting ideas there, especially the offer of a 5% discount in exchange for an upfront payment.

Do you have contracts with your clients?

These were perhaps the most surprising results of the whole survey. I have often read that designers should always, always, always have contracts and it seems that this is not the case. I personally believe that 99% of people are honest and therefore it is much more important to be clear about the nature of the job and the payment than it is to sign contracts. However, some designers will disagree with me and, as you can see, 50% use contracts for every job.

Do you have written email exchanges where the price and extent of the job is discussed?

For me, leaving a “paper trail” of exchanges between you and the client can be even more important than a contract. Briefs can change during the course of a job so, in order that everyone understands the extent of the job and the payment, it’s advisable that conversations are recorded textually.

Do you discuss price and extent of the job with the client and leave it at that?

So, similarly, it’s not often that designers accept a brief on a phone without anything in writing. However, it’s possible that this can happen with a trusted client.

Further information on agreements and contracts

Here are some more helpful comments left by some designers about agreements and contracts:

• “I’ve only once had difficulty with – let’s call it – project creep. The project really got off the tracks and took far too long to complete. However, I was compensated fairly for the extra time; but it drove me crazy!”
• “I’ve never had a payment problem. I work a lot on referral these days. If I have a new client I always get the 50% up front (or if it’s a large project), but otherwise I’ll let that slide with someone I’ve worked with before.”
• “For new clients and larger projects I use a project agreement (contract just sounds so intimidating!) where I spell out the scope of the project, deliverables, timetable and payment schedule. I sign it and have the client sign it and return it with their deposit. Once I get to know a client well and we work on many projects together, I generally just use written agreements via email for small jobs and maintenance work. I always make sure to have something written in email that we’ve both agreed on, just in case I need to go back and reference it. I’ve been very fortunate to work with some great people and I’ve never had a problem with clients not paying (knock on wood!!).”
• “I used to have lots of clients but it became too much to manage, and some of them weren’t good with paying on time. I whittled my client base down to a select few clients which I’ve worked with for many years and have a good relationship with. Although I don’t have standard contracts with some of them, everything that is discussed is recorded in some fashion in chat logs or emails.”
• “Moderate to light detail contracts but lots of email trail. You don’t want to refer to contracts to resolve a problem when referring to a simple email does the trick and gets the project moving again. In the end you want to get paid, not go to court.”
• “I have learnt the hard way so from now on I will get every thing written down.”
• “Job specifications are recorded through email exchanges. I haven’t had payment problems for some time now because my work commences upon receipt of 50%, and the remaining 50% is received prior to supply of digital artwork.”
• “I have a contract attached to the quotation. They have to pay 50% up-front,  and the rest when the project is finished. What causes payment problems? When the client doesn’t check his/her email after I have sent them the invoice!”

I tried to whittle those quotes down but they were all so interesting and echo the general success of the 50% before 50% after formula for payment.

Thank you

A huge thank you to everyone who participated. I learned a lot from this. So, heartfelt thanks to the following:

Lucas Tetrault from Phoenix Wave Portfolio
Lynne Venart from The Art Monkey
Matthew Harpin from Freelance Web & Logo Design
Michael King from Black Swan Image Works
Mike Smith from GUERRILLA
Randa Clay from Randa Clay WordPress Design
Ryan Scherf from Ryan Scherf
Stephen Tiano from Freelance book designer, page compositor & layout artist
Derek Kirk from creative web design
Andrew Keir from Melbourne graphic designer, Andrew Keir
Andrew Kelsall from Andrew Kelsall Design
Anne Swanson from Anne Swanson Graphic Design
Bob Raynor from Bob Raynor – Graphic Designer
Carmia Cronje from Clementine Creative
Chris Metzner from data visualization graphic designer
Craig Wilson from Craig Wilson
David Airey from David Airey, graphic designer
Douglas Bonneville from freelance graphic designer
Hernan Valencia from The Construct Creative
John O’Nolan from John O’Nolan
Jon Phillips from SpyreStudios
Justin Miller from Magnum Creative Group
Karen McDade from Omega Red
Kyle Richardson from Enrich Design
Lauren Krause from Creative Curio
Liam Swift from Attract Love to Your Brand

More to come

That’s not it! More questions about our designers’ equipment, software, and more great advice to come!

What do you think?

Are you a graphic designer who runs their own business or thinking of becoming a self-employed work-from-home type? What did you think of this survey? As always, I’d love to hear your thoughts. And, if you enjoyed the article, please consider tweeting or voting for it on your social network of choice!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Here are the first results from my graphic designer’s business survey. I am so grateful to everybody that participated.

I surveyed designers that were mostly working from home and running their own businesses. Participants were from every continent and were spread over different design disciplines. They represented every level of experience – from people who were just starting out to people like John O’Nolan, Deputy Head of the UI group for WordPress, and David Airey, the author of Logo Design Love, a designer whose blogs attract over a million monthly page views.

What exactly do graphic designers do all day?

You may well ask. Well, one thing’s for sure, they don’t spend all the day designing. In most cases, they don’t even spend half the day designing…

On average, how many hours a day do you spend actually designing?

Bear in mind the question didn’t specify the separate stages of the design process. For web design there’s the visual stage and the development stage, for print design there’s the design stage and the artworking stage. So even the designing hours may not be spent doing creative work.

So what are we doing if not designing? My next two questions were about social media. And I got some unbelievably honest answers…

How many hours a day do you spend on social media/web browsing unrelated to your marketing (Facebook, Twitter, networking with friends and family, and general web surfing)?

Yes, you saw it right, the designers surveyed spent an average of 1.6 hours a day on social networks unrelated to work (above) and only 1 hour a day on social networks related to their work (below). Naughty, naughty!

How many hours a day do you spend on social media/web browsing specifically related to marketing yourself (Facebook, Twitter, voting for your blog posts, forums, liaising/networking with designers)?

I was expecting designers to spend a lot of time tweeting, etc., I know a lot of us get work that way. But, even I was surprised that we averaged at 2.6 hours a day on social networks!

How many hours a day do you spend writing blog posts, responding to comments on your blog(s) or general work on your website?

Bear in mind these are mainly designers that have a website (usually with a blog) and run their companies. For us, the website is the hub of our professional world. So, no surprise that they spend an average of an hour a day on it.

How may hours a day do you spend liaising, meeting, talking or writing emails to clients?

We all know how the most simple client job can involve much time in communication. Look how much time is spent in client communication and remember it next time you give a quote!

So is there anything else you spend time on? A few designers added these comments:

• “Parenting! ”
• “Travel to and from meetings.”
• “It seems as if I spend a lot of time e-mailing and talking with clients as I design. The automatic feedback is great!”
• “I didn’t include coding/debugging websites in the “hours actually designing.” Maybe I should have? That would bring the total up.”
• “I spend a lot of time doing research for clients in order to come up with the best solutions.”
• “Accounting, emails, consulting, freelance writing, ad management, SEO.”
• “Market and Trend Research. Learning new techniques online.”
• “I do spend quite a bit of time educating clients. I do small spot seminars by phone or in person for SEO basics, CMS overview, etc.”
• “Studying – 2 hours a day.”
• “Bookkeeping, live networking, professional groups.”
• “Some other aspects of running a freelance business, for me, are also compiling quotations, sorting invoice and statements in Billings 3 for Mac and continually tidying up my desk!”
• “An hour a week on accounts maybe?”

Graphic designers and their income

I wondered how our designers were earning their money. Asking about the income source split brought some interesting results.

What percentage of your annual income do you receive from clients from the country you operate in?

I wanted to know how much our home-based designers worked internationally. It seems despite the global nature of what we do many clients still prefer to employ local designers. Some US-based designers worked only with clients from their home country. However, others had a totally international clientele.

Roughly how much of your annual income do you receive for something other than client work (product sales, advertising, affiliate links, etc.)?

Here I wanted to see how many were employing tactics from The 4-Hour Workweek by Tim Ferriss and earning money while they slept. It seems, though a lot of us have other sources of income, these are still a very small in comparison with client work.

Roughly how much of your annual income do you receive from your single biggest client?

According to the Pareto Principle or 80:20 rule, you will receive 80% of your income from 20% of your clients. With this in mind the answers here came as no surprise.

Graphic designers and their clients

How much client work do you outsource to others?

Graphic designers live on their reputation and can not afford to outsource too much so that the quality of work or personal interaction with the client suffers. I suspect our designers only outsource to companies like oDesk and crowdSPRING when they don’t have the skills necessary to complete a particular job.

Over the last year what percentage of income did you receive from clients you had worked for before?

Your best clients are your current clients…

Over the last year what percentage of income did you receive from recommendations?

Doing a good work results in recommendations. I’ve seen this again and again.

Over the last year what percentage of income did you receive from new clients that weren’t recommended to you from someone or some company?

Given that a lot of the designers questioned have only been in their current roles for 1, 2 or 3 years this is a staggering statistic. Only just over 20% of our designers’ income is from new business.

Where did you get most of those new clients from?

This is something I get asked again and again – “how do you get new clients?” I suspected the website would be the best source but I had some great other answers. There’s some fantastic advice here:

• “I get my clients from a combination of cold emailing twice yearly, one print postcard mailed per year, my website, my blog, social media (LinkedIn and Twitter, particularly the latter), and commenting on others’ blogs and on various online forums.” Stephen Tiano
• “Cold calling, but to people who are past or present colleagues of current clients in similar fields.” Lynne Venart
• “Person to person marketing in associations and leads groups.” Michael King
• “Through my blog I’ve made connections with other designers and developers and I receive work from them many times. Some of my best clients have come to me because other designers are too busy and hand off their new contacts to me!” Lauren Krause
• “Recommendations from friends.” Kyle Richardson
• “90% of my clients I get from word of mouth referrals. I occasionally get queries for work through my website. I don’t advertise.” Karen McDade
• “Most of my business comes from referrals and business contacts. I market my design services through networking groups and I do a quartely mail peice to current and potential clients. When I finish a job for a client I ask them if they are happy with the results and the service. If they are, I ask them to keep me in mind for future projects and ask for 2 or 3 names of people I might contact for more work.” Justin Miller
• “Word of mouth recommendations” Carmia Cronje
• “I meet most of my clients through attending networking events, or attending classes at my local Small Business Development Center” Anne Swanson
• “I get most new clients from my website, with much of new work coming from churches, as my site ranks highly for the term Christian graphic designer in Google. I also produce work directly from client recommendations, too.” Andrew Kelsall
• “I would estimate a roughly even mix of via my website, recommendations and repeat business.” Andrew Keir

Thank you

A huge thank you to everyone who participated. I learned a lot from this. I know some of the questions were difficult to answer – it’s hard to guess how much time you spend doing certain tasks in a day, especially when no two days are ever the same. So, heartfelt thanks to the following:

Lucas Tetrault from Phoenix Wave Portfolio
Lynne Venart from The Art Monkey
Matthew Harpin from Freelance Web & Logo Design
Michael King from Black Swan Image Works
Mike Smith from GUERRILLA
Randa Clay from Randa Clay WordPress Design
Ryan Scherf from Ryan Scherf
Stephen Tiano from Freelance book designer, page compositor & layout artist
Derek Kirk from creative web design
Andrew Keir from Melbourne graphic designer, Andrew Keir
Andrew Kelsall from Andrew Kelsall Design
Anne Swanson from Anne Swanson Graphic Design
Bob Raynor from Bob Raynor – Graphic Designer
Carmia Cronje from Clementine Creative
Chris Metzner from data visualization graphic designer
Craig Wilson from Craig Wilson
David Airey from David Airey, graphic designer
Douglas Bonneville from freelance graphic designer
Hernan Valencia from The Construct Creative
John O’Nolan from John O’Nolan
Jon Phillips from SpyreStudios
Justin Miller from Magnum Creative Group
Karen McDade from Omega Red
Kyle Richardson from Enrich Design
Lauren Krause from Creative Curio
Liam Swift from Attract Love to Your Brand

More to come

That’s not it! More questions about our designers’ equipment, software, billing, contracting and more great advice to come!

What do you think?

Are you a graphic designer who runs their own business or thinking of becoming a self-employed work-from-home type? What did you think of this survey? As always, I’d love to hear your thoughts. And, if you enjoyed the article, please consider tweeting or voting for it on your social network of choice!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I’ve created a survey about graphic designers who run their own businesses – whether they work at home or have employees, outsource and run much larger companies.

There are many design and business sites in the blogosphere. However, design sites tend to focus on tutorials and inspiration whereas there isn’t a great deal of information on how to run the business side of things as an independent graphic designer.

So this survey is about the practicalities, eg. equipment, charging procedures, marketing, income sources, etc., asking questions such as:

• How much client work do you outsource to others?
• Do you work from home or elsewhere?
• Roughly how much of your annual income do you receive from your single biggest client?
• Do you have contracts with your clients?

The questionnaire took 5-10 minutes to fill out.

It was great to get the feedback from everyone out there.

I have had a great response from people I’ve sent it to (including some really great designers that I admire very much) as well as from others who simply wanted to help.

The results are in my e-book Running a Web Design Business.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

It pains me to think of the $3000 I spent on a Mac Performa 6400 complete with a huge monitor and in-built 28K dial-up modem in the mid-90s. The machine chugged along like an aging donkey and the information super-highway felt more like a traffic jam. I wish I was starting now with readily available broadband connections and quality computers at affordable prices!

The most important thing when setting up a home business is to not spend money. Try, wherever possible, to utilize the equipment and communication infrastructure you already have rather than rushing out to the stores. We’re trying to get the money coming in here, not the other way round!

Computer

Whether you are a Mac or PC person, you will need a fairly decent computer with large disc space, fast processor and bags of RAM. If I was starting out today I would buy something like an Apple iMac 21.5-Inch Desktop for around $1140/£730. With a 3.06 GHz Intel i3 dual-core processor and 4GB of RAM you’ll have all the computing power and speed needed to get you going and 500GB hard drive will be more than enough to store your work at first.

Software

In order to do some design work, you’re going to have to get some software. There’s a lot of great free and open source tools out there that in some cases do the job as well as the expensive stuff. But, for graphics, unfortunately, you pretty much have to get the Adobe Creative Suite.

You have four options of Adobe graphics packages:

• Adobe Creative Suite 5 Design Standard $1,239.00 – Photoshop, Illustrator, InDesign and Acrobat Pro
• Adobe Creative Suite 5 Web Premium $1,613.18 – Photoshop Extended, Illustrator, Acrobat Pro, Flash, Dreamweaver, Fireworks, Contribute
• Adobe Creative Suite 5 Design Premium $1,774.96 – Photoshop Extended, Illustrator, InDesign, Acrobat Pro, Flash, Dreamweaver and Fireworks
• Adobe Creative Suite 5 Master Collection $2,448.99 – Photoshop Extended, Illustrator, InDesign, Acrobat Pro, Flash, Dreamweaver, Fireworks, and video editing products such as Premier, After Effects, Soundbooth

The good news is, you can probably run a graphics business quite well with the cheapest option: Adobe Creative Suite 5 Design Standard. The 3 applications I use the most are Photoshop, Illustrator and InDesign. Dreamweaver is not essential for creating websites (although, it does speed things up) you can use a text editor and an FTP client. You can advise your clients against using Flash, but, I’m afraid I find I still need it from time to time.

If the above purchases are too much for you, you can look on Ebay for a computer with CS5 already installed.

You may already have Microsoft Office but, if not, don’t rush out and buy it. See how you get on with OpenOffice first.

After you’ve had a few jobs you may want to purchase a font management program. I use Suitcase Fusion3.

If you have too many fonts open that you are using for different projects it can cause decreased performance in your machine. Font management software will open and close fonts for you optimizing your computer’s speed.

As with everything else, don’t go and purchase a load of fonts first. Wait until the work comes in first and then, if you can’t find any good free fonts, purchase a few of your tried and tested favorites.

Other hardware

Further down the line, you’ll have your hard drive stuffed with client work, software and not to mention your own personal photos and movies. What happens if something should go wrong with the machine. You need back up and a portable alternative.

The cost of external discs keeps going down and down. Here’s a 1TB (yes, that’s 1000GB) Western Digital USB external drive for only $67.00. And to think I spent over £100 on a zip drive once – and probably another £10 for the 100MB zip disc. If you don’t know what a zip disc is, don’t worry, you don’t need to know!

If you run a Mac, all you have to do is to set up Time Machine and all your work will be backed up so that if you deleted something a few days ago you can ride the cyber HG Wells machine back to get it.

Once you get more clients and more money, you will probably want to buy a laptop so you can work when out and about. There’s nothing like working on a MacBook Air whilst sipping coffee and watching the world hurry by.

Other things to think about

I will be returning to the subject of setting up a home office soon. I have written an article with more general advice about rates, clients, accounting and networking for graphic designers. And, the most important thing, I have also written about how to get clients and how to market your business’s website.

Of course there are always things to think about. But I am a great believer in just starting. Accountants can be sorted out later; the company name and stationery (if any) can be sorted out later; the business plan can be thought about and sorted out later. If you’ve got a full time job or if you’ve just been made redundant – now is the best time to start a new business and designing at home is a brilliant way to make money. You only need software, a computer and a broadband connection in order to undercut the big boys and provide grateful clients from all over the world with your fresh and original ideas.

Everyday you’ll wake up excited about the day ahead never knowing what it will bring. Once you start working, one job will lead to more jobs and pretty soon it’ll be a full-time occupation. I was working for other people during the day and then working on my own business during the evenings and weekends for about a year and a half.

Now I’m running the design business full time and I absolutely love it! Would you like to be a web or graphic designer and work from home? You can. Download my e-book about Running A Web Design Business now!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

6 years ago I was typesetting company reports, trying not to look at the clock to see how soon I could go home. Now I work from home and every time I look at the clock I marvel at how quickly time passes! I have managed to cross-over from being a print designer and artworker to running an online design and marketing business.

It was difficult at first, putting my ruler and pantone swatches against the screen and thinking that JavaScript was some sort of Indonesian font, but I realized that some principles of design remain constant through print and web and it’s not as difficult as it looks.

Here are some of the secrets of learning web design

First of all, don’t make the same mistake I did and use Dreamweaver as a WYSIWYG design tool like QuarkXpress or InDesign! You’re going to have to learn some code.

HTML, the mark-up language that is the bare bones of all web pages, can be mastered in only a few hours. It’s very probable you already know some of it. CSS (which can be included in HTML files but is ideally a separate file) will take longer to learn but is necessary for the designer to know.

The best way to learn the various technologies associated with web design is to find web sites that you like and view the code to see how it’s done.

• In Firefox go View > Page Source
• In Google Chrome View > Developer > View Source
• In Internet Explorer go Page > View Source

Within the HTML you will see absolute and relative paths to other files, for example, the style sheet may be http://www.website.com/css/styles.css or an image may be http://www.website.com/image/company-logo.jpg. Follow these paths to find everything you can about the different elements of a website. This will help you to make them yourself.

Another techniques that will help you learn HTML and CSS is viewing the Developer Tools in Chrome or Internet Explorer and in Firefox using the Firebug extension. While in Developer Tools or the Firebug panel, select on the cursor (an arrow or a magnifying glass) and with that click on a web page element and the code affecting it will show up.

You can make HTML and CSS changes and see them live on the web page. These tools will also show you which CSS selectors affect an element and which are overrided.

Images should be 72 dpi and in RGB not CMYK

Most computer monitors display at 72 pixels per inch – so a 72 pixels high image will be roughly one inch tall. In Photoshop, all web images should be 72 dpi and in the RGB color mode (unless Grayscale). Images viewed at 100% in Photoshop will be the same size on the web page. However the colors will all look different from monitor to monitor. Use the Color Picker in Photoshop to get the hexadecimal values of colors.

Use File > Save for Web & Devices… or Edit > Copy Merged to export your web images. For file types, use:

• GIFs for graphics (maybe only a few tones of the same color)
• JPGs for normal photographs (like a headshot)
• PNGs if you want transparency (GIFs have transparency but only PNGs offer degrees of transparency – but don’t start dancing a jig of delight yet, you’ll need a hack to get them to work in Internet Explorer 5.5 and 6)

Think of space in terms of pixels and percentages not millimetres and inches! The content area of a website shouldn’t be much wider than about 1000 pixels. An HTML email really shouldn’t be wider than 600 pixels.

When designing or laying out web pages in Photoshop, try to use as many Vector Smart Objects as possible as they can be scaled, skewed and colored and will never lose their quality.

Think of type in terms of pixels, percentages and ems not points

For text you can use only a few core web fonts. There are ways of getting around this but that’s for another day. Maybe you’re only OK with the following:

• Arial
• Avant Garde
• Courier
• Georgia
• Times New Roman
• Trebuchet MS
• Verdana

But you can choose fonts to use if the one you want is unavailable. So a CSS declaration such as font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; means: “if the computer reading this webpage doesn’t have a lovely Helvetica Neue, please use an ordinary Helvetica, otherwise Arial, and if they don’t have any Helveticas or Arials then just use any old sans-serif font – there’s no hope for them!”

No need to bother about hyphenation, widows, orphans, legs of copy – they don’t exist here. This is the web, baby! (If you really want to get rid of a widow – on a heading perhaps – use a non-breaking space ( ) between the last two words.)

Resources

The best way to learn web design is to … design web pages. Challenge yourself – each time you create a new website. Otherwise you can:

• Try Google (obvious, I know, but … )
• Ask a question at SitePoint or Digital Point forums. If you have researched the query adequately and explained it simply, then 99 times out of 100 someone will provide you with a solution. There are many other excellent design forums as well that can be a great help: Estetica Design Forum, DesignersTalk, Web Designer Forum, to name but a few. (If you’re interested in link juice Digital Point is dofollow for forum signatures!)
• Use online browser rendering services like Adobe’s BrowserLab and BrowserShots. BrowserShots has more browser choice but it’s painfully slow. Use IETester on a PC to test different versions of Internet Explorer – it’s crashy but it does the job.
• Use these sites to validate the HTML and CSS
• Read books. I found this book very useful: Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition by Ian Lloyd
• Get up, make a cup of tea, tear your hair out and shout expletives – it won’t make any difference but it might make you feel better

Above all, don’t worry! Web design is sometime fiendishly tricky but strangely satisfying. And, if I can do it; anyone can.

Conclusion

Are you a convert from print design who has mastered the art of creating websites? What were the most confusing aspects of web design initially? Or, if you are just starting out, let me know if this has helped you at all.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

A guest post from Louise Baker of Zen College Life

For web designers, developers and amateur creative types that work with a lot of graphics and image manipulation, the decision of which software to use is an important one. While Adobe Photoshop and its related Creative Suite programs are well respected throughout the world, open source software is making some big gains in terms of popularity and acceptance. Each graphics software release continues to push the envelop of what’s possible in terms of design. Here’s a quick comparison between the proprietary and free, open source software available for graphic designers and web developers.

Photoshop vs. GIMP

As the ultimate Swiss Army Knife of image manipulation and layout creation, the latest version of Adobe Photoshop offers an impressive array of capabilities for almost every need. Photoshop handles paths, layers, color saturation and transparency impeccably. It’s easily the most polished raster graphics editor available. It’s also fairly expensive, retailing at a price of $699. It’s main competitor is the GNU Image Manipulation Program, also commonly referred to simply as GIMP. GIMP is free, stable and supports a rich ecosystem of handy plugins, brushes and tools to extend the functionality of the basic program, but illustrators who are long used to Photoshop may find GIMP too dissimilar to use effectively.

InDesign vs. Scribus

When it comes to desktop publishing applications, the Adobe InDesign package is the go-to program for crafting newsletters, posters, promotional fliers and e-books. It allows even the most inexperienced user the ability to quickly and easily set layouts and play around with designs. Scribus is the closest equivalent to InDesign in terms of ease of use and functionality. Boasting many of InDesign’s main features and with a similarly uncomplicated user interface, Scribus is available as a free download for Mac OS X, Windows and Linux. The major drawback is its inability to work with the file formats used by Adobe’s InDesign.

Illustrator vs. Inkscape

Finally, there’s the matter of vector graphics editing. Adobe Illustrator is one of the oldest vector graphics tools on the market. As such, it’s a highly stable and powerful way to work with icons, logos and any other type of 3D graphics that are beyond the capabilities of Photoshop or GIMP. Popular with Linux users, Inkscape has many of the same capabilities as Adobe Illustrator when it comes to vector graphics manipulation. Though lacking some of the refinement of Illustrator, it consistently produces smaller, lighter SVG files without a lot of “garbage code” and bloat.

Conclusion

Though pricey, using Adobe software has some key benefits. The Adobe Creative Suite is the industry standard for graphic design at present and will remain dominant for the foreseeable future. As such, there are many more tutorials and guides available online for beginners. Open source software, though free, has a steeper learning curve and can be challenging for the inexperienced. For many, the established community of developers using Adobe software and the support system they provide is enough of a reason to choose Creative Suite tools. For more advanced users, open source software is an appealing and low-cost alternative.

Louise Baker is a freelance blogger and journalist who writes for Zen College Life, the directory of higher education, distance learning, and online schools. She most recently wrote about the top online colleges.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

There is a game in this industry: the trade off between graphic designer and client. I have heard this expression in large design agencies many times: “this would be a great job if it wasn’t for clients!” I disagree, I think it’s a great job period.

If you don’t like your clients, get out of the industry!

How can there be anything wrong with clients?

Imagine the experience of having lovingly labored over an exquisite piece of design, only to have the client’s mother suggest a different color because it matches her curtains. The way you deal with these challenges will dictate the success of your business.

A disagreement with a client is an opportunity.

Never, ever get angry

I’m not saying, don’t show your anger in front of anyone. I’m actually saying, don’t be angry! Anger saps your energy and is unproductive. If you feel like getting angry with a client, don’t. Move on to something else, ask a third party for advice, sleep on it and see how you feel the next day.

There are a few classic problems. Clients will typically want the product shot to be as large as possible whereas the graphic designer will usually want more negative space around the image to balance the page and draw the customer in. Clients may also want to include as much product information as possible to persuade the customer of it’s merits, whereas graphic designers will usually seek to de-clutter wherever possible and condense the information to only a few unique selling points.

How do you square the circle between a client’s instinct to hard sell and the designer’s need to simplify the narrative to the end user?

Do you re-design as the client says and hope that the result will prompt a swift change of mind? Or do you explain as best you can the reasons why you think the current design works? Or, probably your best course of action, do you do both? Reconsider the design, listen to the client, introduce some of the suggested amendments whilst keeping the clarity of the original vision. The answer comes with communication.

If the client doesn’t agree with you, don’t take it personally. The client has more experience in the particular market and probably knows best.

The difference of opinions will give you a fascinating insight into the client’s world.

There’s no such thing as bad clients

There are only good clients and ex-clients. If you have a client that is a real pain to work with then that client is going to cost you money. So, you politely and unequivocally tell them to work with someone else.

But I never have any trouble with my clients. I really, really like them! I actually find it amazing that people phone me or email me and offer me money for what I do. The buzz I feel doesn’t diminish as time passes.

If you have trouble in this area I would suggest you start liking your clients. Become interested in their industry. So they sell widgets. Find out about their widgets. Ask them how the widget industry is at this time of year. Ask about their life, their family, their kids. Don’t force it. But ask and talk about them because you want to.

Otherwise, here’s some more specific advice about how to handle clients from my perspective as a freelance graphic designer:

How to avoid pitfalls

1. I always have in writing exactly the nature of the job, the agreed price and, very importantly, the amount of design stages – so there’s a clear end in sight.
2. Many designers will say a contract is 100% necessary every time. Personally, when the client is a large enough organization based in London, UK, where I am I would never bother with contracts. If the client is an individual from overseas I will insist on a contract or half the money upfront. This is what experience has taught me.
3. If someone phones up and says “I wanna build this great site, yeah, like Facebook only better like, with all sorts of stuff”, politely to ask them to put all the available content and intended functionality in an email and that will get rid of 99% of all time-wasters. If someone is asking for a new website or an important piece of marketing to be put together it is essential that they are able to put something about the ideas, the market or the object of the project in writing. And, the wonderful nature of copying and pasting will mean less typos!
4. Generally clients who just want to natter for ages on the phone aren’t the ones you want.
5. Try to spend as little time with clients as possible. The more conversation about a brief, the more confusion. If, while working on a brief, you find an area of uncertainly, don’t immediately reach for the phone to bother the client. See if you can discover your own solution to the problem or mention it while you are showing the next design stage. This way the client sees progress before potential problems.
6. Read the brief, read the brief, read the brief. Take notes if the brief is over the phone. But, if the brief is written down, read it again and again.
7. Use your network. Email trusted colleagues, post in forums, even phone a friend when the going gets tough and see what they say about the client’s requests. You may find that they’re not as strange as you think.
8. Never say something is difficult.
9. If a client asks for extra work or less money because of a promise of more work or money in the future, politely decline. Tell them “my experience of this fast-moving and fickle industry has taught me to take care of the present as tomorrow never knows.”

Conclusion

Generally, I think it’s all about attitude. If you genuinely like your clients, are interested in what they are trying to do and don’t think you’re right all the time then, I think, you will have successful relationships with them. Otherwise, resign yourself to a professional lifetime of discontent!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

This article comes with a warning: easily offended graphic designers please do not read on!

Graphic design is not rocket science, nor does it depend on artistic talent – it just takes a lot of practice.

Some designers love to say that graphic design is a God-given talent that only a select few special people can have. Others will say that you also need an art college education. I say you need time and application – something we all have.

They are very angry about people who, with some knowledge of graphics programs and web promotion, can advertise themselves and do business as web designers without any training. I’m not. I say more power to them.

So what if some developers with limited design experience make some dreadful websites? They are only learning from mistakes that other “designers” did invisibly in college.

Let’s start with a definition:

What is graphic design?

Graphic design is usually described as visual communication of graphic elements and text to represent an idea or concept. A graphic designer improves the conversation between the client and the customers. A person who can combine the left brain thinking of the corporate world with right brain creativity.

So maybe somebody that is tremendously talented in the creative arts will be best suited to becoming an artist rather than a graphic designer.

Compromise and communication

Some graphic designers continuously complain that their clients don’t appreciate their designs. A good graphic designer will listen to the client in order to understand the market.

There may be differences between the designer and the client about how to communicate the message. This is where experience comes to the fore: How do you square the circle between a client’s instinct to hard sell and the designer’s need to simplify the narrative to the end user? No amount of talent nor hours in the classroom is going to help you with this one.

So, how do you learn graphic design?

Just do it!

I have laid out what you need to be a graphic designer in terms of software, hardware and resources. But the most important thing is yourself and your network.

You have your family, friends, colleagues, and, of course nowadays, an online army of people who can help you in forums, groups and social media. Show your work to the world and invite feedback (a thick skin is needed). Ask people how to do things. See what others are doing. Watch. Learn. Adapt. Above all else, keep an open mind.

Conclusion

There is a tendency for some old school designers to sit back, congratulating themselves on their god-given talent which impedes their development in the newest areas of the industry and damages their relationships with clients.

Design doesn’t sit still. There are new areas of expression, new trends and new designers coming along everyday. People without a design background can learn design and find new ways of expression. I believe this has happened in the last few years with web design standards being set by people with all sorts of backgrounds – and all sorts of talents.

I would never discourage anyone from becoming a designer due to a perceived lack of “talent”. Who defines the word “talent” in design? Specifically the people who will benefit from the exclusivity of the profession. And what are you referring to when you say talent? The talent of dealing with clients? The talent to understand a brief? The artistic talent? This term is so subjective that an attempt to define it only hinders creativity.

So, don’t worry about your talent – worry about getting work!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I wasn’t always a freelance graphic designer. I used to teach English to Brazilian businessmen but that’s another story. I started by working for newspapers and magazines so my background is in print. By a mixture of application and good fortune I taught myself how to create usable, aesthetic, standards-compliant websites and discovered how to get visitors to them by running this blog. So I’m lucky to be able to offer a large range of services to my many amazing clients.

I’m also lucky that commuting into work for somebody else is a distant memory for me. But I distinctly remember an aura of elitism that existed around senior designers when I was starting out. Maybe it’s because I never went to design school but I passionately believe that anyone can do this (or anything) if they want. Here is what you need to have this fantastic career:

Proprietary Software

Adobe CS is the only proprietary software you’ll need. Of this suite of programs I find Photoshop, Illustrator and InDesign are the ones you really need to get to grips with. Illustrator for vectors, Photoshop for photos, effects and graphics and InDesign for long documents. If you’re only interested in web design, you can scrub InDesign from the list. There are open source graphics packages such as Gimp but I would find things very difficult without Creative Suite.

Free Software

You will need software for just about everything. The good news is that most of it is available for free. I have just been featured Char Polanosky‘s blog detailing my essential tools.

Hardware

I have an iMac at home and a Macbook for travel. You don’t need to go down the Mac route but it was what I started with so I’m hooked now. You will need a fairly powerful computer with a decent sized screen. You should also have external drives and a back up for when it all goes horribly wrong.

Fonts

All designers need a knowledge of typefaces. But take it nice and slow. Don’t rush out and buy Helvetica Neue or download a million free fonts. Continuously ask yourself when you see design work whether or not the font works with it and why. There are some fantastic new free fonts out there but you will need several weights of the classics.

Imagery and graphics

We all the know the usual stock and micro-stock photo libraries but there are a lot of great free photography sites and lots of great free vector content out there too.

Web presence and host

If you want to be a freelance graphic designer, a freelance web designer or anything at all you need your own website. Do not waste your time putting your portfolio on a 3rd party site or indeed putting your details on a bidding site. You may experiment with these sites and social media later. The first thing you need to do is to decide on your web address, register it and get a shared server or VPS server to host your own personal website.

Get clients to come to you so that you don’t have to go out and find clients. Start a self hosted WordPress blog and write about what you do.

A network

This is an added section due to a very useful comment I got below from Jonathan. You are going to need a network of people, other designers, photographers, artists, developers, etc., to help you. Sometimes it’s just great to be able to ask for help. So, join design forums, participate in relevant LinkedIn groups, leave comments on blogs and generally interact with people both on and offline to strengthen and expand your network. Help people and they will help you.

Jonathan’s comment below is a case in point. He has made an excellent addendum to this post and now we are connected. Thanks, Jonathan!

Clients

I knew I was forgetting something… clients are more-or-less essential to your business! The one thing that I can not stress enough is the value of keeping clients. More than half the work I do is for existing clients rather than new business. And a significant amount of new business comes from recommendations. So, remember, the best clients are the ones you already have.

All the clients I have (apart from recommendations from old clients) have contacted me from this website. Which is why I think it’s so important to have an active website that appears high in Google searches for a variety of keywords. Regular readers of this blog will know I’ve written about how to market yourself in this way.

Anything else?

I’m not going to insult anyone by saying the usual: “you need a thick skin, hard work, dedication and passion” – I assume you have all these in spades as you are reading this. And, to be honest, you’re also probably going to need a little bit of luck. But, don’t we all? People will say you need talent. But I won’t. For me, hard work, dedication and passion will beat talent any day.

So, is that it? Is there anything else you need to be a freelance graphic designer?

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

10 years ago I had a big problem. I was a print designer but I loved the internet and desperately wanted to work with it.

I wanted a software package that would let me mess around with drag-and-drop functionality and when I was ready I could click “GO” and miraculously produce perfect code. I was probably using Internet Explorer as my web browser and used Dreamweaver as a design tool to churn out horrendous tabled mark up.

I gradually came around to seeing that web design was about standards, SEO, speed, aesthetics – and … horror of horrors … that I was going to have to learn code.

I certainly learnt the hard way – going up countless blind alleys that turned out to be cul-de-sacs – in my path to creating websites. Here are some of the most useful things I have learnt in the last few years:

1. Web developer tools and Firebug

One of the most useful previewing techniques that will help you learn CSS is viewing the Developer Tools in Chrome or Internet Explorer and in Firefox the Firebug extension. While using these tools’ cursor (it can be an arrow or a magnifying glass) click on an element and the styles and style sheet that is affecting it will show up in the Developer Tools or Firebug panel.

You can actually make HTML and CSS changes on the fly so if you want to see what a web page would look like with different colored links you can. These tools will also show you which CSS selectors effect an element and which are overrided.

2. WordPress.org as blogging software

WordPress was first released in May 2003 by Matt Mullenweg as a fork of b2/cafelog so I couldn’t have known about it 10 years ago but I would say discovering WordPress was one of the best things that happened to me as a web designer. It’s essential, once you’ve learnt HTML and CSS, to get to grips with a CMS (Content Management System) to organize your website.

3. Hosts

Not all hosts are created equal. It is incredibly important to spend a bit of time on forums and social networking sites asking people with similar sites their experiences with hosts. Here are the results of surveys I did to find the best shared hosts and VPS hosts for WordPress.

4. Ensure cross browser consistency

Different browsers will apply different default paddings and margins, even to common elements like paragraphs, body and forms. Put this handy bit of code in your CSS as a starter for ensuring your web page will look the same in all browsers:

*{margin:0;padding:0}

Make sure you have a local version of all the major browsers Chrome, Opera, Safari, Internet Explorer and Firefox – as well as the ability to view the browsers on the Mac and Windows operating systems. The best online browser rendering service is Adobe’s BrowserLab.

5. Test

Whenever you change a bit of code in a CSS, HTML, JavaScript or PHP file always be sure to test the effected page straight after you’ve done it. It’s a no brainer really but I can’t tell you how many times I’ve made two or more changes to code only to find the web page broken with no idea which change had caused the break.

Obviously, you don’t want to test on every different browser after every particular change as that would drive you potty. But try to check each time in Firefox and check Internet Explorer or Chrome every other change as well.

6. Validate

And as you go along testing, so should you go along validating the HTML and CSS. It’s easier to sort out validation errors when you’ve just started the first page than when the site is further down the line and has several pages. Sorting out validation errors can solve a lot of IE problems as well.

7. Use JavaScript not Flash

I’ve got nothing against Flash, in fact the first time I saw it I remember thinking it was the answer to all my prayers – you could use any font you wanted and it would compress files pretty well as it used vectors I was used to in print design. However, it was never well crawled by the search engine bots, it made designers “over-design” and now it’s not even supported by certain devices.

For the sort of user-friendly sites I do I’m much better off using JavaScript, and more specifically jQuery, solutions as they degrade better: if you don’t have JavaScript enabled on your browser the jQuery device can still work, whereas if you don’t have the correct version of Flash running, Flash doesn’t.

8. SEO

The practice of getting your site indexed and high up the search engines’ results pages is something that starts the first second you work on it. The HTML should be as clean and as sparse as possible, marked up to leave the search engines in no doubt as to the contents and hierarchy of the pages.

The most important factors for good search engine rankings are firstly good content and secondly good incoming links and, usually, the first will ensure the second. However, there are other important things to learn and implement on the site such as XML sitemap, robots.txt, .htaccess and Google Webmaster Tools to check broken links, etc.

9. Speed and compression

And, as with SEO, the practice to get you site load as quickly as possible starts right at the beginning. So, combine external CSS and JavaScript files, enable gzip compression and caching server side, optimise your images as much as possible (even sacrifice quality a little bit), minimize code and PHP calls.

It’s good for your visitors and now Google uses speed in it’s algorithm for calculating a site’s ranking.

10. Picking colors and adding space

With designing generally it is usually a good idea to choose two colors, a primary and a secondary, to build your color scheme around. The tendency, particularly with webpages, is to have just one color for links and then use different tints of that color for backgrounds etc. But this leads to a very monochromatic look. So it helps to choose at least one other color other than the main color. Of course, the choice of colors depends on the client and the type of site, but it’s something you need to get right and to get right early.

The amount of web page real estate with nothing in it is almost as important as the pixels that contain information. Spacing out the design will make it easier for the visitors to digest the information. You will not only have to learn how to do this; you will also have to learn how to persuade the client that this is necessary – as with many of the above.

Extras

Other things that would have made my learning less painful are listed here:

• Sidebar – all website’s need a sidebar – OK that’s a bit of a generalization and not always true but a designer will always want things to look clean and so many times I have tried to get the page contents to stretch right across the full width of the browser. Ouch, no, big mistake!
• Put the client’s logo on the top left hand corner and link it to the home page – as you go along there are more and more standards that visitors are coming to expect. It’s usually important not to disappoint or confuse your visitors!
• Contact page – just as ubiquitous as the Home link is the Contact link somewhere on every page.
• Vectors – when designing your site in Photoshop or Fireworks, use vectors as much as possible so that the continuous re-sizing doesn’t affect the quality of the finished image.

And what about you?

What would you have loved to have known about web design when you were starting out?

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

There can be a seemingly endless marketing job to do by submitting a 
blog article to various social bookmarking sites like Digg, 
StumbleUpon and Delicious. We can also choose to submit to social 
networking sites like LinkedIn and Facebook. Also, for designers and 
web developers there are several niche bookmarking sites springing up 
like DesignBump, DesignFloat, Dzone, etc. The good thing about the lesser known niche bookmarking sites is that only a few votes will put you to the top of the page and can get you great traffic.

But after we’ve done this there is no way of knowing that our efforts 
have paid off! The article will sometimes sit on the bookmarking site with just 
one vote and therefore unseen by the majority of the 
site’s visitors.

Here’s where the Designers’ Social Media Partnership Google Group comes in…

Promote your fantastic posts!

After you have written your blog post you can post the link and ask people to vote, bump, 
thumbs up, or generally big up your post. Maybe you can provide the 
links to the various voting sites so people can just click away very quickly to promote your 
article. I’ll write an example post to the group to show you what I mean by this.

Using the universal “I’ll scratch your back…” rule, people will be 
compelled to vote for your articles if you’ve voted for theirs. You 
may like to send them a private mail through the group to let them know.

Joining the group is easy with your Google ID and posting on the group is as easy as writing an email. You are, of course, completely at liberty to vote for the articles you 
consider good enough.

Remember, this isn’t confined to designers or developers, any blogger who wishes to promote their latest masterpieces can join the group.

Happy blogging, happy voting and I hope you enjoy being a member of 
this group! Thanks to Brandon Cox for this idea.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Blogs are, in my opinion, the easiest and best way to get stuff on the web.

With a blog you can publish constantly updated information about yourself, your company or your interests to the world. And what makes it even better is that this information is chronologically ordered and categorized for search engines almost automatically.

Your blog posts should be delivered in the most beautiful and readable way to get the most out of this fantastic medium.

Here are some design essentials you can use to improve the look of your blog and your blog posts.

Body text size and line spacing

The body text is the text you are reading at the moment – a normal paragraph within an article. It’s the meat and drink of the blog so it has to be readable. Having said that it’s amazing how many websites have their body text too small. Some people will not read text below a certain size.

I’m going to stick my neck out now and say that the font size of body text on a website should never be smaller than 15 pixels or 1 em in size. Furthermore the line height (the line spacing or leading) should always be 25% larger than the font size or more. So if the font size of your body text is 15 pixels; your line height should be 19 pixels or more. If the font size of your body text is 1 em; your line height should be 1.25 em or more.

If you are not familiar with the terms pixels, ems, font size, line height, etc., or don’t know how to change them read on.

The file that controls the size of the body text on your blog is the CSS (Cascading Style Sheets) file. If you are are a WordPress user it will most likely be in your theme folder and called “style.css”.

You can identify the font size and the location of this CSS file as well as previewing the changes using your browser. If you’re using Chrome or Internet Explorer you can view Developer Tools. And if you’re using Firefox you can use the Firebug extension.

While using these tools’ cursor (it can be an arrow or a magnifying glass), click on the element that concerns you and then the styles and style sheet that is affecting it will show up in the Developer Tools or Firebug panel. So, if you click on a body text paragraph you may see that it is controlled by the body element in your main CSS file.

Above you can see in a screen shot from the Firebug panel in Firefox that the font size of the body text is 12 pixels and the line height is 20 pixels. You can actually change the values in this panel and the browser will render the changes live. This is a great way to learn CSS and mess around with different design elements. You can also see that the file controlling these styles is called “style.css”, hover over the file name in this panel and the web address of the CSS file will show as a tool tip.

Paragraph spacing

Paragraphs on the web should have a space between them. It should be around half the line height. So, if your line height is 20 pixels, you should add a 10 pixel gap between paragraphs. This is usually done with either padding or margin on the <p> tag. Here is a sample CSS code that adds a 10 pixel gap to the end of each paragraph:

p { margin-bottom: 10px }

Include sub-headings in your blog posts

If you are writing a post with more than a few hundred words then you should use subheadings. They improve the post for your readers as they break up and order the text and they are also good for SEO. Here is the HTML code for the above subheading:

<h3>Include sub-headings in your blog posts</h3>

As my normal blog title is wrapped inside <h2> tags my subhead text is therefore wrapped inside <h3> tags. This shows the hierarchy of headings – the subheading isn’t as important as the heading. Some blog post titles are <h1> in which case the subheadings should be <h2>.

As above, use Firebug for Firefox and the Developer Tools in Internet Explorer and Chrome to identify the title tag and then set up an <h2> tag or <h3> tag in your stylesheet accordingly. Here is the CSS for my titles and subheadings:

h2 { font-size: 23px; line-height:27px; color: #4c5464; }
h3 { font-size: 18px; line-height:22px; color: #243f76; }

Make your text scannable

Remember your visitors will typically spend a few seconds on your website so it is necessary to make them feel at ease and entrap them. So far we have talked about good body text typography, paragraph spacing and subheadings to do this. But you can also add bold text, italics, bullets, numbered lists, links, etc. to break up otherwise dull lines of text. These highlighted words jump out and may interest your readers. It also looks nicer.

Insert images

Blog posts are incredibly boring without images or video. Use them. Here is an article I wrote on how to add images to WordPress posts.

Conclusion

I wrote more about the technicalities of writing and designing a WordPress post here.

Font size, line height, paragraph spacing, subheads, images and other typographical elements can all be used to improve legibility and aesthetics in your blog posts. Have I forgotten something? Can you suggest other ways to improve the design of blog posts?

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Back in the olden days just after Al Gore invented the internet, designers designed and programmers programmed. The web was full of slow good-looking sites that didn’t do much and useful busy sites that, frankly, looked like a dog’s dinner.

But every year since then more and more fantastically usable sites that also look great have cropped up. Why? The two previously separate disciplines of design and code have combined and at the intersection point is usability.

Usability

Everyone wants user-friendly websites that are easy to navigate and interact with the user without mess or confusion. A designer is more likely to achieve this when coding it himself. A knowledge of code is a knowledge of how the website works. If you know how the web works you can make it work well.

A designer who codes understands the pay off between clean code and great user experience. They know that if they want the website to load fast they may have to cut out some of the more gimmicky processor-hungry bells and whistles. The user is the winner as the website will do the job and won’t show off.

Less confusion, time and money

The more people involved in a project the more time and money is spent. The interaction between a designer and a developer is so often a compromise between what was wanted and what is now possible. A flexible designer will reinterpret the original design to the practicalities of the project. This is more likely to happen with a designer who codes as (s)he will understand the limitations much better.

With a designer designing and a coder coding the two processes have to run sequentially with one party waiting for the other to finish before they can start. With a designer coding the processes will be sequential the design will grow along with the website with tweaking and improvements being easily implemented along the way.

Better SEO

And while I’m talking about clean code I should mention SEO. The code-savvy designer will know to write good file names and alt text for images, for example, and write standards-compliant code. All good for getting the website higher in search engine results.

In my experience when the designer passes the Photoshop file to the coder it gets chopped up and called “image01.jpg” and “image02.jpg”, etc. Not very descriptive.

Ignore the nay-sayers

The wonderful thing about the internet is that many people are dropping the constraints of old-fashioned thinking that said “this person can’t do that; that person can’t do this”.

Open source CMSs, plugins and JavaScript libraries make it easier for the designer to learn new skills.

People are saying “why can’t I start up a website on my own” or “why can’t I set up an e-commerce facility”. The tools are freely available; you just have to learn how to use them.

Indeed, people who would never have been considered musicians 20 years ago are now successfully creating music online. Others who would never have had the financial ability to buy film cameras are shooting, editing and marketing their own movies successfully.

Don’t let negative thinking from yourself or from others get to you. I used to think HTML and CSS were beyond me. And then I thought I’d have nothing to do with PHP or JavaScript. But I was wrong. I was guilty of listening to nay-sayers.

Now I hope I can carry on exploring new avenues and encourage others to do so.

It’s never too late to learn!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Go cmd/cntl-N or File > New… to create a new Photoshop document of the size of your button. This one has a width of 175 pixels and a height of 35 but it can be any size. (You knew that, didn’t you?). The Resolution should be 72 pixels per inch and Color Mode RGB for websites, of course, and I have the Background Contents to be White as the button is going on an area of a website that has a white background.

Draw a rounded rectangle with, you guessed it, the Rounded Rectangle Tool (U) make the radius 3 pixels in the Options bar at the top.

Make sure the rounded rectangle snaps to the edges and fits exactly the size of the image. It doesn’t matter what color. Here’s a gray one zoomed in to 200%.

Now there are two Layer Styles you want to give the rounded rectangle – Gradient Overlay and Stroke. So with the rounded rectangle selected in the Layers palette go to the “fx” icon at the bottom and choose Gradient Overlay.

On the first panel you should make sure that the angle of the gradient is either 90º or -90º so the gradient either goes straight up or straight down. (Otherwise keep the default values of Normal Blend Mode, 100% Opacity, Linear Style and 100% Scale). To choose the actual colors of the gradient you need to click on the gradient to get the Gradient Editor to pop-up.

Here the trick is to choose two colors that are of the same tone but very close together so that you can only just tell them apart. To choose the colors click of one of the colored squares (stops) with triangles on top of them underneath the gradient (the default is black and white). Once the stop is clicked on, click on the color where it says “Color:” and that will give you a Select stop color box. Here I have also copied the darker of the two colors in the Gradient Editor by option dragging the stop. This ensures that more of the gradient is a solid color and the color change occurs more quickly at one end (in this case at the top).
And the second Layer Style is Stroke. Here you want to choose a color that is darker than the darker of your two colors but only just (with the same degree of separation as the difference between the two colors in the gradient. The size should be 1 pixel and the Position should be Inside. The other values should be the default ones.

Now your button should look like this:

… a little too flat! Now we’ve got to get a bit creative with our penultimate pixels!

The web designer’s secret penultimate pixels!

In order to give the illusion of a flat but 3D button there needs to be a slight highlight near the top and a slight shadow near the bottom – so slight, in fact, it’ll be the height of one pixel; so near the top and bottom, in fact, it will be offset by one pixel. In order to do this, it is necessary to create a new layer and select the Single Row Marquee Tool.

You will need to zoom in to your button by going Cmd/Ctrl-+ a few times. And then position your single row of pixels with the marquee on the second row of pixels just below the top. You can do this easily by just dragging the Single Row Marquee Tool to the top of the image and then moving it down one pixel by hitting the down cursor key once. Now fill this white – (get the Default Background and Foreground Colors by hitting “D” and filling with the Foreground Color (white) by going alt/opt-delete). This will leave you with this:

The do the same again but for the black line. First create a new layer (very important that the white and black lines are on different layers for reasons you will see in a moment), then put a row of black pixels on the second to bottom row of pixels using the same method. And you will be left with something like this:

There’s one more important thing to be done with these pixels. As the corners of this button are slightly rounded we need to shave a couple of pixels off the ends of the black and white lines. You can do this with the Rectangular Marquee Tool (M) and using the cursor keys for positioning. Remember the marquee will move one pixel to the left, right or up or down every time you hit one of the cursor keys. If nothing happens when you hit delete be sure you are on the correct layer!

When you’re finished you will be left with something like this, with two pixels deleted off both ends off the black and white lines:

The last thing that remains to be done (as you can see above) is just to make the white penultimate pixels line less prominent. Do this by changing the white line’s layer opacity to 30% (hit “3″ with the layer selected).
And now you should by left with this:

Other web button tutorials

This is a very flat button. I have written lots of tutorials about more bulging, shiny, jelly buttons. Here is one for a cool, shiny, web2.0 button. (If anyone get excited by my use of the expression “web2.0″ to describe the look of a button, please be advised that it wasn’t me who coined that first as a design term!!!)

And, here’s another tutorial about how to create cool shiny buttons in Illustrator alone.

That’s all for now and please accept a big apology, especially to my regular readers, for the month’s gap in between my last two posts. I will shortly be writing and backlogging a number of great posts about design and marketing so this won’t happen again. Goodbye, everybody!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

It is not the case that a logo will cost an extra 50$ and is just a matter of spelling out the company name in an attractive typeface. I did the logo above for a client who wanted a simple, modern and dependable characteristics displayed through the logo for his communications company.

So, instead of writing about what makes a good logo I’m going to give a few tips on how to use Adobe Illustrator to put together a logo.

Why should you create a logo with vector graphics?

Vectors consist of points, lines, and curves which, when combined, can form complex objects. Whereas bitmap or raster graphics (eg. JPGs) are composed of pixels that contain specific color information. When enlarged, bitmaps pixelate. Whereas vectors will scale up or down without loss of quality or sharpness. So the same vector logo file looks as great on a business card as on a billboard­.

So, with logos, it’s vector, vector, vector all the way.

Using Adobe Illustrator to Snap to Point

You can use many different packages to handle and create vectors. My choice of software for doing this is Adobe Illustrator. Whether you have sketched the logo by hand on paper first or whether you are creating the logo from scratch in Illustrator, it’s important to make sure you have Illustrator’s Snap to Point feature running. Snap to Point allows you, when dragging objects, to align an anchor point exactly with another anchor points (anchor points are the beginnings and ends of paths or lines).

So the first thing you must do in Illustrator is to go into Preferences… and choose Selection & Anchor Display and make sure that Snap to Point is checked with a value like 2 px set.

The screenshot on the left above shows the plus sign being dragged by one of the anchor points. The cursor (as we are using the Selection Tool (V) to move the object), is a black arrowhead with a white outline. When the arrowhead is precisely on top of another anchor point while dragging it will turn white with a black outline. At this moment, you know if you let go of the object it will land exactly where you want it to be.

So grabbing objects by anchor points and using Snap to Point to place them in precisely defined positioned is crucial to creating logos in Illustrator.

Viewing and Hiding the Bounding Box in Adobe Illustrator

One of the problems you can face whilst moving objects by a corner anchor point is inadvertently re-sizing the object!

In the image above you can see an object without (left) and with (right) a Bounding Box. The Bounding Box is an extra line around an object with eight white handles which can be using for scaling. It’s very handy sometimes but other times it just gets in the way. To get rid of the Bounding Box, simply go View > Hide Bounding Box or Cmd/Ctrl-Shift-B.

Converting text to outlines in Adobe Illustrator

While doing logos it’s fairly usual that you type out the company’s name in a typeface close to how you want it to look (in this case Dax) and then edit the letters separately. To do this, with the type selected by the Selection Tool (V), go Type > Create Outlines or Cmd/Ctrl-Shift-O. Follow this up with a Cmd/Ctrl-Shift-G or Object > Ungroup to ungroup the letters.

Lining up objects in Adobe Illustrator

Fairly often, when designing logos, you will want to get certain letters to line up. I do this by using the Control Palette which is usually beneath the main menu. When two or more objects or groups of objects are selected by the Selection Tool (V) the Space and Align icons appear.

The use and look of these icons are exactly the same in Photoshop and very intuitive. I use them all the time.

What do you think?

Do you use Illustrator to design or to create logos? What methods do you find yourself using again and again?

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

All graphic designers and people trying to create eye-catching imagery for print or web with have at some point used stock photography.

Stock photography negates the need for hiring expensive photographers can license individual photos for specific uses. The two largest traditional stock photography agencies are Getty Images and Corbis. They offer mostly photographs that have been shot by professional photographers. But these are still quite expensive for a freelance graphic designer as individual images can cost hundreds of dollars.

Meanwhile there are many alternative agencies like Shutterstock, Fotolia and, the one all my clients seem to know iStockphoto (acquired by Getty Images in 2006 although both businesses are kept visually separate). Since these agencies charge less ($1 to $20 per image) this is called sometimes called microstock photography.

However, hardworking graphic designers may need photographs as place holders or for different options to show a client before they have decided on a finished version. Who would want to spend money on something that may never see the light of day? This is where free stock photography comes in!

Here is my personal list of free stock photography sites.

• stock.xchng The best and most reliable for me. Some of the free images are large enough to use for print. Some are of excellent quality. Log in necessary.
• morgueFile I haven’t use them for long but I have found some impressive and large images here. No login necessary.
• FreeFoto Not fantastic. Email address required.
• FreeDigitalPhotos OK. Small web images only. No login necessary.
• ImageAfter I’ve just started using them but they seem good. You can choose the number of thumbnails viewable on page. Some nice large images. No login necessary
• indisain.com Annoying website in terms of usability but good quality large images.
• PhotoBucket Good, large selection. Small web images only. No login necessary.

Other sources of free imagery on the internet

Of course you can find images in the internet using Google image search, deviantArt, Flickr or Picasa but these images may be subject to copyright so please check with the owner first.

Also you can turn a photo into an illustration using Illustrator’s Live Trace function, Photoshop filters or by whatever other means. But, again, it will be always necessary to check the images’ copyright first!

I hope you found my list of free photo sources helpful. What do you do when searching for free quality stock photography?

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

What is RSS?

RSS stands for Real Simple Syndication and is a format used to publish frequently updated content from the web on the web. The RSS feed is your posts’ content without any of your website’s style so it will contain just the titles, body text and image paths of your posts. So you better make your image paths absolute not relative!

The benefit of RSS is the aggregation of your favorite websites from multiple sources in one place. RSS content can be read using software called an “RSS reader”, “feed reader” or an “aggregator”, which can be on your browser or on your desktop.

How to set up a Feedburner feed

Google has bought FeedBurner, so you need to sign in to Google and then go to Feedburner and look for where it says something like “Burn a feed right this instant”. WordPress blogs already come with a feed so you can enter either your blog’s URL (eg: http://www.my-blog.com) or your blog’s feed (eg: http://www.my-blog.com/feed, http://www.my-blog.com/?feed=rss2), check a box if you are a podcaster and hit “Next”.

You will next be greeted with a page where you can change your feed title and feed address. Once you are satisfied with those hit “Next” again. After this there are further Feedburner options to choose from – most of which I ignore, it’s FeedBurner’s email subscription that rocks but I’ll come to that later!

Install the FeedBurner plugin

For the best results using FeedBurner with your self-hosted WordPress site, the FeedBurner FeedSmith plugin is recommended. It will detect all ways to access your feed (e.g. http://www.my-blog.com/feed/ or http://www.my-blog.com/wp-rss2.php, etc.), and redirect them to your FeedBurner feed so you can track every possible subscriber.

WordPress settings

Feedburner can only handle feeds under 512K. In WordPress, make sure your feed doesn’t exceed this in the administration area, by going Settings > Reading, “For each article in a feed, show” – you can choose “Summary” although I like to have “Full text” and don’t put more than 50 in “Syndication feeds show the most recent” if you write long posts.

What is email subscription and how can you set it up?

Email subscription to your blog allows those who have signed up for it to receive your blog posts in their inbox. You can use Aweber to do this but I’ll show you how to do it for free with FeedBurner.

With your feed selected click the “Publicize” tab, then click “Email Subscriptions” on the left, making sure “Feedburner” is selected, and click “Activate”. This will then present you with some HTML code in the box which you will need to copy and paste somewhere in your website.

Once signed up a subscriber will receive your posts as emails shortly after they are published. Google/FeedBurner handles all the backend work – subscribers verify themselves by email and have the option of unsubscribing at the bottom of every email they receive.

Design your posts so they look great as an email

Underneath the “Email Subscriptions” link in FeedBurner whilst in the “Publicize” tab there is another link entitled “Email Branding”. Do spend some time on this page formatting text, headings and links – you can specify the font, size and color. You can also add your logo and specify the title of the email.

Advertise the RSS feed and email subscription on your website

On my website I advertise the RSS feed with the familiar RSS icon which is linked to my FeedBurner feed. And I use the familiar email icon which takes you to the page where you can subscribe to my posts by email. I’ve also got some general information about feeds on this page so that my readers can decide which is the best way for them to subscribe to my blog.

What’s the benefit of RSS and email subscription?

They are both fantastic marketing tools. RSS brings in traffic as it is, for some people, an easy way of reading a site’s content. Email subscription can work like a weekly newsletter to your subscribers with a link back to your site. A subscriber is always worth more than a visitor because, more often than not they will return to your site again and again. The added advantage of the email subscribers is that you have the list of their email address’s although I wouldn’t advocate sending them much in the way of extra mail.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.