Tag Archives: tips

Form Design: Best Practices

Gradients. Don’t you just love their multi-coloured wowness. And drop shadows – where would we be without them? And forms… yeeaaaaah! Wait, they’re a bit boring, aren’t they?

Whilst designers (sorry, I don’t want to paint everyone with the same brush!) have been doing their darndest to create fancy feature panels, bold backgrounds and tricky transitions; there’s the runt of the litter that seems to always be neglected. The after-thought.

We all hate filling out forms on web pages but they are a necessary evil – conveying information from one party to another for a specific purpose. Therefore, why shouldn’t this part of a web page be given the same treatment, the same amount of time and resources, as any other? Unfortunately, it does seem to be the case that forms are often chucked together (I’m guilty of it too!) with minimal thought but a form is often the best way of communicating with your audience so that makes them pretty important right?

In this article I’m going to share a few tips that may make your web forms easier for your visitors to use. Fortunately many modern website templates come with already built and fantastic forms!

1. Top-aligned labels

One of the biggest factors contributing towards ‘web form frustration’ is that the user is actually forced to THINK about what they are doing rather than just absorbing information. Looking at something on a web page usually ellicits a response – ‘that looks pretty’, ‘this product looks interesting’, ‘I wonder what this does’ – and the user then CHOOSES an appropriate action – ‘I’m going to click/touch this’, ‘I’m not going to click/touch this’. This is generally a smooth experience that the user feels comfortable with and they continue to browse on their merry way.

With web forms, the user doesn’t have an option other than to fill in the fields laid out in front of them. Therefore, they have to look at something, absorb the information, process what the information is telling them and then figure out for themselves what to do. Obviously, over the years, forms have developed certain conventions which everyone is aware of but that doesn’t mean that there aren’t improvements and efficiencies to be made. One particular step at which these improvements can be made is during the ‘processing’ stage. The clearer and easier you make it for the user to determine what they need to do next, the better the form experience and the less ‘web form frustration’ is felt.

Here we can apply some basic human and typographical conventions. Look around you. Whether it’s a book, road sign, billboard or other assortment of text, it is always easier and quicker to read something ‘long and thin’ than something ‘short and fat’ – where more words are stacked on top of each other than written side-by-side. This is why newspapers have columns – humans are lazy and it is easier to read a little bit across and start a new line than it is to read a big long line before moving to the next one. This same logic can be applied to form elements.

A top-aligned label is easier for the user to process and recognise the associated input field. The focus of the eye naturally starts on the left and the user immediately groups the label and input together before reading and processing what the label actually says. Moving onto the next label and input group is also easier as the user just moves their gaze downwards rather than ‘returning’ from the previous line.

Compare that with a layout where the label is aligned to the left (or even right) of the input field and the user has the extra step of recognising where the associated input is, as they haven’t spotted it yet, as well as encountering the ‘returning’ issue when they move on.

Try filling out a form with top-aligned labels and one with left-aligned labels – the top-aligned form just seems to flow better.

Top-aligned labels are also a lot better suited to handheld devices. With limited horizontal screen space, top-aligned labels are an absolute must when using forms on a mobile device as making your users scroll horizonatally is a cardinal sin.

One slight cost of having top-aligned labels is that the length of the web page will, inevitably, be longer than if using left-aligned labels. However, as we’ve discussed, the user will find ‘long and thin’ easier to process anyway so this is a sacrifice worth making.

2. Use the same form for the password reminder

The thing that maxes out ‘web page frustration’ is not having the information required to complete an input. One such case is forgetting your password. We’ve all done it and sometimes it’s a very laborious process trying to recover it.

Commonly, the password reminder process is triggered by clicking a link near to the password box. This is simple enough and works well. Often, however, this link will take you, the user, to a different page entirely where you have to process some more information before finally getting to the point where you get your password back. Sometimes a modal window is used, which is a better solution than sending the user off to another page, but it is still fairly intrusive. Why not switch a few things around, show a message and use the same form? The following example shows how the ‘forgot password?’ link fires a transition from the login form to the reminder form. It’s clear that this is a different form but it’s taken a tenth of the time it would (and looks a lot nicer!) than sending a user off to a different page.

Checkout this awesome password reminder example…

The wonderful Codrops have also produced a good example of this technique.

3. ‘Review and check’ email address inputs

One of the things I find most baffling about web forms is that the user is asked to repeat information they have already entered. There are two very common examples of this – email address and password fields. Firstly, the email address input. How many of you just copy and paste what you typed in the first box into the second box? Come on, hands up. Everyone does it including the person who built the form so what is the purpose of typing the same information twice? The answer is to ensure that the email address entered was indeed correct as this is obviously the best (and often only) way of communicating with the user. This is perfectly understandable and a hugely important check to make but why does the user have to repeat what they’ve already written? Why not ask them to review what they wrote previously and confirm it is correct?

