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

التجربة والوقوع في الأخطاء مهم جدا للتعلم. فتحديد هذه الأخطاء والتعرف عليها تجعل تجنبها أسهل في المستقبل. فاليكم  7 أخطاء شائعة يقع فيها كل مصمم مبتدئ 🙂

1. الافتقار للرؤية الشاملة

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

يجب أن تهدف لإنشاء تسلسل هرمي بصري واضح، بحيث يمكن للمستخدم أن يتصفح ويختيار المهام الرئيسية والمعلومات التي يريدها بسهولة. نغمة وتصميم صفحتك يجب أن تعكس الغرض من الموقع، ولكن المحتوي نفسه هو أهم جزء في التصميم. اذا كان موقعك لعرض أعمالك ومهاراتك الخاصة كمصمم ويب، فربما لا نريد أن نسمع عن شغفك في جمع الطوابع مثلا؟ فكر لما جأء المستخدم إلي الموقع، وماذا تريد منه أن يفعل عندما يزور موقعك.ادرس بعنادية كيف تنظم المعلومات والوظائف – علي سبيل المثال، لا تقسم الموقع في صفحات متعددة فمن الأفضل استخدام صفحة واحدة بها تمرير لا نهائي “Infinite scroll”.

2. السقوط في الاتجاهات والموضة العابرة

من الممتع مواكبة الموضة، ولكن الأكثر أهمية هو التمسك بمبادئ التصميم الأساسية. علي سبيل المثال، ملصقات الألعاب الاولمبية الكلاسيكية من منتصف القرن ال20 لا تزال تبدو رائعة اليوم، في حين أن العديد من المواقع في أوائل ال 2000، تبدوا منتهية الصلاحية !.

والحل يكمن في التمسك بمادئي التيبوغرافي، والصور والتخطيط ، بدلا من تطبيق أيقونات بلا معني أو ثأثيرات CSS وفوتوشوب أنيقة. أحيانا الأقل هو الأكثر “less is more”، وفقط لانك يمكن أن تجعل الصورة دائرية أو تقوم بعمل تأثيرات parallax، فهذا لا يعني أنه يجب أن تستخدمها.

3. عدم المحاذاة مع الجريد grid

علي الرغم من أن خطوط الجريد “الشبكة” غير مرئي، فمعظم المصممين المحترفين يقوموا بمحاذاة أعمالهم بدقة علي الجريد، وغالبا ما تتكون من 8 أو 12 أو 16 عمود رأسي رفيع، ويكون حجم وتباعد هذه الأعمدة بالتساوي، مع هوامش وجداول واضحة تقصل بينها. العناصر البصرية يمكن أن تمتد لعمود أو أكثر، وبالممارسة العملية 12 عمود رفيع يمكن تقسيمهم إلي ثلاثة أعمدة نصية .وأحيانا تستخدم صورة قد تمتد إلي كل ال 12 عمود . اختلاف كيفية تقسيم هذه الأعمدة تجعل التصميم يبدو متناغم وجيد.

الأنظمة الشبكية “Grid” نشأت في تصميم الطباعة، ولكن انتقلت إلي الويب عن طريق الفريم وركس مثل 960 Grid System و Skeleton ، والذي هو قادر علي تغيير الحجم وعدد الأعمدة بشكل تلقائي استنادا إلي دقة الشاشة.

علي الأقل، يجب أن تكون صفحة الويب في منتصف عرض المتصفح، بدلا من ترك محتوي الصفحة ترتكز علي الجهة اليمني وترك فرغ في الجهة اليمني .

4. معالجة النصوص السيئة

الطلاب غالبا ما يجعلوا النصوص صغيرة جدا . حجم خط HTML الافتراضي أتي في وقت كان فيه دقة شاشات سطع المكتب 800×600 ، ولكن في عصر الأجهزة المحمولة والشاشات عالية الوضوح. يمكننا أن نفكر بشكل أكبر ونستخدم النصوص الكبيرة.

لا تنسي أن تختبر موقعك علي مجموعة من أحجام ودقة شاشات مختلفة واستخدام CSS media queries . العناوين يجب أن تكون أكبر من النصوص العادية. وتأكد أيضا من وجود مساحات عمودية كافية بين أسطر النص. في التيبوغرافي، تسمي هذه المسافة’leading’ وفي ال CSS يتحكم بها عن طريق ‘line-height’. القيمة الافتراضية تجعل الخطوط قريبة جدا من بعضها البعض، والتي ستصعب القراءة . حاول استخدام قيمة أكبر بنسبة 50% من حجم الخط الخاص بك ، علي سبيل المثال 36px لنص 24px.

تأكد من ترك مساحة كافية حول النص “مساحة بيضاء” – وهذا يعني مساحة فارغة في الصفحة والتي تعمل علي المساعدة في فصل العناصر. وهذا يساعد أيضا علي عدم فقدان القاري مكان القراءة بينما يتنقل بعينه من نهاية السطر إلي بداية السطر التالي. المتوسط حوالي 10 كلمات في السطر.

اقتصرعلي استخدام خطين أو ثلاثة، وتجنب استخدام الصور كنص – الخدمات مثل خطوط جوجل و Typekit تعطيك امكانية استخدام مجموعة واسعة من الخطوط علي شبكة الانترنت. تأكد من أن هناك تباين كافي بين لون النص ولون الخلفية – بشكل عام النص الداكن علي خلفية فاتحة أفضل. والنص الفاتح علي خلفية داكنة جيد أيضا. تجنب أنماط خلفيات التباين “contrast” المرتفعة.

5. فقر استخدام التيبوغرافي

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

6. فقر استخدام الأيقونات والشعارات

المشكلة العامة هي التقطيع السيئ التدريجي للأعمال الفنية، ذات الحواف الخشنة المرئية،والحواف . اتقن استخدام أداة القلم في الفوتوشوب، أو استخدم أداة polygonal lasso وقم بالتقريب. مسالة متكررة أخري وهي ضغط jpeg ، لذا قم باستخدام SVG أو PNG عالية الجودة للأيقونات واللوجوهات.

7. ترك الأمور التي لم تكتمل أو معطوبة

المصمم المحترف لن يترك شيئ غير مكتمل أو لا يعمل عمدا في موقع الويب. وكالات التصميم الكبيرة يكون عندها متخصص (ضمان الجودة)وفرق لرصد الأخطاء، ولكن كمبتدئ فالأمر متروك لك. اطلب من صديق لك قراءة ومراجعة عامة لتصميماتك. انه لأمر مدهش ما قد يكتشفه شخص آخر!

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

وطبعا، لا تقوم بعمل أخطاء تافهة مثل ترك عنوان الصفحة ‘Untitled Document’ ! .