البحث في الموقع

إن اختيار نظام الألوان المثالي ليس بالمهمة الصعبة. كل ما تحتاجه هو الأدوات الصحيحة لعملك وعينك لتبدأ التصميم. لا يمكنني تطوير عينيك لاختيار الألوان، لكنني أستطيع اقتراح مجموعة من أدوات الألوان المفيدة والتي من المحتمل أن تحسن ذوقك عند استخدامها. جميع هذه الأدوات مجانية 100٪، لذا يسهل وضعها في المفضلة وإعادة استخدامها مرارًا وتكرارًا. كما يمكنك استخدامها في تصميم الويب أو الهاتف المحمول أو الطباعة أو أي وسيط آخر يحتاج إلى ألوان مذهلة. 1. ColorHexa كنت أتصفح الويب في الآونة الأخيرة وعثرت على ColorHexa. إنها إلى حد بعيد إحدى أروع أدوات الألوان التي رأيتها على الإطلاق. من الناحية الفنية ليست هذه الأداة مُولّد ألوان أو أداة تصميم مخطط، بل هي مكتبة معلومات عن جميع الألوان مع تدرجات لونية مقترحة، وظلال ذات صلة، وعشرات من رموز الألوان (مثل:hex ، RGB،CMYK ،CIE-LAB ،HSL والمزيد). لن تجد قائمة من المعلومات عن الألوان أكثر كمالًا منها. فهذه الأداة مفيدة للغاية لجميع المصممين، بمن فيهم مصممي الويب، وهي مكان رائع للبدء في البحث عن الألوان لمشاريعك. 2. Colors.css إذا قمت ببعض الأبحاث في التأثير النفسي للألوان فستتعلم كيف تترابط الألوان المختلفة معًا وما الحالة المزاجية التي تعبر عنها. وهذا ما يتناقض مع أنواع محددة من الألوان وكيفية عملها معًا. غالبًا ما يأتي كل متصفح بألوان افتراضية مزعجة جدًا. Color.css ستقوم بإصلاح ذلك. إنها مكتبة CSS مجانية تعمل على إعادة تشكيل لوحة الألوان الافتراضية. هذا يعني أنه يمكنك استخدام أسماء الألوان مثل "الأزرق" و"الأحمر" بقيم مختلفة تمامًا. كما أن لدى موقع الأداة صفحة مليئة بالأفكار لمطابقة أنظمة الألوان التي من شأنها تحسين قابلية القراءة على موقعك. 3. ColorPick Eyedropper ترى كم وجدت من المواقع ذات الألوان الجميلة؟ أجد مواقع مذهلة طوال الوقت ومن الصعب تصدير هذه الألوان من ورقة الأنماط. يمكنك استخدام أدوات مطور كروم ولكن هذا يتطلب التنقيب في التعليمات البرمجية (الكود) لاختيار الألوان السداسية (الهيكسا). بدلاً من ذلك ، يمكنك استخدام إضافة ColorPick Eyedropper المصمم حصريًا لـ Google Chrome. يمكنك فقط النقر فوق نافذة التبديل في لوحة الإضافات، ثم المرور فوق أي لون تريد دراسته. تمنحك هذه الإضافة الرمز الكامل السداسي عشري مع رابط "نسخ" لنسخ اللون المحدد إلى حافظتك الخاصة. رائعة حقًّا أليس كذلك؟ إنها إضافة مجانية، لذلك لن تخسر شيئًا إن جربتها. 4. Coolors موقع Coolors عبارة عن مولد كبير لمخططات الألوان. يمكنك العثور على العشرات من المولدات على شبكة الإنترنت، ولكن هذا يختلف قليلاً لأنه يدعم برامج Adobe بإضافاتها الخاصة. يمكنك أيضًا الحصول على هذه الإضافة لكروم أو حتى كتطبيق iOS مخصص لهاتفك. حقا القيمة الحقيقية تكمن في تطبيق الويب للمتصفح هذا الذي يولد تلقائيًّا مخططات الألوان بلمح البصر. يمكنك بعد ذلك مزج الألوان ومطابقتها، وتغيير الإعدادات، وضبط العمى اللوني، وإضفاء الطابع العشوائي على المخططات الخاصة بك وفقًا لمعايير معينة. إنه تطبيق رائع، ولكنه يأتي مع منحنى تعليمي صغير. فلن يأخذ منك أكثر من 15-20 دقيقة حتى تعرف كيف يعمل كل شيء. 5. Palettte App Palettte هو أداة تحرير الألوان وإعادة رسم خرائطها. يتيح لك إنشاء مخططات ألوان تتدفق من واحدة إلى أخرى وتضبط عينات الألوان الفردية. يمكنك أيضًا استيراد مخططات الألوان الحالية وتحليلها وتحريرها. وقد أورد كاتب المقال المزيد عن دوافع ومزايا استخدام تطبيق الألوان هذا. 6. Material UI Colors من خلال بحث Google السريع، ستجد مجموعة من أدوات تصميم المواد الجميلة على الويب. يبدو أنها لا تنتهي، ويعتمد الكثير منها على أنماط الألوان الموجودة عادة في تطبيقات Android. باستخدام تطبيق الويب Material UI Colors، يمكنك العثور على مخططات ألوان مثالية تتوافق مع إرشادات Google’s material. قم بتغيير درجة جميع الألوان بسهولة باستخدام شريط التمرير الموجود في الزاوية العلوية اليسرى من الشاشة. أو اعمل على تحديد اختياراتك لتتناسب مع خيارات ألوان الموقع الحالي. يمكنك أيضًا التبديل بين hex و RGB وفقًا لأي تنسيق تريده. إنه تطبيق رائع لمحبي تصميم البطاقات ((material design. 7. Color Supply موقع Color Supply فريد من نوعه ولكنه غريب أيضًا. يمنحك مجموعة من أدوات الألوان المثيرة للاهتمام لمطابقة مخططات الألوان، واختيار الواجهات الأمامية والخلفيات، إضافة إلى طرق مختلفة لمقارنة كيف ستبدو تلك الألوان على الصفحة. لكن هذا الموقع ليس له أي دليل استخدام أو غرض محدد. إنه يعمل كمولد مخططات للألوان. ويتم إخراج ألوان مختلفة مع رموز ست عشرية (hexadecimal) بالقرب من أسفل الصفحة لنسخها. بالإضافة إلى أنه سيوضح لك كيفية عمل هذه الألوان في التدرج اللوني والأيقونات والنص. أداة رائعة ولكنها تأتي مع منحنى تعلم حرج. 8. Color Safe تعمل WCAG (قواعد إتاحة محتوى الويب) بجدّ نحو شبكة سهلة الوصول. ويعد اللون أحد أسهل الطرق لإنشاء إمكانية الوصول دون فقد اختبار الوقت. Color Safe هو تطبيق ويب مجاني يمكنه اختبار خيارات الألوان الخاصة بك. يمكنك الاختيار من مجموعة صغيرة من الخطوط والأحجام، ثم اختيار الألوان التي تريدها للمقدمة والخلفية. ستحصل من هناك على تصنيف إمكانية الوصول إلى جانب اقتراحات حول كيفية تحسين خيارات الألوان الخاصة بك (إذا لزم الأمر). أداة رائعة حقًا لأي شخص مهتم بإمكانية الوصول على الشبكة. 9. Color Hunt للاطلاع على معرض مخططات الألوان، ألق نظرة على Color Hunt. تم إطلاق هذا المشروع المجاني قبل عامين ولا يزال مصدر إلهام للتصميم. يقدم الأشخاص مخططات الألوان الخاصة بهم إلى الموقع، ثم يصوت آخرون على مخططات الألوان هذه. يمكنك الترتيب حسب الأحدث أو الأكثر شعبية وحتى التصويت على المفضلات لديك. رائع حقًّا أليس كذلك؟ إنه تطبيق ويب بسيط للغاية لذا لا تتوقع الكثير من الميزات. إنها مجرد طريقة رائعة للتصفح بصريًا عبر العديد من أنماط الألوان المختلفة دفعة واحدة. 10. أوبن كلر Open Color تبحث عن شيء أكثر ملاءمة للويب؟ إذَا قم بزيارة مكتبة Open Color. إنها مجموعة ضخمة مفتوحة المصدر من خيارات الألوان مبنية على إمكانية الوصول ودعم المتصفح. تم تحسين كل لون لسهولة المطابقة بغض النظر عن التصميم الخاص بك. لمزيد من المعلومات ولتنزيل نسخة من الأنماط زر صفحة التطبيق على موقع GetHub. 11. HTML Color Codes HTML Color Codes هو تطبيق ويب معلوماتي خاص بالألوان. يتيح لك هذا التطبيق سحب جميع أشكال كود HTML / CSS لخيارات الألوان الخاصة بك مباشرة. يمكنك البحث عن أي لون تريده، أو الاطلاع على التوصيات. بالإضافة إلى أن هذا التطبيق يحتوي أيضًا على أداة لإنشاء لوحات ألوان يمكنك تنزيلها كملفات Adobe Swatch. لا تدع الاسم يخدعك: هذا التطبيق لا يقتصر فقط على استخراج ألوان HTML بل يتعدى ذلك بكثير. إنها أداة رائعة للمصممين الرقميين من جميع التخصصات والذين يريدون الوصول بسهولة إلى أكواد الألوان ولوحات الألوان القابلة لإعادة الاستخدام. 12. أدوبي كلر سي سي Adobe Color CC لا يمكنني تجاوز تطبيق الويب المذهل Adobe Color CC. كانت هذه الأداة المجانية تسمى Adobe Kuler لكنها مرت بتكرارات قليلة على مر السنين. ولا يزال منتقي الألوان هذا مجانيًا ولكن الواجهة قد تغيرت لتسهيل قيام المصممين بإنشاء مخططات الألوان وحفظها. إذا كنت أحد مستخدمي Adobe، فهذه الأداة تستحق أن تكون في مفضلتك. يدعم أدوبي كلر ما يصل إلى 5 ألوان مختلفة في مخطط واحد، ويمكنك حتى تحميل الصور لسحب مخططات الألوان الديناميكية تلقائيًا. ترجمة -وبتصرف- للمقال ‎Top 12 Web-Based Color Tools for Web Designers لصاحبه Jake Rocheleau

هل تساءلت عن كيفية عرض صفحة الويب على مختلف أحجام الشاشات؟ لتسهيل الأمر لنفكك السؤال باستخدام المثال التالي: لنتخيل أن تصميم صفحة الويب هو مخطط هندسي لمنزل جديد وجميل. الأساس الّذي يستند عليه المنزل يمثل استعلامات الوسائط (Media queries)، يليه الطابق الأرضي الذي يُحدد كيف ستُبنى بقية المنزل. هذا الطابق الأرضي هو ما نعده نقطة حدِّية. ما النقاط الحدية لصفحات الويب المتجاوبة؟ النقاط الحدِّية (Breakpoints)، بمفهوم تصميم صفحات الويب المتجاوبة، هي مجال من القيم مصحوبة باستعلام وسائط لتغيير تصميم الصفحة بمجرد أن يكون عرض نافذة المتصفّح داخلًا في المجال المذكور. سيتغير في مثال استعلام الوسائط التالي تصميم الصفحة من العرض الأساسي 960 بكسل عندما تُعرض على شاشة 768 بكسل: }(media only screen and (max-width: 768px@ /* هنا تكتب تعليمات CSS */ { تنشئ التعليمة أعلاه نقطة حدِّية عند وصول عرض نافذة المتصفح لأقل من 768 بكسل. النقاط الحدية القياسية تحتوي صفحات الويب التفاعلية عادةً على نقطتين حدِّيتين على الأقل تستهدفان أجهزة الجوال الذكية والأجهزة اللوحية. على خلاف أجهزة الحاسوب، اعتمدت النقاط الحدِّية لأجهزة الجوال والأجهزة اللوحية على أجهزة الآيفون والآيباد باعتبارهما الأكثر شيوعًا في كل من تصنيفي الهواتف الذكية والأجهزة اللوحية. رغم أن تلك الممارسة قابلة للنقاش، إلا أننا سنترك ذلك النقاش لوقت لاحق، ونصب تركيزنا في الاستعلامات التالية التي تمثل تلك القيم القياسية. الاستعلام الخاص بأجهزة الجوال @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* هنا تكتب تعليمات CSS */ } الاستعلام الخاص بالأجهزة اللوحية @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* هنا تكتب تعليمات CSS */ } تفاصيل إضافية الاستعلامان السابقان أساسيان لكنهما غير كافيين لتغطية جميع حالات الاستخدام. مثلاً إنشاء نقاط حدِّية اعتمادًا على الوضع الأفقي أو الرأسي للجهاز. الوضع الرأسي للجوال @media only screen and (max-device-width : 320px) { /* هنا تكتب تعليمات CSS */ } الوضع الأفقي للجوال @media only screen and (min-device-width : 321px) { /* هنا تكتب تعليمات CSS */ } الوضع الرأسي للجهاز اللوحي @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* هنا تكتب تعليمات CSS */ } الوضع الأفقي للجهاز اللوحي @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* هنا تكتب تعليمات CSS */ } إنشاء نقاط حدية مخصصة لماذا ننشئ نقاط حدية مخصصة؟ من المعروف أنه لا يوجد موقعان بُنيا بنفس الشكل. بوضع ذلك في الحسبان، من المنطقي التفكير أن موقعي ويب متجاوبين لا يمكن لتصميمهما المتفاعل الاكتفاء بالكامل باستخدام المعايير القياسية فقط للنقاط الحدِّية الخاصة بهما. هنا تنبع الحاجة لتحديد أين ومتى يحتاج تصميم موقعك لمزيد من النقاط الحدِّية حتى داخل مجال الاستجابة للنقاط القياسية السابق ذكرها. كيف تنشئ نقطة حدية مخصصة يمكن إنشاء نقطة حدِّية مخصصة بسهولة حيث لا يتطلب الأمر سوى معرفة بالتعامل مع استعلامات الوسائط، لكن من السهل هنا ارتكاب الأخطاء وإنشاء نقاط حدِّية عديمة الجدوى. لنفترض مثلًا أن موقعًا مّا يبدو سيئًا عند عرضه بنافذة تبلغ 355 بكسل. لإصلاح الخلل قد يقوم المطور بكتابة استعلام كهذا: @media only screen and (max-device-width : 355px){ /* CSS هنا تكتب تعليمات */ } مشكلة الاستعلام أعلاه أنه يحل مشكلة عرض محتوى الصفحة عند أجهزة عرضها 355 بكسل، لكنه يسبب مشاكل للأجهزة ذات عرض أقل من 355 بكسل. الطريقة السليمة لحل هذه المشكلة هي بإيجاد مدى العرض الذي يوجد به مشاكل عند عرض الصفحة لتخصيص مجال قيم يعالج هذه المشكلة. لنتخيل أن المشكلة تبدأ بالظهور عند عرض 340 بكسل وتستمر حتى 355 بكسل، هذا هو مجال الخلل. الاستعلام المخصص سيكون كالتالي: @media only screen and (min-device-width : 340px) and (max-device-width : 355px) and (orientation : portrait) { /* هنا تكتب تعليمات CSS */ } هل يجب الاعتماد في النقاط الحدية على نوع الجهاز أم مخطط الصفحة؟ تخيل الوضع التالي، موقع جديد متفاعل يبدو رائعًا على جميع مقاسات شاشات الأجهزة الشائعة، لكن لديه مشكلة. عندما يقترب العرض من 400 بكسل تخرج الأمور عن السيطرة. بما أنه من الصعب إيجاد أجهزة بمقاسات عرض قريبة من تلك النقطة قرر المطور تجاهلها وحسب. هل كان ذلك قرارًا حكيما؟ لا!. المغزى من التصميم المتجاوب هو إنشاء تصميم أفضل آخذًا بالحسبان جميع احتمالات أبعاد شاشات العرض. لضمان ذلك، يجب ألا يكون نوع جهاز العرض العامل الرئيسي لتحديد كيفية استجابة تصميم الموقع، ولا أن يكون أولوية حتى. من الأفضل أن نعد مقاسات أجهزة العرض الحالية نقاط ارتكاز أو مراجع للاستناد عليها. ما يجب أن نفعله في هذه الحالة هو التركيز على شكل الصفحة نفسها، وإيجاد عرض المتصفّح الذي يبدأ فيه التصميم بالظهور بشكل سيئ. لم سيجعلك هذا تبدو محترفًا في تصميم المواقع المتجاوبة؟ منذ انتشار أطر التصاميم المتجاوبة عالية الجودة، أصبح تعلم وتطبيق مهارات التصميم المتفاعل يزداد سهولة. ولكن كأي شفرة برمجية معدّة للبدء منها، فقط المبتدئون يستعملون تصاميم جاهزة يعتمدون عليها تمامًا في مشاريعهم. قدرتك على عرض تصميم المواقع بشكل صحيح على مختلف أنواع ومقاسات أجهزة العرض، وليس فقط المقاسات المعيارية، هي ما يحدد مستوى مهاراتك. ستُترجم المفاهيم العميقة بدورها إلى رؤية أفضل لأعمالك من قبل عملائك وتمنحك أساسًا أقوى لبدء التفاوض معهم. كيف تخصص نقطة حدية مثالية؟ أولاً: تأكد من تثبيت إضافة المتصفح المناسبة إضافات مثل Resize Window لمتصفح كروم مناسبة لمهام كالتي ذكرناها، لأنها ستظهر أبعاد النافذة الحالية أسفل يمين الشاشة عندما تغيّر قياس النافذة. ثانيًا: تأمّل في القيم بين النقاط الحدِّية الحسيّة هنا ستبحث عن قيم العرض - بالبكسلات - التي يختل عندها تصميم الموقع مستعملًا إضافة مثل Resize Window. عليك تغيير قيمة عرض نافذة المتصفح تصغيرًا وتكبيرًا لإيجاد مجالات العرض التي تظهر بها مشاكل التصميم وتوثيقها حتى لو تطلب ذلك فحص كل حجم العرض بكسلًا تلو الآخر. ثالثًا: أنشئ استعلامات الوسائط بنفسك استعمل ببساطة أبعاد العرض التى سجلتها سابقًا لكتابة استعلامات وسائط شبيهة بالمُدرجة أعلاه وستكون قد انتهيت! ماذا اغتنمت النقاط الحدِّية هي حيث يصل عرض نافذة موقعك لمقاس معين لينتقل إلى تصميم متناسب مع ذلك العرض. النقاط الحدِّية القياسية هي الخاصة بالجوال والجهاز اللوحي بالإضافة إلى اختلاف اتجاه عرضهما. من المهم دائمًا اختبار موقعك على أبعاد غير معتادة لتعزيز تماسك موقعك وتجربة الزوار. تأكد أن النقاط الحدِّية المخصصة لا تتعارض مع النقاط القياسية. التصميم المتفاعل هو محاولة للتحضير للمستقبل، لذا فإن قضاء وقت طويل في التركيز على الأجهزة الحالية ليست ممارسة جيدة. الحرص على جودة التصميم باختلاف أبعاد العرض سيجعلك تبدو محترفًا بالنسبة للعملاء. ترجمة - وبتصرّف - للمقال The Ultimate Overview of Responsive Web Design Breakpoints من إعداد فريق موقع 1stwebdesigner.

