ویب ڈیزائننگ کورس : کلاس نمبر3 : ویب ڈیزائننگ

کلاس نمبر3 : ویب ڈیزائننگ​

یقینا آپ html شروع کرکے ویب سائٹ بنانے کیلئے بے تاب ہوں گے لیکن ایسا کرنے سے قبل یہ ضروری ہے کہ آپ ویب سائٹ کی منصوبہ بندی کرنے اور اس کی ظاہری شکل و صورت کو بہتر بنانے کے بارے میں سیکھیں اور یہ جان لیں کہ بہترین اور کامیاب سائٹس کی ظاہری شکل و صورت کیا ہوتی ہے ـ یہ سارا عمل سیکھنے کیلئے آپ کو کچھ وقت صرف کرنا ہوگا ۔
اگر آپ ویب پیج بنانا شروع کرنے سے پہلے کچھ وقت اس کیلئے صرف کریں گے تو بعد کے کئی گھنٹوں (یا کئی دنوں) کا وقت بچا لیں گے ـ
کیونکہ html سیکھ کر آپ نےویب ڈیزائننگ ہی تو کرنی ہے اور اگر آپ html مکمل طور پر سیکھ لیں اور ایک اچھی اور پُرکشش ویب سائٹ نہ بنا پائے تو اتنی محنت اکارت گئی ۔

اس کلاس کو پڑھنے سے پہلے ایک بات ذہن میں رکھ لیں کہ اس میں بہت سی ایسی اصطلاحات ملیں گی جن کے بارے میں ہم آپ کو آگے چل کر بتائیں گے ـ اس کلاس میں آپ سیکھیں گے کہ ویب سائٹ کی منصوبہ بندی کیسے کی جاتی ہے ـ مزید اس موضوع میں کچھ ایسی ویب سائٹس دکھائی جائیں گی جن کو ملاحظہ کرکے آپ یہ جان لیں گے کہ اچھی سائٹس کی کیا خوبیاں ہوتی ہیں اور کونسی چیزیں انہیں دوسری سائٹس سے ممتاز کرتی ہیں ـ ان سائٹس کے اصل ٹیمپلیٹس بھی آپ کو فراہم کئے جائیں گے تاکہ آپ ان کا نظارہ کرکے مزید معلومات حاصل کرسکیں ـ یہ موضوع پڑھنے کے بعد آپ اپنی ایک کامیاب ویب سائٹ بنانے کیلئے تیار ہوں گے ۔ ان شاءاللہ العزیز
یہ کلاس 10 موضوعات پر مبنی ہے ۔

1. ویب سائٹ کی منصوبہ بندی کرنا
2. ناظرین کا تعین کرنا
3. حدود کا تعین کرنا اور تنظیم کرنا
4. آپ کا مشن کیا ہے ؟
5. منظم کرنا
6. ایک ڈائریکٹری سٹرکچر بنانا
7. سٹوری بورڈ تیار کرنا
8. سائٹ کی شکل و صورت تیار کرنا
9. پیج کا ڈیزائن
10. کچھ کامیاب پیج ڈیزائن

1۔ ویب سائٹ کی منصوبہ بندی کرنا :
ویب سائٹ بنانے میں اس کی منصوبہ بندی کی بہت زیادہ اہمیت ہے ـ یہ ایک ایسا مرحلہ ہے جس کے بارے میں لوگ نہیں جانتے اور جو جانتے ہیں وہ اس کی اہمیت کو نہیں سمجھتے ـ ویب سائٹ کی منصوبہ بندی بالکل مکان بنانے کی منصوبہ بندی کی طرح ہے ـ کچھ لوگ مکان بنانے کیلئے کوئی منصوبہ بندی نہیں کرتے اور تعمیر شروع کروادیتے ہیں لیکن بعد میں انہیں محسوس ہوتا ہے کہ وہ بعض کام دوبارہ کررہے ہیں اور ان کے پاس مناسب آلات اور میڑیل اور وقت کی بھی کمی ہے ـ تاہم مناسب منصوبہ بندی سے آپ کی بہت سی ممکنہ مشکلات کا ازالہ ہوجاتا ہے جو منصوبہ بندی نہ کرنے کی صورت میں یقیناً آپ کو اٹھانی پڑیں گے ۔
ذیل میں ویب سائٹ کی منصوبہ بندی کے بنیادی مراحل بتائے گئے ہیں ۔

1. ویب سائٹ دیکھنے والے لوگوں یا ناظرین (Audience) کا تعین کرنا ۔
2. اپنے نظریات اور مواد کو منظم کرنا
3. ڈائریکٹری ڈھانچہ یا سٹرکچر (Structure) تیار کرنا جسے عرف عام میں سائٹ کا نقشہ (Site Mapping) کہا جاتا ہے۔
4. تیا ر کرنے والے صفحہ (صفحات) کا خاکہ یا سٹوری بورڈ (Story Board) تیار کرنا ۔
5. ویب سائٹ کی ظاہری شکل و صورت وضع کرنا اور اس میں بہتری کرنا ۔

اگرچہ اوپر بیان کردہ مراحل میں بہت سی باتیں آپ کو پیچیدہ محسوس ہوں گی لیکن آپ پریشان نہ ہوں اور اس بات کا یقین رکھیں کہ جب آپ ان مراحل سے گزریں گے تو یہ آپ کو بہت آسان محسوس ہوں گے ۔
ذیل میں ان تمام مراحل کو تفصیل کے ساتھ بیان کیا گیا ہے اور اس کے ساتھ ساتھ کامیاب منصوبہ بندی کرنے کیلئے ٹوٹکے بھی مہیا کئے گئے ہیں ۔

جاری ہے ۔۔۔​

 

