ویکی‌گفتاورد:طراحی
اگر می‌خواهید رنگ یا شکل یک الگو را تغییر دهید یا ابزاری بنویسید یا کلا هرچه با رابط کاربری سروکار دارد را می‌خواهید تغییر دهید. این را بخوانید.
رنگ
[ویرایش]سعی کنید تا حد امکان رنگ اضافه نکنید. اگر می‌خواهید رنگ به یک الگوی ناوبری یا جعبه اطلاعات بدهید. از خودتان بپرسید. آیا واقعا لازم است؟ این چشم‌نواز نیست با اینکه تمام رنگ‌ها روشن هستند. یکدستی رنگ‌ها باعث قوی‌تر شدن برند ویکی‌پدیا و چشم‌نوازی آن برای کاربران می‌شود.
برای همین به شدت تلاش کنید از رنگ‌های تخته رنگ ویکی‌مدیا استفاده کنید. این رنگ‌ها عبارتند از:
| نمونه رنگ | کد رنگ | معادل |
|---|---|---|
| #fff | سفید | |
| #f8f9fa | ||
| #eaecf0 | ||
| #c8ccd1 | ||
| #a2a9b1 | ||
| #72777d | ||
| #54595d | ||
| #222 | ||
| #000 | سیاه | |
| #eaf3ff | (تقریبا) آبی روشن | |
| #36c | (تقریبا) آبی | |
| #2a4b8d | (تقریبا) آبی تیره | |
| #fee7e6 | (تقریبا) قرمز روشن | |
| #d33 | (تقریبا) قرمز | |
| #b32425 | (تقریبا) قرمز تیره | |
| #fef6e7 | (تقریبا) زرد روشن | |
| #fc3 | (تقریبا) زرد | |
| #ac6600 | (تقریبا) زرد تیره | |
| #d5fdf4 | (تقریبا) سبز روشن | |
| #00af89 | (تقریبا) سبز | |
| #14866d | (تقریبا) سبز تیره |
این رنگ‌ها در همه جا استفاده شده‌اند. از پس زمینه جعبه اطلاعات بگیرید تا نماد صفحات ابهام‌زدایی. حتی اگر موردی هست که رنگ در اینجا نیست. مثلا بنفش. سعی کنید رنگی استفاده کنید که قبلا استفاده شده باشد. مثلا #9932cc که در الگو:Ambox استفاده شده‌است.
سعی کنید از ارقام کوچک استفاد کنید. مثلا #fff به جای #FFF. خودتان را با معانی این کدها آشنا کنید.
تضاد
[ویرایش]اگر رنگی که استفاده می‌کنید قرار است پس‌زمینه باشد تا در آن متن قرار گیرد. حتما تضاد آن را با چند رنگ بررسی کنید:
- #000(همان مشکی)
- #0645ad (رنگ آبی در پیوندهای موجود)
- #0b0080 (رنگ آبی پیوندی که بر آن کلیک شده‌است)
- #ba0000 (رنگ قرمز در پیوند ناموجود)
- #a55858 (رنگ قرمز پیوند ناموجود کلیک شده)
از این ابزار می‌توانید استفاده کنید. سعی کنید تا حد امکان آنها استاندارد WCAG را حداقل تا مرحله AAA بگذرانند. در موارد خاص AA هم قابل قبول است. در غیر این صورت متن برای افراد با مشکلات بینایی (به طور مثال افراد کوررنگ) ممکن است غیرقابل خواندن شود. مثلا متن این الگو برای افراد کوررنگ قابل خواندن نیست.
استاندارد طراحی
[ویرایش]اگر دکمه یا المانی از فرم‌ها طراحی می‌کنید. آن را با استانداردهای طراحی رابط کاربری از نظر اندازه هماهنگ کنید. از پیکسل استفاده نکنید. به طور مثال ارتفاع ورودی متن باید 2em باشد. برای اطلاعات بیشتر استانداردها را بخوانید. به طور کلی توصیه می‌شود که از ابزارهای خود ویکی‌پدیا مانند OOjs-UI استفاده کنید که با استانداردها همخوانی دارند.
کتابخانه‌های رابط کاربری
[ویرایش]از رابط کاربری jquery.ui استفاده نکنید. از OOjs-UI استفاده کنید.