Crafting digital experiencesβ¦ Well, I've been doing this for π©-load of time Β―\(γ)/Β―
Ok, I'll K.I.S.S. π
In the following two projects I showcase most of my skills and designΒ capabilities
.
You will see things about:
I know there is still a lot to learn, but there is also a lot to share. That's what this portfolio is for.
Well, have at it! ππ½ββοΈπ¨
In the words of the almighty Scott Adams:
Talent StackMore than 20 years of experience in the industry. I don't play politics with managers or sugarcoat the truth for CEOs. I take your complex mess and turn it into a high-performance tool that hits every standard.
You hire me for the results, not for my "yes". BTW, I will never call you "boss" or design your PowerPoint presentation π«΅π½, lol.
I've been using Figma since it was launched back in September 2016. Figma was a game-changer due to its OS-agnostic nature.
This was a blessing for me since I no longer had to deal with Mac-lovers and their dumbfounded belief that Macs were better than PCs, haha π€£.
They ARE NOT, you dink.
In fact, Windows > macOS π.
The 1st of the three things a designer must dominate. Making designs accessible are part of how I operate by default. Just like everything has to be responsive, everything also has to be accessible.
The pinnacle of my accessibility skills is Color-Ramp.com "Create 100% accessible color ramps in less than 5 seconds, no BS".
Who can live their lives without AI these days anymore? π€. From removing backgrounds from images in Figma to developing entire applications with the help of AI, is the breath of my AI expertise.
Wireframing, design exploration, custom images, videos, marketing, etc. is where AI becomes part of how I operate.
I've heard the term "Design System" many years ago, but after Figma introduced variables, the concept exploded. My flagship design system is the one I created for NodeSource, N|Core.
To level up my design system skills, I did a bootcamp specifically for that. Check out my certificate
I love HTML & CSS. I've even written two books about them bro! Mastering Responsive Web Design and Web Developer's Reference Guide.
All I've learned, I've learned on my own, building stuff in all my jobs, freelancing, and personal projects. But more importantly, mentoring others.
Most of the times, Figma prototyping is a waste of time, lol. When a prototype tries to replicate the browser's behavior, that's when it's a waste of time.
But when it's about helping prove a concept, showcase a specific behavior/feature, or visualize content architecture, then it is worth prototyping.
HTML+CSS+JS protyping is the best way to go, especially with all the "vibe coding" apps out there these days.
The 2nd of the three things a designer must dominate. I admit it: I have not designed a typeface (at least, not yet, lol). But I do understand the importance of dotting your i's and crossing your t's. No pun⦠actually, it was intended.
Learning how to use and create a Modular Scale has taken my typography skills to π.
clamp() calc() progress()The 3rd of the three things a designer must dominate. Color can get ugly quickly. Don't believe me? Look: CMYK, RGB, HEX, HSL, HSV, HCL, LCH, OKLCH, Lab. And plenty more.
And that's not even mentioning the Alpha channel.
Told you it could get ugly, lol.
βπ½It goes without saying that I'm still learning. I am open-minded and not set in my ways despite my experience. Soβ¦ yeah.
Plus, I really like to share my knowledge with others.
Let's Count!Years of Experience
Years Teaching/Mentoring
Likes for a Sass article
Technical Design Interviews
Designers & Devs Taught
Overall Designed Websites/Pages
Published Web Design Books
Languages (EN & ES)
Dependency on Adobe πͺπ½
UX/UI Designer
First of all i am indeed thankful to met such a true definition of a Mentor, very remarkable moment that i got a genuine advise that exceed my expectation.
Mr. Zea indeed knows branding, he spotted even a tiny details mistake of my work which are important to be aware for every designers credibility.
Mr. Zea gave an advise with empathy and truly passing on his experience of knowledge to help my situation to be good. I am very happy thank you so much Mr. Zea.
See Review
Founder, TAG Marketing Group
Ricardo is a meticulous web designer and manages to stay focused on the voice and needs of the client. He is an honest and hardworking team player - always willing to pitch in to help the team.
Ricardo's design skills, communication and openness to solving problems are all valuable traits. I really enjoyed working with him one-on-one or in a team.
Without hesitation, I highly recommend Ricardo for any design project.
See Review
Chief Solutions Officer, NodeSource
Ricardo is a pleasure to work with: prompt, consistently reliable, and just generally a nice guy.
He's able to provide both expert and well-researched UX guidance our team needs and designs unique and well-considered UI mocks. He's patient with our questions while walking us through the designs and happily responsive to collaborative design changes.
I don't see a reason that I'd look elsewhere.
See Review
Director - Retirement Implementation Specialist, Willis Tower Watson
Ricardo has the ability to understand your needs even through complicated and sometimes contradictory discussions between the business people. He provides good suggestions and is very well organized to keep track and make you aware of the improvements he makes.
It was a pleasure to work with him.
See Review
Research Assistant, University of Pennsylvania
I am a recurring mentee and have had the pleasure of scheduling two meetings with Ricardo. He is incredibly kind, patient, and has provided me with invaluable advice on improving my portfolio and presentation skills.
Ricardo is highly knowledgeable and has a unique ability to break down complex problems into clear, actionable bullet points, making it easy to understand and implement solutions.
I highly recommend scheduling a meeting with himβitβs an opportunity you wonβt want to miss!
See Review
Full Stack Developer, CareSource
I have worked with Ricardo on several projects where he has demonstrated his depth of knowledge in frontend web development. I have also read his book - Mastering Responsive Web Development. Ricardo and I organize a CodePen Meetup together that talks about using the frontend development tool.
Ricardo continues to impress me with his depth of knowledge and his aggressive research on web technologies.
I consider him a respected friend and collaborator.
See Review
NodeSource, LLC
December 2020 - Present
Willis Tower Watson
March 2023 - August 2024
Universidad Pontificia Bolivariana (Colombia)
Hey there!
I'm Ricardo. I'm a Sr. Web & Product Designer. I've been in the design industry for more than 20 years.
Started my career in a small ad agency in Colombia called "Firma Publicitaria" doing print design.
It was a great technical and business learning experience, but I quickly realized that designing for print friggin' sucked, lol.
From the ad agency, I went to a printing company called "MultigrΓ‘ficas". It was also a great technical learning experience.
The printing techs showed me how the machines worked, let me add the inks to the rollers, cut the papers with that giant-π© guillotine.
However, I quickly confirmed that designing for print really, truly sucked, haha.
Regardless of how much desiging for print sucked, I was actually very good at it.
I became an expert in file extensions, image resolution, CMYK techniques, drum scanners, print production, special inks, types of paper and finishes, print formats of all sizes (from flyers to billboards), etc.
From the printing company, I went to software development company called "Netsac" as a web designer. On top of taking my first steps with HTML and CSS, I got really good at Flash and even became a teacher.
And that's how my Web Design career got going.
One major difference between myself and other designers, was that I was very technically knowledgeable.
So I became very good at understanding the conditions, limitations, and powers of the web. I got really good at HTML and CSS, including Sass. Some people think I'm a developer, but I'm not.
But I do know how to work closely with developers to ensure that high-quality products are built efficiently.
Also, accessibility is a subject I care about. So I built Color-Ramp.com so designers can create 100% accessible color ramps in less than 5 seconds, no BS.
I also co-created AspireMap.ai, a B2C platform that helps students and career-changers find career paths aligned with their values, personality, aptitudes, and skills.
In 2014 I got contacted by Packt Publishing to write a book for them. I said No, lol. In 2015 they contacted me again, and I was like "Damn, these guys are persistent! Hmmm, this is something I've never done before. Alright! F it! Let's do it!". hahaπ.
Would I do it again? Nope!
"A+ book for both beginners and advance level web designers."
"This book is a great resource for people new to front-end development or seasoned veterans. [β¦]"
Packt Publishing contacts me again at the end of 2015 to work on this book. I was going to work with other authors. I was doing several chapters about CSS. I wrote a whole chapter about CSS Pseudo Classes and Pseudo Elementsβ¦ but another author had already written it π. See next card from Smashing Magazine, lol ππ½β¦
"I have been writing software since the time when ALL phones had wires. And I have been working with HTML since the birth of the Internet. This is the most thorough and complete reference I have ever seen. [β¦]"
β¦So I didn't want to let that ton of content sit in my drive, so I offered it to Smashing Magazine and Vitaly (Founder of SmashingMag) accepted it and published the chapter I wrote for the book as an article on Smashing Magazine.
"OlΓ‘ amigo Ricardo, This great article has been translated into Brazilian-Portuguese and is alive at [article page]."
"This is a superb article Ricardo, thank you for putting it together. I've been using a lot of these for a while but you've highlighted a few that are completely new to me."