قد تتساءل لماذ يجب عليّ أن أستخدم ووردبريس؟ لكي تكون الأكثر فاعلية في عملك، من المهم جدًا أن يتعلم مصممو الويب والمطورون المحترفون الأدوات المناسبة ويستخدمونها. أردنا اليوم توضيح فكرة لماذا استخدام ووردبريس هو الخيار الأفضل لمعظم المستقلين (freelancers) -مرّة واحدة وللأبد-. سنغطي أيضًا كفية جعل سير عملك فائق الإنتاجية باستخدام إطار عمل قالب (theme framework). هناك الكثير من الأشياء المهمة التي تحتاج القيام بها عند إنشاء موقع ويب، إذ تحتاج إلى التأكد من أن الموقع يبدو رائعًا، وسريعًا، ومتجاوبًا (responsive)، ويظهر ظهورًا مرتبًا في جميع الأجهزة مختلفة الأحجام. يعدّ ووردبريس حقًا أفضل حلٍّ يمكنك استخدامه عند إنشاء معظم مواقع العملاء. بعض الاستثناءات ستكون تطبيقات ويب (web application) لأنك تحتاج حينها إلى بناء كل شيء من الصفر. مثلًا، في بناء موقع البحث عن الوظائف المُسمّى "AwesomeWeb" استخدم مطورو الموقع إطار عمل Ruby on Rails. بدأوا باستخدام مزيج من ووردبريس وإطار عمل CodeIgniter، ولكن لم يكن ووردبريس مرنًا كفاية لمثل هذه الحلول البرمجية عالية التخصيص. ومع ذلك، لن يحتاج معظم العملاء إلى حلول مخصصة. في ‎%98‎ من الحالات، سيحتاج العملاء إلى شيء شائع، مثل متجر على الإنترنت، أو علامة تجارية أو معرض أعمال (portfolio)، أو عضوية (membership)، أو مدونة للحصول على موقع تجاري بسيط. يمكنك بناء كل ذلك بسهولة باستخدام ووردبريس ومعرفة برمجية أساسية. هناك سبب وجيه لاستخدام ووردبريس من قبل الشركات الكبرى. السرعة والبساطة لماذا ووردبريس؟ ووردبريس هو نظام إدارة المحتوى (CMS) الأشهر، لسبب وجيه. صُمّمت %22 من جميع المواقع على الإنترنت باستخدام ووردبريس، وهي تشكّل حوالي 80 مليون موقع. إليك بعض الأسباب الرئيسية وراء شعبية ووردبريس: يسير التعلّم، ووردبريس برنامجٌ مفتوح المصدر. سهل وموثَّق (documented) توقيقًا شاملًا كذلك، بالإضافة إلى توفّر العديد من مقاطع الفيديو التدريبية المجانية. يحتوي العديد من الإضافات (plugins) والقوالب (themes)، أي لست بحاجة إلى خبرةٍ كبيرةٍ حتى تبدأ إنشاء مواقع باستخدام ووردبريس. في بعض الحالات، لا تحتاج إلى كتابة أي شيفرة برمجية لتحقيق النتائج التي تريدها. إنه قوي، يمكنك بناء الكثير عبره، مثل: متجر إلكتروني، ومدونة، وعضوية (membership)، ونماذج اتصال (contact forms)، بسهولة وسرعة فائقة من خلال استخدام القوالب (theme)، والإضافات المميزة. هناك آلاف من القوالب المجانية والمدفوعة متاحة على الإنترنت. قد يكون من المغري استخدام قالب مجاني، ولكن قبل اتخاذ هذا القرار، واصل القراءة.. الاستثمار مقابل أن تكون مكرّسًا وباحثًا عن المجانيّات. أقول ذلك لا يستحق المغامرة، ليس هنا لماذا استخدام قالب مدفوع أفضل من استخدام قالب مجاني؟ فوائد استخدام قالب مدفوع (premium theme)، مقابل القالب المجاني (free theme) كثيرة. السبب الأكثر أهمية لعدم استخدام قالب ووردبريس مجاني هو افتقارها للدعم والتوثيق (documentation) والتحديثات. فكّر في الأمر، إذا أنشأ المطوّر قالبًا مجانيًا، فهو لا يكسب أمولًا منها. لكنه لا يزال بحاجة إلى كسب لقمة العيش بطريقة أو بأخرى. لا يمكن أن يكون قالب ووردبريس المجاني خيارًا طويل الأمد، لأن المطوّر ليس لديه الحافز لدعم القالب مجانًا وتقديم التوثيق (documentation) وتحديثه خلال السنوات. هل ستقوم بكل هذا العمل مجانًا لو كنت في مكانه؟ لا يمكن توقّع مصادر التدريب (training resources) والوثائق (documentation) والدعم المجاني والتحديثات، عندما لا يكسب المطوّر منه أي مال. حتى لو كان أكثر الناس طيبة على وجه البسيطة، فإن كسب رزقه سيكون له الأولويّة دائمًا، علاوة على ذلك، ستكون القوالب (themes) المجانية أقل جودةً من تلك المدفوعة (premium) دائمًا. أنت تحصل على ما تدفع ثمنه. تتميز القوالب المدفوعة (premium themes) بشيفرة برمجية أنظف ووظائف أفضل. يقدّم جميع مزودي القوالب المدفوعة (premium themes) تصميمًا عالي الجودة وتوثيقًا معمّقًا (in-depth documentation) ودعمًا على مستوى عالمي. الدعم مهمٌّ للغاية، لأن هناك خطأٌ ما دائمًا أو شيء ما لا يعمل كما هو متوقّع. إذا اخترت قالبًا مجانيًا، فأنت تعتمد على حسن نية الآخرين لمساعدتك في المنتديات. أما عندما تختار شراء قالب ووردبريس مدفوع، فأنت تدفع مقابل الدعم ويكون مقدمو القوالب مسئولين عن مساعدتك. أفضل ما في الأمر أنّ قوالب ووردبريس المدفوعة تأتي بأسعار ميسورة جدًا بسبب المنافسة الشديد في السوق. هذه أخبار جيّدة لك! يمكنك شراء قالب مدفوع واحد مقابل 50 دولارًا أو الوصول لجميع قوالب المتجر مع الدعم مقابل 100 – 300 دولار/سنويًا. يمكنك استعادة هذه الأموال بسهولة من عميل واحد! لقد بدأوا في موقع ‎1stWebDesigner‎‎‎‎‎ منذ 7 سنوات بقالب ووردبريس مجاني، لكن الآن، لا ينظرون حتى النظر في القوالب المجانية. لأنها لا تستحق العناء ببساطة. أقترح عليك دفع 50 دولارًا مقابل قالب ووردبريس جميل وقابل للتخصيص الذي تريده مع التأكد من تضمين التوثيق (documentation) والدعم، مما سيوفّر لك الكثير من الوقت. هذا يعني أنك ستقضي الكثير من وقتك في محاولة معرفة الأشياء بنفسك. قوالب ووردبريس المدفوعة أم أطر عمل القوالب (Theme Framework) أم تطوير ووردبريس مخصص؟ عندما تنوي إنشاء تصميم ووردبريس مخصص، فهناك فقط طرق قليلة تبدأ بها. يتبّع الكثير من مصممي الويب المحترفين هذه الخطوات: العصف الذهني (brainstorm)، والحصول على فكرة عما يجب بناؤه، وكيف ينبغي أن يبدو التصميم. تصميم إطارات تخطيطية (wireframe) وتصميم موقع الويب ببرنامج فوتوشوب (Photoshop). تحويل ملف بصيغة PSD الناتجة من برنامج الفوتوشوب إلى قالب HTML / CSS. إضافة HTML / CSS إلى ووردبريس المثّبت. إضافة الوظائف (functionality) وعناصر ديناميكية (dynamic elements) مثل المدونة، والمتجر الإلكتروني. يبدأ بعض مصممو الويب مباشرةً بـ HTML / CSS ثم ينتقلون إلى ووردبريس، بينما ينتقل آخرون مباشرةً من صيغة ملف الفوتوشوب PSD إلى ووردبريس، وهي طريقة فعّالة بالفعل للعمل! ومع ذلك، يبدأ مصممو الويب الأذكياء وذوي الخبرة بقالب (theme) أو إطار عمل (framework) منذ البداية، واختيار التصميم (layout) والوظائف (functionality)، وتصميم الموقع بناءً على ذلك. يمكن القول أنّ هذه هي الطريقة هي الأكثر إنتاجية وفعالية لإنشاء المواقع. يؤمنون وبشدّة في ‏1stWebDesigner بهذا النهج. مثلًا، استغرق تصميم 1stWebDesigner السابق منهم أكثر من عام حتى الاكتمال عندما فعلوا ذلك بطريقة "تقليدية" بدءًا من الرسومات الأوليّة (sketching)، وتصميم الرسوم التخطيطية (wire framing)، وكتابة الشيفرة البرمجية المخصصة إلى ووردبريس. ومع ذلك، فإعادة تصميم موقع 1stWebDesigner حديث العهد لم يستغرق منهم سوى أسبوعين حتى الجهوز. بدأوا باستخدام إطار عمل Genesis، المخصص لقوالب ووردبريس، واختاروا قالبًا فرعيًا (child theme) بالتخطيط (layout) الذي أرادوه، وخصّصوا التصميم وأضافوا الوظائف (functionality)، وانتهوا من إعادة التصميم. هذا ما تعنيه الفعالية. يعد إنشاء قالب ووردبريس المخصص خيارًا جيدًا إذا كنت تعمل مع عملاء ذوي رواتب عالية، ومستعدين لدفع تكاليف الحلول المخصصة. تعدّ الشيفرة البرمجية المخصصة (custom code) ضرورية لبناء التطبيقات، وبرامج الويب، ومواقع العلامات التجارية الكبيرة جدًا. في هذه الحالات، لن تستخدم ووردبريس نهائيًا، ومع ذلك، فمعظم العملاء لا يحتاجون إلى ذلك. ما يحتاجونه هو موقع أعمال بسيط يحقق أهدافهم. لن يقدّروا شيفرتك النظيفة جدا (clean code) بقدر ما يقدّرون تسليم المشاريع السريع، وموقع الويب الذي ساعدهم في كسب المزيد من المال. ماذا يوجد خلف الكواليس؟ ما اطار عمل قوالب ووردبريس (WordPress theme framework)؟ قبل البدء في اختيار إطار عمل (framework) أو استخدامه مباشرةً، من المهم أن تفهم بالضبط ما هو إطار العمل وما يمكن أن يفعله لك. إطار عمل ووردبريس هو عبارة عن قالب ووردبريس متقدم مع بعض الإمكانيات، بكل بساطة. كلما طوّرت موقع ويب، فغالبًا ما تستخدم نفس المكونات (components). ستبدأ بالأساسيات، ثم تختار التصميم والتخطيط (layout) لـ (الترويسة [header]، والتذييل [footer]، صفحة ذات عمود واحد [single column]، وصفحة ذات عمودين). بعد ذلك، تبدأ بالعمل على الوظائف الرئيسية، مثل: المتجر الإلكتروني، وصفحة المبيعات، وصفحة العضوية (membership)، والمدونة. أخيرًا، عليك التفكير في إنشاء وظائف إضافية، مثل نماذج الاتصال (contact form) والحماية (security) وتحسين موقعك لمحركات البحث (SEO) وتجاوب موقعك لجميع الأجهزة (responsiveness). أطر عمل ووردبريس هي قوالب مبدئية (starter themes) تستخدمها أساسًا لإنشاء تصميماتك المخصصة. تسرّع أطر العمل عملية تطوير الموقع تسريعًا ملحوظًا. باعتبارك مطور ويب يعمل باستمرار على إنشاء قوالب ووردبريس مخصصة، فربما تكون قد سئمت من كل هذه المهام المتكررة، مثل كتابة نفس الشيفرة البرمجية مرارًا وتكرارًا، والتحقق من منها تحققًا مستمرًا. توفّر أطر عمل القوالب الكثير من الوظائف الجاهزة (built-in) وخيارات التخصيص، لذلك لا تحتاج إلى كتابة الشيفرة البرمجية لكل شيء من الصفر. صُمّمت أطر العمل بقوالب من نوع "أب" (parent theme) تستخدم هذه القوالب نقطة انطلاق لإكمال التصميم. هذه القوالب (قوالب الأب) هي الأساس الذي لا يُمس. يمكنك استخدام قالب الابن لإنشاء تصميماتٍ فريدةٍ ووظائفٍ إضافية. لماذا يستخدم مصممو الويب والمطوّرون أطر عمل ووردبريس؟ السبب الأكبر لاستخدام المصممين لإطار العمل هو تسريع عملية التطوير. تقلِّل أطر عمل القوالب على وقت التطوير تقليلًا عظيمًا؛ لأنك لست بحاجة إلى البدء من الصفر. يمكنك استخدام إطار العمل نقطة انطلاقة لتصميم قالبك النهائي، ثم يمكنك إضافة وظائف باستخدام وحدات (modules) مختلفة، مثل وظيفة السحب والإفلات (drag and drop)، وشريط التمرير (sliders)، والمتاجر الإلكترونية. يمكنك غالبًا الوصول إلى الوظيفة عن طريق تفعيل شيفرات برمجية قصيرة جاهزة (built-in) في إطار عمل ووردبريس. بدلاً من إنشاء قالب وكتابة شيفرته البرمجية من الصفر، يمكن أن يكون إنشاء موقع ووردبريس بسيطًا كإنشاء ملف تنسيقات style.css جديد، وتخصيص بعض الوظائف، وإضافة عناصر مرئية (visuals) يحتاجها عميلك. ثم، هأنتَ ذا انتهيت من الموقع! سيكون عميلك راضيًا بسبب التسليم السريع! من ناحية أخرى، ستكون سعيدًا لأنك اخترقت طريقك للتوّ من خلال عملية التطوير، وأنشأت موقع الويب الذي يريده العميل بسرعة فائقة! يمكنك الآن استثمار وقت إضافي في العمل مع عميلك والتأكد من أنّ موقع الويب هذا يحقق أهداف عميلك ويأتي بالنتائج الصحيحة. فوائد وعيوب استخدام إطار عمل ووردبريس إنها حقيقة أنه سيكون هناك دائما إيجابيات وسلبيات لقرارك. إيجابيات استخدام إطار عمل ووردبريس: توفير الوقت، وفعالية التطوير، والسرعة، وسهولة التطوير. كما ذُكر سابقًا أنه باستخدام إطار عمل القالب يمكن أن يقلّل وقت التطوير تقليلًا عظيمًا، ويسمح لك بتسليم العمل بسرعة. دعم قوي، ومجتمع من مطوري ووردبريس ذوي الخبرة. تحتوي أطر عمل ووردبريس الأكثر شهرةً على مجتمع ضخم ورائها، مما يساعدك على إصلاح الأخطاء وإيجاد الحلول بسرعة. الوظائف الجاهزة (built-in functionality). إضافة وظيفة فعالّة سهل للغاية مع التكامل الذي توفرّه متاجر القوالب الكبيرة. جودة الشيفرة البرمجية. تًكتب الشيفرات البرمجية باستخدام أفضل ممارسات ومعايير ووردبريس. وتكون شيفرات HTML و CSS و PHP محسّنة، كما أنها مُحسنة بأكبر قدر لمحركات البحث. الترقيات. سهولة التحديثات للإصدارات المستقبلية من ووردبريس ولا داعي للقلق بشأن ذلك. سلبيات استخدام إطار عمل ووردبريس: منحنى التعلم، سيستغرق الأمر بعض الوقت لإتقان أيٍّ من هذه الأطر. التكلفة، إطار العمل أغلى قليلاً من القالب المدفوع، لكنه يستحق ذلك. القيّود، تحدّد أطر العمل ما تستطيع وما لا تستطيع فعله. لا يمكنك كسر هذه الحواجز. يمكن أن يكون هذا عيبًا بالنسبة للمصممين المبتكرين الفائقين، لكن في معظم الحالات، يكون إيجابيًا وليس سلبيًا. شيفرات برمجية لا داعي لها، تأتي أطر العمل مع الكثير من الوظائف الجاهزة (built-in) التي قد لا تحتاجها. قد يؤدي هذا إلى إبطاء موقعك إذا لم تكن حريصًا على التخلّص من الخصائص التي لا تحتاجها. هل يجب عليّ استخدام إطار عمل ووردبريس؟ على الرغم من وجود منحنى تعليمي إضافي وتكلفة إضافية مأخوذة في الحسبان، يجب عليك حتمًا استخدام إطار عمل القوالب إذا كنت جادًا في تطوير مواقع ووردبريس. ستزداد سرعتك وسيتحسّن أداؤك تحسنًا كبيرًا قد يصل إلى عشرة أضعاف! ستكون قادرًا على التعامل مع عملاء أكثر وأفضل. علاوة على ذلك، سوف تكون قادرة على تلبية احتياجات عملائك وقضاء المزيد من الوقت في فهم أهدافهم، ستستطيع تنمية عملك من خلال القيام بذلك (استخدام أطر عمل القوالب). بناء موقع من الصفر يشبه بناء منزل دون مُخطّط (blueprint). في المقابل فالبدء بإطار عمل يشبه استخدام مُخطّط. سأل كاتب المقال نيكولاس تارت، وهو مصمّم يتمتع بخبرة 5 سنوات، عن رأيه في "وجوب استخدام إطار عمل" فأجاب نيكولاس: إنها حقيقةٌ لا تحتاج إلى كثير من التفكير في وجوب استخدام ووردبريس ووجوب تعلّم إطار عمل أو قالب مبدئي (starter theme) لخدمة عملائك خدمة جيدة. يركّزون في موقع ‎1stWebDesigner‎‎‎‎‎ بشِدّة على التوصية بووردبريس لمساعدتك أن تكون مستقلًّا ناجحًا. بالنسبة لمعظم المصممين المستقلّين، فمشكلتهم ليست في ضعف معرفة البرمجة والتصميم، ولكنها في ضعف مهاراتهم التجارية. سيدفع لك العملاء مقابل النتائج التي ستريهم إياها على هيئة موقع ويب. للقيام بذلك، تحتاج إلى تقليل التركيز قليلًا على التقنية وعليك بتعلم بعض مهارات التسويق. ترجمة -وبتصرف- للمقال Why You Should Choose WordPress من كتابة فريق التحرير بالموقع

