x3allamerican/design-skills-fleetsafety - الصفحة ٢

filter-and-faceting-ui

Use when designing filters for lists, tables, search results. Covers facet patterns (checkboxes, ranges, tags), the apply-filters-as-you-go vs apply-button decision.

لغة النص الأصلي: الإنجليزية

footer-design-systems

Use when designing or auditing a marketing site footer. Covers the canonical column structure, what belongs in a footer vs nav, how to add a 'big footer' newsletter / link-rich section, and what to skip.

لغة النص الأصلي: الإنجليزية

form-design-conversion

Use when designing any form (signup, settings, checkout, search). Covers field count, label position, inline validation, error messaging, autofill considerations, and the rules that 2x conversion on signup forms.

لغة النص الأصلي: الإنجليزية

gdpr-cookie-banner-design

Use when designing GDPR / CCPA cookie consent banners. Covers the patterns that are compliant + not annoying, the 'reject all' button placement, and granular controls.

لغة النص الأصلي: الإنجليزية

hero-section-anatomy

Use when designing a marketing hero section. Covers the canonical structure (badge, headline, sub, CTAs, trust strip), modern hero patterns, hero copywriting, hero imagery decisions, and the difference between converting heros and pretty ones.

لغة النص الأصلي: الإنجليزية

hover-state-systems

Use when designing hover states across a UI. Covers the canonical hover patterns (lift, glow, color shift, scale, content reveal), how to choose, and the hover states for every interactive element.

لغة النص الأصلي: الإنجليزية

icon-system-design

Use when establishing an icon library. Covers stroke vs fill, weight, sizing, the choice of icon library (Lucide, Phosphor, Heroicons), custom icon creation, and accessibility.

لغة النص الأصلي: الإنجليزية

illustration-system-design

Use when commissioning or creating illustrations for a SaaS product. Covers the canonical illustration styles (geometric, isometric, hand-drawn, abstract), when each works, sourcing strategies, and how to maintain consistency.

لغة النص الأصلي: الإنجليزية

inclusive-design-principles

Use when designing with inclusion at the center. Covers the difference between accessibility (rules) and inclusion (mindset), the principles of inclusive design, and how to research with underrepresented users.

لغة النص الأصلي: الإنجليزية

internationalization-ui

Use when designing UI for multi-language support. Covers text length variability, RTL support, date/number formats, and the technical patterns (i18n libraries, key-based translation).

لغة النص الأصلي: الإنجليزية

logo-design-principles

Use when designing or evaluating a logo. Covers the criteria for a great logo (memorable, scalable, distinctive, timeless), the canonical formats (icon + wordmark, monogram, wordmark only), and what to avoid.

لغة النص الأصلي: الإنجليزية

micro-animation-budget

Use when adding motion to a UI. Covers the principle of motion budget, the types of animations that earn their cost, easing curves, the duration scale, and when to default to no animation.

لغة النص الأصلي: الإنجليزية

mobile-app-shell-patterns

Use when designing the mobile app shell (or mobile-web equivalent). Covers tab bar, navigation drawer, header patterns, and the differences between native iOS, Android, and mobile-web.

لغة النص الأصلي: الإنجليزية

mobile-nav-patterns

Use when designing mobile navigation for a marketing site or web app. Covers hamburger vs bottom-tab vs slide-out, the gesture patterns, and the back-button behavior.

لغة النص الأصلي: الإنجليزية

modal-and-dialog-design

Use when designing modal dialogs, confirmation dialogs, side drawers, and overlays. Covers when to use each, sizing, escape behavior, focus trapping, and the patterns that don't feel obtrusive.

لغة النص الأصلي: الإنجليزية

modern-saas-design-principles

Use when designing or evaluating a SaaS marketing site or product UI in 2025+. Covers the canonical modern aesthetic, what's table-stakes, what's overused, and how to make design decisions that age past one trend cycle. Reference for every other skill in this…

لغة النص الأصلي: الإنجليزية

multi-brand-design-systems

Use when designing for multiple sub-brands (e.g., X3 Compass + X3 Fleet Safety + X3 Investment Group). Covers token inheritance, white-label patterns, and the shared-vs-distinct architecture.

لغة النص الأصلي: الإنجليزية

navigation-design-patterns

Use when designing or auditing a marketing site navigation. Covers sticky nav vs scrolling, logo placement, link order, sign-in/sign-up CTAs, mobile patterns, and the underused 'mega nav.'

لغة النص الأصلي: الإنجليزية

newsletter-design-patterns

Use when designing recurring newsletter templates. Covers single-topic vs multi-topic format, the header / banner, the sub-section pattern, archive linking, and what cadence supports what design.

لغة النص الأصلي: الإنجليزية

notification-preference-ui

