So, you’ve got a hit design blog, mastered the user experience and can code a PSD file to XHTML and CSS in about 5 minutes. You can run circles around digital media, and maybe you’ve even gotten your feet wet with HTML 5 and CSS3. But then, seemingly out of nowhere, your client asks for a quote on some fancy business cards with gold foil stamping. That’s when it hits you. When was the last time you prepared a file for professional printing?

Is Your Artwork Ready for Print?

Thankfully, you’ve got one of the most powerful tools for learning at your disposal – the internet!

So, let’s take a look at a few things (in no particular order) your printable file is going to need in order to make it safely through the press into the hands of your happy clients. Please bear in mind that these are just standard rules and you should check with your printer to verify that they are using the same measurements, etc.

Proper Resolution

When you’re designing for web, your images are usually 72 dpi (Dots Per Inch), which is standard for screen resolution. For most print projects, you’re going to need more than 4 times that resolution: 300 dpi. If you try and print your files at 72 dpi you will end up with blurry, fuzzy pictures, and you want the highest quality for your clients, right?

72 dpi vs 300 dpi

One drawback to printing at such a high-resolution is that it can be taxing on your computer, especially for larger documents. Saving, moving layers and adding effects can become cumbersome. When this happens, it’s best to split the file you’re working on into parts and save them out as separate, smaller files, linked to the larger Photoshop file. A great way to utilize this effectively is through the use of Photoshop’s smart objects.

If your design is made up of 100% vector elements, you shouldn’t have this problem as long as the file is saved out properly in Illustrator, as a vector EPS, AI, or PDF. Check with your printer to see which file types they can handle.

Bleed, Trim and Safety Lines

Whenever I’m setting up a file for print, the first thing I do is create three important areas on the document:

Bleed: Whenever your artwork extends to the edge of a document, you must set up a bleed area so that when your work is being printed it doesn’t get cut-off irregularly at the edges and leave ugly white lines. Therefore, your artwork should extend 1/8″ (.125 inches) beyond the live area of your document whenever necessary. This means that if your business card is 2 x 3.5″ when it’s finished, then your document should be 2.25 x 3.75″ when you are designing the piece.

Trim: The trim line is simply the line that shows where your document is going to be cut, and is usually 1/8″ after the bleed. So if your page is going to be 8.5 x 11″ when it’s done, the trim line would make an 8.5 x 11″ box inside your document.

Safety: The safety line is an additional 1/8″ inside the trim line. All of your artwork and text should be inside this box to ensure that it is not cut-off when the page is cut.

Trim, Bleed and Safety

So why do we need bleed, trim and safety lines? Well, paper is an organic material, meaning it is subject to temperature and moisture. When your printer is running many pages through the press, the paper can expand or contract very slightly and offset the registration of the printer. On most professional machines this offset is minimal, but in my experience it’s always better to be safe than sorry!

Here’s a bonus tip: In Photoshop you can right-click on the rulers when visible to switch between different areas of measurement!

RGB, CMYK, 100K Black & Rich Black

As a web designer, you’re probably used to seeing your work rendered in millions of colours, in gorgeous RGB format.

As a print designer, your work must be created in CMYK (Cyan, Magenta, Yellow and Black) format. This is because most printers have Cyan, Magenta, Yellow and Black inks that they use to reproduce your artwork. If you convert a vivid RGB image to CMYK you can see that a lot of the colours become muted and washed out. CMYK doesn’t quite have the same reach in the colour spectrum as RGB.

In CMYK printing, values can be measured in percentages of C, M, Y or K much like RGB values can be measured in amounts of R, G and B.

RGB, CMYK, 100K Black and Rich Black

To create Rich Black, you can use a mixture of 30% Cyan, 30% Magenta, 60% Yellow and 100% Black. Rich Black is best used for larger areas of black, and not on thin lines or text (text over 34 or 36pt is OK). If you use it on small body text or thin lines, the inks could saturate and blur the artwork.

100K Black is created using, you guessed it, a mixture of 0% Cyan, Magenta and Yellow, with 100% Black. For large areas, 100K Black would just look gray. For small text, it helps keep the text crisp since the printer only has to worry about lining up one colour instead of four.

Print Formats & Fonts

