I’ve gone freelance. Time for new challenges, time for a new site. I’m ready for a fresh start.

Here’s an under-the-hood view of the tools and techniques used during the design and development of this site.

Design

“Designing for yourself is worse than representing a client; it can be like having an identity crisis.”

Okay, maybe that  quote from AIGA is a bit overstated, but designing for yourself is hard work. Probably harder than client work.

That being said, in retrospect the whole process has been incredibly rewarding, and I’m quite happy with the outcome. A clean, responsive site with a strong focus on content, typography and layout.

The site design was created in Antetype, my favorite tool for UI design and prototyping. If you haven’t tested it yet I encourage you to download the demo and try it out for yourself. Sketch was used for the favicon and touch icons design.

All the exported image assets were optimized with either ImageAlpha and ImageOptim for PNGs or Kraken.io and jPEGmini for JPEGs.

Development

The responsive front-end is coded in HTML5 and CSS3 following OOCSS/BEM principles, and is based on HTML5 Boilerplate and the Bootstrap framework. Jade was used for HTML templating and LESS for CSS preprocessing.

Minimal JavaScript and jQuery is being used for simple interactions. Some other JavaScript libraries are included for solving cross-browser issues: Modernizr, NWMatcher, Selectivizr, Respond.js.

It makes use of the Source Sans Pro and Merriweather fonts, served up by Google, and Linecons Free by Designmodo.

The back-end is built on WordPress plus a few plugins, mostly for caching, security and SEO.

I used the following development and testing tools:

• PhpStorm and Sublime Text for code editing.
• MAMP Pro as the local server, exposed to the Internet via ngrok tunneling software.
• LiveReload for automated front-end compilation and browser refreshing.
• Chrome DevTools, Viewport (iPad app), VirtualBox, and BrowserStack for front-end testing and debugging.

Finally, the site is proudly hosted by WebFaction, with CloudFlare as the CDN and extra security layer.

Let’s work together

I am accepting new projects starting the last week of May 2014. Have a look at my work and services, or learn more about me. If you think I may be able to help with your project, then don’t hesitate to contact me.

My old Tumblr-based site will still be available at janogarcia.tumblr.com,  just for archival purposes. It won’t be updated anymore.