header-bg-v3.jpg
process-bg-v2.jpg
tools-bg-v2.jpg
contact-bg-v2.jpg
header-bg-v3.jpg

Hi there


I can make coffee quickly with a packs of instant coffee

SCROLL DOWN

Hi there


I can make coffee quickly with a packs of instant coffee

Featured Work


Coglab

SCROLL DOWN

Featured Work


Coglab

 
 

Coglab hired me to redesign their site from scratch. The design process was pretty straight forward. The previous site already had content so some of the wireframes were using recycled copy and showed a new flow of the proposed site. I liked how the project manager gave me complete freedom with regards to aesthetics, which resulted to minimal iterations.

 

Coglab is one of the first projects that didn't require me to code - they have talented developers - and got me focused on wireframes and mockups. I really enjoyed working with them and they were even cool enough to stick my face on the front page as well.

Check out Coglab's site.

 
 

My involvement

Wireframing

Made all wireframes per page (per device - phone, tablet and desktop).

Mockup

Created flat compositions from approved wireframes.

Style guides

Created style guide for front-end devs to follow.

 
 

Other Works


Some sites I'm privileged to be a part of

SCROLL DOWN

Other Works


Some sites I'm privileged to be a part of

 
 
IMG_5351.jpg

Lucky Brand Jeans

Authored styles for new elements developers added on the site.

 
 
 
fekkai.jpg

Fekkai

Involve with transitioning the site from PHP to Demandware (an ecommerce platform) while maintaining styles and functionality.

 
 
 
IMG_4064.jpg

SK II

Assigned with coding the styles as part of redesigning different parts of the site (e.g. the shopping grid).

 
 

and much more ...

 
 
process-bg-v2.jpg

The Process


Here's how our story can go

SCROLL DOWN

The Process


Here's how our story can go

Step 1


The Introduction

SCROLL DOWN

Step 1


The Introduction

 
 

Knowing who I work with is probably the most crucial aspect of our working relationship, it may even take a week down of working together to really get to know if we can really work together in the long run. But nevertheless, I’ll put everything you’d like to know about me, regardless if you like what you hear or not.

 

Step 2


The Collaboration

SCROLL DOWN

Step 2


The Collaboration

 
2.1-v2.jpg
 

Identifying the goal

You and I will be discussing what we want out of the project. Introduce your company or product to me and tell me more about your users. You give me every information you think I need to help me accomplish the job - I’ll be in note taking mode. I’ll be asking questions or give out suggestions along the way. Let’s learn from each other.

 
 
 
2.2.1.jpeg

Wire framing and prototyping

This is my visual representation of what I took from our discussions. Disregarding all our preferences in aesthetics and focusing more on how it works is the key. By covering of as much scenarios (from on-boarding a user to logging-in to error states, layout responsiveness, etc.) as we can save time when devs start cracking at the code. You may not like to see plain boxes on the screens - don’t worry you’re not the only one - but bear with me here and lets not shortcut this process.

 
 
mockup.jpg
typography.jpg
elements.jpg

Applying the skin

This is where I greatly consider your preferences in aesthetics. You’ll be presented with flattened mockups of the general screens sizes - for phones, tablets, and desktop versions. Along with the mockups are the style guides and other assets used to create the mockups (eg. icons, fonts, and images) for your front-end devs.

 

Step 3


The Wrap-up

SCROLL DOWN

Step 3


The Wrap-up

 
 

Once all revisions are done. All assets purchased and source files - starting from my notes, wireframes, prototypes, mockups - will be sent to you. The project files will be deleted from my machine.

 
 
wrap-up-compiling.jpg

Compiling

Preparing all project files we've used for sending. These files will be organized in the best way I can.

wrap-up-receiving.jpg

Receiving

You'll get to receive the files either via a link from Dropbox, Google Drive, or email.

wrap-up-clean-up.jpg

Cleaning up

I'll be deleting files once you have received them. I want a clean machine for the next project.

 

communication


How I prefer to keep in touch the whole time

SCROLL DOWN

communication


How I prefer to keep in touch the whole time

 
 

As a virtual worker (as some might call it), we need to keep in constant communication just incase I might have an urgent question that’s crucial to move forward or some followups on approvals.

 
 

You and your team probably have a default chat app, text is fine but sometimes it just doesn’t cut it for me. Sometimes it is faster to have a quick skype call and get all the questions answered, in other times sharing screens to indicate something is faster as well rather than exchanging messages with screenshots.

  • I usually use Skype for calls. I find skype really useful if you have something to show me from your screen as I record these calls and review them after the call incase I've missed something.
  • Facetime, Hangouts, can work well too as long as we can talk.
 
 
tools-bg-v2.jpg

What I use


For each task there is a tool

SCROLL DOWN

What I use


For each task there is a tool

For Wireframing and Prototyping


SCROLL DOWN

For Wireframing and Prototyping


 
 
OmniGraffle-icon.png

Omnigraffle

For my wireframing needs, this is my goto app to easily present - formally - what I've doodled in a plain piece of paper.

 
AXURE-1 (dragged).png

Axure

I use Axure for complex UIs that have a lot of states and steps. It saves a lot of time explaining it on text for wireframes.

 
 

Other apps I’m still fiddling with, figuring out which is better for me on a personal level.

 
 

For Mockup Creation


SCROLL DOWN

For Mockup Creation


 
 
 
app-1 (dragged).png
 

Sketch

Switched after using Photoshop and Illustrator for more than 5 years. I also find this app lot faster in creating style guides as well.

 
 

I still have these apps to work with designers that still uses Adobe.

 
 
 

For Web Development


SCROLL DOWN

For Web Development


 
coda-icon.png

Coda

My text editor of choice and also uploads saved files automatically. (I know, Sublime Text is faster but ) damn this app looks good!

tower-icon.png

Tower

The best looking git app out there. I can use the terminal for git if and only if I'm sitting next to a developer incase I merge the wrong branches.

codekit-icon.png

Codekit

This is my Jarvis for coding. It compiles my LESS files, auto refreshes my browser and crunches images for smaller file size.

 
 

I can author code of a webpage that is semantic and responsive. Knowing how to code helped me to consider how a developer might translate my mockups that is semantic and responsive with ease. With that said, my focus on creating wireframes and mockups gets more interesting as web technologies continue to advance forward.

 
 
contact-bg-v2.jpg

Send me a message


Do you think I'm a good fit for your team?

SCROLL DOWN

Send me a message


Do you think I'm a good fit for your team?

Things to know before contacting me


SCROLL DOWN

Things to know before contacting me


 
 
  • I currently reside in the Philippines
  • You need a designer not a developer
  • You believe we can both learn and grow from each other