کشمکش های توسعه دهندگان طراحی سایت

نکاتی اموزنده برای طراحان سایت

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

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

بنبر این چگونه می توانید سریعا وبسایتی یکپارچه و در سطح کلاسِ جهانی در پایان طراحی کنید؟

در این مقالۀ راهنما، طراحان نکات مورد نیاز هر روز را برای کاهش سر درد های احتمالی به دلیل همکاری در یافت خواهند کرد. تمامی راه حل ها از کارهای اشخاص موفق و مسائلِ این چنینی : “در دهۀ گذشته بعنوان طارح سایت و دولوپر این را تجربه کرده ام که” استخراج شده اند.

طراحی پاسخگویی های استادانه در سیستم های گرید

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

عرض های گریدی ِ مشخصی را تنظیم نمایید

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

وقتی این نکات را به تیم توسعه دهنگان وب خود ارائه می دهید، می خواهد مانند یک نقطه ی درخشش عمل کند. اگر یک لایه ی ۱۵ پیکسلی قرار دادید، باید دقیقا ۱۵ پیکسل باشد. اگر عرض گرید شما باید در کل ۱۰۰۰ پیکسل باشد، باید دقیقا عرض آن ۱۰۰۰ پیکسل باشد. در حالی که طراحیِ پاسخگو بدان معناست که باید در هر نوع وسیله ای باید خوب کار کند و همچنین در هر نوع سیستمی، تنها مهم این است که نقطه ی شروع محکمی داشته باشید.

کار های حدسی را برای نماهای موبایل رها نکنید

هر چیزی زیبا به نظر می رسد، اما صبر کنید …. در ممرد نمای موبایل چطور؟

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

طاراحان باید درک خوبی از چگونگی کارکرد سیستم های گرید داشته باشند.

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

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

نمونۀ دیگری از ناسازگاری بین اینترفیس دسکتاپ و موبایل، عاملِ استاندارد تایم لاینِ UI است.

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

اما، در مورد موبایل چطور؟ این الگو از هم پاشیده می شود.

شما بعنوان یک طراح نیاز دارید تا این مسائل را حل کنید تا توسعه دهندهۀ وب شما ایده های عجیب و غریبی به ذهنش نرسد که در مورد قصد شما دچار تعارض شود.

برای نمایش دقیق از ابزار های مدرن استفاده کنید

شوکه نشوید، اما فتوشاپ بهترین ابزار برای ساختن وبسایت های مدرن نیست.

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

ثبات فونت

اول اینکه ثبات فونت بواسطۀ فوتوشاپ در وب وجود ندارد.

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

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

نگرانی های اجرا برای توسعه دهندگان

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

برای مثال، بیایید از سایۀ قطره ها (دراپ شادو) استفاده کنیم.

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

زمانی که یک توسعه دهنده انتهای جلویی یک سایت را ایجاد می کند، در رابطه با عملکرد بسیار نگران است. همیشه نیاز است که از یک نماد تصویری بزرگ مانند  یک PNG ی ۲۴ بیتی ِ نیمه شفاف یا شفاف استفاده کند تا برخی از نماد های UI ی سبک را ارائه نماید و چندس طول نمی کشد تا سایت لود شود. این زمان ها و ترکیبات را چندین برابر کنید سایت شما بسیار کند خواهد شد.

راه حل ایده آل ایجاد دراپ شادو ها با CSSاست.

شما می توانید افکت های بسیاری با CSSایجاد کنید که شامل دراپ شادوها نیز می شود. اگر یک توسعه دهنده می تواند به جای تعبیه کردن یک مورد در یک PNG  از سی اس اس استفاده کند تا سایه ها را ایجاد کند. در سمت مثبت  CSSسبک تر است و به شما اجازه می دهد تا محاسبات را به اندازه ی بسیار کوچکی تقلیل دهید. در سمت پایین، تایپوگرافی و دراپ شاد و ها برای آنهایی که در سی اس اس ایجاد شده اند قابل تشخیص به نظر نخواهند رسید.

یکی از تصاویر بالا PNG ی شفاف است.  و دیگری SVG.

اگرچه آنها از نظر ظاهری قابل تشخیص اند اما وزن PNG برابر با ۱۲٫۱K و وزن SVG تنها ۱٫۷K است. سایه ها در SVG  می تواند شمرده شوند و همیشه ترکیب خواهند شد. اگر شما رنگ پس زمینه را در یک PNG ی شفاف تغییر دهید، در جاهایی که رنگ پس زمینه با کانال آلفا ترکیب می شود صاحب محصولات مصنوعی و دست ساز خواهید شد که معمولا باعث ایجاد حلقه و هاله دور دیگر عناصر می شود.

