💬 «برای طراحی لی‌اوت‌های ضدضربه، واقعاً ضروریه.»

—کریس کاردل، Centennial Bank

🧮 این کتاب اصول ریاضی پشت طراحی خوب فرانت‌اند رو توضیح میده. پاول مک‌فدریز با سبک نوشتن روان و درگیرکننده‌اش نشون میده که ریاضی، وقتی درست و حساب‌شده داخل CSS و JavaScript استفاده بشه، چطور مشکل‌های روزمره طراحی رو حل میکنه؛ از تقسیم فضا و انتخاب رنگ‌های دسترس‌پذیر گرفته تا جای‌گذاری المان‌ها و طبیعی‌تر کردن حس انیمیشن. وقتی محاسبات پشت رنگ، هندسه و حرکت رو بفهمی، میتونی با دقت بیشتری طراحی کنی، رفتارهای عجیب رو با اعتمادبه‌نفس بیشتری دیباگ کنی و اینترفیس‌هایی بسازی که هم جذاب باشن، هم واقعاً کاربردی.

🧱 کتاب از پایه شروع میکنه. فصل‌های اول حداقل ریاضی‌ای رو معرفی می‌کنن که لازم داری، و بلافاصله همون مفاهیم رو به ابزارهای فرانت‌اند وصل میکنن. بعد از اون، کتاب وارد سیستم‌های واقعی لی‌اوت می‌شه و نشون میده یونیت‌های CSS چطور محاسبه میشن، ارث‌بری چطور روی سایزها اثر می‌ذاره، Box Model چطور فرمول‌ها رو تغییر می‌ده، و Grid و Flexbox چطور فضا رو بین المان‌ها تقسیم میکنن.

🎨 فصل‌های میانی روی تصمیم‌های ریسپانسیو و بصری تمرکز دارن؛ همون چیزهایی که طراحی وب مدرن رو شکل میدن. با لی‌اوت‌های مبتنی بر درصد و Viewport کار می‌کنی، منطق Media Queryها رو میبینی، سراغ Liquid Layoutها می‌ری و فرمول‌های سفارشی clamp() می‌سازی. همین‌طور ریاضی رنگ رو یاد می‌گیری؛ از تبدیل رنگ و پالت‌های هماهنگ گرفته تا نسبت کنتراست WCAG، آلفا کامپوزیتینگ و Blend Modeها. تایپوگرافی هم با همین نگاه عملی جلو می‌ره؛ با فرمول‌هایی برای سایز فونت، ارتفاع خط، طول خط، تایپ سیال و Modular Scale.

🌀 فصل‌های بعدی وارد ریاضی تعامل، حرکت و افکت‌های غنی‌تر UI می‌شن. از مثلثات برای منوهای دایره‌ای، اسپینرها، مسیرهای موجی و محاسبات جهت استفاده می‌کنی، و با وکتورها و هندسه یاد می‌گیری کامپوننت‌ها رو هم‌راستا کنی، افکت‌های Hover و Parallax بسازی و Drag کردن رو محدود کنی. بعد کتاب همین پایه رو به منحنی‌های Bézier، Easing در CSS، ریاضی Gestureها و انیمیشن‌های مبتنی بر Scroll وصل میکنه.

🧠 Math for Web Design یک مسیر راهنمای خیلی تمیزه از ریاضی‌ای که حرفه‌ای‌های فرانت‌اند واقعاً ازش استفاده می‌کنن. هر کانسپت دقیقاً جایی وارد می‌شه که یک مشکل واقعی در طراحی یا پیاده‌سازی رو حل می‌کنه. مثال‌های CSS و JavaScript باعث می‌شن توضیح‌ها روی زمین واقعی بمونن، و تمرین‌ها و جواب‌ها کمک می‌کنن کم‌کم دستت راه بیفته. چیزی که توی این کتاب به چشم میاد اینه که لایه‌به‌لایه یک مدل ذهنی ماندگار می‌سازه؛ از پایه‌ها شروع می‌کنه و اون‌ها رو به لی‌اوت، رنگ، تایپوگرافی، انیمیشن، تعامل و کار با Canvas وصل می‌کنه؛ طوری که بعداً هم بتونی مثل یک مرجع عملی برگردی سراغش.

📦 داخل کتاب چی هست

🧮 مبانی ریاضی برای CSS و JavaScript

📐 ریاضی Grid، Flexbox، لی‌اوت ریسپانسیو و سایزبندی سیال

🎨 رنگ، دسترس‌پذیری، تایپوگرافی و Blending

