I had a great time participating in Meredith Marsh‘s Business Card Exchange. I believe this is the second year she has done this and its a nice way to learn of other designers in the industry and perhaps network out and become friends with other talented people in the design community.

However not everyone is keen to seeing what the benefit is in participating so I figured I’d share some tips on what to look for to amp up your creativity and get the most out of these business card exchanges.

Engage the design community

A few of the 2010 business card exchange participants

Engaging the design community allows you to extend your reach with existing and fresh talent in the design communities. By allowing yourself to meet others who may or may not be more experienced than you, increases your awareness of web trends and allows for a different perspective of creativity. In fact just by participating in the business card exchange a few designers added me and some left some nice comments about my site and business cards. These are people I probably would have never met otherwise so you can see how easy it is for the community to equally engage you back. You never know if an opportunity will come along that could increase your goals as a web or graphics designer so never be hesitant about joining in on these designer business card exchanges.

Recognize the trends

It’s easy to side track the importance of keeping up with trends in the design community. The problem is if you don’t keep up, you usually fall behind and eventually get weeded out of the market quickly as time progresses. It ultimately depends on the client but clients aren’t going to be as big of risk takers as you are in their design processes for business cards. They want something thats standard, works, and brings in more visitors to sell their product or service. However, when you are participating with other designers you can be more free in expressing yourself and show off your skills. I personally enjoyed the business cards that kept things clean, simple, and light as this seems to be an emerging trend on the web as of late. Perhaps its because its easier to maintain or because of faster loading times; either way, its a win win for the designer and the user.

Here are a some of the minimalistic cards I enjoyed out of the bunch:

Of course there are a ton of other good designers in the list with different styles which aren’t listed here but this article isn’t intended to go into detail about the various design styles. Just be aware of the trends you see other designers doing and see if you can creep in some of that sweet design action into your own designs in the future.

Include your social networks

This seems like a no brainer right? However I noticed others, including myself (doh!), haven’t done this. They may have been trying to keep things less cluttered which is definitely a goal to keep in mind for a business card but I found that the business cards that got the biggest reaction for me were the ones I could add to my social networks. After all in the context of this design business card exchange I’m less inclined to email someone on a business card and more likely going to add them to social networks to keep tabs on their work. It’s important to note however that traditional businesses still favor email, but new and online businesses definitely favor social networks and fast communication. Twitter was the winner in this batch of cards, but facebook or linkedin wouldn’t be a bad thing to add either if you are looking to expand your social reach.

Just Have Fun With It

Business card exchanges wouldn’t be that awesome if you didn’t have others to share your creations with. It’s probably one of the only times you aren’t being limited in creative freedom by adhering to client requirements and web standards. So don’t get bogged down thinking it is just another project. Have fun with it and don’t forget to make some new friendships along the way.

Other Resources

Check out some of these other bloggers discussing the 2010 business card exchange this year.

• Meredith Marsh’s 2010 Business Card Exchange Video Post
• Jeff Lin’s Merdith Marsh’s Business Card Exchange Post
• Rhonda Brown’s 70 Examples of Business Cards from 70 Creative People Post
• Steven Trotter’s @merdithmarsh #bizx FTW Post

Perhaps the greatest gripe I had about Prawn on first encounter was the lack of being able to use CSS & HTML for easy styling, which is something I’m much more comfortable with from experience. But after realizing that there weren’t many candidates that allowed this type of styling format in PDFs, I decided to give Prawn a go anyhow.

I also found prawnto googling, which is a plugin used with Prawn to provide easy access to the prawn library and allows for a simple respond_to block slapped into your controller to provide you with the .pdf extension. This seemed perfect for what I needed so I figured I’d share my knowledge with others so lets get started.

Let’s create a rails customer project

Let’s do some scaffolding to save some time. In this case we are going to create invoices for our customers.

Launch your server:

Time to create a new customer invoice that we can work with. Go to your http://localhost:3000/invoices page and click on new invoice and add some data; here is what I used:

Name: Branden Silva
Item Name: Awesome Serif Fonts
Item Price: 24.99
Item Quantity: 2

Once done, http://localhost:3000/invoice/1 should now be your first customer invoice. Awesome, now lets get prawn & prawnto installed.

