Ricardo Zea

5.0

(146 reviews)

US$22.00

For every 15 mins

215

Sessions/Jobs

First 15 mins free for your first session

ABOUT ME

Sr. Web Designer | Figma | CSS & HTML Expert

Hello!

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

Good eye for elegant design and highly versed in technical subjects of the web. Fully capable of creating production-ready HTML and CSS.

Codementor - 1:1 Web Design Expert - Rating: ★★★★★

I mentor with simple-to-understand language and terminology, clear examples, and honest patience. Every time you have a lesson with me, I guarantee you will level up. 🎓 - See reviews here: https://www.codementor.io/@ricardozea

If you are more interested in what else 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

💻 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

“There are no dumb questions, it's just dumb not to ask.” — Yours truly 👍

Spanish, English

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

Joined April 2016

EXPERTISE

Web Design

10 years experience | 57 endorsements

This is what I am, this is what I do: Web Design. • Need to troubleshoot the HTML and/or CSS? • Are things not aligning correctly? • Nee...

This is what I am, this is what I do: Web Design. • Need to troubleshoot the HTML and/or CSS? • Are things not aligning correctly? • Need assistance in implementing your design in HTML and CSS? • Are you learning Figma? • Want to learn how to create interactive prototypes in Figma? I can help with all these and many more :) I will guide you through your issues step by step, from a design & technical standpoints, while teaching you the HTML+CSS and Figma things you need to know to DIY your projects. I will put 110% of my effort into making your design look solid, accessible, memorable, compatible and compliant with best practices.

Web Design

Figma

6 years experience | 5 endorsements

I'm fully aware there's always more to learn. But if you are having issues with Auto layout, Variables, components, want to improve or cr...

I'm fully aware there's always more to learn. But if you are having issues with Auto layout, Variables, components, want to improve or create prototypes, or fully create a design system or UI kit, I may be able to help. I have extensive experience using Figma for all types of projects, using best practices.

Component libraries Auto Layout Design Systems

Component libraries Auto Layout Design Systems Figma Wireframing/prototyping

Design Systems

1 year experience

Want to create a design system and don't know where to start? I can help. Creating a design system can be scary, it was for me. But not ...

Want to create a design system and don't know where to start? I can help. Creating a design system can be scary, it was for me. But not anymore. I will walk you step by step on how to create a design system: create color palettes for light and dark themes, create color primitives, then color semantics, then choose your typography and create the typography primitives, and then the typography semantics, etc. And then, I will show you how to use them to create a design system for you, for your client, or for your company :)

Figma

HTML/CSS

10 years experience | 97 endorsements

I've been working with HTML/CSS since I started in Web Design 15+ years ago so I'm very familiar with both technologies. No HTML/CSS cha...

I've been working with HTML/CSS since I started in Web Design 15+ years ago so I'm very familiar with both technologies. No HTML/CSS challenge is too small for me.

Wireframing/prototyping

10 years experience | 4 endorsements

Technical Prototypes I've always implemented my own designs with production-ready HTML, CSS, and jQuery using presentational JavaScript....

Technical Prototypes I've always implemented my own designs with production-ready HTML, CSS, and jQuery using presentational JavaScript. UX Prototypes My go-to tool is Figma 100%. I've also used InVision App, Flinto, MarvelApp, and other tools to create mobile prototypes. I can help you create virtually any kind of prototype for any project.

Mockups Wireframing/prototyping

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.

Web Design

Accessibility

10 years experience | 1 endorsement

Accessibility is a broad subject, but using basic accessibility features like ARIA roles can go a long way. I can help you make your p...

Accessibility is a broad subject, but using basic accessibility features like ARIA roles can go a long way. I can help you make your pages accessible with little effort.

Usability Accessibility

REVIEWS FROM CLIENTS

5.0

(146 reviews)

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

jai

November 2021

Amazing!

Caroline Cone

November 2021

SO HELPFUL AND CLEAR! Flexible schedule as well!

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

Sr. UI/UX - Digital 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 des...

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.
Heavy use of Figma to create wireframes, demos/prototypes, and technically sound designs.
Advice on UI/UX best practices and recommendations while looking for ways to innovate with new ideas.
Extend their solid brand in the newly created designs for the requested features.
Recommend messaging approach for marketing initiatives.

UIKit

Web Design

UX/UI Design

UIKit

Web Design

UX/UI Design

Zeplin

Figma

Interaction Design

Online HTML, CSS & Web Design Expert Mentor

Codementor

2016-04-01-Present

Live 1-to-1 expert Web/UI/UX Design mentor focused on helping other web professionals: Web Designers, UI/UX Designers, Front-End Devel...

Live 1-to-1 expert Web/UI/UX Design mentor focused on helping other web professionals: Web Designers, UI/UX Designers, Front-End Developers, Front-End Designers, etc.

I've helped dozens of people with all sorts of web design issues:

HTML
CSS
Sass
Layouts
Slideshows/carousels
Accordions
Page designs
Typography
Flexbox
Responsive designs
Hamburger menus
jQuery
Some vanilla JavaScript
SVG
Properly writing Sass/CSS
Box model
CSS animations

And many other subjects.

Profile & Rating: ⭐⭐⭐⭐⭐ (5.0) — https://www.codementor.io/@ricardozea/

Web Design

Coaching

Mentoring

Web Design

Coaching

Mentoring

UX/UI Design

Online Expert Mentor: HTML, CSS & Web Design

Codementor

2016-04-01-Present

Live 1:1 expert web design mentor focused on helping other web professionals: web designers, front-end developers, and front-end designer...

Live 1:1 expert web design mentor focused on helping other web professionals: web designers, front-end developers, and front-end designers. I've helped people with all sort of web design issues: HTML, CSS, Sass, layouts, slideshows/carousels, accordions, page designs, typography, flexbox, responsive designs, hamburger menus, jQuery, some vanilla JavaScript, SVG, properly writing Sass/CSS, box model, CSS animations, etc. Profile: https://www.codementor.io/ricardozea Average Rating: ⭐⭐⭐⭐⭐ (5.0) - https://www.codementor.io/ricardozea#/review

HTML/CSS

Responsive Design

Accessibility

HTML/CSS

Responsive Design

Accessibility

UI design

Web Design

usability principles

Sass

PROJECTS

MeTRA®

Tenet3

2019

MeTRA® is a web application for analyzing the economics of cyber security solutions in complex systems. MeTRA® enables manipulation of ...

MeTRA® is a web application for analyzing the economics of cyber security solutions in complex systems. MeTRA® enables manipulation of graphical system models and rapid calculations of complex system data for quantitative metrics and their resulting insights.

HTML/CSS

React

HTML/CSS

React

Website redesign: The Gym of West MiltonView Project

The Gym of West Milton

2019

Fully redesign and implement in HTML+CSS the new website for the gym. Provide support and maintenance.

HTML/CSS

Responsive Design

Web Design

HTML/CSS

Responsive Design

Web Design

css/sass