طراحی گرافیکی برای قالب بوت استرپی چگونه صورت می گیرد

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

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

کلا کار اینطوریه که اون به تو یه عکس تحویل می ده و شما عکس رو نگاه می کنی و باید تا اونجا که می شه دقیق پیاده سازیش کنی و اون عکس رو تبدیل به کد کنی

@milad

معمولا روال کار این‌طوره که طرح گرافیکی رو به ‌کسی که رابط کاربری (User Interface) رو طراحی میکنه، می‌دهند.
حال این طراح چند راه جلوی پاش هست:

• استفاده از یکی از فریم‌ورک های CSS مثل bootstrap, bulma و ...
• ویرایش یکی از فریم‌ورک های CSS و تبدیل آن به طرح مورد نظر
• طراحی یک رابط کاربری اختصاصی از پایه

در مورد سوال دوم:
طراح گرافیک قرار نیست دانشی از HTML و CSS داشته باشه. تنها باید سیستم گریدبندی صفحات رو رعایت کنه

و سوال سوم:
اجزای گرافیکیِ آماده که نه اما بعضی از طراحان UI ، طرح کلی کارهاشونو بصورت فایل psd به اشتراک می‌گذارند مثلا سایت: https://www.freepik.com/free-psd/ui-kit
و اگر سرچ کنید تو نت باز هم پیدا می‌کنید.

@SeyedMH.Mosavi
@ali.bayat
از پاسخگویی ِ هردوی شما بزرگواران سپاسمندم

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

سلام
@milad

PSD رو طراح گرافیک به فرانت اند کار تحویل میده
فرانت اند کار نگاهی میکنه ، المان هارو تشخیص میده ، بر اساس سیستم گرید ، اون هارو پیاده سازی میکنه با بوت استرپ
و در اخر میاد هر المانی رو نسبت به طرح توسط کد های CSS شخصی سازی میکنه تا به طرح مورد نظر برسه.

@milad
همونطور که گفته شد وقتی گرافیست طراحی رو انجام می ده به خروجی بسته به نیاز شما بهتون می ده. شما اون خروجی که می تونه عکس باشه رو به کارفرما نشون می دی و اگر تایید کرد شروع می کنی به پیاده سازی اگر هم حرف و نظری داشت گرافیست دوباره کار رو تغییر می ده و در انتها باز می رسه دست شما.
اما اینکه به گرافیست بگی بر اساس مولفه های بوت استرپی طراحی کنه چنتا نکته داره:
اول اینکه منظورت از مولفه های بوت استرپی چی هست؟ اگر منظورت رنگ دکمه و قیافه این موارده که خیلی راحت می تونی شخصی سازیش کنه. کاری نداره که. دکمه آبی بوت استرپ رو شما زرد کن! یا اگر چیزه خاصی توش هست که داخل بوت استرپ نیست از ابزارهای دیگه استفاده کن. مثلا یه اسلایدر خاص تو طراحی هست شما برو دنبال اینکه با چه ابزار و کتابخونه ای می تونی اون اسلایدر رو تو پروژه ات بیاری و ...
برای اینکه کار شما راحت باشه و کمتر به چالش بخوری می تونی با گرافیست هماهنگ باشی. مثلا بهش بگی اگر می خوای از اسلایدر تو پروژه استفاده کنی مثلا برو تو سایت x و y و z که اسلایدر جکوئری هستند رو نگاه کن و ظاهر کار رو اونطوری درست کن که من هم بتونم دقیقا همون اسلایدرها رو تو پروژه بیارم.

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

@SeyedMH.Mosavi
مرسی و ممنونم از شما

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

از شما خیلی ممنونم، خیلی با حوصله و با دقت می نویسید نظراتتون رو، من همیشه سعی می کنم نظرات شما رو بخونم (البته اگر اون زبان و موضوع مورد بحث رو بدونم و بتونم درک کنم)

ی سئوال تازه ای که برام ایجاد شدش در خصوص استفاده از بوت استرپ اینه که:
وقتی عکس طرح اولیه رو می بینیم، میایم و بصورت چشمی grid system رو تنظیم می کنیم؟ یا اینکه از ابزارهای خاصی استفاده می کنیم؟
میشه راهنمایی بفرمایید ممنون میشم

برای استفاده از grid system بوت استرپ اگر آموزش خاصی رو سراغ دارید، ممنون میشم معرفی نمایید.

من اینطوری کار می کنم که اول نگاه می کنم (همون چشمی) که نسبتش درست طراحی شده و می شه با بوت استرپ درستش کرد یا نه. مثلا یه زمانی پیش می یاد که شما می خوای sidebar داشته باشی ولی وقتی 3 تا ستون براش در نظر می گیری کوچیکتر از طراحی گرافیست می شه و وقتی 4 تا در نظر می گیری بزرگتر می شه. اینجور مواقع می تونی گرید بندی رو کمی تغییر بدی. مثلا فرض کن تو این مشکل رو فقط تو حالت xl داری. می یای یه نقطه شکست یا برک پوینت برای سایز مورد نظر می نویسی و تو اون حالت بصورت دستی به sidebar ات عرض می دی. مثلا می ** 300px باشه یا ...
اگر هم کلا نتونستی یه جایی رو با گرید بندی بوت استرپ درست کنی یا به هر دلیلی دیدی داری اذیت می شی می تونی طبق روال عادی خودت دست به کار بشی و عرض به element هات بدی

سلام
@milad

راجب سوال دومتون
خیلی ها هستن طرح رو که میخوان پیاده سازی کنن
از روی PSD
میلی متر به میلی متر و پیکسل به پیکسل ، المان هارو انداره میکنن و توی وب پیادش میکنن!
که خب خیلی دقیق میشه ، البته هم زمان زیادی میبره
اکثرا چشمی کار میکنن ، و اینکه جوری سایز میدن که زشت نشه و بد قواره در نیاد ، بخوره به صفحه!!!

ممنون از سوال بجا و جواب های مفیدتون ، استفاده کردیم .