تخطيطات الشبكة في مواقع محفظة WordPress: نصائح وأمثلة عن التصميم

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

ولكن ما الذي يجعل التخطيط الشبكي قويًا للمحفظة؟ وما الذي يجب عليك مراعاته عند إطلاق موقع محفظتك الخاصة؟

في هذا المنشور ، سأشارك بعض النصائح والنصائح حول أفضل تصميمات تخطيط الشبكة لمحافظ WordPress.

تصاميم الشبكة الضيقة

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

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

لكن قد يبقي المصمم عمله قريبًا من بعضه البعض لأنه لا يزال من السهل تصوير لقطات الشاشة ، حتى من مسافة بعيدة. يمكنك أن ترى مثالًا رائعًا في سمة Ink لـ WordPress.

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

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

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

لكن أحد البدائل الرائعة هو Bramble ، الذي يحتوي على مساحة أكبر قليلاً بين كل قطعة.

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

لكن الشيء الأول الذي يجب مراعاته هو الشلل التحليلي. يحدث هذا عندما يتم تقديم العديد من الخيارات التي يمكن أن تجعل الشخص يشعر بأنه غير قادر على اختيار أي منها.

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

شبكات البناء

لا يعرف الكثير من الناس عن شبكات البناء لكنهم كانوا موجودين منذ فترة طويلة.

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

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

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

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

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

تتبع تخطيطات الشبكة عددًا قليلاً من الاتجاهات ومن اختيارك اتباع أيهما تفضله.

تفاصيل تحوم: Yay Or Nay؟

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

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

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

عندما يحوم المؤشر فوق أي عنصر من عناصر المحفظة ، ستجد حكايات مهمة من المعلومات:

• اسم / عنوان عنصر المحفظة
• فئة العنصر

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

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

مجرد صور مصغرة بسيطة مع تأثيرات تحوم بسيطة. مريح للعين وتم العثور على جميع التفاصيل أسفل الصور المصغرة بحيث لا تعيق الصورة.

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

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

انتزاع عيون مع صور مقنعة

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

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

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

أقترح تصفح مواقع الحافظة الأخرى لمعرفة ما يستخدمه المصممون الآخرون لصور معرضهم.

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

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

في تخطيط الشبكة لديك فقط مساحة كبيرة لكل مشروع. اجعل هذا الفضاء مهمًا!

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

تحرك للأمام

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

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