This review can very easily be carried out with the use of a checkbox. The user checks the box next to the email address input to confirm they have written their email address correctly. Review and check.

Now, the user could, in theory, just check the box without reviewing what they wrote in the email address field and this could lead to mistakes. But with the duplicate field method, if the user is just copying and pasting anyway then these mistakes will still happen. It’s often argued that you should imagine your mother is using your web page (why is it always mums who are crap at using computers?!) and she should be able to understand and use it but why should all users be treated as the lowest common demoninator? The email field is probably the most important one on the form and the user knows it – it’s been hammered into them through years of repeatedly having to copy it to a second box! – so they WILL take care. The likely result of using the ‘review and check’ method is that there will be the same amount of mistakes made but the experience for the majority of users will be a lot smoother and less painful.

This leads us on nicely to the other repeat offender – the password field.

4. ‘Show password’ button

The password field is a slightly different but equally frustrating case. The user cannot copy and paste their entry from the first box to the second so the ‘auto-pilot’ mistakes won’t happen but, unlike the email address field, the user cannot actually see what they’ve typed. Therefore, if a failure happens there is no choice open to the user but to completely start over and fill out BOTH boxes again. So by typing one character incorrectly, the user has to fill out, essentially, the same input field FOUR times! Madness.

Now, obviously, the password field has certain security considerations surrounding it so, whilst it isn’t quite as simple as having a checkbox for the user to tick, a similar solution can be implemented to streamline the user experience.

Through the use of a nifty jQuery plugin*, we can insert a hidden duplicate input field with an accompanying button or checkbox which, when clicked, will ‘swap’ the password input for a regular input showing the password text (it hides one and shows the other depending on the state of the button). This means that the user can check their password and make sure it is correct before they submit the form.

There are a couple of obvious pitfalls with this method however meaning some refining is needed. Showing your password on screen isn’t advisable but how often do you type in important passwords with someone looking over your shoulder? This is a minor issue but a much larger one is using this method on a sign-up form. If the user types in their password, doesn’t check it and then submits the form, there is no reason why the information wouldn’t be correct but if it is incorrect then there is no recourse for the user and this would obviously lead to problems. Potentially, you could force the user to click the check button at least once but then this method becomes as equally intrusive and confusing for the user as the duplicate input method.

Another solution is to add a checkbox to accompany the form which acts as a confirmation much like the ‘review and check’ email address method discussed above.

NB. jQuery plugins

5. Have the newsletter sign-up checkbox unticked by default

For me, this is an act of common courtesy. If a user WANTS to hear about your company’s latest and greatest product then they will tick that little box themselves. Or they might visit your Twitter or Facebook page. Spamming with weekly, monthly or in some cases daily(!) emails telling people information they don’t really want to know does not endear you to them – it downright pisses them off. People don’t like to feel as though they have been tricked but that is exactly what pre-ticked newsletter sign-ups do. Why do you want to send an email – which will cost your company money! – to someone who most probably doesn’t want to hear what you have got to say?

Advertise your newsletter on the sign-up screen. Make it loud and proud and maybe say what is regularly included – that way you are genuinely inticing users into hearing your message and they will appreciate it rather than feeling duped.

It’s amazing how a small gesture like this is appreciated and casts you in a more human light to a user. That is infinitely more successful in promoting your product than a spam newsletter can be.

6. Make use of HTML5 input properties today!

To round up, I’m going to get a little more technical on y’all.

HTML5. Many people shy away when that initialisation is muttered, usually for one of two reasons; either they are scared of having to learn the ‘new’ markup or they know browser support isn’t universal just yet so they don’t bother.

But many HTML5 features CAN be used today quite safely and one area in which this is most relevant is with form elements. Several new input types and input attributes have been introduced into the HTML5 spec. They include the datepicker input, colour picker input, required attribute and a few others and in many modern browsers these will work out-of-the-box. Unfortunately, their styling is native so it could be very detrimental to your UI should the browser chuck in a validation message or two. And on browsers that don’t support them it provides a really bad and potentially unusable experience for the user.

However, some inputs and attributes can be used in the knowledge that they will be safely implemented across all browsers.

Email, URL and number input types

One trick tip regarding forms is that, if a browser doesn’t support the input type you have specified then it will revert to a standard text box input. For inputs such as a colour picker, this is not an acceptable solution but for fields like email address and URL, this is a perfectly acceptable example of graceful degradation.

