کــــار آفرینــــ بلاگــــ

بلاگیــــ برایــــ امروزیــــ ها

وب سایت های از وسط نصف شده : صفحه بندی های 2 ستونه

وب سایت های از وسط نصف شده : صفحه بندی های 2 ستونه

 

 

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

 

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

نمونه هایی از وب سایت های دو ستونه :
Masi Tupungato

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

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

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

Wreck’s Valentines
از آنجایی که روز ولنتاین شامل دو نفر می باشد , چیز عجیبی نیست که صفحه اصلی این وب سایت به دوقسمت تقسیم شده باشد. در حالی که صفحه سمت چپ ثابت ایستاده است , از صفحه سمت راست برای جستجو بین پروژه ها استفاده می شود. برای بهبود تجربه کاربر , صفحه دومی مجهز به سیستم استادارد اسکرولینگ می باشد.

Formlets
صفحه اصلی Formlets که وب سایت ای پر جنب و جوش و مملو از نقاشی های مختلف است که با استفاده از سبک Flat به دو قسمت مساوی تقسیم شده است. تیم طراحی با موفقیت توجه کاربر را به کلید Call to action جلب کرده و در همین حال فضای دوستانه ای همراه با پس زمینه رنگارنگ دارد .

Stolen Girlfriends Club
این وب سایت به شکل ماهرانه ای جهت گرداندن ناوبری در سراسر فروشگاه الکترونیکی استفاده کرده است. در نتیجه , موفق به نمایش تمام لینک های اصلی و محصولات جدید در ساختار داخلی , افزایش اطلاعات و جذابیت هر لینک شده است.

World of Warship
در اینجا نیز استفاده از دو ستون مجزا برای صفحات داخلی , که باعث توازن بین تصاویر می شود راه حل هوشمندانه ای است. با وجود اینکه چیزهای زیادی برای تحسین وجود دارد , ساختار متعادل باعث ایجاد نقطه ای ثابت برای ناوبری می شود که از گیج شدن کاربران جلوگیری می کند.
Nicolas Tarier
این وب سایت شامل نمونه کارهای ساده و تمیزی است که بیانگر شخصیت نیکولاس می باشد. صفحه اصلی پر است از نمونه کارهایی که به سبک بسیار جذاب به نمایش گذاشته شده اند. به دلیل حالت نا متعادلی که این صفحه دارد حس دینامیکی رابه کاربر القا کرده و تمرکز اصلی را روی عناصر کلیدی نگه می دارد.
Spotify Valentines
خیلی از پورتال های بزرگ نیز نمی توانند در روز ولنتاین جلوی خودشان را بگیرند . Spotify نیز در چنین روزی یک مسابقه آنلاین برای کاربران خود تدارک می بیند . در این وب سایت با استفاده از پالت رنگی متفاوت صفحه را به دو قسمت تقسیم شده که در یکی از آنها انتخاب موسیقی شما و در دیگری انتخاب هنرمند محبوبتان نشان داده می شود.

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

Elite Model Agency
صفحه اول وب سایت رسمی Elite Model Agency بسیار ساده و دارای ناوبری راحت و معمولی می باشد. با وجود اینکه همه چیز خیلی ابتدایی به نظر می رسد , استفاده از عکس های حرفه ای که توسط عکاسان بزرگ گرفته شده , رنگ آمیزی های زیبا و سیستم دو ستونه آن باعث جذابیت و نفیس به نظر رسیدن این وب سایت می باشد.
Taphome
این وب سایت برای بیان پتانسیل خود از طریق بلوک های داده ها و تصاویر تکمیلی از ساختار دو ستونی استفاده کرده . علاوه بر این , صفحه ها هم روی تبلت و هم روی صفحات نمایش بزرگ به خوبی نشان داده می شوند.
Brandts
Brandts صفحه اصلی را به دو قسمت تقسیم کرده تا بتواند سری هایی از عکس های جذاب را به خوبی نمایش داده و در عین حال چیزهای حیاتی و مهم دیگر را در قسمت ثابت صفحه قرار داده است. به علاوه صفحه فرود تنها شامل دو ستون و یک پا ورقی است که اطلاعات لازم را فقط نمایش می دهد.
Pauw
در حالی که صفحه فرود Pauw متناسب با طراحی مینیمالیستی که سعی در جلب توجه به عناصر و محصولات جدید دارد است , بقیه صفحه بندی پیرو سبک قدیمی ساختار شبکه ای است که هماهنگ کننده مقدار زیادی از عناصر بصری خارق العاده است. با وجود اینکه نسخه کوچکتر آن ویژگی های ابتدای را نشان می دهد , نسخه مخصوص کامپیوتر آن داراری ساختار دو ستونه است.
Nightcal
برای اجتناب از بمباران کردن کاربر با اطلاعات زیادی این وب سایت از ساختار دو ستونه استفاده کرده است. از این طریق , محتوا را به صورت غیر سرزده به شکلی که باعث گیج شدن کاربر نشود نشان می دهد.
Nicolas Bussiere
درست مثل مثال قبلی این وب سایت به سبکی طراحی شده که یک ستون بدون حرکت برای نمایش اطلاعات مهم و ستون بعدی برای نمایش عکس ها در نظر گرفته شده است. این وب سایت به سبکی طراحی شده که کاربر را به سمت اطلاعات سوق دهد.
Blondy
Blondyاز درون بی نظمی , نظم به وجودمی آورد . با استفاده از راه حل تقسیم صفحه این  دارای ظاهری مرتب که باعث گیج شدن کاربر توسط ویدیوها نمی شود می باشد که به صورت طبیعی نکات برجسته را پر رنگ تر می کند.
Eurovision
با وجود اینکه تقسیم بندی عمودی فقط روی صفحه فرود و به منظور تظاهرات به کار می رود, در اینجا از آن برای نمایش تفاوت بین هنرمندانی که در مسابقه رقابت می کنند به کار رفته است .

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

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

 

با مقالات دیگر در کارآفرین بلاگ همراه ما باشید. 

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

نکاتی برای طراحی وب سایت موفق

اشتباهات رایج در طراحی وب سایت

شما می توانید با استفاده از لینک های زیر این مطلب را با دوستان خود نیز به اشتراک بگذارید.