CPR Aces of Indiana Website Design

The goal of this design was to create a clean interface for nurses and medical professionals that were seeking their certification in CPR and other cardio-pulmonary techniques. The company is a small one operating in Indiana with a small budget. Using their brand colors as a base, I designed for them a logo and logotype as well. The resulting is simple and the website was coded using Drupal to provide security and extendability.

 The "above the fold" content highlights the call to action and includes a simple menu.

The "above the fold" content highlights the call to action and includes a simple menu.

 For the body of the pages I chose to use content "blocks."

For the body of the pages I chose to use content "blocks."

I utilized the Paragraphs module I create reusable content blocks that could include an image on the left or the right. This approach to content authoring has become common place in the web design space over the last few years.

 Using an atomic approach I created "cards" to display the pertinent information for the available classes.

Using an atomic approach I created "cards" to display the pertinent information for the available classes.

 I then used these as the building blocks for the list page and created the ability to highlight a class on the front page.

I then used these as the building blocks for the list page and created the ability to highlight a class on the front page.

 One of the technical requirements of the project was the ability to sign up for classes through the site.

One of the technical requirements of the project was the ability to sign up for classes through the site.


Daily CSS

One of my coworkers at Code Koalas turned me on to the daily CSS challenge a little while ago. While I haven't done them daily, I have been working on them regularly. Here are a few of the ones I've acomplished them so far.

Daily CSS #1 - Bear

See the Pen #dailycssimages #1 by Alejandro (@Cachilero) on CodePen.

Daily CSS #2 - Elephant

See the Pen Daily CSS Images #2 by Alejandro (@Cachilero) on CodePen.

Daily CSS #3 - Beaver

See the Pen Daily CSS Images #3 by Alejandro (@Cachilero) on CodePen.


Broadway Coffee Re-Design

This was a small re-design project that spanned a couple of different classes and subjects. In the first class I took the website of a local coffee shop, Broadway Roasting Company, and did an analysis of the content from the point of view of a re-design. For the second class the goal was to re-design the site.  The design was inspired by the colors and feel of coffee.

The company has two locations that focus on different aspects, one on serving coffee, the other on roasting the beans. I chose a split hero layout where each image clicks through to the location pages.

On the café page I highlighted the feel of the café with a large banner of photographs of the location. Since this would the primary location that customers would visit, I placed a large call-to-action block to showcase events and promotions.


Ambiance Application

This was a project developing a small application written in JavaScript and HTML. The goal was for it to be web-based, but capable of running on small devices. The application itself is just a simple HTML5 audio player that has white noise and nature sounds.