Ricardo Zea

5.0

(150 reviews)

US$22.00

For every 15 mins

220

Sessions/Jobs

First 15 mins free for your first session

ABOUT ME

Sr. Web/Product Designer | Figma | Design Systems | CSS & HTML Expert

Hi there!

I’m a Sr. Web/Product Designer with many years of hands-on experience shaping digital products from the ground up. Over the years I’ve worked on just about every part of the design process—design systems, ideation, sketching, wireframing, prototyping, and translating designs into production-ready HTML and CSS for smooth hand-offs to development.

I’m passionate about clean, elegant design that not only looks great but works seamlessly for users. Along the way, I’ve also shared my knowledge by writing two books and publishing articles for the design community. If you’d like to see more of my work and thoughts on the industry, you’ll find links below.

• “Mastering Responsive Web Design”: https://masteringrwd.com
• “Web Developers Reference Guide”: https://tiny.cc/web-devs-reference-guide
• “Design System Bootcamp Certificate”: https://maven.com/certificate/sBHiXyRc

💻 View my design and technical work:

• Portfolio: https://ricardozea.design
• Smashing Magazine: https://www.smashingmagazine.com/author/ricardozea/
• Amazon: https://www.amazon.com/Ricardo-Zea/e/B0781579BS/
• Dribbble: https://dribbble.com/ricardozea
• CodePen: https://codepen.io/ricardozea
• Medium: https://medium.com/@ricardozea

⚔ Skills:

Web/Product Design — UI/UX/Visual Design

• Design Systems
• Development-friendly Designs
• Wireframing & Prototyping
• Accessibility & Usability
• Interaction Design
• Branding
• Color
• Typography
• Design principles: Hierarchy, Grid, Balance, Symmetry, Rhythm, Space, Gestalt, Pattern, Modularity, etc.

Web/Front-End Designer

• Production-ready HTML
• Production-ready CSS/Sass
• jQuery (presentational)
• Responsive & Adaptive Designs
• WordPress
• Accessibility & Usability
• SEO

🚫 Attention Recruiters:

• I am NOT a developer.
• I am unable to relocate.

Spanish, English

Eastern Time (US & Canada) (-04:00)

Joined April 2016

EXPERTISE

Figma

9 years experience | 8 endorsements

My go-to design tool is Figma. I've been creating all kinds of designs: Design systems, websites, prototypes, data-heavy dashboards, reus...

My go-to design tool is Figma. I've been creating all kinds of designs: Design systems, websites, prototypes, data-heavy dashboards, reusable components, interactive prototypes, etc. While at Willis Towers Watson, I built and maintained shared libraries for their eepoint platform, with heavy use of auto-layout, variables, design system assets to ensure consistency across teams. At Nestlé Purina, I expanded HubX libraries and led UX lunch-and-learns, streamlining collaboration between designers and developers. I also enjoy helping others make the most of Figma—through ADPList workshops and 1:1 sessions, I guide individuals and teams in setting up component hierarchies, organizing tokens, and building workflows that scale.

Component libraries Auto Layout Design Systems Figma Wireframing/prototyping

Design Systems

2 years experience | 2 endorsements

Design systems have been a core part of my workflow for the past several years. I’ve helped create and expand systems that include everyt...

Design systems have been a core part of my workflow for the past several years. I’ve helped create and expand systems that include everything from tokens and spacing scales to coded components and documentation. I focus on making systems practical—so they’re actually used and useful to both designers and developers. My role usually involves reviewing component consistency, documenting interaction patterns, and making sure the system supports accessibility standards. I’ve synced tokens with Storybook demos, published component libraries, and introduced governance that keeps everything aligned across teams.

Figma

HTML/CSS

10 years experience | 97 endorsements

Accessibility

10 years experience | 1 endorsement

Responsive Design

10 years experience | 59 endorsements

Visual design

10 years experience

Performance Optimization

10 years experience

REVIEWS FROM CLIENTS

5.0

(150 reviews)

carla

August 2025

Ricardo guided me on Figma and helped me with making design decisions, smart animate, prototypes and light to dark mode translations. He was very patient and gave good advice to help with making my design process quicker.

Spencer Rosen

May 2025

Awesome! Got a great tutorial on Figma, design systems, variables, properties with a super intentional focus on exactly what I needed! Going to work with Ricardo again, for sure!

Ashley Whelan

January 2025

Had a great experience with Figma tutoring from Ricardo. He was thoughtful, patient and prepared for each of our sessions. And, he set realistic expectations about what we could accomplish in a given amount of time. I learned a lot of basics about Figma and handy best practices and shortcuts to make my work more efficient. Would absolutely work with him again!

Removed User

September 2024

Helped my with my HTML and CSS code Helped clean up my code to make my website more presentable

Samantha Gaiser

April 2022