Getting prawn & prawnto up and running

I’m using rails 2.3.5 for reference so your results may vary depending on what version you are running. First you’ll want to download the prawn gem and prawnto plugin into your project like so:

Note: If you end up getting a “uninitialized constant Mime::PDF” error further down the tutorial when launching the pdf then prawnto may have not installed correctly. I recommend you go download prawnto at the git repository here and create a folder prawnto under your vendor/plugins directory in your rails application and stash the files in there.

Then your going to want to add prawn to your environment.rb file to avoid any dependency issues in the future:

Then you are going to have to set up prawnto in your invoice controller. Here I’m going to fetch a customer invoice and display a pdf in my show action when a user adds a .pdf extension to the url. The part you’ll want to pay attention to and add is the format.pdf line.

Now your going to need to create a file to put your prawn code into. In this case I just create a blank show.pdf.prawn file under the http://localhost:3000/views/invoices folder.

Now it’s time to start dishing some prawn

Lets start writing some prawn code. You can access your PDF at any time by simply adding a .pdf extension to your individual customer invoices. So http://localhost:3000/invoices/1 is how you show your customer invoice information via the browser and http://localhost:3000/invoices/1.pdf would be how you access your customer invoice via PDF format. Of course it’s not going to do anything until we write some code so open up your show.pdf.prawn file.

I usually start off by adding an image to my pdfs to give them a nice spiffy look. Here is the awesome logo I’m going to use:

Awesome Company

Now save your logo (or mine) to your public/images directory in your rails app. This way you can reference it in your show.pdf.prawn file. Here is what the code looks like in our show.pdf.prawn file to add this image:

We are simply creating a local variable called logopath and then displaying it with the pdf.image method off our pdf object. I’ve also set the width and height of the image here.

How about we add some text now to our PDF. First lets shift the page down 70 points, add some styling, and then we can access our lovely instance variables that come with our rails app to pull in dynamic data.

Thats a big chuck of code so let me break it down for you. pdf.move_down shifts your cursor focus down the PDF document. This doesn’t apply to our pdf.text_box which is entirely different creature that doesn’t follow the normal pdf page flow (you can think of text_boxes like absolute divs in html). pdf.font allows you to use supported prawn fonts. I’m sure it can be extended but I haven’t researched it in depth because Helvetica fits my needs for this example and client project. pdf.font_size adjusts the size of your text.

So what would we you do if you needed a table? Simple enough, try this:

Here we are creating a multi-dimensional array and assigning it values from our rails application. In this case our local variable invoiceinfo is storing our table information. You don’t have to put the information in it’s own variable but I find its easier to keep the data separate from the formatting of the table. #{@invoice.item_name} would pull our item name from our rails application and display it in our pdf, yeah, it’s that easy. pdf.table calls invoiceinfo and then assigns a few attributes to that table. Pretty awesome that it’s that clean and simple to style everything up with a few key value pairs. I’ve even added some row colors to make it easier to scan for the user.

However, a PDF wouldn’t be complete without allowing page numbers. Fairly straightforward to do in prawn as well, here is the code:

Here we shrink the pdf.font_size down so the page number won’t be enormous. We start to get into the pdf.bounding_box creature. You can basically define boxes inside your pdf. In this case we are telling the bounding_box to find the right most edge (bounds) of the box you are in, which happens to be the pdf document, then we subtract 50 points. We do the same thing with the bottom minus the shift of 50 points. We then slap a width and height to our bounding box and perform a block of code in the bounding_box. the local variable pagecount is assigned and then displayed with pdf.text.

Heres my final example for download.

Well there you have it; a simple invoice with very little effort. With some additional research you can add more data and style it further to fit your needs. Before you go though lets add a nice link to our PDF on our main show page so the customer can find it without having to type it in the URL manually. Head over to your views folder and open your http://localhost:3000/invoices/show.html.erb file. Then you’ll want to add this code somewhere in your file:

We’re basically just calling the invoices path and throwing it the invoice with an extension of pdf attached to the end of it. This should show up as a link now so when your customer clicks on it they will be redirected to the PDF version of your data in your rails application.

Conclusion

