هناك مجموعة كبيرة ومتنوعة من الأدوات لتصميم صفحات الويب والعمل بطريقة بسيطة وعملية تمامًا دون إدخال أو لمس رمز. إنها لا تعد ولا تحصى ، تقترحها التطبيقات (برنامج Adobe Dreamweaver مثال) أو مباشرة عن طريق منصات الإنترنت مثل Wix. ومع ذلك ، بالنسبة لمصمم الويب ، فإن معرفة الإجراءات اليدوية أمر ضروري. HTML5 و CSS هما الركائز الأساسية لتخطيط مواقع الويب والصفحات المقصودة.
ومع ذلك ، في كثير من الأحيان أكثر مما تتوقع ، سيتعين عليك اللجوء إلى تطبيقات مثل InDesign أو أدوبي فوتوشوب لاستكمال أعمال التخطيط الخاصة بك ومنحها لمسة نهائية مثالية. سنرى اليوم في هذا البرنامج التعليمي الشامل ، كيف يمكننا تخطيط صفحة ويب باستخدام Adobe Photoshop. في هذا الجزء الأول ، سنبقى في العمل الذي سيتم تطويره من Photoshop ، على الرغم من أننا سنرى في الأقساط المستقبلية كيف يمكننا تطبيق هذا العمل بالفعل مباشرة في كود HTML لجعله عمليًا.
بدءًا من تصميم الهيكل السلكي الخاص بنا
للبدء بتخطيط وتصميم صفحة الويب ، من المهم للغاية أن نبدأ بتحديد العناصر الأساسية ، وهذا هو الهيكل العظمي. سيكون هذا الهيكل بمثابة دعم لاستيعاب كل المحتوى (سواء كان نصيًا أو متعدد الوسائط). من خلال تحديد كل قسم من الأقسام التي تتكون منها صفحتنا ، سنتمكن من العمل عليها بدقة كاملة وتقديم تصميم مرئي ناجح قدر الإمكان.
من المهم جدًا أن نأخذ في الاعتبار الأبعاد التي سيكون لموقعنا الإلكتروني ، إذا كان سيحتوي على ملف محاصر أو كامل العرض. ستكون صفحة الويب المعبأة داخل حاوية صغيرة ، وبالتالي ستظهر مساحة حولها. على العكس من ذلك ، ستشغل شبكة الويب الكاملة الشاشة الكاملة للجهاز الذي يعيد إنتاج الصفحة. الاختيار بين طريقة أو أخرى يستجيب للأسئلة الأسلوبية فقط وسيعتمد أيضًا على احتياجات المشروع الذي نعمل عليه. سنعمل في هذا المثال مع الوضع المحاصر ، لذلك لن يشغل كل المساحة التي يوفرها المتصفح.
لإنشاء إطار شبكي ، فإن أول شيء يتعين علينا القيام به هو الدخول إلى تطبيق Adobe Photoshop وتضمين الأبعاد التي نريد أن تحتوي عليها صفحتنا. في هذا المثال ، ستكون صفحتنا بعرض 1280 بكسل. ومع ذلك ، قد تختلف مشكلة الحجم اعتمادًا على الوجهة النهائية أو الجهاز الذي نريد إعادة إنتاج صفحتنا عليه. ليس هناك شك في أنه لكي يكون تصميم الويب عمليًا وفعالًا ، يجب أن يكون كذلك استجابة ويجب أن تتكيف مع جميع الأجهزة الموجودة في السوق. ومع ذلك ، في هذه الحالة ، سنعمل على إنشاء نموذج أولي سنقوم بإعادة إنتاجه على جهاز كمبيوتر مكتبي. ومع ذلك ، فإن المشكلة سريعة الاستجابة التي سنتعامل معها لاحقًا ، في الوقت الحالي ، إليك تسلسل هرمي لأبعاد الشاشة للعمل معها في هذا المثال. ضع في اعتبارك أنه في هذه الحالة سنقوم بعمل تخطيط للصفحة المقصودة في Adobe Photoshop ثم نحولها إلى HTML5 و CSS3. الهدف من هذه الممارسة الصغيرة هو تحويل التصميم الذي تم إنشاؤه في Photoshop إلى تصميم ويب تفاعلي وقابل للاستخدام يستجيب لحركات المستخدم.
قياسات الهواتف المحمولة
iPhone 4 و 4S: 320 × 480
iPhone 5 و 5S: 320 × 568
آيفون 6: 375 × 667
آيفون 6+: 414 × 736
Nexus 4: 384 × 598
Nexus 5: 360 × 598
Galaxy S3 و S4 و S5: 360 × 640
HTC One: 360 × 640
قياسات الأجهزة اللوحية
iPad بجميع موديلاته بالإضافة إلى iPad Mini: 1024 × 768
جالكسي تاب 2 و 3 (7.0 بوصات): 600 × 1024
جالكسي تاب 2 و 3 (10.1 بوصات): 800 × 1280
Nexus 7: 603 × 966
Nexus 10: 800 × 1280
Microsoft Surface W8 RT: 768 × 1366
Microsoft Surface W8 Pro: 720 × 1280
القياسات لأجهزة الكمبيوتر المكتبية
الشاشات الصغيرة (المستخدمة على سبيل المثال في أجهزة الكمبيوتر المحمولة): 1024 × 600
الشاشات المتوسطة: 1280 × 720/1280 × 800
الشاشات الكبيرة: عرض أكبر من 1400 بكسل مثال 1400 × 900 أو 1600 × 1200.
لبدء توزيع العناصر وتعيين الأقسام داخل نموذج الويب الخاص بنا ، من المهم جدًا أن نأخذ في الاعتبار النسب لضمان إنهاء قابل للقراءة ولحن. سيكون من الضروري أن تستخدم خيارات القواعد والأدلة التي يمكنك العثور عليها في عرض القائمة العلوية. للعمل بطريقة متناسبة ودقيقة ، من الأفضل أن نعمل من النسب المئوية. سنضغط على قائمة العرض ثم على خيار «دليل جديد» لاختيار طريقة التقسيم. في هذه الحالة ، سنقوم بعمل أربعة أقسام رأسية بنسبة 25٪ وسنأخذها كمرجع لوضع صورنا في التذييل وصورة شعارنا في الرأس.
هناك رمز لتعيين كل منطقة من المجالات التي ستشغل منطقتنا نموذج والوظيفة التي سيكون لكل منهم. على سبيل المثال ، للإشارة إلى المنطقة التي ستشغلها الصورة ، سننشئ مستطيلات بنوع من التقاطع. للإشارة إلى أننا نريد تضمين مقاطع فيديو في منطقة معينة ، سنقوم بتضمين رمز التشغيل داخل الحاوية الخاصة بنا. في هذا المثال الأول ، سنعمل فقط مع الصور ، في الالتقاط العلوي يمكنك رؤية المنطقة التي يوجد بها ملف شعار من موقعنا.
ستكون هذه النتيجة النهائية لدينا السلكي. كما نرى ، فهو مقسم إلى رأس مكون من الصورة التي سيتم العثور على الشعار فيها والذي سيكون بمثابة رابط للصفحة الرئيسية مصحوبًا بعلامتي تبويب ومحرك بحث وأربعة أزرار في مربع البحث. بالإضافة إلى ذلك ، بالفعل داخل الجسم ، قمنا بتضمين شريط جانبي يتكون من شريط فاصل وسلسلة من الفئات التي تصنف نوع المحتوى الذي سيكون على موقعنا. قسم آخر به ترقيم يتضمن الإدخالات التي ستكون موجودة على موقعنا ، وأخيراً قائمة بالعلامات الوصفية أو الملصقات الأكثر تمثيلاً على موقعنا.
في منطقة المحتوى ، والتي سيتم تحديدها بواسطة قسم سيتضمن محتوى يمكن إدارته ذاتيًاسنجد محتوى مقالاتنا. في هذه الحالة ، فتات الخبز أو شريط التنقل (الذي يشير إلى الهيكل العضوي لموقعنا على الويب ، وعنوان المقالة ، والبيانات الوصفية ، والفقرة كمجموعة نصية ، يتم تضمين الصورة فيها.
كتذييل ، قمنا بتضمين أربع صور ستكون بمثابة رابط إلى مناطق أخرى من صفحتنا. هنا يمكننا تضمين شعارات أو أقسام أخرى مثيرة للاهتمام. على الرغم من أنه في الواقع ، فإن هذه المنطقة ستعمل بشكل أكبر مسبقة، نظرًا لأن التذييل نفسه سينخفض قليلاً مع سياسة الاستخدام والإشعار القانوني وحقوق النشر.
بمجرد تحديد الهيكل الأساسي أو الهيكل العظمي لصفحتنا ، سيتعين علينا الانتقال إلى المستوى التالي. سيتكون هذا من التصميم المناسب لكل مجال من مجالات موقعنا على الويب. بعبارة أخرى ، سنبدأ في "ملء" كل منطقة من هذه المجالات بالمحتوى الذي سيتم إدراجه أخيرًا على موقعنا. يوصى بعدم تصميم هذه العناصر قبل العمل على الإطار السلكي لأنه من المحتمل جدًا أننا إذا قمنا بذلك بهذا الترتيب ، فسنحتاج إلى تعديل نسبها لاحقًا. نحن نخاطر بتشويه صورنا والاضطرار إلى إعادة تصميم كل عنصر ، والذي سيصبح إما مضيعة للوقت أو نتيجة جودة أقل.
في هذه الحالة ، سيكون تصميم موقعنا الإلكتروني بسيطًا للغاية. سوف نستخدم ملف مبادئ تصميم المواد، نظرًا لأننا سنستخدم شعار Google لتوضيح هذه الممارسة. يجب أن أوضح أن الغرض من هذا البرنامج التعليمي هو توضيح المعرفة التقنية ، وبالتالي فإن النتيجة الجمالية في هذه الحالة ليست ذات صلة. كما ترون ، قمنا شيئًا فشيئًا بملء المساحة بجميع المجالات التي حددناها مسبقًا في مخططنا. ومع ذلك ، قمنا بإجراء تعديل بسيط في اللحظة الأخيرة. كما لاحظت ، قمنا بتقليص حجم شعارنا بشكل كبير وقمنا بتضمين خط فاصل في منطقة الرأس السفلية الذي يتصل بشكل مثالي بالقائمة العلوية. في هذه الحالة استخدمنا الأزرار والمواد من بنك الموارد. كمصممين يمكننا تصميمهم بأنفسهم (خاصةً هذا الخيار موصى به إذا أردنا أن يقدم منشطًا مشابهًا جدًا لتلك التي تقدمها صورة العلامة التجارية أو الشعار).
من المهم أن نضع في اعتبارنا أنه لتوضيح هذا المثال ، سنعمل على مستويين مختلفين. من ناحية ، سنعمل على الكائنات ومن ناحية أخرى على مظهر الموقع. هذا هو ، من ناحية الهيكل العظمي لموقعنا على شبكة الإنترنت ومن ناحية أخرى في الكل العناصر العائمة التي سيدعمها هذا الهيكل العظمي. ستلاحظ أن هناك مناطق لن تطفو على الإطلاق ، مثل المنطقة التي سيشغلها شريطنا الجانبي ، أو المُطلق المسبق أو شريط التقسيم الذي يفصل الرأس عن الجسم.
ستكون الهياكل 1 و 2 و 3 و 4 جزءًا من خلفية من صفحة الويب الخاصة بنا ، لذلك في الواقع لن يكون من الضروري التصدير على هذا النحو من Adobe Photoshop ، على الرغم من أنه يمكننا القيام بذلك ، إلا أنه ليس ضروريًا عندما يتعلق الأمر ب ألوان مسطحة (إحدى الميزات الأساسية للتصميم المسطح وتصميم المواد ، يمكن تطبيقها بشكل مثالي من خلال التعليمات البرمجية باستخدام ورقة أنماط CSS). ومع ذلك ، يجب حفظ باقي العناصر لإدراجها لاحقًا في كود HTML الخاص بنا. في هذا الرسم التخطيطي الصغير ، أعدنا أيضًا إنتاج المناطق التي تنتمي إلى خلفية الصفحة حتى يكون لدينا فكرة واضحة عن الشكل النهائي لموقعنا.
كما ستدرك ، فإن الغرض من إنشاء هذا المخطط في Adobe Photoshop هو الحصول على البعد الحقيقي لكل عنصر ، وتوضيح ترتيب وبنية كل عنصر. بالطبع ، لا مكان للمحتوى النصي في هذه المرحلة من العملية لأنه يجب أن يكون كذلك المقدمة من محرر الكود الخاص بنا. يجب أن نشير أيضًا إلى أنه في هذه الممارسة ، سنعمل مع الأزرار والعناصر الثابتة ، على الرغم من أنها تُطبق عادةً من أطر مثل Bootstrap أو مباشرة من Jquery.
بمجرد إنشاء كل عنصر من العناصر التي ستشكل صفحة الويب الخاصة بنا ، فقد حان الوقت لبدء تصديرها وحفظها في مجلد الصور الموجود داخل مجلد مشروع HTML. من المهم أن تعتاد على التصدير من الإطار السلكي ، لأنه من المحتمل جدًا أنك ستحتاج إلى تعديل بعض العناصر الأصلية بناءً على تكوين الهيكل العظمي. (على سبيل المثال ، في هذه الحالة ، قمنا بتغيير حجم الأزرار الأصلية والشعار ومعظم العناصر التي تشكل جزءًا من التكوين ، بما في ذلك الصور الموجودة في المنطقة السفلية).
من المهم أن نتعلم حفظ أي عنصر بشكل مستقل لحفظه بالأبعاد الموجودة به وبطريقة دقيقة. يمكن لأي خطأ ، مهما كان ضئيلاً ، أن يؤثر على جميع العناصر التي تشكل جزءًا من موقع الويب الخاص بك. ضع في اعتبارك أنها ستكون مرتبطة ببعضها البعض ويجب أن يكون لها أبعاد مثالية حتى يمكن إدخالها من HTML في الويب النهائي. في هذه الحالة ، سنحتاج إلى قطع العناصر التالية وحفظها بشكل مستقل:
- شعارنا.
- جميع الأزرار (تلك التي تعد جزءًا من القائمة الرئيسية والباقي).
- كل الصور.
يمكننا القيام بذلك بعدة طرق وربما تجد بديلًا أكثر فعالية بالنسبة لك. ولكن إذا كانت هذه هي المرة الأولى التي تقوم فيها بعمل هذا النوع من التخطيط ، فإنني أوصيك باتباع النصائح التالية.
- أولاً ، يجب أن تنتقل إلى المجلد الذي يحتوي على ملف PSD الذي يحتوي على الإطار السلكي الخاص بنا ونسخه عدة مرات مثل العناصر التي ستصدرها. في هذه الحالة ، قمنا بإنشاء 12 نسخة من الأصل وحفظناها في نفس المجلد. بعد ذلك ، ستعيد تسمية كل نسخة وتخصص لكل منها اسم العنصر الذي تحتويه. ستتم إعادة تسمية نسخنا الـ 12: الشعار ، زر القائمة 1 ، زر القائمة 2 ، شريط البحث ، الزر العلوي 1 ، الزر العلوي 2 ، الزر العلوي 3 والزر العلوي 4. ستتم إعادة تسمية النسخ الأربعة المتبقية على النحو التالي: الصورة 1 ، الصورة 2 ، الصورة 3 والصورة 4.
- بمجرد الانتهاء من ذلك ، سنفتح الملف باسم الشعار.
- سنذهب إلى لوحة الطبقات الخاصة بنا ونحدد الطبقة التي تحتوي على شعارنا. ثم سنضغط Ctrl / كمد بينما نضغط على الصورة المصغرة للطبقة المذكورة. بهذه الطريقة سيتم اختيار الشعار تلقائيًا.
- ستكون الخطوة التالية هي إخبار Photoshop أننا نريده قطع هذا الشعار بدقة. لهذا سيتعين علينا فقط إجراء مكالمة إلى أداة الاقتصاص من المفتاح أو الأمر C.
- بمجرد القيام بذلك ، سنضغط على زر Enter لتأكيد القطع.
- الآن سوف ننتقل إلى قائمة الملفات العلوية للنقر فوق حفظ كيف. سنختار الاسم الذي سيكون في هذه الحالة «الشعار» وسنخصص له صيغة بابوا نيو غينيا، لكونه الملف الذي يقدم أعلى جودة على الويب.
- سنكرر العملية مع جميع النسخ والعناصر. عندما تقوم بالقص ، تأكد من أن باقي الطبقات في لوح الألوان الخاص بنا موجودة خفي أو القضاء عليها. بهذه الطريقة يمكننا حفظ كل عنصر بخلفية شفافة.
في هذه الحالة ، نختار زر القائمة 2 من لوحة الطبقات. يمكنك أن ترى في لقطة الشاشة كيف تم تحديد حدود زرنا تلقائيًا.
بمجرد تحديد أداة الاقتصاص من المفتاح C ، يتم تقليل حجم اللوحة القماشية الخاصة بنا فقط إلى أبعاد الزر الخاص بنا.
حان الوقت الآن لحفظ جميع العناصر التي تشكل جزءًا من موقعنا الإلكتروني وإدراجها في مجلد الصور والتي سنستخدمها لاحقًا. سنقوم بإجراء مكالمات من الكود الخاص بنا وسنواصل تخطيطنا ولكن من الآن فصاعدًا من محرر الكود الخاص بنا.
على الرغم من وجود العديد من الأدوات والبدائل لتخطيط صفحة الويب والتي تجعل العملية بديهية تمامًا ، فمن المهم جدًا أن نتعلم القيام بذلك في كتيب. بهذه الطريقة سوف نتعلم ما هي الأساسيات وراء تصميم صفحة الويب.
ملخص:
- صمم ملف estructura من موقع الويب مع إيلاء اهتمام خاص للمحتوى الذي تريد نقله والأقسام التي يجب عليك إنشاؤها على موقع الويب الخاص بك.
- العمل على الهيكل العظمي الخاص بك أو السلكي من Adobe Photoshop يشير إلى المناطق التي ستظهر فيها المحتويات وتنسيقها.
- بالاعتماد على الإجراءات والعلامات التجارية التي قمت بتطويرها مسبقًا ، ابدأ في ذلك diseñar سطح الويب. يشمل جميع العناصر (العائمة والثابتة). لا تنس تضمين الأزرار والشعار والصور المقابلة.
- قم بقص جميع العناصر التي تشكل جزءًا من المشروع واحدة تلو الأخرى. تأكد من أن لديهم الإجراءات الصحيحة وأنها لن تسبب لك مشاكل لاحقًا.
- احفظ جميع العناصر بتنسيق بابوا نيو غينيا في مجلد الصور داخل مجلد المشروع HTML.
- ضع في اعتبارك أن هذا المشروع سيكون له إخراج إلى نافذة الويب ، لذا من المهم جدًا أن تأخذ في الاعتبار وضع الألوان والتطبيق RGB.
- احصل على الإلهام من صفحات الويب الأخرى التي تعجبك قبل الشروع في العمل ، ولا تنس مناقشة هذا الأمر مع أعضاء فريقك. إذا كان مشروعًا للعميل ، فحاول التمسك بـ إحاطة أبعد ما يمكن.
هاهاهاهاهاهاها وفي نهاية كل هذا ، تذهب إلى زر البدء ، وتطفئ المعدات ، وتذهب إلى محترف سخيف سيجعلك موقعًا إلكترونيًا ليس هراءً ؛)
البرنامج التعليمي يرحب بي جيدًا ، لكن ربما في المرة التالية ستجعله أكثر تفصيلاً ، ما زلت أبدأ في هذا التصميم ، وعندما أرى الصور مع النتيجة النهائية ، هناك بعض الخطوات التي لا أعرف كيفية القيام بها. شكرا.