2۔ ناظرین کا تعین کرنا
روزانہ سینکڑوں یا ہزاروں لوگ آپ کی ویب سائٹ کا دورہ کریں گے ـ آپ کی یہ خواہش ہوگی کہ آپ کا مطلوبہ پیغام واضح طریقے سے ویب سائٹ کے ذریعے لوگوں تک پہنچے ـ یہ پیغام آپ کے خیالات ، ریسرچ کے نتائج یا دوسری چیزوں پر مبنی ہوسکتا ہے ۔

لیکن سوچنے والی بات یہ ہے کہ کس طرح ویب سائٹ یا دوسرے میڈیا پیغام پہنچاتے ہیں ؟ اس کیلئے سب سے پہلے یہ جاننے کی ضرورت ہوتی ہے کہ آپ کن لوگوں کو یہ پیغام پہنچانا چاہتے ہیں ـ ان معلومات کے بغیر آپ مطلوبہ پیغام کی حدود کا تعین نہیں کرسکتے ۔
دیا جانے والا پیغام ہی ایک بنیاد ہے جس پر ویب سائٹ بنائی جاتی ہے ـ اس لئے کسی بھی ویب سائٹ کی منصوبہ بندی میں سب سے پہلا مرحلہ اس بات کا تعین کرنا ہے کہ آپ کن لوگوں کیلئے یا کن ناظرین کیلئے ویب سائٹ بنا رہے ہیں ۔

آپ کو ان باتوں کا پتہ ہونا چاہئیے کہ آپ کے ناظرین کا تعلیمی قابلیت کیا ہے ؟ ، پچھلا تجربہ کتنا ہے ، ان کی دلچسپی کس میں ہے اور وہ کیوں آپ کی ویب سائٹ کا دورہ کریں گے ـ ان چیزوں کے علاوہ آپ کو یہ بھی پتہ ہونا چاہئیے کہ
ناظرین کی اوسط عمر کتنی ہے ؟
وہ جغرافیائی لحاظ سے کس علاقہ میں رہتے ہیں ؟
اور وہ ویب پر کیا چیز چاہتے ہیں ؟

نوٹ :- اگر آپ ویب سائٹ کسی ذاتی سٹیٹمنٹ یا تخلیقی تجربہ کی بنیاد پر بنارہے ہیں تو آپ اس مرحلہ کو چھوڑ کر اپنی ذاتی دلچسپی اور ترجیحات کی بنیاد پر ویب سائٹ بنا سکتے ہیں ـ دوسری صورت میں اس سبق میں دئیے گئے منصوبہ بندی کے تمام مراحل سے ضرور گزریں ۔

آپ کس طرح ناظرین کیلئے معلومات اکٹھی کریں گے ؟ اگر آپ کسی پیشہ ورانہ ماحول میں کام کررہے ہیں تو اس بات کا قوی امکان ہے کہ آپ کی بنائی گئی چیز (پراڈکٹ) یا آپ کی پیش کردہ خدمات کو استعمال کرنے والے لوگوں کے بارے میں کوئی پہلے سے معلومات اکٹھی کر چکا ہے ـ اگر کوئی ایسا سروے کر چکا ہے جو آپ کو مدد دے سکتا ہے تو اسے تلاش کریں اور نئے سرے سے تحقیق کرنے کا وقت بچائیں ۔
اگر آپ یہ معلومات نہیں رکھتے یا آپ کسی اور ماحو ل میں ہیں تو مندرجہ ذیل پیراگراف کو رہنمائی کیلئے استعمال کریں ـ

سروے کرنا :
موجودہ اور مستقبل میں اپنی ویب سائٹ کے ناظرین کے بارے میں تحریر کریں ۔
ان میں مندرجہ ذیل معلومات ضرور شامل کریں :
عمر
جنس
معاشی حیثییت
تعلیمی قابلیت
قومیت
جغرافیائی علاقہ (جس میں وہ رہتے ہیں)
شادی شدہ / غیر شادی شدہ
کن زبانوں پر انہیں عبور حاصل ہے ؟ اور وہ آپ کی ویب سائٹ کس کس زبان میں دیکھنا چاہتے ہیں ؟
ان کے علاوہ آپ ان لوگوں کے بارے میں کیا جانتے ہیں ؟ کیا وہ دوست ہیں ؟ رشتہ دار ہیں ؟ کاروباری ساتھی ہیں یا کلائنٹ ہیں ؟ اس کے علاوہ مختلف پیراگراف میں یہ لکھیں کہ آپ کن لوگوں کو اپنی ویب سائٹ پر دعوت دینا چاہتے ہیں یا کون لوگ آپ کی ویب سائٹ کا دورہ کرنا پسند کریں گے ۔

اس مرحلہ کی تکمیل کیلئے آپ سنجیدگی سے سوچیں ـ اگر آپ اس مرحلہ کا تعین نہیں کریں گے تو آپ کی ویب سائٹ سے معلومات کا حصول مشکل ہوجائے گا ۔
فرض کریں گے آپ مزاح پسند کرنے والے لوگوں کیلئے مزاح سے بھرپور ایک ویب سائٹ بناتے ہیں ، اس ویب سائٹ سے مزاح پسند لوگ تو آسانی سے معلومات یا ڈیٹا تلاش کرلیں گے لیکن ایسے لوگوں کو جو کسی سنجیدہ موضوع پر معلومات یا کسی مسئلہ کا حل تلاش کررہے ہیں ، کافی پریشانی کا سامنا ہوگا ۔

