Blog

by Christopher Jones
December 3, 2016

What is Android Architecture? Let’s talk software but take a break from code. Many of the components in this model grant developers the super-human powers to build some clever and innovative applications on a wide variety of devices, but, what is Android architecture? Application Framework The top layer of Android architecture is called the application framework. This is the … Continue reading “What is Android Architecture?”

“Ahhhhh, it’s time for C++,  and you know what that means, A glass of wine, your favorite easy chair,  and of course Microsoft Visual Studio open in your Windows operating system.” -not the intro to “Smash” by the Offspring What is the difference between a “deep copy” and a “shallow copy” in C++? Is one better … Continue reading “(C++) Objects: Deep copy vs. Shallow Copy”

by Christopher Jones
November 28, 2016

So, we all start things. Blogs have been hit or miss for me. There are some days where I have all of the words for all the the things and other days, not so much. Starting a blog sets up an expectation. There is now pressure added to my life. I recently heard a podcast … Continue reading “Hello world!”

About me

I am a Software Developer that specializes in Mobile Development and Web Applications. I have a special love of Java and an unquenchable thirst for software design patterns. Also, I believe in writing good, clean code that gets the job done with minimal friction. Being a creative, I am also passionate for effective graphic design and innovative UI/UX. From end-users to team members, written and verbal, I believe being able to effectively communicate is just as vital as any technical skill.

For ten years I performed in punk rock bands and toured as a musician and booking agent. I saw the world and met fascinating people. Then, I owned my own independent bookstore in downtown New London, Connecticut, for two years. I learned the value of sharing and collaboration to accomplish something good. I also learned when to keeping pushing myself and how to accept failure and dust myself off.

In 2014, I decided to fulfill my geek fantasy of becoming a software engineer and get my degree. In addition to computer science, I studied Bioinformatics because I wanted to understand DNA, the coding language of life.

Let's build something. Let's disrupt the world. And, don't forget to be awesome.

PHP/MySQL(LAMP STACK)/Wordpress
60
Html/CSS/Javascript/jQuery/Bootstrap
70
Java/Android Development
95
Adobe Photoshop/Illustrator/InDesign
90
Database Development/Bash/Shell/AWS
70
Christopher Jones
Christopher Jones
Christopher Jones

Services

Website Development

Content Management Systems. Blogs. Social Networks.

Mobile Development

Android. iOS.

UX/UI Design

User-Centered Design. Interactive Design. Accessibility. Storyboards. Wireframes. Usability Testing.

Software Engineering

Framework integration. Prototyping. Build Automation. Test-Driven. RESTful API's.

Database Design

Database Development. Data Management. RESTful API's.

Digital Graphic Design

Design with purpose. Typography. Layout. Publications. Advertisements. Logo design.


Have a project idea? Let's get in touch.

Contact me

Testimonials

My work

Some of my projects.

×

 

The Hempsteadys

Band Website

www.thehempsteadys.com

The Hempsteadys are a reggae/ska/party band from New London, Connecticut. With a new album being released in November of 2015, their website needed an update. I approached them to do the project. The website was to be designed from their album artwork.

Technologies Used:

Languages: HTML, CSS, Javascript, PHP, and MySQL
Image Manipulation: Adobe Photoshop CC, Adobe Illustrator CC
Framework(s): Bootstrap
Icons: font-awesome
Front-end libraries: jQuery, Bootstrap, Owl Carousel, Slit-Slider, animate.js
Development Environment: JetBrains Webstorm, Xampp, Apache Server, GoDaddy Web Services
Testing: Android, iOS, iPad Air, Chrome, Firefox, Opera, Vivaldi, Safari, and Explorer

The Graphic Design Challenge


Being a musician myself, this was the type of project I was dying to get my hands on! My first impression of the scope of this project was that the band's sense of style needed to be accurately expressed. I found their new album artwork so well done, I wanted to carry the theme into their website. But I wanted the design to be mindful of the other cultural undertones presented by the band. With what little graphic design material existed for the band, I knew I would be doing most of the work in straight html/css and image manipulation in Adobe.

Research


What are other band websites doing for their presentations? What can I learn from their design successes and their design mistakes?

I conducted research on artwork design in music genres. I discovered that American ska music traditionally has a cartoonish, colorful approach to design. Reggae, on the other hand, is much more serious with elements of targeted political folk-art. Punk design follows a lower class street-artist DIY approach to style, with hints of socially rebellious behavior.

