Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Sketch
Webdesign

کیسے ڈیز۱ئنرز اور ڈویلپرز Sketch اور Zeplin کا استعمال کرتے ہوئے تعاون کر سکتے ہیں

Length:LongLanguages:

Urdu (اُردُو) translation by Shaan (you can also view the original English article)

ویب پروجیکٹ میں کامیابی کےلئے ڈیز۱ئنرز اور ڈویلپرز کے درمیان تعاون ہونا بہت ضروری ہے، اور یہ  ٹیم کی کامیابی کا ایک پیمانہ ہے جب کہ کام کرنے کی ایک ہی جگہ استعمال کرنا  بہت مفید  ہے،  آن لائن  سچ  کا ذریعہ ہونا جو کہ ساتھ مل کر کام کرنے میں مدد دیتا ہے ناقابل یقین حد تک مددگار ہوتا ہے۔ اس آرٹیکل میں ہم زیپلن (Zeplin)  پر غور کریں گے اور یہ دیکھیں گے کہ کیسے یہ  سکیچ (Sketch) کے ساتھ مجموعے میں  کام کرتا ہے اور ٹیموں کو آپس میں ملاتا ہے۔

Sketch کا خلاصہ

تقريباً چھ ماہ پہلے، جب میں نے نوکریاں بدلیں، تو مجھے Sketch سیکھنے کی ترغیب دی گئی تھی۔  اس سافٹويئر کی عظیم بات یہ ہے کہ یہ خاص طور پر انٹرفیس اور آئکن ڈیزائن پر مرکوز ہے، آرٹ بورڈز  سے لے کر ویب کے مخصوص سائز، موبائل، اور آئکنز، سے ان خصوصیات تک جو ڈیزائن کے عمل کو بہتر بنانے میں مدد دیتی ہیں، Sketch کا ڈیزائنرز کے پاس ہونا بہت ضروری ہے۔

اس کے علاوہ، اگر آپ  فوٹوشاپ یا السٹریٹر کے درمیانے صارف ہیں تو اسے سیکھنے کا عمل آپ کے لئے نہ ہونے کے برابر ہے۔

