نکاتی برای طراحانی که کد نمی زنند (1)

 نکاتی برای طراحانی که کد نمی زنند (1)

نکاتی برای طراحانی که کد نمی زنند (1)

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

موارد بسیاری وجود داشته است که توسعه دهندگان طرح هایی را از طراحانی دریافت می کنند که ویژگی های انعطاف پذیر و تعاملی وب را به هیچ وجه درک نکرده اند. آنها از قوانین و کاربردهای رایج وب با خبر نیستند و همین سبب کور شدن ایده های خلاقانه آنها می شود. البته می توان به طور مثال به روش های مختلفی نشان داد که منظور شما از منوی drop-down چیست و یا دکمه های مختلف چگونه هستند، اما تا کار بر روی مرورگر نشان داده نشود، خود را بسیار محدود کرده اید.

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

نکاتی برای طراحان

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

تفاوت های بین وب و نرم افزار طراحی

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

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

به علاوه در فایل های طراحیتان سعی کنید نام پوشه ها و گروه بندی ها را رعایت کنید تا طراحان سردرگم نشوند.

طراحی واکنش گرا فراتر از نسخه دسکتاپ موبایل است

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

معمولاً در این سناریوها، توسعه دهندگان مشغول پر کردن فضاهای خالیهستند که طراح به آن فکر نکرده است. این موضوع به تدریج به یک معضل تبدیل می شود زیرا تمام ساختار سایز تحت تأثیر سایز صفحه است.

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

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

به اشتراک گذاری این مطلب :
آیـا به مشـاوره نیـاز دارید؟
021-88171021
ارتـباط از طریـق تـلگرام