Design insights & tutorials.

Ampergram: Capture. Tag. Type. Share.

Typography Is Everywhere

Designers and non-designers alike, everyone experiences typography in everyday life. Whether it’s transportation signage, your employer’s branding, the letters on the old ballpark facade, the list goes on and on. Some of these letters are new to you and some of them remind you of childhood and times passed. If you do resonate with these characters that you see, would you still connect with them if they were taken out of their surroundings? Would you still be able to pinpoint which H is from the HOLLYWOOD sign and which W is from the Welcome to Las Vegas? More than likely you would. Each of these letters has a very distinct quality about them.

AMPERGRAM allows you to quickly create a message using unique and possibly recognizable letters. Your message could be as simple as “I love you” to your significant other, but upon further review, they notice that each letter is from one of your favorite locations throughout your relationship. Or if you are looking for diversified fonts, but still wanting to type your name using a black font on a white background, that is possible through AMPERGRAM using the filtering capabilities. Having just moved from Cleveland to Brooklyn, NY, I may decide that I want to have a print that says BROOKLYN spelled out, but only using letters from around Cleveland, so I can have a little bit of both worlds.

Use AMPERGRAM.

There are several ways to use AMPERGRAM; through our web app, AMPERGRAM.com, as well as our iOS and Android apps. You can save and share to the AMPERGRAM community gallery or through many popular social networks, save your ampergram as a JPG to your device, or even download a high resolution file to print.

We are going to step through the process in a moment, but if you want to see it all wrapped up in under 40 seconds, watch AMPERGRAM — The Experience below.

The possibilities are endless, and the potential is there. However, AMPERGRAM is only as strong as the users behind it. If you see single letters or single words that catch your eye, capture them, post to Instagram and tag with #ampergram including the photographed character (#H, #3, #?).

Do It Now.

AMPERGRAM is quick and easy to create with, but also very professional and full-featured. From opening the webpage or mobile app, typing a message and sharing within seconds; to clicking on each letter, cycling through all options to fine-tuning your results, even mixing in some word results, it is possible to spend as much or as little time creating an ampergram. It is completely up to you.


Let’s begin. We are going to start new, and then choose the smallest cube layout.


From there, we are going to choose the second line to start typing GO. At this point AMPERGRAM is telling us that we can click to use GO as a word or we can ignore that message to keep each cube as single letters, which is what we are going to do.


We then click on the G and we are presented with more information.

If it is the first time you are visiting AMPERGRAM, you will see these hint panels at times. As displayed on this panel, you can find out everything you need to know about the photo and who took it, as well as cycle to the next or choose to filter out specific G’s. You can tell from these results, we have two different types of characters. Some are typographic and others are representative (the seal of a juice bottle that resembles a G).

After making our selections, we will then go down to the third line to type the rest of our message. You can use your arrows keys to move from cube to cube as well as space-bar, backspace, return and even CMD+A to select all of the cubes.


If you do not have a keyboard attached, click the keyboard icon in the bottom right of your screen and a virtual keyboard will slide up. This is where you will find special characters like a heart, star, checkmark, etc.


Since we are satisfied with our selections for GO, but we want to make sure this next line only pulls from photos taken in Cleveland, we can specify this from the filter results panel. In the filter by location, we type Cleveland, and select to apply this to only future photos, and click apply. You will see no changes to your cubes, but now when you type, the new photos are only pulled using your filter requirements. If you see a cube that says no results, make sure to widen or remove your filtering parameters.


When we are done editing, click the save|share button in the upper right. This will save your ampergram privately in our system. However, you can make it public in the AMPERGRAM gallery, save it as a desktop wallpaper, share it to any social media network, or even choose to download a high-resolution file for printing.

A Little Behind The Scenes

Adobe Flash With Air vs Learning A New Language

When I first started to develop the Flash website of AMPERGRAM, I knew that if it was going to succeed, that I would have to be able to make it accessible from all platforms. Since I am only a Flash developer, and I did not want to loop in a third party, my options were extremely limited. I would have to learn a new programming language so I could develop for mobile, but then I would probably still have to develop everything twice since I did not know of anything that would work in a desktop browser as well as a mobile applications. My only other solution would be to further research Adobe Air and see if I could package my already existing Flash website into a mobile app.


I proceeded down the route of using Air and I am very happy that I did. I was able to moderately redesign the interface to be more mobile friendly. One way to assist this was by adding a hidden side menu instead of having all of the options in the top menu, giving us more real estate for the cubes.

What To Watch For

During the process I found it necessary to make sure scaling worked from the beginning. Since mobile platforms have every size resolution you can think of, be sure you allow your interface to scale and center appropriately. I am happy to say that as an Android user I was able to make sure AMPERGRAM looks completely customized for all resolutions of Android devices. For iOS it looks great on iPhone and iPod devices but our scaling had slight problems on some iPad versions. Everything is functional currently if you download for iPad, but some visuals are off-centered. A fix is in the works, but all the more reason for me to mention that this should be a point to focus on from the beginning.

As a designer, I know that I am probably speaking to mostly iPhone users. As much as I have been an Android user, I am very accepting of iPhones and enjoy many things about them. However, in the process of developing through Flash and Air, pushing to iOS for testing was quite time-consuming. Every time I would compile the app to Android, it would take any time under 30 seconds. Which is quick enough to allow for an ease of troubleshooting. Find a problem, attempt a fix, test, repeat. It went pretty well. However, when pushing to the iPhone, compiling alone took close to 5 minutes, no matter how complex the app and code. This quickly became the time where I would get up and stretch my legs since I was going to be waiting anyway. Once the 5 minutes were up, I then had to open iTunes, drop the compiled IPA into iTunes and then sync the phone, not to mention all of the issues with mobile provisioning documents and certificates. This process was not fun and I found myself testing mostly in Android for quickness and then only testing milestones on iOS to make sure the code was functioning in a similar way. If you are going to publish on both platforms, I would recommend a similar course of action.

Never Stop

I have been working in Flash for almost 15 years, and I am always learning new aspects of what can be done. I have been working on AMPERGRAM for about 5 months, on nights and weekends, around my full-time job. I am so excited that the app is launched and self-sustaining, but I know that if I want this to be successful, that I have to continue to make the app better, and continue to make myself better. When I was asked so many times over the past few months, when am I going to launch, I continued to answer, “When it is perfect.”

I obviously had to launch before then since I now know it will never be perfect, but I am proud to say that I have the ambition to continue to do as much as I can; to continue to add features and functionality and to make it as close to perfect as it can be. If you have the same ambition when working on your projects, that is the best thing you can hope for.

Be sure to visit AMPERGRAM.com, download our apps and tag your letters! Report back here and tell me what you think about it. I would love to know!

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • http://twitter.com/sbeatty Shawn Beatty

    Amazing work, Phil. Great concept, and very thorough execution.