الگو های برای طراحی سایت ریسپانسیو

الگو های برای طراحی سایت ریسپانسیو

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

الگوهایی برای طراحی سایت ریسپانسیو

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

شروع کردن با طراحی های کوچک

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

الگو های برای طراحی سایت ریسپانسیو

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

نمونه ای از طراحی سایت ریسپانسیو

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

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

در واقعیت

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

الگو های برای طراحی سایت ریسپانسیو

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

گالری ها در طراحی سایت ریسپانسیو

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

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

گزینه های بر جسته در طراحی سایت ریسپانسیو

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

الگو های برای طراحی سایت ریسپانسیو

در واقعیت

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

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

ستون های FLIP در طراحی سایت ریسپانسیو

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

در واقعیت

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

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

ویژگی SHUFFLE یا مختلط در طراحی سایت ریسپانسیو

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

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

الگو های برای طراحی سایت ریسپانسیو

در واقعیت

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

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

چاپایمیل