إذا كنت ترغب في تصميم صفحات الويب وإنشائها ، فستكون هذه العملية أسهل بكثير إذا كنت تخطط مسبقًا. في مرحلة التخطيط ، يمكن للمصمم والعميل العمل معًا لإيجاد تنسيق وتصميم يناسب احتياجاتهم. تؤثر عملية التخطيط على أسلوب أو نمط الموقع ، يمكنك القول أن هذا هو الجانب الأكثر أهمية في تصميم الويب ، خاصة إذا كان لأغراض تجارية.
خطوة
جزء 1 من 4: إنشاء الهيكل الأساسي
الخطوة الأولى. تحديد وظيفة الموقع
إذا كنت تقوم بإنشاء موقع شخصي ، فمن المحتمل أنك تعرف الإجابة بالفعل. ومع ذلك ، إذا كنت تقوم بإنشاء موقع لمؤسسة أو شركة أو شخص آخر ، فأنت بحاجة إلى معرفة ما يريدون ووظائف الموقع. سيصبح كل شيء تحدده هنا ساري المفعول عند الانتهاء من صفحة الويب.
- هل يتطلب الموقع واجهة محل؟ هل يجب عمل تعليقات المستخدم؟ هل سيحتاج المستخدم إلى إنشاء حساب لاحقًا؟ هل مقال الموقع موجه؟ أم موجهة نحو الصورة؟ كل هذه الأسئلة وغيرها ستساعدك في تصميم وتصميم الموقع.
- يمكن رسم عملية التخطيط هذه في الرسم ، خاصةً إذا كانت لشركة كبيرة والعديد من الأشخاص يشاركون في إنشاء هذا المشروع.
الخطوة 2. قم بإنشاء مخطط خريطة الموقع (خريطة الموقع)
يشبه مخطط خريطة الموقع المخطط الانسيابي ، ويوضح كيفية انتقال المستخدمين من صفحة إلى أخرى. لا تحتاج إلى صفحة ويب في هذه المرحلة ، مجرد تدفق عام للمفاهيم. يمكنك استخدام برنامج كمبيوتر لإنشاء مخططات أو رسم تخطيطي على الورق. استخدم هذا الرسم التخطيطي لتوضيح مفاهيم الترتيب الهرمي واتصال صفحات الويب.
الخطوة الثالثة. جرب طريقة صياغة البطاقة
إحدى الطرق الشائعة لتطوير الويب الجماعي هي استخدام عدد من البطاقات لمعرفة توقعات الجميع. خذ عددًا من بطاقات الملاحظات واكتب المحتوى الأساسي لصفحة الويب على كل واحدة على حدة. رتب هذه البطاقات مع فريقك للعثور على أفضل مفهوم. هذه الطريقة مناسبة للاستخدام عند التعاون مع الآخرين في إنشاء صفحات الويب.
الخطوة 4. استخدم الورق ولوحة الإعلانات أو السبورة البيضاء
هذه طريقة تخطيط أصلية بميزانية صغيرة ، يمكنك حذف المحتوى أو تغييره بسرعة وتغيير التدفق. ارسم تصميم الويب الخاص بك على الورق ، ثم قم بتوصيل الأوراق بالخيط ، أو ارسم خطوطًا على السبورة. هذه الطريقة مناسبة جدًا للاستخدام في جلسات العصف الذهني.
الخطوة 5. إنشاء جرد المحتوى
في الواقع ، تميل إلى أن تكون أكثر ملاءمة للاستخدام في إعادة تصميم الشبكات مقارنةً بتصميمات الويب الجديدة. أدخل كل جزء منتهي من المحتوى أو صفحة الويب في جدول بيانات. قم بتدوين الغرض من كل جزء من المحتوى أو الصفحة ، باستخدام هذه القائمة لتحديد ما يجب إزالته وما يجب الاحتفاظ به. يمكنك تبسيط بنية الويب وتبسيط عملية إعادة التصميم لاحقًا.
الجزء 2 من 4: إنشاء مخطط HTML أساسي
الخطوة الأولى. أنشئ إطارًا سلكيًا لإنشاء التسلسل الهرمي لصفحة الويب
قالب HTML الأساسي هو مخطط الموقع الذي ستقوم بإنشائه ، باستخدام العلامات الأساسية وعينة المحتوى (الكتل / القوالب) فقط. يجيب إطار العمل هذا على سؤال "ما الذي يظهر على الويب وأين؟" التنسيق والتصميم غير مطلوبين في إنشاء هذا المخطط التفصيلي.
- يمكنك رؤية الهيكل والمخطط الانسيابي للمحتوى مع مخطط تفصيلي أساسي قبل اختيار إعداد النمط.
- قوالب HTML الأساسية ليست ثابتة مثل ملفات PDF أو الصور ، يمكنك التمرير سريعًا عبر نموذج المحتوى لإنشاء هياكل جديدة.
- إطار العمل الأساسي تفاعلي يستفيد منه مطورو الويب والعملاء. نظرًا لأن هذا الإطار الأساسي مكتوب برمز HTML بسيط ، فلا يزال بإمكانك التنقل فيه ومعرفة كيفية عمل تبديل صفحات الويب. لا يمكن القيام بذلك مع PDF.
الخطوة 2. جرب طريقة Gray Box
قم بحظر أو تمييز محتوى صفحة الويب الخاصة بك في Gray Box ، يكون المحتوى الأكثر أهمية في الأعلى. افرز المحتويات في عمود واحد. على سبيل المثال ، إذا كانت الصفحة "حول الشركة" ، فستكون المعلومات التفصيلية حول الشركة في الأعلى ، متبوعة بقائمة الموظفين ، ثم معلومات الاتصال ، إلخ.
هذا لا يشمل الرؤوس والتذييلات. المربع الرمادي هو تمثيل مرئي للمحتوى الذي سيظهر على الويب
الخطوة الثالثة. جرب برنامج إنشاء المخطط التفصيلي الأساسي
هناك العديد من البرامج التي يمكنك استخدامها في عملية إنشاء إطار عمل ويب أساسي. يختلف مقدار كود برمجة الويب (اللغة) الذي يجب أن تتقنه من برنامج إلى آخر. بعض البرامج التي تحظى بشعبية كبيرة تشمل:
- معمل الأنماط. هذا الموقع مخصص لـ "التصميم الذري" ، كل محتوى يعتبر "جزيء" يؤلف صفحة ويب أكبر.
- Jumpcharts. توفر صفحة الويب هذه خدمات التخطيط والتأطير المستندة إلى الويب. هذه المواقع مدفوعة الأجر وتتطلب اشتراكًا ، ولكن يمكنك إنشاء أطر ويب بسرعة دون الحاجة إلى إتقان الكثير من أكواد برمجة الويب.
- وايرفي. Wirefy هو موقع آخر يقدم "التصميم الذري". يمكن لمطوري الويب الحصول على الأداة مجانًا.
الخطوة 4. استخدم ترميز HTML بسيط
سيتم تحويل النموذج الأساسي الجيد بسهولة إلى الموقع الأصلي. لا تفكر كثيرًا في تصميم الويب أثناء عملية إنشاء هذا النموذج. استخدم الترميز الذي يمكن فهمه وتغييره بسهولة.
إطار العمل الأساسي البسيط هو أفضل بكثير. الغرض من إنشاء العلامات هو بناء هيكل. يمكن تعديل المظهر المرئي لاحقًا باستخدام CSS والترميز المتقدم
الخطوة 5. قم بإنشاء مخطط أساسي لكل صفحة ويب
قد تميل إلى مساواة كل صفحة ويب بمخطط أساسي واحد. في الواقع ، هذا سيجعل موقعك عاديًا ومملًا. أنشئ مخططًا مختلفًا لكل صفحة ، وستفهم أن كل صفحة تحتاج إلى تصميم خاص بها.
جزء 3 من 4: إنشاء المحتوى
الخطوة 1. قم بإعداد المحتوى قبل إنشاء صفحة ويب
ستجد أنه من الأسهل بكثير معاينة عرض الويب الخاص بك إذا كان لديك بالفعل محتوى فعلي بدلاً من استخدام العينات أو العناصر النائبة. لا تحتاج إلى الكثير من المحتوى ، ولكن سيبدو النموذج الخاص بك أفضل بكثير إذا كنت تستخدم نسخة من الصورة الأصلية.
لا يجب أن يكون لديك كل مواد المقالة ، ولكن على الأقل يجب أن يكون لها عنوان رئيسي حقيقي
الخطوة 2. تذكر أن المحتوى الرائع ليس مجرد نص
الإنترنت أكثر تعقيدًا بكثير من صفحة ويب بسيطة تحتوي على نص. أنت بحاجة إلى مجموعة متنوعة من المحتويات المختلفة من أجل إنشاء موقع ويب رائع لجذب الزوار ودعوتهم. على سبيل المثال:
- صورة.
- صوت.
- أشرطة فيديو.
- نقل الويب أو تدفق الويب (Twitter)
- تكامل Facebook
- RSS
- تغذية الويب
الخطوة 3. اطلب المساعدة من مصور محترف
إذا كنت ترغب في تضمين الصور على موقعك ، فإن الانطباع الأول الذي ستحصل عليه من موقع الويب الخاص بك سيكون أفضل بكثير إذا كان مليئًا بالتصوير الفوتوغرافي الاحترافي. الصورة الجيدة الواحدة تساوي أكثر من عشرين صورة منخفضة الجودة.
ابحث عن خريج جديد في فن التصوير الفوتوغرافي كحل أرخص من المصور المحترف الذي كان يعمل في هذا المجال لفترة طويلة
الخطوة 4. اكتب مقالات عالية الجودة
سيحدد المحتوى المكتوب على صفحة الويب مقدار حركة المرور على الويب. على الرغم من أنه لا داعي للقلق كثيرًا بشأن إنشاء المحتوى في عملية التصميم هذه ، فلا يضر البدء في التفكير في الأمر لأنك ستحتاج أيضًا إلى محتوى بشكل منتظم بمجرد تشغيل موقعك.
بالإضافة إلى محتوى المقالة ، هناك مواد مكتوبة تحتاج أيضًا إلى الحصول عليها في عملية تجميع صفحة ويب. على سبيل المثال معلومات الاتصال أو اسم الشركة أو أي شيء آخر سيتم استخدامه عدة مرات على الموقع
جزء 4 من 4: تحويل المفاهيم إلى مواقع الويب
الخطوة 1. رتب العناصر الأساسية
ينطبق ترتيب العناصر هذا على كل صفحة على موقعك ، مثل الرؤوس والحواشي السفلية وقوائم التنقل. قم بإعداده بأسلوب بسيط للغاية حتى تتمكن من التحقق من شكل جميع الصفحات. هذا مفيد بشكل خاص أثناء تقدمك في عملية تخطيط الويب.
لا تقلق كثيرًا بشأن التفاصيل ، فحاول معاينة (معاينة) كيف يبدو الرأس
الخطوة 2. إنشاء تخطيط بسيط
ابدأ بتحويل موضع الساعة من عمود المخطط التفصيلي الأساسي إلى الموقع الفعلي على الصفحة. على سبيل المثال ، قد ترغب في نقل عينة قائمة التنقل إلى يسار الصفحة وقائمة العناوين إلى اليمين.
استمر في تجربة تخطيطات الويب لصفحات متعددة ، قبل الانتقال إلى الخطوة التالية. اسمح للآخرين بإلقاء نظرة عليها لمعرفة ما إذا كان التصميم الذي تقوم بإنشائه يبدو على قيد الحياة
الخطوة 3. إنشاء نموذج بالحجم الطبيعي
استخدم برنامجًا مثل Photoshop لإنشاء نماذج بالأحجام الطبيعية أو عينات من صفحات موقع الويب الخاص بك. استخدم التخطيط الذي جمعته كدليل. يمكنك عمل نماذج بالأحجام الطبيعية بشكل أسرع والحصول على النتائج التي تريدها باستخدام برنامج معالجة الصور. يمكن استخدام نتائج هذه الصور لاحقًا كمرجع في عملية كتابة كود برمجة الويب.
ضع المحتوى الفعلي في النموذج لجعله يبدو جيدًا
الخطوة 4. استبدال مفهوم النموذج بالمحتوى الأصلي
أضف محتوى وعناصر إلى صفحات الويب. لا تقلق بشأن إعدادات نمط الويب في الوقت الحالي ، ما عليك سوى تكديس كل شيء في الموقع الصحيح. سيساعدك هذا في مراجعة تغييرات نمط الويب التي تجريها لاحقًا.
الخطوة 5. إنشاء دليل نمط الويب
من المهم جدًا الحفاظ على مزيج من الأنماط ، خاصة للمواقع الكبيرة. إذا كان الموقع مخصصًا لأغراض تجارية ولديه بالفعل علامته التجارية أو أسلوبه الخاص ، فيجب دمج ذلك في تصميم الموقع. الأشياء التي يجب مراعاتها عند إنشاء دليل نمط صفحة الويب:
- التنقل
- مذكرة رئيسية
- فقرة
- حرف مائل
- شخصية جريئة
- الروابط (نشطة ، غير نشطة ، تحوم)
- استخدام الصورة
- أيقونة
- مقبض الباب
- قائمة
الخطوة 6. تطبيق نمط الويب
بمجرد العثور على الأسلوب والتصميم المناسبين ، قم بتنفيذه. CSS هي إحدى أسهل الطرق لتنفيذ الأنماط على صفحة ويب أو عبر الموقع. راجع الإرشادات التالية لفهم تفاصيل استخدام CSS بشكل أفضل.