I have yet to come across a printer that doesn’t accept PDF files (vector and raster). That being said, you should be sensitive to the needs of your printer.

Building a good working relationship with your printer is important (especially if they are local). They might not have the same fonts that you do on their machines. Whenever possible, you should create outlines of your text or embed fonts (packaging the fonts with the files also works, make sure you have proper permissions). Not following this step might lead into possible delays or the issue might get missed altogether.

Some printers like it when you give them a low-res JPG reference file to check against when they are setting up your files. It’s usually not a bad idea to include one with your print files if your printer allows for it.

Conclusions

To many, print is a dying art. Digital media has taken a huge stand and proved why it is in many ways, easier, cheaper and more efficient. There will always be a need for print, but is this need going to be as strong in 5 years? 10 years?

At any rate, it is likely that it will be in demand, big or small, and that you will be called upon to create print work. In that regard, I hope this article finds you well, and that even if you’ve done print many times before, you’re able to learn a thing or two.

WordPress CMS – HTML, XHTML, PHP Completed 12-07-2010

There is a lot that goes into the process of designing and developing a website successfully for a client. In order for the project to be truly successful, it must accomplish much more than simply an attractive design. In this article we’ll take a look at 7 keys that must be present for the designer and client to create a site that achieves the desired results for the business.

1. A Realistic Timeline

Designing and developing an effective website takes time. Most designers understand this, but some clients assume that the process can easily be done faster without considering the impact.

It’s not uncommon for a designer to be contacted by a potential client who has an unrealistic deadline. At this time the designer can either make promises that they may not be able to live up to in order to land the job, or the designer can explain to the client why the deadline is unrealistic, what steps will be rushed with this deadline, and what the consequences may be. In many cases the client will be more flexible with their projected time frame if they understand the long-term ramifications of rushing through the project.

2. Proper Client Intake

Custom web design services address the specific needs of each client and their customers/visitors. No designer is going to know the client’s business as well as they do, so it is important to have an effective intake process that gathers sufficient information to help the designer to understand the particular situation of the client. Jumping right into the design process is a temptation for both the designer and the client, but doing so typically cuts out some important steps in the process.

Think of the intake process of getting to know the client much like setting a proper foundation before building a house. All future efforts will be made stronger with a proper intake process, and without one, anything that is built will be unstable.

Each designer will have a different process for getting started with the client, and it may even vary from one project to another. What’s important is that the designer and client take the time to get on the same page and start the project on a solid foundation.

3. Client Involvement

Some (but not all) clients will want to tell the designer the basics of what they want and then step away from the process. A successful project will include involvement from the client at the early stages of the project, as well as throughout the project for feedback. From my experience hands-on clients are actually easier to work with because you know what they want and what they are thinking throughout the process. It’s difficult to create a website that truly represents the clients and serves their business well without much involvement from them.

If you’re in communication with a potential client and they seem like they seem like they don’t have much interest in being involved in the process, take the time to explain to them why you will need their input and how it can affect the end result.

4. User Focus

An effective website focuses on meeting the needs of users. The designer can create something that’s visual appealing and something that the client likes, but if it doesn’t focus on the users and meeting their needs it will ultimately not be successful.

During the intake process the designer needs to make an effort to get a good understanding of the users of the website and the target market of the client. Without knowing who you are building the site for, what they want and how the behave, it’s impossible to create a user-focused website.

5. Specific Feedback from Client

In order for a project to be successful it will need to satisfy the client, however, getting specific and helpful feedback isn’t always easy. Some clients tend to give very general feedback without pointing out specific details of what they like and what they don’t like. With vague or general feedback it’s very difficult for the designer to know why they don’t like something, or what can be changed to please the client.

When you’re dealing with clients that only provide general feedback, take the time to ask questions that will lead to answers that are more specific. Explain to them that in order to come up with something that they like you will need to understand the details of what they do not like.

6. Implementation of Feedback

Once the designer has some specific feedback from the client, that now needs to be applied productively. Using the feedback that has been gathered, the designer needs to make changes that will lead to an end product that the client is happy with. Getting specific, helpful feedback and implementing it effectively will result in fewer revisions and changes that need to be made.

7. Effective Testing

