Design Archives

Whether you are a developer already knowledgable in programming languages, or a tech enthusiast  looking to broaden your understanding of coding, Punchkick has put together a quick resource for everyone interested in the top five languages used for programming mobile native and web applications. For those of us that don’t speak geek, we’ve included a glossary of some commonly used terms.

1.  Java: Java is the “default” and recommended language for Android development. It’s an object-oriented* language very similar in style and syntax to C/C++, making it easy to learn when coming from those languages. A convenient feature that Java uses is automatic garbage collection, which means programmers don’t have to manually deallocate memory and makes development easier. Also, Java code is “write once, run anywhere”, so code written in Java can be run on any platform that has a supported JVM (Java Virtual Machine). This is achieved by compiling Java code into “bytecode” that gets run on the JVM regardless of the JVM’s underlying platform (Windows, Mac, Linux, Unix, etc).

Android runs a different type of virtual machine called Dalvik, which is optimized for embedded mobile devices. Dalvik is not a JVM, and it won’t run standard Java bytecode. Rather, Android code must be further converted from standard Java bytecode into Dalvik compatible .dex files. Android’s SDK* includes a tool called “dx” that performs this conversion.

2. Objective-C: Objective-C is the “default” and recommended language for iOS and, like Java, is object-oriented. There are a variety of defining features in Objective-C. Categories, for example, allow the adding of new methods to existing classes provided by Apple. Automatic Reference Counting (ARC) memory management is handled by calls inserted by the compiler as opposed to having the overhead of garbage collection. Objective-C is known for long and expressive names for methods and variables; this is called expressive syntax and allows for clearer code. Strict superset of C means that any code that can be compiled in C, can also be compiled in Objective-C, which provides great flexibility for leveraging existing libraries*.

3. C#: C# is the “default” and recommended language for Windows Phone 7/8/Surface and is a completely Object-Oriented language. If coming from a background in classical languages (C, C99), it’s very easy to pick up this language, compared to Java or Objective-C. In C#, a deep understanding of the language is not necessary in order to prototype something basic that is both functional and appealing. This language has a very strong community behind it, so information and code snippets are readily available for Windows Phone 7/8/Surface platforms. There’s also a large open source* community behind the language. C# has been around for a long time and gets a lot of TLC from Microsoft, who cares and listens to it’s developer community.

Visual Studio and Blend are excellent tools for developing and designing mobile apps. With no experience with VS, one can jump right in and start creating something. Unlike Xcode, Visual Studio has an actual emulator* rather than a simulator* for testing and running the applications (through HyperV), so one can be fairly confident that what is seen in the emulator is what is going to be experienced on actual hardware.

4. PHP: PHP is the server-side language of choice here at Punchkick. PHP isn’t device specific, since it runs on the server, and is great for developing APIs* for mobile apps. PHP is built from the ground up to support web protocols, making it an ideal option for powering the mobile web. As mobile web apps become more advanced on the client-side (using JavaScript and HTML5), they are increasingly API-driven on the server-side. PHP’s built-in support for the HTTP protocol and Zend Framework’s useful libraries, for building clean and efficient APIs, makes PHP very attractive for building out the server-side aspect of mobile web apps.

An interesting aspect of PHP is how far it’s come in the last few years. New language features are constantly being added, making it a more fun, interesting, and efficient language to develop in. Additionally, the larger community of PHP developers, particularly around Zend Framework and the Symfony framework, provide a true wealth of information and knowledge on what can be done with PHP today.

5. JavaScript: JavaScript is the “default” language of the web, and has gained much popularity within the last several years. JavaScript is commonly associated with Java however, the two languages have no relations beyond their initial structural implementations (making them look slightly similar), and are really quite different. JavaScript is a dynamically-typed prototype-based functional* scripting language with auto garbage collection – allowing it to be written in extremely unique and expressive manners that just can’t be done in a compiled language. However, the most important benefit that JavaScript has to offer is its ubiquitous runtime – though differing from device to device – which makes JavaScript the most accessible language for users and developers alike. If you have a web browser, you can run or develop a JavaScript application.

