Public Foods was designed to be as simple and easy to use as possible. Many of the cooking websites around the web are very cluttered and feel quite claustrophobic. I wanted Public Foods to have a very minimal design with a lot of whitespace.

I used Sketch to map out each of the three main sections of the site, including the indexes, the recipe upload form, and the recipe layout.

The site was made using Wordpress, Advanced Custom Fields and a custom built theme. The landing page of the site contains of a series of custom post queries. Once more content has been added to the site, I'm looking forward to adding more fun queries to the front page.

It was important to make this site look as good as possible on small screens so that users have access to their recipes anywhere; for example, at the store. The site makes heavy use of the new CSS Grid Layout to achieve this.

I also paid special attention to the form's usability on mobile so that users can easily use their phone's camera while filling out the form. Recipe's can also be toggled as private or public from the recipe editor screen. This allows users to create drafts without having their changes go live immediately.

• The site should prominently display an artist statement.
• The site should have several categories of artwork available, including a “recent” category.
• New artwork should be easy to add.
• The site should have be an easily updatable pricing table.
• The site should have an easily updatable artist quote section.
• There should be a way to contact the artist.

With these requirements I created two rough design mockups for discussion.

I requested a sample of artwork, and was supplied with about four or five images for each of the five main categories: human, animal, botanical, mechanical, and other. I really wanted the artwork to be the main focus of the site which led me toward a more minimal design. 

By having no restrictions on the artwork’s aspect ratio, some very fun grids start to emerge. The unpredictability and asymmetry of these grids helped inform the rest of the design. Another key design choice was lack of page refreshes. I wanted the interaction and browsability of the artwork to be as seamless and quick as possible.

Based on the site’s requirements I was led to the idea that the site would function very much like a blog, with each new artwork being a new post. The seamless nature of the site could be done one of two main ways. The first way would require loading everything on the site when a user first encounters the front page, and then simply hiding every category of posts that is not selected. The second method requires a bit of AJAX to load the selected categories of posts directly into the site’s main page. If the site were mainly text, loading everything on an initial page visit would probably be fine, but this site was a mainly image based website so I decided an AJAX solution would feel more performant. 

Almost everything on the site, including all copy and background images can be easily modified via simple and intuitive custom fields implemented on the dashboard of the site.

The initial research phase included meetings and conversation about the functional requirements of the site. To gauge the client’s tastes and vision, I found it helpful to compile a list of similar sites on the web to use as talking points. This provided a good foundation for the design work moving forward. From our initial meetings we established a few basic guidelines: The web portal should have a clean uncluttered front page. The portal should also be easily navigable through multiple tiers of information and should provide good images and graphics throughout for easy user readability. 

At this point it was time to start sketching out some basic wireframes for the site. Wireframes were invaluable for creating talking points with the team, as well as keeping the designs focused and deliberate moving forward.

Once the basic requirements for the site had been nailed down, the next task was to consider CMS options. The CloudTurbine team was already familiar with Wordpress which gave it a large leg up in the decision making process, but they were open to investigating Drupal or Joomla as possible alternatives. After comparing the pros and cons of each CMS we settled with a Wordpress installation on an Amazon web server. 

I set up an AWS EC2 LAMP server with Wordpress to be used as a development site. This allows myself and the team to test ideas and browse the Wordpress plugins, themes, frameworks, builders etc. risk free. The development site also provides repository for additional content or content modifications before going live.

One of the goals of the site was to develop a system to aid with third party developer organization. Our solution we call "app-kits". App-kits are development projects aimed at advancing CloudTurbine technology by engaging the open source community. Each app-kit has a project page which outlines the project's goals and provides links to sample code and support resources. Registered CT members can join app-kit teams, post updates and participate in development and testing. 

The first goal was to create an app-kit template that the client could easily fill out from the dashboard of the site as CloudTurbine development progresses. The second goal for app-kits was to allow registered users to post development updates from the front-end of the site. To accomplish this, I used the popular, Advanced Custom Fields plugin to create a front-end form that on the app-kit php template.

I provided the CloudTurbine team with design mockups for the CTstream UI.

CTstream is a CloudTurbine source application currently in development. CTstream provides an easy way to capture screenshots, webcams, text, and audio for streaming with CloudTurbine.