Before any website is launched to the public there should be some testing involved. This includes browser testing, usability testing, and simply checking for errors and mistakes. Ideally the designer will have an established process for testing, but the client, and even users, should be involved if possible.

Grills & More

WordPress CMS – HTML, XHTML, PHP & Flash Completed 10-07-2010

Good Shepherd Lutheran Church

Wordpress CMS – HTML, XHTML, PHP & Flash Completed 9-04-2010

I’m going to start this discussion of by revealing a secret about my own design work: I don’t have a process. At least, I don’t have a rock solid, time tested step by step formula that I follow for all my projects. That’s not to say that I shoot from the hip or fly by the seat of my pants, to use a couple of cliched old sayings. I certainly take the time to think things through and to be both thorough and methodical in my work.

I just don’t follow the same steps every time.

There are a couple of different reasons for this. The first is the nature of the project. Using web design as a primary example, there are some projects which just lend themselves better to being done primary through a combination of my code editor of choice (Coda) and the browser, using Photoshop only to create really simple graphics. For other projects, however, I just find that it’s better to start mocking things up in Photoshop.

Of course, depending on how I begin the project, the follow through will also be different. If I start in the browser, development will progress in one way and if I start in Photoshop, it will develop in a slightly different way.

I am also impacted by my continuing education. I try to be as active as possible in the design community and am always picking up on new concepts, tricks, ideas and methodologies when it comes to both design and development. This continued learning invariably effects my thinking, which may alter my approach and ultimately change the process for a given project.

As this learning is an ongoing journey for me, I find that every time I start a new project, I am coming at it from a slightly different angle. As such, I don’t think I’ve ever used the exact same design process for any two projects in my entire career.

I’ve been pondering that notion a lot lately, and it’s got me thinking about the whole concept of the design process, and the possible advantages and disadvantages of formulaic and/or free-form processes, which is what I want to look at over the course of this particular article.

Formulaic Process

The formulaic process is exactly the sort of thing that I typically haven’t done. It presents a clear, step by step methodology that is intended to be followed from conception, through execution and all the way to the final completion. It’s organized, often based on extensive experience and may have the impressive support of numerous satisfied customers.

As such, the formulaic process can look like the obvious choice. So, let’s consider it.

Advantages

A Road Map – One obvious advantage of the formulaic process is that it can work very much like a road map for design. You’ll never have to figure out how to start or approach a new project. The formula will tell you. It means that you’ll always know exactly what your next step needs to be. This can be a huge bonus when it comes to productivity and time management, helping to minimized idleness.

Team Work – A formulaic process can also be a huge benefit for team based projects. When the process is clearly and carefully defined, each team member can be assigned work (according to their skill set) to help accomplish a particular part of the process. The formula will not only help with the delegation of this work; it can also help ensure the compatibility of the work as it moves between team members.

Predictability – Which leads to the benefit of predictability. With a formulaic process, things should be more or less predictable. When work moves from a designer to a developer, the developer should know what to expect from the files he or she receives. The same is also true of code that may pass from a front end coder to a back end programmer who is responsible for deploying everything through a CMS.

Predictability also comes into play in terms of timelines and turnarounds. If you’re using the same, formulaic process over and over again, you should start to develop a pretty good understanding of how long things should take. This, in turn, can help you effectively manage the scheduling of your projects.

Disadvantages

Boredom – Doing the same thing all the time can get tedious, even if it’s something you’re passionate about. Tedious work quickly becomes boring, and in my experience, there’s nothing better at sucking the life out of your work than boredom and monotony.

Boredom can also be something of a creativity killer. It’s kind of hard to be really creative when you’re sitting there, twirling your pencil and wishing that you could be working on something different and exciting.

Square Peg/Round Hole – Of course, every project is going to be somewhat different, and those differences may demand equally different approaches. A formulaic design process certainly runs the risk of placing constrains on a project, actually establishing limitations that don’t necessarily fit the particular scope of the project. It’s kind of like the old notion of trying to fit a square peg into a round hole. It just doesn’t work.

This doesn’t necessarily have to be the case, of course, but it’s certainly something that needs to be considered.

Advancement – Formulas are, by their very nature, firm and unchanging things, and while there is a certain noble strength in this, there can also be a significant disadvantage, in terms of advancement. Technologies continue to grow and evolve at an alarming rate, and many of these new technologies can have an important bearing on the way we go about our work.