گرافکس اور ملٹی میڈیا آئٹمز کے استعمال سے ویب سائٹ کی کشش بڑھتی ہے ، ان تصاویر اور ملٹی میڈیا آئٹمز کو ہر کوئی بذریعہ تیز لوکل ایریا نیٹ ورک (lan) تو حاصل کرسکتا ہے لیکن اس طرح بڑی تصاویر اور ایکٹو ملٹی میڈیا آئٹمز سے ورلڈ وائیڈ ویب پر آپ کی ویب سائٹ کی لوڈنگ میں رفتار کم ہوگی اور ویب سائٹ پر جتنی مقدار میں ان آئٹمز کا استعمال بڑھے گا رفتار اتنی ہی کم ہوتی جائے گی ۔

ناظرین کے ساتھ کامیابی سے رابطہ کرنے کیلئے پہلے یہ جان لیں کہ وہ کون ہیں ؟ اور پھر ویب سائٹ کے مختلف عناصر پر ان کے رد عمل کا جائزہ لیں ـ آپ اپنی ویب سائٹ میں ہر پہلو مثلا فونٹس ، تصاویر وغیرہ کی سیٹنگ ، اپنی ویب سائٹ سے متعلقہ ناظرین کو ذہن میں رکھ کر کریں ۔

اس سبق کے آخر میں ہم کچھ ویب سائٹس کے ٹیمپلیٹس فراہم کریں گے جن میں مختلف مقاصد کی تکمیل کیلئے مختلف ڈیزائن اور ڈیزائننگ کے عناصر استعمال کئے گئے ہیں ـ آپ ان ویب سائٹس کا دورہ کرکے انہیں سمجھنے کی کوشش کریں ، ہر ویب سائٹ ہر چیز میں کامیاب نہیں ہوتی ، مثال کے طور پر ایسی ویب سائٹس جو تکنیکی مسائل کے حل بڑی تیزی کے ساتھ مہیا کرتی ہے یا سافٹ وئیر ڈاونلوڈ کرنے میں کافی آسان ہے ، ہوسکتا ہےوہ تصاویر اور فونٹس کی اتنی عمدہ کولٹی پیش نہ کرتی ہو۔

جاری ہے ۔۔۔​

 

3۔ حدود کا تعین کرنا اور تنظیم کرنا
ویب پیج کی ڈیزائننگ شروع کرنے سے پہلے آپ کے اس کے بارے میں نظریات درست ہونے چاہئیں ـ اس بات کا فیصلہ کرلیں کہ آپ کی ویب سائٹ کا مقصد یا مشن کیا ہے ؟ کیا آپ لوگوں کو کسی بات سے مطلع کرنا چاہتے ہیں ؟ انہیں ترقی یافتہ یا تعلیم یافتہ بنانا چاہتے ہیں ؟ ان تک ریسرچ یا رپورٹ پہنچانا چاہتے ہیں ؟ یا ویب سائٹ کے ذریعے انہیں تفریح مہیا کرنا چاہتے ہیں ؟
اگر آپ اپنی کمپنی کی ویب سائٹ بنا رہے ہیں تو اس بات کا یقین کرلیں کہ یہ ویب سائٹ کمپنی کے مفاد اور مشن کی نمائندگی کرتی ہے۔
زیادہ تر کمپنیاں ، حتی کہ بڑی کمپنیوں کے بہت سے شعبہ جات کسی مخصوص سٹیٹمنٹ پر کام کرتے ہیں ـ آپ ان مشن سٹیٹمنٹ میں سے کسی ایک کی بنیاد پر ویب سائٹ بنا سکتے ہیں ۔

4۔ آپ کا مشن کیا ہے ؟
اپنی ویب سائٹ کیلئے مشن سٹیٹمنٹ لکھنے کیلئے مندرجہ ذیل چیزوں کا خیال رکھیں :
آپ کی کمپنی ویب سائٹ پر یا عام طور پر کونسی آئٹم یا خدمات پیش کرتی ہے ؟
آپ کے (یا آپ کی کمپنی) کے تین سے پانچ تک کونسے مقاصد کی تکمیل کیلئے آپ نے منصوبہ بندی کی ہے ؟ (عمومی طور پر یہ مقاصد معلومات پہنچانا، تفریح فراہم کرنا ، چیزیں بیچنا ، ترقی کرنا ، تقسیم کرنا یا ریسرچ یا رپورٹ پہنچانا ہیں ـ زیادہ تر ویب سائٹ ان تمام یا اس سے زیادہ مقاصد کیلئے کام کرتی ہیں ۔)
کیا آپ کی تصویر یا سائٹ کی تصویر کو بیان کرنے کیلئے کچھ الفاظ یا ایک چھوٹا سا فقرہ استعمال کیا جاسکتا ہے ؟
سائٹ کو کن ناظرین کی بنیاد تک پہنچنا چاہئیے ؟
کیا سائٹ خود ہی استعمال کنندگان تک پہنچے یا مطلوبہ مقاصد کی تکمیل کیلئے مدد فراہم کرتی ہے؟
آپ کی سائٹ کے مقاصد اور استعمال کنندگان کی پسند کو ذہن میں رکھتے ہوئے اور آپ کے بجٹ کی حدود کا خیال رکھتے ہوئے سائٹ میں استعمال ہونے والی کس قسم کی چیزیں اور ٹیکنالوجی میسر ہے ؟
آپ یا آپ کی کمپنی کس طرح اپنی ویب سائٹ کی کامیابی کا پتہ چلائیں گے ؟
اوپر بیان کردہ تمام نقاط کی روشنی میں اپنی ویب سائٹ کی مشن سٹیٹمنٹ کا تعین کریں اور اسے کاغذ پر لکھ لیں، اس سٹیٹمنٹ کو مختصر رکھیں ـ ایک پیراگراف یا چند جامع جملوں پر مشتمل سٹیٹمنٹ بہترین ہوتی ہے ۔

