Starting off

Our initial meetings were mainly spent collecting assets like photos and preliminary copy, as well as determining the project requirements: adopting a color scheme in which orange-red was the base color (just an arbitrarily chosen color by the executive team), try to use a lot of the archived photos, and to have 1,500 copies delivered before December 17 (a two-month head start). After establishing the scope, art direction was given to me for my design and layout advice. Very rough layout ideas were outlined in a PowerPoint document, open for interpretation:

The design

The candor amongst our team made it easy to bounce ideas & thoughts amongst each other, so I would send them frequent quick PDF mockups of my progress for their feedback. The audience—devout churchgoers—probably were expecting a very conventional program, so a simple four-column grid with well-recognized typefaces would be just the ticket:

The copy ultimately was dictated by the layout of the imagery, so the first few rounds were laid out with placeholder text. It gave our content writers a good approximation of how much copy is needed. This back-&-forth allowed the content to be rewritten so it can fit comfortably within its space.

Photography

Thankfully, there was no shortage of imagery provided!

Although we had an understanding that most of these images won’t make the final draft, they wanted an attempt to include as much as possible. Initial drafts of the cover showcased a collage of big group photos, unified with the a color cast based on our chosen color scheme:

Approval process

Despite being able to finalize our work to our liking, final approval came from the church’s office in the Philippines. We’ve overcome this setback by setting expectations & insisted on a comfortable print deadline.

One of the major issues was the changing of the cover. The administration believed that it was important to focus on the iconic facade of the new chapel, which featured a set of decorative pillars at the top of the steps. This request came at the last moments before our deadline, & after many print proofs & annotated PDF copies, we’ve worked right up to our deadline, delivering the InDesign packaged files to the print shop in person for a final press check.

Success! All 1,500 copies were distributed to celebrate congregation’s momentous occasion.

This falls under both the print & web categories of my portfolio, as some of my icon sets overlap in both mediums. I’ve been grateful that I get to use my illustrations on websites, email campaigns, and even on print.

I was tasked to design this two-column landing page with a lead form. Our shareholders deemed that all the fields in the form were essential, so the height of the page was dictated by the length of the form. The left column needed to be filled out (ideally with relevant information) to attain visual balance of the page.

Copy has been written, but some graphical elements would be beneficial. We wanted to create content that would convey incentives for users to sign up, so I skimmed the copy to find bullet points, with which I would be able to create icons to accompany them.

Inspiration for these icons were found from a Google Image Search, but they were created from scratch in Photoshop & its mesh tool. I made sure that the icon set was monochromatic to match the scheme of the site, & gradients were utilized in the site’s pattern library, this gave me freedom to use 3D elements.

Similar requests would be made for print. Our flyers were once verbose pages of text, but in recent projects, we have designed our print materials to use bite-size pieces of information, effectively removing excise by explaining our processes in the least amount of steps as possible. New icons associated with the text can now fit with the new-found space.

The branding’s color scheme of orange and teal to match the current print layout, which, in turn, matches the icons. The logo is designed with rounded edges, so to echo the pattern, all the icons contain rounded corners. These were created initially in Illustrator, then dropped into InDesign for layout.

Again, an icon series for another landing that depicts a step-by-step wizard for our Biocompare vertical. It’s logo is mainly a light & dark blue, but since the logo utilizes a 3D effect, the icons were able to reflect the same presentation. These were made in Photoshop with vectorized elements & the mesh tool.

Designing a logo is an arduous task, requiring many sketches, renditions, and just coming up with different ideas in various variations. After a quick notepad sketch session, my ideas are translated onto Illustrator. I find myself sketching on Illustrator is sometimes faster than sketching on paper & colored pencils.

Here were a few variations for a branding mark for a food technology-related website that was released a while ago. The mark was to appeal to people in the food preparation industry, so a color scheme was chosen to be subdued & non-playful, as well as to relate to an industry at the grass roots level. A quick brainstorming mind mapping session showed that I had to bring silos, factories, grain & crops, and sterility into one compact image.

These illustrations were drawn to decorate a business card. Scientists are comfortable with the technical aspects of graphic representation, so I made sure that these silhouettes contain as much detail as possible while being easily recognized as tools of the lab. Images were sourced from the Internet, then were traced in Illustrator to create these vector silhouettes.

A few months ago, I did some personal research into classes that would get me dabbling in formal user experience design. A few weeks ago, I took an Interaction Design class at San Francisco State University with the knowledgeable David Hogue from Fluid to help me broaden my view in user experience. In the very short class session, I’ve learned volumes of information in developing a concept app to understand user experience.

