نصائح لتحسين تسليم تصميم موقع الويب الخاص بك

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

1. الحاجة - شخص ما يحتاج إلى موقع على شبكة الإنترنت لسبب أو لآخر.
2. العصف الذهني - اتخاذ قرار بشأن الهيكل العام والأهداف والمزيد.
3. الاقتراح - يجد العميل موظفًا مستقلًا أو وكالة لإنشاء الموقع.
4. المحتوى - المقالات والصور وما إلى ذلك ، أي شيء يمكن العثور عليه في الصفحات المقصودة وخرائط المواقع وما إلى ذلك.
5. التصميم - يعمل شخص / فريق على التصميم والتخطيط بناءً على المحتوى.
6. التطوير - يقوم الشخص / الفريق بتطوير الجزء الوظيفي للموقع بناءً على التصميم.

في معظم الأوقات ، يمكنك مزجها هنا. يمكنك تغيير ترتيب الأشياء التي يتم إجراؤها ، ولا يزال بإمكان الفريق تحقيق نتائج رائعة. ومع ذلك ، قد يكون هذا صعبًا عندما يكون لديك أشخاص من وكالات مختلفة يعملون في نفس المشروع ، وهذا هو السبب الرئيسي لاختيار وكالة شاملة يمكنها رعاية كل شيء.

بالنسبة لهذه المقالة ، ننتقل من الخطوة 5 ، التصميم إلى الخطوة 6 ، التطوير. هذا هو المكان الذي يمكن أن تسوء فيه الأمور عن طريق إبطاء التنمية وإفساد ما تم تحديده مسبقًا في عملية التخطيط.

الأشياء التي يجب على المصمم مراعاتها

"هل يجب أن يعرف المصممون كيفية البرمجة؟" هو سؤال شائع وهو سؤال معقول جدًا. إذا كان المصمم يفهم الكود الموجود خلفه ويمكنه بشكل مثالي إنتاج مثل هذا (إلى حد معين) ، فيمكنه / يمكنها مساعدة الفريق بأكمله في دفعهم لإكمال المشروع بشكل أسرع.

فيما يلي بعض الأسباب وراء حدوث ذلك:

1 - في النهاية ، ينتهي كل شيء في المتصفح.

ستظهر أي تصميمات تقوم بإنشائها في Figma و Adobe وما إلى ذلك في المتصفح. تستخدم جميع المتصفحات نوعًا من لغة البرمجة يُعرف باسم HTML / CSS لعرض الصفحة. إذا تم استخدام Javascript ، فيمكنك جعل تصميماتك تفاعلية.

الملاحظة المهمة التي يجب أخذها من هذا هي أن أي تصميم يجب أن يكون قابلاً للتنفيذ في HTML / CSS. يمكن للعديد من مطوري الواجهة الأمامية الموهوبين تنفيذ أي شيء تقريبًا طالما أن التكنولوجيا تسمح بذلك. لكن تذكر ، - لا يتعلق الأمر دائمًا بـ "هل يمكنك فعل ذلك؟" ، إنه يتعلق "هل يمكنك القيام بذلك بشكل جيد وجعله قابلاً للصيانة".

2 - الاتساق

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

بعض نصائح مصمم الويب:

• تصميم مع وضع المكونات في الاعتبار. توفر معظم الأدوات الآن هذه الوظيفة (Figma و Adobe XD و Sketch). أجبر نفسك على استخدامها كثيرًا حتى لا يصبح القيام بذلك مزعجًا.
• محاذاة العناصر جيدًا. يجب أن يكون للأقسام المتشابهة نفس المسافة بين بعضها البعض. 80 بكسل هو فصل جيد يجب الحفاظ عليه ، على سبيل المثال. لا تباعد عشوائياً بين الأقسام باستخدام 80 هنا و 86 هناك و 92 على الثلث و 78 على الآخر. اجعلها نظيفة ومرتبة.
• استخدم شبكة! توفر جميع الأدوات نظام شبكي. من الناحية المثالية ، اختر شبكة 12 عمودًا.
• اعرض تصميمك على شاشات عريضة (1920 بكسل أو أكثر). يساعد هذا المطورين على معرفة كيفية عمل كل قسم وخلفياتهم.

3 - وزن الموقع

كلنا نريد موقع ويب سريع ، أليس كذلك؟ حسنًا ، المصمم أيضًا جزء من هذا. ضع في اعتبارك هذا: موقع ويب به 8 صور ضخمة عالية الدقة وأربعة مقاطع فيديو وعناصر متحركة. . نتمنى لك التوفيق في تحسين هذا في الوقت المناسب. على الرغم من إمكانية القيام بذلك ، إلا أن الأمر سيستغرق وقتًا وتقنيات تطوير إضافية لتحميل الصور ومقاطع الفيديو البطيئة ، وتحسين الوسائط عند التحميل ، ودعم تنسيقات ملفات الصور الأفضل ، وإضافة أساليب الرسوم المتحركة الذكية لتحقيق أداء عالٍ ..

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