5۔ منظم کرنا :
اب آپ اپنی تمام چیزوں کو منظم کریں گے ـ تمام مطلوبہ ڈاکومنٹس اور تصاویر کو اکٹھا کرکے رکھ لیں ـ مثال کے طور پر اگر آپ ذاتی سائٹ بنا رہے ہیں تو تمام لکھے مواد اور آرٹ ورک کو اکٹھا کر لیں اور اگر آپ اپنی کمپنی کی سائٹ بنا رہے ہیں تو کمپنی کا لوگو ، کمپنی کی معلومات اور پراڈکٹ کی تفصیل پر مشتمل ڈاکومنٹس یا دستاویزات اکٹھی کرلیں۔
اب آپ اپنےمشن کی تکمیل کیلئے پہنچائے جانے والے پیغام ، استعمال ہونے والی تصاویر اور تحریر کے بارے میں سوچیں ۔
اگر آپ کی سائٹ کا مقصد تفریح فراہم کرنا ہے تو ہلکے پھلکے فقرات اور مزاحیہ تصاویر ٹھیک رہیں گی جبکہ ایک سنجیدہ ویب سائٹ میں مکمل طور پر ٹھیک لینگوئج اور پُر تاثر تصاویر استعمال ہوں گی ۔

جاری ہے ۔۔۔​

 

6۔ ایک ڈائریکٹری سٹرکچر بنانا
اگر آپ کی ویب سائٹ میں استعمال ہونے والی HTML فائلوں اور تصاویر کی تعداد تھوڑی ہے تو آپ انہیں ایک ہی ڈائریکٹری میں رکھ سکتے ہیں لیکن پیچیدہ قسم کی سائٹس میں فائلوں کی تنظیم کی ضرورت پیش آتی ہے ۔
اس کیلئے آپ مختلف اقسام کی فائلوں کو مختلف ڈائریکٹریوں اور سب ڈائریکٹریوں میں رکھتے ہیں تاکہ ویب سائٹ بناتے ہوئے ان کی بروقت دستیابی ہو اور سائٹ کو منظم رکھنے میں کوئی دشواری نہ ہو ۔
ویب سائٹ کی فائلوں کیلئے ڈائریکٹری سٹرکچر بنانے کے عمل کو سائٹ میپنگ Site Mapping بھی کہا جاتا ہے ، ویب سائٹ کیلئے ایک منطقی ڈائریکٹری سٹرکچر بنانا منصوبہ بندی کا اہم حصہ ہے ۔
یہ اس وقت بہت مفید ثابت ہوتا ہے جب آپ ویب سائٹ میں مختلف فائلوں اور تصاویر کیلئے روابط(لنکس/Links) استعمال کرتے ہیں کیونکہ ان روابط(لنکس/Links) میں درست پاتھ دینا ضروری ہوتا ہے ـ اگرآپ بعد میں ان فائلوں کی جگہ تبدیل کردیں گے ، ان کے نام تبدیل کردیں گے یا لنکس میں غلط پاتھ دیں گے تو یہ لنکس صحیح کام نہیں کریں گے ۔
آپ اس مرحلہ میں پچھلے مرحلہ کیمطابق حاصل کردہ معلومات استعمال کرسکتے ہیں ـ آپ کو چاہئیے کہ اپنے پیجز کو ایک top-down ڈائریکٹری سٹرکچر میں منظم کریں جس طرح آپ ہارڈ ڈسک میں فائلوں کی مختلف ڈائریکٹریوں کے اندر تنظیم کرتے ہیں ۔
ڈائریکٹری سٹرکچر کو دیکھنے کیلئے ایک باکس بنائیں (آپ کاغذ اور قلم یا ڈیزائننگ کا سافٹ وئیر استعمال کرسکتے ہیں) جو آپ کے ہوم پیج (Home Page) کو ظاہر کرتا ہے ـ اس کے نیچے ایک افقی لائن لگائیں اور اس لائن کے نیچے باکسز بنائیں جو اہم مواد رکھنے والی ڈائریکٹریوں کو ظاہر کرنے کیلئے ان باکسز کے نیچے مزید باکسز بناسکتے ہیں ـ یہ باکسز ذیل کی شکل میں دکھائے گئے ہیں ۔



جب آپ ایسا کرلیں گے تو سوچیں کہ کن پیجز کو دوسرے پیجز یا ہوم پیج کے ساتھ لنک کرنا ہے اور ایک ہی پیج کی دو کاپیاں دو مختلف ڈائریکٹریوں میں ہرگز نہ رکھیں ـ نوٹ کریں کہ سائٹ میں استعمال ہونے والے ہر پیج یا فائل کو ایک یا دوسری ڈائریکٹری میں رکھیں ۔
ڈائریکٹریوں اور سب ڈائریکٹریوں کے نام مختصر اور جامع رکھیں ـ مثال کے طور پر JOBLISTING کی بجائے JOBS نام رکھیں ۔
----------------------------------------------------------
ٹوٹکا : بڑی سائٹس کے اندر آپ مختلف عناصر کیلئے علیحدہ ڈائریکٹریز استعمال کرتے ہیں ـ اس کی عام استعمال Images کی ڈائریکٹری ہے ـ زیادہ تر ویب ڈیزائنرز اس ڈائریکٹری کے اندر پوری سائٹ میں استعمال ہونے والی تصاویر رکھتے ہیں ـ اسی طرح آپ مختلف عناصر کیلئے مختلف ڈائریکٹریز بنا سکتے ہیں ۔
----------------------------------------------------------

جاری ہے ۔۔۔​

 