Prawn is definitely a simple and easy way to get PDFs up and going with very minimal effort. The only downsides I’ve noticed from my perspective is it’s not completely possible to style ever nook and cranny because your at the whims of Prawns formatting options; but I’m guessing it won’t make much of a difference because there aren’t to many alternatives as nice as Prawn or that have this simple functionality. Documentation was available, but examples were limited but nothing a Google search can’t net you. Hopefully this helps out some of those in pursuit of a quick PDF solution.

Final Note:prawnto’s website mentions it only been updated to rails 2.2 but I had no problems getting it to work on 2.3.5. It may however be broken in rails 3 so just be aware of that when upgrading.

Other Resources

• Prawn Github
• Prawnto Site
• Ryan Bates Railscasts #153

The Starter Kit

I started my creative business, Valiant Designs, in late 2009 as I was finishing up my Information Technology degree in college. College didn’t leave me much time to actually hunt for clients, but that didn’t stop me from drifting my way into the creative field in any way I could; hence the reason why I spawned my iphone application, Rebate Tracker, for the masses in December of that year. Of course I’ve been designing much longer, but unprofessionally and as a hobby. I’m happy to now be opening my doors to clients who want to bring a beautiful and engaging experience to their users.

I’ve always had a technical background in Windows, Linux, and just about any other internet geeky thing you can think of. I’ve been active on then internet for about 13 years now and in internet years that makes me like your grandpa. To add insult to injury, I was that geeky kid in high school trying to convince people to use mp3s instead of cds and ever since I laid my, now keyboard-deformed fingers on a keyboard, I’ve been in love with digital bits ever since. My family laughs at me for telling them I love technology, but when you start to realize just how much of a role technology plays in society, you can’t help but magnetize your eyeballs to the glowing rectangles that tap you into the world in seconds.

It’s important to note that I love learning and I am a self-taught designer and coder. I actually started with HTML and QBASIC and migrated my way up to other languages like visual basic, delphi, C++, C#, PHP, and MYSQL. Although I’m not a fluent programmer, I’ve now settled my future coding endeavors in ruby and rails and plan to spend the next couple of years striving to be an awesome code jedi like so many other talented individuals in the field. But the picture would not be complete unless I was designing because of the creative ideas, concepts, and pings bouncing around in my skull need a canvas and a destination. I started my battle in Adobe Photoshop 5 and other Adobe (Macromedia at the time) products to become a better skilled craftsman over time. I’ve come to enjoy typography, grids, and the birth of CSS as the internet has taken shape from table hell to creative bliss. I hope this blog can be room for my creativity to grow and expand into other areas where I can assimilate into a versatile creative and share with the design community as I journey into the unknown.

What is the plan, stan?

Because I plan on expanding beyond just client work and into my own design endeavors, I’ve kept my goals light in terms of client or spec work. But eventually I’d like to shape Valiant Designs into so much more. Here is a list of goals I’ve planned out this year:

1. Rather than specifics on how many clients I can find, I aim to bring in $15,000 to $20,000 in terms of client work. It’s not much but definitely achievable with my skill set and willingness to succeed.
2. Launch one Ruby on Rails side project of mine. I’ll also be learning as I go so it will take awhile longer than if I was hot stuff like @wycats or @rbates.
3. Continue to expand my knowledge into the mobile realm of design and development work. My particular focus will be the iPhone, iPad, and Android platforms for now, but I’d like to eventually cover other major mobile markets.
4. Continue to share with the design community through blogging regularly and working with other talented designers or developers. Perhaps get involved in some open source projects if time permits it.
5. Release a WordPress theme or two, along with other educational goodies that go along with it.
6. Seek partnerships with other talented folks in design or development work.
7. Release some blog articles to major blogs in the design and development community to expand my presence.
8. Continue to grow in social media and other forms of communication because people are ultimately more important to me than profits.

Some may feel my goal list is light and not edgy enough, but I would reply to that with it is my first year in business and I still have a lot of learning to do in terms of business, contracts, and client work. I’m also a life long student and jump around often in terms of learning and my career. I enjoy taking time off of work and spending it learning about life or contributing towards societal education and change. I’m actually in the first stages of putting together a creative documentary about such ideals now in hopes of providing awareness to others.

In the mean time however I look forward to contributing the creative community and to share my creative juices whenever I get the chance.