This being my first attempt at using Xcode and the iOS authoring environment, I was a little overwhelmed. The print version of the creative arts magazine was initially designed in Adobe InDesign, and so my first thought was to go the Adobe route and publish the app directly from InDesign. Unfortunately, I only had CS4, and the thought of having to acquire the latest version of InDesign and the Digital Publishing Suite seemed too complicated and costly.

After doing a bit of research, I came across Laker, which is as it states on the home page, “a compendium of files, frameworks, styles and tips for designing digital publications in HTML5.” Laker was created out of a thesis project by Florian Franke. From the download option, you are provided with a set of HTML, CSS and JavaScript templates from which to modify and build your iPad app. But it’s not just for iPad app building, it’s for the iPhone, and because it was built with web standards in mind, it works on the desktop browser–it’s responsive.

So far, I’ve had a fairly painless experience modifying within the Laker compendium to build my iPad app. And, I’m becoming more comfortable using Xcode as I continuously build and test what I’m making. If you are a web designer with front-end dev skills and you haven’t yet ventured into the iPad app-creation world, I recommend Laker as a good starting point–it will be familiar to you.

Another example is DeckPub, created by Gesture Theory. I think we’ll be seeing more and more iPad/tablet app-creation tools becoming available that are built with web standards in mind.

Back to top

NoteWagon is a student note marketplace originating from Canada with plans of expanding product offerings and services to the US student market. As a part of a UI/UX design challenge, I was given the task of sketching/wireframing a multi-document upload feature from specifications that were provided. I took the additional step of re-thinking the existing brand identity. The logo above is the result of my logo redesign.

Details above display initial thumbnail sketches of logo concepts and of a new marketing and messaging approach to the home page of the website. The existing brand identity and overall messaging seemed to lack explanation and purpose.

According to the multi-doc upload specs, the existing functionality only allows for a single file upload followed by metadata input. Students should have the ability to drag and drop files into the browser window as multiple files at once or through several drag and drop operations.

In my first wireframe above, students have two ways in which to upload multiple files: Drag and drop or by pressing “Select Files”. Alternatively, if a user experiences issues related to multiple file uploading, they will have a fall-back option of using the default browser uploader.

In the wireframe above: As the student group-selects files from their desktop and drags them to the target upload screen, the target border will change to a darker or contrasting color value to visually guide the drag-and-drop maneuver.

As detailed in the spec, the user should be notified and kept up to date about what files are in the queue.

In the wireframe above, a congratulatory message will appear immediately above the file name to indicate a successful upload. This message will only remain on the screen for a few moments and then fade away. As files begin to upload, a progress bar will display each file’s upload progress.

From the spec: Unsupported filetypes should be filtered out.

In the wireframe above, I proposed having an error message appear whenever an unsupported filetype is uploaded. Additionally, the message will prompt the user to upload a recommended filetype. The unsupported filetype cannot be edited, only removed from the queue.

Upon clicking “Edit Details and Save File”, the file box will expand to reveal the metadata input areas. File name extension, type and date are captured upon upload completion. The entire purpose of uploading notes is to sell them. This places a great deal of importance on how to price a note. Under the price input field the user is prompted to access the price guidelines.

From the spec: The description field allows Google+ like in-line hashtags. The user needs to be show how to do it, and notified that the feature exists without being invasive.

In response to this spec, I placed a brief and succinct explanation regarding hashtags and how to generate them directly underneath the description box.

From the spec: Metadata that is not filled in correctly or is incomplete will result in files remaining as drafts and not public.

In this wireframe, after a file has been uploaded and metadata has been populated, the message will change from (Draft) to (Published). Additionally, the published file bar has a slight color change to distinguish it from the other files.

Back to top

I developed a new visual identity for Coshx Labs, a web application development company. Before arriving at the above solutions, I needed to gain a better understanding of the meaning behind the name. Cosh x is a reference to a hyperbolic cosine function used in math. The brackets have a similar reference and also relate to programming.

The team at Coshx Labs is mainly composed of engineers. The perception I gained from learning about this company is that they are highly skilled and intelligent practitioners who solve complex problems for tech startup companies. The “lab” reference made me think of a science lab, working and experimenting in a controlled environment.

From one of the logos I developed a website concept. The ideation phase always begins with sketching. Sketching a wireframe helped me to determine where elements of the new identity would be positioned in the page.

Naturally progressing from the wireframe comes the pixel-rendered web page. Most of the content came from the existing Coshx website. I added the headline with the science reference.

The final concept I enjoyed coming up with was the “Droppin’ Science on Web Apps” shirt design. I’ve been a long time Beastie Boys fan, and so the “droppin’ science” phrase came naturally.

Back to top

Deig Bros. Construction needed a new logo. The company had been in existence for over 50 years, and the new identity needed to reflect their legacy. As with any design project, the process begins with research. Since I usually enter a project with little to no knowledge about the client, I need to learn all I can about what they do and who they are.

