راهنما طراحی سایت

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

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

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

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

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

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

  1. طراحی بنیادی و اصلی پاسخگو در سیستم‏های شبکه‏ای (گرید)

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

پهنای شبکه‏ای ویژه تعیین کنید.

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

وقتی که شما این امر را با گروه توسعه دهنده خود در میان می‏گذارید، دوست دارید تا فوق العاده به نظر برسد. اگر بخواهید یک لایه در حدود ۱۵ پیکسل تعیین کنید، این لایه بایستی دقیقا ۱۵ پیکسل باشد. اگر پهنای (عرض) شبکه شما باید بطور کل ۱۰۰۰ پیکسل باشد، باید دقیقا عرض آن ۱۰۰۰ پیکسل باشد. با اینکه طراحی پاسخگو بدین معنی است که آن باید بر روی هر نوع وسیله یا هر نوع سیستمی بخوبی کار کند، در کنار آن داشتن یک نقطه شروع کامل و استوار نیز حائز اهمیت است.

برای عقاید و دیدگاه‏های متغیر از حدس و گمان استفاده نکنید.

راهنمای طراحی سایتهر چیزی زیبا به نظر می‏رسد، ولی صبر کنید…. عقاید متغیر چطور؟

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

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

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

برخی اوقات استفاده از یک سیستم شبکه‏ای بر مبنای دسکتاپ (رومیزی/ثابت) برای طراحی یک دیدگاه متغیر معقول نمی‏باشد. این امر اغلب یک نمونه با عوامل رابط کاربری وسیع می‏باشد، که معمولاً بهنگام قرارگیری بر روی دستگاه‏های متحرک به خوبی متراکم و فشرده نمی‏شود.

نمونه دیگری از مغایرت و ناسازگاری بین رابط‏های ثابت (رومیزی) و متحرک، عامل جدول زمانی استاندارد UI می‏باشد.

راهنمای طراحیاین عامل بطور اعجاب انگیزی روی میز (بطور ثابت) عمل می‏کند و به شما تجسمی/نمایی از جایی که هستید، جایی که بودید و جایی که قصد دارید بروید نشان می‏دهد. الگوی واضحی است که به کرات دیده می‏شود. ولی بر روی دستگاه‏های متحرک چطور؟ این الگو به هم می‏ریزد.

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

  1. برای ارائه‏ درست و دقیق، از ابزار مدرن بهره ببرید.

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

بهعنوانیکتوسعهدهنده،اغلبعکس‏هایفتوشاپشره‏ایازماکتومدل‏هایبادقتبرایممی‏فرستند.متاسفانه، مدل‏های آزمایشی وقتی یک توسعه دهنده بخواهد اندازه واقعی آن مدل‏ها را بسازد، مشکلاتی بوجود می‏آورند. فتوشاپ فاقد آن دقت و ظرافتی است که یک توسعه دهنده به آن نیاز مبرم دارد.

انسجام فونت (قلم)

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

اغلب، فونت‏هایی که من در یک فایل فتوشاپ با آنها سروکار دارم تماماً کم کارایی هستند. ممکن است ضخیم‏تر باشند، وزن سنگین‏‏تری داشته باشند یا به روش دیگری ارائه شوند. مدل‏های آزمایشی پایبندتر و دقیق‏تر به ندرت یک نمای دقیق را نشان می‏دهند. حتی فونت‏های متن باز نیز وقتی در فتوشاپ ارائه می‏شوند، ممکن است متفاوت بنظر برسند.

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

دغدغه‏ های عملکردی

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

بیایید از سایه گذاری بعنوان نمونه استفاده کنیم.

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

وقتی یک توسعه دهنده در حال ایجاد نمونه‏ی اولیه یک وبسایت می‏باشد، درخصوص عملکرد آن دغدغه و نگرانی بسیاری دارد. هروقت که آنها بخواهند از نمایش یک تصویر بزرگ مانند یک تصویر PNG 24 بیتی مات یا شفاف، برای نشان دادن برخی عوامل سبکی UI استفاده کنند، سایت زمان بیشتری برای بارگزاری صرف می‏کند.صدهاجزرابهایندفعاتاضافهکرده،ودرنتیجه‏یآنسایتشمابسیارکندخواهدشد.

راه حل ایده‏آل ایجاد مجدد سایه ‏ها با CSS است.

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

راهنمای طراحی

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

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

CSS، FTW

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

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

در حال حاضر BohemianCodingSketch3عیوب و ویژگی‏های غیرعادی مخصوص به خود را دارد ولی با این حال برای حفظ ثبات طرح فوق العاده می‏باشد.

طرح اولیه (طرح کلی کشیدن) این امکان را به شما می‏دهد تا به سرعت و به آسانی به ارائه/نمای کامل پیکسلی دست یابید. با استفاده از آن مطمئن خواهید شد که فونت‏ها و سایه‏ گذاری‏های شما اجرا خواهند شد، چنانچه گویی در CSS انجام گرفته باشند. علاوه بر آن، این مقادیر بسیار دقیق‏اند، کپی و پیست CSS امکان پذیر است و بنابراین بین طرحی که شما طراحی می‏کنید و طرح نهایی که با CSS و HTML ایجاد می‏گردد، هیچ نوع تفسیر (برداشت) یا حدس و گمانی وجود ندارد.

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

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

  1. راهنما هماهنگی و انسجام بسیار اهمیت دارد

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

حاشیه

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

ارتفاع خطوط

ارتفاع خطوط منسجم متن را خواناتر جلوه می‏دهد.

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

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

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

اندازه فونت‏ها و فاصله حروف

خودتان را محدود به استفاده از ۳ یا ۴ اندازه معین کنید، نهایتاً ۵ اندازه.

چارچوب‏های پاسخگو نظیر Bootstrap یا ZURBFoundation معمولاً این اندازه‏ها را تعیین کرده‏اند. به علاوه، اینها دارای نسخه‏های متحرک هستند که این امکان را برایتان فراهم می‏کنند تا فونت‏های عناوین را در اندازه‏ای کمی کوچکتر ارائه کنید. بهنگام طراحی این ارتفاعات را ثابت کنید.

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

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

حجم فونت

از نقطه نظر یک توسعه دهنده، هر حجمی که یک طراح اضافه می‏کند، زمان دانلود آن فونت را افزایش می‏دهد.

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

توصیه می‏کنم از وزن‏های فونت استفاده کرده و بطور مختصر آنها را ارائه کنید. طراحان باید از خود بپرسند که “آیا این طرح بایستی با حجم کمتری تکمیل گردد؟ آیا می‏تواند به جای پنج حجم با سه حجم انجام گیرد؟”

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

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

پاسخ دهید

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

*