پنج قانون طلایی برای طراحی واکنش گرا در وب

 پنج قانون طلایی برای طراحی واکنش گرا در وب

پنج  قانون طلایی برای طراحی واکنش گرا در وب

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

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

بخش اول : طراحی با محتویات واقعی

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

تصور کنید که زندگی چقد ساده تر میشد وقتی که محتویات سایت را از قبل به ما می دادند! اما صادقانه باید بگوییم که این اتفاق به ندرت می افتد.

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

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

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

همینجاست که باید به طراحی واکنش گرای خود فکر کنید. با محتویاتی که بدست آورده اید می توانید یک طراحی تک ستونه مبتنی بر موبایل را انجام دهید.این کار را می توانید به سادگی توسط یک مرورگر و بوسیله HTML انجام دهید و بعداً روی آن بیشتر کار کنید.

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

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

اجزای قالب خود را طوری بچینید که متناسب با عرض جدیدی که بدست آورده اید باشد.

پایان قسمت اول...

به اشتراک گذاری این مطلب :