برنامج ادوبي إكس دي وفيجما
وللقيام بذلك كان يستخدم في بداية الامر العديد من البرامج التي تساعد المصممين وتسهل عليه هذا الموضوع ومع تطور الأمر انتجت شركة ادومي برنامج خاص يسمى adobe XD وهو مخصص فقط لتصميم المواقع، ولكن ظهر منافس قوي له ومجاني وهو برنامج فيجما Figma وبعد ذلك ظهر العديد من البرامج التي تنافسهما.
برنامج لوناسي Lunacy
ولكن عندما تقوم باستخدام برنامج لوناسي Lunacy ستجد أشياء غاية في الأهمية لمساعدتك كمصمم، فهو ليس فقط سهل الاستخدام ولكنه أيضا يساعدك في سرعة تحويل التصميم إلى ملف HTML و CSS وهذا هو ما يميزه عن فيجما وإكس دي.
تصميم الموقع
بعد تنزيل برنامج لوناسي من موقعه الرسمي، نرى سويا خطوات التصميم للموقع باستخدام برنامج لوناسي خطوة بخطوة كالتالي:
تصميم الترويسة والشريط الجانبي والتذيل بالمقاسات المطلوبة
يتم تصميم جميع الأقسام المهمة الخاصة بالموقع وهي الترويسة Header والشريط الجانبي Sidebar والتذييل Footer والقسم الرئيسي للصفحة Main كالتالي:
تصميم قسم الترويسة header
وهو القسم الذي سيتم إضافة القوائم له وكذلك المنزلق slider له أيضا، ويتم تصميمه باختيار حجم شاشة 1920 بكسل عرض وهي من أكبر الشاشات ويجب فيما بعد اختيار التصميم لاحجام الأجهزة المختلف بدأ من شاشات الحاسبات حتى نصل لشاشات التابلت والموبيل، وللتصميم للشاشات الكبيرة يتم فتح ملف جديد في البرنامج المميز lunacy مع اختيار حجم الشاشة كالتالي.