احصل على تصميم موقع الويب المثالي في 27 خطوة

صفحة 1 من 2: تخطيط موقع الويب: الشروع في العمل وسير عمل التصميم

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

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

لا تزال تبحث عن مضيف؟ ألق نظرة على دليلنا إلى أفضل خدمات استضافة المواقع و ال أفضل منشئي مواقع الويب الآن. ولم يتم تناولها هنا ، لكن لا تنس صفحات الخطأ الخاصة بك! ألق نظرة على اختيارنا من أفضل 404 صفحة للإلهام.



ابدء

01. تحديد معنى النجاح

شخص مع كمبيوتر محمول

توصل إلى جذر الغرض من تصميمك

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

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

02. فهم الموقع الحالي

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

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

03. مشاركة التصاميم مع العملاء في وقت مبكر

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

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

سير عمل التصميم

04. معالجة التخطيط أولا

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

فكر في المحتوى والتخطيط والوظيفة. تأكد من أن هذه الأفكار تتماشى مع أهداف عميلك ولا تتردد في مشاركتها.

05. ابدأ في رسم إطار المستوى الأعلى

تخطيطات الموقع: رسم UX

سيساعدك الإطار السلكي الأساسي في هيكلة التخطيط (انقر فوق الرمز العلوي الأيمن للتكبير)

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

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

06. إضافة شبكة

شبكات على شاشات مختلفة

مثال على شبكة 978 بخط أساس 10 بكسل

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

لمعرفة كيفية القيام بذلك ، ألق نظرة على هذا الدليل إنشاء شبكة تتكيف مع جميع أحجام الشاشات .

07. اختر أسلوب الطباعة الخاص بك

تخطيطات الموقع: الطباعة

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

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

08. حدد موضوع اللون الخاص بك

تخطيطات الموقع: الألوان

تم تصميم أدوات مثل Color Hunt لمساعدتك في اختيار لوحة الألوان

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

من المهم تطبيق هؤلاء باستمرار عبر تخطيط موقع الويب ، اعتمادًا على وظائف كل عنصر. فكر في تخطيط مواقع مثل Facebook و Twitter و Quora و Vimeo. إلى جانب واجهة المستخدم ، يجب ألا يكون هناك أي قيود على الألوان للرسوم التوضيحية أو تفاصيل الرسوم ، طالما أنها لا تتداخل مع وظائف المكونات.

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

09. تبسيط التخطيط

تخطيطات موقع الويب: الصفحة الرئيسية لـ B-reel

تميل المخططات البسيطة إلى أن تكون أسهل في التنقل

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

في الواقع ، لا ينبغي أن يكون هناك الكثير من العبارات التي تحث المستخدم على اتخاذ إجراء على الصفحة - يجب أن يقود كل شيء إلى هذا النهائي 'ماذا يمكنني أن أفعل هنا؟'

كيفية تغيير حجم المستند في الفوتوشوب

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

10. صقل كل مكون

تصميم موسيقى Microsoft

عمل كلوديو غوغلييري على تصميم واجهة المستخدم في Microsoft Music

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

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

11. إطلاع العملاء على الحلول الخاصة بك

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

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

12. فكر في الحركة

موقع كوكب وحيد

الحركة ضرورية عند تصميم التجارب التفاعلية

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

13. النموذج الأولي ، النموذج الأولي ، النموذج الأولي

موقع كوكب وحيد على الجوال

النماذج الأولية هي أفضل طريقة لاختبار التفاعلات

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

الصفحة التالية: نهج التصميم والختام

  • 1
  • اثنين

الصفحه الحاليه: تخطيط موقع الويب: الشروع في العمل وسير عمل التصميم

الصفحة التالية تخطيط الموقع: نهج التصميم والختام