7۔ سٹوری بورڈ تیار کرنا
اب اپنے ہوم پیج اور اس کے ساتھ لنک کرنے والے پیجز کا سٹوری بورڈ (خاکہ) تیار کریں ۔
اپنے اس خاکے میں اپنے خیال کے مطابق تمام عناصر مثلا تحریر ، تصاویر ، بٹن ، ہائپرلنکس وغیرہ شامل کریں ۔
ان اجزاء کی سیٹنگ میں کوئی ڈر محسوس نہ کریں کیونکہ یہ آپ کا حتمی ڈیزائن نہیں ہے بلکہ یہ بھی سائٹ کی تنظیم کا ہی حصہ ہے ـ اگر یہ ڈیزائن آپ کے اصل نظریہ کے مطابق نہیں ہے تو اسے ختم کریں اور دوبارہ سے ڈیزائننگ شروع کریں ـ یہ خاکہ ذیل کی شکل میں دکھایا گیا ہے ۔



----------------------------------------------------------
نوٹ : سائٹ کی عمومی منصوبہ بندی اور ڈائریکٹری سٹرکچر بنانے کے بعد آپ نے نوٹ کیا ہوگا کہ آپ کی سائٹ کے اجزاء مختلف اقسام کے ہیں ـ اگر ایسا ہے تو آپ مختلف پیج ٹیمپلیٹس میں کام کرسکتے ہیں جن کے اندر آپ مختلف اجزاء رکھیں گے ۔
----------------------------------------------------------

یاد رکھیں کہ ایک ویب دراصل لنک کا مجموعہ ہوتا ہے اور ناظرین اس پورے ویب کو ایک ناول کی طرح مسلسل نہیں پڑھ سکتے بلکہ لنکس کو استعمال کرتے ہوئے صفحہ بہ صفحہ پڑھتے ہیں ـ وہ چاہتے ہیں کہ کسی دلچسپ چیز پر تیزی کے ساتھ پہنچیں اور پھر وہاں سے کسی اور تک ۔ناظرین کسی اور سائٹ سے آپ کی سائٹ کا لنک استعمال کرتے ہوئے بھی اسے کھول سکتے ہیں ۔
آپ کی سائٹ اس قابل ہونی چاہئیے کہ ناظرین کسی پریشانی اور وقت کے ضیاع کے بغیر پسندیدہ اجزاء پر حرکت کرسکیں ۔ اگر آپ کی سائٹ میں گھومنے میں مشکلات کا سامنا کرنا پڑتا ہے تو ہوسکتا ہے استعمال کنندگان دوبارہ اس سائٹ کی طرف رُخ ہی نہ کریں ۔ اس مقصد کیلئے آپ سائٹ میں ٹیکسٹ لنکس اور خوبصورت بٹنوں کو بطورِ لنکس استعمال کرسکتے ہیں ۔ سائٹ میں یہ سہولت پیدا کریں کہ ناظرین ایک کلک کرکے ویب سائٹ کے مختلف حصوں اور پیجز تک رسائی حاصل کرسکیں ۔ ایسا کرنے کے بے شمار طریقے ہیں لیکن آپ جو بھی طریقہ استعمال کریں اس میں اہم بات یہ ہونی چاہئیے کہ وہ آسانی سے دکھائی دے اور اسے استعمال کرنے میں بھی کوئی مشکل پیش نہ آئے ۔
ایک پہلے سے موجود ویب سائٹ اور ایک ایسی سائٹ کے درمیان فرق کو ذہن میں رکھیں جو آپ کے ڈیزائن میں پیچیدگی اور تکنیکی مشکلات کی وجہ سے فضول ہے اور سائٹ میں موجود اجزاء کے معیار اور پیشکش میں کامیابی کی بنا پر کامیاب ہے ۔ سائٹ کے ہر پیج کو اس طرح ڈیزائن کریں کہ وہ ایک بڑی سائٹ کا حصہ ہونے کے باوجود اکیلا ٹھیک کام کرسکے ۔ یہ سوچ لیں کہ آپ کونسے رنگ استعمال کرنا چاہتے ہیں ، کونسے فونٹ اس سائٹ میں کام کریں گے اور مندرجہ ذیل اشیاء کو آپ کہاں رکھیں گے۔
نیوی گیشن (سائٹ میں گھومنے کیلئے مددگار عناصر مثلا بٹن اور ٹیکسٹ لنک وغیرہ)
اپنی شناخت کے بینر ، لوگو وغیرہ
گرافکس اور دوسرا آرٹ کا کام
تمام اقسام کی تحریر
کسی قسم کا نوٹس یا کاپی رائٹ کی تحریر

جاری ہے ۔۔۔​

 

8۔ سائٹ کی شکل و صورت تیار کرنا
اس مرحلہ میں آپ سائٹ کی ظاہری شکل وصورت بنانے پر توجہ دیں گے ۔ ہماری شکل وصورت سے کیا مُراد ہے؟
یہ ڈیزائننگ کی ایک اصطلاح ہے جس سے سائٹ کی تمام ظاہری پیشکش کو مُراد لیا جاتا ہے ۔ یہ پیشکش رنگوں کے تناسب ، تصاویر اور تحریر پر مشتمل ہے جو آپ کے پیغام کو سٹائل کے ساتھ موثر طریقے سے پہنچاتا ہے ۔
آپ پہلے ہی سائٹ کی منصوبہ بندی کرچکے ہیں اور سائٹ میں شامل ہونے والے اجزاء کا خاکہ یا سٹوری بورڈ بنا چکے ہیں ۔ اب آپ ان تمام اجزاء کو ایک اچھے اور منفرد ڈیزائن میں پیش کرنا چاہتے ہیں ۔
اگر آپ ڈیزائننگ کا کوئی علم نہیں رکھتے اور اس کورس میں سے اس علم کو جاننے کے خواہاں ہیں تو آپ کو مایوسی ہوگی کیونکہ گرافک ڈیزائننگ کو اس کورس میں سمونا اتنا آسان کام نہیں ہے اس کیلئے آپ مجلس کے گرافک سیکشن میں کرائے جانے الے گرافک ڈیزائننگ کورسز سے استفادہ کرکے اسے ویب ڈیزائننگ میں استعمال کرسکتے ہیں ۔
http://www.vblinks.urdumajlis.net/forumdisplay.php?f=40
http://www.vblinks.urdumajlis.net/forumdisplay.php?f=12
http://www.vblinks.urdumajlis.net/forumdisplay.php?f=53

