search
حلقه سفید

نحوه ایجاد دستورالعمل ها و استانداردها برای طراحی وب سایت ها یا برنامه ها

اشتراک گذاری در :
انتشار : 1401/05/26
نحوه ایجاد دستورالعمل ها و استانداردها برای طراحی وب سایت ها یا برنامه ها

در حالی که برخی روش ها ممکن است متفاوت باشند، یکی از مهم ترین نقاط شروع برای هر پروژه طراحی وب سایت، مجموعه ای از دستورالعمل ها است.

ایجاد دستورالعمل ها و استانداردها برای هر پروژه طراحی وب سایت (حتی اگر در اصل در محدوده نباشد) می تواند گردش کار شما را افزایش دهد و همچنین طراحی وب سایت شما را ثابت نگه می دارد و امیدواریم به روشی درست توسعه یابد.

این واقعاً مسئولیت یک طراح طراحی وب سایت است. شما نمی توانید یک توسعه دهنده طراحی وب سایت را سرزنش کنید که آن پیکسلی که هستید نیست. آنها را راهنمایی کنید.

با ایجاد سه نوع سند اصلی شروع کنید

  • راهنمای سبک طراحی وب سایت
  • سند اجزاء طراحی وب سایت
  • مشخصات اطراف صفحات طراحی وب سایت

این فرآیند برای طراحان طراحی وب سایتی که توسعه front-end طراحی وب سایت را نیز انجام می دهند توصیه نمی شود. اگر اینطور است، مرحله دیگری را اضافه کنید که در آن یک پلت فرم جداگانه با راهنمای سبک کدگذاری شده و اجزای کدگذاری شده ایجاد کنید. حتی ممکن است بخواهید از مرحله ۲ شروع به کدنویسی کنید و مراحل را کنار بگذارید.

دو نمونه معروف از این فرآیند Bootstrap و Purecss هستند. بله، این فریم ورک‌های فرانت ‌اند طراحی وب سایت کامل هستند و احتمالاً بسیار بزرگ‌ تر از پروژه‌ طراحی وب سایت ای هستند که روی آن کار می‌کنید، اما نکته را درست متوجه شدید؟

1. راهنمای سبک طراحی وب سایت

یک راهنمای سبک طراحی وب سایت ، سبک هر عنصر را در یک پروژه طراحی وب سایت تعریف می کند. این اساساً راهنمای سبک کلی برای توسعه دهندگان طراحی وب سایت است. رنگ، تایپوگرافی، جداول، موارد فهرست، استفاده از نمادها، تقسیم‌ کننده‌ها و موارد دیگر همه در این سند با جزئیات تعریف شده‌اند. هنگامی که عناصر را ایجاد کردید بکشید و رها کنید و قوانین را برای هر عنصر تنظیم کنید.

* نکته: عناصر را نام ببرید. حتی اگر توسعه‌ دهندگان طراحی وب سایت در نهایت از کلاس‌ های مختلفی استفاده کنند، می‌ تواند هنگام مراجعه به این عناصر مفید باشد. فرض کنید برای طراحی وب سایتی با نوار ناوبری گرادیان رنگ های تم متفاوتی دارید. رجوع به #PrimaryThemeColor – #SecondaryThemeColor به جای نامگذاری رنگ های مختلف بسیار آسان تر است.

2. سند اجزاء

از بسیاری جهات این سند با راهنمای سبک یکسان است اما در سطح متفاوتی است. کامپوننت ها عناصری مانند جعبه های ورود، لغزنده، چرخ فلک، سرصفحه، پاورقی و غیره هستند.

این با راهنمای کلی متفاوت است زیرا این سند به شما کمک می‌کند تا در طول فرآیند طراحی وب سایت یکپارچگی داشته باشید. تشخیص عناصر تکراری برای توسعه دهندگان طراحی وب سایت آسان تر است، که این روند را تسریع می کند.

همانطور که در بالا می بینید، هنگام کار بر روی پروژه های طراحی وب سایت پاسخگو، مفید است که "رفتار" هر یک از اجزاء را در نظر بگیرید. باز هم، یک توسعه‌ دهنده معمولی طراحی وب سایت روی این نوع چیزها تمرکز نمی‌ کند (و نباید بخواهد).

اگر این واقعیت را برجسته نکنید که متن CTA در تلفن همراه در مرکز قرار دارد، آنها متوجه نمی شوند. به من اعتماد کن.

هنگامی که فکر کردید کارتان تمام شده است، اجزای خود را بکشید و رها کنید تا مطمئن شوید که از ابتدا قوانینی را برای جلوگیری از ویرایش بی ‌پایان بالشتک ‌ها، رنگ‌ ها و اندازه فونت برای ماکت‌های نهایی تنظیم کرده‌اید.

* نکته: اجزا را برای جدا کردن فایل‌های psb. صادر کنید. مزیت بزرگ این است که وقتی مشتری شما تصمیم می گیرد چیزها را تغییر دهد، فقط باید آن فایل psb. خاص را به روز کنید. این یک زمان واقعی است.

3. سند مشخصات طراحی وب سایت

آخرین مرحله تعیین صفحات طراحی وب سایت است. از آنجایی که قبلاً سبک عناصر طراحی وب سایت و مؤلفه‌ ها را تنظیم کرده‌ایم، تنها چیزی که باقی می ‌ماند مراجعه به این مؤلفه ‌ها و تعریف حاشیه‌ ها (نام‌گذاری و فاصله طراحی وب سایت) است.

ما از روش زیر برای فروشگاه اینترنتی آدیداس و برای پلتفرمی به این بزرگی استفاده کردیم، تجزیه آن به این شکل واقعا مفید است:

  • اجزایی که در چندین صفحه استفاده می شوند را به طور جداگانه صادر کنید.
  • صادرات صفحات طراحی وب سایت

برای هر دو نوع صادرات از 3 ترکیب لایه استفاده می کنیم که به راحتی صادر می شود:

  • Popup_Normal.jpg
  • Popup_Naming.jpg
  • Popup_Spacing.jpg

من می دانم که همه اینها به نظر درد می آید، اما به عنوان یک طراح تعامل بسیار مهم است.

خوشبختانه، چند پلاگین عالی وجود دارد که در زمان شما صرفه جویی می کند. یکی از آنها specKing است. این ابزار می تواند همه موارد ذکر شده را مشخص کند، اما من ترجیح می دهم از آن برای فاصله گذاری طراحی وب سایت و برچسب ها استفاده کنم.

راهنمایی یا پیشرفتی دارید؟ ما دوست داریم برخی از بازخوردها را در مورد این روش ایجاد مشخصات برای یک پروژه طراحی وب سایت بشنویم. نظرات خود را در نظرات به اشتراک بگذارید.