1

هل هناك من يستخدم Visual Design ويقوم بتحويله لـ HTML

السلام عليكم ورحمة الله وبركاته

كنت أسمع أن هناك من يقوم بتصميم صفحات الويب على الفوتوشوب ثم تحويله الى HTML

بعد ذلك اصبح الناس تستعين بي اطارات العمل لتصميم والاستغناء عن الفوتوشوب

الان ظهر لنا sketch 3

هل تفضل ان تستخدم البرامج في تصميم صفحات الويب ام تكتب الكود من الصفر باستخدام أطارات العمل المتوفره .

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

2
assassinateur أضف ردا

لازلت أفضل فوتوشوب ولكن لي رغبة في استخدام sketch 3

السبب الوحيد الذي قد يدفعك للتطوير مباشرة هو أنك لست المصمم، أو التصميم في هذه المرحلة لا يهم

عدى هذا فالتصميم مهم جدا، أحب أن آخذ وقتي فيه لتحديد كل كبيرة وصغيرة ورسم طريق واضح لما سأقوم به، فعادة هو مكان الإبداع

ولكن إن بدأت مباشرة عبر HTML فإنك ستتوه فأنت لا تعرف بعد ماذا تريد وأين ستضع كل شيء وكيف سيكون التقسيم

عادة بعد تصميم الصفحة كاملة أنتقل إلى كتابة HTML خام، والذي يأخذ حوالي ساعة عادة، ثم الانتقال إلى كتابة css له والذي يأخذ حتى 3 ساعات (هذا بالنسبة للبناء من الصفر، الشيء الخارجي الوحيد عادة يكون normalize)

ولكن هذا سينتج لك صفحة كاملة احترافية، بينما لو بدأت مباشرة عبر HTML فسيضيع الكثير من الوقت هنا وهناك ولن تخرج بمنتج بنفس الاحترافية

ولكن هذا يبقى رأيي الشخصي الذي ينم عن تجربتي فحسب

0
majid أضف ردا

هناك ثلاث حالات :

  • تصميم الصفحة بالفوتوشوب ثم تحويلها الى HTML

  • تخطيط المشروع بواسطة الفوتشوب ثم كتابة الكود بواسطة HTML دون تحويل ملف PSD الى HTML

  • كتابة الكود مباشره

لقد وضحت عيوب النقطه الاخيره

ماهي عيوب النقطه الاولى والثانيه ؟

أنا أخطط للمشروع بواسطه برنامج الرسم pixelmator ثم استخدم اطار العمل في التكويد

أفكر في استخدام احد برامج الرسم وتحويل الى HTML لان لم يسبق لي التعامل مع هذا من قبل ، لكن تنقصني الكثير من المعلومات حول ذلك.

1
assassinateur أضف ردا

لا أدري ما الفرق الذي تحاول إظهاره بين النقطة الأولى والثانية إلا إذا كنت تقصد حرفيا تقطيع الصفحة وتصديرها على شكل ملفات PNG مثل العقد الماضي

سأفترض أنك تتكلم عن wireframing والتصميم العادي، حسنا بالنسبة للتصميم العادي

ذلك خيار مناسب إذا كنت ستبني مشروعا جديدا، في الأغلب سيتطلب منك الأمر إنشاء guide style جديد داخل التصميم، سيكون من الصعب تطبيق الأمر إذا بدأت مباشرة

النقطة الأولى مفيدة في حالة كانت هذه الصفحة أولى صفحة من مشروع متعدد الصفحات والتي تكون أغلبها متشابهة، لذا ستقوم ببناء صفحة كاملة بالتفصيل الممل في فوتوشوب، حفظها على صورة، والعمل إنطلاقا من تلك الفكرة

سيكون هذا الأمر خيارا سيئا إذا كنت تطور صفحات مشابهة، قل مثلا مشروعك يملك ثلاث صفحات متشابهة في معظم الأمور وتختلف في هيلكة منتصف الصفحة مثلا، هنا إعادة انشاء تصميم جديد من اجل هذا سيكون متعبا ومستهلكا للوقت، في هذه الحالة الخيار الثاني هو الأفضل

الخيار الثاني هو wireframing بالنسبة لهذا الخيار فأنت لا ترك على تفاصيل التصميم بقدر ما تركز على تقسيم الصفحات وشكلها الهيكلي وليس شكل الأزرار أو حجم الخط مثلا

سيكون هذا جيدا إذا كنت قد بنيت صفحة رئيسية من قبل عبر HTML وهذه صفحة فرعية مشابهة لها، سنتقل نفس الأمور ونفس الستايل لها حتى تحافظ على هوية واحدة بين الصفحات

سيكون هذا خيارا سيئا إذا كانت هذه صفحة وحيدة أو صفحة جديدة أو مختلفة تماما، هنا ستقع في نفس مشكلة الخيار الثالث، رغم أنك تعرف هيلكة الصفحة، إلا أنك لا تملك أدنى فكرة عن style guide الخاص بها، كيف ستبدو الأزرار عبر الموقع، كيف سيكون حجم الخط، كيف سيكون التفاعل

بالنسبة لرسمه كاملا، ثم استخدام إطار عمل فهذا ما أقوم به أنا، أصمم التصميم كاملا عبر فوتوشوب، مثلا

ثم أبدأ بكتابة الكود، إذا استخدمت إطار عمل فتأكد من أنه بسيط لأدنى حد حتى تخصصه جيدا، وإلا ستواجه وقتا صعبا في تخصيصه

0
sami-abdo أضف ردا

انا اعتمد على bootstrap و لذلك استخدم

ولكني لا استعمله إلا نادرا فأنا احب كتابة الشيفرة بيدي مع بعض الأدوات المساعدة مثل emmet .