It’s no surpise that the JavaScript community is bustling with knowledgeable developers and chock-full of helpful libraries. If you encounter a roadblock while working with JavaScript, or any of its varying environments, there’s a good chance that it’s already been solved – either by a simple answer or the use of (one of the many) libraries available. JavaScript is an extremely powerful language, and as mobile devices continue to improve for their support and performance for it – the line between “native apps” and “web apps” will undoubtedly fade.

 

*Glossary of terms:
Object-Oriented Programming: Refers to a method of grouping similar functionality and using those objects in an objective way, rather than working with procedural code (one line of code after another with no grouping). By using object-oriented programming, we can group data and data access methods together easily so, if we want to use them or expand upon them, we can find them in the same spot, rather than all over the place.

SDK: A Software Development Kit is a collection of tools that developers use to help them work with a certain language, platform, or device. Examples of this would be XCode and Visual Studio. Generally, SDK’s have a built in editor for editing code and connections to work with simulators/emulators/browsers, etc.

Library: A library is a useful piece of code that operates independently of the applications it can be used in. It is a smaller component that can be used across multiple applications with no adaptation. Examples would be jQuery, ExtJS, and ASIHTTPRequest. You use this code in your application, but you never modify it.

Open Source: An open source application is an application whose source code is publicly available for reviewing, distribution, and editing – depending upon the license. It’s a way of giving back to the community, allowing others to contribute to the project, make it better, find issues, and make the application more secure.

Emulator: An emulator is a piece of software that emulates the functionality of another device. Running something on a emulator is like running something on an actual device (such as an Windows Phone). What you see on the emulator is what you’re going to see on the actual hardware device. Visual Studio uses an emulator for debugging.

Simulator: A simulator is a piece of software that simulates the functionality of another device. It’s similar to an emulator, but different in that you aren’t emulating the hardware the software is running on as well. A simulator will give you a similar experience as one you’d see on a hardware device, but there might be some major differences (running on a different CPU than the hardware would, for example). XCode uses a simulator for debugging.

API: An Application Programming Interface allows developers to interface with another application to get information that the API service provides. Google Maps is a great example of this. They offer an API that allows developers to get information about maps and directions, so instead of having to solve that problem themselves, they can ask Google Maps to solve it. An API provides information in an easily manipulable way which a developer can use to interface with their application. The difference between and API and a Library is that a library is an internal tool which the developer uses and includes in his code, whereas an API is an external tool the developer uses to get information. Google Maps, Bing Maps, WordNik, and Weather.com all provide APIs.

Functional Programming:  Functional programming is a programming paradigm that treats computation as the evaluation of math functions and avoids states and changing data. Functional programming emphasizes the use of functions to solve problems (these functions don’t change). Think lamda calculus, if you’ve ever taken it. If not, think Fibonacci sequence.

 


Great design inspires us, helps get the creative juices flowing, and simply, it’s just fun to look at or engage with. While scouring the web to find examples of different mobile navigation patterns, we came across these five collections of curated mobile elements. Inspiration abounds in these websites, showcasing some of the best designed iOS and Android apps with their UI implementations.

1. pttrns

pattrns

With a myriad of screenshots from a wide range of apps, pttrns is a great resource with over 1,200 design patterns organized into 38 categories. There is a lot to see here, so pttrns has a convenient on-mouseover zoom to easily highlight the details. pttrns focuses on iOS apps, but there’s a lot of inspiration to be had for Android and mobile web developers as well.

http://pttrns.com
https://twitter.com/pttrns

2. Inspired UI

Screen Shot 2013-03-26 at 3.23.38 PM

Inspired UI is chock-full of different iOS design patterns. The site has frequent updates and showcases some truly beautiful apps. Patterns can be viewed by one of the 27 categories, such as ‘Logins’ and ‘Splashscreens’.

http://inspired-ui.com/
https:twitter.com/inspiredUI

3. lovely ui

Screen Shot 2013-03-26 at 3.23.39 PM