After doing research about Deig Bros, looking at competitors, and gathering information from the client meeting, some key information needed to emerge in each of the logo concepts:

• Deig has over 50 years of experience, dating back to 1954.
• Deig has a workforce of over 200.
• Deig wants to be recognized as being the leader in the construction industry by maintaining high ethics, and being honest and friendly in their dealings with clients.

After organizing my notes and thoughts about who Deig Bros. is, I developed a series of thumbnail sketches. This approach helped me to rough-out some visual concepts and work toward a solution.

Each of the icons I designed contain meaning and symbolism relating to strength, architectural structure, a solid foundation, and mechanical skills. The existing Deig logo used a lowercase “db”, which creates an interesting dynamic which had not previously been explored. The “db” serves as not only the initials of the company name, but also can become literal structure or building that relates to Deig’s specialty.

Color selection was based from psychological meaning. Orange colors symbolize energy, warmth, success and creativity. Blue symbolizes depth, stability, trust, loyalty, and confidence. Other colors and concepts were also presented to the client. View them on Dribbble →

The logo concepts were placed on items where the logo would be used, such as this construction hat. This also helps the client to visualize how the new identity will be put into use.

The logo concepts were also presented on vehicles similar to the fleet maintained by the client.

Back to top

I was approached by Linda Lister to create a design for her book, “Yoga For Singers”. The book design also turned into an ePub design and a website for promoting the book.

I designed the full-color cover and the interior of the book, which totals 164 pages in black and white print.

Photography was shot by Maryann Bates.

Linda needed an ePub version that would be distributed through the Apple iBookstore. Before creating the ePub, I knew that simply using a PDF generated from the print-version of the book would not format correctly and would compromise the usability of the book on the iPad. Instead, I hand coded the ePub to ensure it would format correctly and produce a pleasant reading experience.

To promote Linda’s book, I created a custom-designed website using HTML, CSS and jQuery.

View the website →

Back to top

I was approached by Volunteer Dubois County to create a website to promote their services. The client also needed a volunteer network application to serve the needs of the volunteers in the region. After researching a custom solution and various 3rd-party vendor solutions, it became clear that a particular 3rd-party vendor was the best option. It also turns out that the best tool available saved them from having to spend more money on me creating a custom solution.

In addition to the website, the client also needed a web forum where volunteers could ask questions and communicate with each other. For the website I used WordPress as the content management solution, and used BBPress as the forum solution. For both platforms I created a custom-designed theme using HTML and CSS. Visit the website →

Back to top

I was approached by Computers Plus to redesign their logo. The old logo (pictured above) made use of the atomic symbol in the logo name, but many customers were confused by this image, especially as the logo was scaled down to a smaller size. Some thought the image resembled a flower more than an atomic symbol. The new logo needed to have a clearer meaning and connection with the name.

In the new logo above, I improved the atomic symbol by using thinner strokes and elongating the top right arc. By elongating the arc, the symbol becomes more active and energetic. A balance is achieved between the symbol and the “PLUS”, creating a unified logo.

I added a badge-like element to the logo, that has an elongated top left arc, creating a balance between it and the style of the atomic symbol. Elongating these shapes gives movement and creates visual interest.

Immediately after redesigning the logo it became apparent how the new identity could be applied to promotional materials. Above is a business card concept, where the card literally becomes the new logo, by taking the shape of the badge.

Additionally, the new logo badge became adaptable to advertising materials, such as the direct mail piece above. The badge itself became a container for displaying messages, and evolved into a speech box.

The new brand identity was applied to vehicle graphics. The slight angle at which the elements are set, adds to the idea of movement and energy.

These informational messages pictured above are used as in-store signage and continue the use of the logo badge and speech box. Additionally, different color combinations are used to signify different services that the store can offer.

In the website concept pictured above, all of the new identity elements are brought together.

Back to top

In 2008, I was approached by One Couture to develop graphics for t-shirts. Since that time, we have continued to work together in developing graphics and visual identity campaigns for various seasonal clothing lines. Additionally, I design and maintain the ever-changing website to correspond with seasonal campaign changes.

The website makes use of high impact graphics, interactive features and videos.

View the website →

Back to top

Veins of Life is an MFA thesis project completed in 2009 at Indiana University. The project began out of an interest with how people consume food in the U.S. I conducted research on the topic for several months. View the bibliography listing → In the end, I created three motion design pieces, one accordian-fold booklet, one interactive desktop application, and four wall displays of information graphics.

In 2009, I received the highest category honor from the international Adobe Design Achievement Awards for the three motion graphic design videos I created.

View the Veins of Life project website →

Back to top

As a freelance web and graphic designer, I was approached by Nance Galleries to redesign their existing logo. The silhouetted figure represented great importance to the founding of the gallery, and needed to be maintained in the newer version without losing significance. The new logo represents a modern and progressive identity, and maintains relevance to the origins of the company. Below is the old logo.

Back to top