Ricardo Zea

5.0

(149 reviews)

US$22.00

For every 15 mins

219

Sessions/Jobs

First 15 mins free for your first session

ABOUT ME

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

Hello!

I'm a Sr. Web/Product Designer with extensive experience in all aspects of web design: design systems, ideation, sketching, wireframing, designing, prototyping, coding static pages, hand-off to dev., and maintenance.

I have a good eye for elegant design and am highly versed in web technical subjects. I am fully capable of creating production-ready HTML and CSS.

If you are interested in what I have to say about this industry, below are two books I have authored, followed by a list of my work:

“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

💻 See my body of work in the following links:

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
Accessibility & Usability
SEO

Spanish, English

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

Joined April 2016

EXPERTISE

Figma

9 years experience | 8 endorsements

I use Figma practically daily to create all kinds of designs. Data-rich dashboards, reusable components, interactive prototypes, design s...

I use Figma practically daily to create all kinds of designs. Data-rich dashboards, reusable components, interactive prototypes, design systems, web designs, etc. At WTW, I built and maintained shared libraries for their eepoint platform, using auto-layout and variables 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.

Wireframing/prototyping Figma Design Systems Auto Layout Component libraries

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

Web Design

25 years experience | 58 endorsements

I’ve been designing and coding for the web since 2000, handling everything from initial sketches and sitemap planning to hand-coding HTML...

I’ve been designing and coding for the web since 2000, handling everything from initial sketches and sitemap planning to hand-coding HTML and CSS (with Sass). I prioritize semantic markup, responsive layouts, and performance optimizations—streamlining code and assets to cut load times dramatically. SEO and accessibility are integral to my process; I build with WCAG guidelines in mind and structure content for both users and search engines.

Usability Interaction Design Accessibility

Usability Interaction Design Accessibility Web Design Product design UI design Mobile UI Responsive Design HTML/CSS

Product design

25 years experience

In product design, I balance user needs with business goals—defining MVP scopes, mapping feature roadmaps, and iterating based on analyti...

In product design, I balance user needs with business goals—defining MVP scopes, mapping feature roadmaps, and iterating based on analytics and feedback. At NodeSource, I helped prioritize and simplify new N|Solid features, ensuring each addition delivered clear user value. I collaborate with PMs, engineers, and marketers to craft experiences that drive adoption, improve task success rates, and support long-term strategy.

Visual design UI design Design Systems

Visual design UI design Design Systems Branding Web Design Product design

UX/UI Design

10 years experience | 10 endorsements

As an experienced Web Designer, I've been doing UI/UX Design since I started in this business. From a UX perspective, I can create sound...

As an experienced Web Designer, I've been doing UI/UX Design since I started in this business. From a UX perspective, I can create sound designs based on well known human behavior principles. From a UI Design point of view, I am able to create appealing and logical visual designs that reflect the strategies of the project. I understand specific concepts of typography, layout, color, branding, user flows, design principles that help communicate ideas, etc.

Branding Usability Accessibility

Branding Usability Accessibility UX/UI Design Visual design Web Design Product design

UI design

25 years experience | 14 endorsements

My strength in UI design lies in crafting clean, clear, and visually consistent interfaces. Whether it’s refining typography, setting up ...

My strength in UI design lies in crafting clean, clear, and visually consistent interfaces. Whether it’s refining typography, setting up grid systems, or selecting color palettes, I aim for designs that feel polished but don’t distract from content. I work closely with developers to translate mockups into production-ready visuals—reviewing CSS implementations, providing style specs, and validating responsive breakpoints to ensure pixel-perfect execution.

Web Design Visual design Product design

Web Design Visual design Product design Design Systems Design Principles Design Patterns

Mentoring

9 years experience

I’ve mentored hundreds of designers and developers on ADPList and Codementor, offering portfolio reviews, code critiques, and workflow op...

I’ve mentored hundreds of designers and developers on ADPList and Codementor, offering portfolio reviews, code critiques, and workflow optimizations. My goal is to make sessions collaborative and practical—delivering clear, actionable guidance tailored to each person’s needs. As a Technical Design Interviewer at Arc.dev, I also assess candidates’ design thinking and communication, providing constructive feedback that helps both designers and hiring teams achieve better outcomes.

HTML/CSS UX/UI Design Visual design

HTML/CSS UX/UI Design Visual design Product design Figma Web Design DesignCoaching career developmentCareer Advancement Mentoring

REVIEWS FROM CLIENTS

5.0

(149 reviews)

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

jai

November 2021

Ricardo explained the thought process of creating a responsive web page, as well as going over the flex property and sophisticated HTML

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.

Design

Mentoring

Product design

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. • Weekly technical design interviews with...

Designers are interviewed and vetted to see if they can be accepted into the Arc.dev platform. • Weekly technical design interviews with 1–4 designers from around the globe. • Interviewed more than 80 designers (and counting). • Provide detailed insights about each interviewed designer to the Arc.dev team. • Provide feedback, insights, tips, and advice to the designers I interview so they can “level up” and improve their chances of getting hired when applying for a job on the Arc platform. • Dig deep into the designers' design process and design thinking and understand how they work, how they approach projects, how they deal with adversity, and how they have helped prior clients/companies be better.

Interview Skills

Mentoring

Product design

Interview Skills

Mentoring

Product design

Interview Preparation

Behavioral Modeling

Career connected learning

Competency management

Sr. Web/Product Designer - Consultant

NodeSource

2020-12-01-Present

• Facilitate UI/UX Design expertise for their custom-built N|Solid platform. • Provide UX analysis of new features and UI designs in wir...

• Facilitate UI/UX Design expertise for their custom-built N|Solid platform. • Provide UX analysis of new features and UI designs in wireframes and implementation-ready designs. • Advice on UI/UX best practices, and recommendations while tapping into innovative ideas. • Extend their solid brand in the newly created designs for the requested features. • Recommend messaging approach for marketing initiatives.

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