ذیل میں کچھ عناصر بیان کئے گئے ہیں جن کا سائٹ کی شکل و صورت تیار کرتے ہوئے خیال رکھا جانا ضروری ہے ۔
1. خالی جگہ اور تواز
2. رنگ
3. تحریر کے سٹائل
4. شکلیں
5. ٹیسکچر
6. خاص ایفیکٹس
7. مستقل مزاجی
8. تبدیلی

1۔ خالی جگہ اور توازن:
اس سے مُراد پیج میں موجود مختلف عناصر کے درمیان خالی جگہ یا سفید پن ہے اور اس میں یہ خیال رکھا جاتا ہے کہ تمام عناصر کس طرح متوازن ہوں گے ۔ عام طور پر ڈیزائنر عناصر کے درمیان زیادہ سفید جگہ کو پسند کرتے ہیں کیونکہ اس توازن کی وجہ سے پڑھنے میں آسانی ہوتی ہے ۔
2۔ رنگ:
اس پورے کورس میں خاص طور پر تحریر ، فونٹس اور ٹیبلز پر بات کرتے ہوئے ہم ویب کے رنگ پر بحث کریں گے ۔ ڈیزائننگ کی ابتداء میں آپ کو یہ معلوم ہونا چاہئیے کہ کونسے رنگ کس قسم کی ڈیزائننگ میں کیا کردار ادا کرتے ہیں اور یہ آپ کی سائٹ کی خوبصورتی میں کس قدر اضافہ کرتے ہیں ۔ اگر آپ ایک ذاتی ہوم پیج بنا رہے ہیں اور زندہ دل شخص ہیں تو گہرے اور شوخ رنگ استعمال کریں گے جبکہ ایک سنجیدہ موضوع کی ویب سائٹ میں ہلکے رنگ استعمال ہونے چاہئیں ۔
3۔ تحریر کے سٹائل:
رنگوں کی طرح تحریر کے مختلف سٹائل سائٹ کی خوبصورتی میں اضافہ کرتے ہیں ۔ یہ سٹائل سائٹ کے پیغام کے مطابق ہونے چاہئیں ۔ آپ ایک پیج میں 20 یا زیادہ اقسام کے سٹائل استعمال نہیں کرسکتے کیونکہ اس سے پیج پیشہ ورانہ محسوس نہیں ہوتا اور ناظرین اس کو پڑھنے میں پریشانی محسوس کرتے ہیں ۔
4۔ شکلیں:
مختلف ویب پیجز ملاحظہ کرتے ہوئے آپ نے نوٹ کیا ہوگا کہ ان میں بہت سی مستطیلی شکلیں استعمال کی جاتی ہیں ۔ اس کے علاوہ مشہوری کیلئے جو بینر استعمال ہوتے ہیں وہ بھی مستطیلی ہوتے ہیں ۔ اس کے علاوہ پیج ہیڈرز ، بٹن اور دوسرے عناصر بھی استعمال ہوتے ہیں ۔ کیونکہ مستطیلی شکلیں کافی عام ہیں اس لئے آپ اس کے علاوہ شکلیں مثلا تکونیں اور انڈے کی شکل کے دائرے وغیرہ سائٹ میں استعمال کرسکتے ہیں ۔
شکلوں کے استعمال سے سائٹ منفرد نظر آتی ہے ۔
5۔ ٹیکسچر:
آپ نے اکثر ویب پیجز کے پس منظر میں ٹیکسچر(Texture) کا استعمال دیکھا ہوگا ۔ اس ٹیکسچر میں آپ اپنے نظریات کو استعمال کرسکتے ہیں اور اگر آپ یہ محسوس کرتے ہیں کہ یہ ٹیکسچر آپ کے نظریات کی نمائندگی کرے گا تو اسے پیج کے پس منظر میں استعمال کریں ۔ ٹیکسچر استعمال کرنے میں یہ احتیاط کریں کہ اس کے اوپر موجود تحریر بالکل واضح انداز میں پڑھی جاسکے ۔
6۔ خاص ایفیکٹس:
کیا آپ کی سائٹ کو خاص ایفیکٹس مثلا متحرک منظر(Animation) وغیرہ فائدہ پہنچاسکتے ہیں؟ اگر ایسا ہے تو ان کی منصوبہ بندی کریں ۔ آپ ایک سائٹ میں بہت زیادہ خاص ایفیکٹس شامل نہیں کرسکتے کیونکہ اس سے سائٹ کی سنجیدگی متاثر ہوتی ہے ۔
7۔ مستقل مزاجی:
یہ ایک ضروری امر ہے کہ سائٹ کے ہر پیج میں مستقل مزاجی موجود ہو ۔
سائٹ کے ہر پیج میں رنگوں کا ایک ہی سیٹ استعمال کرنا بھی مستقل مزاجی کے زمرے میں آتا ہے ۔ اس کے علاوہ ہر پیج میں آپ ایک ہی طرح کے نیوی گیشن اجزاء شامل کرسکتے ہیں ۔
8۔ تبدیلی:
کیا ایک سائٹ میں موجود ہر پیج کا ایک ہی رنگ ہونا چاہئیے؟ نہیں آپ اپنی سائٹ کے نقشہ کے مطابق مستقل مزاجی کا خیال رکھتے ہوئے مختلف اقسام کی تبدیلیاں کرسکتے ہیں ۔
سائٹ کی شکل و صورت بنانا ڈیزائن کا ایک اہم حصہ ہے ۔ بہت سے لوگ پچھلے حصے میں بیان کردہ باتوں کو جانتے ہی نہیں یا جانتے ہوئے بھی ویب پیجز ڈیزائن کرتے ہوئے ان کا خیال نہیں رکھتے جس کے نتیجہ میں ان کی سائٹ کی خوبصورتی متاثر ہوتی ہے لیکن آپ ان باتوں کا خیال رکھتے ہوئے ظاہری دلچسپی سے بھرپور پیجز بناسکتے ہیں ۔
ان پانچ مراحل میں آپ نے ویب سائٹ کی منصوبہ بندی کے حوالے سے بہت کچھ سیکھا ہے۔ جووقت آپ نے یہ چیزیں سیکھنے میں صرف کیا ہے وہی وقت بعد میں آپ کا بہت سا وقت بچائے گا اور بہت سا فائدہ پہنچائے گا ۔

