چهار طراحی وب متداول در سال 2015

1743 بار
دوشنبه, 31 فروردين 1394 ساعت 06:41
ارزیابی شما
(6 رای)
چهار طراحی وب متداول در سال 2015 - 4.5 out of 5 based on 6 votes

چهار طراحی وب متداول در سال 2015 

 

 

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

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

شواهد نشان می دهد که روند های سطح بالائی برای طراحی وجود دارد که به طرح های غیر معمولی معروف هستند. غیر معمولی از آن جهت که آن ها از قانون ثابتی و سیستم از پیش تعریف شده ای پیروی نمی کنند. اما این طرح ها بسیار متداول هستند چرا که می توان صد ها وب سایت یافت که به این سبک طراحی شده اند.

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

 

صفحات وب دسته بندی شده

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

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

دلیل دوم برای استفاده از این رویکرد این است که گاهی اوقات شما نیازمند انتقال دوگانگی مهمی هستید. برای مثال وب سایت Eight and Fourرا در نظر بگیرید. چیزی که در این سایت به نظر می رسد، انتقال مفهوم زیرساخت های دیجیتال در کنار کارکنان مستعد است. این دوگانگی چیزی است که در سایت تعریف شده است. تقسیم بندی صفحه روشی برای نمایش این موضوع است. به علاوه، ارتباط دو موضوع با استفاده از علامت&  نیز به خوبی مشخص شده است.

 

صفحات تقسیم بندی شده

 

صفحات تقسیم بندی شده

 

بدون رنگ!

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

این رویکرد مینیمالیستی است، چرا که اصلاحاتی را در طراحی های پیشین لحاظ کرده است. اما این روش یک گام به سمت جلو محسوب می شود.

 

بدون رنگ

 

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

 

بدون رنگ

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

 

طراحی ماژولار و یا شبکه بندی شده

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

طراحی ماژولار

 

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

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

 

طراحی ماژولار

 

پُر کردن یک صفحه

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

  •  

پرکردن یک صفحه

 

پرکردن یک صفحه

 

جمع بندی

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

  • منبع : business2community.com

1 نظر

  • سلمان روانجی چهارشنبه, 06 آبان 1394 ساعت 07:56 ارسال شده توسط سلمان روانجی

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

اگر شما در مورد این مطلب نظری دارید در اینجا بنویسید

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

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