ویکی‌پدیا:طراحی

برای تغییر رنگ یا شکل یک الگو، ابزار یا کلا هر موردی که با رابطه کاربری سروکار دارد، ابتدا این راهنما را مطالعه فرمائید.

رنگ

سعی کنید تا حد امکان رنگ اضافه نکنید. اگر می‌خواهید رنگ به یک الگوی ناوبری یا جعبه اطلاعات بدهید، از خودتان بپرسید «آیا واقعا لازم است؟» این چشم‌نواز نیست با اینکه تمام رنگ‌ها روشن هستند. یکدستی رنگ‌ها باعث قوی‌تر شدن برند ویکی‌پدیا و چشم‌نوازی آن برای کاربران می‌شود.

برای همین تا حد امکان تلاش کنید از رنگ‌های تخته رنگ ویکی‌مدیا استفاده کنید. این رنگ‌ها عبارتند از:

نمونه رنگ	کد رنگ	معادل
	#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 استفاده کنید. خودتان را با معانی این کدها آشنا کنید.

در صورتی که به رنگی نیاز دارید که در تخته‌رنگ هست اما باید روشنتر یا تیره‌تر شود. سعی کنید در معیار HSL فام (Hue) رنگ را مطابق با تخته رنگ بردارید. این فام‌ها عبارتند از: ۲۲۰ برای آبی، ۱۶۷ برای سبز، صفر برای قرمز،‌ و ۴۵ برای زرد.

تضاد

اگر رنگی که استفاده می‌کنید قرار است پس‌زمینه باشد تا در آن متن قرار گیرد، حتما تضاد آن را با چند رنگ بررسی کنید:

1. ‎#000 (همان مشکی)
2. ‎#0645ad (رنگ آبی در پیوندهای موجود)
3. ‎#0b0080 (رنگ آبی پیوندی که بر آن کلیک شده‌است)
4. ‎#ba0000 (رنگ قرمز در پیوند ناموجود)
5. ‎#a55858 (رنگ قرمز پیوند ناموجود کلیک شده)

از این ابزار می‌توانید استفاده کنید و سعی کنید تا حد امکان آنها استاندارد WCAG را حداقل تا مرحله AA بگذرانند. در غیر این صورت متن برای افراد با مشکلات بینایی (به طور مثال افراد کوررنگ) ممکن است غیرقابل خواندن شود مثلا متن این الگو‌ برای افراد کوررنگ قابل خواندن نیست.

استاندارد طراحی

اگر دکمه یا المانی از فرم‌ها طراحی می‌کنید. آن را با استانداردهای طراحی رابط کاربری از نظر اندازه هماهنگ کنید به طور مثال از پیکسل استفاده نکنید. برای اطلاعات بیشتر استانداردها را بخوانید. به طور کلی توصیه می‌شود که از ابزارهای خود ویکی‌پدیا مانند OOjs-UI استفاده کنید که با استانداردها همخوانی دارند.

کتابخانه‌های رابط کاربری

از رابط کاربری jquery.ui استفاده نکنید و به جای آن از OOjs-UI استفاده کنید.

لوگوها

صفحهٔ اصلی: ویکی‌پدیا:راهنمای طراحی لوگوی مناسبتی

نمادها

برای نمادهای موضوعی مثلا الگوهای خرد بهتر است نمادهای یک‌دست سیاه‌وسفید استفاده شود. به طور مثال الگو:اخترشناسی-خرد را ببینید. برای مثال‌های بیشتر این صفحه را ببینید. برای رابط کاربری بهتر است از نمادهای OOjs UI استفاده کنید. مثلا برای نقشه از و برای قلب از استفاده کنید. برای دیدن فهرست همه آنها به این صفحه مراجعه کنید.

کشوی نمادها

به جای استفاده از نمادهای مختلف و متفاوت در الگوها بهتر است از نمادهای یکدست استفاده شود:

نماد	کاربرد
	هشدار جدی
	هشدار ملایم
	نقشه، جا
	نامه
	بحث
	اطلاعات