Use when designing notification preferences. Covers channel selection (email, SMS, push), event-based vs role-based settings, snooze patterns, and the per-event-type granularity sweet spot.

لغة النص الأصلي: الإنجليزية

offline-state-design

Use when designing UI for offline + degraded-network states. Covers the patterns (banner, queue, retry, sync), and what to do when actions can't reach the server.

لغة النص الأصلي: الإنجليزية

og-image-design

Use when designing Open Graph / Twitter Card preview images. Covers sizing, the typography that works at preview size, brand consistency across multiple URLs, and dynamic OG image generation.

لغة النص الأصلي: الإنجليزية

onboarding-flow-design

Use when designing the first-time user experience. Covers the canonical onboarding patterns (checklist, progressive disclosure, tour, empty-state guidance), when to use each, and how to balance helpfulness with friction.

لغة النص الأصلي: الإنجليزية

pagination-and-infinite-scroll

Use when designing pagination for tables, search results, lists. Covers when to use pagination vs infinite scroll vs load-more, and the user expectations for each.

لغة النص الأصلي: الإنجليزية

performance-budget-design

Use when designing for performance. Covers Core Web Vitals, the design decisions that affect performance (web fonts, images, JS), and the budget framework.

لغة النص الأصلي: الإنجليزية

press-page-design

Use when designing a /press or /newsroom page. Covers the canonical sections (announcements, logos, press kit, media contact), and how to make it useful for both press AND prospective customers.

لغة النص الأصلي: الإنجليزية

pricing-strategy-display

Use when designing how pricing is displayed (not what the pricing IS). Covers the psychology of price perception, anchoring, the monthly-annual toggle, currency display, and the small choices that move conversion.

لغة النص الأصلي: الإنجليزية

pricing-table-design

Use when designing or auditing a SaaS pricing page. Covers the canonical 3–5 tier layout, featured-tier highlighting, per-feature comparison, monthly vs annual toggle patterns, overage handling, and the mistakes that kill conversion.

لغة النص الأصلي: الإنجليزية

print-and-pdf-design

Use when designing print and PDF output (invoices, reports, audit packets). Covers print stylesheets, PDF generation libraries, and the layout that survives both.

لغة النص الأصلي: الإنجليزية

privacy-policy-presentation

Use when designing privacy-policy and terms pages. Covers readability (sections, plain English summaries), the change log, when to require re-consent, and how to balance legal accuracy with usability.

لغة النص الأصلي: الإنجليزية

product-screenshot-design

Use when creating product screenshots for marketing pages and app stores. Covers the staging (real data vs sample), the device frame, callouts, and how to keep screenshots fresh across product changes.

لغة النص الأصلي: الإنجليزية

product-tour-design

Use when designing in-product tours and coachmarks for new users. Covers the trigger patterns, the dismiss-respect-the-user principle, and the alternative of contextual help.

لغة النص الأصلي: الإنجليزية

pwa-design-patterns

Use when designing a Progressive Web App. Covers the install prompt, offline state, push notifications, and the design differences between PWA and native.

لغة النص الأصلي: الإنجليزية

responsive-design-fundamentals

Use when establishing breakpoints or auditing responsive behavior. Covers standard breakpoints, mobile-first vs desktop-first, the four core responsive patterns, fluid type with clamp(), and the viewports to actually test.

لغة النص الأصلي: الإنجليزية

responsive-images

Use when designing responsive image strategy. Covers srcset, picture element, lazy loading, blur placeholders, and the trade-offs between performance and quality.

لغة النص الأصلي: الإنجليزية

right-to-left-design

Use when supporting right-to-left languages (Arabic, Hebrew, Persian). Covers direction flipping, layout mirroring, the icons that don't flip, and the CSS logical properties.

لغة النص الأصلي: الإنجليزية

saas-billing-ui-patterns

Use when designing the in-product billing UI: current plan, payment method, invoices, upgrade flow. Covers transparency, the cancel flow, dunning, and the trust-building patterns.

لغة النص الأصلي: الإنجليزية

saas-landing-page-anatomy

Use when designing a complete SaaS marketing landing page. Covers the canonical 9-section structure, how to choose which sections you need, and the order that converts.

لغة النص الأصلي: الإنجليزية

saas-onboarding-best-practices

Use when designing the first-run experience for a SaaS product. Covers checklist patterns, sample data, contextual help, time-to-value benchmarks, and the practices that maximize 90-day retention.

لغة النص الأصلي: الإنجليزية

saas-pricing-page-best-practices

Use when designing a SaaS pricing page specifically. Covers 3-tier vs 5-tier, anchoring techniques, the toggle, comparison tables, FAQ inclusion, and how to NOT use 'Contact sales' as a black box.

لغة النص الأصلي: الإنجليزية