ساختار یکپارچه برای پروژه ها ( رابط کاربری- لی اوت )

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

structure

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

layout-html

 

ساختار قالب بندی html هم به این صورته :

<div id="grid5" class="grid">
	<div id="section6" class="section CustomClass">
		<div class="LastNews">
			.
			.
			.
		</div>
	</div>
</div>

تهیه و تنظیم یک لی اوت ریسپانسیو برای خودتون توی پروژه ها میتونه خیلی خوب باشه و به کارتون سرعت میبخشه و در ضمن از کل جزئیاتش با خبر هستید، برای کارهای مختلف لی اوت های مختلفی ایجاد کردم و ازشون استفاده میکنم.

فقط نکته ای که مهمه تولید ساختاری با چنین ID و CLASS های باعث میشه توی پروژه های بزرگ درگیر انتخاب اسامی نشید:)

لی اوتی که درست میکنید  باید ۳ تا ویژگی رو حتما داشته باشه :

  • ساختار یکپارچیه داشته باشه
  • باعث بشه کد css کمتری تولید بشه
  • واکنش گرا باشه

 

توی این بخش فقط در مورد لی اوت قالب نوشتم شاید در بخش های بعدی در مورد ساختار بندی کدها مثلا CSS، جاوا اسکپریت و PHP نوشتم .

امیدوارم به دردتون خورده باشه.

مرسی از وقت ارزشمندتون.

دیگر نوشته های مرتبط با این دسته بندی