وایرفریم ها در طراحی سایت

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

اما نظرتان درباره شبکه عمودی چیست؟ این نوع شبکه هم، برای طراحی سایت ها اهمیت دارد. روش های زیادی وجود دارد که می توانید روی این شبکه کار کنید.

چرا باید از یک شبکه عمودی در طراحی سایت استفاده کرد؟

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

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

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

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

شبکه ها برای متن های وب سایت

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

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

در اینجا دو نوع کاربرد از این شبکه وجود دارد:

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

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

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

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

شبکه ها برای صفحه نمایش یا پنل های طراحی وب سایت

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

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

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

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

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

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

به تمام مکان هایی که می توانید در طراحی سایت کادری از شبکه های عمودی استفاده کنید، فکر کنید:

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

شبکه ها برای وب سایت های تجارت الکترونیک

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

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

استفاده از شبکه مطابق محتوای وب سایت

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

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

نتیجه گیری

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

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