وبلاگ، آموزش طراحی سایت، آشنایی با علم طراحی سایت

با الگوهای طراحی سایت واکنشگرا آشنا شوید

22 آذر 1395

طراحی سایت ریسپانسیو یا طراحی سایت واکنشگرا یا همان طراحی سایت موبایل، گونه ای از طراحی سایت است که سایز و اندازه وب سایت بر اساس نمایشگر تغییر می کند.

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

 با طراحی سایت کوچک آغاز کنید

یکی از راه های محبوبی که من در طراحی سایت ریسپانسیو دیده ام، این است که ستون هایی از محتوا در صفحات وب سایت قرار داده می شود. این ستون ها زمانی که عرض صفحه در وب سایت های گوشی همراه کمتر می شود به هم نزدیک و نزدیک تر می شوند. ما می توانیم این تکنیک را در وب سایت های لوکس هتل ها در 137 PILLARS HOUSE ببینیم.

همانطور که مشاهده می کنید، این طرح بندی تنها دستخوش یک تغییر می شود. باقی تغییرات و انطباقات بسیار تدریجی است و صرفا به دلیل باریک شدن طرح بندی اولیه اتفاق می افتد.

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

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

الگوی MONDRIA

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

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

موندریا در واقعیت چگونه است؟

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

 

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

گالری ها

 

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

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

در حقیقت

برای دیدن این نمونه طراحی در وب سایت واقعی، وب سایت BRAD SAWICKI,S PORTFOLIO را بررسی کنید. در صفحه اصلی این وب سایت، از یک گالری با سه ستون استفاده شده است که بر یک ستون دیگر در قسمت پایین سوار می شود. مزیتی که در اینجا وجود دارد، این است که اندازه تصاویر طوری است که کاربر وب سایت می تواند همیشه به بهترین وجه آن ها را ببیند.

آیتم های بر جسته به چه شکل اند؟

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

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

 

در واقعیت آیتم های برجسته چه شکلی دارند؟

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

 

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

آشنایی با ستون های FLIP

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

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

در واقعیت فلیپ به چه شکل است؟

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

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

 

ویژگی SHUFFLE یا مختلط

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

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

 

در واقعیت شافل به چه شکلی است؟

وب سایت ORESTIS، از این روش در وب سایت خود استفاده می کند. سه آیتم نمایان شده، سرویس هایی هستند که آن ها ارائه می کنند، هر کدام از آن ها با عکس های رنگارنگی نمایان می شود.

 

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

با نمونه های بیشتر طراحی سایت واکنشگرا آشنا شوید؟

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

نتیجه گیری

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

***

برای دریافت اطلاعات بیشتر دربارۀ نحوۀ دریافت نمایندگی سایت ساز پرتال می توانید با شمارۀ 63404-021 تماس بگیرید.

 

برچسب ها: با الگوهای طراحی سایت واکنشگرا آشنا شوید, معرفی الگوهای طراحی سایت واکنشگرا, با الگوهای طراحی سایت ریسپانسیو آشنا شوید, معرفی الگوهای طراحی سایت ریسپانسیو, طراحی سایت واکنشگرا باید به چه شکل باشد, طراحی سایت ریسپانسیو باید به چه شکل باشد
عضو خبرنامه شوید.
0 دیدگاه

آخرین دیدگاه‌ها

ارسال دیدگاه

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