مقدمه ای بر طراحی وب 0 دیدگاه

webdesign (1)

مقدمه :

طراحی و پیاده سازی سایت به طور کلی به دو دسته طراحی صفحات وب و قسمت توسعه یا develop سایت تقسیم میشود. وب ایران در این سری مقالات قصد دارد صرفا به طراحی صفحات یا UI سایت به صورت حرفه ای بپردازد.

برای طراحی صفحات آشنایی با HTML ، CSS و Jquery لازم میباشد . برای طراحی، نرم افزار های دیگری نیز مانند Adobe Photoshop ، Adobe Illustrator ، Color Schemer ، Adobe Dreamweaver و Ietester و انواع مرورگر های وب مانند Mozila Firefox، Chrome، ]Internet Explorer ، Opera ، Safari مورد نیاز میباشند. برای ساخت لوگو از Adobe Illustrator و از Photoshop برای تهیه عکس ها و گرادینت ها و از Color Schemer برای تولید رنگ استفاده میشود. از Dreamweaver برای کد نویسی و از Ietester برای مشاهده سایت بر روی نسخه های مختلف اینترنت اکسپلورر و رفع ایرادات آنها استفاده می­نمایند.

طراحی بر روی Photoshop :

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

The-New-York-Times-Original-vs-Wirify-wireframe

نمونه یک Wired frame

 

Image Grid :

یکی از مفاهیمی که در سال های اخیر در طراحی سایت رایج شده است، استفاده از Grid یا شبکه بندی در طراحی است. Grid  به شما کمک می کند تا سایت شما هارمونی خود را حفظ کرده و اجزا به شکل مناسب تری در کنار هم قرار بگیرند. در حال حاضر می توان گفت که اغلب سایت هایی که طراحی مجدد می شوند از گرید استفاده می کنند. در این میان، سیستم Grid سایت www.960.gs از همه محبوب تر است. البته در طراحی این سایت از کدهای نوشته شده در فریم ورک این گرید استفاده نشده و تنها Template گرید این فریم ورک در فوتوشاپ مورد استفاده قرار گرفته شده است.

در حال حاضر اکثر طراحی ها با عرض ۹۴۰ تا ۱۰۰۰ پیکسل انجام می شوند زیرا در این سایز، طرح بدون مشکل در مرورگر نمایش داده می شود و در زیر طرح نوار اسکرول افقی ظاهر نخواهد شد. همچنین کمترین سایز صفحه کاربران، ۱۰۲۴ در ۷۶۸ می­باشد و سایز صفحه ۸۰۰ در ۶۰۰ تقریبا منسوخ شده است.

همانطور که در تصویر زیر مشخص است بر اساس آمار سایت Statcounter در ایران تنها ۲ درصد از کل کاربران  اینترنت از سایز صفحه ۸۰۰ در ۶۰۰ استفاده کرده اند، در حالی که خط سبزی که در بالا قرار گرفته است ومقدار بیش از ۴۰ درصد را در جدول نشان می دهد، مربوط به سایز صفحه ۱۰۲۴ در ۷۶۸ می­باشد. بعد از کشیدن طرح سیم کشی شده و با مشخص شدن طرح کلی سایت ، Image Grid سایت را بر روی Photoshop میکشیم. Image grid طرح کامل سایت با جزئیات آن است و بر مبنای گرید است . گرید ها به صورت ستون هایی هستند که عرض آنها مشخص است . اندازه .هر ستون در گرید ۱۲ ، ۶۰ پیکسل است و فاصله هر ستون با ستون کناری ۲۰ پیکسل میباشد که به این وسیله ما اندازه المان های اصلی سایت خود را مشخص میکنیم.

گرید ها همچنین به دو نوع Fluid و Fix تقسیم بندی میشوند. گرید Fix همان گریدی است که در بالا شرح داده شد و گرید Fluid گریدی است که در آن عرض ها به صورت درصد به کار میروند. در جاهایی که عرض ما به طور کامل مشخص نیست یا سایت هایی که دارای نسخه موبایل هستند کاربرد دارد.

 

12gird systems

نمونه ای از Image Grid

 

به طور کلی سایت ها از نظر ستون به یک ستونه دو ستونه سه ستونه و چهار ستونه تقسیم میشوند و بیشتر از چهار ستون در طراحی سایت مجاز نیست.سایت های با طرح کلاسیک به طور دو ستونه و بیشتر سایت های شبکه­های اجتماعی به صورت سه ستونه طراحی میشوند. سایت های امروز از نظر گرید به ۱۲ گرید و ۱۶ گرید تقسیم میشوند که ۱۲ گرید برای سایت های با شلوغی کمتر و ۱۶ گرید برای سایت های با شلوغی بیشتر میباشند.

نمایش ۱۲ گرید بر روی طرح

نمایش ۱۲ گرید بر روی طرح

 

 

 

پاسخ دهید

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


Time limit is exhausted. Please reload CAPTCHA.