I studied other bandsites and weighed the pros and cons of their design. There were several briliant design concepts, but I was quick to notice obvious design flaws. A few examples of this were chaotic layouts, confusing navigation, inconsistent theme elements, failure to incorporate 3rd party widgets in a pleasing manner, and overbearing social media feeds. These were mistakes that I did not want to make.

With so many bandsite formulas out there, how can we make something fresh that while remaining true to a form that music fans understand? With so many color-by-number music website templates dictating how we experience music, how can I, as a designer, make a "DOT COM" home an experience that feels authentic?


A Dark Theme


Knowing the site would contain a plethora photographs and social media links, colorful on their own, I decided to go minimal on coloring the basic elements of the site. Navigation could pop out, but, otherwise, the rest of the theme must remain in the background to let the content do the talking. Music fans would most likely be viewing the website in dark conditions and so I chose a dark theme. It was definitely the right choice because it came out better than I imagined!




Background Considerations


In considering user experience, I looked at use-cases; the website would most likely be viewed at night on a mobile device. It should not blind the user. I chose a repeating low-res image of a dark cinder block wall with the New London high school sports team logo spraypainted on. The background images that the sections parallax over we given a crimson filter, a red shade that complemented the apocalyptic horror theme as presented on the album art. These parallax images show the New London skyline and photographs of band-members having fun. The third image of the band-members laughing in the main slider still makes me smile everytime!


Font


I chose a main text font that matched the sans-serif font found inside of their CD artwork. Using Adobe Color, I decided to use the orange-yellow color which was the average of the RGB values on the album cover. Normally a serif font is a major no-no in the design world for small text but it complements the album artwork font. The biography comes across as clean and readable, especially in the dark on mobile.


Modern, 2015 Design


For the Hempsteadys site to feel professional and relevant, I followed some web design concepts that are popular in 2015, although with modifications.

The "hero image" rules the main page. I broke the mold by having a logo and animated arrow instead of the usual helvetica greetings that appear on many popular sites.

The entire site is set into a responsive layout, columns which contract into rows when the screen is a certain size. Instead of mobile detection, I used Bootstrap, which follows screen-size detection and is more reliable.

A parallax effect is applied to break up the background. The website appears to scroll in three dimensional space in front of the background images it passes over.

For the mobile display, I decided upon the typical "hamburger" mobile menu and the standard "bring to top" button because both of these elements are popular among mobile applications, making navigation familiar and simple to users. I did not want to overstylize the site at the risk of losing navigation ease.





Special Effects


The pulsing street sign on the loading page tells users they have arrived at Hempstead Street.

The large hero image when viewed on a full screen becomes a carousel with a dramatic chopping transition animation between images.

The smooth page scroll is the most dominant and yet, subtle animation. It gives the scroll a sluggishness at first and then a feeling of excitement as it speeds up.

When a navigation selection it is clicked the acceleration of the page scroll gradually picks up speed and zips to its destination.

The fadeIn property of certain page elements make them seem to catch up to the scroll as the user scrolls down. This is done on all of the photographs, headings and text. It gives the page an organic feel when things come to life as the user meets them.

Visit website

Garbini Education and Career Consulting, LLC

Portfolio Website

www.garbinied.com

Scott Garbini is an Education & Career Counselor, local Board of Education member, and a community advocate for New London Connecticut.

Technologies Used:

Languages: HTML, CSS, Javascript, PHP
Image Manipulation: Adobe Photoshop CC, Adobe Illustrator CC
Framework(s): Bootstrap
Icons: font-awesome
Front-end libraries: jQuery, Bootstrap, Owl Carousel, Slit-Slider, animate.js
Development Environment: JetBrains Webstorm, Xampp, Apache Server, GoDaddy Web Services
Testing: Android, iOS, iPad Air, Chrome, Firefox, Opera, Vivaldi, Safari, and Explorer

A Portfolio


Scott was looking for a freshener-up from his previous site design, made by a CMS called blogger. After a long interview session I came to learn Scott's motivations and preferences in terms of design. I went home and studied his competition and other education advisors. Upon getting a general idea of what is important to the industry, as well as learning trends, I mapped out the requirements for the site.

Design Work

