وقتی تیم همزمان Glassmorphism، تایپوگرافی جسور، تصویر AI، سهبعدی و چند Microinteraction را به یک صفحه اضافه میکند، نتیجه معمولاً «بهروز» نیست؛ یک کلاژ بیقاعده است. ترند میتواند ماده خام باشد، اما آنچه تجربه را منسجم میکند آرتدایرکشن وب است: تصمیم روشن درباره اینکه برند چه میگوید، چگونه دیده و حس میشود، و این زبان بصری در صدها صفحه و حالت چگونه دوام میآورد.
این راهنما از Creative brief تا Production میرود: Visual thesis، Moodboard و Anti-moodboard، Style frame با محتوای واقعی، Composition، تایپوگرافی فارسی، رنگ، تصویر، Illustration، Icon، Motion و 3D، سپس Token/Handoff، Responsive art direction، Accessibility، Performance budget، Visual QA، Asset governance و Measurement. هدف یک صفحه زیبا نیست؛ سیستم بصری قابلتوضیح، قابلساخت، قابلآزمون و قابلنگهداری است.
آرتدایرکشن وب چیست؟
آرتدایرکشن مجموعه تصمیمهایی است که پیام و شخصیت برند را به یک زبان دیداری منسجم برای Context مشخص تبدیل میکند. این زبان باید انتخاب، رد و Trade-off بسازد؛ اگر فقط فهرستی از صفتهای مثبت مانند «مدرن، ساده و جذاب» باشد، تیمهای مختلف خروجیهای متفاوتی خواهند ساخت.
| حوزه | پرسش اصلی | خروجی |
|---|---|---|
| Brand strategy | چه وعده و جایگاهی داریم؟ | Purpose، Audience، Positioning |
| Art direction | این وعده چگونه دیده و حس میشود؟ | Visual thesis و Grammar |
| Visual design | صفحه/Asset مشخص چگونه ساخته میشود؟ | Layout، Type، Color، Media |
| UI design | کاربر چگونه میفهمد و عمل میکند؟ | Hierarchy، Control، State، Flow |
| Design system | تصمیمها چگونه تکرار و Govern میشوند؟ | Token، Component، Pattern، Policy |
آرتدایرکشن جای Brand strategy یا UX را نمیگیرد. ظاهر متمایز نمیتواند Value proposition مبهم یا Flow خراب را درمان کند؛ همانطور که Component library بدون Direction، هویت بصری نمیسازد.
ترند ورودی است، نه Direction
یک Trend ممکن است Signal، Capability، Pattern یا Style باشد. تصمیم درباره Adopt/Trial/Watch/Avoid را باید بیرون از پروژه آرتدایرکشن و با Evidence گرفت؛ آرتدایرکشن پس از آن میپرسد چگونه انتخاب تأییدشده را با Brand، Content و User context سازگار کنیم.
| ورودی ترندی | سؤال آرتدایرکشن | خروجی سالم | خروجی سطحی |
|---|---|---|---|
| Bold typography | کدام پیام واقعاً باید غالب شود؟ | Scale و Line-break قاعدهمند | همه Headingها عظیم |
| Glass surface | کجا Depth معنا دارد و Contrast حفظ میشود؟ | لایه محدود و قابلخواندن | Blur روی تمام Cardها |
| 3D | چه تصمیمی با Depth بهتر میشود؟ | Viewer هدفمند با Fallback | Hero سنگین تزئینی |
| AI imagery | Style، Rights و Truth contract چیست؟ | Asset قابلردیابی و Reviewشده | تصویر نامنسجم و کلیشهای |
| Brutalism | کدام هنجار را چرا میشکنیم؟ | تمایز کنترلشده | آشفتگی و مسیر مبهم |
مقاله ترندهای طراحی سایت ۲۰۲۶ مالک Radar، Scorecard و Pilot پذیرش Trend است؛ این مقاله مالک ترجمه انتخاب به سیستم بصری Production است.
Creative brief؛ قرارداد تصمیم
Brief باید پاسخهای قابلآزمون داشته باشد. «سایت باید حس حرفهای بدهد» کافی نیست.
| فیلد | پرسش | نمونه قابلدفاع |
|---|---|---|
| Audience | چه کسی، در چه Contextی؟ | مدیر خرید صنعتی روی Desktop و PDF-share |
| Task | کاربر چه تصمیمی میگیرد؟ | تشخیص Fit فنی و درخواست پیشفاکتور |
| Message hierarchy | اول/دوم/سوم چه بفهمد؟ | Capability→Evidence→Action |
| Brand tension | بین کدام دو کیفیت؟ | دقیق، اما نه سرد؛ جسور، اما نه پرهیاهو |
| Distinctive asset | چه چیزی قابلشناسایی است؟ | Diagram فنی با رنگ/خط اختصاصی |
| Constraints | چه محدودیتهایی واقعیاند؟ | فونت self-host، RTL، Android، تیم کوچک |
| Success/Guardrail | چه بهتر/بدتر نشود؟ | Task clarity بهتر؛ LCP/A11y بدتر نشود |
| Approver/Kill rule | چه کسی و چه زمانی رد میکند؟ | Owner واحد؛ رد Direction بدون Evidence ممنوع |
Brief باید Content و حالتهای واقعی را نام ببرد: عنوان بلند فارسی، عدد/قیمت، Error، جدول، فرم، Empty state، مقاله و Campaign. طراحی با Lorem ipsum جهت هنری را روی خوششانسترین محتوا میسنجد.
Research؛ مرجع را با تقلید اشتباه نکنید
Reference research برای شناخت Grammar، Category convention و White space رقابتی است؛ نه جمعکردن Screenshotهایی که فقط دوستشان داریم.
| منبع | چه استخراج میکنیم؟ | چه کپی نمیکنیم؟ |
|---|---|---|
| رقبای مستقیم | Convention و نقاط تشابه | هویت و Layout مشخص |
| Category مجاور | الگوی اعتماد/داده/روایت | Context نامرتبط |
| فرهنگ/معماری/چاپ | ریتم، Material، Composition | نماد بدون فهم فرهنگی |
| محصول واقعی | شکل، فرآیند، Texture و Evidence | تزئین Stock جای واقعیت |
| آرشیو برند | دارایی متمایز و Continuity | نوستالژی بیهدف |
برای هر Reference، Source URL، Creator، License/usage، تاریخ و چیزی که از آن آموختهاید ثبت کنید. Reference بدون Provenance بعداً به مشکل حق استفاده یا تقلید ناخواسته تبدیل میشود.
Moodboard باید فرضیه داشته باشد
Moodboard خوب مجموعهای از Evidence برای یک Direction است. هر تصویر باید نقش مشخصی داشته باشد: Composition، Type، Color، Texture، Image treatment، Motion یا Tone. Boardی که فقط «حالوهوای زیبا» دارد، بین Designer و Stakeholder قرارداد مشترک نمیسازد.
| لایه Board | سؤال | خروجی |
|---|---|---|
| Message | چه چیزی غالب است؟ | Hierarchy و Pace |
| Form | Geometry/edge/space چگونهاند؟ | Shape grammar |
| Type | صدا و ریتم متن چیست؟ | Typeface role |
| Color/Light | کدام Contrast و Mood؟ | Palette behavior |
| Media | واقعی، مستند، انتزاعی یا ساختهشده؟ | Photo/illustration rule |
| Motion | حرکت چه Jobی دارد؟ | Temporal grammar |
Anti-moodboard؛ مرزهای «نه»
Direction با ردکردن روشن میشود. Anti-moodboard نمونههایی را نشان میدهد که از نظر Stakeholder ممکن است جذاب باشند اما با Brief ناسازگارند.
- «نه» به تصویرهای AI براق بدون Evidence محصول.
- «نه» به Gradientهایی که Status و CTA را مبهم میکنند.
- «نه» به تایپ لاتینمحور که نسخه فارسی را درجهدو میکند.
- «نه» به Motion اسکرولی که Reading pace را میرباید.
- «نه» به Photo stock با ژست/محیط غیرواقعی برای بازار هدف.
- «نه» به لوگو/Pattern تکرارشونده در هر سطح.
هر «نه» یک دلیل داشته باشد: Brand، User، Accessibility، Performance، Rights یا Operations. سلیقه شخصی دلیل کافی نیست.
دو یا سه Territory واقعی بسازید
ارائه ده نسخه رنگی از یک Layout انتخاب نمیسازد. Territoryها باید Thesis متفاوت داشته باشند و هرکدام Trade-off نشان دهند.
| فیلد | Territory A | Territory B | Territory C |
|---|---|---|---|
| Thesis | Precision editorial | Human workshop | Dynamic systems |
| Hero evidence | داده/Diagram | آدم/فرآیند واقعی | Interactive model |
| Risk | سرد و شبیه گزارش | کلیشه Stock | هزینه Performance |
| Best fit | اعتماد فنی | خدمت انسانی | محصول قابلنمایش |
| Kill condition | Evidence بصری نداریم | Photography واقعی نداریم | Fallback/TCO رد میشود |
هر Territory باید روی یک محتوای مشترک آزمایش شود تا تفاوت Direction سنجیده شود، نه تفاوت Copy یا Information architecture.
Visual thesis را در یک جمله بنویسید
Thesis باید رابطه Message و Form را توضیح دهد:
«برای نشاندادن دقت مهندسی بدون سردی، شواهد واقعی را در Grid منظم با تایپ فارسی گرم و یک رنگ Accent محدود نمایش میدهیم.»
این جمله تصمیم میسازد: چرا Grid منظم، چرا Photo واقعی، چرا Accent محدود. «مدرن و مینیمال» چنین قدرتی ندارد.
Visual principles قابلآزمون
| اصل | Rule | Test |
|---|---|---|
| Evidence before decoration | هر Visual اصلی داده/محصول/فرآیند را نشان دهد | اگر حذف شود چه اطلاعاتی از دست میرود؟ |
| One dominant signal | هر Viewport یک Anchor غالب | Blur/5-second test |
| Calm structure, vivid proof | Layout آرام؛ Evidence پرجزئیات | Hierarchy و reading path |
| Persian first | شکست خط/عدد/RTL ابتدا فارسی | واقعیترین Copy فارسی |
| Motion explains state | حرکت Job و پایان دارد | Reduced-motion equivalence |
Style frame؛ Direction روی واقعیت
Style frame یک Screenshot تزئینی نیست؛ صفحه/بخشی با محتوای واقعی و حالتهای نماینده است که Grammar را آزمایش میکند. حداقل سه Frame بسازید:
- صفحه Marketing با Hero، Evidence و CTA؛
- صفحه Content یا Detail با متن بلند، جدول و Media؛
- حالت Product/UI با Form، Error، Disabled، Loading و Success.
| Stress case | چرا لازم است؟ |
|---|---|
| عنوان فارسی دو/سهخطی | Scale و line-height واقعی را آشکار میکند |
| عدد لاتین داخل RTL | BiDi و Alignment را میسنجد |
| تصویر با نسبت متفاوت | Crop/art-direction rule را میسنجد |
| Error و Warning | رنگ تزئینی را از Semantic جدا میکند |
| Zoom 200–400% | Reflow و Typography را میسنجد |
| Reduced motion/dark/high contrast | Preference layer را آشکار میکند |
Composition؛ ریتم پیش از Component
Composition قرارداد رابطه میان محتواست: Density، alignment، scale contrast، overlap، edge و negative space. Grid فقط تعداد ستون نیست.
| تصمیم | Rule نمونه | Failure |
|---|---|---|
| Reading width | متن طولانی از Measure خوانا فراتر نرود | سطرهای بسیار بلند |
| Density | اطلاعات فنی متراکم؛ Marketing تنفس بیشتر | یک Density برای همه |
| Anchor | یک عنصر غالب در هر Section | رقابت Heading/Image/CTA |
| Overlap | فقط برای رابطه معنایی | پوشاندن Content در Responsive |
| Asymmetry | با alignment پنهان و reading order سالم | آشفتگی یا DOM order غلط |
Typography فارسی؛ Art direction و مهندسی با هم
Typeface زیبا روی Poster ممکن است برای متن محصول، عدد، Bold، نیمفاصله یا Screen کوچک مناسب نباشد. Arabic & Persian Layout Requirements یک Draft Note جاری W3C برای نیازهای خط عربی/فارسی است؛ آن را منبع تکاملیابنده بدانید، نه گواهی تطابق.
| محور | سؤال | تست |
|---|---|---|
| Glyph | حروف/اعداد/علائم فارسی کاملاند؟ | Corpus واقعی |
| Weight | وزنها واقعاً متمایزند؟ | Body/Heading/Label |
| Metrics | Fallback و Webfont چقدر جابهجا میشوند؟ | CLS/line-wrap diff |
| Line height | اعراب/نقطه و خوانایی کافی است؟ | Mobile/zoom |
| BiDi | کد، URL، عدد و واحد درستاند؟ | mixed-direction cases |
| License | Web embedding/subset مجاز است؟ | license registry |
| Delivery | Subset/WOFF2/fallback policy چیست؟ | font trace/failed load |
راهنمای رسمی web.dev برای Font تأثیر Load و Swap بر FCP/LCP/CLS را توضیح میدهد. قرارداد جامع Locale، RTL، عدد، تاریخ و QA در راهنمای طراحی سایت فارسی آمده است.
Type roles، نه فقط Type scale
| Role | Job | Guardrail |
|---|---|---|
| Display | شخصیت و Anchor محدود | عنوان بلند/Zoom/Fallback |
| Heading | ساختار و Scan | Hierarchy معنایی مستقل از اندازه |
| Body | خواندن پایدار | Measure/line-height/weight |
| UI | Action و State فشرده | Label/number clarity |
| Data | عدد، واحد و مقایسه | tabular/locale/BiDi |
| Code/Technical | شناسه و دستور | LTR isolation و contrast |
Color system؛ Mood و Meaning را جدا کنید
رنگ Brand با رنگ Semantic یکی نیست. اگر Accent برند همزمان Success و CTA و لینک باشد، تغییر Context معنا را خراب میکند.
| لایه | مثال | قانون |
|---|---|---|
| Primitive | blue-600 | مقدار خام، بدون کاربرد |
| Semantic | text-primary، surface-raised | نقش و Context |
| Component | button-primary-bg | State/variant محدود |
| Expressive | campaign-gradient | Opt-in و Scope محدود |
DTCG Format 2025.10 نخستین نسخه Stable فرمت Token است و برای Type، Alias، Group و Interoperability قرارداد میدهد. جزئیات معماری سهلایه Token و Governance در راهنمای سیستم طراحی مالکیت دارد.
Contrast را روی ترکیبهای واقعی بسنجید
نسبت Contrast یک Swatch روی سفید، تمام حالتها را پوشش نمیدهد. متن روی Photo، Gradient، Video، Blur، Disabled و Hover باید جدا تست شود. WCAG 2.2 برای متن معمولی Level AA حداقل ۴.۵:۱ و برای متن بزرگ ۳:۱ تعیین میکند؛ Non-text control و Focus نیز قرارداد مستقل دارند.
- Foreground و Background را همزمان تعریف کنید.
- Overlay قابلپیشبینی برای Photo/Video داشته باشید.
- رنگ تنها نشانه Status، Link یا Selection نباشد.
- Forced colors و Preferenceهای Contrast را روی UI حیاتی بیازمایید.
- Logo exception را به Body text تعمیم ندهید.
Photography direction؛ «عکس واقعی» کافی نیست
| فیلد | Rule نمونه | Metadata لازم |
|---|---|---|
| Subject | فرآیند واقعی، نه ژست عمومی | who/what/location |
| Distance | Close detail برای Evidence، Wide برای Context | shot role |
| Light | طبیعی با Contrast کنترلشده | lighting treatment |
| Color grade | Skin/product truth حفظ شود | preset/version |
| Crop | Safe zones برای ratios مختلف | focal point |
| Rights | Scope/term/territory/consent | license/release |
Art direction تصویر با یک Crop واحد Responsive نیست. عنصر <picture> امکان انتخاب Sourceهای متفاوت را میدهد؛ Art-direction crop باید همان معنی را در Viewport متفاوت حفظ کند، نه فقط فایل کوچکتر بسازد.
Asset contract برای تصویر و ویدئو
| فیلد | نمونه |
|---|---|
| Purpose | Evidence محصول / Mood / Instruction |
| Ratios | ۱۶:۹، ۴:۵، ۱:۱ با Focal-safe area |
| Output | AVIF/WebP/JPEG fallback و Poster |
| Alt/caption | معنا و Context، نه Keyword stuffing |
| Performance | byte/dimension/loading/fetch priority |
| Rights | Source، creator، model release، expiry |
| Version | content hash و replacement history |
فرمت، Responsive source، LCP، Lazy loading، Alt و Media accessibility در راهنمای تصویر و ویدئو وب پوشش داده شده است.
Illustration و Icon؛ Grammar قابلترکیب
Illustration system فقط «یک Style» نیست. Perspective، Stroke، Corner، Fill، Light، Texture، Human representation، Metaphor و Complexity باید Rule داشته باشند.
| محور | Decision | Failure |
|---|---|---|
| Perspective | flat/isometric/spatial با کاربرد مشخص | ترکیب زاویههای ناسازگار |
| Stroke | scale-aware و optical rule | ناپدیدشدن در اندازه کوچک |
| Metaphor | فرهنگی و قابلفهم | کلیشه یا استعاره مبهم |
| People | representation آگاهانه | Token diversity تزئینی |
| Icon | معنی، label و optical grid | آیکون بدون Label در Task مهم |
| Complexity | Detail با اندازه مصرف | Illustration پیچیده در 24px |
تصویر مولد و AI؛ Provenance پیش از Style
AI میتواند Exploration و Asset production را سریع کند، اما Direction را تعیین نمیکند. Prompt و Output باید زیر همان Brief، Rights و Quality gate باشند.
| کنترل | پرسش | Evidence |
|---|---|---|
| Purpose | Ideation، final asset یا variation؟ | asset record |
| Tool/model | شرایط استفاده و Data policy چیست؟ | version/terms snapshot |
| Input rights | Referenceها مجازند؟ | source/license |
| Truth | محصول/فرد/رویداد را غلط نشان میدهد؟ | subject expert review |
| Consistency | Style/character/object پایدار است؟ | visual QA |
| Disclosure | آیا Context نیاز به اعلام دارد؟ | editorial policy |
| Exit | Source و امکان بازتولید داریم؟ | prompt/settings/output lineage |
Motion direction؛ حرکت باید Job داشته باشد
| Job | نمونه | Guardrail |
|---|---|---|
| Feedback | Action پذیرفته شد | فوری و غیرمبهم |
| Continuity | عنصر از کجا به کجا رفت | Focus/state حفظ شود |
| Hierarchy | تغییر مهم را برجسته کند | رقابت چند Motion |
| Orientation | ورود به Layer/Step | راه خروج و Back روشن |
| Story | رابطه/توالی را توضیح دهد | Skip/Pause و محتوای معادل |
| Delight | لحظه محدود برند | Task/Latency را نرباید |
MDN توضیح میدهد prefers-reduced-motion ترجیح سیستم کاربر برای کاهش Motion غیرضروری را منتقل میکند. نسخه Reduce نباید فقط Duration را کمی کوتاه کند؛ Motion محرک را حذف یا با تغییر غیرحرکتی معادل جایگزین کنید.
3D و Depth را از معماری فنی جدا نکنید
Art direction میتواند Depth را پیشنهاد دهد، اما تصمیم WebGL/WebGPU/Asset/GPU/Fallback باید با Engineering گرفته شود. اگر Value فقط Texture و سایه است، CSS/تصویر ممکن است کافی باشد. اگر فرم/زاویه/پیکربندی برای تصمیم کاربر ضروری است، راهنمای طراحی سهبعدی سایت قرارداد Production را از glTF تا Memory و Accessibility پوشش میدهد.
Core layer و Expressive layer
برای جلوگیری از تبدیل هر Campaign به Fork سیستم، Direction را دو لایه کنید:
| لایه | پایدار | قابلتغییر |
|---|---|---|
| Core | Typography body، semantics، spacing، components، a11y | با Version/مهاجرت |
| Expressive | کمپین color/texture/type display/media/motion | Opt-in، محدود و قابلحذف |
Expressive token نباید Semantic token را Override مبهم کند. Component باید Slot و Constraint مشخص داشته باشد تا Art direction بدون شکستن State/Accessibility وارد شود.
Responsive art direction؛ فشردهسازی Desktop نیست
| محور | Desktop | Small viewport decision |
|---|---|---|
| Hierarchy | چند لایه همزمان | یک Anchor و Sequence روشن |
| Image | Wide environmental crop | Subject crop یا Asset متفاوت |
| Type | Display بزرگ | Fluid scale و line-break کنترلشده |
| Overlap | عمق فضایی | Stack بدون پوشاندن محتوا |
| Motion | pointer/scroll affordance | touch، battery و reduced variant |
| Data | جدول/Diagram کامل | reflow یا progressive disclosure |
Breakpoint را از Device label نسازید؛ از شکست Content و Composition استخراج کنید. DOM order باید مستقل از جایگذاری بصری، Reading/focus order سالم داشته باشد.
Preference-aware direction
Theme فقط Light/Dark نیست. سیستم بصری باید با Preference و Forced environment نیز قابلاستفاده بماند.
prefers-color-scheme: Surface و Media مناسب، نه Invert کور.prefers-reduced-motion: حذف/جایگزینی Motion غیرضروری.prefers-contrast: در Browserهای پشتیبان، تقویت خوانایی با Fallback.forced-colors: حفظ Border/Focus/Control و عدم وابستگی به Fill.- Text zoom/spacing: جلوگیری از Clip و overlap.
راهنمای Media queryهای دسترسی MDN محدوده Preferenceها را توضیح میدهد؛ Progressive enhancement و Test واقعی ضروری است.
Accessibility Quality gate است، نه Style محدودکننده
Direction از ابتدا باید حالت Focus، Error، Disabled، Zoom، Reflow، Hover/Focus content، Target و Keyboard را ببیند. اصلاح Contrast در پایان ممکن است Palette و Hierarchy را از نو بسازد.
| Artifact | Gate |
|---|---|
| Moodboard | خطرهای Contrast/Motion/Image-of-text علامت خوردهاند |
| Style frame | Focus/Error/Zoom/long content حاضرند |
| Prototype | Keyboard/Screen reader/Reduced motion تست شدهاند |
| Component | Name/Role/Value/State/contrast contract دارد |
| Release | Automated + manual + assistive-tech sample |
مسیر Audit و Remediation در راهنمای ممیزی دسترسپذیری وب آمده است.
Performance budget بخشی از Direction است
| دارایی | Budget/Signal | تصمیم هنری |
|---|---|---|
| Font | family/weight/subset/bytes/CLS | Role کمتر یا System fallback |
| Hero image | dimensions/format/bytes/LCP | Crop سادهتر یا Art-directed source |
| Video | poster/codec/autoplay/data | Click-to-play یا static story |
| Motion | JS/main thread/compositor/INP | CSS/WAAPI یا حذف |
| 3D | asset/GPU/memory/energy | Viewer اختیاری/Fallback |
| Effects | blur/filter/paint/scroll | scope محدود و static variant |
Budget را بعد از Sign-off اضافه نکنید. Style frame باید با Asset و Font نزدیک به Production تست شود. CWV/RUM و تفکیک Lab/Field در راهنمای Core Web Vitals آمده است.
از Direction به Token و Rule
همه چیز Token نیست. مقدار تکرارشونده و Semantic relation میتواند Token شود؛ قاعده Composition یا Crop باید Pattern/Documentation باشد.
| تصمیم | Artifact مناسب |
|---|---|
| رنگ/فاصله/Type/Duration | Token با type/alias/description |
| Hero composition | Pattern + constraints + examples |
| Photo treatment | Asset rule + preset + do/don’t |
| Motion sequence | Motion spec + reduced variant |
| Illustration grammar | Style guide + source templates |
| Campaign expression | Theme/expressive layer + expiry |
Handoff contract
| بسته | باید شامل شود |
|---|---|
| Decision record | Brief، thesis، alternatives، reasons، approver |
| Tokens | source، type، semantic alias، modes، version |
| Components | states، content bounds، slots، responsive behavior |
| Assets | source، crops، formats، rights، alt/caption، expiry |
| Motion | job، trigger، duration/easing، interruption، reduced |
| QA | reference viewport، tolerance، stress cases، owners |
| Release | feature flag، fallback، rollback، observation window |
Redline عددی بدون Intent کافی نیست. Developer باید بداند کدام Rule invariant، کدام مقدار flexible و در حالت ناشناخته چه تصمیمی بگیرد.
Visual QA؛ Pixel-perfect کافی نیست
QA باید Fidelity و رفتار را با هم بسنجد.
| لایه | سؤال | روش |
|---|---|---|
| Semantic | Hierarchy و state درستاند؟ | DOM/a11y/manual |
| Token | مقدار و mode درست resolve شده؟ | computed style/token test |
| Composition | Anchor/spacing/crop در Content واقعی؟ | screenshot matrix |
| Typography | font/weight/line-break/fallback؟ | font failure/locale corpus |
| Media | focal point/rights/alt/performance؟ | asset manifest/network |
| Motion | job/interruption/reduced variant؟ | behavior recording |
| Preference | dark/contrast/forced/zoom؟ | OS/browser matrix |
Screenshot diff باید Regionهای Dynamic، Font rasterization و Tolerance را بشناسد. عبور Visual diff تضمین Accessibility یا UX نیست؛ شکست کوچک نیز همیشه Defect نیست. Severity را بر اساس Task/Brand/Reach تعیین کنید.
Content stress test
- عنوان ۳۰، ۶۰ و ۱۲۰ نویسهای فارسی؛
- نام شخص/محصول بسیار کوتاه و بلند؛
- عدد فارسی و لاتین، درصد، ریال/تومان و واحد؛
- تصویر Portrait/Landscape و نبود تصویر؛
- ۰، ۱ و ۲۰ Badge/Tag؛
- Error چندخطی، Translation ناقص و Empty state؛
- User-generated content با نسبتهای پیشبینینشده؛
- Zoom، Text spacing override و Narrow viewport.
Asset registry و Rights governance
| فیلد | چرا لازم است؟ |
|---|---|
| Asset ID/version/hash | ردیابی مصرف و Rollback |
| Creator/source | Provenance |
| License/release | حق استفاده، تغییر و انتشار |
| Territory/channel/term | محدوده حقوق |
| Subjects/consent | ریسک حریم/بازنمایی |
| Alt/caption/transcript | Accessibility و Content |
| Derivatives/crops | رابطه Source و Output |
| Owner/expiry | Refresh/retire |
Governance؛ Direction چگونه زنده میماند؟
| تصمیم | مالک | Cadence |
|---|---|---|
| Core visual principles | Brand/Design lead | سالانه/تغییر استراتژی |
| Token/theme | Design system team | Release versioned |
| Asset approval | Art/Content/Legal | پیش از انتشار |
| Campaign expression | Campaign owner | با expiry |
| A11y/performance | Quality owners | CI + audit دورهای |
| Visual regression | Engineering/QA | هر Release |
| Drift audit | Design ops | ماهانه/فصلی |
Measurement؛ زیبایی را با Click تنها نسنجید
| فرضیه | Metric | Guardrail |
|---|---|---|
| Hierarchy واضحتر است | Task success، time، misclick | Accessibility/reading |
| Brand متمایزتر است | Recognition/recall qualitative test | Trust/clarity |
| Evidence بهتر دیده میشود | comprehension و evidence interaction | scroll ≠ فهم |
| Media کمک میکند | decision confidence/support questions | LCP/data cost |
| Motion Orientation میدهد | navigation error/backtrack | reduced-motion parity |
CTR بالاتر ممکن است از اغراق یا Novelty کوتاهمدت بیاید. Measurement باید Outcome، Trust و Guardrail را کنار هم ببیند. قرارداد داده و تصمیم UX در راهنمای UX دادهآگاه توضیح داده شده است.
ملاحظات ایران
| ریسک/فرصت | کنترل |
|---|---|
| فونت فارسی و License | حق Web embedding/subset، Source و fallback |
| RTL/BiDi/اعداد | Corpus واقعی، dir/lang، logical layout و QA |
| ریال/تومان و شمسی | Label صریح، Locale contract و مثال واقعی |
| Android/اپراتور/ISP | Asset/font/CDN روی شبکه واقعی |
| ابزار/SaaS خارجی | Eligibility، پرداخت، Export، mirror و exit |
| بازنمایی فرهنگی | Research محلی، Review و پرهیز از کلیشه |
| عکاسی/مدل | Consent، Scope استفاده و قرارداد روشن |
| هزینه ارزی | TCO سناریویی و مالک Source files |
TCO آرتدایرکشن
| Bucket | Driver | هزینه پنهان |
|---|---|---|
| Discovery | Research/brief/territory | تصمیمگیری Stakeholder |
| Production | Photo/illustration/type/motion/3D | Rights و Retake |
| Systemization | Token/pattern/component/docs | Migration |
| Implementation | Responsive/preference/content states | edge cases |
| Quality | A11y/performance/visual/device QA | matrix و remediation |
| Operations | asset registry/drift/refresh | expiry و vendor change |
| Exit | source/export/license transfer | lock-in |
RACI
| کار | Responsible | Accountable | Consulted |
|---|---|---|---|
| Brief/Thesis | Art director/Brand designer | Brand/Product lead | Research/Content |
| UX/Hierarchy | Product designer | Product lead | Content/Analytics |
| Tokens/Components | Design system/Frontend | Engineering/Design lead | A11y |
| Assets/Rights | Creative/Content ops | Publisher | Legal |
| Motion/3D | Motion/Creative tech | Art director | Performance/A11y |
| Visual QA | Design QA/Frontend | Release owner | Content/A11y |
| Measurement | Research/Analytics | Product lead | Brand/Design |
Runbook: خروجی زیباست اما برند را نشان نمیدهد
- سلیقه را کنار بگذارید و Brief/Thesis/Distinctive asset را بازخوانی کنید.
- مشخص کنید کدام Rule به Category convention یا Reference رقیب نزدیک شده است.
- Logo را بزرگتر نکنید؛ Form/Type/Media/Voice متمایز را اصلاح کنید.
- با Recognition test کوچک، نسخهها را بدون نام برند مقایسه کنید.
- Decision record را بهروز و Rule قابلتکرار بسازید.
Runbook: پیادهسازی با Style frame فاصله دارد
- اختلاف را به Token، Asset، Composition، Typography، State یا Environment طبقهبندی کنید.
- Source of truth و Version فایل/Token/Font/Asset را تطبیق دهید.
- Content واقعی و Viewport مرجع را یکسان کنید.
- اگر Spec ناممکن است، Design/Engineering Trade-off را ثبت؛ Patch محلی پنهان نسازید.
- Visual/behavior regression test برای خطا اضافه کنید.
Runbook: فونت یا تصویر خارجی لود نمیشود
- Fallback باید Content و Task را حفظ کند؛ Blank/clip قابلقبول نیست.
- DNS/TLS/HTTP/CORS/cache/MIME را با ISP/Device متاثر تفکیک کنید.
- Font metric/Crop/Layout shift را پس از Fallback بررسی کنید.
- Mirror یا Asset self-host تأییدشده را فعال کنید.
- License، CDN dependency و Exit plan را پس از Incident اصلاح کنید.
Runbook: کمپین سیستم را Fork کرده است
- Core invariant و Expressive overrideها را Diff کنید.
- Semantic/A11y state را فوراً به Core برگردانید.
- Overrideهای ارزشمند را به Theme/Pattern رسمی با Scope/expiry تبدیل کنید.
- CSS/Asset/Component محلی بلاصاحب را حذف یا Deprecate کنید.
- برای Campaign بعدی Slot و approval gate روشن بسازید.
برنامه ۹۰روزه
روز ۱ تا ۳۰: Brief و Territory
- Audience/Task/Message/Brand tension/constraints/guardrails را مصوب کنید.
- Reference research با Provenance و Anti-moodboard بسازید.
- دو تا سه Territory با Thesis/Risk/Kill condition ارائه کنید.
- یک Direction را روی Content مشترک و Stress case انتخاب کنید.
روز ۳۱ تا ۶۰: Systemize و Prototype
- Style frameهای Marketing/Content/Product state را تکمیل کنید.
- Type/Color/Media/Illustration/Motion/Preference rules را بنویسید.
- Core/Expressive layer، Token/Pattern/Asset contract و Rights registry بسازید.
- Prototype responsive فارسی را با A11y/Performance budget تست کنید.
روز ۶۱ تا ۹۰: Build، QA و Govern
- Handoff versioned، Component state و Visual QA matrix را اجرا کنید.
- Content/font/asset/preference/failure stress test بگیرید.
- Release محدود، RUM/UX/brand evidence و Runbookها را بررسی کنید.
- Drift cadence، owner، expiry و backlog اصلاح را تصویب کنید.
اشتباههای پرتکرار
| اشتباه | پیامد | اصلاح |
|---|---|---|
| Moodboard بدون Thesis | تفسیر چندگانه | role/reason/anti-board |
| Territoryهای شبیه | انتخاب رنگ، نه Direction | thesis/risk متفاوت |
| Lorem ipsum | شکست دیرهنگام فارسی | real/stress content |
| همه چیز Token | نامگذاری پیچیده و بیمعنا | token vs pattern vs rule |
| Brand color برای Status | معنی مبهم | semantic layer |
| یک Crop برای همه | سوژه/معنی از دست میرود | art-directed sources/focal point |
| Motion تزئینی دائمی | حواسپرتی/هزینه | job/end/reduced variant |
| A11y در انتها | بازطراحی Palette/State | quality gate از Moodboard |
| Pixel-perfect تنها | State/Content/Behavior نادیده | multilayer visual QA |
| Asset بدون Rights/Owner | ریسک حقوقی و Stale content | registry/version/expiry |
چکلیست تحویل آرتدایرکشن
- Brief برای Audience/Task/Message/Tension/Constraint/Success/Guardrail مصوب است.
- Research provenance و Anti-moodboard مرزها را روشن میکنند.
- Visual thesis و پنج اصل قابلآزمون نوشته شدهاند.
- Style frame با محتوای واقعی، فارسی، State و Preference ساخته شده است.
- Composition/Type/Color/Photo/Illustration/Icon/Motion/3D rule دارند.
- فونت، Media، Rights، Crop، Alt، Performance و Fallback قرارداد دارند.
- Core و Expressive layer، Token/Pattern/Component boundary روشن است.
- Responsive، RTL/BiDi، Zoom، Contrast، Focus و Reduced motion تست شدهاند.
- Handoff و Decision record Versioned و Source of truth معلوم است.
- Visual QA شامل Token/Composition/Type/Media/Motion/Preference/Content است.
- Asset registry، Owner، License، Expiry و Drift cadence وجود دارد.
- Measurement، TCO، RACI، Release/rollback و Runbook تصویب شدهاند.
پرسشهای متداول
آرتدایرکشن وب چیست؟
آرتدایرکشن وب ترجمه استراتژی، پیام و شخصیت برند به یک زبان بصری منسجم برای وب است؛ شامل Visual thesis، Composition، Type، Color، Media، Motion و قواعد اجرای Responsive/Accessible. خروجی فقط Mockup نیست، بلکه Decisionها و Ruleهای قابلتکرار است.
تفاوت آرتدایرکشن و طراحی UI چیست؟
آرتدایرکشن تعیین میکند تجربه چگونه دیده و حس شود؛ UI design تعیین میکند کاربر چگونه محتوا و Controlها را بفهمد و استفاده کند. این دو همپوشانی دارند اما جای هم نیستند: Direction بدون Usability نمایشی، و UI بدون Direction معمولاً بیهویت میشود.
Moodboard خوب چه اجزایی دارد؟
هر Reference باید نقش مشخصی در Message، Composition، Type، Color/Light، Media یا Motion داشته باشد و Source/Reason آن ثبت شود. Anti-moodboard نیز مرزهای «نه» را با دلیل Brand/User/A11y/Performance/Rights روشن میکند.
چگونه آرتدایرکشن را به کد منتقل کنیم؟
مقادیر تکرارشونده و Semantic به Token، رفتار UI به Component contract، Composition به Pattern/constraint، Media به Asset contract و Motion به Temporal spec تبدیل میشوند. Handoff باید Source/version، State، Responsive rule، Preference، Fallback و QA reference داشته باشد.
آرتدایرکشن فارسی چه تفاوتی دارد؟
فارسی باید از ابتدا با Typeface/Glyph/Weight واقعی، RTL و BiDi، عنوان بلند، نیمفاصله، عدد/واحد، ریال/تومان، تاریخ، Line break، Font license/delivery و Device/ISP ایران آزموده شود. طراحی لاتین و ترجمه دیرهنگام معمولاً Hierarchy و Composition را میشکند.
جمعبندی: Direction یعنی تصمیمهای کمتر و منسجمتر
آرتدایرکشن موفق تعداد افکتها را زیاد نمیکند؛ تعداد تصمیمهای تصادفی را کم میکند. Brief روشن میگوید برای چه کسی و چه Taskی طراحی میکنیم، Thesis رابطه Message و Form را میسازد، Grammar انتخابهای روزمره را هماهنگ میکند و Handoff/QA/Governance مانع Drift میشوند.
برای شروع، یک صفحه واقعی با سختترین محتوای فارسی را انتخاب کنید. سه Board نسازید که فقط رنگشان فرق دارد؛ دو Territory با Thesis و Risk متفاوت بسازید، یک Style frame را با Font/Asset نزدیک Production پیاده کنید و پیش از گسترش، Accessibility، Performance و تشخیص برند را با Evidence بسنجید.
