Design, Development, and Photography

Makeable

Details

I've played many roles at Makeable, including but not limited to designer, developer, photographer, music DJ, and even strategist. It's a reflection of my love for the internet and digital culture.

For over two and half years, I've been taking photos of Makeable for company assets. I also recently had the honor of redesigning Makeable's website and is currently on-going project. I've created a few different directions based on stakeholder requirements and this page includes some of the highlights. I am currently the only contributor to the project from wireframing to design to development. This page is a work in progress and I will update it as the project progresses from design through development. All the interspersed photos were shot by me as well.

Makeable Homepage Design

Makeable has a fun personality and much of the design created by the company is vibrant and colorful. I wanted to reflect that while achieving the business goals provided by the partners.

In this iteration, I emphasized Makeable's process—Imagine, Make, and Grow—in a grid system that breaks up the long descriptions written for each project. In the current site, the Imagine phase is not represented at all. I changed that by creating a hashtag that Makeable can use to pull in photos through Instagram's API.

During the Imagination phase, Makeable creates story maps that are creative exercise intended to discover a design direction for the project. I wanted to mimic story maps for screens since they are such an important part of Makeable's process. The site UI in this mockup is placeholder from Engine Themes.

Makeable's color palette is limited to orange, gray, and black. To add more color, I designed with the idea of themes for each page. Each page in a category like team or projects would have a different gradient and duotone theme.

About page design

These examples of team profile pages show how different themes would work. The second image shows the quick switch menu allowing users to switch between related pages in a visual way consistent with the main navigation dropdown.

About page design with quick nav
About page design with quick nav

An SEO page with illustration.

A Second Direction

In the second direction, I went with a grid-based layout because both founders expressed interest in it. They like the idea of displaying as much information about the company on the homepage as possible for SEO purposes.

Makeable Wireframes

I wireframed the this direction with my bare hands.

Makeable love page design

The color in this design direction would come directly from the brands Makeable works with. This Weather Channel example illustrates that.