Ricardo helped me with some graphic design stuff in regard to creating a logo. He gave me some great suggestions and helped me come up with a great strategy to move forward on my project. Thanks, Ricardo.

Mike G

February 2022

Ricardo graciously helped with the responsiveness and styling of my React application. I was having trouble with the spacing of particular boxes within a grid format, and Ricardo was able to help break down and ultimately solve the issue. Looking forward to our next session in the future. Thanks!

Dee Barizo

February 2022

Another great session with Ricardo. He provided great ideas for a UX/UI design that I was trying to building. I was trying to build it one way but Ricardo showed me a better way to build it that looks better and is easier for the visitor to understand. A+

Colm Ginty

January 2022

Ricardo was very knowledgeable and challenged my preconceptions about what I was trying to do. This was very helpful and prevented me from wasting a lot of time.

Marko Petrovic

December 2021

Ricardo provided straightforward and specific feedback towards the design of our website and immediate suggestions for how to apply professional design strategies for our use case.

Victoria

November 2021

Ricardo was really helpful during our class session. He explained very clearly for me to understand. we talked about display:flex, box model etc. Also how make the Html structure more clear and simple. He is really easy to understand and really helpful with my questions. Hoping to take another lesson with him soon

SOCIAL PRESENCE

Stack Overflow

8109 Reputation

Community Posts

100% Responsive Typography System using a Modular Scale

Learn how to build a responsive typography system for your website in a simple way. No intricate equations or convoluted explanations of the CSS. This tutorial is so simple, even an 8-year old can understand it :). Time to level up! Let’s go!

[Sass] For Beginners: The Friendliest Guide About INSTALLING and USING Sass on Windows

The simplest and most detailed guide about how to install and use Sass you’ll ever read!

Clients/Mentees, Avoid These Terms in your Job Requests☝️. Seriously.

How a simple term like "easy" is a bit disrespectful to the mentor. Advice on how to fix this problem ;)

EMPLOYMENTS

Design Expert Mentor

adplist.org

2024-12-01-Present

• Provide design feedback. • Help designers improve their projects. • Give professional advice to designers. • Teach Figma to designers. ...

• Provide design feedback. • Help designers improve their projects. • Give professional advice to designers. • Teach Figma to designers. • Help designers level up their skills. • Assist designers with design systems.

Visual design

Mentoring

Product design

Visual design

Mentoring

Product design

Design Systems

Technical Design Interviewer

Arc.dev

2022-02-01-Present

Designers are interviewed and vetted to see if they can be accepted into the Arc.dev platform. • Provide UI/UX expertise for their custo...

Designers are interviewed and vetted to see if they can be accepted into the Arc.dev platform. • Provide UI/UX expertise for their custom-built N|Solid platform. • Analyze UX and UI designs, including wireframes and implementation-ready prototypes of new features. • Offer ongoing advice on UI/UX best practices and innovative ideas. • Develop multiple prototypes to communicate ideas on content architecture, layout, features, accessibility, interactions, workflows, and functionalities. • Enhance their strong brand in the new designs for requested features. • Suggest messaging strategies for marketing campaigns.

Interview Skills

Mentoring

Product design

Interview Skills

Mentoring

Product design

Interview Preparation

Behavioral Modeling

Competency management

Career coaching

Sr. Web/Product Designer - Consultant

NodeSource

2020-12-01-Present

• Provide UI/UX expertise for their custom-built N|Solid platform. • Analyze UX and UI designs, including wireframes and implementation...

• Provide UI/UX expertise for their custom-built N|Solid platform. • Analyze UX and UI designs, including wireframes and implementation-ready prototypes of new features. • Offer ongoing advice on UI/UX best practices and innovative ideas. • Develop multiple prototypes to communicate ideas on content architecture, layout, features, accessibility, interactions, workflows, and functionalities. • Enhance their strong brand in the new designs for requested features. • Suggest messaging strategies for marketing campaigns.

Figma

PROJECTS

Pearlmax Oral Surgery website, branding and stationary

2010

https://www.pearlmax.net -- » Website was redesigned in August of 2019 (See the old branding on my portfolio: https://ricardozea.design/p...

https://www.pearlmax.net -- » Website was redesigned in August of 2019 (See the old branding on my portfolio: https://ricardozea.design/project-pearlmax.php), » Great opportunity to work without bureaucratic limitations » Great opportunity to implement new technologies » Great way to handle all pieces of the project, from design for print, to Web Design, to content management, everything.

The Gym of West Milton website

2018

http://thegymofwestmilton.com -- » Great opportunity to design with complete freedom » I didn't charge for this project, we instead excha...

http://thegymofwestmilton.com -- » Great opportunity to design with complete freedom » I didn't charge for this project, we instead exchanged services: I created their website and I had a free membership to the gym for 1 year :) » Designed and coded the entire website