New applications – or features in existing applications – can offer fresh and exciting ways of engaging with problems. Formulaic processes that remain unchanged and don’t make room for a certain degree of adaptation can quickly become stale and dated.

Free-Form Process

A free form process is the exact opposite of a formulaic process. It doesn’t rely on predetermined patterns or assumptions. It is natural and organic, taking things as they come and allowing the pulse of the project to dictate the course of its development.

It’s also the way I’ve typically designed, so if there seems to be a slight bias here, that’s probably why. I have tried to keep things objective, though.

Advantages

Flexibility – Because the free-form process doesn’t follow a prescribed pattern, it can actually be vastly more flexible that it’s formulaic counterpart. If an approach needs to be radically changed part way through a project (perhaps switching from a simple Tumblr blog to a full eCommerce site), you can just go ahead and do it. No formulas are hindered and no rules are broken. The process is following the needs of the project, and as the direction of the project changes, the process just changes right along with it.

Modularity – For freelancers, independents and small teams, the modularity of a free-form process can be a huge advantage. Frequently, I’ve found that there are a number of different tasks that can be worked on independently of each other for some time before needing to bring them all together. So, if you are waiting for a client to get back to you with approvals for the layout of a site, you can start working on designing icons or other user interface items that may not necessarily be dependent on the the approvals you’re waiting for.

Working with this kind of modularity (which would be more difficult with formulaic process) can be really advantageous in terms of productivity, allowing you to effectively juggle various tasks, as required.

Growth – As already mentioned, technology is always progressing, and using a more free-form kind of process has the added benefit of allowing you to play and experiment with building those new technologies into your workflow.

It doesn’t have to be a new technology either. It’s impossible for any one person to become a master when it comes to HTML, CSS, JavaScript, PHP, layout, typography, usability/user experience, accessibility, mobile considerations and a plethora of other issues all at once. Honestly, if you’ve become a master at any one of these things, you’re doing pretty well!

Using a free-form design process can allow you to openly experiment and get better in these areas. For instance, in one recent web project, I took my first foray into using @font-face, and spent a great deal of time experimenting and learning how it works. I’m also planning on doing similar work to learn more in the areas of mobile websites and accessibility!

Disadvantages

Designer’s Block – Designer’s block sucks just as much as writer’s block, and I hate it when it happens to me because it’s an energy draining, spirit sucking phenomenon. I’ve always maintained that one of the best ways to deal with a nasty case of writer’s block is to just plow straight through and start writing, and I would imagine that this same concept would probably work on designer’s block too.

However, with a free-form process, this might be a little more difficult. A formulaic process presents a clear starting point that you can grab onto and just start powering your way through. Because a free-form process is a bit more open ended, this kind of forceful reaction can be somewhat more difficult to achieve, thus potentially making designer’s block somewhat more difficult to shake.

Lack of Focus – A free-form design process can also, potentially, suffer from a lack of focus. Just because it lets its path be dictated by the project itself, doesn’t mean that the path is always going to be straight. You may even find yourself being pulled down rabbit trails that take you nowhere, but which eat up minutes and possible even hours of your valuable time!

Slower – Finally, a free-form design process could also potentially be slower than a formulaic one, for a number of the reasons we’ve already touched on. Working with a new type of technology for the first time always comes with some degree of a learning curve, and taking unintended trips in fruitless and unfocused directions is certainly no recipe for speed.

Of course, in an ideal world, speed would have nothing to do with design, and we would have all the time in the world to get it right. That’s just not the case though, and when you have a client breathing down your neck, sometimes speed can become one of the most important factors in your process!

Conclusion

So what kind of process should you use? Formulaic of free-form? I really don’t have a definitive answer to that question, and quite frankly, I don’t think that there is a definitive answer. It’s going to vary from person to person and from agency to agency, which means that you are ultimately going to have to make that decision for yourself.

Hopefully, though, by looking at some of the advantages and disadvantages of each, you will be able to look at your own skills, aptitudes and situation and determine which is right for you. Maybe it will even be a bit of both! Whatever process you decided to use, just be sure to work hard at it and create the strongest designs that you possibly can!