For mobile users, where the keyboard layout can be particularly important in helping the user, these inputs are of particular importance and should be used generously.

Placeholder and autofocus input attributes

Two HTML5 attributes of a particularly subtle nature are placeholder and autofocus. Placeholder puts your specified text into the input box until the user focuses on the input, at which point the text disappears to leave the user free to fill in the input. For years, we’ve been hacking this solution into our forms and now it’s in the spec by default – magic! You can even use CSS to style the text in some browsers by using the custom attribute selectors ::-webkit-input-placeholder and :-moz-placeholder{color: red;} (yes, the colons are correct).

The autofocus attribute simply places the cursor into the input field on page load enabling the user to start typing straight away – typically this would be the first input in your form. For obvious usability reasons, autofocus is not supported by mobile browsers.

So there you have it, six tips to improving your website forms. These techniques can be used in nearly all situations, in all browsers with no regard as to whether CSS and/or JS is turned on so why not give them a go!

Six Steps to a Super Happy Client

Catching attention and bringing in new clients is easier than it seems. A lot of it is down to keeping your existing clients happy, offering a fantastic customer service, and generally doing things to keep your clients in a positive mood about whatever it is you do for them, whether you’re a graphic or web designer, web developer, or even a photographer. This article outlines eight great tips to help keep your clients super happy, ultimately resulting in long-term clients and even a longer client list!

Step 1: Keep A Positive Attitude

