كيفية تصميم المواقع وتحويله إلى HTML و CSS بواسطة لوناسي Lunacy بديل فيجما Figma

عملية تصميم أي موقع هي أول ما يجب ان يقوم به أي مصمم ويب Front End أو مصمم ومبرمج للمواقع في نفس الوقت والذي يطلق عليه Full Stack Developer، فالشركات أو الافراد الذين يقومون بمثل هذه الأعمال لصالح اصحاب المشاريع سواء على مواقع العمل الحر أو حتى في الشركات الرسمية، يجب على مصمميها ان يقوموا بعمل التصميم الشكلي اولا ثم يتم إرساله للعميل للموافقة والتوقيع عليه قبل بداية أي عمل حتى لا يكون هناك خلاف مستقبلي على الشكل العام للموقع.

برنامج ادوبي إكس دي وفيجما

وللقيام بذلك كان يستخدم في بداية الامر العديد من البرامج التي تساعد المصممين وتسهل عليه هذا الموضوع ومع تطور الأمر انتجت شركة ادومي برنامج خاص يسمى adobe XD وهو مخصص فقط لتصميم المواقع، ولكن ظهر منافس قوي له ومجاني وهو برنامج فيجما Figma وبعد ذلك ظهر العديد من البرامج التي تنافسهما.

برنامج لوناسي Lunacy

ولكن عندما تقوم باستخدام برنامج لوناسي Lunacy ستجد أشياء غاية في الأهمية لمساعدتك كمصمم، فهو ليس فقط سهل الاستخدام ولكنه أيضا يساعدك في سرعة تحويل التصميم إلى ملف HTML و CSS وهذا هو ما يميزه عن فيجما وإكس دي.

تصميم الموقع

بعد تنزيل برنامج لوناسي من موقعه الرسمي، نرى سويا خطوات التصميم للموقع باستخدام برنامج لوناسي خطوة بخطوة كالتالي:

تصميم الترويسة والشريط الجانبي والتذيل بالمقاسات المطلوبة

يتم تصميم جميع الأقسام المهمة الخاصة بالموقع وهي الترويسة Header والشريط الجانبي Sidebar والتذييل Footer والقسم الرئيسي للصفحة Main كالتالي:

تصميم قسم الترويسة header

وهو القسم الذي سيتم إضافة القوائم له وكذلك المنزلق slider له أيضا، ويتم تصميمه باختيار حجم شاشة 1920 بكسل عرض وهي من أكبر الشاشات ويجب فيما بعد اختيار التصميم لاحجام الأجهزة المختلف بدأ من شاشات الحاسبات حتى نصل لشاشات التابلت والموبيل، وللتصميم للشاشات الكبيرة يتم فتح ملف جديد في البرنامج المميز lunacy مع اختيار حجم الشاشة كالتالي.