السلام عليكم ورحمة الله وبركاته
كنت أسمع أن هناك من يقوم بتصميم صفحات الويب على الفوتوشوب ثم تحويله الى HTML
بعد ذلك اصبح الناس تستعين بي اطارات العمل لتصميم والاستغناء عن الفوتوشوب
الان ظهر لنا sketch 3
هل تفضل ان تستخدم البرامج في تصميم صفحات الويب ام تكتب الكود من الصفر باستخدام أطارات العمل المتوفره .
لازلت أفضل فوتوشوب ولكن لي رغبة في استخدام sketch 3
السبب الوحيد الذي قد يدفعك للتطوير مباشرة هو أنك لست المصمم، أو التصميم في هذه المرحلة لا يهم
عدى هذا فالتصميم مهم جدا، أحب أن آخذ وقتي فيه لتحديد كل كبيرة وصغيرة ورسم طريق واضح لما سأقوم به، فعادة هو مكان الإبداع
ولكن إن بدأت مباشرة عبر HTML فإنك ستتوه فأنت لا تعرف بعد ماذا تريد وأين ستضع كل شيء وكيف سيكون التقسيم
عادة بعد تصميم الصفحة كاملة أنتقل إلى كتابة HTML خام، والذي يأخذ حوالي ساعة عادة، ثم الانتقال إلى كتابة css له والذي يأخذ حتى 3 ساعات (هذا بالنسبة للبناء من الصفر، الشيء الخارجي الوحيد عادة يكون normalize)
ولكن هذا سينتج لك صفحة كاملة احترافية، بينما لو بدأت مباشرة عبر HTML فسيضيع الكثير من الوقت هنا وهناك ولن تخرج بمنتج بنفس الاحترافية
ولكن هذا يبقى رأيي الشخصي الذي ينم عن تجربتي فحسب
هناك ثلاث حالات :
تصميم الصفحة بالفوتوشوب ثم تحويلها الى HTML
تخطيط المشروع بواسطة الفوتشوب ثم كتابة الكود بواسطة HTML دون تحويل ملف PSD الى HTML
كتابة الكود مباشره
لقد وضحت عيوب النقطه الاخيره
ماهي عيوب النقطه الاولى والثانيه ؟
أنا أخطط للمشروع بواسطه برنامج الرسم pixelmator ثم استخدم اطار العمل في التكويد
أفكر في استخدام احد برامج الرسم وتحويل الى HTML لان لم يسبق لي التعامل مع هذا من قبل ، لكن تنقصني الكثير من المعلومات حول ذلك.
لا أدري ما الفرق الذي تحاول إظهاره بين النقطة الأولى والثانية إلا إذا كنت تقصد حرفيا تقطيع الصفحة وتصديرها على شكل ملفات PNG مثل العقد الماضي
سأفترض أنك تتكلم عن wireframing والتصميم العادي، حسنا بالنسبة للتصميم العادي
ذلك خيار مناسب إذا كنت ستبني مشروعا جديدا، في الأغلب سيتطلب منك الأمر إنشاء guide style جديد داخل التصميم، سيكون من الصعب تطبيق الأمر إذا بدأت مباشرة
النقطة الأولى مفيدة في حالة كانت هذه الصفحة أولى صفحة من مشروع متعدد الصفحات والتي تكون أغلبها متشابهة، لذا ستقوم ببناء صفحة كاملة بالتفصيل الممل في فوتوشوب، حفظها على صورة، والعمل إنطلاقا من تلك الفكرة
سيكون هذا الأمر خيارا سيئا إذا كنت تطور صفحات مشابهة، قل مثلا مشروعك يملك ثلاث صفحات متشابهة في معظم الأمور وتختلف في هيلكة منتصف الصفحة مثلا، هنا إعادة انشاء تصميم جديد من اجل هذا سيكون متعبا ومستهلكا للوقت، في هذه الحالة الخيار الثاني هو الأفضل
الخيار الثاني هو wireframing بالنسبة لهذا الخيار فأنت لا ترك على تفاصيل التصميم بقدر ما تركز على تقسيم الصفحات وشكلها الهيكلي وليس شكل الأزرار أو حجم الخط مثلا
سيكون هذا جيدا إذا كنت قد بنيت صفحة رئيسية من قبل عبر HTML وهذه صفحة فرعية مشابهة لها، سنتقل نفس الأمور ونفس الستايل لها حتى تحافظ على هوية واحدة بين الصفحات
سيكون هذا خيارا سيئا إذا كانت هذه صفحة وحيدة أو صفحة جديدة أو مختلفة تماما، هنا ستقع في نفس مشكلة الخيار الثالث، رغم أنك تعرف هيلكة الصفحة، إلا أنك لا تملك أدنى فكرة عن style guide الخاص بها، كيف ستبدو الأزرار عبر الموقع، كيف سيكون حجم الخط، كيف سيكون التفاعل
بالنسبة لرسمه كاملا، ثم استخدام إطار عمل فهذا ما أقوم به أنا، أصمم التصميم كاملا عبر فوتوشوب، مثلا
ثم أبدأ بكتابة الكود، إذا استخدمت إطار عمل فتأكد من أنه بسيط لأدنى حد حتى تخصصه جيدا، وإلا ستواجه وقتا صعبا في تخصيصه
انا اعتمد على bootstrap و لذلك استخدم
ولكني لا استعمله إلا نادرا فأنا احب كتابة الشيفرة بيدي مع بعض الأدوات المساعدة مثل emmet .
التعليقات