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

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

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

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

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

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

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

 

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

 

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

 

بدون رنگ!

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

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

 

بدون رنگ

 

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

 

بدون رنگ

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

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

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

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

 

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

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

 

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

 

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

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

  •  

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

 

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

 

جمع بندی

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

برای دسترسی به مقالات بیشتر می توانیدبه بخش مقالات لیو سایت ساز مراجعه نمایید.

دیدگاهای بازدیدکنندگان

سارا نیازی 01 شهریور 1395 18:38

مرسی از مطلب خوبتون

دیدگاه خود را بنویسید

دیدگاه پس از تائید مدیریت منتشر می شود.
 
پابرگی سایت