جمعت لك مجموعة ضخمة من المواقع ذات تصميم مميز وسهلة الاستخدام التي سوف تلهمك، وتتكون هذه المجموعة من 50 موقع. اختيرت هذه التصاميم من زوايا مختلفة، من مواقع مشهورة مثل موقع National Geographic، أو Marni، أو The Winter Olympic Games، حتى أفكار المواقع التي لم تنشأ بعد أو مشاريع تصميم الويب الصغيرة التي وجدناها على موقع Behance. يجب على جميع مصممي الويب أن يُنشئوا مواقعهم واضعين بعين الاعتبار سهولة الاستخدام. ستفيدك هذه الميزة بإبقاء زوارك أكثر تفاعلًا، مما يجعلهم يمكثون وقتًا أطول في تصفح موقعك. ولكن في الحقيقة، ما الذي يجعل موقعك أكثر سهولة في الاستخدام؟ تصميمٌ متجاوب تمامًا، اجعل محتواك واضحًا، على سبيل المثال: القائمة، والأزرار المهمة، وكن حذرًا أيضًا من الخطوط التي تستخدمها والألوان.. إلخ. يجب عليك أيضًا أن تُبقي بعين الاعتبار وضع بيانات التواصل الخاصة بك، ووسائل التواصل الاجتماعي، استخدم قائمة ثابتة تظهر في جميع الأوقات. إضافةً لذلك، يجب عليك أن تفكر في قبول الطلبات عبر الإنترنت أو تضمين شريط بحث، كل هذا للتسهيل على الزائر عند تصفحه لموقعك. هذه المواقع السهلة الاستخدام أكثر من كونها جميلة فهي لديها مميزات أساسية ومفيدة للتصميم الكلي. تصفح هذه التصاميم الخاصة بمواقع سهلة الاستخدام وقم بدراستها. سوف تستفيد منها بالطبع وسوف تلهمك لتصنع تصاميم ويب فعالة وجميلة. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن National Geographic هذا الموقع رائع جدًا ولديه تركيب واضح، وقائمة ظاهرة، وخطوط جميلة، وصفحة رئيسية منزلقة فريدة من نوعها. Uncrate 2.0 فكرة الموقع الإلكتروني الرائعة هذه لديها تصميم متجاوب تمامًا، مما يشمل شريط بحث والمحتوى منظم بشكل جيد وظاهر تمامًا. كل هذه الميزات تُسهّل الاستخدام وتُظهر الموقع بشكل جيد لجميع الزائرين. Madewell ها هي فكرة موقع إلكتروني جميلة ولديها تخطيط سهل الاستخدام. احصل على إلهامك من هذا التصميم المذهل وانظر أي الميّزات الرائعة يمكنك اكتشافها. Sikora Ibizan Hounds هذا الموقع لديه تخطيط واضح بمعلومات مختصرة وصور عالية الجودة. يظهر كل من الشعار ومعلومات التواصل بسهولة. Aquawa on Behance هذا تصميم متجاوب تمامًا وسوف يقوم بمناسبة محتواه تلقائيًا بشكل مثالي مع أي حجم شاشة. WAVERIDER تصميم هذا الموقع هو أيضًا تصميمٌ بسيط ويشمل مميزات سهلة الاستخدام. حيث يتضمن قائمة ظاهرة وشعار، وتخطيط سريع الاستجابة 100%، وعناوين كبيرة بمعلومات دقيقة …إلخ. Kara فكرة التصميم هذه رائعة جدًا وتمتلك تصميمًا ملفتًا للانتباه والذي سوف يُبقي مستخدميك متفاعلين بكل تأكيد. Drew Watts هذا الموقع لديه رأس وذيل صفحة ثابتين واللذان يشملان كل المعلومات الضرورية للتصفح خلال موقعك. STP – Simple, Clean, Masonry يشتمل هذا التصميم على ميزة رائعة والتي تقوم بسحب رأس الصفحة والقائمة والشعار كلما قمت بالتمرير للأعلى. ويمتلك أيضًا تصميمًا متكامل ومنظم بشكل جيد مع صور عالية الجودة وجميلة. Nike: Tights of the Moment وهو موقع مليء بالألوان الجميلة ويحتوي على مميزات وتصميم يشد الانتباه. شريط التمرير في الصفحة الرئيسية فريدٌ من نوعه ولديه بعض حركات الانتقال الرائعة. Hireinfluence ترى هنا موقعًا ممتازًا ويمتلك تصميمًا جذابًا ومميزات رائعة. The French Cuisse يعد هذا التصميم بسيطًا بشبكة تخطيط منظمة جدًا، وسريع الاستجابة كليًا ويشمل مميزات رائعة تجعل منه سهلًا للاستخدام. The new Heroes & Pioneers فكرة موقع مذهلة بإمكانك استخدامها كمصدر إلهام. تفقد جميع مزاياه وحدد أي الأشياء الجديدة يمكنك تعلمها منه. Ok Kid – Grundlos Extended تصميم هذا الموقع هو تصميم دنيوي برسومات خفيّة. تعد التفاصيل البسيطة والتصميم الإبداعي من الأسباب التي تعطيه مظهرًا فريدًا من نوعه. Onlab – Font for the HBC تجدون هنا تصميمًا مذهلًا على شكل صفحة واحدة وهو ملفت للانتباه وسوف يشد انتباهك بكل تأكيد. يستخدم هذا التصميم قائمةً ثابتة تساعدك على التصفح خلال الموقع بسهولة. The Woman بإمكانك استخدام هذا التصميم الجميل كمصدر إلهام في مشاريعك المستقبلية. يعتبر التخطيط الخاص بالموقع سريع الاستجابة بمميزات أنيقة وتصميم مذهل. SocioDesign هذا الموقع مصمم بخبرة كبيرة وهو وكالة تخطيط مقرها في لندن. وهو موقع ممتاز بتخطيط منظم جيدًا. Tatte- Amanda Jane Jones احصل على إلهامك من فكرة التصميم المذهلة هذه واستخدم ما تتعلمه في مشاريعك المستقبلية. القائمة الرئيسية، الأزرار والمظهر الدنيوي مناسبين لهذا النوع من المواقع. Scotland Can Make It! Designed by Graphical House هذا تصميم موقع إلكتروني جميل بتخطيط سهل الاستخدام. وهو سريع الاستجابة تمامًا، ولديه أسلوب تصميم بسيط وأسلوب طباعة تم اختياره بشكل موفق. Ouur Collection هذا الموقع يملك تخطيطًا سريع الاستجابة والذي سوف يجعل محتواه يتناسب تمامًا مع أي حجم شاشة. يستخدم الموقع صورًا كبيرة لزيادة التأثير المرئي للتصميم. And And Web Design يستخدم هذا التصميم أفضل الصيحات في عالم تصميم الويب، والرسومات، والقوائم الإبداعية، والصور ذات الجودة العالية، والمزيد. Shotfolio PSD Theme ها هو نمط موقع إلكتروني مصمم بشكل جيد وبإمكانك تعديله بسرعة لجعله يتوافق مع متطلباتك. هذا التصميم سهل الاستخدام ويشمل ميّزات قوية. Marni يعتبر Marni موقعًا سهل الاستخدام فيه جميع المهام الضرورية للمتاجر على الإنترنت. أضاف المصمم العديد من الميزات الرائعة والتي سوف تسهل عليك التصفح في الموقع. Frú Frú يمكن قول الكثير عن هذا الموقع الجميل. يمتلك تصميمًا سريع الاستجابة، محتوى منظم جيدًا، وميّزات رائعة أخرى، يمتلك هذا الموقع تخطيطًا سهل الاستخدام ويجعل المستخدمين متفاعلين. World of Swiss استخدم هذا التصميم الجميل كمصدر إلهام لمشاريعك المستقبلية. يشتمل هذا التخطيط على تصميم متفاعل، صور عالية الجودة، والمزيد. Twiggy Bar هذا موقع جميل فيه محتوى منظم بشكل جيد بتصميم إبداعي سوف يضمن لك أن يلاحظه المستخدمون. تخطيط الموقع يشبه المجلة. Lala Berlin تصميم موقع مذهل ويحتوي أيضًا على متجر إلكتروني. اضغط على الرابط وألقِ نظرة على التصميم الكامل والميّزات. Bureau of Visual Affairs يمتلك هذا الموقع تصميم قائمة إبداعي، تأثيرات زَيْغ (تحريك الصور الثابتة)، رسومات أنيقة وتصميم مذهل. هذه الميّزات تجعل الموقع سهل الاستخدام وسهل الوصول لجميع الزوار. Johann Lucchini موقع رائع على شكل معرض بتصميم سهل الاستخدام. استعراض الأعمال يتم عرضه في شبكة منظمة تمكنك من رؤية الأعمال بشكل أفضل. Everlane بإمكانك استخدام هذا التصميم الجميل كمصدر إلهام لمشاريعك المستقبلية. هذا التخطيط لديه قائمة ثابتة تسهل عليك التصفح في الموقع. THISISPAPER أيضًا تصميم موقع رائع ولديه العديد من المزايا سهلة الاستخدام. هذه المزايا تشمل محتوى منظم، وتصميم أنيق، ومعلومات واضحة، وتصميم سريع الاستجابة، والمزيد. Brave People يمتلك هذا الموقع تصميمًا احترافيًا بميّزات قوية مثل تأثير الزّيْغ، ورسومات، وتخطيط كامل الشاشة ...إلخ. GC Watches في هذا الموقع، سوف تكتشف صورًا عالية الجودة، قائمة ملصقة، سريع الاستجابة بشكل كامل، جميعها مستخدمة بإتقان عالي واهتمام بالتفاصيل. هذا تصميم أنيق بشكل عام وفاخر. Escape Committee يستغل هذا الموقع المساحة البيضاء بشكل ممتاز، كون الصور محط الاهتمام في الموقع. تخطيطه سريع الاستجابة تمامًا ويمكنك من رؤية المحتوى بشكل ممتاز على أي شاشة عرض. Nixon هذا الموقع الإلكتروني الأنيق يحتوي على متجر تم تصميمه للساعات والاكسسوارات المميزة. خذ الإلهام من الطريقة التي يركز فيها هذا المتجر الإلكتروني على منتجاته بينما يمتلك تصميم UX رائعًا. Doug Aitken: The Source موقع إلكتروني جميل آخر بتصميم إبداعي. يحتوي التخطيط على مقابلات متعددة ومعروضة بطريقة فريدة من نوعها في رأس الصفحة. Crop the Block وهو موقع رائع بشاشة كاملة وله تصميم سهل الاستخدام. وسوف تجد أيضًا العديد من مقاطع الفيديو التي تجذب الانتباه والخطوط الجميلة. Castscarf يوجد العديد من الصور عالية الجودة والتي سوف تُذهل محبي الحيوانات في هذا المتجر الإلكتروني. وبالإضافة لتصميمه الرائع، فإن هذا الموقع أيضًا لديه تخطيط سريع الاستجابة بالكامل ويتوافق مع أي حجم شاشة عرض. Falve هذا التصميم الجميل للموقع الإلكتروني لديه تخطيط سهل الاستخدام. هذا يشمل، تصميمًا سريع الاستجابة، محتوى منظم بشكل ممتاز مع عناوين، وأزرار، والعديد من الميّزات الواضحة. Intersection التصميم الخاص بهذا الموقع سريع الاستجابة بشكل كامل، مما يجعله يُعرَض بشكل مثالي على أي جهاز. تندمج العناوين تمامًا مع صورة الخلفية الكبيرة. Harry’s تصميم الموقع الإلكتروني هذا هو تصميم شاشة كاملة مع تخطيط سهل الاستخدام. سوف تكتشف العديد من الصور المذهلة، الخطوط الجميلة، المحتوى المنظم جيدًا، والعديد العديد. Squarespace بالتأكيد قد سمعتَ عن Squarespace. استخدم هذا التصميم الأكثر من رائع كمصدر إلهام لمشاريعك المستقبلية. يستخدم التصميم رسومات تفاعلية، صور جميلة، والعديد من المميزات المخصصة. Jonathan Decosta يستخدم هذا الموقع شبكةً منظمةً لعرض صور مختلفة. وأيضًا، تمتلك القائمة موقعًا ثابتًا، فعند استخدامها، تقوم بفتح تركيب يغطي تقريبًا الشاشة بأكملها. IWC Schaffhausen موقع IWC Schaffhausen هو متجر إلكتروني بتصميم احترافي وتخطيط سهل الاستخدام. هنالك العديد من الفيديوهات في الخلف والتي سوف تشد انتباهك بكل تأكيد. Spotify وهو موقع مشهور جدًا ويحتوي على رأس صفحة ثابت مع خلفية شفافة. ويمتلك التصميم صور خلفية بألوان جميلة. هنالك العديد من خدع التصميم بإمكانك تعلُّمها من تخطيط هذا الموقع. Google Glass تصميم هذا الموقع بسيط ولكن فعال. اكتشف العديد من المميزات في هذا الموقع واستخدمها في تصاميمك. Jack Daniels بتأثير مظهر جميل، صور عالية الجوة وعلامة تجارية مشهورة، فإن هذا الموقع يجذب ويحافظ على مستخدميه. Symbolset يمتلك هذا الموقع خلفية بألوان متغير تشُد الانتباه وأسلوب طباعة مرسوم. Simone Marcarino ها هي صفحة رئيسية مرسومة بشكل تفاعلي والتي تشجعك على الانخراط في الموقع. هذا التصميم لديه تخطيط دنيوي وبسيط ويتفاعل فجأة عندما تقوم بالتمرير من فوقه. Pulse هذا التصميم معقد بعض الشيء ويشمل عدّة ميزات رائعة وتصميم مدروس كليًا مع ألوان جميلة ورسومات مذهلة. الخلاصة تعد عملية صنع تصميم سهل الاستخدام مهمًا جدًا لعدد من الأسباب. أولًا، سوف يقوم التصميم المشوش بإحباط المستخدمين وقد يغادرون الموقع بدون أن يقوموا بأداء ما أتوا للقيام به في موقعك (سواء كان شراء شيء ما، تعبئة نموذج، قراءة مقالة، أو أي شيء آخر). ثانيًا، تصميم الموقع المدروس جيدًا والمنفذ بشكل جيد سوف يضمن أن يعود المستخدمون من جديد لزيارته وهو شيء يريده جميع مالكي المواقع. لذلك، استخدم هذه الأفكار عند صنعك لموقعك الإلكتروني سهل الاستخدام في المستقبل. احصل على موقع إلكتروني مخصص لأعمالك أبهر زوارك بموقع احترافي ومميز بالاستعانة بأفضل خدمات تطوير وتحسين المواقع على خمسات أنشئ موقعك الآن ترجمة -بتصرف- للمقال ‎50 User-Friendly Website Designs That Work لصاحبه Iggy