The raw HTML/CSS was mapped out first, designed, and then templated into PHP files. I did extensive Adobe Photoshop work including optimizing the photos for lower bandwidth, making some promotional JPEGS for Scott to share in his social networks, and touching up some poor quality photographs. Adobe Illustrator was used in designing Scott a new logo in vector format. I went through several iterations of color scheme befere settling on the blue/turquoise with orange highlights. Scott's favorite color was seafoam green, which itself is a gradient between blue and turquoise. Finally, subtle special effects were added. Animate.js is my favorite library!

Design Concepts

Hero header image
Sticky menu that sticks to top upon scroll
Menu animations that track user as they navigate through page
Contrasting blue/orange colorful header names
Parallax images of schools/education themes break up segments of the website
Swipable image gallery that zooms in on touch
Screen responsive site
Once finished with design work, I brought the template into Wordpress. At first I wanted each area of text and image gallery to be a custom post-type, but this seemed to clutter the WP back-end. The work was too involving to justify custom post types for posts that would only exist once. So, each area of text and images were converted into customizable sections based on database ID value.

Jason Morris

Android Application

My first Android project! I was excited to work on this concept: A political campaign mobile application. Jason's mobile app needed to be accessible and understandable by all demographics of voters. The obvious benefit of not being constrained inside of a browser was that I could include more features than would be on a standard campaign website.

While we did not ship this app to the store in time, Jason's delight in the final product made the whole process worthwhile.

Technologies Used:

OS: Android Kitkat
Languages: XML, Java
Image Manipulation: Adobe Photoshop CC, Adobe Illustrator CC
Framework(s): Android SDK
API: Twitter API, Youtube API
Development Environment: Android Studio
Testing: Android LG G3, Android Nexus 5 Emulator

Research Time

The application needed to showcase the candidate to potential voters as well as keep his followers up-to-date on his campaign. Since there was a lack of campaign mobile-apps, I perused through political campaign websites. One thing they had in common was solid branding. The designs were slick, the messages were clear, and the focus remained on the candidate. I wanted the app to have these same qualities.

Logo Design

First, Jason needed a better logo. Adobe Illustrator helped me morph a version of his campaign lawn sign logo into a vector image, add some 3d effects, and incorporate more color.

Menu Design

The first menu prototype was a sandwich menu in the top right that pulled out a left navigation drawer. When it became obvious that the menu options could be narrowed down to just four, I decided on a tabbing navigation theme. Not only would this tabbing eliminate the extra step a user takes to get to the navigation, but it would make swiping left and right the dominant navigation gesture. On a mobile device, the simpler is the better. It came out really nice!

Material Design

For a color scheme, I decided to go with Google's Material Design specs, which call for focusing on a single primary color with lighter and darker counterparts, and then having an accent color. Jason was a member of the Green Party which was convenient from a design perspective because Green and Gold are the colors the New London High School banner. Green became the dominant color. Gold became the accent.

For a font, Google's Material Design suggested Roboto and Noto-serif. A grey font on a white background provided less contrast and was easy on the eyes to read. Keeping in mind that the demographic base may be older, I kept the font large at 14pt.

Modern, Catchy Design

The top menu sticks on the page, and the page scrolls underneath. This is so a user can never be more than once click away. It just works! There is an animated golden navigation bar that follows the user as the user swipes left and right, providing an ergonomic experience. The layout is responsive to all Android screen and tablet sizes as well as compatible as far back as Android Jellybean, meaning 90% of devices support it. The hero image, or large image that the user is presented with, is a common trend among 2015 app design. I transposed Jason's images over a blurred background for a focus effect. It really draws the viewer in. The links within the app open a special, in-app browser instead of bringing the user outside of the app.

First Impressions of Android

Reflecting back on when I built this project, mid-2015, I learned quite a bit about the Android SDK and libraries. Similar to jQuery or HTML, Android has functions that programmatically display elements as well as markup that displays elements. There is a choice between using Java and XML to achieve the same ends. As a designer looking for versatility and MVC seperation, I chose the XML route.

Another lesson learned was how Android handles page views with entities called activities. Portions of activities are called fragments. Using these affected the Android Studio IDE view-mode, so I had to run the app to see each change.

Finally, Google Material Design was very fun to learn and play with!

Contact me

cjcjrun@gmail.com