The app idea was simple: Caltrain, the Bay Area Peninsula’s rail commute system, has a really inefficient way of submitting & reporting delays on their system. I created a smartphone app with the simple task of dialing in how late the train is at the platform. Other users with the app installed will receive a push notification if trains are reported to be exceptionally tardy, helpful for riders such as myself who have a car, but opt to take the train to work. This way, app users will be informed in advance whether or not to use the trains for the day.

Our projects progressed from building low fidelity sketches, to general wireframes, to a detailed functional specifications document:

For the final project, we simply had to sell our idea to the class. Why should they use your device/app/idea? Will it be frustrating to the user? My app minimized the amount of clicks/taps required to get the task done, as well as having all the data available from the home screen. At a glance, you can see the health of the trains, & the other essential tasks are only one tap away:

To keep the users coming back, I’ve developed a rewards system in the form of achievements a la Foursquare’s badges, Xbox Live Achievements, OpenFeint rewards et al. Users of this app are also likely to be environmentally friendly, so I’ve also invented another real-life award: for every level they increase, a tree will be planted in their name.

The class was only for six weeks at three hours each, but it has opened my mind to further education into the field. Totally fascinating stuff that can easily translate to the web.

Many dental shoppers are already quite familiar with the Dentalcompare brand, so we made sure not to deviate too far from its existing look so as to prevent any confusion in the migration. In our old logo, our dental experts intentionally settled on teal & orange: teal because it’s a dental office color (think about those bibs you wear while on the dentist chairs) & orange because it’s an actionable color. They didn’t want any imagery in the logo, so we stuck with the ‘DC’ logotype, which proved to be very useful when adapting the logo for small spaces like favicons & Twitter profiles. After many sketches, mood boarding, and mockups, the logo transformed from a generic geometric Helvetica logo to a friendlier, rounded—but still geometric—typeface called Brandon Grotesque for the final version. Huzzah!

In our wireframing sessions, we sat down with the Dentalcompare team & came up with a list of essentials for each page, then ordered them by importance. Brian, our design lead, made some simple Balsamiq wireframes to be approved by the higher-ups before fleshed out the design in Photoshop.

A new ‘hero’ carousel module will take center stage on the homepage to showcase featured products, and the rest are laid out in a modular, two-column form. Solid-colored section headers helps delineate the beginning of a module, while a container’s thin borders helps attain an airy feel. Ad placements were key, but we made sure they didn’t overpower the main aesthetic of the site (users will naturally tune them out through banner blindness anyway). With that, we made sure that users can readily differentiate the difference with the main content and the ads, even if this meant that we had to establish some thumbnail preparation guidelines for our vendors so they don’t look too ad-like.

I worked closely with our in-house development team to get my mockups realized & to fine-tune the design through some strenuous QA sessions. On May 2, 2011, the site had its long-awaited release. We were quite pleased that it performed beautifully.

Our backend tools are constantly being developed and updated, so this site—as cliché as this may sound—will never attain completion. We’re super happy with our result, though!

About the show itself: the Soulciety Empower III performance at Chabot College in Hayward, California was a fantastic professional production! The show followed a story about the changing hands of leadership of this circus troupe of dancers, singers, jugglers, rock bands. The show featured various performing artists from all parts of the community.

They did not hold back in preparation: beautiful lighting, front row seating, & excellent production values made it easy to take gorgeous shots with almost no post-production work. My kind of shoot!

The event was shot almost exclusively with my 85mm telephoto lens, which brought me close enough to the action. After a few thousand shots, I managed to whittle the selection down to a bit over a hundred. It’s the work done in front of the computer after the event that takes up most of my time. Always a labor of love!

Although Google Maps & Spreadsheet were Google products, this mashup required a third outside service to serve the maps for these first builds. This could possibly be achieved with someone with some intermediate development background, but coding is not (yet) one of my stronger suits.

The first version was born with just a few map points & an outputted Google Map served by a mashup development tool called Map Builder; perfect for Google Maps API dummies such as myself. Although this didn’t work with my Google Spreadsheet, the service did exactly what I needed: to serve my own custom map markers. Map Builder output the map in a fixed iframe window, & I just centered it on a styled page:

The map service would choke at the volume of points it needed to plot, so I had to group them into manageable numbers, splitting them into regions (US West, US Midwest, Australia, etc.). I would have avoided this if I could, as it provided a burden—one or two more clicks—for the user.

I wanted to focus mainly on the map as the main feature of this tool, so naturally, I would want the iframe to fill the whole screen. These map mashup tools provided an iframe link, but since you can’t alter its contents, it was hard to manipulate the iframe to resize.

I finally found a new service that worked directly with my existing Google Spreadsheet called Map A List. It handled the volume of map points a bit better than Map Builder, so I could finally get rid of the region select dropdown.