CSS، FTW.

جایگزین های فوتوشاپ را در نظر بگیر

بدون توجه به اینکه چه ایزاری را برای استفاده انتخاب می کنید، واضح است که فوتوشاپ ابزار کاملی برای این کار نیست. من ترجیح می دهم از Bohemian Coding Sketch 3 استفاده کنم.

Bohemian Coding Sketch 3 اکنون خطاها و ویژگی های نامطبوع خویش را نیز دارد. اما بخاطر نگهداری از ثبات طراحی استثنایی است.

Sketch به شما اجازه می دهد تا نمایش های پیکسلی عالی را به آسانی دریافت کنید. استفاده از آن فونت های شما را تضمین می کند و دراپ شادو ها اگر که در CSSانجام شده باشند به آسانی رندر می دهند. بعلاوه، این معیارها بسیار دقیق اند، این امکان وجود دارد که CSSرا کپی و  paste کرد، بنابر این نیازمند به کار های حدسی و یا تفسیر بین طرحی که ایجاد کرده اید و طرح نهایی ای که با HTM و CSS ایجاد شده است نیازی نخواهید داشت.

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

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

ثبات بر روز حکمفرماست

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

حاشیه ها

این یک مورد ِ ساده است. حاشیه ها و لایه را در نزدیک ترین پنجِ ممکن گرد کنید. به جای استفاده از پیکسل های ۱۳ و ۱۷ از پیکسل های ۱۰، ۱۵ و ۲۰ استفاده کنید. این کار باعث می شود همه چیز هم از لحاظ طراحی و هم از لحاظ توسعه مرتب و تمیز بماند.

طراحی سایت خوبارتفاع خطوط

ثبات ارتفاع خطوط قابلیت خوانش را بهبود می بخشد.

اگر  شما برنامه ای مانند فوتوشاپ را با استاندارد برای خط های چاپی استفاده کنید، با مشکلات خوانشی مواجه خواهید شد. بعلاوه، ارتفاع خطِ ۱٫۲ سانتی ( ۲۰ درصد بزرگتر از ارتفاع فونت) با نحوه ی معمول پیاده سازی طراحی در وبسایت های مدرن ثبات ندارد. این می تواند برای توسعه دهندگان و کاربران مشکل ساز باشد.

بسیاری از وبسایت ها به منظور رسیدن به بیشترین حد خوانش از ارتفع خطی ۱٫۵ یا ۱٫۶ استفاده می کنند. و این امر به تنه ی متن اصلی بسیار کمک می کند و باید در حین فرآیند طراحی به طور ثابت مورد استفاده قرار بگیرد تا تضمین کند که توسعه دهنده نیاز ندارد که یک طرح را تفسیر نماید. اما، ۱٫۲ سانت نیز می تواند برای سر تیتر ها عالی به نظر برسد.

البته ثبات  پیوستگی قانون است. اگر هدف شما داشتن سر تیتر هایی با فاصه خط های ۱٫۲ و متن هایی با فاصله خط ۱٫۵ ااست، پیکر نمای بسیار وابستۀ شما یا همان نمونه ی اولیه باید به شکلی واضح این را نشان دهد تا اینکه محصول نهایی با دقت ساخته شود و نمایش دهنده ی طراحی شما باشد.

اندازۀ فونت و فاصلۀ حروف

خود را محدود به استفاده از سهريال چهار یا در نهایت پنج اندازۀ مختلف از فونت ها بکنید.

چارچوب های پاسخگو از جمله Bootstrap یا ZURB Foundation به طور معمول این اندازه های خاص را دارند. بعلاو] آنها همچنین نسخۀ موبایلی هم دارند که به شما اجازه می دهد از فونت  سر تیتر ها در یک اندازه ی تقریبا کوچکتر رندر بگیرید. زمانی که طراحی می کنید، این ارتفاعات را قفل کنید.

زمانی  که سر تیتر ایجاد می کنید از اعداد زیبا و روند استفاده کنید. سرتیتر های رنگارنگ، یکی با ۴۰ و دیگری با ۴۲ پیکسل، یکس با ۳۸ و دیگری با ۳۸و۵ می توانند گیج کننده باشند. سرتیتر ها را با اعداد روند و ثبات در صفحات درخشان نگه  ارید.

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

وزن فونت ها

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

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

من استفاده ی کم وزن فونت و رندرینگ را پیشنهاد می کنم. طراحان باید از خود بپرسند، آیا می شود این طرح با وزن کمتری به انجام برسد؟ آیا می شود به جای ۵ وزن با ۳ وزن اجرا شود؟

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

0 دیدگاه برای “کشمکش های توسعه دهندگان طراحی سایت”

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*