جاری ہے ۔۔۔​

 

9۔ پیج کا ڈیزائن :
ویب سائٹ کی ڈیزائننگ کرتے ہوئے یہ بات ذہن میں رکھیں کہ ناظرین کی توجہ حاصل کرنے کیلئے آپ کے پاس صرف دو سیکنڈز ہوتے ہیں۔ یعنی آپ کی ویب سائٹ کے ڈیزائن میں اتنی کشش ہونی چاہئیے کہ ناظرین دو سیکنڈ کیلئےسائٹ کی طرف دیکھیں تو سائٹ کا ڈیزائن ان کی نظروں کو اپنی گرفت میں لے لے ۔

اگر آپ ذیل میں بیان کردہ نقاط کا خیال رکھیں گے تو یقینا آپ کا ویب پیج آنکھوں کو گرفت میں لینے کے قابل بن جائے گا ۔


* سائٹ کے ٹائٹل کو مختصر ، آسان ، بیانیہ اور درست رکھیں اور اس میں بیان کردہ بات کو پورا کریں ۔ مثال کے طور پر اگر آپ کے پیج کا ٹائٹل hundred of Yummy Recipes ہے تو پیج میں کم از کم سو طریقے ضرور دیں ۔
* پیج میں موجود اجزاء کی فہرست پیج کے اوپر دیں اور یہ کوشش کریں کہ ناظرین کو فہرست کے حصول کیلئے پیج کو نیچے سکرول نہ کرنا پڑے ۔
* اگر آپ کا پیج تین سکرینوں سے بڑا ہے تو اسے ایک سے زیادہ پیجز میں تقسیم کردیں ۔
* اپنے پیج کو کہیں سے بھی غیر متوازن مت ہونے دیں ۔ خالی جگہ ، چھوٹی اور بڑی تصویروں ، مختلف شکلوں ، اور تحریر کے باکسز کو اس طرح متوازن کریں کہ پیج میں دلچسپی اور ورائٹی پیدا ہو ۔
* غیر ضروری اشیاء سے پیج کو ہرگز مت بھریں ۔
* تحریر اور لنکس کو پس منظر کے رنگ سے الٹ رنگ دیں ۔
* اس بات کا یقین کرلیں کہ ہر وہ چیز جس کو آپ نے لنک کے طور پر استعمال کیا ہے وہ ٹھیک طرح کام کرتی ہے ۔
* ایک ہی نام سے ایک ہی پیج میں دو ایسے لنکس مت بنائیں جو مختلف جگہوں پر جاتے ہوں اور نہ ہی دو ایسے لنکس مختلف ناموں سے بنائیں جو ایک ہی جگہ پر جاتے ہوں ، اگر لنک آپ کی سائٹ کے اندر ہی کسی پیج پر جاتا ہے تو ہمیشہ واپس ہوم پیج پر آنے کا ذریعہ ضرور مہیا کریں ۔
* کوشش کریں کہ آپ جو لنک بنائیں وہ اپنے مقصد کی وضاحت کرتا ہو مثلا
Click here to come in
وغیرہ اور عام طور پر استعمال ہونے والے الفاظ مثلا
Click here
وغیرہ استعمال نہ کریں ۔
* کم جگہ گھیرنے والی تصاویر استعمال کریں ۔
* بڑی تصویروں کی بجائے ان کے تھمب نیل یا چھوٹی تصاویر بطور لنک استعمال کریں ۔
* یہ یاد رکھیں کہ آپ کے پیج کے ناظرین مختلف صلاحیت رکھنے والے براوزر استعمال کرتے ہیں ۔
* فائل کے ناموں کو مختصر اور مستقل رکھیں ۔
* جو ڈاون لوڈ ہوے والی فائل آپ شامل کرتے ہیں اس کے سائز کے بارے میں ناظرین کو ضرور بتائیں ۔
* کسی دوسرے کی بنائی گئی تصویروں یا تحریر کو استعمال کرنے سے پہلے اس شخص سے اجازت حاصل کریں اور اپنے ویب پر اس کی تصویر یا تحریر کے ساتھ اس کا حوالہ دیں ۔
* ویب سائٹ بنانے والے کے ای میل (email) یا ویب سائٹ کا لنک ضرور بنائیں ۔


اوپر بیان کردہ نقاط کی روشنی میں آپ ویب سائٹ بنانے کا آغاز پُر اعتماد طریقے سے کرسکتے ہیں ۔