Some clients know a lot about the creative industry, and can sometimes surprise to just how much they actually know, especially if they’ve been in the same job or running the same business for a long time. These clients are usually generally easy to keep hold of, so long as you get the work done to a good standard. Others, however, are amateurs, and either think they know more than you about your professional field but actually don’t know much at all (these are the bad clients – you can usually tell instantly if a bad client has approached you if they something along the lines of “I have made a proof of the design I want in Microsoft Office”, or just generally don’t know much about design and are happy to let you get on with it (these are the good clients, who leave almost everything up to you).

Mainly because of the several types of clients I listed above, it’s not always easy to keep a positive attitude whilst working for them – some know exactly what they want and won’t stop harrassing you until it’s perfect, others don’t know what they want at all and don’t stop harrassing you until you’ve made thirty-odd-thousand revisions, and then there are some that are fine and just let you get on with it. So, what can you do to keep a positive attitude?

Listen To Your Client

However much they annoy you and make you feel like your blood cells are about to burst from your veins and splatter all over the ceiling, try your hardest to listen and to pay attention to what they’re saying. Wait until after they’ve finished talking to make your own suggestions, instead of interupting them, otherwise they may also get annoyed, resulting in a bad relationship on both ends and probably leaving you without some work, which definitely isn’t worth it just because you couldn’t bare to listen for any longer!

Show Your Client Examples Of Work

Show them examples of your ideas, whether existing work from your portfolio, or work of other creatives – you could print some examples of work that have a relation to their company or project (i.e. if your client wants a brochure designed for their clothing company, look for some great examples of brochures related to apparel design or fashion) and show them when at a meeting, or send it via email. This could be a great opportunity to show off your technology, too – why not upload the photos to your iPhone or iPad (when it has been released, of course!) and flick through some examples this way? This way your client can interact, keeping them happy and possibly making another conversation about the device, which helps to build up a happy working relationship. Discuss what you like about the shown examples, and what they like, and come up with your own (rough) ideas whilst you are still with the client.

Discuss The Ideas

Discuss the ideas and try to repeat some of their ideas in their inital brief/speech to keep them happy, and to make sure they know you were listening to them when you first spoke about the particular project.

Step 2: Keep Your Client Up-To-Date

Clients like to be kept up-to-date; afterall, they are paying you for their services! There are a few ways to keep them up-to-date, some old fashioned, some modern, and some in between.

Electronic Mail (Email)

Probably the most used piece of “technology” to keep your clients up-to-date. Send them the odd email to let them know how the project is going – you can also send them screenshots of the work in progress, although I would avoid this if you’re client isn’t too tech-savvy. Screenshots can confuse some people, and you’ll get silly questions back asking things such as: “Why is there a border?”, “Why is the design in a browser?” and “Where is the rest of the text?”. If you send screenshots, make sure your client is 100% sure they know it’s a screenshot of the work in progress, not a draft!

Google Wave

A lot of people don’t yet have Google Wave, but if you do, you’ll probably find you can invite clients, friends and family to join. Ask your client if they would like an invitation to join Google Wave (something else which will probably make them happy, just because you asked them!), and tell them that it is a great way for you to keep them up-to-date with the latest going-ons regarding their project. It’s much easier than email, and you can look back over your discussions and ideas without going through thousands of emails in your inbox and/or trash can.

Social Networking

Most people have at least one social networking account – it may be Facebook, Twitter, or even the old school MySpace. Search for your clients, and if they have an account send them a friend request and keep them up-to-date this way.

Phone Calls

Call your client (make sure it’s within sensible hours, 9am to 7pm is usually good, although it’s always best to ask when the best time to call is!) and discuss where you are with the project and when it is you expect to show them your progress.

Text Messaging

A quick and simple way to let them know when you’re expecting to send them an email or document regarding their project. A simple text such as “Hi Client, just to let you know that I’m going to be sending the inital draft your way via email later on this evening!” will keep them reassured that you are working hard on their project, and will earn your a few brownie points.

Snail Mail

If the project is huge, why not send them some drafts via traditional post (now more commonly referred to as “Snail Mail”!). This will surprise them, and will bring joy to their day to see your great work, especially if you didn’t tell them you were going to send drafts via post.

Step 3: Send Completed Projects In Several Ways

This is a good one. There’s nothing better than receiving a finished file in various different and stylish ways. Don’t just send the files via email – be creative, afterall that is the field you’re working in! Try some of the following ideas…

Electronic Mail (Email)

Always send a copy of the files via email, whether as an attachment or an email with a link to download for XX amount of days or months, or even forever if you have a good host or server. Email is a quick way for your clients to download and view the files, and access them from whereever they are at the current moment in time: at work, at home, or even on a business trip or a luxurious holiday.

Compact Disc or Digital Versatile Disc

Burn your completed files to CD or DVD (depending on their final size) and pack it (or them) in a smart disc holder that you personally designed. Include your email, web address, your clients name, the project ID/number/name and the web address to where they can download the back up copy of the files. This is a great way to hand the files over to your client, as it is a secure back-up aswell as something solid, meaning every time they see it they will think of your company and (hopefully) of the good service you provided them with.

USB Pen/Flash Drive

These things have hundreds of names, but I’m sure you know what I mean! They can be picked up at incredibly low prices now, and there are several places out there offering to print your logos on them – a great way to impress your client, and to remind them about your company incase they ever need more creative work or would like to recommend a friend or family member! Giving something to your client will always help to keep them happy, even if it isn’t much. Afterall, it has always been the thought that counts, right?

Step 4: Be Generous

This isn’t always a good idea if you need to make a living, which most of us do unless you’re already a millionaire (in which case I doubt you’re reading this – if I’m wrong, please feel free to stick around and make a donation!). But, being kind and generous will more than likely put you into a better position with your client.

Offer To Buy Them A Coffee

When at a meeting with your client, offer to buy them a coffee (or similar). In most cases, they’ll probably refuse and offer to buy you one, but the thought is still there. Afterall, if they’re a good client and have a good project, they’re more than likely paying you enough to buy a coffee every couple of minutes!

Give Away Customized Pens etc.

Buying a bulk lot of customized pens, mugs, rubbers, rulers (the list goes on…) is a cheap solution to giving away something for nothing to your clients. Make sure your email or telephone number is on the pen so they can easily get in contact with you where ever they are (assuming they have a internet connection of phone!). Just the fact that you’re giving your client something for free of charge will bring a smile to their face.

Offer A Free Print

If you design for fun (i.e. posters) why not offer them a free A4 print? You can probably get a good quality print from your home printer and it’ll cost you next to nothing. If your client likes your style of work, they’ll probably be overjoyed with this!

Step 5: Set Them Up A FTP Account

You can set your client up with a FTP account on your server with no cost. Why?

Easy File Sharing

Using a FTP account for a particular project is a super easy way to allow both you and your client access to the projects files wherever you are at any time of the day. If you have a good host or server, this will probably cost you, well… nothing! If your hosting account doesn’t offer you unlimited FTP accounts, you should check out HostGator, who offer unlimited space, bandwidth, domains, email accounts and FTP accounts for under $10 a month – your client will probably be happy if you refer them, too, as they are a great company.

File Storing

Let them know that for as long as they use you as their primary designer that they’re free to use their FTP account on your server for as long as they want to store files such as office documents, creative files and images up to a quoted amount – this shouldn’t have any effect on your server so long as it is used sensibly and will make for a super happy client, as this alone is a service people pay a lot for!

Step 6: Refer Your Client To Good Companies

When it comes to your client actually getting their work printed or on the web, they can sometimes get lost. Offer to set up accounts for them for a small price, or refer them to companies that you trust and know are good.

Hosting

Refer them to your trusted hosting company. I personally use HostGator (as I mentioned earlier). A lot of hosting companies also have referral links, and if you’ve kept your client happy, I’m sure they’ll be more than happy to use that link when registering to get you a few extra quid or dollars.

Domains

Let them know what you think the best place to register their domain is. Provide them information on where to find reliable and trusted multiple domain web hosting as well. Some places are better than others depending on what domain it is you’re looking for. My domains are registered with HostGator, although one is registered with GoDaddy as it offered a better price for the particular domain.

Printers

Refer your client to a good digital or lithography printers. Depending on the project size, a local press might be better, but be sure to check out online firms such as JamJar Print and UPrinting.

15 Tips to Stay Productive in a Permanently Connected World

Staying focused on your work has always been difficult, especially when you’re working from home. In the past, distractions have tended to come from outside the office, bedroom or wherever it is that you work in the form of screaming kids, noisy neighbours or the sudden urge to start vacuuming the house for no apparent reason. These days, the biggest distractions of all stare you right in the face. They’re “inside” the computer that you sit in front of for hours each day.

I’m talking about the constant disruptive force that is the internet. Social networking sites, particularly Facebook, Myspace and Twitter, provide a constant distraction when working from home, not to mention all the websites and blogs that you check on a daily, sometimes hourly basis. As if that wasn’t enough, you’ve got people emailing you comical YouTube videos and trying to Skype you while you’re hard at it.

We know that being productive can be very tricky, especially when you’re not being paid by the hour. That’s why we’ve come up with 15 tips to keep you immersed in your work, improve your productivity and get you paid more in the process.

1. Create a Good Schedule

Image: Peter Kaminski

If you want to stay organised and productive, having a tight schedule is an absolute must. Make sure you include everything or it’ll soon break down as you try to catch up with tasks you’ve forgotten. Remember, a schedule is more than simply a to-do list. As well as specifying each task you have to carry out, it sets you a specific time slot (and time limit) in which to do it in.

Arrange your schedule so that the most important and pressing tasks are carried out first, stay focused on targets and always include deadlines. Importantly, you mustn’t forget to set aside time in your schedule for rest and relaxation, which includes checking social networking sites, doing a spot of online shopping, reading blogs, listening to music and whatever else you normally do online.

2. Write To-do Lists

Image: Jayel Aheram

In addition to a schedule, write regular to-do lists to ensure you keep on top of all your commitments. Make a new to-do list each day, which outlines everything you want to achieve. Put the most important tasks at the top of the list and don’t rest until everything has been crossed off. Make to-do lists the old fashioned way, on a scrap piece of paper, or make them online for free using browser based to-do list apps like Remember the Milk or Ta-Da Lists. This way, you’ll never lose a list again!

3. Limit Email Checking

Image: Source

Allocate time slots throughout the day for checking your emails. Don’t check and respond to each email you receive individually or you’ll never get anything done. Check your emails first thing in the morning, once during the day (perhaps after lunch) if necessary, and once at the end of the day too.

4. Get a Workspace

Image: Risager

Designate yourself a workspace. If you’re renting a space in an office this isn’t going to be a problem, but if you’re working from home, the temptation to set up camp for the day on the living room sofa can be very high. Once on the sofa, watching videos on YouTube is going to be preferable to getting some serious work done. If you’ve got a spare room in your house then use it as an office. Otherwise, clear a space for yourself in your bedroom or living room and surround yourself with any equipment and paperwork you might need.

For those with limited space (which happens to be a lot of us) it can be hard to separate our home social life with our working day life, especially if you’re trying to relax on the sofa in the evening with what is typically your “workplace” only meters away from you. Try rearranging your room to make the most of the space, and use double-sided bookshelves and separators to separate the working side of the room from the relaxing side of the room. It’s hard, but with a little bit of commitment it can be done.

5. Establish a Daily Routine

Image: ARendle

Get yourself into a daily routine and stick to it. This means going to bed, waking up, starting work and finishing work at roughly the same time each day. Work out when you’re going to be least distracted by phone calls, friends, kids or anything else, and make this your normal working day. For the vast majority of people, this is going to be roughly 9am to 5pm. Try to stick to a good amount of working hours; 7-9 hours, 5 days a week is usually a good amount of time.

6. Make the Most of Any Free Time

Image: gregoryjameswalsh

On some days, you’re just not going to be very busy and on others you’re going to finish a task with a few hours to spare, leaving you time with nothing to do. Rather than finish work for the day, stay productive. There’s always something useful you could be doing. Check on your bank accounts, invoices and expenses, organise your paperwork or simply give your workspace a bit of a clean and dust. You’re certainly not going to want to do these things when it’s hectic!

7. Ban Social Networking

Image: mollybob

Social networking sites are the bane of a freelancer’s existence. Most people have a love/hate relationship with them at the best of times, but freelancers will find them particularly damaging to their bottom line. Unless your work is tied to Myspace, Facebook or Twitter, ban yourself from checking them altogether while you’re working. As I said earlier, set aside time in your schedule for them or reward yourself with 20 minutes of social networking for completion of a professional task.

If you need to check a social networking site on a regular basis (blogs owners for example tend to do this on a regular basis) then this is fine – but don’t get distracted! Go onto the site (or open the application), do what you had to do and exit. Avoid getting distracted by things that you won’t help you get professional tasks completed – if you see something that you would like to read in your personal rewarded time, go back and visit it later.

8. Take Regular Breaks

Image: Thomas Hawk

Don’t forget to rest and take regular breaks throughout the day, especially if you’re working on a computer. Forgoing breaks can lead to RSI and low mood. Taking a break, however, means getting away from the computer altogether, not having a 5 minute glance at Facebook. Treat yourself to a tasty, healthy lunch – it’s one of the benefits of working from home – and try to get outside for at least half an hour each day. If you can fill this half hour with a run/jog/walk then you’ll feel all the better for it and your productivity will improve too.

9. Get a Business Phone Line

Image: splorp

If you regularly use the phone for work, I strongly suggest getting a line that’s solely for business use. Not only will it remove distractions and improve productivity, it’ll help you keep tabs on your business expenses. It can be costly to have a proper phone line installed, but getting a Skype phone number is really cheap. If you’re going to be on the computer most of the day anyway, then using Skype might actually be preferable.

Alternatively you could buy a cheap mobile phone for business use – you don’t need an expensive one, as it’s primary purpose is to replace a traditional office phone – that means you don’t need to be able to check your emails or social networking sites on it. You can have an expensive personal phone for that!

10. When You Finish Work, Stop Working

Image: -nathan

Once you’ve come to the end of your schedule and crossed off everything on your to-do list, it’s time to relax. Stave off the temptation to check your emails every hour throughout the evening and take business calls- you don’t want to over-exert yourself. Get away from the computer and take your mind off work to be at your most productive the following day.

11. Do Your Research

Image: kerfern

You need to stay abreast of the latest developments in your line of work. Make sure you know exactly what’s happening in your industry – you’ll feel more of an accomplished professional and this will really shine through when you’re meeting clients and applying for jobs. Everything you could possibly need to know, you can find online, by reading online journals and following industry-specific blogs and forums.

12. Use the Best Apps Available

Image: LevelTen Interactive

There are tons of online tools and apps designed to make your working life that little bit easier, boosting your productivity. Many of these apps are browser-based and free, meaning that you can access them from any computer without installing or downloading anything. Try Dimdim for web meetings, 30 Boxes for a calendar, 280 Slides for presentations, MindMeister for brainstorming, and Dropbox for storage.

13. Network and Collaborate

Image: D’Arcy Norman

Most self-employed freelancers are self-motivated and enjoy working alone. This doesn’t mean, however, that they won’t benefit from the help and advice of others. It’s important that you get out there and meet people who are doing similar things to yourself, so you can share tips, collaborate on projects and get more work. You don’t even need to leave the comfort of your executive chair to do this. There are hundreds of online communities and forums brimming with people in the same situation as you.

14. Critique Yourself

Image: jurvetson

Even if you’re completely satisfied with the work you’re producing, there’s always room to improve. Nobody is going to analyse your performance but you, so take time to look back each month and find ways of improving your productivity. If you’ve been distracted too heavily by social networking, for instance, make sure it doesn’t happen again the following month. Although you should give yourself praise for a job well done, you should constantly be striving to increase efficiency.

15. Invest in Good Office Furniture

Image: jnyemb

While largely unrelated to a “Permanently Connected World”, this last tip is vitally important. Working from home is a rather sedentary pursuit and if you spend most of your day at a desk, you must invest in a good quality chair. There’s nothing worse than chronic back pain at ruining your productivity. Executive chairs can be stupidly expensive and often unnecessary. Just make sure that you’re sitting comfortably in a proper chair and not slouching all day.

 

You’ll probably be interested in the following:

Sign up for testking 642-972 training to make your career in web designing and learn how to excel in your field using testking PW0-104 tools and other testking E20-501 resources.

InDesign Workflow Tips: Improving your Workspace and Working with Master Pages

Covered in this InDesign article/tutorial are some superb tips on how to set-up your Workspace for the fastest possible workflow, and how to work with Master Pages.

Setting up InDesign

So this is your first time using InDesign? Not to worry, I am going to include some bonus tips and tricks in this tutorial. These tips will all be based around Preferences and Workspaces and will allow you to streamline your workflow in InDesign as well as teach you new skills.

When I first used InDesign around twelve months ago I didn’t really know where the tools were located, this was because of the standard workspace called essentials. The title of the workspace “essentials” is also included in all the other Adobe Apps – of course they all have different tools.

Looking at the “Essentials” workspace it has all the tools that you could call the essentials; but for me personally there was a large selection of tools missing. For months I struggled to get the tools I wanted to use and got ever more frustrated with InDesign and even got to the point of using MS Publisher (bad mistake but won’t go into that). Then one day, I noticed Workspaces!

Finally I could find tools I needed in the other workspaces however I often found myself switching in-between workspaces. I accidentally created my first workspace one day even though it was a rename of the workspace Typography. You know how they say “Google is your best friend when you want to know things”? Well it is true for times like those.

Above you will see my InDesign workspace which is very much like one of the workspaces that I have already mentioned called “Typography.” I found that the workspace had most of the tools that I needed so I decided to mod it and added the Preflight Panel and took away the Gradient Panel and the Paragraph Panel (both tools I rarely use).

Step 1 – Setting up a workspace.

To add a panel to the workspace all you need to do is select the Tools/Panels you require. For example I need the Preflight Panel, so I go to Window > Output > Preflight (Option, Shift, Cmd + F) or (Alt, Shift, Ctrl + F). The panel will now appear in your InDesign window. Click the top of the panel and drag to the right of the screen until it appears in the sidebar.

To delete a panel drag it from the right to the centre and click the left hand corner of the panel and poof, it’s gone in a flash! You can now repeat the first step to add or delete tools/panels from the sidebar in InDesign. Once you are happy you can now save the workspace. To do this click the Workspace Title > New Workspace and you will have a box to enter the name of the workspace, then press OK. You have created your very first workspace. This concept works the same in most Adobe applications so try it out in any other applications that you may use.

Step 2 – Setting up a default document.

Setting up a default document will save you plenty of time. All you need to do is open InDesign and go to the Document Setup which is located under File > Document Setup (Option, Cmd + P or Alt, Ctrl + P).

Change the paper to the size that you use the most, for me this would be A4. You can also define the orientation of the page, add a custom size, add bleed and slug to the page (I wouldn’t worry about these at the moment).

Bonus Tip

As long as you don’t have a document open, any changes you make to any of the tools, for example you don’t like the default font, you can change it by switching to the Type Tool and changing the size and font if you wish too.

Step 3 – The Preference Panel

I am not going to go into much detail about this panel because it is very much self explanatory and the only things that I am going to change, which is a personal preference, would be the units that InDesign uses. InDesign uses pica’s as a default which I am not really familiar with whereas millimetres is my chosen increment in InDesign (pixels in Photoshop). To open the preference menu simply press Cmd + K or Ctrl + K on a Windows based PC.

Have a look through the preference panel and change the units and increments. To do this click it in the side bar as so and change the preference.

Now you have a set of custom preferences that should increase your workflow in InDesign. Remember these tips can be used to the same sort of effect in all the other Adobe Applications such as Photoshop and Illustrator.

The Nitty Gritty of Master Pages

What is a Master Page?

A Master Page holds and displays elements that you want to appear on every single page of the document, it’s kind of like a template within a document. Master Pages are extremely helpful when creating a multipage document such as brochures, magazines or newspapers. You can have as many master pages within a document so effectively you could have a master page for a contents page and a standard page which may contain different elements. This allows you to keep things organised in InDesign.

Why Would You Use a Master Page?

I have already mentioned the purpose of Master Pages but I haven’t really explained why they are used. Think of it like this; you have a 100 page brochure for a client to finish up and they want 86 of these pages to have pure content, one for the cover, one for the back of the brochure and eleven advertisement pages. The advertisement pages will contain no specific styling and will display just the advert, so straight away these pages don’t require a master page (unless you want to number the advertisement pages).

The front cover and back cover also don’t have to have a Master Page but the remaining 86 do. The brief may state that these 86 pages need to have the company logo, section name and page number. The other 1 is to be the content page which also needs to include the company logo and section name, but doesn’t need to have page number. If you have a recurring client, keeping master pages stored can save a lot of time for future projects, ultimately earning the designer the same amount of money in a shorter period of time (in other words, a higher hourly wage) – no one can complain at this!

The point that I am trying to get across is that no matter how many times a logo or any other element needs to appear on several pages you don’t have to create extra work by placing the element in the same place as it is in other pages. This could take a lot of time which could be better spent refining the design or even getting the job done on time rather than later than expected.

Bonus Tip

Never send a project off early to a client. It sounds awesome and feels awesome to get a project done earlier than expected but hold fire, soldier! Check through the files again to make sure everything is top-notch and when the deadline looms send it and be on time with the deadline, rather than early. The reason for this is if you get it done early the first time they may expect the next project to be early, too. This happened to me within the first month of my freelancing.

It’s time to create the Master Page

The Brief

I have made up a brief for this project just to make things a little easier for you to follow.

  • 4 pages
  • All pages must include logo
  • Pages must be numbered (except cover)
  • Have a well presented footer with email/web addresses.

This is a very limited brief. The brief doesn’t have to be complex because its a very small brochure to complete.

Step 1 – Create the document

I have created a document ready for an A5 brochure (see the settings in screenshot below).

Click OK and you should now have the document set up and ready to go ahead and start dropping some elements in to place.

Step 2 – Placing Elements into the Document

To place an element into the document either go to File > Place or CMD + D (or Ctrl + D on a Windows based PC). This then brings out a window allowing you to insert a logo. For this tutorial I have created a company name called “InTut Design” and have produced a simple text-based logo purely for this article.

Now we have a logo in place, we need to make it a master element.

Go to the pages panel which is located on the right hand side of InDesign. If you can’t locate it you’ll need to go to Window > Pages. Now you will see this:

As you can see on the pages panel, I have four pages set up and they have the letter “A” in the right hand top corner, this letter corresponds to the master page that it is set up on. At the moment there isn’t a master page but it always defaults to “A”. Now double click on “A-Master”, this brings up two pages, and all you have to do is set up the elements you want to appear.

Now let’s import the company logo into the document on a master page. With “A-Master” double clicked go to File > Place or Cmd + D (Ctrl + D on a Windows based PC) and select the image.

Step 3 – Adding more elements to the document

So you now have your logo in the master page. If you click out of the master page by clicking one of the spreads/pages in the panel you should notice that the logo is on all 4 pages! Now go back into the master page by double clicking “A-Master”. Grab the Type Tool (T) and insert some text for the footer. Don’t worry about numbering the page we will cover that in the following step.

Bonus Tip

You will notice that the logo’s appear differently on different pages. This is because I have facing pages on therefore the right hand side page controls the right hand pages such as the cover and the centre right and the left hand of the screenshot covers the left hand pages and the back cover.

Step 4 – Page Numbering

Our master pages are almost complete, meaning it is almost time to get on with your project and start adding non-master content such as text and images. Before getting on with that however, we need to number our pages and to do so we need to make a new master page called “B-Master”. To create a new master page simply right click on the pages panel and select New Master. Give it a prefix of B – this should be the default anyway, and then click OK. Now you will see an A-Master and a B-Master. So far we have set up the A-Master which is currently set up to all 4 pages. Drag the B-Master from the master page panel to the first page. The reason for this is our brief states that the cover is not to be numbered and the easiest way to do it is make another master page. You should now have something like this. (I have re-placed the logo into the B-Master using Cmd + D (Ctrl + D on Windows based PC).

Next we need to open up the A-Master and insert all the text that is required by the brief. If you look back at the brief it tells us that the Web and Email addresses need to be put on there along with the number of the page. Simply grab the Type Tool and type ‘www.in-tut-design.com / hi@in-tut-design.com’. Now make another text box, this time with the word ‘page’. To number the pages stay in the text box and go to Type > Insert Special Character > Markers > Current Page Number.

.

It should insert the letter A. Copy and paste the text and take it to the other page. If you now come out of the master pages you will see that the pages are numbered and start from page two and finish at page four.

Now we have the document set up, what next?

So you should have everything set up and have a blank template to work with. All I have done is added some text to the Front cover and a stock image from Computer Arts Issue 170. On the centre pages I have added some lorem ipsum dummy text to add a back bone to the brochure, and then added a large stock image once again from Computer Arts Issue 170. On the back of the brochure I have just put some basic contact details to add some content to the back.

Now you should have a completed document – if you have a question to ask about this tutorial or about me please feel free to leave a comment, email me at info@liammaskelldesign.co.uk or drop me a line on Twitter.

Thank you for taking the time to read this post and hopefully there will be more from me to come!

Download the free resources including ccna questions to successfully pass sas certification as well as mcsa certification exam.