تؤثر طريقة تسعيرك لخدماتك تأثيرًا كبيرًا على كيفية رؤية العملاء المحتملين لعملك. لكن غالبًا ما يميل المبتدئون في العمل المستقل إلى تخفيض أسعارهم من أجل الحصول على مشاريع أكثر. عندما تفعل ذلك، فأنت تجذب المنتهزين الذين لا يقدّرون قيمة عملك، وليس عملاء على المدى الطويل. بالإضافة إلى ذلك، عندما تخفض من أسعارك، ترسل إشارات بأنك لا تهتم بقيمة نفسك أو عملك. إذًا، كيف تضع سعرًا لنفسك؟ يتضمن وضع السعر لنفسك جانبين، جانب داخلي وجانب خارجي. التسعير الداخلي السعر الداخلي هو ما تحتفظ به لنفسك ولا تطلع عميلك عليه، ويتضمن كل العوامل والعناصر الضرورية عندما تحسب المبلغ الذي ستطلبه من عملائك؟ ويسمى هذا السعر بالسعر الأدنى المقبول Minimum Acceptable Rate، وهو أدنى سعر تقبل العمل به. يتضمن حساب السعر الأدنى المقبول نفقات العمل ونفقاتك الشخصية مقسمة على عدد الساعات التي ستقضيها في مشروع ما. ويجب أيضًا أن تضيف الضرائب. على سبيل المثال، تكلّفك نفقاتك الشخصية (الغذاء والسكن والملبس والضروريات المعيشية الأخرى) 30 ألف دولار في السنة، في حين تكلفك نفقات عملك فقط 5 آلاف دولار في السنة. وهكذا، لنقل إنك على استعداد للعمل لمدة 6 ساعات يوميًا في مشروع مدته 48 أسبوعًا، أي ما يعادل 1440 ساعة. لذلك اجمع مجمل نفقاتك والتي هي 35 ألف دولار واقسمها على عدد الساعات 1440 وستحصل على 24.31 دولارًا، وهذا سيكون السعر الأدنى المقبول لك. وإن أضفت الضرائب، لنقل 20%، سيصبح السعر الأدنى 29.70 دولارًا. يختلف هذا الحساب بالطبع، لأن كل شخص لديه اعتبارات ومتغيرات مختلفة. العبرة هي أن تستخدم هذا السعر كمرشد لك ولا تقبل أدنى منه أبدًا، اقبل فقط بالأسعار الأعلى. التسعيرة الخارجية هي ما تناقشه مع عميلك. وهي السعر الذي يتوافق مع القيمة التي ستضيفها للمشروع، السعر الذي عندما يُعطى لك، ستقدم عملًا أفضل. لكن هناك بعض العوامل التي يجب أن تضعها في الحسبان. 1. راقب المنافسين كن على وعي بأسعار خدمات الآخرين لكي تكوِّن فكرة واضحة. مع ذلك، يجب ألا تؤثر عليك أسعار الآخرين، لأن الكثير من المستقلين، خاصة الجدد، يبخسون من أسعارهم. ومع أنه من الصعب طلب سعر أعلى من معظم المستقلين، إلا أن ذلك سيحدد استمرار عملك المستقل في التصميم. 2. لا تحدد سعرك بالساعة أبدًا ربما رأيت الكثير من المشاريع محددة بالساعة أثناء تصفحك مواقع وأسواق العمل. إلا أن لهذه الطريقة بعض العيوب منها: سيركز العميل دومًا على الوقت المستغرق عند حساب خدمتك بالساعة. وعندما تبدأ في وضع ساعات إضافية، سيبدأ العميل في التذمر عما يأخذ منك كل هذا الوقت. وربما تضيف بعض التغيرات التي ستؤثر تأثيرًا هائلًا على موقع العميل، إلا أنها لم تأخذ منك سوى دقائق. وبالتالي ستبخس من قيمة ما تقدمه. أكثر من ذلك، ستحد المحاسبة بالساعة من إبداعك، وبالتالي ستحد من القيمة التي ستعطيها للمشروع. لذلك، من الأفضل أن تصارح العميل المحتمل، وتخبره عن تكلفتك بالإضافة إلى العمليات المتضمنة في المشروع. يمكنك ذكر الخطوات والإستراتيجيات التي ستؤديها وستساعده على تحقيق أهدافهم من الموقع الإلكتروني. عندما يرى العميل القيمة التي ستقدمها له، لن يتردد في الموافقة على سعرك. في الواقع، ربما لن يسألك عن السعر، بل يعرض عليك سعرًا أعلى عندما يقتنعون بقيمة ما تقدمه. 3. سعِّر خدماتك حسب قيمتك القيمة هنا لا تعني وقتك فقط، بل تجربة التعامل معك برمتها. تذكر أنك لا تعطي وقتك فقط، ولكن خبرتك أيضًا. وهذا يتضمن خدماتك وكيف تعمل على المشروع ونتيجته النهائية. 4. اقضِ بعض الوقت في التحدث مع عميلك عادة ما يخطئ محترفو تصميم المواقع المستقلون في الموافقة السريعة على العرض. ما يحدث هو أنهم يوافقون على كل ما يقوله العميل خوفًا من هروبه. من ناحية، سيسألك العميل عن سعرك والفترة التي ستحتاجها بدون مناقشة التفاصيل، لأنه في الحقيقة لا يزال هناك الكثير من العملاء الذين يبحثون عن أرخص الأسعار. لذلك من الحكمة أن تأخذ حذرك قبل كل مشروع جديد. كيف يمكنك فعل ذلك؟ أولًا، حاول إيجاد ما يريد العميل تحقيقه فعلًا. هل يريد إعادة تصميم الموقع؟ أم إدراج منتج جديد؟ أم زيادة مشاهدة موقعه؟ ثم بعد ذلك اعرض خيارات عدّة بدلًا من واحد. الخدمة الأولى هي باقة أساسية تحتوي على ما يريده العميل، والثانية باقة مميزة تحتوي على أشياء أخرى لا يعرف عميلك أنه يحتاجها حتى تعرضها عليه. أخيرًا، تأكد من أن تضع شروط الدفع بالإضافة إلى طريقة سير المشروع، والتي تضمن الدفعة المقدمة ومراحل الدفع وبالطبع موعد التسليم النهائي للمشروع. 5. دائمًا ضع سعرك بما يتوافق مع أهداف العميل لا تركز فقط على النتيجة الحالية التي يريدها عميلك، لكن على أهدافه الكلية. أنت الخبير، وفي أغلب الوقت لا يعرف العملاء كل ما يريدون بالضبط. تعلم واقرأ ما بين السطور واسألهم لتعلم ما يريدون عمله بالفعل، وستندهش من ترحيبهم للتحدث عن العملية معك. أما العملاء الذين يريدون الحصول على العمل سريعًا بأقل الأسعار، سيسببون لك المتاعب، فتجنبهم. ترجمة – بتصرّف – للمقال How to Price Your Web Design Services.