The lovely ui blog is curated by interactive designer Diana Frurip. It’s regularly updated with screenshots of well executed UI elements from iPhone, iPad, and Android apps. Images are tagged to make sorting by type easier. The consistent and frequent updates make this blog shine by always keeping the content fresh and well, lovely.

http://www.lovelyui.com/
https://twitter.com/hellolovelyui

4. Mobile Patterns

Screen Shot 2013-03-26 at 3.23.47 PM

Mobile Patterns is very straightforward in its quest to present design patterns in an easy-to-digest way. The patterns can be organized by category, as well as by mobile OS. A particularly useful thing about this feature is that the OS filter remains in effect even after a category has been changed, so users can look at exclusively iOS, or exclusively Android apps.

http://www.mobile-patterns.com/
https://twitter.com/mobile_patterns

5. Androidux

Screen Shot 2013-03-26 at 3.23.55 PM

androidUX.com is the only one on this list to, you guessed it, focus solely on Android design patterns. The site speaks to both native features, such as launchers and home screens, as well as apps from the Google Play Store.

http://androidux.com/

Bonus. UI Parade

Screen Shot 2013-03-26 at 3.24.13 PM

UI Parade is not specific to mobile, but there are so many cool things showcased here we felt it needed to be mentioned. Beautiful pictures of UI elements fill each page, many of which can be downloaded free of charge.

http://www.uiparade.com/


Punchkick Interactive’s work with Harley-Davidson on the H-D1 Bike Builder: 1200 Custom Tablet App was chosen as one of the five finalists in the App Category at the 2012 Pixel Awards–and it went on to win the Pixel Awards People’s Champ Award for Apps. Kudos to everyone who helped bring this project to life!

HD-AWARD


The late Steve Jobs will forever be known for his innovative impact on technology and design. His vision was the foundation of Apple’s notable design philosophy, which has put Apple products among the world’s most recognizable.

Our friends at OnlineMBA.com shared with us this awesome video that outlines 5 Rules for Designing Like Apple:

(http://www.onlinemba.com/blog/design-like-apple)


This year Marriott won the prestigious ERE Recruiting Excellence Award for best employer brand, which speaks to its continued focus on employees.

Check out this recent article that mentions the mobile recruitment site that Marriott partnered with Punchkick to develop: http://www.ere.net/2012/12/13/marriotts-careers-pages-get-makeover-with-where-i-belong-theme/


With the ever-growing number of daily mobile users, companies are looking to attract potential talent with mobile career sites. Microsoft has proven itself as an industry leader in mobile recruiting with the launch of m.microsoft-careers.com in March, a site it teamed up with Punchkick Interactive to execute. Microsoft’s vision was to provide a compelling and highly-engaging way of discovering jobs at blazing fast speed. Both companies are excited as the metrics show dramatic increases in KPIs across the board.

Read about it here: http://www.ere.net/2012/09/20/at-microsoft-an-apply-from-your-phone-process-is-top-priority/


If you haven’t noticed yet within your apps, the login screen for Facebook Connect has updated to feel more “iPhone friendly,” and Facebook has dropped this idea of “connecting” as a result.

Additionally, there are many cues in the new UX which assume an experienced Facebook user, which seems like a shift in Facebook’s approach for their API.


Facebook Connect side-by-side

Facebook Connect side-by-side comparison


Notable changes include:

  • Removed all “Connect” language in favor of “Login”
  • Simplifies language overall, which assumes experienced user
  • Title “Connect to Facebook to “Facebook Login”
  • Removed description of what Facebook Connect is for
  • Remove visual cue that helps users understand the purpose of the screen
  • Removed Facebook terms/conditions fine print
  • Removed “Cancel” button
  • Asks for either your email or your phone number
  • Increases size of user input fields




Japanese electronics-giant Sharp recently unveiled an LCD touchscreen that displays 3D images without requiring special glasses. Sharp identified mobile phones as a potential outlet for this technology, and this week announced the first 3D camera to be used in mobile devices.

In a press release, Sharp explained how its 3D technology works:

“3D images are composed of two views taken using two cameras that simultaneously capture separate images for the right and left eyes. Consequently, a 3D camera requires peripheral circuitry to apply image processing to the two images, for example, to adjust color or to correct positioning between the images from the two cameras.”

The glasses used to view 3D images have lenses with colored filters. This creates the illusion of something popping off the screen known as parallax. The left and right eyes see separate images because of the apparent displacement of an object as seen from two different points.

The reason 3D technology did not successfully gain widespread use in the 1970s was because technologists failed to create a 3D user experience without the need for funky glasses. In order for parallax to work without glasses on mobile, viewers will hold a mobile device 12 inches (30 centimeters) in front of their face – approximately the same distance a mobile phone is typically held.

Sharp plans to ship the cameras as soon as July, and will begin mass-producing the product this year. Could we be on the verge of capturing and presenting eye-catching 3D images and video with our mobile phones? It’s an exciting prospect.

How will 3D content change our mobile experience?

Three-dimensional imaging technologies are changing the way we experience media, first in movie theaters, now in our homes, and soon in our hands. If 3D cameras become standard in our mobile devices, a wave of new content would contribute to the refinement of the technology.

Here are five ways we’d like to see 3D cameras and imaging for mobile applications:

1. Games. (Did we hear someone say Nintendo 3DS?)

2. Data charts and interactive surveys. Information architecture in 3D would be amazing.

3. Product previews for smaller items like jewelry could change the way we pop the question.

4. 3D profile pictures and video chat.

5. Navigation and maps with pop-up landmarks to guide viewers along.

What are some of your ideas for 3D imaging in mobile applications? Tell us what you’re thinking in the comments section.


We’re excited about the Mobile University event that’s being put on by the Heartland Mobile Council. The one-day Chicago event promises to address the importance of a long-term strategic approach to mobile marketing, as well as demonstrate how to integrate mobile into your business.

Here’s a description of the event by the Heartland Mobile Council:

“Mobile University 101 is the interactive one day educational event that will address the importance of a long-term strategic approach to mobile within your business. Whether you’re interested in creating a mobile marketing campaign, or understanding the various kinds of rapidly evolving mobile technologies, Mobile University is the place to get started with a mobile strategy, and begin to leverage mobility to improve your bottom line.”

There are going to be some great educational topics covered at the event, and both Ryan and I will be leading a break-out session focused on different ways to successfully integrate mobile within an overall marketing strategy.

Pre-registration tickets for the event are $99 and can be purchased here.

If you’re interested in reading the official release for the event, click here.


The Business Insider has posted an article titled How To Hire A Great iPhone Developer and it features a few quotes from our creative director, Ryan Unger. It’s a good read with some valuable insight, so feel free to give it a look.


Brand Experience

Pearson
intel
Allstate
Liquid Wrench
Qualcomm
ups
ASPCA
Motel 6

Punchkick Interactive in the news

5 Places To Look For Mobile Design Inspiration
—March 27, 2013,

Great design inspires us, helps get the creative juices flowing, and simply, it’s just fun to look at or engage with. While scouring the web to find examples of different mobile navigation patterns, we came across these five collections of curated mobile elements. Inspiration abounds in these websites, showcasing some of the best designed iOS [...]

The New Multiple-Feature Anne Geddes iPhone App is a Portal to the World of the Internationally Acclaimed Photographer
—January 7, 2010,

unchkick Interactive®, a Chicago-based mobile marketing company, today announced its collaboration with the Geddes Group (Sydney) on a free iPhone app rich in features that allow fans of globally acclaimed photographer Anne Geddes to stay in touch with each other and especially with Anne.

Mobile Strategist
—January 18, 2013,

Punchkick is hiring a digital expert to help shape the future of our clients’ mobile strategies. The ideal candidate will be able to communicate easily with anyone at Punchkick, from Account Managers to Developers to Clients, and be confident, regardless of the audience. A hunger to be on top of emerging technologies is a must. [...]