جاری ہے ۔۔۔​

 

بھائی جان ہم نے تو آپ کے نوٹس اپنے انسٹی ٹیوٹ میں بھی طلباء کو تقسیم کر دیئے ہیں ۔
بہت خوب ورک ہے ۔ ماشاء اللہ

 

10۔ کچھ کامیاب پیج ڈیزائن:
ایک کامیاب ویب پیج بنانے کے بارے میں تصور اور سوچ حاصل کرنے کا ایک بہترین طریقہ یہ ہے کہ پہلے سے بنے کامیاب ویب پیجز کا مطالعہ کیا جائے ۔ اس لئے میں یہاں چند ڈیزائن اٹیچ کرکے ان کی خوبی بیان کروں گا جس سے آپ کو ان کے بنائے جانے کے طریقے سے آگاہی ہوجائے گی ۔
جو ویب پیجز میں نے منتخب کئے ہیں ان میں زیادہ تر اولاً ایچ ٹی ایم ایل اور ثانیاً سی ایس ایس پر بنیاد کرتے ہیں ۔

1۔۔۔
http://asadullah25.110mb.com/templates/one/
یہ ہے Transparentia ویب سائٹ ٹیمپلیٹ
اسے آپ یہاں‌سے حاصل کرسکتے ہیں ۔
اسے ان زپ کرکے دیکھیں‌گے تو آپ کو اس میں
1۔ ‌img نامی فولڈر نظر آئے گا جس میں اس ویب سائٹ میں‌استعمال کئے جانے والے تمام images محفوظ کئے گئے ہیں۔
2۔ index.html نامی ایچ ٹی ایم ایل فائل نظر آئے گی جو کہ ویب سائٹ کے صفحہ اول کیلئے مستعمل ہے۔
3۔ default.css نامی Casecading Style Sheet فائل نظر آئے گی جس میں‌اس ویب سائٹ کی تمام تر ترتیبات لکھی جاچکی ہیں اور جب بھی کوئی ترتیب تبدیل کرنے کا ارادہ ہو تو اسی میں‌تبدیلی کی جائے گی۔


2۔۔۔
http://asadullah25.110mb.com/templates/two/
یہ ہے Coffee N Cream ویب سائٹ ٹیمپلیٹ
اسے آپ یہاں‌سے حاصل کرسکتے ہیں ۔
اسے ان زپ کرکے دیکھیں‌گے تو آپ کو اس میں
1۔ ‌img نامی فولڈر نظر آئے گا جس میں اس ویب سائٹ میں‌استعمال کئے جانے والے تمام images محفوظ کئے گئے ہیں۔
2۔ index.html نامی ایچ ٹی ایم ایل فائل نظر آئے گی جو کہ ویب سائٹ کے صفحہ اول کیلئے مستعمل ہے۔
3۔ default.css نامی Casecading Style Sheet فائل نظر آئے گی جس میں‌اس ویب سائٹ کی تمام تر ترتیبات لکھی جاچکی ہیں اور جب بھی کوئی ترتیب تبدیل کرنے کا ارادہ ہو تو اسی میں‌تبدیلی کی جائے گی۔


3۔۔۔
http://asadullah25.110mb.com/templates/three/
یہ ہے andreas01 ویب سائٹ ٹیمپلیٹ
اسے آپ یہاں‌سے حاصل کرسکتے ہیں ۔
اسے ان زپ کرکے دیکھیں‌گے تو آپ کو اس میں
1۔ ‌img نامی فولڈر نظر نہیں آئے گا البتہ bg.gif , front.jpg , test.jpg نامی تصاویر ضرور نظر آئیں گی ۔ bg.gif کو ٹیمپلیٹ کے دائیں‌بائیں بیک گراؤنڈ کے طور پر سیٹ کیا گیا ہے ، front.jpg کو ہیڈر کی تصویر کے طور پر سیٹ کیا گیا ہے ، test.jpg کو کونٹینٹ کے ساتھ استعمال کرنے کے لئے رکھا گیا ہے ۔
2۔ index.html نامی ایچ ٹی ایم ایل فائل نظر آئے گی جو کہ ویب سائٹ کے صفحہ اول کیلئے مستعمل ہے۔
3۔ index2.html نامی ایچ ٹی ایم ایل فائل نظر آئے گی جو کہ ویب سائٹ کے فرعی صفحے کیلئے مستعمل ہے۔
4۔ andreas01.css نامی Casecading Style Sheet فائل نظر آئے گی جس میں‌اس ویب سائٹ کی تمام تر ترتیبات لکھی جاچکی ہیں اور جب بھی کوئی ترتیب تبدیل کرنے کا ارادہ ہو تو اسی میں‌تبدیلی کی جائے گی۔
5۔ print.css نامی Casecading Style Sheet فائل نظر آئے گی جس میں‌اس ویب سائٹ کی تمام تر ترتیبات لکھی جاچکی ہیں اور جب بھی کوئی ترتیب تبدیل کرنے کا ارادہ ہو تو اسی میں‌تبدیلی کی جائے گی۔

اس پوسٹ کے ساتھ کلاس نمبر3 : ویب ڈیزائننگ ختم ہوئی ، جلد ہی کلاس نمبر 4 لیکر حاضر ہوں‌گا۔ ان شاءاللہ​

 

معلومات دینے کا شکریہ۔۔۔۔۔۔۔۔۔۔۔۔۔۔

 

بھائی آپ نے بہت اچھی انفارمیشن دی ہے بہت بہت شکریہ ۔ اللہ آپکو اس کام کی جزاء دے۔ آمین
urdu kahaniurdu font sex storiesmakkah liveplay snow bros onlineshadi onlinesex

 

بہت خوب

 

ماشاء اللہ