كيف تساعد المطورين؟

كمصمم ، أحد أهدافك التي يجب وضعها في الاعتبار هو جعل التطوير أسهل وأسرع مع الحفاظ على شكل ومظهر الموقع.

يجب أن تفكر في ما يمكن القيام به بسهولة على الويب.

• الصناديق - كل الصناديق. يمكنك تقريب بعض الزوايا ، نعم ، يمكنك عمل علامات حذف (محددة في مربع) والمزيد. ومع ذلك ، عندما تذهب بأشكال أكثر تعقيدًا تتفاعل مع التخطيط ، تصبح الأمور صعبة.
• من الصعب تحريك موضع دقيق - تخيل أنك تريد النقر فوق صورة ، ثم نقلها إلى الجانب الآخر من النص؟ يبدو الأمر "سهلًا" ولكنه ليس كذلك. يجب أن يظل الموضع الذي ستنتقل إليه الصورة مرتبطًا بحاوية الموقع ، والتي تتغير بناءً على إطار العرض والمزيد. ثم ماذا يحدث إذا كانت الصورة أكبر؟
• تؤثر أبعاد الصندوق المتحركة على التخطيط. يشير هذا إلى أي تغيير في كيفية ترتيب العناصر أثناء الرسم المتحرك. قد يكون هذا ثقيلًا للغاية على المتصفح وغالبًا ما يؤدي إلى تأخر كبير.

ضع في اعتبارك محتوى مختلف!

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

قدم تصميماتك في أدوات مثل Zeplin

معظم أدوات التصميم مثل Figma أو Adobe XD لديها طريقة "لمشاركة" التصميمات مع المطورين. من هناك ، يمكن لفريق الواجهة الأمامية فحص الألوان وإعدادات الطباعة والتباعد والخصائص المرئية الأخرى للطبقات ، مما يسمح لهم بالالتصاق عن كثب بالتصاميم.

قدم أصولًا أخرى مثل الخطوط أو مقاطع الفيديو

إذا كنت قد استخدمت خطًا معينًا على الموقع ، فقم بتوفيره للمطورين. إذا كان مرخصًا ويمكن الوصول إليه عبر عناوين URL محددة ، فتأكد من مشاركة ذلك أيضًا. من المهم للمطور أن يعمل بالخطوط الصحيحة من اليوم الأول. إذا كانت هناك مقاطع فيديو - فتأكد من مشاركتها أيضًا! هل ستكون مقاطع الفيديو على YouTube أو Vimeo أو مستضافة ذاتيًا؟

لا تبحث عن "بكسل مثالي"

فكرة الحفاظ على المظهر النهائي للموقع تمامًا مثل التصميم هي طريقة سهلة لجعل فريق المطورين يكرهك ويمكنه تدمير أي فرصة للعرض المباشر في الوقت المحدد. في كل الأحوال تقريبًا لن يكون التصميم مثاليًا. من المستحيل أن تكون متأكدًا بنسبة 100٪ أنه قبل كل زر يكون لديك مسافة 18 بكسل بالضبط؟ وليس 19 بكسل؟ أم أن كل عنوان مفرد هو 38 بكسل وليس 37 بكسل؟ أو ربما أن كل حد هو #ddd وأنه لا يوجد حد أسود ولكن به عتامة 15٪؟

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

في النهاية ، يجب أن يتبع موقع الويب المشفر الشكل والمظهر العام للتصميم.

اترك تعليقات في التصميم

إذا كنت تريد أن يكون عنصرًا معينًا تفاعليًا مثل علامات التبويب والأكورديون ومزلقات التمرير وما شابه ، فاستغرق بضع ثوانٍ لتدوين كيف يجب أن يعمل على سطح المكتب والجوال وما يمكن النقر فوقه ، في حالة التبديل.

فكر كمستخدم

عند الانتهاء ، توقف للحظة وتخيل أنك تستخدم الموقع. اقرأ من الأعلى ، مرر لأسفل ، انقر في مكان ما لمعرفة المزيد. هل هناك أي شيء قد يكون مفقودًا في سير العمل؟ هل هناك طريقة عرض لعنصر معين تتغير في تفاعل المستخدم؟ إذا كان هذا صحيحًا ولم يكن هناك تصميم ، فأنت تترك مطوريك يكتشفون الأمر ، مما يزيد الضغط على الوظيفة .. إذا كانت المواعيد النهائية ضيقة ، يمكنك مشاركة الملفات العامة مع فريقك وإعلامهم بأن عدد قليل من مشاهدات "الحالة" قادمة (تأكد من ذكرها).

آراء متجاوبة

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

باختصار

يمكن للمصمم أن يجعل حياة المطور كابوسًا أو تجربة جيدة جدًا. المفتاح لتحقيق هذا الأخير هو فهم أفضل للتقنية المستخدمة ، HTMl / CSS ، والعناصر التفاعلية القابلة للتنفيذ ، إلخ.

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