🌀 ریاضی هندسه، مثلثات، تعامل و انیمیشن

👤 درباره خواننده

👨‍💻 برای دولوپرها، دیزاینرها و متخصص‌های UX/UI که با CSS و JavaScript آشنا هستن. نیازی به دانش ریاضی پیشرفته نداری.

📖 فهرست مطالب

۱. مبانی ریاضی توسعه وب

۲. مبانی ریاضی برای JavaScript

۳. مبانی ریاضی برای CSS

۴. ریاضی CSS Grid

۵. ریاضی Flexbox

۶. ریاضی طراحی ریسپانسیو

۷. ریاضی رنگ

۸. ریاضی متن و تایپوگرافی

۹. مثلثات برای توسعه‌دهندگان وب

۱۰. وکتورها و هندسه در طراحی UI

۱۱. استفاده از منحنی‌های Bézier برای انیمیشن نرم

۱۲. انیمیشن‌های مبتنی بر فیزیک

۱۳. ریاضی تعامل و UIهای مبتنی بر Gesture

۱۴. ریاضی و طراحی مبتنی بر Canvas

✍️ درباره نویسنده

👨‍💼 پاول مک‌فدریز بیش از ۳۰ ساله که به‌عنوان نویسنده فنی حرفه‌ای کار می‌کنه. او نویسنده کتاب‌های Web Design Playground, Second Edition از انتشارات Manning و Build a Website with ChatGPT است. بیش از ۱۰۰ کتاب او در مجموع بیشتر از ۴ میلیون نسخه در سراسر دنیا فروش داشته‌اند.

"A necessity for designing bulletproof layouts.”

—Chris Kardell, Centennial Bank

Math for Web Design: Precision layout and animation explains the mathematical principles behind good frontend design. With his engaging writing, author Paul McFedries makes it clear how math, carefully applied in CSS and JavaScript, solves everyday design problems such as distributing space, choosing accessible colors, positioning elements, and making animation feel natural. When you understand the calculations behind color, geometry, and motion, you can design with more precision, debug behavior more confidently, and create interfaces that are both attractive and functional.

You’ll start with the basics. Early chapters introduce the minimum math you need, then connect it immediately to front-end tools. From there, the book moves into real layout systems, showing how CSS units are computed, how inheritance affects sizes, how the box model changes formulas, and how Grid and Flexbox distribute space.

The middle chapters focus on responsive and visual decisions that define modern web design. You’ll work through percentage-based and viewport-based layouts, media query logic, liquid layouts, and custom clamp() formulas. You’ll also learn the mathematics of color, including color conversion, harmonious palettes, WCAG contrast ratios, alpha compositing, and blend modes. Typography receives the same practical treatment, with formulas for font size, line height, line length, fluid type, and modular scales.

Later chapters move into the math of interaction, motion, and richer UI effects. You’ll use trigonometry for circular menus, spinners, wave paths, and directional calculations, along with vectors and geometry to align components, create hover and parallax effects, and constrain dragging. The book then extends this foundation into Bezier curves, CSS easing, gesture math, and scroll-based animation.

Math for Web Design is a masterful guided tour through the math front-end professionals actually use. Each concept appears because it solves a concrete design or implementation problem. CSS and JavaScript examples keep the explanations grounded, while exercises and solutions help you build fluency. You’ll appreciate how this book builds a durable mental model layer by layer, connecting fundamentals to layout, color, typography, animation, interaction, and canvas work in a sequence you can revisit as a practical reference.

What's inside

• CSS and JavaScript math fundamentals

• Grid, Flexbox, responsive layout, and fluid sizing

• Color, accessibility, typography, and blending

• Geometry, trigonometry, interaction, and animation math

About the Reader

For developers, designers, and UX/UI professionals who know CSS and JavaScript. No advanced math knowledge required.

Table of Contents

1. Web dev math fundamentals

2. Math basics for JavaScript

3. Math basics for CSS

4. CSS Grid math

5. Flexbox math

6. The mathematics of responsive design

7. The mathematics of color

8. Text and typography math

9. Trigonometry for web developers

10. Vectors and geometry in UI design

11. Using Bézier curves for smooth animation

12. Physics-based animations

13. Interactivity and gesture-based UI math

14. Canvas-based math and drawing

About the Author

Paul McFedries has been a professional technical writer for more than 30 years. He is the author of Manning’s Web Design Playground, Second Edition, and Build a Website with ChatGPT. His 100+ books have sold more than 4 million copies worldwide.