برگزیده های پرشین تولز

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

sorooshpardaz12

کاربر تازه وارد
تاریخ عضویت
2 ژوئن 2016
نوشته‌ها
17
لایک‌ها
6
سن
34
طراحان سایت برای طراحی سایت می بایست ماژول و اجزای مختلف و مورد نیاز در هر سایت را در نظر بگیرند و طراحی کنند، گاهی به علت تعدد طراحی ها و شلوغ بودن سایت برخی ماژول ها نادیده گرفته یا فراموش می شود اما اگر از نمونه قالب های طراحی سایت الهام بگیریم و قبل از طراحی چندین نمونه قالب را مشاهده کنیم، بسیاری از مشکلات پیش نمی آید و در نهایت کار، سایتی با طراحی کامل و دقیق خوهیم داشت، به همین دلیل در این مقاله طراحی سایت سعی کردیم ده نمونه از قالب سایت های بزرگ را برای شما قرار دهیم، با سروش پرداز همراه باشید.

1.فیلد جستجوی گسترده
قالب سایت Snowbird اولین قالب از این مجموعه است.سایت snowbird قالبی جذاب دارد اما نکته مهم و زیبای این قالب قسمت جستجوی آن است.که بصورت آیکونی در بالای سمت راست منو های هدر قرار دارد اما با کلی روی آن فیلد گسترده ای برای جستجو باز می شود.

1_snowbird1-1024x682.jpg


1-2_snowbird_search1-1024x682.jpg




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

2_colingrist1-1024x682.jpg


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

3_skinnyties1-1024x682.jpg




4.آیکون های سایه دار
جذاببیت این قالب در آیکونهایی با سایه های ظریفی است که به کاربر می گوید "من قابل کلیک کردن هستم روی من کلیک کن."

4_quirky1-1024x682.jpg


5.نمایش ها
سایت fruute که سایت فروشگاهی میوه، کلوچه و .. می باشد با قرارگرفتن موس روی هر محصول، تصویر محصول تغییر می کند و به کاربر نشان می دهد که تصاویر بیشتری برای مشاهده وجود دارد.

5_fruute1-1024x683.jpg


5_1-fruute_angle1-1024x683.jpg


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

6_thestudio-1024x682.jpg


6-1_thestudio_expanded-1024x682.jpg

7.بازگشت به بالای صفحه

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



7_Pinterest_new.jpg

7_1-Pinterest_Scroll_new.jpg

8.محو شدن پس زمینه

اکثر سایت های تجارت الکترونیک قابلیت مشاهده سریع محصولات را دارند. اما طراحی سایت Jawboe’s واقعا طراحی زیبایی است در طراحی این سایت تصویر پس زمینه بعنوان بنر استفاده شده است و با اسکرول کردن صفحه، تصویر پس زمینه کمرنگ تر شده و محصولات نمایش داده می شوند.

8_Jawbone_new.jpg



8-1_Jawbone_Fade_new.jpg

9.Parallex Scrolling

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

9_Soleil12_new.jpg


9_1Soleil12_Scroll_new.jpg


10.نحوه طراحی لوگو در سایت

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

10_WINTR_new.jpg


10-1_WINTR_Colors_new.jpg


منبع:بلاگ سروش پرداز|طراحی سایت
 
بالا