A Fresh Start
I’ve gone freelance. Time for new challenges, time for a new site.
janogarcia
Web-based products and services
Designer / Developer
freelancing from Spain
Photo by janogarcia
Jano García, freelance Designer and Developer
focused on Web-based Products and Services.
Proponent of simplicity.
Committed to continuous learning and improvement.
Have a project?
Some of my Work
My work includes a range of design and development projects.
Take a look through each project to find out more
Want more?
I have more examples of front-end and back-end development.
If you’re looking for more examples in a particular category, just ask.
Skills and Tools
Design
User interface design
I design user interfaces for web-based products and services.
I strongly value clean, easy and pleasurable to use interfaces that are effective in meeting user needs and business goals.
Visual identity design
Although I primarily focus on UI design, I also occasionally do basic branding and identity work, such as logo design and business card design.
I aim to create designs that are simple, distinctive and effective.
Principles
Four principles guide my approach to UI design.
1. Design, not decoration
A Good User Interface has high conversion rates and is easy to use. In other words, it's nice to both the business side as well as the people using it.
The design of an interface should not distract from the content or the task at hand, but rather enhance it. Plus, it should strike the right balance between user needs and business goals.
I do my best to follow solid design principles and patterns, while focusing on the most essential design elements (layout, typography, color…) and keeping decorations and ornaments to a minimum, with the aim of creating simple and effective designs that meet their goals.
2. Simplicity, not minimalism
Clear, clean and simple design isn’t minimalist. It’s just good, clear design.
Simplicity, not minimalism, should be the goal when designing interfaces.
Minimalism is an aesthetic choice, there’s nothing inherently “good” in it, and certainly not when it diminishes affordances or is disguised as false simplicity. True simplicity, on the other hand, serves as a guiding principle for the design of usable interfaces, those that strike a balance between affordable and honest design.
3. Timeless, not trendy
Simplicity isn’t a design trend, it’s an attribute of good design.
Good design is timeless, and simplicity is key to timeless design.
I take inspiration from those designers that pursue simplicity, timelessness, and stay on trend without becoming too trendy.
4. Modular, not monolithic
Creating design systems will give us the flexibility we need for working with the unknown devices of the future.
UI/UX design is about building systems.
A modular approach to design in which simple, highly-optimized components are combined to create larger, more complex systems, that remain elegant, reliable, and maintainable.
This approach derived from solid engineering principles, and these are some of its benefits:
- Usability
- It leads to a consistent and cohesive design language and system, shared between all disciplines (architecture, design, development…) and parties (clients, consultants, end-users…), which translates into improved productivity and usability.
- Efficiency
- It promotes reuse, which results in a more efficient system and help us work more efficiently.
- Flexibility
- It identifies different, reusable design components that can be “mixed and matched” as needed to create a completely flexible system.
- Adaptability
- It provides a structured foundation for building adaptable and responsive interfaces, and thus deliver optimized experiences to any device (desktop computers, tablets, mobile phones…) more efficiently.
- Other benefits
- Extensibility (easier to maintain consistency when adding or extending components), Scalability (more linear), and Maintainability (less redundancy makes maintenance and quality control easier to manage).
Tools
I’ve used Adobe Photoshop and Adobe Fireworks before settling on Antetype for UI design and prototyping, a truly productive tool built from the ground up with the principles of modular design in mind.
For icons and other detailed UI elements I use Sketch.
For graphic design I use Adobe Illustrator in conjunction with some Astute Graphics plugins.
What’s next?
Just keep learning and doing my best with each new design project.
Development
Front-end development
I architect and build user interfaces with HTML, CSS and a dash of JavaScript.
I specialize in modular and scalable front-end methodologies, such as OOCSS, SMACSS or BEM.
Back-end development
I develop custom multilingual CMS solutions and web applications with PHP and MySQL, specializing in WordPress for CMS development and CodeIgniter for custom application development.
I strive to create user-friendly and flexible CMSs, as well as reliable, performant and secure web applications.
Principles
Front-end
I have extensive experience coding semantic HTML and modular CSS. I am particularly interested in modular front-end methodologies, such as OOCSS, SMACSS or BEM. These methodologies form the basis for an efficient, maintainable and scalable front-end architecture.
I use a combination of preprocessors and frameworks to help me streamline my workflow: Jade for HTML/HTML5, Less for CSS/CSS3, and Bootstrap as my responsive and UI components framework of choice. I have used or tested other alternative preprocessors and frameworks such as Haml, Sass, Stylus or Zurb Foundation.
I use JavaScript and the DOM/BOM APIs in conjunction with the jQuery framework for small UI/UX enhancements (component behaviors, asynchronous requests…). I have just started using utility libraries such as Underscore.js/Lo-Dash, have only limited experience with CoffeeScript, and have no experience at all with front-end MV* frameworks.
Back-end
I have extensive experience with WordPress for CMS development and CodeIgniter for web application development.
What I like about WordPress is its flexibility and extensibility as a content management framework (custom content types, custom taxonomies, plugin API…), and the creative freedom of its theme system. I’ve built fully customized and multilingual CMSs based on WordPress, coupled with some of the most versatile plugins (WPML, Advanced Custom Fields, Pods…).
I appreciate CodeIgniter for its simplicity, performance and documentation. I’ve been using it for web application development in conjunction with other standalone libraries (Composer) and components from other frameworks (Zend Framework, Symfony and Kohana). However, CodeIgniter is struggling to adapt to modern PHP best practices, that’s why I’m learning Laravel, a framework that strikes a balance between modern practices and simplicity.
I have some experience with other technologies related to web application development:
- Performance
- Caching systems (APC), message queues (Gearman) and transactional emails (Mandrill).
- Web services
- Third-party REST APIs (payment gateways, social networks, email delivery…) and authentication protocols (OAuth).
Hosting
When it comes to hosting I tend to favor good quality managed services over dedicated ones.
What I look for when choosing a hosting service is performance, reliability, security, flexibility and scalability, plus a good and fast support.
The server OS should be Unix-based, with Nginx or Apache as the HTTP server. These could be WebFaction, or CDmon when the servers must be located in Spain or support in spanish is required. Or, if the project requires it and the budget allows it, on a managed VPS, managed dedicated server, or PaaS provider; preferably Pagoda Box, Fortrabbit or Red Hat OpenShift. Sometimes I’ll add CloudlFlare to the mix, for increased security and performance.
I’m not a sysadmin by any means, so for more complex or demanding scenarios I’ll work together with a qualified sysadmin to setup the necessary infrastructure, be it VPS, dedicated, or IaaS based. It would preferably be hosted on DigitalOcean or Amazon EC2.
Tools
After trying and using different IDEs, I’ve settled on PhpStorm for front-end and back-end development. It has all the features required for modern web development, testing and debugging, plus it is constantly updated. I use PhpStorm as my Xdebug client, and Sequel Pro as my MySQL client. For quick edits I tend to use Sublime Text.
I use Git for version control, with SourceTree as the front-end, and Bitbucket with Bitbucket Cards as the hosting and project management service.
For my local development environment I use MAMP Pro, with Homebrew and Homebrew-PHP for software package management, and ngrok for tunneling. For development environment virtualization I use VirtualBox.
For browser and device testing I use a combination of LiveReload, Adobe Edge Inspect CC, Viewport iPad app, BrowserStack and VirtualBox.
What’s next?
The technology and software business seems to obsess with what is in flux and changing. Always new stuff. New languages and frameworks. Focus on what doesn't change and think about the things that matter today and will matter 10 years from now.
Web development is a fast-paced and ever-evolving field. Keeping up is just part of the job. However, a balance must be struck between learning new technologies and getting better with the ones you are familiar with. Furthermore, while new technologies come and go, the fundamentals remain essentially the same.
That’s why I focus on learning the technologies that I need or find useful for my work, while keeping an eye on the popular and emerging ones, to have at least an informed opinion.
My current to-learn list includes: Laravel, TDD with Laravel, Sphinx search server, and JavaScript (The Good Parts, jQuery, Underscore.js/Lo-Dash and CoffeeScript).
It’s not all Work
Besides doing design and development work, I’m also passionate about Photography and Music.
Photography
Latest photos on Flickr
More photos?
Music
Latest songs on SoundCloud
More songs?
Photography
What I like about photography is the immediate sense of focus it brings, requiring you to be totally present and creative. It’s a precious moment of mindfulness.
I like simple, direct, balanced compositions, and tend to prefer natural and available light over artificial lighting.
The subject matter can be anything, with portraits probably being my favorite.
Born and raised analog
I have always been attracted to photography. During high school, in the mid to late 90s, I discovered the magic of darkroom and film-based photography. But it was not until mid 2000s that I really started using a camera regularly, my parents’ Canon T50 SLR camera.
At that time I used to use slide film, which required a precise control of exposure due to its very limited exposure latitude. Unfortunately, the Canon T50 was a fully automatic camera, so it had no manual exposure control.
One year and many rolls later, I managed to get a gorgeous Canon A-1 on eBay, equipped with two great Canon FD mount lenses (Canon FD 28/2.8, Canon FD 50/1.4 S.S.C) and its dedicated Canon Speedlite 199A flash unit. It was my first serious SLR camera, with full manual exposure control.
About a year later I had gotten on eBay a Canon FD 135/2.5 S.C. lens and a flagship Canon T90 body with its dedicated Canon Speedlite 300TL flash unit. I used it as a second body for my FD lenses, which allowed me to shoot films of different type and sensitivity.
For the following two years, besides carrying my camera everywhere, I was buying and selling photo gear all over the world via eBay. During that time I successfully disassembled and repaired tens of lenses and camera bodies, and it was quite a rewarding experience.
At that time I discovered probably one of the most overlooked camera systems, the Konica SLR system. The Konica Hexanon AR lenses provided an unparalleled image quality at a fraction of the cost of the equivalent Canon FD lenses. Some photography magazines praised Konica Hexanon AR lenses as one of the sharpest lenses ever built by any manufacturer for 35 mm cameras. My Konica gear grew rapidly, two camera bodies, the sturdily built Konica Autoreflex T3 and the more compact and lighter Konica Autoreflex T4, plus an embarrassingly large set of Konica AR mount lenses:
- Vivitar (by Kiron) 20/3.8
- Vivitar (by Kiron) 24/2
- Konica Hexanon 28/3.5
- Konica Hexanon 35/2
- Konica Hexanon 40/1.8
- Konica Hexanon 50/1.4
- Konica Hexanon 50/1.7
- Vivitar (by Komine) 55/2.8 Macro
- Konica Hexanon 55/3.5 Macro
- Konica Hexanon 57/1.2
- Konica Hexanon 57/1.4
- Konica Hexanon 85/1.8
- Vivitar Series 1 (by Komine) 135/2.3
- Konica Hexanon 135/3.2
- Konica Hexanon 200/3.5
- Konica Hexanon 2x Tele converter
I also managed to get some other SLR lenses:
- M42 - Yashica Yashinon DS-M 50/1.7
- C/Y - Carl Zeiss T* Distagon 28/2.8
- C/Y - Carl Zeiss T* Planar 50/1.7
Some compact rangefinders: Konica I, Yashica Electro 35 GSN, Yashica T3, Ricoh TF-900.
And a 6x7 medium format rangefinder camera, the Rapid Omega 200, with a complete set of outstanding lenses:
- Wide Omegon 58/5.6
- Super Omegon 90/3.5
- Tele Omegon 180/4.5
From analog to digital
I used film (Tri-X, Plus-X, Kodachrome…) almost exclusively until mid-2008. I used to develop black and white film at my home laboratory and make prints with the beautifully engineered Leitz Valoy II (Leica) enlarger. The slide film, which I was particularly fond of, was delightfully projected by my partner’s Leitz Pradovit RA 150 (Leica) slide projector.
My transition to digital photography started as soon as I acquired a dedicated 35mm film scanner, the Microtek ArtixScan 4000t. Its resolution power rivaled that of the contemporary DSLRs.
Shooting, developing, enlarging and scanning film was not the fastest workflow. It was in fact quite tedious, and expensive. Back then, DSLRs with good specs were starting to be affordable. I began to search for the most film-like DSLR, which quickly led me to Sigma Foveon X3® direct image sensor based cameras. I was lucky to find someone that wanted to get rid of his recently purchased Sigma SD14 bundled with two of the best Sigma SA mount lenses:
- Sigma 30/1.4 EX DC
- Sigma 70/2.8 EX DG Macro
Minimal gear
Since mid-2008 I’ve been using exclusively my Sigma SD14 which, with all its quirks and limitations, still delivers an exceptional image quality when shooting under optimal conditions. I love its simple and straightforward interface, free from feature-bloat. Great image quality and simple controls, just what a serious camera should be.
The lens I use the most is the quite affordable M42 mount Yashica Yashinon DS-M 50/1.7. A vintage manual lens with an excellent balance of resolution power, contrast and color rendition.
I always use prime lenses, I have no zooms, and shoot in manual mode. What I value the most in photo hardware is image quality and simplicity.
For editing I use a NEC MultiSync EA231WMi monitor, color calibrated with a X-Rite i1Display 2.
As for software, I like to keep it simple too. I use mainly Sigma’s own RAW developer (Sigma Photo Pro) and Apple Aperture for the adjustments or edits not supported by Sigma Photo Pro. In rare occasions I use other advanced or specialty software such as Adobe Photoshop, Adobe Lightroom or ToyCamera AnalogColor.
Fortunately, the days of buying, selling and repairing vintage photo gear are long gone. I’m absolutely happy with what I’ve got, and am not investing in any new gear since 2008.
From still to “moving pictures”
Lately, I’ve started experimenting with shooting video as well as doing simple editing/post-production (Final Cut Pro X and DaVinci Resolve), with the help of my brother Hugo, who teaches video production at SAE Institute Barcelona.
Long gone are the times when we were shooting the mythical Super 8 Kodachrome film on his Canon 1014 XL-S, “the pinnacle of Canon 8mm movie cameras”.
In early 2013, we (me and my partner) acquired a mirrorless interchangeable lens APS-C camera, the Sony NEX-5n. A small but powerful camera capable of producing almost cinematic results, a perfect camera to complement my Sigma SD14 which doesn’t support video recording of any short. It would allow us to have nice quality videos of our little family. Plus, it would allow me to use all my legacy manual lenses (Konica Hexanon AR, Carl Zeiss T* C/Y, Canon FD, Yashica Yashinon M42…) on a digital body without losing infinity focus, thanks to Sony E-mount’s amazingly short flange focal distance.
All in all, I still much prefer photography, and I’m sure that won’t change. Video can’t beat photography’s simplicity.
What’s next?
Well, keep shooting and keep learning.
Music
Making music is one of the most freeing, challenging and rewarding activities I have ever done.
I am fascinated by the process of layering instruments into one unique sound, while listening and reacting to the interactions between them. It is a captivating experience.
I like to create simple instrumental music that blend electronic and acoustic elements.
Born and raised analog
I’ve been interested in music for as long as I can remember. But, I didn’t start playing an instrument until I was a teenager.
I took guitar lessons for two years when I was about 14. At that time I was inspired by 90s alternative rock (Nirvana, Smashing Pumpkins, My Bloody Valentine…) and 70s hard rock (Deep Purple, Free…), which I discovered thanks to my dad’s vinyl collection.
During that time I played music with friends and in a short-lived local band. We never did covers, only original material.
From analog to digital
I was introduced to electronic music by my brother Hugo, in late 90s, after listening to Eboman’s totally crazy “Donuts with Buddha” track. Up to those minutes I had never showed the slightest interest in electronic music. From then on, I became more and more interested in genres such as trip-hop, instrumental hip-hop and downtempo (Howie B, Björk, Boards of Canada, Coldcut…).
These days I’m more into shoegaze electronica (Ulrich Schnauss), dreamwave/synthwave (Makeup and Vanity Set, Com Truise), melodic electronica (Vector Lovers, early Aphex Twin, Kraftwerk) and instrumental/cinematic electronica (Daft Punk’s Tron Legacy and other OSTs).
My brother and I started experimenting with digital audio in late 1997, when my family got our first computer. Back then we had no Internet at home, Future Music magazine was our only source of information. We would use trackers and early incarnations of today's editors and DAWs for making music.
We didn’t have hardly any dedicated music hardware. However, we were very lucky to get our hands on a Roland Juno 60 vintage analog synth at a second hand shop. Some years later, I would acquire a Casio FZ-1 vintage sampler, which doubled as an exceptional MIDI keyboard controller. Besides that, during college I assembled some DIY MIDI controllers from uCApps.de.
I also own two beautiful guitars. A red 1966 Fender Mustang my parents bought me, and a sonic blue American Classic Player 60s Fender Stratocaster that my girlfriend gave me for college graduation.
As for software, I dabble with Apple Logic, Ableton Live and Bitwig. I’m not a plugin collector by any means, I like to keep my choices down to a minimum.
Software synths:
- u-he Diva
- Arturia Mini V
- Arturia SEM V
- Korg MS-20
- Korg Polysix
- Korg Mono/Poly
Drum synthesis:
- Sonic Charge µTonic
- AudioSpillage DrumSpillage
- Arturia Spark VDM
- Logic Pro Ultrabeat
Sampled drums:
- Logic Pro Drum Kit Designer
- Pettinhouse Vinyl Drumkits
Effect processing:
- Sugar Bytes Turnado
- Sugar Bytes Effectrix
I’m quite interested in sound design, especially on drum synthesis. Someday I’ll start learning Csound (an audio programming language) properly, as well as creating custom virtual controllers in Liine Lemur (iOS version).
Minimal gear
Since late 2011 I’ve been using exclusively my iPad for music making, and I’m not looking back.
I love the direct interaction with instruments via the touch interface, its portability, and the outstanding quality of many apps.
There’s a lot room for improvement in iOS music production workflow, especially when using multiple applications simultaneously, but this is getting better and better every day.
These are some of my favorite iOS apps:
- Modular studios
- Korg Gadget, Caustic, Electrify NXT, Nanostudio, GarageBand.
- DAW
- Auria.
- Synths
- Arturia iMini, Arturia iSEM, Korg iPolysix, Korg iMS-20, Waldorf Nave, Moog Animoog.
- Drum synths
- SeekBeats, Korg iELECTRIBE, Impaktor.
- Samplers and beats
- Samplr, Yellofier, Glitchbreaks, triqtraq, DrumJam.
- Controllers
- Musix Pro, ChordPolyPad, Chordion, StepPolyArp, Arpeggionome Pro.
- FX
- AUFX:Dub, Moog Filtatron, Turnado, Effectrix, JamUp Pro.
And these are the iPad accessories I occasionally use:
- Line 6 Mobile In audio interface.
- Tascam iM2 microphone and WS-2i windscreen.
- Korg MIDI controllers: nanoKEY2, nanoPAD2, nanoKONTROL and microKEY 37.
I use a pair Tannoy Reveal 601a active nearfield monitors and a pair of Sennheiser HD 25-1 headphones. The monitors are mounted on Skum Acoustics Fötter isolation pads, and are wired with custom XLR speaker cable manufactured by designacbale.com
What’s next?
I am eager and determined to continue learning (music theory, composition, sound design, mixing, mastering…) and creating as much as I possibly can.
Writing, Speaking and Connecting
Writing
Speaking
Every once in a while I speak at the local web design and development group, themelee.org, which I help run.
Responsive Web Design
Why and when you should consider responsive design. In spanish.
OOCSS: Poniendo OOrden en CSS
CSS out of control? Here’s some advice to tame it. In spanish.
GTD Aplicado
How to implement GTD, your own way. In spanish.
Connecting
More frequently I share some bits and pieces here and there. Feel free to connect with me on any platform below.
Tweets by @janogarciaElsewhere