۴ طراحی وب سایت متداول در سال ۲۰۱۵

طراحی وب سایت 2015
۴ طراحی وب سایت متداول در سال ۲۰۱۵
۵ (۱۰۰%) ۶ votes

طراحی وب سایت در سال ۲۰۱۵

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


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

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

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

blog6-1

blog6-2

بدون رنگ یا مینیمال !

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

blog6-3

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

blog6-4

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

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

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

blog6-5

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

blog6-6

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

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

blog6-8 blog6-7

جمع بندی طراحی در سال ۲۰۱۵

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


پاسخ دهید

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

+ 16 = 25