یہاں پر کچھ مثالیں ہیں جو آپ کو اس بات کا مجموعی جائزہ دیں گی کہ آپ sketch کے ساتھ کیا کچھ کر سکتے ہیں: 

  1. اپنے مواد کو منظم کرنے کے لئے صفحات بنائیں ( مثال کے طور پر: موبائل ڈیزائنز، ڈیسک ٹاپ ڈیزائنز اور ان صفحات کے اندر آرٹ بورڈز اپنے پروڈکٹ کا موکپ بنانے کے لئے ( مثال کے طور پر: قدم بہ قدم کسٹمر کا سفر ترتیب دیں)۔
  2. کسی مخصوص چیز کی تفصیلات (سائز(size)، جگہ(positioning)، رنگ(colours)، فونٹ سٹائل(font styles)، دھندلاپن یعنی اوپیسٹی(opacity) اور بہت کچھ)  کو ڈھونڈنے کے لئے انسپکٹر(Inspector) کا استعمال کریں۔
  3. آرٹ بورڈز یا کسی اکیلی چیزوں کو فائل کی قسموں (PNG, JPG, PDF اور اسی طرح) میں باہر بھیجنے کے لئے ایکسپورٹ (Export) فیچر استعمال کریں۔

’’میں ایک ڈویلپر ہوں،  میں نے Sketch کبھی استعمال نہیں کیا!‘‘

حالیہ برسوں میں ڈیزائنرز نے ان وژن InVision  جیسے ٹولز کا استعمال کرتے ہوئے آپس میں تعاون کرنا سیکھا ہے، پر اس پلیٹ فارم میں اب بھی ان خصوصیات کی کمی ہے جو کہ  ڈویلپمنٹ ٹیم کے لئے فوری ڈیزائن  بنائے۔

ہمیں ڈویلپرز سے انہی ٹولز میں مہارت کا نہیں پوچھنا چاہیے جوکہ ڈیزائنرز مصنوعات کا نقلی نمونہ بنانے کے لئے استعمال کرتے ہیں۔  اور یہ کہ، نہ ہی ہمیں ڈیزائنرز کو اس چیز سے دور کرنے کی ضرورت ہونی چاہئے کہ جو چیز وہ بہترین کر سکتے ہیں:   ڈیزائن!   جب بھی ڈیزائن مہیا کرتے ہیں تو اس کے ساتھ ’’تفصیلی دستاویزات‘‘ بنا نے کا عمل آسان نہیں ،اور اس کا مطلب بہت زیادہ وقت ضائع کرنا ہے ڈیزائن مہیا کرنے اور ضرورت آنے پر اس میں تبدیلیاں لانے کے عمل میں۔ 

Zeplin

یہ وہ جگہ ہے جہاں زیپلن Zeplin منظر میں داخل ہوتا ہے۔

 زیپلن(Zeplin) یوـ آئی ڈیزائنرز(UI designers) اور فرنٹ اینڈ ڈویلپرز(front end developers) کے درمیان تعاون کا ٹول ہے۔ یہ ڈیزائن کے بہاؤ کو زیادہ کرتا ہے اور ڈیزائن کے کام کو آگے بڑھانے میں ٹیموں کی مدد کرتا ہے۔

یہ ڈیزائنرز کو سکیچ  سے اپنے وا ئر فریمز(wireframes) یا وژوول ڈیزائنز(visual designs) اپ لوڈ کرنے کی اجازت دیتا ہے اور سیدھا انہیں زیپلن کے پروجیکٹ فولڈرز(project folders) میں شامل کرتا ہے۔ بہترین چیز؟ تشریحات خودبخود ڈیزائن میں شامل کر دی جائیں گی (سائیزز (sizes)، رنگ(colours)، مارجن(margins) اور یہاں تک کے بعض عناصر کے لئے سی ایس ایس CSS کی تجاویز) اور آپ کے پاس بس آن لائن ڈیٹا بیس پر ڈیٹا ڈالنے کا عمل بچ جائے گا جس پر پوری ٹیم شراکت کر سکتی ہے۔ 

’’زیپلن(Zeplin)  بہت اچھا کام کرتا ہے، جب ڈیٹا مینجمنٹ کی حکمت عملی(single source of truth) کے طور پر استعمال کیا جاتا ہے۔

اس کے علاوہ، جب سے یہ ایک اسٹینڈ آلون اپلی کیشن(standalone app) اور ویب اپلی کیشن(web app) کے طور پر دستیاب ہوئی ہے، آپ کہیں بھی اس تک رسائی حاصل کر سکتے ہیں۔ ڈیزائنز دیکھنے اور چیزیں جیسے وقفہ کاری(spacing)، سائزز(sizes)، رنگ(colours)، وغیرہ کرنے کے کام کو آسان بناتا ہے۔  –Daniel Setas Pontes, Javascript developer @NOW TV, Sky 

  Sketch سے Zeplin میں ڈیزائنز Export کرنا

Zeplin سکیچ میں پلگ اِن plugin کے طور پر کام کرتا ہے، تو اس لئے  ڈیزائنز upload کرنا صرف ایک کلک کا کام ہے۔

یہاں پر ہے کہ کیسے پروجیکٹ کا آغاز  کرنا ہے:

 زیپلن(Zeplin) کا پروجیکٹ شروع کرنا
  1. زیپلن (صرف mac کے لئے ) کو ڈاؤنلوڈ(Download)  کریں اور انسٹال کریں۔ ڈویلپرز کو OS X استعمال کرنے کی ضرورت نہیں ہوگی جیساکہ انہیں  ویب کے مواد تک  پہنچنے کے لئے صرف ویب کے ٹول(web-based tool) تک رسائی چاہیے ہوتی ہے ۔
  2.  پروجیکٹس بنائیں۔
  3. پلیٹ فارم  کو منتخب کریں جس کے لئے آپ نے ڈیزائن کیا ہے۔
  4. پروجیکٹ کو نام دیں (اس بات کا خیال رکھیں کہ آپ وہ نام منتخب کریں کہ جس سے پوری ٹیم واقف ہو)۔
Export from Sketch
سکیچ سے ایکسپورٹ(Export) کرانا

سکیچ کے اندر، انفرادی اشیاء کو منتخب کریں اور انہیں قابلِ ایکسپورٹ بنائیں۔ یہ آپ کی ڈویلپمنٹ ٹیم کو اس قابل کرے گا کہ وہ بعد میں ہر ایک ایلیمنٹ کو Zeplin کے اندر export کرا سکیں گے۔ یہاں پر ہے کہ یہ کیسے کام کرتا ہے:

  1. اس کے بعد، آرٹ بورڈز(artboards) منتخب کریں کہ جنہیں زیپلن کے اندر اپ لوڈ( upload)  کرانا ہے۔
  2. اس پر جائیں:  پلگ اِنز(Plugins) > زیپلن(Zeplin) > ایکسپورٹ سیلیکٹڈ آرٹ بورڈز(Export Selected Artboards)۔
  3. اس پروجیکٹ کو منتخب کریں کہ جس پر آپ اپنا ڈیزائن اَپ لوڈ کرنا چاہتے ہیں، اس کے بعد اِمپورٹ(Import) پر کلِک کریں۔

Zeplin پر کام کرنا

ایک بار جب Zeplin میں جائیں تو، آپ پروجیکٹس کے درمیان navigate (یہاں وہاں سفر کر سکتے ہیں) اور آرام سے اس کے اندر تمام اجزاء دریافت کر سکتے ہیں۔  بعض ایلیمنٹ کی تفصیلات کے بارے میں جاننا بھی ایک خودبخود عمل ہے؛ اپنی پسند کے ایلیمنٹ کو منتخب کریں، پھر سب متعلقہ معلومات دائیں ہاتھ کی جانب کے کالم میں ظاہر ہونگی۔ 

ڈویلپرز:  یہاں پر ہے کہ یہ کام کیسے کرتا ہے، ایک بار جب آپ web-based tool کھول لیتے ہیں اور sign in ہو جاتے ہیں:

  1. اس  چیز کو منتخب کریں جس کا آپ  معائنہ(inspect)  کرنا چاہتے ہیں۔
  2.  تفصیلی معلومات کے لئے جیسے کہ  فونٹ کے سٹائلز(font styles)، رنگ(color)، وغیرہ کے لئے دائیں ہاتھ کی جانب کے  کالم کی طرف دیکھیں(جس چیز کو آپ منتخب کریں گے اس کے مطابق معلومات آپ کو ظاہر کر دی جائے گی)۔
  3. بتائی گئی سی ایس ایس(CSS) کو کاپی کریں۔

 اگر ڈیزائن ٹیم کو  اجازت  ہو exportable elements کی اس وقت جب ڈیزائنز کو Zeplin میں ایمپورٹ کرا رہے ہو، ڈویلپنٹ ٹیم اس قابل ہونی چاہیے کہ خود انفرادی اثاثوں کو export کرا سکیں۔ Assets یعنی اثاثے SVG فارمٹ اور تین مختلف  PNG سائزز میں دستیاب ہو نگے۔

  1.  یہاں پر آپ ڈیزائن  میں نوٹس اور تبصرے یعنی کامنٹس شامل کرسکتے ہیں۔
  2. یہاں پر آپ پروجیکٹ کے لنکس  کاپی اور شیئر کر سکتے ہیں ، اور یہاں تک کہ اطلاعات لینے کے لئے ٹیم کے سلیک چینل (Slack channel) کے ساتھ شامل ہو سکتے ہیں  یا  ٹیم کے ارکان کو تعاون کرنے کی دعوت دے سکتے ہیں!

کیوں آپ کی ٹیم کو منتقل ہونا چاہئیے

زیپلن کے ساتھ کام کرنے کے بہت فائدے ہیں، جس کی کچھ مثالیں یہ ہیں:

  • آپ تفصیلی دستاویزات  بنانے سے گریز کریں گے؛ کچھ ایسی چیز جو اپ ڈیٹ کرنے میں نہ تو آسان ہے اور نہ ہی مشکل۔ 
  • ڈویلپرز اور دوسرے ڈیزائنرز کے لئے تمام تر متعلقہ معلومات کے ساتھ فوری تفسیری ڈیزائن بنائیں۔
  • آپ export کئے جا سکنے والے ڈیزائنز بنا سکتے ہیں، تاکہ ڈویلپرز انفرادی اثاثوں پر فوری رسائی حاصل کر سکیں۔  
  • جتنے چاہیں اتنے ڈیزائنز بنائیں، اور پھر صرف چند کلِک کے ذریعے اپ لوڈ اور اپ ڈیٹ کریں۔
  • سٹائل گائیڈز (style guides) بنائیں جوکہ ڈیزائن ٹیم کو یکساں رہنے میں مدد کریں گی۔
  • Slack کے انضمام وسائل کا فائدہ اٹھائیں، جس وقت بھی کوئی اپ ڈیٹ ہو فوری طور پر آپ کی ٹیم کو خبر دیتی ہے۔ 

کوشش کرو!

Sketch اور Zeplin  کے ساتھ کام کرنا  ڈیز۱ئنرز کے لئے ایک زبردست ذریعہ ہے ڈویلپرز کے ساتھ ہم آہنگی کے ساتھ تعاون کرنے کا۔ میری ٹیم اس طریقے سے کام کرنے کو پسند کرتی ہے۔ میں ان ٹولز سے متعلق کام کرنے پر آپ کے خیالات اور تجربات کو سننا پسند کروں گا۔ 

کارآمد ویب سائٹس

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.