Eventually, I figured out how to scale that iframe to fill the browser window. I needed some space, however, to attach the branding & the necessary links, but didn’t need more than 80px of the top of the page. I’ve become much more happy with this solution, which actually serves as my backup page in case the live page goes down.

I realized that I couldn’t build this exactly to my liking by myself. I’ve reached out to a few Craiglist developers, hired them, & worked with them remotely to help me realize my visions. Development began with my developer Juan Bosco Lopez Jasso, who highly recommended (amongst other developers) to migrate all of my Spreadsheet data over to a more stable MySQL database. The project was eventually handed off to Evan Fell, who helped me wrap up the project for final release.

To celebrate the new site, I designed a new new look & logo, as well as added some of the features I’ve been wanting, namely the search function.

What’s in the future for Locale Maps? Likely, a mobile version of the site, but it depends on what the audience decides.

Artists helping other artists out! I offered my photo booth setup to some friends who need help promoting their name. I also got to add some sweet headliners to my portfolio, such as former American Idol runner-up Ramiele Malubay & online music celebrity & local artist Gabe Bondoc, photographed above.

Their clothing line, Honorable Mention, is fairly new, so they’re experimenting in different avenues to sell their product. In addition to having an online shop, they showcase their goods at local events. Last Thursday, they were became a vendor for a talent show organized by Akbayan, a Filipino culture group at San Jose State University. They needed someone to document the event, & my photo booth proved to be fruitful in events past.

I brought my usual photo booth setup: my AlienBees ringflash as the main & a B400 with an umbrella. The guys created an awesome all-over printed vinyl background for background texture goodness. Our buddy Marvin, a comedian who performed that night, as a stand-in test model:

The setup allowed pretty consistent lighting, even when we had to move it outdoors.

For those finding me through Flickr, Facebook, or through the business cards: you should hire me for your next event!

A big part of my design development was doing pro-bono work for a youth organization at church. On occasion, I’ll be requested to do some design work as a favor. In some cases, they’ll ask for me to dig out old designs to have them re-purposed & updated.

About a few weeks ago, they asked me to update an existing logo design for an annual track & field event.

The design didn’t have much meaning—just a design that contained a lot of flourishes & random elements tacked on together. They wanted to reuse the design, but I offered to update the style a bit. This was perfect, because they actually had new criteria for this year’s design:

1. The new colors were navy blue & gold (possibly inspired by my alma mater’s team colors)
2. The design had to be timeless, so they can reuse the design for the future
3. The artwork had to be printer-ready

The third request was simple: they just needed vector files & the outsourced printer took care of the rest. The other steps insist on a redesign. They liked the old design, but I streamlined the look & removed all the extraneous elements:

I wasn’t really happy with the meaningless streak behind the runner, so I made sure to scrap the idea on the next round. I was starting to experiment with Avenir, so I changed out my old Helvetica for something just as clean. I kept the star & the running silhouette:

I pushed this even further. I did some quick brainstorming & listed a few words related to both track & field:

Outside of the obvious running man, I tried to think of other track elements that could be simplified. I came across the idea of track lane lines. In this next version, I exaggerated the lines for something more stylish:

I also brainstormed ‘finish line’ & thought of ways do portray that. The idea evolved into the finish line tape. A blue figure against a glowing golden backdrop assisted in making the crossing of the finish line even more dramatic. I provided a few samples of logo containers for final approval:

I must say, the shirts came out wonderfully. Here’s to more years of using this logo!

For categorization, I place event & wedding photography in two different silos, although there may be some glaring similarities. For the sake of simplicity, event photography are photos taken at big parties, banquets, & events with no formal ceremony involved.

I’m usually hired as an event photographybecause I try to find a way to blend in the crowd so that the big camera in my hand becomes secondary to the crowd. Attention is placed away from the camera, which allows me to capture the truly candid moments.

Biocompare requested to have a printed 8.5 by 11-inch media kit on hand for the sales team to take on the road when they go to tradeshows. This media kit sells Biocompare.com’s services to the customer: promoting sales leads, provide audience info for their website visitors, advertising options, & even cool interactive web productions like viral videos or online games. All of these things has to be presented within seven pages to minimize print costs.

We spent a lot of money last year purchasing a Corbis photo for last year’s media kit cover image. Being frugally mindful this year, I repurposed a whole collection of pre-approved bio-tech photos & pieced together a collage. An easy solution, since photos have already been purchased & pre-approved by the marketing team.

This project was a continuation of a previous project: I just finished designing the online version of the media kit, so I am very comfortable with the material. The trouble was trying to concise the information down to a few pages. I sat down with Amy, our marketing director, & outlined the essential points. I took the outline, organized the material, then broke them down to three main spreads.

With all this information, I was mindful of the whitespace to prevent information overload. The higher-ups said that it’s crisp, all the information that needed to be said is on paper & it’s an elegant solution.