ميهن مگ

۹ طرح جدید صفحات وب ( ۲۰۱۸ )

2 هفته پیش

۹ طرح جدید صفحات وب ( ۲۰۱۸ )

در این بحث به بررسی روند کار طراحان خلاق در طراحی قالب هایشان میپردازیم تا خلاقیت را به صفحات وب بازگردانیم. در گذشته ی نه چندان دور، طراحی وب مانند یک برگه ی بیرون امده از دستگاه چاپ بود. سطرها و ستون ها از خطوط خاصی پیروی می‌کردند و مطالب و عکس ها در مکانهای ثابتی قرار داشتند. اما با تغییر ابزارهای HTML ،CSS و JavaScript امکانات طراحی صفحات هم بهبود یافت. در اینجا ۹ روش برای طراحی صفحات به روز و منحصر به فرد آمده است.

۱- با افکت پارالاکس یا تطابق به طراحی خود عمق بدهید

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

۲- از عناصری استفاده کنید که روی هم قرار می‌گیرند.

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

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

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

 

۳- مطالب را با عناوین، زیرعناوین و ستونها تفکیک کنید.

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

۴- از صفحات افقی استفاده کنید.

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

۵- صفحات جدا از هم

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

۶- ساختار ( Grid ) قالبتان را نمایش دهید!

در این مثال طراح ساختار زیر صفحه اش را نشان داده است.

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

۷- عناوین را در پس زمینه قرار دهید.

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

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

۸- از اسکرول به طرفین استفاده کنید.

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

۹- از اسلایدر ها استفاده کنید.

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

لطفا امتیاز دهید
0
برچسب ها :

دیدگاه شما

سیزده + 20 =

بدون دیدگاه