عدنان أمزيان

تعدّ المواقع الإلكترونية الشخصية من الأمور المهمة لأي مستقل وذلك من كونها أداة قوية جدًا لبناء العلامة التجارية للمستقلين والتعريف بأعمالهم والتسويق لها وكسب المزيد من عملاء وبناء الثقة معهم، وعلى الرغم من أهميتها إلا أنّها ليست خطوة إجبارية ولكنها وفي معظم الأحيان تكون خطوة ممتازة لظهور المستقل بشكل احترافي أمام العملاء ولترسيخ انطباعٍ أفضل في أذهانهم. ومع ذلك، فقد انتهى الأمر بأن يكون الموقع (سواءً المبني بواسطة الووردبريس أو بأي طريقة أخرى) عثرة للكثير من الناس، وغالبًا ما يسبّب لهم تأخيرًا دون داعٍ. أو ما هو أسوأ من ذلك، منعهم من بنائه من الأساس. وغالبًا ما تصبح الخطوات الّتي يُفترض أن تكون سريعة وبسيطة إلى أن تكون مضيعةً للوقت والجهد ممّا يحول بينك وبين الدولار الأوّل الّذي ستجنيه من عملك ككاتب أو مساعد عن بعد أو عمل أخر. ونحن نتمنى لك دومًا كسب المزيد المال لذلك فقد حرصنا على أن نساعدك في هذه المهمة. نأمل بأنك لاحظت أنّ كلّ ما نقدّمه تقريبًا في أكاديمية حسوب مصمَّمٌ لمساعدتك على اتخاذ إجراءاتٍ كبيرة وتحقيق نتائج مهمة في أقلّ وقتٍ ممكن. وسنحاول من خلال هذا المقال تغطية عملية بناء موقع كامل بواسطة الووردبريس خطوة بخطوة، واضعين بذلك حدًا لتلك العقبة المعيقة. فهل أنت متحمّس لبناء موقعك الإلكتروني؟ لننطلق! إن لم يكن لديك موقعًا أو مدوّنة (ولكنّك ترغب في ذلك)، فقد سجّلنا خطوات هذه العملية بالصور (باستخدام مثالٍ واقعي) لمساعدتك في إطلاق موقعك في غضون سبعة خطوات أو أقلّ! وأما إن كان لديك موقعًا بالفعل، فإنّنا نشجّعك للاطّلاع على محتوى هذا المقال لتعلّم بعض الحيل والنصائح الّتي يمكنك تنفيذها بسرعة لتحسين صورتك على الإنترنت أو نقلها إلى المستوى التالي. ملاحظات قبل البدء نأمل بأن يصبح هذا المقال دليلًا ومرجعًا كاملًا للمستقلين الذين يحاولون بناء مواقعهم الشخصية والتأسيس لعلامتهم التجارية بأسرع وقتٍ ممكن وبأعلى كفاءة لظهورها بأبهى حلة. بالطبع إننا نخطّط لإبقائه محدّثًا قدر الإمكان. بمعنى آخر، من الممكن أن تلاحظ بعض الاختلافات الصغيرة في الخطوات وذلك نتيجة لتطوّر نظام الووردبريس بمرور الوقت. وكما سنحاول أن نقدّم لك توصياتٍ متعدّدة للخدمات الّتي ستحتاجها لتختار الأنسب منها بما يوافق أهدافك ورؤيتك لعلامتك التجارية. وبالمناسبة، لقد جرّبنا واختبرنا كلّ شيءٍ سنوصي به. أهداف هذا المقال أنت هنا لسببين: إمّا ليس لديك موقع إلكتروني حاليًا أو لديك موقعًا ولكنّك غير متأكد من أنّه في المستوى المطلوب. لجعل عملية تحسين موقعك (أو إطلاقه للجمهور) سهلةً قدر الإمكان، قمنا بتقسيم عملية إعداد الموقع (أو علامة تجارية جديدة) إلى أكبر عدد ممكن من الخطوات الصغيرة سهلة التنفيذ. وبهذه الطريقة، يمكنك الجلوس والعمل على بضع خطواتٍ كلّ يوم دون أن تشعر بالضغط أو الإحباط وستعرف بالضبط ما عليك القيام به عندما تملك الوقت للعمل عليه، وستشعر بأنّك تحقّق إنجازًا بعد انتهاء كلّ خطوة. هناك سبعة خطوات في هذا المقال يمكنك أن تقسهما على سبعة أيام إن شئت (سنناقشها جميعها في هذا المقال). وستكون بعضها قصيرةً نسبيًا، وبالمقابل قد تتطلّب بعض الخطوات الأخرى ساعاتٍ من العمل. يمكنك العمل عليها بالتتالي، أو إنجاز بضعة مراحل معًا، أو حتى محاولة إنجاز جميعهم في آنٍ واحد. الأمر متروكٌ لك تمامًا (والمعلومات متاحةٌ لك لاتخاذ الإجراءات اللازمة عندما تكون مستعدًّا). ومهما يكن هدفك في اتباعك لهذه الخطوات، فإنّ هدفنا هو مساعدتك على إطلاق موقعك في غضون 7 أيام أو أقلّ. ونأمل في تحقيق ذلك عن طريق تجنّب الكثير من التأخيرات والأخطاء والمخاطر الّتي يبدو أنّ الآخرين يواجهونها مرارًا وتكرارًا. لا تسعى أبدًا إلى الكمال دعنا نقضي على هذه المغالطة على الفور، أليس كذلك؟ أنا متأكد من أنك زرت أمازون عدّة مرّاتٍ على مرّ السنين، أليس كذلك؟ هل لاحظت من قبل كيف يبدو أن هناك تغييرات طفيفة تحدث دائمًا على موقعهم؟ أو أحيانًا يُجرى إعادة تصميم كبير للموقع في آنٍ واحد، تليها سلسلة أخرى من التغييرات الصغيرة؟ مثل كلّ الأعمال التجارية الناجحة على الإنترنت تقريبًا، تعلّمت أمازون منذ وقت طويل أنه من أجل البدء في تحقيق إيرادات، يجب أن يكون الموقع جاهزًا ومتاحًا في أقرب وقت حتى وإن كان يحوي بعض الأخطاء فلا بأس بذلك ولكن المهم بناء العلامة التجارية وتحقّيق المبيعات. كتاباتك أو عملك كمساعد عن بعد لا تختلف كثيرًا عن ذلك. لذلك يجب عليك بناء موقعك وجعله جاهزًا وفي أسرع وقت ممكن لبناء علامتك التجارية. يبدو القيام بهذا أمرًا سهلًا، لكن يمكنني أن أخبرك من تجربتي الشخصية أنّ الكثير من الناس يعانون مع شعورهم بأنّ يكون موقعهم مثاليًا، قبل أن يسدلوا الستار عنه للعالم. لكن هذا سيعيقك فقط. ثق بي، عليك أن تتخلّص من سعيك للكمال. وجزء من ما يجعل نظام ووردبريس مدهشًا للغاية، أنّه يمكنك من إجراء جميع التغييرات صغيرةً كانت أو كبيرة في أي الوقت. سترى في جزءٍ لاحق من هذا المقال كيف سيتطوّر الموقع الّذي سنعمل عليه في هذا المقال بمرور الوقت. بينما نتعمّق في هذا المقال، تذكّر هدفك: موقع جاهز في 7 أيام أو أقلّ. من أجل تحقيق ذلك، سيتضمّن المقال أقلّ قدر ممكن من الإضافات الّتي لا جدوى منها. لأننا نريد مساعدتك لاتخاذ قراراتٍ صائبة، وليس شحن عقلك بمختلف أنواع المعلومات الّتي قد لا تحتاجها في موقعك. لذا، إذا لاحظت أنّنا توقّفنا لحظةً لشرح معلومة بقدرٍ من التفصيل، فعلم أنّ هذه المعلومة مهمة جدًّا لذا فاقرأ بتمعن وطبق كلّ ما تراه. الخطوة الأولى: اختيار اسم نطاق وخُطة استضافة نعلم أنّك متحمّس، لذلك لنبدأ في عمل الخطوة الأولى. 1- اختيار اسم النطاق الخاص بك أعلم أنّه سبق لك التفكير في هذا لبعض الوقت. من خلال خبراتنا، يقضي معظم الناس الكثير من الوقت في محاولة معرفة اسم النطاق المثالي، وإليك ما نوصي به لكي لا تحتار في اختيار اسم النطاق المناسب: ابقه بسيطًا قدر الإمكان. إذا كان اسمك الأول والأخير متاحًا (على سبيل المثال www.sarasoueidan.com)، ففكّر في البدء بذلك. إذا لم يكن متاحًا (وليس لديك أفكار جيّدة أخرى)، فاتبعه بكلمات مثل writer (كاتب) أو va (مساعد عن بعد). حاول ألّا تقضي ما يزيد عن 30 دقيقة في هذه العملية. لماذا؟ لأننا نعتقد اعتقادًا راسخًا بأنّ الجهد الّذي ستبذله في التسويق لنفسك و"إثبات اسمك في المجال" سيفوق اسم النطاق المثالي بكثير. يمكنك إشهار أيّ اسم نطاق مع المثابرة والعزيمة. ضع قائمةً بخمسة أسماء تراها مناسبة واختر اسمًا واحدًا. إذا وجدت صعوبةً في اتخاذ القرار، فأنشئ استطلاعًا على فيسبوك أو أي منصة أخرى واطلب المساعدة في الحصول على الاقتراحات. يمكنك التحقّق من توفّر النطاق من خلال موقع siteground كجزء من عملية الاشتراك في الاستضافة. 2- شراء نطاق واستضافة للموقع لقد أوصينا في الماضي بمزوّد استضافة واحد. ولكن بعد الاستماع إلى الملاحظات، سنقدّم الآن توصيتين مختلفتين، لتتمكن من اختيار الحلّ الأنسب لاحتياجاتك (كلاهما خيارات قوية). عندما يتعلّق الأمر بالاستضافة، هناك شيءٌ واحد بإمكاننا تأكيده، ألا وهو أنّ موضوع الاستضافة المثالية هو موضوع نسبي ويتعلّق بإيجادك لتوازن الميزات الّتي تحتاجها. خدمة SiteGround تقدّم هذه الشركة العديد من الباقات الّتي تتيح لك البدء بسعر رخيص للعام الأول. ولكن عامك الثاني سيكلّفك أكثر، ولكن بحلول ذلك الوقت يجب أن تكون قد جنيت دخلًا. تُصنف SiteGround بأنها جيدة من ناحية سرعة المخدم وخدمة العملاء. الجانب السلبي (الصغير) هو أنّه يجب عليك الاعتماد على نفسك قليلًا في بعض الأمور أكثر من خيارنا الثاني. خدمة Flywheel يعدّ هذا الموقع أغلى قليلًا من خيارنا الأول (بالنسبة للسنة الأولى على الأقل)، ولكن هذا المبلغ الصغير يأتي مع بعض المزايا الكبيرة. تعدّ هذه الشركة عبارة عن منصّة استضافة متكاملة وشاملة وسهلة الاستخدام، أيّ لن تحتاج للقلق بشأن النسخ الاحتياطية أو اختراق موقعك لإنّها تدير الأمور التقنية بالنيابة عنك. ستتمكّن باستخدام SiteGround من تسجيل نطاقك كجزء من عملية الاشتراك بخطة الاستضافة - وهذا شيء أوصي به شخصيًا لأني بإحدى المرات اشتريت اسم النطاق والاستضافة بشكلٍ منفصل، وكان الأمر مربكًا جدًا بالنسبة لشخص مبتدئ مثلي. ستحتاج باستخدام شركة Flywheel إلى الحفاظ على حساب الاستضافة الخاص بك منفصلًا عن نطاقك عن طريق تسجيل نطاقك عن طريق شركات مثل GoDaddy أو NameCheap …إلخ. أحد الجوانب الإيجابية لشرائهم بشكلٍ منفصل هو أنّ حساب الاستضافة والنطاق الخاص بك محميان بحسابين منفصلين، أيّ بكلمتي مرور منفصلتين. وهذا وبكل تأكيد يضيف طبقة حماية إضافية، مع أنّها ليست خطوة حاسمة لضمان أمن موقعك. الأمر المهم هو التأكد من استخدام كلمة مرور آمنة يصعب تخمينها. في الواقع، إذا كنت تستطيع تذكرها في رأسك، فربما ستكون سهلةً للغاية. لأغراض هذا المقال التعليمية، سنفترض أنّك تُسجل اسم نطاقك كجزء من عملية الاشتراك في موقع SiteGround. اختيار باقة الاستضافة المناسبة لك يقدّم موقع SiteGround ثلاثة خطط للاستضافة. إذا كنت تبني الموقع لأول مرة، فلا تتردّد في اختيار عرض "Startup". إذا كنت تستضيف أكثر من موقع ويب واحد (وهذا ما سيكون في مثالنا بهذا المقال)، فستحتاج إلى اختيار إمّا خطة "GrowBig" أو "GoGeek". تأتي خطة GrowBig مع بعض الميزات الإضافية الّتي تجدها مفيدة، مثل 30 يومًا من النسخ الاحتياطي، وتحسين التخزين المؤقّت (caching) والّذي سيساعد على زيادة سرعة تحميل موقع الويب الخاص بك وحتى دعم أسرع على الرغم من أنّ الشركة تقدم دائمًا دعم عملاء سريع للغاية. بمجرّد اختيارك للخطة المناسبة لك، ستكون الخطوة الأولى هي إدخال اسم النطاق أو عنوان URL لموقع الويب الّذي ترغب فيه (إذا كنت ستشتريهما معًا). (أو إذا قمت بتسجيل النطاق في مكان آخر، عن طريق موقع GoDaddy على سبيل المثال، فحدّد الخيار الثاني الّذي يقول "لديّ بالفعل نطاق لاستخدامه"). بعد ذلك، أدخل اسم النطاق الّذي تريده، واختر ‎.com وانقر فوق "متابعة". على الرغم من أنّ اللاحقة ‎.com ليست ضرورية، إلّا أنّها الخيار الأكثر شهرة. فإذا كانت متاحة، فاحصل على ‎.com في كلّ مرة! يجب أن تشاهد بعد ذلك نافذة تطلب منك إدخال جميع تفاصيل حسابك، بالإضافة إلى العديد من خيارات النطاق. أدخل بياناتك الشخصية ثم انتقل للأسفل. الجزء السفلي يجب أن يشبه الصورة أدناه. ستلاحظ خيارًا لتحديد خصوصية النطاق وهو WHOIS. سيؤدّي هذا إلى إخفاء بياناتك الشخصية من قاعدة بيانات WHOIS (مع الحفاظ على سرّية بريدك الإلكتروني على سبيل المثال). إذا كان لديك عنوان نشاط تجاري أو صندوق بريد يمكنك استخدامه، ستتمكّن من توفير 12 دولارًا (ملاحظة: هذا أحد تلك الخيارات الّتي أفضّلها شخصيًا. على سبيل المثال، لم أختر هذا الخيار ولم يكن لدي صندوق بريد جاهز). ملاحظة: من الأفضل دومًا التسجيل في خدمة Whois في خدمة الاستضافة بدلًا من شرائها من مواقع أخرى (لإثبات ملكيتك للموقع في حال اختراقه). سترى أيضًا خيارًا لـ SG Site Scanner. مرة أخرى، هذا اختيار شخصي. وهنا الخدعة: إنّ معرفة أن موقعك قُرصن أو حُقن بشيفرة خبيثة هو نصف المعركة فقط. النصف الآخر هو إزالة وتنظيف الموقع وهذا شيء ستكون مسؤولًا عنه. سنغطّي بعض الحلول من الإضافات الّتي ستساعدك في الحماية في وقت لاحق في هذا المقال. في المقابل، على الرغم من أنّ Flywheel Hosting تكلّف أكثر قليلًا، إلاّ أنّها توفّر أيضًا ضمانًا خالٍ من الاختراق. وأخيرًا انقر على إدفع الآن (PAY NOW). بإتمامك لهذه الخطوة يصبح لديك حساب استضافة واسم نطاق خاص بك (إذا اخترت القيام بالأمرين معًا). الأمر مشوّق حقًا، أليس كذلك؟ يجب تذكّر شيء مهم للغاية: استخدم كلمة مرور مستحيلة التخمين. لست متأكّدًا من كيفية اختيار واحدة صعبة؟ ولكن جرِّب أداة إنشاء كلمات مرور مجانية من موقع Random.org. تغيير إعدادات خادم الأسماء ملاحظة: طبق هذه الخطوة في حال شراءك خدمات حجز النطاقات بشكل منفصل عن شراء الاستضافة مثل: NameCheap …الخ. للوهلة الأولى قد يبدو هذا المفهوم مربكًا بعض الشيء، ولكن لا تقلق - إنّه في الواقع سهلٌ للغاية. أحد الأشياء الّتي يتعيّن علينا القيام بها هو التأكّد من توجيه الزوار من النطاق الخاص بك إلى الخادم الخاص بك (حساب الاستضافة). يعتمد مكان إجراء هذه التغييرات على المكان الّذي سجّلت فيه اسم نطاقك. إذا سجّلت نطاقك في Siteground، فسيتمّ ذلك بشكلٍ أساسي كجزء من عملية الإعداد. ومع ذلك، إذا قمت بتسجيل اسم نطاقك في مكان ما مثل NameCheap أو GoDaddy، فستحتاج إلى تعيين خوادم الأسماء (Name Server) الخاصة بك. ستعطيك الصورة أدناه فكرة عمّا سيظهر لك ولنفترض على سبيل المثال أنك حجزت النطاق في شركة Namecheap. إليك الخطوات الّتي يجب عليك اتباعها داخل Namecheap: مرّر مؤشّر الفأرة فوق اسم تسجيل الدخول في الجزء العلوي الأيسر من الشاشة المجالات (Domains)، ثمّ انقر فوق لوحة التحكم (Dashboard). بعد ذلك، انقر فوق قائمة النطاقات (Domain List) في قائمة التنّقل اليمنى. في الصفحة التالية، انقر فوق اسم النطاق الّذي تحاول تغييره، ثمّ انقر فوق إدارة (Manage) الموجودة على الجانب الأيمن. ستجد اثنين من خوادم الأسماء المدرجة في النصف الأسفل من الصفحة. تأكّد من أنّ خوادم الأسماء على الشكل التالي (ns1.siteground ***. com و ns2.siteground ***. com) مدرجة في حقول المواقع الأساسية والثانوية كما هو موضّح في الصورة أعلاه. إذا كان الأمر كذلك، فأنت على استعداد للانتقال إلى الخطوة التالية. ملاحظة مهمة: إنّ إعداد خوادم الأسماء في البداية، سيستغرق من 24 إلى 48 ساعة حتى تطبق التغييرات بشكل فعلي عبر الإنترنت. يحدث هذا في بعض الأحيان بشكل أسرع بكثير، ولكن كقاعدة عامة، من الأفضل الانتظار ليوم كامل بعد إجراء هذه التغييرات. الخطوة الثانية: تثبيت ووردبريس بعد إعدادك لحساب الاستضافة وربط اسم النطاق الّذي اشتريته مع الخادم الّذي حجزته، فقد حان الوقت لبدء تثبيت ووردبريس. لماذا تختار ووردبريس؟ دعنا نوضّح هذه النقطة ووردبريس هو نظام إدارة المحتوى (Content Management System) الرائد في العالم وذلك لعدة أسباب أهمها: يستخدمه عدد كبير من المواقع الإلكترونية أكثر من أيّ نظام أخر. مجاني 100٪ ويقدّم مئات من القوالب والإضافات المجانية. عالي المرونة وقابل للتطوير، ممّا سيمكنك من إضافة جميع أنواع الوظائف الّتي ستحتاج لها في المستقبل. سهل الاستخدام والتعلّم، ولكنّه يتطلّب بعض الممارسة. لديه عدد مذهل من المصادر التعليمية المجانية والمدفوعة المتاحة. لذلك، وكما ترى، هناك الكثير من الأسباب العظيمة لجعل الووردبريس خيارك الأول كنظام إدارة محتوى لموقعك. إنّها المفضّلة بالنسبة لنا واعتقد أنّه ينبغي عليك تفضيلها أيضًا. بمجرّد تسجيل الدخول إلى SiteGround، سترى لوحة إدارة حسابك مثل الموجودة في الصورة أدناه: انقر فوق علامة التبويب حساباتي (My Accounts). ثمّ انقر على زر "Go to cPanel" الأحمر كما ترى أدناه: سينقلك هذا إلى لوحة cPanel الخاصة بك حيث يمكنك النقر على مثبّت ووردبريس التلقائي WordPress Auto Installer. ستنقلك بعد ذلك إلى صفحة التثبيت الأولية حيث يمكنك النقر على زر "تثبيت Install" ذات اللون الأزرق. يجب أن تظهر لك شاشة الإعداد إذ سندخل المعلومات التالية (راجع لقطة الشاشة أدناه إذا كنت مرتبكًا في أيّ من الخطوات الآتية): اختر بروتوكول: حدّد http://‎ (إذا اشتريت خطة GrowBig أو الأعلى منها، ستستفيد من طبقة المقابس الآمنة المجانية SSL، وعندها حدّد //:https بدلًا من ‎الخيار السابق). اختر النطاق: تأكّد من تحديد النطاق الخاص بك. تحديد المجلد: اترك هذا الحقل فارغًا. اسم الموقع: أدخل اسم الموقع الخاص بك. وصف الموقع: أدخل وصفًا لموقعك (يمكنك دائمًا تغيير هذا لاحقًا). تمكين Multisite (‏WPMU): إترك هذا الحقل فارغًا. اسم المدير: حدّد أي اسم مستخدم أو استخدم الاسم الّذي أُنشئ تلقائيًا. كلمة مرور المدير: أدخل كلمة المرور الّتي تريدها (يجب أن تكون كلمة المرور مستحيلة التخمين ومن الصعب جدًا تذكّرها). بريد الإلكتروني للمدير: أدخل عنوان بريدك الإلكتروني. اختر اللغة: اللغة الّتي سيظهر بها نظام الووردبريس (عادة اللغة الانجليزيّة ويمكنك اختيار اللغة العربية أو أي لغة أخرى). اختر الإضافات: ضعّ علامة صح بجانب هذا الخيار لتثبيت إضافة Loginizer والتي ستمكننا من تفعيل خاصية الحدّ من محاولات تسجيل الدخول الفاشلة والّتي يشنّها المخترقين في هجوم القوة الغاشمة Brute-force. اختر القالب: اترك هذه الخاصية بخيار "بلا" (None). الخيارات المتقدمة: عمومًا، لا داعي للقلق بشأن هذه الخيارات. تحقّق مرّةً أخرى من جميع المعلومات الخاصة بك، وتأكّد من كتابة تفاصيل تسجيل الدخول الخاصة بك، ثم انقر فوق "تثبيت". إذا تم كلّ شيءٍ على ما يرام (ويجب أن يتم ذلك إلا إذا أخطأت بخطوةٍ ما)، فسترى رسالةً تخبرك بأنّ كلّ شيءٍ جاهزٌ للعمل. قبل انتهاء خطوة هذا اليوم، دعنا نتأكّد من أنّ التثبيت يعمل بشكلٍ صحيح. للقيام بذلك، سنقوم بزيارة لوحة إدارة ووردبريس عن طريق الانتقال إلى العنوان التالي: /http://your-domain-name.com/wp-admin (استبدل العبارة "your-domain-name" بعنوان النطاق الخاص بك). يجب أن تبدو شاشة تسجيل الدخول تمامًا مثل الصورة أدناه. أدخل اسم المستخدم وكلمة المرور الخاصة بك (و الّتي أدخلتها في الخطوة السابقة)، ثمّ انقر على تسجيل الدخول. إذا انتهى بك الأمر في لوحة إدارة ووردبريس، فعلم أنّك نفّذت كلّ المراحل بشكل صحيح. وإذا وصلت إلى هذا الحد (هذا هو الجزء الأصعب)، دعنا نحتفل بإنجاز هذه الخطوة بنجاح ولنأخذ استراحة قصيرة من بناء موقعك. تهانينا! لقد اخترت اسم نطاق واشتريته وأعددت الاستضافة وثبّت ووردبريس أيضًا. إذا كنت مبتدئًا مثلي، فهذا إنجاز عظيم، أحسنت صنعًا! الخطوة الثالثة: ضبط إعدادات الووردبريس مرحى، لقد عدت من أجل المزيد! وهذا يعني أنّ لديّ أخبار سارّة لك: لم تشعر بالخوف في الخطوة الأولى أو الثانية، وهذه هي الخطوات الّتي يتعثّر فيها معظم الأشخاص عند إعداد الووردبريس. ما تبقّى من هذه العملية هو الأكثر أهمّيةً، وسترى نتائج فورية من مجهودك كلمّا تقدّمت. إذا سجّلت الدخول مسبقًا إلى لوحة تحكم المدير في الووردبريس، فأنت في المكان الصحيح. أمّا إن لم تسجّل، فتوجّه مباشرة إلى صفحة تسجيل الدخول وأدخل اسم المستخدم وكلمة المرور. ستجد صفحة تسجيل الدخول على العنوان التالي: http://yourdomainname.com/wp-admin‎ (أي بالنسبة لأكاديمية حسوب، سيكون العنوان https://academy.hsoub.com) أوّل شيء ستراه هو لوحة تحكّم المدير ووردبريس. من الممكن أن يبدو الأمر مزعجًا في البداية، لكن لا تقلق. سنتعامل مع كلّ قسم حسب حاجتنا، وسيكون هناك الكثير من الأشياء الّتي يمكنك تجاهلها في الوقت الحالي - إنّها ليست ضرورية لتجهيز موقعك ليكون متاح للعملاء. وهذا هو هدفك الأساسي، أليس كذلك؟ بالنسبة للخطوة الثالثة، سنعمل على تحقيق الأهداف التالية: ضبط إعدادات ووردبريس. تثبيت الإضافات الأساسية الّتي ستحتاجها. هذا كلّ ما في الأمر! سننفّذ خطوتين فقط لهذا اليوم وبعد ذلك يمكنك أن تأخذ استراحة قصيرة أخرى. ستلاحظ أنّنا سنجمع المهام معًا لجعل العملية أكثر كفاءة كلّما كان ذلك ممكنًا. على سبيل المثال، سنثبّت جميع الإضافات الأساسية في نفس الوقت، وسننشئ جميع الصفحات الأوّلية في نفس الوقت كذلك، وبذلك سنوفّر على أنفسنا الكثير من التنقّلات بين الصفحات ونقرات الفأرة الإضافية. (بالإضافة إلى أنه سيسهل تذكّر ما تفعله ونحته في ذاكرتك عند قيامك بذلك عدّة مرات متتالية!) حسنًا، وكي لا نطيل في المقدّمات، دعنا نبدأ في العمل. ضبط إعدادات ووردبريس الأساسية أوّل ما يجب علينا عمله هو تهيئة بعض إعدادات ووردبريس الأساسية، وسوف تحتاج لإنجاز هذه المهمة مرّةَ واحدة فقط، وفي القائمة الجانبية سترى خيار الإعدادات في الأسفل صفحة المدير، تمامًا كما في الصورة أدناه. فيما يلي الخطوات الثلاث الّتي تريد إكمالها (الآن) من تلك القائمة: تغيير العناوين الثابتة للمقالات (Permalinks) أوّلاً، سنغيّر بنية العناوين الثابتة إلى اسم المنشور (Post name). للقيام بذلك، حدّد "اسم المنشور" واحفظ التغييرات. ما يفعله هذا الخيار هو تغيير بنية عنوان المنشورات على موقعك لشكلٍ أكثر ملاءمةً للقارئ والمستخدم ومحرّكات البحث على حدٍ سواء. فعلى سبيل المثال: بدلاً من منشور مدونة له عنوان يشبه هذا:www.sarasoueidan.com/?p=123‎، سيصبح عنوان المنشور هكذا: www.sarasoueidan.com/your-post-name أفضل بكثير، أليس كذلك؟ الإعدادات العامة بعد ذلك، في علامة التبويب "الإعدادات العامة"، ستحتاج إلى القيام بما يلي: تأكّد من صحّة عنوان موقعك. (نستخدم إليزابيث نيومان | مساعدة عن بعد). عيّن المنطقة الزمنية المطابقة لموقعك. احفظ التغييرات. يمكنك ترك كلّ شيء آخر باعداداته الافتراضية ما لم يكن هناك شيء تريد تغييره على وجه التحديد (مثل تنسيق التاريخ أو أي شيء أخر). كما في الصورة أدناه: إعدادات القراءة تعدّ إعدادات القراءة اختيارية إلى حدٍّ كبير وستتوقّف هذه الإعدادات على تفضيلاتك الشخصية وكيف تريد أن يظهر موقعك. بالنسبة لتفضيلاتي الشخصية سأقوم بتغيير إعدادين: غيّر عدد المنشورات بالصفحة "Blog pages to show at most" إلى خمس منشورات. غيّر "لكل مقالة في الواجهة، اعرض For each article in a feed, show" إلى الملخّص (summary). مرّةً أخرى، يعدّ هذان الخياران أكثر تفضيلًا شخصيًا من أيّ خيارٍ آخر. إنّ عرض خمس منشورات فقط في الصفحة يعني أنّه في الجزء السفلي من المنشور الخامس، سيتعيّن على القارئ النقر على الصفحة التالية لمواصلة الاطّلاع على المنشورات. فنحن نحاول بالأساس أن نسدي للقارئ خدمةً من خلال منعهم من التمرير للأسفل إلى اللانهاية وتفعيل خاصية التّصفيح بدلًا من ذلك (من الممكن أن يكون في بعض الحالات خاصية التمرير للأسفل أفضل من خاصية التصفيح لمساعدتك في اتخاذ القرار يمكنك الاطلاع على هذا المقال). يؤدّي عرض ملخّص المنشور مهمّةً مماثلةً. إذا كانت منشوراتك طويلة، فيمكن لخمس منشورات فقط خلق الكثير من التمرير. فعند عرض ملخّص المنشور فقط سيسهل على القارئ النقر على "واصل القراءة Continue Reading". وكلمّا كان الأمر أسهل بالنسبة للقارئ، زاد احتمال عودتهم و/أو تمسّكهم بالموقع للاطّلاع عليه في وقت لاحق. حاليًا، هذه هي التغييرات الوحيدة الّتي سنجريها في إعداداتك. من الواضح أنّ هناك الكثير من الخيارات، لكن لا ينبغي لأيّ منهم أن يعيق إطلاق موقعك (فهذا هو هدفنا الأساسي، أتذكر ذلك؟). ملاحظة: بمجرّد أن يكون موقعك جاهزًا، يمكنك دائمًا الرجوع إليه وتعديل بعض إعداداته. لكنّ تذكر أن الحصول على عميلك الأول هو الأكثر أهمّيةً في الوقت الحالي. ملاحظة أخرى يجب عليك ازالة علامة الصح بجانب الخيار "discourage search engines from indexing this site " وسبب تفعيل هذه الخاصية هو أن الموقع تجريبي ولا أريد من محركات البحث فهرسته. تثبيت الإضافات الأساسية يوجد أكثر من 42,000 إضافة في مجلّد إضافات الووردبريس بالإضافة إلى الآلاف من الإضافات الأخرى المدفوعة والّتي يقدمها المطورون المستقلون. كما تلاحظ أنه من السهل أن يتشتّت انتباهك عندما يكون هناك الكثير من الخيارات المتاحة لك. ما نوصي به هو تثبيت عدد قليل من الإضافات الضرورية الّتي يجب أن تتواجد كبداية، ثمّ احتجت إلى بعض الوظائف الخاصّة الأخرى فيمكنك دائمًا تثبيت المزيد من الإضافات. ملاحظة: ستلاحظ بعض الخيارات الإضافية والإضافات المثبتة على الموقع التجريبي المعروض في الصور ولكن لا تقلق إن كانت شاشتك تبدو مختلفة بعض الشيء فذلك لن يؤثر على سير العملية. إليك الإضافات المجانية الأربعة الّتي سنثبتها: Antispam Bee- ستساعدك هذه الإضافة في تقليل عدد التعليقات العشوائية بشكل كبير، ممّا يوفّر لك ساعات من النقر على التعليقات ونقلها إلى مجلّد سلّة المهملات. Limit Login Attempts - تحجب هذه الإضافة تلقائيًّا أيّ شخص يحاول تسجيل الدخول إلى موقع ووردبريس الخاص بك باستخدام اسم مستخدم أو كلمة مرور غير صحيحة بعد عدد محدّد مسبقًا من المحاولات الفاشلة (تمّ تثبيته أثناء الإعداد الأولي لبرنامج ووردبريس). Yoast SEO - ثبّت هذه الإضافة لتحسين أرشفة موقعك في محركات البحث، ولكن لا تهدر الكثير من الوقت معها حاليًا. Ninja Forms - تمكننا هذه الإضافة من إنشاء نماذج (forms) مجانية وسهلة الاستخدام (مثل نموذج إتصل بنا). هذا كلّ ما في الأمر. يمكنك إضافة المزيد من الإضافات في وقتٍ لاحق إذا كنت فعلًا بحاجة لذلك، ولكن في الوقت الحالي، لنكتفي بهذه الإضافات الأربعة. كلّما زاد عدد الإضافات المتوفّرة لديك، زادت فرص اختراق موقعك وضعف مستوى الأمان فيه، وقد تبطئ موقعك وخاصة إذا كنت لا تحرص على تحديث هذه الإضافات. للبدء في تثبيت الإضافات الأربعة المذكورة أعلاه، ما عليك سوى استعراض خيار الإضافات في القائمة الجانبية والضغط على إضافة جديد. قد لا تكون الإضافات في الجزء العلوي من الصفحة هي نفسها. لا تقلق، يمكنك أيضًا البحث عنها. بمجرّد رؤية الإضافة الّذي تبحث عنها، ما عليك سوى النقر على "تثبيت الآن"، ثمّ عند ظهور زر التفعيل، انقر على تفعيل الإضافة (Activate Plugin). سيؤدّي ذلك إلى إعادة توجيهك إلى صفحة الإضافة الرئيسية يمكنك بعدها استعراض خيار الإضافات في القائمة الجانبية والضغط على إضافة جديد وتكرار نفس عملية التثبيت للإضافات المتبقّية. قد توجّهك كلٌّ من الإضافاتين Yoast و Ninja Forms إلى صفحة جديدة - لا تقلق، فقط عُد إلى الإضافات ومن ثمّ إضافة جديدة حتى تنتهي من تثبيت كلّ الإضافات. بمجرّد تثبيت جميع الإضافات الأربعة، يجب أن تعرضهم الصفحة كإضافات مفعّلة. من المفترض أن تظهر لديك جميع الإضافات المثبّتة وطالما تمّ تنشيطها، فأنت على استعداد للانتقال إلى الخطوة التالية. تهيئة الإضافات يمكن ترك معظم الإضافات الّتي ثبّتها بإعداداتها الافتراضية، ولكن هناك بعض الأشياء القليلة الّتي نريد تغييرها. Yoast SEO ستعتمد آلية عمل هذه الإعدادات على نوع القالب الّذي تستخدمه، وستعتمد كذلك على كيفية إعدادك لصفحاتك الفردية. الصفحة الرئيسية الّتي نستخدمها لهذا الموقع ثابتة (أي تعرض دائمًا نفس المحتوى). من الممكن أن تفكّر في استخدام صفحة رئيسية مخصّصة لموقعك أو تُقرّر استخدام تنسيق شبيه بالمدوّنات. ولكن لا تقضي الكثير من الوقت في التفكير بشأن هذا حاليًا. فقط تذكّر أنّه في النهاية، ستحتاج إلى العودة وإعادة النظر في كيفية عمل هذه الإضافة. ألق نظرة على الصور أدناه للحصول على نظرة عامة حول كيفية ضبط إعدادات إضافة Yoast SEO. نظرًا لتحديث إضافة Yoast SEO بشكلٍ متكرّر، فإليك ما نوصي به: ثبّت جميع الإضافات واظبط الإعدادات الأساسية الموضّحة أدناه. بعد ذلك، بمجرّد استكمال بقيّة خطوات بناء موقعك والبدء في الترويج للعملاء، انتقل إلى موقع الإضافة الرسمي وابدأ في قراءة المزيد حول جميع المميزات المختلفة الّتي توفّرها هذه الإضافة. Ninja Forms تعدّ هذه الإضافةً رائعة لإنشاء النماذج في موقعك. الإصدار الأساسي مجاني، لكنّه قابل للتوسيع أيضًا في حالة الرغبة في إضافة ميزات مستقبلًا. ملاحظة: يحتاج استخدام هذه الإضافة إلى مقال تفصيلي بحد ذاته، ولكن لا تخف، تحتوي إضافة Ninja Forms على بعض المصادر التعليمية الممتازة لمساعدتك في التهيئة الأولية. يجب ألا يستغرق إنشاء نموذج إتصال أوّلي أكثر من بضع دقائق. على الرغم من كون الإضافةً ممتازة، فقد تجد أنّ القالب الخاص بك يأتي مع إضافة مُعدّة مسبقًا والّتي تؤدي نفس الغرض (لك حرية الاختيار في ذلك). مع انتهاء الخطوة الثالثة، تكون قد أكملت بنجاح بعض من أهم المهام إلى الآن. إنّ قضاء بضع دقائق في إعداد ووردبريس بشكل صحيح وتثبيت بعض الإضافات المهمّة غالبًا ما يكون خطوة يغفلها أصحاب المشاريع الجدد. من الآن فصاعدًا، ستصبح الأمور أكثر تشويقًا وإثارةً للاهتمام. الخطوة الرابعة: إنشاء صفحات ووردبريس خطوة هذا اليوم سهلةٌ للغاية … وتتضمّن بعض الكتابة في الواقع. سنكمل المهمّتين التاليتين: إنشاء هيكل صفحتك. إضافة وإعداد المحتوى الخاص بك. قبل البدء في إنشاء الصفحات، إليك أهم الصفحات الّتي سننشئها في موقعنا: صفحة "من نحن" لمشاركة القليل من المعلومات الشخصية، مثل المنطقة الّتي تعيش فيها، ومضمون مدوّنتك ومن هي الفئة المستهدفة. صفحة "وظّفني" لعرض أعمالك وشرح ما الّذي تفعله ولمن تفعله، وإضافة رابط إلى صفحة "اتصل بنا". صفحة الاتصال لتقديم معلومات الاتصال الخاصة بك - بريدك الإلكتروني ورقم هاتف جوجل (يتيح هذه الخدمة للمستخدمين إرسال رسائل نصية مجانية وتخصيص بريد صوتي وقراءة نص رسالة البريد الصوتي والكثير من الميزات الأخرى) بالإضافة إلى نموذج الإتصال. صفحة الأسئلة الشائعة أو الموارد يمكنك الاستغناء عن هذه الصفحة في البداية، ولكن احتفظ بها مخططاتك المستقبلية. من الجيّد أن تبدأ بشيء مماثل لهذه الصفحات. وتذكّر أنّه يمكنك دائمًا إضافة صفحات جديدة حتى بعد إطلاق موقعك (لأن الهدف الرئيسي الآن هو تسريع إطلاق موقعك). إضافة صفحات جديدة إنّ إنشاء صفحات في ووردبريس سهلٌ للغاية. وللقيام من القائمة الجانبية حرّك مؤشّر الفأرة فوق "الصفحات"، ثمّ انقر على "إضافة جديد". أدخل العنوان المناسب للصفحة، ثمّ انقر على "حفظ المسودّة". بمجرّد حفظ المسودّة الخاصة بك، سترى خيارًا في الجزء العلوي من الصفحة بـ "إضافة جديد". يمكنك النقر على هذا الخيار وتكرار العملية حتى تتم إضافة صفحاتك. بمجرّد الانتهاء من إنشاء الصفحات المطلوبة، يمكنك النقر على الصفحات (Pages) ومن ثُمّ جميع الصفحات (All Pages)، وستشاهد شيئًا مشابهًا لهذا: قبل أن نبدأ في إضافة المحتوى الخاص بك، دعنا نمرّر زر الفأرة فوق صفحة مثال على صفحة (Sample Page) الّتي تراها في الأسفل وانقر على "سلة المهملات" - لأننا لن نحتاج إليها. عادةً ما يُعثر على "مثال على صفحة Sample Page" و"مثال على منشور Sample Post" عند التثبيت الأولي لنظام ووردبريس، لكنّك لن تحتاج إليهم بمجرّد معرفتك لكيفية إنشائها. مع إنشاء جميع صفحاتك الأساسية، حان الوقت لبدء إضافة المحتوى الخاص بك. إضافة محتوى إلى صفحاتك إنّ إضافة محتوى إلى صفحات الووردبريس الخاصة بك هي أيضًا عملية بسيطة في معظم مراحلها. سنعمل على صفحة واحدة هنا. ثمّ كلّ ما عليك فعله هو تكرار العملية لصفحاتك الأخرى. من نافذة جميع الصفحات (All Pages) الّتي نراها أعلاه، مرّر مؤشّر الفأرة فوق الصفحة الّتي تريد إضافة محتوى إليها واختر تعديل (Edit). سيعيدنا هذا إلى محرّر صفحتنا. يجد معظم الناس أنّ محرّر ووردبريس سهل الاستخدام. إذا كنت تكتب المحتوى مباشرةً في المحرّر، فيمكنك استخدام المحرّر المرئي (Visual Editor) -انظر أدناه- وهو الوضع الإفتراضي للكتابة، ويمكنك هذا المحرّر من نسخ النصّ من برنامج آخر ولصقه مباشرة في هذه الصفحة، وكما يمكنك في أي وقت التبديل إلى محرّر الشيفرات البرمجية (Code Editor) والعودة مرّةً أخرى إلى المحرّر المرئي. إن محرر الشيفرات البرمجية هو المكان الّذي تُكتب فيه أي شيفرة HTML، مثل جلب الصور من موقع Compfight. بمجرّد إدخالك للنص وحفظ مسودّتك، يمكنك المضي قدمًا ومعاينة صفحتك بالنقر فوق زرّ معاينة (Preview، بجوار زرّ "حفظ المسودة"). يمكنك أن ترى من الصورة أدناه أنّ نصّنا أُدخل، لكن ألن يبدو أجمل إذا أضفنا له صورة؟ هيا بنا لنفعل ذلك! يجعل الووردبريس عملية إضافة الصور أمرًا غايةً في السهولة. لدينا صورة بحجم 714×1000 بكسل. إذا كانت صورتك أكبر، فهذه ليست مشكلة. فقط تذكّر أنّه بشكلٍ عام، كلّما كان حجم الملفّ أصغر، كان ذلك أفضل (بالنسبة لسعة ذاكرة المخدم المحجوز وسرعة التحميل الموقع). لإضافة الصورة إلى الصفحة. ضع مؤشّر الفأرة حيث ستضع الصورة. ثم اضغط على زر إضافة صورة (Add Image) كما في الشكل التالي. سيظهر لك خيارات متنوعة لرفع الصور في حالتنا سنرفع صورة إذًا سنضغط على رفع (Upload). اختر الصورة المناسبة من حاسوبك الخاص ثم اضغط على فتح (Open). يمكنك التحكم في حجم الصورة أو طريقة عرضها من خلال القائمة الجانبية أو من خلال السحب للجانب الأيمن أو الأسفل للصورة. ثم احفظ المسودّة وعاين الصفحة مرّةً أخرى. يجب أن تبدو مثل الصورة أدناه. إذا كنت راضيًا عن كيفية ظهور الأشياء في هذه المرحلة، فستكون الصفحة جاهزة ويمكنك نشرها. ستكرّر العملية التالية لكلّ صفحة من صفحاتك الأربع: أضف المحتوى الخاص بك. احفظ مسودّتك. عاين. انشر. بحلول هذه المرحلة يجب أن تكون أضفت صفحات "من أنا" و "وظفني" و "اتصل بي". فإذا وصلت إلى هذا الحدّ واستمررت بفكرة أن يكون الموقع جيدًا بدلًا من أن يكون مثاليًا، فستكون قد أجريت خطوات مهمّة ويجب أن تفخر بنفسك! وإن بناء كلّ ذلك بنفسك، يعطيك شعورًا رائعًا، أليس كذلك؟ الخطوة الخامسة: فهم القوائم وعناصر واجهة المستخدم (Widgets) مرحبًا بك في الخطوة الخامسة. أنت تبلي بلاءً حسنًا! سينصبّ تركيزنا في هذه الخطوة على إنشاء قوائم التنقّل وعناصر واجهة المستخدم. قوائم التنقّل هي الروابط الّتي تساعد الزوار في العثور على ما يبحثون عنه داخل موقعك. إنّها خطوةٌ مهمّة يجب تذكّرها أثناء قيامنا بهذه العملية، وهذا ينطبق على تسمية صفحاتك أيضًا. لماذا؟ لا تريد أن يتساءل الزوار أو العملاء المحتملين عن كيفية العثور على المعلومات الّتي يبحثون عنها. لذلك يجب أن تعطي الصفحات أسماء تدل على محتواها مثل صفحة "اتصل بي"، أو "وظّفني"، أو صفحة الأسعار، أو الأسئلة الشائعة …إلخ. بأسمائها الحقيقية الّتي تعبّر عنها. يجب أن تكون روابط التنقّل لديك بسيطة ومن السهل إيجادها كما يجب أن تكون ملائمة مع الموقع أيضًا. إنشاء القائمة الأولى الخاصة بك هل أنت على استعداد لمحاولة بناء القائمة الأولى الخاصة بك؟ من القائمة الجانبية توجّه إلى المظهر (Appearance) ومن ثمّ القوائم (Menus) ودعنا نبدأ. أدخل اسم القائمة سأقترح عليك اسم قائمة أساسية (Primary Menu) على سبيل المثال. انقر على إنشاء قائمة (Create Menu). بعد ذلك، انقر على تبويب إظهار الكل (View All) ضمن الصفحات (Pages) وحدّد كلّ الصفحات الّتي تريد تضمينها في القائمة. انقر على إضافة إلى القائمة (Add To Menu). سيؤدّي ذلك إلى نقل العناصر ذات علامات الاختيار إلى عمود بنية القائمة. حدّد التنقل الأساسي (Primary Navigation) ضمن إعدادات القائمة (Menu Settings). انقر فوق حفظ القائمة (Save Menu). كان الأمر سهلًا للغاية، أليس كذلك؟ بضع نقاط مهمّة حول القوائم ليس من الضروري إدراج رابط للصفحة الرئيسية ضمن القائمة. مع حفظ شريط التنّقل الأساسي الخاص بك، دعنا نتكلّم عن بعض الأمور المهمّة حول قوائم التنّقل. كما ترى، لقد أضفنا رابطًا للصفحة الرئيسية، وهذا اختياري تمامًا وفي معظم الأوقات، بالنسبة لي فأنا لا أضمِّن رابطًا للصفحة الرئيسية - لأن الشعار الخاص بالموقع ينجز الأمر نفسه وسينقر عليه معظم الناس غريزيًا. يمكن إعادة تنظيم القوائم. ستلاحظ أنّ قائمتنا الآن مرتبّة حسب الترتيب الأبجدي، ولكنّ ليس من الضروري أن تبقى على هذا النحو. كلّ ما عليك فعله لإعادة ترتيبها هو سحب القائمة وإفلاتها في أيّ ترتيب تفضّله، ثمّ انقر على حفظ. يمكنك بناء قوائم منسدلة. على الرغم من أنّنا لا نملك الكثير من الصفحات المختلفة لهذا الموقع، فإن كنت تقدّم مجموعة متنوعة من الخدمات المختلفة، يمكنك تجميعها داخل علامة تبويب خدمات واحدة (على سبيل المثال، هناك قائمة منسدلة ضمن "وظّفني" للكتابة، المساعدة عن بعد، التدريب، وما إلى ذلك). إنشاء قوائم منسدلة لإنشاء قائمة منسدلة، اتبع الخطوات التالية: أنشئ رابط وسمّه خدمات (Services) وذلك في الروابط المخصصّة (Custom Links) وأدخل "#" في حقل الرابط وخدمات (Services) في حقل نص الرابط (Link Text). انظر للصورة أدناه. انقر على زر أضف إلى القائمة (Add to Menu). أخيرًا، اسحب عناصر قائمة الخدمات كلًّا على حدة أسفل علامة تبويب الخدمات. وعندما توضع بشكل صحيح، فستظهر أسفل القائمة ومنحازة إلى اليمين قليلًا. فقط تذكر أن تحفظ التغييرات بعد إسقاط هذه العناصر في المكان المناسب. يمكنك الحصول على قوائم متعدّدة مع نموّ موقعك، فقد تحتاج إلى أكثر من قائمة للتنقّل. مثلًا واحدة بالقرب من ترويسة الموقع وأخرى بالشريط الجانبي وقائمة أخرى بذيل الصفحة. يمكن أن تحتوي كلّ القوائم على نفس الروابط أو روابط مختلفة أو بإمكانك وضع أي روابط تريدها. ما عليك سوى تكرار نفس العملية على النحو الوارد أعلاه، بدءًا من "إنشاء قائمة جديدة". ولكن تذكّر بأن تعطي كلّ قائمة باسم مختلف ومعبّر وعدم تعيين أكثر من قائمة كشريط التنّقل الأساسي (Primary Navigation). إعداد عناصر واجهة المستخدم (Widgets) من القائمة الجانبية اختر المظهر (Appearance) ومن ثم اختر الودجات أو ما يسمى عناصر واجهة المستخدم (Widgets). ربّما ستبدو شاشتك هكذا: على الرغم من أنّك قد لا تحتاج إلى استخدام العديد من هذه العناصر عند تشغيل موقعك لأوّل مرّة، إلّا أنّنا سنغطّي الأساسيات على أيّ حال. لأنّه، في مرحلة ما في المستقبل، ستحتاج إلى إضافة بعض العناصر إلى الشريط الجانبي أو إلى ذيل الصفحة. إن أوّل شيء سنفعله هو إزالة العناصر الافتراضية من الشريط الجانبي. كلّ ماعليك فعله هو سحبها وإسقاطها إلى الجانب. يجب أن يكون الشريط الجانبي الأيسر فارغًا الآن. لن نضيف أيّ عنصر في الوقت الحالي، ولكن بينما أنت هنا، فقد حان الوقت للتعرّف على طريقة عملها. توفّر عناصر واجهة المستخدم معلومات أو وظائف إضافية. يمكن إضافة عناصر إلى مجموعة متنوّعة من الأجزاء داخل موقعك بما في ذلك: القوائم الجانبية ذيل الصفحة الترويسات اليمنية تعتمد الأجزاء الّتي بإمكانك إضافة عناصر لها بالقالب الّذي تستخدمه. ليس لكل القوالب نفس الأجزاء المتاحة لوضع المحتوى داخلها. على سبيل المثال، يمكن أن تجد أنّ القالب الخاص بك لا يحتوي على مساحات لعناصر في ذيل الصفحة أو في الترويسة اليمنية. تشمل عناصر واجهة المستخدم الأكثر شيوعًا الخصائص التالية: عرض قائمة الفئات عرض قائمة المنشورات الحديثة أيقونات التواصل الاجتماعي محرّك البحث مستجدّات تويتر مربعات نص بسيطة تحذير: يمكن أن تكون عملية إضافة عناصر منحدرًا زلقًا - لمجرّد أنّه يمكنك إضافة محتوى إلى القائمة الجانبية الخاصة بك، هذا لا يعني أنّه يجب عليك إضافة محتوى فورًا. بل يجب عليك التفكير جيدًا في نوع العناصر (إن وجدت) الّتي تضعها في هذه القائمة. اقض بضع دقائق وأنت تسحب العناصر إلى واحد من القوائم الجانبية فقط لمعرفة كيف تجري الأمور. بمجرّد الانتهاء من ذلك، امسح كلّ واحدة منها. الخطوة السادسة: اختيار قالب ووردبريس تهانينا لقد وصلت للخطوة السادسة. أنت على وشك الانتهاء! سينصبّ تركيزنا الآن على تثبيت القالب الخاص بك وإعداد حسابات وسائل التواصل الاجتماعية. نظرًا لوجود العديد من الخيارات المتاحة للاختيار بينها عندما يتعلّق الأمر بالقوالب، فستحتاج إلى إجراء بعض التجارب بنفسك في هذه الحالة. لدينا بعض التوصيات القوية لخيارات القالب. في القسم الأخير، سوف نعرض أيضًا مثالًا عن كيفية التعامل مع عملية تصميم/إعادة تصميم موقع الويب للأشخاص الذين لديهم مواقع مسبقًا. رغم أنّ هذا قد يكون مشوقًا، ولكن من اللازم تحذيرك: الخطوة السادسة هي التي ينشغل فيه الناس بكثرة. فمن الممكن أن يمتدّ إطلاق موقع ويب من كونه مشروعًا لمدّة سبعة أيّام إلى مشروع يستمرّ لمدّة شهر أو ستّة أشهر. وقد سبق لنا التكلّم عن المعيق في هذه الحالة وهو الكمالية. انتبه ولا تدع هذا يحدث لك! إليك التحدي الّذي بدأنا به (إذا نسيت) وهو إنشاء موقع إلكتروني في سبعة أيّام أو أقلّ. مرّةً أخرى، هذا يعني أنّه سيتعيّن عليك التخلي عن فكرة بناء موقع مثالي من محاولتك الأولى وأدرك أنّ إنجاز الأمور وإنهاؤها أفضل دائمًا من الكمال وذلك لأنّك لن تستطيع الوصول إلى الكمال مهما حاولت. وحتى إذا كنت تعتقد أنّ موقعك مثالي، فلا بدّ لك من إجراء تغييرات في المستقبل. إنّ جمال ووردبريس بأنّه يمكّنك من إنشاء موقع بسيط. وإطلاقه في هذا الأسبوع والاستمرار في إجراء تحسينات صغيرة على مدار الـ 12 شهرًا القادمة. فقط تخيّل كم سيكون رائعًا إذا حصلت على موقعك مباشرة في سبعة أيامٍ، ثمّ التزم بإجراء تحسينين صغيرين في كلّ الأسبوع لمدة 12 شهرًا. لدي شعور بأنّه سيكون موقعًا أسطوريًا في النهاية. أعلم أنّنا نبسط الأمور كثيرًا، ولكنّنا نسمع كلّ يوم كيف استغرق إطلاق موقع ويب وقتًا أطول ممّا كان متوقّعًا وكيف أنّ استثمار ثلاثة أو ستّة أشهر لبناء موقع حرم صاحبه من إنشاء مدونة أو أعمال تجارية ناجحة عبر الإنترنت. لذلك لا تدع ذلك يحصل لك. لقد حذّرتك! كيفية اتخاذ القرار بشأن قالب الووردبريس أوّل شيء سنفعله اليوم هو اختيار القالب. واحدة من الأشياء العظيمة حول ووردبريس هي أنّ هناك حرفيًا الآلاف من القوالب المجانية. ومع العديد من الخيارات، كيف سيمكنك تحديد أيّ قالب سيكون أكثر ملاءمةً لاحتياجاتك؟ إنّه ليس قرارًا سهلاً لاتخاذه (إنّه في الواقع قراري الأقلّ تفضيلًا!). ولكن لجعل الأمور أسهل بالنسبة لك، لدينا ثلاث توصيات قوية: Sydey من ATHEMES: هو قالب للأعمال مجانيّ ويتيح لك تشغيل موقعك الإلكتروني بسهولة نسبية، ولا يحتوي هذا القالب بالضرورة على جميع ميزات القوالب المدفوعة المدرجة أدناه، ولكن إذا كانت ميزانيتك محدودة، فهذا القالب رائع للبدء به. 2.Divi من Elegant Themes إذا كنت تستطيع تخصيص 90 دولارًا من ميزانيتك في السنة، فإنّ Divi من شركة Elegant Themes سيكون خيارًا رائعًا آخر للبدء. سيسمح لك هذا القالب بإنشاء تصاميم غير محدودة تقريبًا وكذلك إجراء تغييرات مستمرّة. Genesis من StudioPress: توصيتنا الثالثة والأخيرة هي تقريبا أي قالب من شركة StudioPress. على الرغم من أن هذه القوالب تستغرق وقتًا طويلًا في الإعداد، إلّا أن إطار العمل Genesis يوفّر الكثير من خيارات التصميم. كما أنّك تشتريه لمدى الحياة وليس باشتراك سنوي مثل Elegant Themes. يأتي كلّ قالب مع إرشادات التثبيت المحدّدة الخاصة به، ولكنّ العملية الأوّلية هي نفسها بشكل عام. لتثبيت قالب ووردبريس الخاص بك، اتبع الخطوات التالية: حمّل القالب على سطح المكتب الخاص بك (سيبدو كما يلي: themename.zip). في صفحة مدير ووردبريس توجّه إلى القائمة الجانبية ومن ثم إلى المظهر (Appearance) ومن ثمّ إلى القوالب (Themes). انقر على "قالب جديد" بالقرب من الزاوية اليسرى العليا. انقر على رفع قالب (Upload theme) بالقرب من الزاوية اليسرى العليا. عندما تنبثق نافذة تحديد الملف، حدّد ملف القالب الخاص بك وانقر فوق فتح (Open). انقر على "تثبيت الآن". انقر على "تنشيط" وستكون جاهزًا للمضي قدمًا! هذا كلّ ما في الأمر. تمّ تثبيت القالب الجديد الخاص بك الآن. من هنا يمكنك العمل على تخصيص القالب الخاص بك وفقًا للتعليمات المضمّنة مع القالب. هذا مجال يمكن أن تقدّم فيه القوالب المدفوعة ميزة حقيقية - فغالبًا ما تأتي هذه القوالب مع دعم وتعليمات رائعة تجعل من عملية الإعداد أسرع بكثير. مرّة أخرى، في نهاية هذا المقال، سنعرض مثالًا واقعيًا يوضّح كيفية استخدام قالب Divi لإعادة تصميم موقع الويب لأحد أعضاء مجتمعنا. بالنسبة لبقية اليوم، سنقضي بضع دقائق في إعداد أزرار المشاركة مع وسائل التواصل الاجتماعية. إضافة خاصية المشاركة على وسائل التواصل الاجتماعي كتابة المحتوى ليست سوى نصف المعركة. الترويج للمحتوى هو النصف الثاني (أو ربما حتى الثلثين). لذلك دعنا نجعل من السهل على شخص ما مشاركة المحتوى الخاص بك عندما يعجبه ما يقرأ. سنفعل ذلك عن طريق إضافة أزرار المشاركة على مواقع التواصل الاجتماعية إلى منشوراتك. هناك الكثير من الإضافات المتاحة لإنجاز هذه المهمة، ولكن بعد تجربة مجموعة واسعة من الخيارات، نميل إلى تفضيل إضافة تسمى Social Warfare. إنّها إضافة خفيفة وسريعة وتوفّر لك الكثير من الميزات، بالإضافة إلى أنّها تأتي بإصدار مجاني ومدفوع. إليك كيفية تثبيتها: من القائمة الجانبية توجّه إلى الإضافات (Plugins) ومن ثم توجّه إلى أضف جديد (Add New) حيث سترى صفحة مثل الصورة أدناه. في شريط البحث، يمكنك إدخال "Social Warfare" ويجب أن تظهر مثل هذه الصفحة. انقر فوق تثبيت كما فعلت مع الإضافات السابقة. ثم انقر على زرّ التنشيط (Activate)، ثمّ انتقل إلى "Social Warfare" في قائمة الجانبية. سترى لائحة بالشبكات الاجتماعية ضمن قسم العرض (Display). ما عليك سوى سحب وإفلات الشبكة الّتي تريدها في قسم النشط (Active). لإنهاء الأمور، سننتقل إلى الأسفل لضبط الإعدادات حسب رغبتنا. بالنسبة لموقعنا، قمنا بتعيين أزرار المشاركة بمواقع التواصل الاجتماعية لنعرضها في المنشورات فقط. بمجرّد حفظ الإعدادات الخاصة بك، توجّه إلى أيّ من منشوراتك الحالية، وستجد أيقونات المشاركة في أسفل كلّ منشور. إذا لم تجدها هناك، فحاول تحديث الصفحة. إذا قضيت بعض الوقت مع هذه الإضافة، ستكتشف بعض من الإعدادات الأخرى سهلة الضبط أيضًا، ولكن في الوقت الحالي، هذا هو كلّ ما ستحتاج إليه كبداية. نصيحة خبير: أشارك منشوراتي يدويًا على مواقع التواصل الاجتماعي باستخدام هذه الأزرار بعد نشر كلّ منشورٍ جديد في المدوّنة. ثمّ أحاول القيام بذلك مرّةً أخرى في الأيام القادمة (بالإضافة إلى مشاركتها عبر الخدمة الّتي تقدمها شركة Buffer وعبر البريد الإلكتروني لمشتركي النشرات الإخبارية الخاصّة بي). لقد قطعت اليوم شوطين مهمّين وبسرعة كبيرة: أولًا ثبّت قالب جديد على موقعك وثانيًا أضفت أزرار المشاركة في مواقع التواصل الاجتماعية إلى منشوراتك. لم يكن ذلك صعبًا للغاية، أليس كذلك؟ الخطوة السابعة: مراجعة نهائية قبل إطلاق الموقع لقد وصلت إلى الخطوة السابعة، وهذا أمرٌ رائع! في هذه الخطوة، ستطلق موقعك بشكلٍ كليّ ويمكنك البدء في إضافة المحتوى للموقع. قبل النقر على نشر، دعنا نعرض عليك شيئين: أوّلاً، حضّر قائمة بكلّ ما يجب أن يكون داخل موقعك قبل إطلاقه. ثانيًا، حضّر قائمة أخرى بكل الاعتبارات وشروط التصميم، أو الأشياء الّتي يجب أن تفكّر فيها وأنت تخصّص موقعك. القائمة الّتي لابدّ منها تذكّر، أنت تريد إطلاق منتجٍ قابلٍ للتطبيق بأدنى حدٍّ ممكن. هدفك هو تحقيق ذلك، وليس البحث عن الكمال. على سبيل المثال، لاحظ أن هذا المقال ليس كاملًا تمامًا. هناك قائمة طويلة من الأشياء الّتي ربّما يجب تضمينها ضمن هذا المقال، ولكن من المقرّر أن يُنشر هذا المقال في أقلّ من 24 ساعة. هذا هو الموعد الّذي التزمنا بتطبيقه. ولكن ليست هناك أيّ مشكلة. لأنّنا سنسّحن المقال بما يلزمه بمرور الوقت. وبهذا سيستطيع القرّاء الأوائل لموقعنا من الاستفادة منه بأقرب وقت، وذلك أفضل بكثير من ألّا يكون موجودًا على الإطلاق إذا انتظرنا حتّى يصبح المقال مثاليًا. لذلك أخذنا الوقت الكافي (من وجهة نظرنا) لإطلاقه وسنعدّله ونحسّنه كلّ أسبوع كي يكون ملائمًا للجميع. دعني أخمّن، هذه هي المحادثة الّتي تجريها معي الآن في رأسك: "لكنّني لست مستعدًا تمامًا. لديّ بضعة أشياء أخرى أريد أن أفعلها. "أو" سأستغرق يومًا إضافيًا فقط لجعل الموقع يبدو بالشكل الصحيح". لا تفعل ذلك! اسمح لي بمشاركة بعض الصور معك والتي أنا متأكّد من أنّها ستوضّح وجهة نظري. لنسمّيها رحلة صغيرة في درب الذاكرة. هذا هو موقع Horkey HandBook الأصلي (الموقع الّذي ترجمت منه هذه المقالة): لطيف وبسيط، أليس كذلك؟ التصميم التجريدي ليس الأفضل، ولكن ليس الأسوأ أيضًا. هذا هو الموقع بعد أشهر قليلة من إطلاقه: وهكذا كان الموقع في أكتوبر 2014: أصبح الشعار أفضل بكثير، ولكنه لا يزال غير مناسب لأغراض موقعي وللجمهور خصوصًا. ولكن مهلًا، مرّة أخرى، أنا لست خائفًا من تجربة أشياء جديدة. عندما جاء عام 2016، أصبح الموقع أكثر جدّيةً في الترويج للدورات التدريبية وبناء قائمة بريدية: يمكنك أن تلاحظ أنّنا أضفنا المزيد من الألوان، وقد طوّرنا تناسق العناصر وقمنا بتحسينات كبيرة على الصور وذلك بفضل مايكي. شهد شهر يناير من عام 2017 إعادة تصميم كامل للموقع، وتحوّل كبير في العلامة التجارية كما ركزّ أكثر على توفير محتوى رائع: وكلّما طال أمد الموقع، عرفت ما كان من المفترض أن تكون عليه الأمور من الأوّل. وقد لا تكون آخر مرّة يُجدَّد فيها الموقع، هكذا هي الحياة. فهمتَ ما أريد قوله، أليس كذلك؟ لا يتعيّن على تصميم موقعك أن يكون مكتملًا بشكلٍ نهائي في اليوم السابع - إنّها عملية مستمرة. فيما يلي قائمة بالعناصر الّتي يجب عليك تفقدها قبل إطلاق موقعك وجعله متاح للزوار: 1. التنقّل داخل الموقع تأكّد من أنّ أزرار التنقّل بسيطة وسهلة الاستخدام ولا لبس فيها. يجب عليك أيضًا التأكّد من أنّ كلّ رابط تنقّل يؤدّي إلى الصفحة الصحيحة. إذا نقر شخص ما على صفحة "وظّفني" وظهرت له صفحة خطأ 404، فمن المحتمل أن تفقد عميلًا مهمًّا. سنعرض فيما يلي بعض الأمور الأخرى الّتي يجب التفكير فيها: إذا كان موقعك يتضمّن الكثير من التمرير للأسفل، فأضف أزرّار التنقّل إلى ذيل موقعك. هل يمكنك تضمين رابط "وظّفني" ضمن المحتوى الخاص بك؟ عند كتابتك لمنشور، حاول ربطه بالمنشورات الأخرى على موقعك. 2. إضافة الصفحات المهمة تأكّد من نشر جميع صفحاتك الأساسية. يجب على الأقلّ أن يشمل ذلك: صفحة 'من أنا' صفحة الخدمات صفحة الاتصال مع مرور الوقت، يمكنك التوسّع في هذه الصفحات. وذلك عبر تضمين صفحة للمصادر مثلًا، أو تقسيم صفحة خدماتك إلى عدة تصنيفات (باستخدام خدعة القوائم المنسدلة الّتي أخبرتك بها سابقًا في هذا المقال). وفي الوقت الحالي، جهّز هذه الصفحات الثلاث لنشرها واستمر بالمضي قُدمًا! 3. المحتوى يعدّ امتلاك محتوى على موقعك أكثر أهمّيةً من الحصول على موقع مثالي - خاصةً إذا كنت كاتبًا. على الرغم من أنّنا نتحدّث عن الاستمرار في إجراء تحسينات صغيرة على موقعك على المدى الطويل، فمن الأفضل أن تقضي بعض الوقت في إضافة محتوى الآن. ما نوصي به بهذا الخصوص هو كتابة ونشر 10-15 منشورات قبل أن تنفق ثانية واحدة على تعديل وتغيير إعدادات موقعك أو تصميمه. (ملاحظة: لا تحتاج إلى سوى 2-3 منشورات كي تطلق موقعك للجمهور. مثلًا يمكنك إرسال بريد إلكتروني إلى أصدقائك وعائلتك، والنشر على قنوات التواصل الاجتماعي، وما إلى ذلك). 4. معلومات الاتصال حاول أن تجعل العثور على تفاصيل الاتصال الخاصة بك والتواصل معك أمرًا سهلًا بالنسبة لزوارك. تذكرّ أنّ لكلّ شخصٍ وسيلة تواصل يرتاح لها. لقد طلب الناس توظيفي عبر نموذج الاتصال على موقعي الإلكتروني، وعبر فيسبوك، وعبر الرسائل النصية، وعبر الهاتف القديم الطراز أيضًا يجب أن تأخذ كلّ وسائل التواصل بعين الاعتبار. النقطة المهمّة هنا هي أن تجعل نفسك متاحًا - كلّما كان من الصعب على شخصٍ ما أن يتواصل معك، قلّ احتمال قيامه بذلك. نصيحة خبير: إذا اعتمدت على نموذج اتصال، فاختبره. عند تثبيت إضافة لإنشاء نموذج الإتصال لأوّل مرّة، تأكّد من أنّها تعمل بشكل صحيح. ثمّ، في كلّ مرّة يكون هناك تحديث لهذه الإضافة اختبره مرّة أخرى. 5. المشاركة بمواقع التواصل الاجتماعي سهّل على الأشخاص مشاركة المحتوى الخاص بك عبر الشبكات الاجتماعية. لا تعرف أبدًا متى سيصادف شخص ما المحتوى الّذي كتبته ويقرّر الاتصال بك. أحد أسباب قيامك بإضافة أزرار المشاركة مع مواقع التواصل الاجتماعية إلى منشورات المدونة فقط، هو أنّه عندما يزور شخصٌ ما موقعك ويرى روابط شبكاتك الاجتماعية بشكلٍ واضح، فما الرسالة الّتي تمرّرها له؟ "مهلًا، أعرف أنّك وصلت إلى هنا، ولكن اترك موقعي وتواصل معي على مواقع التواصل الاجتماعي." هذا صحيح، أنت تشجّعهم على مغادرة موقع الويب الخاص بك - لزيارة الهاوية المعروفة أكثر باسم فايسبوك (أو تويتر وما إلى ذلك). بدلًا من ذلك يجب عليك تشجعيهم لزيارة صفحة "وظّفني" اعتبارات مهمة من أجل التصميم نظرًا لأنّك تستعدّ لإطلاق موقعك، فمن المحتمل أن تكون متحمّسًا للغاية (وربما تكون متوتّرًا، لكن هذا شيء جيد). تريد إيجاد طريقة لوضع طابعك الشخصي على الأشياء - لإظهار شخصيتك وإعلام الناس بما أنت عليه. وليس هناك شيء خاطئ في ذلك بشكلٍ أساسي. المشكلة هي أنّ موقع الويب الخاص بك ليس لك. إنّه لزوارك وعملائك المحتملين. وقد تقول في نفسك أنا لست مصمّم. لم سأهتم بشكل الموقع ولكن في الحقيقة يجب عليك الاهتمام بالتصميم الجيّد. ولكي نكون صادقين بنسبة 100٪ فهناك الكثير من المواقع الإلكترونية للكتّاب الّتي تحتوي على بعض عناصر التصميم المرعبة. إليك بعض الأشياء الّتي يجب التفكير فيها أثناء تصميم موقعك: 1. الألوان إن كانت ألوان نابضة بالحياة وجذّابة بصريا فذلك جيّدٌ جدًّا. ولكن انتبه فالألوان الشاذة ليست كذلك. استخدم الألوان لتمييز الأشياء المهمة، ولجعل تجربة زيارة موقعك تجربةً جذّابة بصريًا. لاحظ في موقع Horkey HandBook أنه اعتاد على استخدام الكثير من اللون الوردي (انتقلنا منذ ذلك الحين إلى مجموعة الألوان رمادي / سماوي / خليط من اللون الوردي). قد لا تحبّ اللون الوردي، ولكن هناك فرق كبير بين الطريقة الّتي يبدو بها الموقع حاليًا وشيء من هذا القبيل: وظننت أنّه لا يمكن أن يكون هناك الكثير من اللون الوردي، أليس كذلك؟ استخدم الألوان لجذب الانتباه إلى اتخاذ إجراء معينة (call-to-action) مثل زر وظفني أو زر الاشتراك في القائمة البريدية، واستخدم الألوان أيضًا في عناصر شريط التنقل وإلى شعارك. اجعلها كبيرة وسميكة، ولا تنسى الحفاظ على جماليتها. 2. الخلفيات تُعدّ الخلفيات التوجّه الشائع للتصميم في هذه الأيام، ولكن من السهل جدًا أن تخطئ في اختيار خلفية مناسبة. على سبيل المثال، فقط لأنّك تحبّ القطط، فهذا لا يعني أنّ زوار موقعك سيشعرون بنفس الشعور. إذا وجب عليك استخدام خلفية، فحاول تحقيق الهدفين الآتيين: اجعل الخلفية ذات صلة بمحتوى موقعك. اجعل الخلفية شفافة قليلًا. مرّةً أخرى، نحن لا نحاول إجبارك على تصميم معين. وإنّما نريد تشجيعك على التفكير في النتيجة النهائية الّتي ترغب بتحقيقها عندما تختار عناصر التصميم الخاصة بك. إذا كانت مدوّنة غير مخصّصة للعمل فانشئها. إذا أعجبك اللون الوردي، فلا تخف من الإكثار منه. ولكن إذا كان هذا الموقع مخصّصًا لبناء جمهور أو رفع فرص توظيفك، فقد ترغب في إعادة نظر في هذا اللون. 3. الصور استخدم صورًا ذات جودةٍ جيّدة وذات صلة بجمهورك أو بالمنشورات الّتي تنشرها، أو يمكنك جعلها بين ذاك وذاك. ويمكنك أيضًا شراء صور حصرية لتتميز بها. يمكنك اللجوء إلى مواقع مثل Unsplash للحصول على صور مجانية وجميلة. ولكن تذكّر أنّ الكثير من الناس يفعلون الشيء نفسه. لذا سيكون من الصعب عليك أن تتميّز عند استخدامك لنفس الصور الّتي يستخدمها آلاف المواقع الأخرى. نصيحة خبير: دمجت صورة عائلية مع صورة احترافية وحصلت على الكثير من الصور الرائعة لاستخدامها على موقعي، وتخلّصت من صورة بطاقة المعايدة القديمة الخاصة بنا. ابتعد عن الإعلانات ليست هناك أيّ مشكلة في اعتمادك على الإعلانات الخفيّة من خلال روابط التسويق بالعمولة (affiliate). ومع ذلك، إذا كنت تحاول بيع كتاباتك أو خدمات المساعدة عن بعد على موقعك وأتى زائر للموقع ليرى إعلانات مثل الإعلانات أدناه، اسأل نفسك عمّا إذا كانت تقدم صورة احترافية لعملك أم العكس؟ على سبيل المثال، إذا كان موقع المحامي الخاص بك يحتوي على إعلانات مثل هذه، فهل ستعيد التفكير في توكيل هذا المحامي؟ هل أنت مستعدٌّ للانطلاق إذا وصلت إلى هذا الحدّ، وتأكدّت من إضافة كلّ العناصر المذكورة في هذه الأيام السبعة، فقد حان الوقت لإطلاق موقعك. لكن أوّلاً، هنّئ نفسك بما قمت به من عملٍ جيّد. لقد غطيّنا الكثير من الأمور المهمة على مدار الأيام السبعة الماضية، ومع ذلك أنّها البداية وحسب. إن أفضل مافي الأمر أنك تمتلك الآن موقعًا ومحتوىً يمكنك مشاركته مع عملائك! آخر واجباتك: بعد النقر مباشرةً على نشر، اكتب بريدًا إلكترونيًا يمكنك إرساله إلى 10 أشخاص ممّن تعرفهم ويحبّونك. أخبرهم أنّك أنشأت موقعك الأوّل (لوحدك)، وأنّك متوفّرٌ الآن في السوق للعملاء. ثمّ اسألهم إذا كانوا يعرفون أيّ شخص يمكنهم مشاركة رابط موقعك معه لعرض خدماتك. إنّه الإطلاق الرسمي لموقعك، يا صديقي. وأخيرًا، نريد أن نسمع منك! لا تدع جمال الموقع الجديد يضيع مع الغبار. بدلًا من ذلك، انشر رابط موقعك في التعليقات، فنحن نودّ الاطلاع عليه! هل تعتقد أنّه ينبغي توضيح جزءٌ من هذا المقال بشكل أكبر أو حتى إضافة قسم جديد؟ شاركنا رأيك بالتعليقات في الأسفل. ترجمة -وبتصرف- للمقال Seven Days or Less to Branded Website Success

هل تفكّر في جلب مساعد عن بعد لمساعدتك في إنجاز أعمالك؟ إذا كان الأمر كذلك، فربّما تحاول معرفة ما هو راتب المساعد عن بعد النموذجي في هذه الأيام. إنّ معرفة مقدار ما تدفعه لمساعدك عن بعد هو أحد الأمور الرئيسية عندما يحين وقت الاستعانة بمصادر خارجية، وذلك لسببٍ وجيه: سيًربحك المساعد عن بعد (وعملك) مبلغًا كبيرًا من المال كلّ شهر. من الجيّد أن نلقي نظرة على ميزانية مشروعك، وتقديرات دخلك وعائد الاستثمار الذي يمكن أن يقدّمه المساعد عن بعد. إذًا كيف يمكنك معرفة المقدار الذي ستدفعه لمساعدك عن بعد؟ هذا سؤالٌ واضح على ما يبدو مع إجابة أقلّ وضوحًا. لنتعمّق في ذلك. الراتب عرضة للتغير لا يوجد راتب مساعد عن بعد محدّد، ولا يوجد أي مخطّط أو أيّ جدول بيانات يمكنك من خلاله إجراء حسابٍ رسمي، والحصول على راتبٍ رسمي، ثمّ البحث عن مساعد عن بعد لتوظيفه. هناك مجموعة كبيرة من المهارات والقيم التي يجلبها المساعدون عن بعد إلى الطاولة - يتجلّى دور المساعد عن بعد في إنجازه لمختلف المهام المطلوبة منه، وينطبق نفس الشيء على رواتبهم. إنّ ما تدفعه لمساعدك عن بعد يتأثّر مباشرةً بهذه العوامل: مستوى الخبرة مستوى تعقيد المهام مستوى المهارة النتائج السابقة مقدار الوقت الذي سيوفّره لك هناك عوامل أخرى يجب مراعاتها، وتختلف تلك العوامل على حسب نوعية المشروع والمهمّة المطلوبة. ولكن بشكل عام، عندما تبدأ في تقييم المساعدين المرشّحين، يجب أن تهتمّ بما سيضيفونه على المهمّة المطلوبة وما قيمة هذه الإضافات بالنسبة لك. إحصائيات وأرقام من الواقع كما قلت من قبل، لا يوجد نطاق محدّد لراتب المساعد عن بعد. ومع ذلك، هناك بعض الاتجاهات في المجال، وعمومًا، فإنّك ستشهد فجوة كبيرة بين المساعدين الذين يقدّمون الدعم الإداري العام والمساعدين الذين يقومون بمهام أكثر تحديدًا، تقنيةً أو تعقيدا. *هذه الأنواع من الأدوار شائعة جدًا بالنسبة للباحثين عن مصادر خارجية لأوّل مرة. بمعنى آخر، ستدفع أموالًا أكثر بكثير لشخص ما لإعداد إعلاناتك على فايسبوك وتشغيلها وإنشاء مسار مبيعات أكثر ممّا ستدفعه للشخص الذي سيرسل فواتيرك. بشكلٍ عام جدًا، سوف يتقاضى المساعد الإداري (وهو ما يفكّر فيه الناس عادةً عندما يتعلّق الأمر بالمساعدين عن بعد) ما بين 20 إلى 40 دولارًا في الساعة. هناك العديد من المساعدين ذوي الخبرة الذين يتقاضون أجورًا أكبر مقابل المهام الإدارية التي قد تتّسق بشكل أكبر وفقًا لأدوار المساعد التنفيذي، لكنّهم عادةً لن يطلقوا على هؤلاء اسم المساعدين عن بعد. عادةً ما يتقاضى المساعدون عن بعد المتخصّصون في إدارة وسائل التواصل الاجتماعي الراتب الأعلى - ما بين 30 إلى 50 دولارًا في الساعة. المساعدون التقنيون، الذين يساعدونك في ندواتك عبر الإنترنت ومراقبة ووردبريس وصيانته وكذا ضبط تصميم موقع الويب وما إلى ذلك، يتقاضون بمبلغ 50 دولارًا في الساعة على الأقلّ، وذلك وفقًا لتعقيد التكنولوجيا التي يتعاملون معها وكذا درجة احترافيتهم. تنبيه: الأسعار في العالم العربي قد تكون أقل من ذلك بكثير وتتبع مستوى دخل كل شخص، وهذه الأسعار محسوبة على مستوى دخل الفرد الأمريكي. لا وجود لشيء يسمّى راتب المساعد عن بعد هل يمكننا توضيح المفارقات قليلًا؟ هذا سوف يساعد، أنا أعدك. انطلاقًا من منظور العمل، من الطبيعي أن تتعامل مع فكرة التعويض باستخدام كلمة "راتب". إذا كنت توظّف مساعدًا عن بعد، فأنت لا تتعامل مع الرواتب على الإطلاق. الراتب هو عنصر من الوظائف التقليدية، حيث توافق على حزمة تعويض سنوية مقسّمة إلى فترات قبض الرواتب. ومع ذلك، فإنّ معظم هؤلاء المساعدين عن بعد هم مقاولون مستقلّون وليسوا موظّفين، لذا فإنّ رواتبهم ليست مجزية. الاستثناء الواضح هو أنّه إذا كنت تستخدم موظفًا عن بُعد، في هذه الحالة، فيمكن للموظّف عن بعد أن يصل إلى جميع مزايا الموظفين ولن يكون مساعدًا عن بعد في هذه الحالة. تبحث معظم الشركات التي توظّف مساعدين عن بعد عن مستقلّين، وعادة ما يكون هيكل الدفع متعلقًّا بالساعة أو بالمشروع أو من الممكن دفع عربون في بداية المشروع. استخدامك لمصطلح "الراتب" علامة على أنّك جديدٌ بالميدان. إذن مع كلّ ما قيل، كيف تقرّر الدفع لمساعدك؟ تحديد تعويض مساعدك عن بعد عندما يتعلّق الأمر بتحديد التعويض لمساعد عن بعد، يجب أن تكون جاهزًا لما قد يكون للمساعد عن بعد من رأي. يمكنك، بصفتك صاحب نشاط تجاري، تقديم سعر للساعة أنت على استعداد لدفعه مقابل المهمّة المطلوبة، أو سيقدّم لك عضو فريقك الجديد المحتمل اقتراحًا. في الواقع، يقترح العديد من المساعدين عن بعد التعويضات المناسبة لهم، ويمكنك (كونك عميلًا لهم) قبول هذا الاقتراح أو رفضه. إذا لم تنجح الباقات والأسعار المعروضة، فسيكون معظمهم سعداء بتقديم اقتراح مخصّص لك بعد التعرّف على ما تحتاج إليه بالتحديد. وعلى الرغم من أنّ الاحتمال الشائع في مجال الأعمال هو أنّ الشخص الأوّل الذي يقترح السعر "يخسر" التفاوض، فإنّه من المفيد جدًا أن تتمكن من توفير ميزانيتك لـمساعد عن بعد لتقديم باقة تناسبك. العائد على الاستثمار أكبر اهتمامك سواء كنت توظّف شخصًا ما للرد على استفسارات العملاء أو كنت تحضر شخصًا لمساعدتك في تشغيل مشروعك التقني، فأنت بحاجة إلى التفكير في عائد استثمارك. يتمثّل العامل الرئيسي لعائد الاستثمار في هذه الحالة في تحديد معدّل الساعة الفعّال لك، وكيف سيتمّ تعزيز ذلك بمجرّد القضاء على المهام التي ستستعين بمصادر خارجية لإنجازها. فكّر في سعر الساعة الذي ستدفعه لمساعدك عن بعد كمبلغ من المال تريد دفعه لتوفير ساعة من وقتك. على سبيل المثال، لنفترض أنّك تقضي ساعتين في اليوم في إدارة صندوق الوارد الخاص بك. إذا وفّرت على نفسك هاتين الساعتين، فيمكنك أن تقضيهما في عمل يولّد 1000 دولار من المبيعات الإضافية كلّ أسبوع. هناك احتمال كبير لاهتمامك بالعائد على الاستثمار في هذه الحالة. إذا وظّفت مساعدًا عن بعد لإدارة صندوق الوارد الخاص بك مقابل 30 دولارًا في الساعة وقضى المساعد ثماني ساعات في الأسبوع لإنجاز ذلك، فأنت تنفق 240 دولارًا في الأسبوع لتوفير الوقت لنفسك لجلب 1000 دولار إضافية، ممّا يربحك 760 دولارًا (قبل الضرائب وغيرها من النفقات). الوقت = المال هنالك مقولة أن الوقت من ذهب، ولكن ماذا عن المعرفة؟ عندما تستعين بمساعد عن بعد لإنجاز بعض من أعمالك، فإنّ ما تربحه بوضوح هو الوقت. بالنسبة للمهام البسيطة، فمن السهل رؤية العائد على الاستثمار لإنجاز هذه المهام بمعدّل ساعة أقلّ بكثير من أيّ مكاسب ممكنة. ولكن عندما تبدأ بالتفكير في كيف أنّ الاستعانة بمصادر خارجية سيفيد مشروعك، قد ينتهي بك الأمر إلى النظر في الأمور التي تحمل بطيّاتها قيمة أعلى من ذلك بكثير. فكّر في المهام التي تراها مهمة، ولكنك لا تستطيع تنفيذها لأنّك لا تعرف كيفية القيام بذلك. يمكن أن تكون هذه المهام: إنتاج فيديو، أو نشاطات على مواقع التواصل الاجتماعي أو إعلانات على فيسبوك أو Pinterest. يتطلّب الأمر مجموعة معيّنة من المهارات لتتعلّم كيفية القيام بأيٍّ من تلك المهام المدرّة للدخل بشكل صحيح، ويستغرق تطوير مجموعة المهارات هذه بعض الوقت. يمكنك اختيار صبّ ساعات من وقتك في تعلّم كل هذه الأشياء المختلفة، أو يمكنك في المقابل الاستعانة بمصادر خارجية. الاعتبار الرئيسي بالنسبة لك في هذه المهام الأكثر تعقيدًا هو قيمة الخبرة. مرّة أخرى، عائد الاستثمار هو السبيل للتعامل مع هذه الناحية. فكّر في مهمة واحدة عليك البدء في تنفيذها - على سبيل المثال، الانخراط في وسائل التواصل الاجتماعي. لا يستغرق الأمر وقتًا طويلًا للقيام بالانخراط بحدّ ذاته، بل ما يستغرق وقتًا هو تعلّم الاستراتيجيات الأكثر فاعلية لكلّ منصّة على حدة. كما يستغرق الأمر وقتًا إضافيًا لتوفير المحتوى المطلوب مشاركته والمزيد من الوقت لتحليل النتائج. كم ساعة سيستغرق الأمر بالنسبة لك لمعرفة كلّ هذا بنفسك؟ (تلميح: الكثير والكثير من الساعات.) ولكن إذا قرّرت الاستعانة بمصادر خارجية لإدارة وسائل التواصل الاجتماعي الخاصة بك، يمكنك استعادة ذلك الوقت، وتحرير نفسك من التعب العقلي لعدم قيامك بذلك والبدء في جني فوائد استراتيجية فعالّة لمواقع التواصل الاجتماعي. كلّ ذلك مقابل تكلفة مدير مواقع التواصل الاجتماعي الشهرية. يعدّ هذا فوزًا كبيرًا لمشروعك، لأنّ وسائل التواصل الاجتماعي الجيّدة تعني المزيد من العملاء المحتملين والمزيد من الأعمال لك، مع تحرير نفسك من أي ضغوطات، ممّا يتيح لك القيام بالمزيد من الأنشطة المدرّة للدخل. بعبارة أخرى: نعم، قد تكون الاستعانة بمصادر خارجية لبعض المهام ذات العيار الكبير مكلّفةً أكثر ممّا تتخيله، ولكن ما قيمة النتائج التي يحقّقونها هؤلاء المساعدين لمشروعك (سينجزون الأمور بسرعة أكبر ممّا تقدر عليه)؟ يتعلّق الأمر كلّه بالقيمة قد ينظر الكثير من الناس الذين لم يعتادوا على العمل مع مساعدين عن بعد إلى هذه الأسعار بالساعة ويفاجئون. بعد كلّ شيء، من هو المساعد الإداري الذي يجني 30 دولار بالساعة (قد تتفاوت من مكان إلى آخر) في الشركة النموذجية الخاصة بك؟ على السطح، قد يبدو أنّ أجور المساعدين عن بعد مبالغٌ فيها. ولكن إن نظرت أعمق قليلًا، فقد تبدو لك تلك الأجور منطقية. لا يؤثّر الراتب السنوي للمدير في التكاليف المرتبطة بالحصول على موظّف بدوام كامل. هناك فوائد ووقت الموظفين والموارد المخصّصة لدعم الدور والتكاليف العامة وأكثر من ذلك. لا يتحمّل المدير تكاليف إنجاز الأعمال - فالشركة تتحمّلها. يتحمّل المساعد عن بعد، من ناحية أخرى، تكاليف إنجاز الأعمال الموكّلة إليه، ويجب أن تؤخذ هذه التكاليف في الحسبان عند تقدير سعر الساعة الذي يطلبه. عادةً ما يدفع المساعدون عن بعد مقابل أجهزة الحواسيب الخاصة بهم، والاشتراكات في البرامج، ومعالجة المدفوعات، ومساحات العمل، وحتى جزء من ضرائب الدخل التي سيدفعها صاحب المشروع. تعدّ هذه التكاليف عاملًا مهمًّا في سعر الساعة الذي يطلبه المساعد عن بعد. أنت تدفع مقابل بعض الحرية عندما تقوم بتعيين مساعد عن بعد. أنت تدفع أكثر من ذلك بقليل لتجنّب تكاليف توظيف موظف دائم. أضف إلى ذلك القيمة التي يضفيها توفير الوقت والموارد إلى الشركة، سيتضّح لك حينها أنّ تعيين مساعد عن بعد يمثّل استثمارًا حقيقيًا! تقتصر تكاليفك المتعلّقة بالعمل مع مساعد عن بعد على ما يدخله لك هذا المساعد، ولكن المنافع تتعلّق بإمكانات الكسب الخاصة بك (والتي، من الناحية المثالية ، ينبغي أن تزيد). كلمة أخيرة حول تحديد راتب مساعدك عن بعد بينما أنّ العمل مع المستقلّين ليس مشكل رواتب بالبتّة، فمن المنطقي أن تجري ببعض الأبحاث عند رغبتك بالاستعانة بمصادر خارجية. ما هي الأجور التي سيتقاضاها المساعد عن بعد النموذجي مقابل الخدمات التي ترغب في استئجارها؟ ما هي النتائج التي تأتي من الاستعانة بمصادر خارجية، وهل سيدفعون بمشاريعك للأمام؟ وما هي القيمة التي تضعها في وقتك وتقليل الإجهاد؟ يتعلّق المقدار الذي من الممكن أن تدفعه لمساعدك عن بعد بكلّ العوامل السالف ذكرها. لا توجد دائمًا إجابة واضحة عمّا يجب أن تدفعه، ولكن عندما تبدأ في البحث عن بعض المساعدة في عملك، ضع في اعتبارك القيمة التي ستضيفها هذه المساعدة، وليس فقط السعر المدفوع. كن ذكيًا، بالطبع - ليس من المنطقي تمامًا أن تسبّب لشركتك ديونًا كي تتخلّص من بعض المسؤوليات- ولكن عندما تنظر إلى الاستعانة بمصادر خارجية، حاول أن تنظر إلى الصورة بشكل كامل، ولاتنظر للتعويضات فحسب. ترجمة -وبتصرف- للمقال How to Determine Your Virtual Assistant’s Salary لصاحبته Miranda Nahmias

يستمر الجدل الدائر حول سكتش وفوتوشوب منذ الأزل. وليس هناك من ينكر أنه حتى يومنا هذا، لا يزال الفوتوشوب الأداة الأكثر استخدامًا لصنع النماذج المحاكية (Mockups) لتصاميم الجوال والويب. رغم أنّه كان يُقصد بأدوبي فوتوشوب في المقام الأول أن يكون أداة للمصوّرين لتحرير الصور التي يلتقطونها، فإن ميزاته الجذّابة تمكِّن مصممي الويب من بناء مواقع ويب رائعة ومفيدة أيضًا. لا يزال هناك الكثير من المصمّمين الذين يفضّلون فوتوشوب الفوتوشوب: معول المصمم لفترة طويلة، كان الفوتوشوب أداة أساسية بالنسبة للمصممين. في الواقع، لا يزال العديد من المصممين يعتبرون هذه الأداة معولهم الخاص. يدرك العديد من عملاء مصممي الويب ما هي ملفات PSD. تتكوّن هذه الملفّات المصنوعة في فوتوشوب من طبقات يمكن فكّها ومعالجتها. يطلب العملاء عادةً من مطوّري الواجهة الأمامية (front-end developers) استخدام هذه الملفّات كمراجع، بينما يعرف مصممّو الويب كيفية تطبيقها. من السهل جدََّا تحديث هذه الملفّات ومشاركتها مع الأعضاء الآخرين في فريق التصميم. ومع ذلك، منذ وصول نسخة فوتوشوب CC 2014، أثبت فوتوشوب أنّه أكثر من مجرّد أداة لتحرير الصور لأنه يمكن أن يكون أداةََ سهلة وصديقة لمصمّمي الويب وللذين يعملون على التصميمات الرقميّة أيضًا. سنعرض فيما يلي بعض ميزات برنامج أدوبي فوتوشوب ممّا يجعله أداةََ مفيدة لتصميم الويب: المكتبات Libraries: تتمّ مزامنة الأصول مع حساب Creative Cloud الذي يمكّبن استخدامه مرة أخرى في برامج أدوبي الأخرى وفي مختلف الملفات والمشاريع المستقبلية. كائنات ذكية (Smart Objects): تمامًا مثل المكتبات، يمكن إعادة استخدام الكائنات الذكية في العديد من المواقف، سواء في ملف واحد أو مع ملفات أخرى. استخراج الأصول (Extract assets): في هذه الأيّام، أتاح فوتوشوب لمصمّمي الويب استخراج الكائنات، العناصر والصور لعناصر الويب والجوال بعد دمج ميزات أكثر شمولية. وبمساعدة إضافات مثل Cut & Slice و DevRocket، فإن تصدير هذه الأصول يغدو أمرََا سهلََا للغاية. Layer comps: تُمكّن Layer comps المصمّم من صنع أشكال مختلفة من التصميم وذلك عن طريق تعديل سمات، وتموضع وقابليّة رؤية العناصر دون مشاحنات إنشاء ملفات متعدّدة. دعنا نواجه هذه الحقيقة: لا يزال فوتوشوب أداة التصميم الأولى التي يجب على المصمّم إتقانها. فأنا أعتبر برنامج فوتوشوب أمًا لكل برامج أدوبي وتصميم الويب. كل ما تحتاجه (أو بالأحرى جلّ ما تحتاجه) موجود في البرنامج، عليك فقط أن تطلق العنان لإبداعك قليلاََ. لكن نظرًا لكونه غير كامل أيضًا، فإنّ فوتوشوب له حدوده في بعض الأحيان. فمن الممكن أحيانا، ألّا يعمل الفوتوشوب بالطريقة التي نريده أن يعمل بها. غالبًا ما يواجه المصمّمون مشاكل عندما يريدون استعمال وظائف لا يدعمها الفوتوشوب. يستدعي هذا المأزق تنزيل برامج إضافية. ما يفعله المصممون في هذه الحالة هو البحث عن برنامج آخر وتنزيله وفتحه لتلبية احتياجات خيالهم وإبداعهم. أنت كمصمّم، لديك خيارين: إمّا أن تتخلّص من فوتوشوب وتبحث عن برنامج أكثر تنوّعًا (أعتقد أنه سيكون من الصعب جدًا، إن لم يكن مستحيلًا)، أو البحث عن حلول من شأنها تحسين الفوتوشوب وتطويره. ألا وهي الإضافات. الإضافات هي ملحقات يمكنك تنزيلها وتثبيتها داخل البرنامج. بحيث توفر لك الوقت، وتحل المشكلات، وفي المدى الطويل، من شأن الإضافات حفظ أموال المصمّمين وهذا يتيح لهم مجالاََ لتوسيع قدراتهم الإبداعية. لأنني أحب فوتوشوب كثيرًا، فقد بحثت عن الإضافات التي قد تساعد المصممين في احتياجات التصميم الخاصة بهم. وها هي ذا: صنع سكيتش طريقه إلى القمة بقوّة. نهضة سكتش "أنا أحبّ سكتش (Sketch). قمت بالانتقال إليه مؤخّرََا ولم أعقّب. لقد كنت مدافعةََ عن برنامج فوتوشوب طوال حياتي العملية إلى أن أتت شركة سكتش، وخلال أسبوع، كنت قد انتقلت إلى استخدامه بالكامل، ولم أندم على الإطلاق. أعرف الكثير من المصممين الذين قاموا بالتبديل، ولكن في الواقع لا يزال هناك الكثير من المصممين الذين أتحدث معهم في المؤتمرات، والذين لا زالوا يستخدمون كلا البرنامجين (50% فوتوشوب و 50% سكتش)، سوف يتغيّرون، وسوف يرون الضوء قريبًا!". سارة بارمنتير Sarah Parmenter بعد سيطرته الكاملة لأكثر من عقدين من الزمان، تم تحدّي تفوق فوتوشوب أخيرًا مع وصول سكتش. أصبح سكتش أحد الموضوعات المفضّلة للمناقشة من قبل أولئك الذين ينتمون إلى مجتمع الويب وتصميم واجهة المستخدم. ولكن، ما الذي جعل سكتش يُبقي صناعة تصميم الويب في حالة تأهّب في الآونة الأخيرة؟ لديك كلّ ما تحتاج مقارنةً بالفوتوشوب، فإنّ تنظيم جميع المستندات التي لديك وإجراء المراجعات على سكتش أسهل بكثير، ذلك بفضل واجهة سكتش النظيفة والبسيطة. ومع ذلك، لا يأتي هذا التطبيق إلا مع أدوات يمكن تعديلها باستخدام CSS3 و HTML. على عكس فوتوشوب، فإن تطبيق سكتش لا يحتوي على أدوات 3D ومرشحات الصور وميزات أخرى يمكن أن تؤثر على سرعة التصميم عندك. باختصار، يقدم برنامج سكتش الأشياء الحيوية لمشاريع الويب وواجهة المستخدم الخاصة بك، ممّا يتيح لك إنهاء عملك بوتيرة أسرع بكثير. بالطبع، ليس كل مصممي الويب مثل هذا. للتعويض عن نقص الأدوات، يحتوي سكتش على الكثير من الإضافات التي يمكن مقارنتها مع أدوات الفوتوشوب، وقد قام مطورو التطبيق بتغطية كل ما يمكن أن يحتاجه المصمم: من ملحق بسيط يمكّنك من تبديل لون الإطار أو العنصر نفسه إلى مجموعة واسعة من مولّدات المحتوى. لوحات الرسم (Artboards) يعدّ صنع ألواح الرسم باستعمال تطبيق سكتش من أسهل ما يمكن. فبمجرد الضغط على حرف A من لوحة المفاتيح تكون قد أنشأت لوح رسم، سيعرض سكتش بعد ذلك قائمة تحوي 28 حجم مختلف من أيقونات الشاشة الأكثر استخدامََا والتي يمكنك الاختيار من بينها. وهذا مفيد تمامًا عند إنشاء تصميم متجاوب لأن الحصول على الأبعاد الصحيحة عند إنشاء نموذج محاكي سيغدو أمرََا سهلََا. لوحات المزاج (Moodboards) يسهّل عليك تطبيق سكتش إنشاء لوحات المزاج وموارد المشاريع. أولاً، لاحظ أن جميع ملفاتك يمكن أن تعيش داخل مستند واحد. يحتوي سكتش على درج صفحة في الشريط الجانبي للوح الرسم والذي يتيح لك التمرير السريع بين الملفات. بالنسبة للمشاريع الكبيرة مثل هذا المشروع، كان من الجيّد بشكل خاصّ أن تكون قادرًا على القفز سريعًا ذهابًا وإيابًا داخل شجرة الموقع، لوحة المزاج والنماذج المحاكية أثناء التصميم أو إجراء تعديلات. صندوق أدوات سكتش (Sketch Toolbox) قبل استخدام سكتش، يوصى بشدة بتنزيل صندوق أدوات سكتش Sketch Toolbox أولاً. فهذا هو مدير الإضافات الذي يتيح لك تصفّح وتثبيت الاضافات التي تريدها بشكلِِ مباشر. صندوق الأدوات هذا سيساعدك أيضََا في مراقبة الإضافات الأخرى التي تستخدمها بشكلِِ جيّد. مبنيّ على المتّجهات نحن الآن في عصر التصميم المتجاوب، ومفتاح النجاح في تصميم مواقع متجاوبة هو استخدام المتجهات (Vector) أثناء التصميم. لذلك يحتاج المصممون إلى الأخذ بالحسبان الشاشات عالية الوضوح مقابل الشاشات العادية والشاشات الضيّقة مقابل الشاشات العريضة وأشياء أخرى كثيرة عند تفكيرهم في الخروج بتصميم معيّن. من الواضح أن العمل على تصميم يتجاوب مع جميع الأشكال والتنسيقات أمر في غاية الأهمية. ومع ذلك، فإنّ الخروج بنموذج محاكي لكل مجموعة من الأبعاد هو عملية دقيقة، تتطلب الكثير من الوقت. رغم ذلك، فإنّ هذه ليست مشكلة مع تطبيق سكتش بسبب الميزات التي تمكّنك من تغيير حجم الكائنات بحرية. بإمكانك تخيّل الوقت والطاقة التي يمكنك توفيرها فقط مع هذه الميزة وحدها. إضافة (Sketch Mirror) على عكس البرامج الأخرى المبنيّة على المتّجهات، فإن تطبيق سكتش يتعامل مع البكسل أيضا. نظرًا لأن الأشكال التي تنشئها تأتي دائمًا إلى أقرب بكسل، فلا داعي للقلق بشأن الخطوط الضبابية والصور. مع الإضافة (Sketch Mirror)، يمكنك بسهولة فتح مستنداتك ومعرفة كيف سيبدو التصميم الخاص بك على جهاز iPad أو iPhone. تسمح لك هذه الإضافة أيضًا بمعاينة التغييرات التي أجريتها على الفور، مما يساعدك في إجراء تعديلات نهائية بناءً على ما يريده عميلك، خاصةً إذا كنت مع العميل وجهََا لوجه. إضافة AEFlowchart ما تحتاجه لإنشاء مواقع لمواقع الويب التي تعمل عليها هو الإضافة AEFlowchart. ستساعدك هذه الإضافة في إنشاء مخطّطات لمراقبة وتتبّع عملية تأسيس المواقع الجديدة. وستسهّل عليك هذه الإضافة الإشارة لأي شيء في التصميم الذي تعمل عليه، دون الحاجة إلى إنشاء برنامج آخر قد يستهلك الكثير من وقتك. أنماط النص في تطبيق سكتش من بين الأمور المثيرة للاهتمام حول تطبيق سكتش هو أنه يمكّنك من إنشاء عناصر نصية بكل سهولة. على سبيل المثال، يمكنك الإتيان بأنماط النص التي يمكنك استخدامها في الأنماط المضمّنة، مثل العنوانين والعناصر المجمّعة لها. وفيما بعد، يمكنك تطبيق ما قمت بإنشائه في مستندات أخرى. إذا كان عميلك لا يحب نمط الخطّ الذي قمت بإنشائه، فكل ما عليك فعله هو تحديثه مرة واحدة وسيتم تحديث النمط في كل مشروعك تلقائيًا. الأمر الأكثر إثارة للإعجاب هو استخدام سكتش لخاصية عرض النص الأصلي. هذا يعني أن النص الذي استخدمته في ملف التصميم هو نفسه بالضبط الذي سيظهر في المتصفح. سهولة التعامل مع الألوان يعدّ تغيير وتعديل ألوان المشروع الذي تعمل عليه أيضًا من أسهل الأمور التي يمكنك القيام بها مع تطبيق سكتش، حيث يمكنك ببساطة إنشاء لوحة ألوان على لوحة المزاج. سيتم سحب الألوان الأكثر شيوعًا التي تستخدمها أعلى المراجع الخاصة بك بحيث يمكنك استخدامها بسهولة في المستقبل عند العمل في مشروع آخر. علاوة على ذلك، بما أن سكتش يسمح لك بالوصول إلى جميع ملفاتك من خلال مستند واحد، سيسهل عليك نسخ ولصق الكائنات وأنماط الكائنات، بما في ذلك تدرّجات الألوان والألوان الأحادية، من جميع ملفاتك. وهذا شيء مفقود في الفوتوشوب بوضوح، وربما لا تدرك شركة أدوبي السهولة التي توفرها هذه الميزة. شبكة التطبيق المدمجة تعتبر شبكة التخطيط المدمجة في تطبيق سكتش ميزة أخرى من أبرز الميزات التي ينفرد بها هذا الأخير. فعلى عكس فوتوشوب، لن تحتاج إلى الاعتماد على إضافة أو سلسلة من الإرشادات أو الطبقات المنفصلة التي تحتوي على شبكة مؤقتة، والتي يكون من الصعب تحريرها. مع سكتش، فإنّ مهامََّا كتثبيت دليل تخطيط شفاف أو تغيير أحجام الأعمدة والمزاريب تغدو سهلة كأكل قطعة من الكعك. إذا كنت ترغب في تعديل شبكة التخطيط، فأنت تحتاج ببساطة إلى الانتقال إلى "عرض View"، ثم انتقل إلى "إعدادات التخطيط Layout Settings". وإذا كنت ترغب في إيقاف تشغيل الشبكة، فما عليك سوى الكبس على Control + L. إمكانيّات CSS غير محدودة "أنا أيضًا أحب طريقة دمج سكتش لمنطق CSS في التطبيق. هذا يجعل تحويل التصميمات الخاصّة بك إلى CSS أسهل بكثير، حيث يجب عليك استخدام منطق CSS عند تطبيق النسق. وهناك ميزة أخرى مفيدة حقًا لتسريع مجرى التصميم أو التطوير وهي "التقطيع التلقائي" دان إدواردس Dan Edwards كما ذكرنا في القسم السابق من المقال، يمكنك فعل أي شيء تقريبًا في CSS باستخدام سكتش. إذا قمت بالنقر فوق الكائن وضبط الشعاع في الشريط الجانبي، يمكنك بسهولة التوصل إلى زوايا مدورة على الزرّ الذي تريده. إذا كنت تريد تراكبات متدرّجة على الصور، فلن تحتاج إلاّ إلى نقرة واحدة لإضافتها. على الرغم من أن أدوات CSS3 الأنيقة لا تقتصر على سكتش، فقد أثبت هذا التطبيق جدارته عن طريق تمكين المصممين من نسخ تنسيقات CSS بدقة لمختلف العناصر. كل ما يتطلّبه الأمر هو النقر بزر الماوس الأيمن فوق أي كائن لك لنسخ التنسيقات واسم الطبقة كتعليق أعلى الشفرة المحددة. هذا يؤسس اتصالًا سلسًا بين التصميم والتطوير. بالإضافة إلى ذلك، يمكّنك تطبيق سكتش من تحويل مجموعة من الكائنات إلى رمز يمكن نسخه وتكراره ومزامنته لجميع المواقف مع الحفاظ على التغييرات التي تمّ إجراؤها على الكائن. إن إنشاء ونسخ تنسيقات CSS وتصميم المحتوى المنسوخ باستخدام سكتش هو بالتأكيد خالِِ من أيّ إجهاد. سكتش "رمزي" من السهل كثيرََا اللعب بحجم الصور والنصوص والألوان وإجراء التجارب عليها باستخدام الرموز في نفس الوقت، فالرموز تجعل الحياة أسهل بكثير. حتى بين القوالب، تعمل الرموز (symbols) بالشكل المرغوب فيه وأفضل. وبالتالي، إذا كنت، على سبيل المثال، ترغب في استخدام نفس التخطيط في منشور قائمة صفحات المدونة، فكل ما عليك فعله هو نسخ مثيل الرمز هناك، وستتم مزامنة التغييرات التي تجريها تلقائيًا في كلِِّ من الجهات. إذا كنت تريد إضافة محتوى حقيقي، مثل عنوان أو صورة، فما عليك القيام به هو النقر بزر الماوس الأيمن وإزالة الكائن من الرمز الأول. أليس الأمر رائعََا ؟ بالتأكيد، يمكن لرموز سكتش أن تسهّل سير عملك وتوفر عليك الكثير من الوقت. الأزرار الديناميكية هي واحدة من أبرز ميزات سكتش أزرار سكتش الديناميكية على الرغم من أن الرموز رائعة بالنسبة لقوائم المنتجات ومنشورات المدونات، إلا أن إضافات الأزرار الديناميكية تعدّ رائعة بالنسبة للأزرار الموجودة في الصفحة. صنعت هذه الإضافات لخلق رمز للزر في المقام الأول. ومع ذلك، يتم ضبط حشوة الجوانب تلقائيًا بناءً على طول النص. سيوفر لك هذا الكثير من الوقت في العمل على التصميم الخاص بك، خاصةً إذا كنت تعمل على صفحات بها عدّة أزرار. ما عليك القيام به هو مجرد إنشاء طبقة نصية تحمل نص الزر الأولي، واختر الإضافة، ثم اكبس Command + J. النتيجة؟ زر ديناميكي يمكنك استخدامه مرارًا وتكرارًا خلال التصميم إذا قمت بتغيير نص الزر. إضافة Day Player سيكون من السهل عليك ملء العناصر النائبة من خدمات الصور المختلفة إذا كنت تستخدم إضافة Day Player. وسيكون القيام بذلك أسهل بكثير إذا كنت تستخدم Lorem Pixel للحصول على الصور التي تريدها. اختر الإضافة وخدمة الصورة التي تريدها، وقم بتعديل خيارات العنصر النائب، وأدخله في مجموعة كائنات المنتج. تخيل مدى سهولة تنفيذ المهمة مع هذه الإضافة مقارنةً بالبحث عن الصول للعناصر النائبة على الويب. إضافة Content Generator إضافة Content Generator هي ما تحتاج إليه إذا كنت ترغب في إضافة المزيد من محتوى الحشو. باستخدام هذا البرنامج المساعد، كل ما عليك فعله هو تحديد صناديق العناصر النائبة للصورة لكل عضو في الفريق وتحديد صورة شخصية لذكرِِ كانت أو أنثى في خيارات الإضافة. الجيل المدمج من القوائم النقطية من بين الميزات الأخرى المثيرة للإعجاب الجيل المدمج من القوائم المرتّبة وغير المرتّبة. يمكننا اعتبارها إحدى الميزات المهمة غير الموجودة في العديد من برامج التصميم، بما في ذلك في فوتوشوب. مع هذه الميزة، ليست هناك حاجة لك لإخضاع نفسك لعملية مملّة وتستغرق وقتًا طويلاً لإنشاء نصّ منسّق جيدًا ويبدو رائعًا في المتصفح. دعم لوحات فنية متعددة على لوحة قماشية واحدة باستخدام فوتوشوب، ستحتاج إلى إنشاء العديد من ملفات PSD والتبديل بين النوافذ أثناء العمل على العديد من النماذج المحاكية. لحسن الحظ، لدى سكتش ميزة تدعم العديد من اللوحات الفنية على لوحة قماشية واحدة. وبالتالي، يمكنك رؤية نماذج سطح المكتب والجهاز اللوحي والأجهزة المحمولة في واجهة واحدة فقط. وهذا يتيح لك العمل على جميع النماذج المحاكية في نفس الوقت. إذا كنت تقوم بتعديل الرموز، أو الألوان أو أنماط النص، فيمكنك أن تلاحظ تأثير التغييرات التي تجريها على جميع النماذج المحاكية. مع هذا، يمكنك بسهولة أن تدرك تدفق المحتوى والاتصالات التي تحدث بين الأجهزة المختلفة. تصدير الأصول "التصدير مهمّة شائعة، ولكن سكتش 3 يحسّن سير هذه المهمّة من خلال السماح لك بتحديد مستويات دقة مختلفة للمكوّنات المقطوعة. هذا يعني أنه يمكنك حفظ الشريحة نفسها في العديد من الملفات التي تدعم دقة شاشات مختلفة وذلك في آن واحد. " جيوف غراهام Geoff Graham أحد الأشياء الأكثر إثارة للاهتمام حول سكتش هو أنّه يجعل تصدير جميع الملفّات أسهل بكثير. على سبيل المثال، إذا كنت ترغب في تصدير أزرار الأيقونات المستخدمة في التنقل عبر الأجهزة المحمولة، فكل ما عليك فعله هو النقر فوق مجموعة من الطبقات والنقر فوق الزر "تصدير" الموجود في الركن الأيمن السفلي. يمكنك بعد ذلك حفظ هذه الرموز للويب إما بتنسيق SVG أو PNG. تتضمّن النافدة الظاهرة كل ما يتعلق بعرض الأصول على أجهزة مختلفة. إضافة Sketch Style Inventory يغدو إنشاء قائمة بجميع أكواد HEX الخاصة بالألوان والحوامل المستخدمة في الصفحة أمرًا سهلاً باستخدام إضافة Sketch Style Inventory. ومع ذلك، فإنّ هذا لا يقتصرعلى الألوان فقط، بل يمكنك استخدامه في أنماط النص أيضًا. لكلتا الأداتين إيجابيّات وسلبيّات سكتش مقابل فوتوشوب: من هو الأفضل بالنسبة إليك؟ إذََا ما الذي يجب عليك اختياره: أدوبي فوتوشوب المشهور أو سكتش الذي لا يمكن إيقافه؟ فيما يلي قائمة بالفرق الأساسي بين هذين البرنامجين: التصيير (rendering): من حيث التصيير، فإنّ طريقة عرض سكتش قريب من الويب. ولكن لسوء الحظ، لا يمكن قول الشيء نفسه عن فوتوشوب. الاختصارات: يفوز فوتوشوب بهذه الجولة لأنه يحتوي على الكثير من الاختصارات. يفتقر سكتش بوضوح للاختصارات التي يمكن أن تسهم في تسهيل العمل أكثر. المستندات: يحتوي سكتش على مستندات صغيرة بينما مستندات فوتوشوب كبيرة. فحجم ملف المستند الصغير هو ميزة مضمونة في التطبيق المتّجهية. نظرًا لأن معظم الملفات التي تم إنشاؤها باستخدام سكتش أقل من 4 ميجابايت، فإن هذه الملفات سهلة على محرك الأقراص الثابتة وتحميلها أو العمل عليها سريع أيضََا. المكتبات: يحتوي فوتوشوب على مكتبة واحدة، بينما لا يحتوي سكتش على أية واحدة. الشبكات: يحتوي سكتش على شبكات مدمجة، بينما يجب عليك إنشاء شبكات خاصة بك في فوتوشوب. التعامل مع الألوان: لدى أدوبي فوتوشوب إدارة ألوان ممتازة، بينما نجد نقيض ذلك بتطبيق سكتش. التطبيق: تربح سكتش هذه الجولة مرة أخرى لأنها تتيح تطبيقًا أسرع مقارنةً بفوتوشوب. الرموز والكائنات: تُنسب الرموز لسكتش والكائنات لفوتوشوب. رغم أنه يبدو تعادلََا هذه المرة إلّا أنّ رموز سكتش تأتي بنفس الحجم بينما تأتي كائنات فوتوشوب بأحجام مختلفة. ألواح الرسم: يتميّز سكتش بميزة واضحة لأنه يأتي مع ألواح رسم متعددة. هذا على عكس اللوحة الفنية الفردية في فوتوشوب. القياس: من الواضح أن سكتش يفوز بهذه الميزة. فباستخدام أداة التحديد، تقوم بفتح لوحة المعلومات، ورسم المسافة بين كائنين، ويمكنك بالفعل التحقق من النتائج. هذا، في الواقع، مقياس متقدم لا يمكن إلا لسكتش أن يقدّمه. إنّه لمن الواضح أن منهج سكتش ليس فقط أكثر مباشرة ولكنه أسهل أيضًا. ولكن إذا كنت تستخدم فوتوشوب، فهذا غير ممكن لأنّ المسطرة التي يقدّمها مرهِقة. تكبير شاشة العرض: يفوز فوتوشوب بهذه الجولة تذهب لأنه يحتوي على مستويات متعددة من التكبير. أمّا سكتش فلديه مستوى واحد فقط. التغيير والتبديل: بفضل التغيير المحافظ وغير المدمّر، تتربع سكتش القمّة مرة أخرى، فكل ما عليك القيام به هو إدخال قياس الشعاع، والكل سيكون على ما يرام. أمّا في حالة فوتوشوب، فأنت تحتاج إلى إدخال الشعاع وإعادة رسم الشكل الخاص بك، وتحتاج أيضا إلى التأكد من نسخ الأبعاد بدقّة. الحجم: إنّ سكتش خفيف الحجم موازنة بفوتوشوب ثقيل الحجم. قدرات تحرير الصور: حسنًا، هذه الجولة تذهب إلى برنامج فوتوشوب لأنه أُنشئ في المقام الأول لهذا الغرض. ومع ذلك ورغم خسارتها، فإن سكتش تعوّض عن ذلك بتوفيرها لميزات من شأنها تقديم تصميمات رقمية جيدّة. سهولة الاستخدام: سكتش هو تطبيق حصري فقط لنظام التشغيل ماك. ومع ذلك، يمكن استخدام فوتوشوب لكل من مستخدمي الماك والويندوز. سكتش: تهديد حقيقي للفوتوشوب "أنا مقتنع بأن سكتش، في الوقت الحالي، هو أفضل أداة لتصميم المواقع وواجهات المستخدم والتطبيقات." براين هوف Brian Hoff يبدو وبشكل واضح، أنّه مع العديد من مزايا سكتش، فقد انتصر هذا الأخير على فوتوشوب. هل هذا يعني أنه يجب عليك أن تستعمل سكتش بدلا من فوتوشوب، لا سيما إذا كنت مجرد مبتدئ في مجال تصميم الويب؟ حسنًا، سيكون هذا سؤالًا صعبًا للغاية. صحيح أن العديد من المصمّمين يقومون بالفعل بالانتقال إلى سكتش لأنه، من ناحية، لا يكلّف سوى 99 دولارًا. ومن ناحية أخرى، يمكن أن يجعلك Creative Cloud تنفق 49.99 دولارًا للاشتراك الشهريّ. يلعب الولاء دورًا كبيرًا في استمرار فوتوشوب سكتش تطبيق رائع، ولكن ما زال العديد مخلصين للفوتوشوب "أستطيع أن أرى المشاكل التي تحدث أثناء تبادل الملفات بين المصممين إذا لم ينتقل أحدهم إلى سكتش. ومع ذلك فإن جمال عالم الويب هو أنه يمكنك إنشاء الأصول التي تريدها، لذلك ومن هذا المنظور، باستطاعة سكتش أن يقوم بإخراج ملفات PNG أو أي نوع من الملفات مثلما يفعل فوتوشوب. " خوي فان Khoi Vin ومع ذلك، في هذه المرحلة، يبدو أن الانتقال الكامل إلى سكتش غير مرجح. وذلك لسبب واحد، وهو الناس، فهم بوجه عام يقاومون التغيير، بغض النظر عن مدى عظمة هذا التغيير. لسوء الحظ، فإن العديد من الشركات غير مستعدّة للتخلص من اعتيادها وراحتها في استخدام فوتوشوب لتصميم مشاريع واجهة المستخدم. يتطلب التبديل إلى سكتش وقتًا لكل فرد في الفريق لفهم كيفية عمل هذا التطبيق حتى يصبح في النهاية مريحًا في استخدامه. يمكننا القول أنه لا يزال من الآمن متابعة استخدام فوتوشوب. بمجرد أن تتقن استخدام فوتوشوب، يمكنك البدء بعد ذلك في تعلم سكتش. بعد كل شيء، ستقع على عاتقك مسؤولية تعلم أدوات جديدة باستمرار والتكيف مع استخدامها كلما كان ذلك ضروريًا. نأمل حقًا أن تكون لديك فكرة أفضل عن كلتا الأداتين الرائعتين، والآن نريد مشاركة بعض أوراق الغش الرائعة. خلاصة ما رأيك إذََا في فوتوشوب وسكتش، أيّهما تستخدم وما هي تجربتك معهم؟ هل جرّبت أيّ من تطبيقات الويب؟ شارك معنا رأيك أو تجربتك في قسم التعليقات. ترجمة -وبتصرف- للمقال Sketch vs Photoshop: 5 Expert Designers Share Their Thoughts لصاحبه Vincent Alocada

نأمل، بعد الانتهاء من هذا الدرس التعليمي، أن توظّف مهاراتك الجديدة وتبدأ في دمج التصميم المسطّح في مواقع الويب والمشاريع الخاصة بك. وإلى جانب ذلك، فإنّ حركة التصميم المسطّحة ليست جميلة من الناحية الجمالية فحسب، بل لها غرض وظيفي أيضًا. إنشاء أيقونة مسطّحة للصفحة الرئيسية قبل البدء بشرح الكيفيّة التي سيتمّ بها تصميم الأيقونة، لنطّلع على النتيجة النهائية: افتح برنامج الفوتوشوب، وأنشئ ملفََّا جديدََا مع إعطاء الخاصية preset القيمة photo (وضبط القيم التالية 10 إنشات × 8 إنشات، 300 DPI، خلفية شفافة Transparent Background، ألوان RGB). استخدم الأداة Rounded Rectangle وقم بإنشاء شكل جديد بالأبعاد 1736 بكسل / 1736 بكسل وشعاع طوله 83 بكسل وأعطه اللون ‎#82d8b5 (أو يمكنك اختيار اللون الذي يناسبك لهذا الشكل). باستخدام أداة القلم (Pen Tool)، ارسم شكلا مثل الشكل الموجود في الصورة أسفله، وأعطه اللون ‎#a30d00. سيكون هذا الشكل بمثابة السقف الخاص بأيقونة الصفحة الرئيسية التي ننشئها. بعد ذلك، دائما مع أداة القلم، ارسم شكلا مستطيلا مثل الذي في الصورة أدناه (الشكل ذو اللون الأبيض)، أعطه اللون الأبيض ‎#ffffff. وارسم مربعا صغيرا باستخدام أداة المستطيل Rectangle ثمّ أعطه اللون ‎#3498db: باستخدام أداة Rectangle هذه المرة، قم بإنشاء مستطيل بالأبعاد 248 بكسل / 396 بكسل و أعطه اللون ‎#fcab3a (سيجسّد هذا المستطيل باب المنزل). (يمكنك حفظ ما قمت به لحد الآن كصورة. وفي الواقع، يمكننا اعتبار هذه الصورة كأيقونة مسطحة للصفحة الرئيسية. ولكن لا زلت أريد إضافة ظلِِّ طويل للأيقونة، فاستمر.) بعد ذلك، باستخدام أداة القلم (Pen Tool)، و باستخدام اللون الأسود ‎#000000، ارسم شكلََا. ابدأه من الحافّة اليمنى للسقف. (عند الحافة التي يتقاطع بها اللونين الأحمر والأبيض) وقم بتمديد الرسم إلى خارج المستطيل ذو الزوايا المستديرة (المستعمَل كخلفيّة للأيقونة) ثمّ قم بإغلاق الشكل في الحافّة السفلّية اليسرى من صورة المنزل. سوف تصل إلى النتيجة التالية: أرجع طبقة الظلّ إلى الخلف (قم بجرّها إلى الأسفل من خلال لوحة الطبقات Layers Panel)، وقم بتنقيطها (Rasterize، التنقيط هو عملية تحويل شكلِِ متجهي إلى شكل منقّط أو مبكسل) بعد ذلك (انقر يمينا على الطبقة واختر Rasterize Layer). باستخدام أداة Magic Wand، حدّد طبقة المستطيل ذات الزوايا المستديرة بأكملها واعكس التحديد بعد ذلك (يمكنك استخدام الاختصار Ctrl + Shift + I). مع استمرار التحديد، انقر على طبقة الظلّ من لوحة الطبقات واضغط على حذف Delete من لوحة المفاتيح. أصبحت أيقونتك جاهزة الآن. لم يتبقى إلا حفظها، وللقيام بذلك انقر فوق ملف > حفظ للويب (File > ‏Save for Web، الاختصار هو Ctrl + Shift + Alt + S) احفظها بتنسيق PNG-24، مع تفعيل خاصية الشفافية. نريد أن يتم حفظ كل شيء بتنسيق PNG-24 لأنه يدعم الشفافية. بعدما انتهينا من أيقونة الصفحة الرئيسية، سننتقل الآن للعمل على أيقونة المنشورات. إنشاء أيقونة المنشورات المسطّحة 1- قم بفتح فوتوشوب وأعد الخطوتين الأولى والثانية من الشرح السابق (إنشاء ملف جديد و رسم مستطيل ذو زوايا مستديرة داخله كي نستعمله كخلفية للأيقونة) 2- أرسم مربّعََا مستدير الحوافّ بالأبعاد 929 بكسل / 929 بكسل و بشعاع 38 بكسل. استعملت اللون #f5ea74 ليشابه الملاحظة الملصقة. 3- أرسم خطََّا بسمك 1 بكسل و لوِّنه باللون #5d5608. وقم بوضعه في الجزء الأعلى من الملاحظة الملصقة. 4- أرسم خطوطا بسمك 15 بكسل و قم بصفّها كما هو موضح أدناه: انتبه للتباعد بين الخطوط، لأنني باعدت بينها بشكل أوسع قليلا لإضفاء شعور البساطة على الأيقونة. فالبساطة سمة من سمات التصميم المسطّح. 5- أرسم مستطيلا لتعبِّر عن الصورة التي تكون متواجدة بالملاحظة الملصقة. 6- أرسم ظلََّا للأيقونة كما تعلّمتَ في أيقونة الصفحة الرئيسية. 7- احفظ ما قمت بتصميمه وها هي الأيقونة جاهزة. أيقونتي من أنا واتصل بي يمكنك تحميل حزمة الأيقونات الكاملة من هنا. ترجمة -وبتصرف- للمقال How to Create a Flat Navigation Icon Set in Adobe Photoshop للفريق Editorial Team

يمكن أن يكون تصميم نشرة إخبارية صعبًا. فأنت لا تحتاج فقط إلى معرفة وفهم كيف يتوقّع المستخدمون أو القرّاء وصول المحتوى إليهم، بل إنّك تعاني أيضًا من مشكلة جعل تصميم النشرة الإخبارية متوافقًا مع مختلف عملاء البريد الالكتروني. إذا كنت تدرس تصاميم النشرات الإخبارية الحالية، فهذا سيساعدك لفهم آلية عمل تخطيطات هذه الأخيرة وشفرتها البرمجية. لهذا السبب، قمت بانتقاء 10 من أفضل تصاميم الرسائل الإخبارية المتجاوبة بالكامل والمواكبة لمعايير البرمجة الحديثة. إذا كنت تخطّط لإطلاق نشرة إخبارية خاصة بك، ستكون هذه التصميمات مصدر إلهام كبير لك. seatGeek مع تصميم أحادي العمود وأسلوب خطٍّ كبير، أحبّ الطريقة التي يستخدم بها البريد SeatGeek الأيقونات والرسومات البسيطة لجذب انتباهك. تأخد الخطوط الكبيرة أيضًا نسبة عالية من الصفحة مما يجعل قراءة النصوص سهلة للغاية. فقراتٍِ أقصر وخطٍّ أكبر وزرّ دعوة إجراء واضح في أسفل الصفحة، كلها عوامل من شأنها زيادة قابلية استخدام النشرة. سيقضي هذا التصميم الغرض منه عند استعماله مع رسائل التحقّق عبر البريد. PlayStation إذا كنت تبحث عن تصميم أكثر تعقيدًا، فإنّ إصدار Battlefield 1 من شركة Sony يقدّم بعض الأفكار الرائعة. يعتمد جلّ محتوى هذه الرسالة الإخبارية على الصور لتكرار موقع Sony PlayStation الرسمي. يعدّ هذا أمرًا رائعًا لبناء الوعي بالعلامة التجارية والثقة بها، ولكنّك تحسّ أنّ هذه النشرة فقيرة من ناحية المعلومات نظرًا لأنها لا تخبر القارئ بما يجب عمله أو ماذا تعني الرسالة. ومع ذلك، فإنّها مصمّمة بشكلِِ سلس للغاية وتوضّح الدور الذي تلعبه الرسومات عالية الجودة في تصاميم البريد. Social Print Studio لا يلزم أن تكون رسائل التحقّق عبر البريد معقّدة. ولكن لا بأس بإضافة بعض التفاصيل حول الموقع أو القائمة التي قام المستخدم بالتسجيل بها للتّو. يعدّ هذا البريد الإلكتروني بواسطة Social Print Studio رسالة تحقّق في المقام الأول، ولكنه يتضمن أيضًا نقاطًا حول الموقع وما يمكن للمستخدمين الجدد توقّعه من خلال استخدامه. ويتضمّن أيضََا زر دعوة إلى إجراء باسم "shop" CTA يؤدّي مباشرةً إلى الموقع حيث يمكن للقرّاء طلب مطبوعات لصور الانستغرام الخاصة بهم. يعدّ هذا البريد مثالََا ممتازََا لإقناع المستخدمين بالعودة إلى الموقع مع زيادة عمليات التحقّق من الاشتراك. ##Archant إليك نشرة إخبارية عبر الايميل حقيقية ومثيرة للاهتمام والتي تضمّ رسالة تحديث التفضيلات من Archant (ناشر عبر الإنترنت). الهدف هو الاتصال بالمستخدمين الذين قد يكون لديهم إعدادات اشتراك صارمة جدًا (حظر جميع جهات الاتصال) أو متساهلة للغاية (تلقّي رسائل بريد إلكتروني كثيرة جدًا). فهذه طريقة رائعة للاتصال بالمشتركين الحاليين وجلبهم للتسجيل في المزيد من القوائم. WistiaFest2017 عادة ما تكون النشرات الإخبارية لأحداث وفعاليات مثل هذه بسيطةََ للغاية. فالأهداف التي يصبون إليها قليلة: مشاركة المعلومات حول الحدث وتشجيع المشتركين لشراء تذكرتهم في وقت مبكِّر. تحتوي هذه الرسالة الإخبارية على كلّ ما ذكرناه سابقا وبكثرة، مع وجود أزرار دعوة الإجراء (CTA) للتحقّق من المتحدّثين بالحدث والاشتراك للحصول على تذكرة. ويتّبع التخطيط أيضًا تصميمًا أحادي العمود والذي عادةََ ما يُعتبر مثاليََا بالنسبة لرسائل البريد الالكترونية . لا تخرج قوائم الأحداث بانتظام، فمن الضروري تضمين الشعار بالقرب من أعلى الصفحة. وبهذه الطريقة، سيعرف المشتركون تمامًا ما هو فحوى الرسالة رغم أنّه من الممكن أن تمرّ سنة على آخر رسالة قد تلقّوها. ندوة Sprout Social النشرات الإخبارية الخاصّة ب Sprout Social مصمّمة بطريقة رائعة وشفرتها البرمجية غير اعتيادية. ألقِ نظرة على هذا التصميم البسيط للترويج لندوة عبر الإنترنت. التصميم قصير جدًا ويستخدم الرسوم البيانية للفت الانتباه. كما يستخدم قوائم نقطية مع الأيقونات للمساعدة في الترويج للندوة حيث أن النقاط النقطية أسهل بكثير في القراءة من الفقرات. بالإضافة إلى ذلك، فإنّ نداء إجراء النشاط (CTA) الأخضر الكبير متواجدُُ فوق الطيّة بشكل جيد (أي أنه يظهر في الواجهة فور تحميل الصفحة دون الحاجة إلى تمرير الفأرة إلى الأسفل) ويدفع جدول أعمال ندوتهم على الويب إلى الأسفل. يمكنك استبدال العديد من هذه العناصر بعناصرك الخاصة والحصول على نتائج رائعة. ميزة جدولة منشورات الانستغرام الخاصة ب Sprout Social لنلقٍ نظرة على مثال آخر من Sprout Social، وهو هذا البريد الترويجي الذي يغطي ميزة جدولة Instagram الخاصة بهم. يختلف هذا التخطيط عمّا سبق بكونه يحتوي على شبكة بعمودين متناوبين. وهو يستخدم الأيقونات المربعة الموضوعة بجانب صناديق تحوي معلومات مربعة مع صور واضحة. إنّه لتصوّرُُ رائع وينسجم بشكلِِ جميل مع الشكل العام. إذا كنت تبحث عن قالبِِ بسيط لدراسته أو ربما إعادة إنشائه، فيجب عليك التحقّق من رسائل Sprout Social الإلكترونية. فبالنظر إلى جميع العوامل مثل المرئيّات، النسخ وهيكل الصفحة، تقوم Sprout Social بالتسويق عبر الايميل بشكل صحيح. Moo Design من بطاقات العمل إلى الملصقات المخصّصة، تبيع هذه الرسالة الإخبارية الترويجية المنتج بشكلِِ جيّد. يمكنك تعلم الكثير من خلال دراسة كيف تروّج مواقع الويب الأخرى لمحتواها، وتعدّ هذه النشرة الإخبارية مثالًا رائعًا. تُظهر صور المنتج كيف يمكن استخدام هذه العناصر ويمكنك أيضًا معرفة الكثير من أسلوب البريد ومظهره. تَظهر هذه الصور بشكل غنيّ وممتع وتجعلك تحسّ بشعورٍ خفيف من الفكاهة. هذا يجسّد للقراء كيف تشعر هذه المنتجات ولماذا قد ترغب في زيارة Moo. تستخدم الرسالة الإخبارية ميزة المنتج المكوّن من عمودين مع تجميعات من الصور والنصوص. وهي طريقة ممتازة لجذب الانتباه وزيادة التحويلات. Under Armor تحظى علامة Under Armor بشعبيةِِ كبيرة في مجتمع اللياقة البدنية. لديهم الكثير من المنتجات الرائعة وتصميم النشرة الإخبارية الخاصّة بهم يبيع سلعهم بشكل جيد. لاحظ عدد الصور الفريدة المستخدمة في هذا التصميم. من المنطقيّ، في بعض المنتجات، إضافة صور أكثر من نص. تخدم العناصر المُجمِّعة التي تحتوي على الصور ونداءات إجراء النشاط (CTA) الرسالة الإخبارية لـ Under Armor بشكلِِ جيّد، وهي عادةً استراتيجية جيّدة لجميع السلع المادية. Runtastic . تعدّ قوائم ميزات المنتج رائعةََ للترويج لتطبيقات الأجهزة المحمولة والبرامج الرقمية. ويعتمد بريد Runtastic هذا على لقطات شاشة للتطبيق وأيقونات صغيرة مسطّحة لتلفت انتباهك. الهدف من هذه الرسالة الإخبارية هو تشجيع النقرات المحوّلة وجعل المستخدمين الجدد يتعمقون في الميزات. إنّها مجموعة كاملة من البرامج وأدوات التتبّع بحيث يمكن أن يستغرق الأمر بعض الوقت لتعلّم كلّ شيء. ولكن من خلال بريد متابعة رائع، يمكنك تقديم معلومات كافية لإثارة فضول الناس ورغبتهم في معرفة المزيد. هذه فقط بعض من أفضل تصاميم الرسائل الإخبارية التي وجدتها ولكن هناك العشرات الأخرى منها. وبغضّ النظر عما تروِّج له أو لماذا تحتاج إلى رسالة إخبارية في الأصل، ستساعدك هذه التصاميم على التخطيط لتصاميم قابلة للاستخدام وذات شفرة مصدر نظيفة وسلسة للانطلاق منها. ترجمة -وبتصرف- للمقال 10 Newsletter Layouts With Free Source Code لصاحبه Jake Rocheleau

عندما تقرِّر إنشاء متجرك الالكتروني الخاص، ستجد نفسك تائهًا وقلقًا بخصوص خطوات بناء المتجر بحدّ ذاته، و من الممكن أن تنسى واحدة من الخطوات المصيرية لنجاح متجرك، ألا وهي التّسويق. وعندما أقول التّسويق فأنا لا أقصد أنّك تحتاج فريقًًا للتّسويق الذّاتي. كلّ ما عليك القيام به هو متابعة وسائل التواصل الاجتماعي والبدء بالتدوين وانتزاع أرصدة الدعاية المجّانية للمضيفين. إنّ مظهر المتجر الإلكتروني أهمّ بكثير من إشهاره وجعله بارزًا. فإن كنت تمتلك شعارًا فريدًا من نوعه، ومحتوى تسويقي مريح للعين وموقع جميل، فسيجعلك هذا ممّيزََا في عالم التجارة الإلكترونية. ومن حسن حظِّك، فلن تحتاج أن تكون مصممًا متمرسًا كي تقوم بإنشاء تصاميم لائقة. كل ما عليك فعله هو أخذ فكرة عن أساسيات التصميم، وستكون قد بدأت فعلا برسم طريقك نحو الاحتراف. أهمية التصميم الجرافيكي من السهل البدء في التصميم الجرافيكي رغم أنه مجال صعب الإتقان. ولكن عندما يتعلق الأمر بتسويق موقع تجارة إلكترونية، أو أي نوع آخر من المواقع، فإن الاستعمال الجيد للتصميم الجرافيكي هو المفتاح. يجب على كل من متجرك، والإعلانات والصور التي تنشرها على مواقع التواصل الاجتماعي أن يحظى بمظهر أصلي و جذاب، و إلا سيضجر الزوار من متجرك سريعًا و يغادرون. المظهر يجب عليك أن تعلم أن أول شيء يجب أن تأخذه بالحسبان هو نوع المظهر الذي تريد: بسيط؟ عصري؟ فني؟ و يجب أن تعلم أيضًا أنَّ المنتج الذي تبيعه يلعب دورا مهما في اختيارك للمظهر المناسب. فمثلا المتجر الذي يبيع قطع الحواسيب أو الألعاب الإلكترونية سيحتاج مظهر داكن لكي يُكَمِّل المنتج. إن كان متجرك يبدو بمظهر جيد، فيمكنك الاحتفاظ بنفس المظهر أو يمكنك تغييره لتصميم مشابه. حاول اختيار مظهر ينجسم مع منتجاتك، أو شركتك أو شكل موقعك. أسعى وراء الأصالة والابداع قبل كل شيء، فهذا ما يجعل موقعك، أو إعلاناتك أو بريدك مختلف عن أي أحد آخر. التموضع لا يتجسد التصميم الجرافيكي في الفن وإعداد الصور فقط، كما يظن الكثير، فوضع العناصر وتنسيقها بشكل صحيح واستعمال التباعد (المساحة المتواجدة بين العناصر) الملائم بين العناصر أمور ضرورية أيضًا. ارسم أو استخدم برنامجًا لتحرير الصور لرسم موضع كل عنصر. لا داعي للقلق بشأن المحاذاة والتماثل حتى الآن. انظر فقط كيف يظهر النسق على الورق. حاول أن ترى كيف تنسجم القطع (العناصر) مع بعضها البعض، و شدّ عينيك جيدا كي تستطيع تقييم مظهر الموقع من نسقه فقط دون وجود كل التفاصيل. استخدم نصًا نائبًا وصورًا حتى تكون لديك فكرة جيدة عن شكل المنتج النهائي. إذا لم تكن مرتاحا مع فكرة البدء من نقطة الصفر، فلا تخجل من استخدام قالب. على الأقل، يجب عليك دراسة ما فعله الآخرون، سواء كنت تغيّر مظهر موقع ويب أو تنشئ إعلانًا أو تكتب منشورًا لنشره في مدونة. حاول تذكر القاعدة الوحيدة للفن: استخدم دائمًا الصور المرجعية. الخطوط والأشكال على الرغم من بساطتها، يمكن استخدام الخطوط والأشكال البسيطة بشكل كبير في الصورة. فغالبًا ما يكون التصميم المباشر والبسيط أفضل من التصميم مفرط التعقيد. يمكن للخطوط فصل المحتوى أو ربطه، ومن الممكن أن تحيط أو تميز أجزاءً مهمة من الصورة. بإمكان أشكال بسيطة رسم العين. لذلك فالجمع بين أنواع مختلفة من الأشكال يمكن أن يجعل الصورة ديناميكية وجذابة إن الصور القوية والتي يتم تحتوي على أشكال جريئة ومميزة ترسخ في أذهان العملاء. الألوان تعدُّ الألوان واحدة من أهم جوانب التصميم. اختيارك للألوان يمكن أن يخلق متعة للعينين كما يمكن أن يخلق فوضى شديدة. مما يجعل اختيارك للألوان الجيدة قرارََا قابلاََ للنقاش، ولكن هناك بعض القواعد التي يجب تذكرها: لا تستعمل الكثير من الألوان، بل حاول أن تستعمل لونين على الأقل ولا تتعدى 4 ألوان في المجمل وسيكون هذا مثالي. تباين الألوان ملفت للنظر وجيد عند استعماله بالإعلانات، ولكن يمكن أن يكون مبهرجًا ومزعجًا. الألوان المتناظرة أكثر تناسقًا، ولكنها قد تبدو باهتة دون تباين. لنأخذ بالحسبان المزاج المراد إيصاله من خلال الصورة. هل تحاول خلق الإثارة؟ سيلفت اللون الأحمر المشتعل الانتباه بالتأكيد. أم أنك من النوع الذي يفضل الألوان الهادئة بالعمل؟ الأزرق اللطيف، الأخضر والأبيض كلها ألوان مثالية لتحقيق مبتغاك. أما إذا كنت تبيع منتجات لطيفة مثل الألعاب، فقد يكون الباستيل مناسبًا. إن لم تكن متيقنا من الألوان المناسبة لمشروعك، فأفضل حل أمامك هو الحصول على نظام الألوان من أي موقع يوفر هذه الخدمة. أسلوب الخط يمكننا القول أن أسلوب الخط هو الأكثر أهمية في التصميم الجرافيكي. يُعدُّ العثور على الخط واللون والموضع الصحيح أمرًا ضروريًا إذا كنت تريد أن ينتبه الأشخاص لما تقوله الكلمات التي تكتبها. استعمل أحجام خطوط مختلفة كلما اختلف نوع النص (الترويسة، النص الأساسي، الأزرار)، ولكن احتفظ بنفس هذه الأحجام في مختلف صفحات موقعك. يجب ألا يتعدى عدد أنواع الخطوط داخل موقعك الثلاثة أنواع. الصور الصغيرة مثل البنر ستظهر بشكل رائع بخط أو خطين. لا تفرط في استخدام الخطوط الأسلوبية أو المخطوطة. تأكد من أن يكون النص سهل القراءة. وذلك باستخدامك للونِِ متباينِِ بحيث ينبثق النص ويسهل قراءته. كن حذرًا عند كتابتك للمحتوى كذلك. حاول أن تصل إلى ما ترمي إليه بسرعة، وذلك باستخدام كلمات وجمل قصيرة. قم بتضمين نصوص تشجع الناس على "النقر هنا" أو "الاتصال الآن". البساطة في عالم التصميم الجرافيكي، من الأفضل عمومًا اتباع أسلوب بسيط فهو أسهل من ناحية التنفيذ وغالبًا ما يبدو أفضل. لا تحشر كل المساحة الحرة بنصوص عملاقة وصور عشوائية أو أي فوضى أخرى. المساحة البيضاء بمثابة النعمة، فهي تلفت الانتباه نحو العناصر البصرية كما تخفف الجهد على عين الإنسان. حاول أن تستخدم الأشكال البسيطة والأساسية قبل التفكير في استعمال الصور المعقدة. عمومًا، استخدم أقل قدر ممكن من الخطوط والألوان والرسومات. حاول اختيار خطوط ولوحة ألوان صغيرة والمجموعة التي تكفيك من الصور. من الأفضل أن يطلق على إبداعك "عادي" أضعف الإيمان بدلًا من "قبيح". كيف توظف التصميم في التسويق الآن وبعد أن تعرفت على الأساسيات، كيف ومتى يتم تطبيقها؟ يمكنك الجزم بأنَّ التسويق لا يقتصر على الإعلانات وحملات البريد الإلكتروني فهو يبدأ بموقعك وكل ما تنشره عبر الإنترنت. الشعار وتصميم الموقع إن كنت تفكر في إنشاء متجرك الإلكتروني ولم تبدأ بعد بإنشائه، فإن أساسيات التصميم هذه ستخدمك بشكل جيد. ينبغي أن تكون سهولة الاستخدام والبساطة هدفك الرئيسي. إذا لم يستطع أحد العثور على متجرك وسط كل المتاجر الموجودة، فأنت تخسر المال. وبدلًا من ذلك، جرب مرة أخرى وأنشئ موقعًا يسهل التنقل فيه ويحسن النظر إليه. قد يكون استخدام منصة للتجارة الإلكترونية مثل BigCommerce هو الحل. فموقع الويب الخاص بك هو أهم جزء من استراتيجية التسويق الخاصة بك - ما فائدة الإعلان إذا كان موقع الويب الخاص بك غير متساوٍ أو منافس للمواقع الآخرى ؟ تحتوي حزمة التجارة الإلكترونية على ميزات حيوية مثل أداة إنشاء السحب والإفلات (drag-and-drop builder)، ونظام إدارة المحتوى مع إمكانية الاطلاع على التحاليل والاحصائيات، وإدارة المخزون وأدوات البيع. قد يكون من الصعب تضمين هذه الميزات دون الاعتماد على هذه الحزمة، حتى لو كنت مطور ويب بارع. و لكن الأمر يغدو سهلًا و سلسًا من خلال منصات التجارة الإلكترونية. بالنسبة للشعار، فإن استعمال الألوان الفاتحة والأشكال البسيطة لإنشائه ستكون أفضل طريقة لصنع شيء راسخ ولا يُنسَ. استخدام ثلاثة ألوان سيكون مثاليًا، فما لا تعلمه هو أن هناك بعض الشعارات الشهيرة جدا والتي تحوى لونًا واحدًا وحتى شكل أو شكلين. لا تنسَ الاهتمام بمدونة شركتك. فيجب أن لا تكون المنشورات مجرد كتلة نصية، بل عليك استخدم الصور و أسلوب خط ذكي لإنشاء مدونة أكثر جمالا. الاعلانات عندما يتعلق الأمر بالإعلانات، يجب عليك مقاومة رغبتك في صنع إعلان وامض أو مشع للغاية. فلا أحد يحب مشاهدة أحد هذه الإعلانات منبثقًا على شاشته، و ستجد نفسك في الأخير ضمن القائمة السوداء. بدلاً من ذلك، جرب أن تنشئ شييًا بسيطًا يبرز من صفحة ويب نموذجية وفي نفس الوقت يلفت الأنظار. قم بدمج حركات بسيطة لجذب الانتباه أكثر، دون تعطيل أو إزعاج المشاهدين. التسويق عبر البريد الإلكتروني قد يتم إنشاء رسائل البريد الإلكتروني في المقام الأول من الكلمات، ولكن هذا ليس عذرََا كافيًا لتجاهل كيف يبدو شكل الرسالة في الأخير. فشكل النص والصور هو الفرق بين حملة البريد الإلكتروني الناجحة وبين تلك التي ينتهي بها المطاف في سلة المهملات. استخدم الصور دائمََا، فرسائل البريد الإلكتروني التي تحوي النص العادي فقط مملة بصريا. لإنشاء تصاميم أكثر إرضاء لبريدك، فكر في استخدام خدمة مثل MailChimp. تحتوي مواقع مثل هذه على قوالب يمكنك تخصيصها وسحب الصور إليها بسهولة. مواقع التواصل الاجتماعي حتى على Twitter، يلعب التصميم الجرافيكي دورًا كبيرًا. فمثلا، الحساب المليء بالروابط و المنشورات النصية فقط هو حساب ممل و لا توجد أي متعة في تصفحه؛ ستحصل على المزيد من المتابعين إذا كانت صفحات التواصل الاجتماعي الخاصة بك ممتعة و يوجد بها التنوع. على الرغم من أن هذا يندرج تحت تحرير الصور والفيديو، فلا يزال بإمكاننا تطبيق مبادئ الألوان وأسلوب الخط السابق ذكرها. اصنع شيئًا بارزًا مع معرفتك بالتصميم وكيفية تطبيقه، يجب أن تكون قادرًا على إطلاق حملة تسويقية ناجحة وجميلة. فقط تذكر: اعتمد البساطة والألوان والأشكال القوية والمواضع الواضح والطباعة الجيدة. حاول أن تكون تصاميمك لافتة للنظر، و ليست مشتتة للانتباه في نفس الوقت. ضع هذه الإرشادات بعين الاعتبار، و سيسهل عليك إنشاء مواقع ويب جميلة دون عناء، أو تصميم لافتات إعلانية لافتة للنظر، أو حتى إنشاء تدوينات ورسائل بريد رائعة. ولن تحتاج لتوظيف مصمم مجددا! ترجمة -وبتصرف- للمقال The Marketing Design Elements Every eCommerce Website Needs لصاحبته Brenda Stokes Barron

في فنّ التبسيط (minimalism)، يتمّ تشريح التصميم وتجريده من أي زوائد بشكل يتمّ الاحتفاظ بالعناصر الأساسية فقط. على الرغم من صعوبة إتقانه، إلا أن التبسيط فنّ يمكنك تعلمه بسهولة. إذا كنت ترغب في تجربة التبسيط في أي مسعى فنيّ، يجب عليك تشفية العمل وتخفيفه إلى أقصى حد ممكن. يتعلّق الأمر كلّه بتجريد العمل حتى تتم إزالة كل ما لا لزوم له. بناءًا على هذه الأغراض والأهداف، يركّز المصممون على حذف العناصر غير الضرورية من التصميم، و مؤخّرََا أصبح المزيد منهم يقفزون إلى هذا المجال الشائع. لقد زادت شعبية التبسيط بسرعة حيث نرى أن التصميم المسطّح قد غزا السوق مؤخّرََا. من خلال التصميم المسطّح، الذي يطبِّق المفاهيم والتقنيات التي يدعمها فنّ التبسيط، قام عددُُ متزايد من المواقع بتبنّي فكرة أنّ القليل هو فعلا كثير (Less is truly more). و لكن هل سبق أن سألت نفسك لماذا فنّ التبسيط شائعُُ إلى هذا الحدّ؟ ما الذي يكمن وراء شعبيّة مفهوم التصميم هذا؟ و نحن كمصمّمي مواقع إلكترونية، كيف نستغلّ هذه الشعبيّة لجعل تصاميمنا أكثر فعاليّة و جمالََا؟ لنكتشف هذا معًا. القليل كثير من المحتمل أن المهندس المعماري الرائد لودفيج ميس فان دير روه Ludwig Meis van der Rohe لم يعرف أبدًا أنه عندما قال "أقل هو أكثر"، فإنّه سيؤثّر على الكثير من العقول اللامعة التي عاشت بعده. تلخّص هذه الكلمات الثلاث جوهر فنّ التبسيط ومفهومه الحقيقي: موجز ومباشر. عند تصميم موقع ويب، يجب أن تسأل نفسك دائمًا سؤالًا، "ما هي وجهة نظري؟" وبهذه الطريقة، ستفهم دائمََا أين يتوجّب عليك قيادة مشاهديك. وجود تصميمِِ مبعثر سيمنع وصول المعنى لا غير. بحيث تميل العناصر غير الضرورية إلى أن تصبح عقباتِِ بدلاً من أن تكون جسورًا وممرّاتٍ في إرسال هدفك إلى المُشاهد. لماذا هذا سيئ؟ وجود البعثرة في التصميم سيشوّش المستخدم ويصرفه في أشياء أخرى بدلا من الاستجابة إلى دعوتك له للقيام بفعل معيّن. التصميم المشوّش يبعثر الصفحة أو النافذة مما يجعلها صعبة الفهم. كيف تحقّق الكثير من القليل؟ ضع خطّة موقع الويب الخاص بك بعناية كبيرة. فهذا يمنعك من إضافة العناصر غير الضرورية حتى قبل أن تلمس التصميم. حدّد هدفك، إذا كان عنصر التصميم لا يساعدك على تحقيق هدفك، فقم بإزالته. اقض بعض الوقت في سؤال نفسك، "هل أحتاج فعلا إلى هذا؟" حاول استخدام بعض برامج تتبع النقرات على موقع الويب الخاص بك لتحديد العناصر التي لا يستخدمها المشاهدون مطلقًا. بعد ذلك، قم بتقييم ما إذا كان سيتم حذف العناصر غير المستخدمة أو نقلها إلى موضع آخر. ارجع دائمًا للأساسيات. تجاوب التصاميم على مختلف الأجهزة مع زيادة عدد مستخدمي الهواتف الذكية كلّ يوم، يجب أن تكون مواقع الويب متجاوبة مع مختلف الشاشات. بمجرّد مشاهدة موقعك على الويب وتجاوبه بشكل جميل، فإنك تزيد من فرصك للوصول إلى هدفك. الآن، لماذا أشرت إلى تصميم مواقع الويب المتجاوبة هنا؟ وما هو الدور الذي يلعبه في شعبية فنّ التبسيط؟ نقطة مهمة يمكن أن تمتاز مواقع الويب المتجاوبة، في حالة استخدام تصميم هيكلي (wire-frame) و نظام شبكي فريدين من نوعهما، بانتقالِِ سلس من شكلها على الحاسوب إلى شكلها على الهاتف النقّال. مع وجود محتوى أقلّ، وعدد أقلّ من التجميعات وعناصر التصميم (التي تلتزم بفنّ التبسيط)، بالإضافة إلى الكثير من المساحات البيضاء، تتمتّع مواقع الويب التجريدية بفرص أكبر للتحوّل إلى نسخ جميلة على الهاتف المحمول. هناك شيء آخر حول التجاوب وارتباطه بالتبسيط وهو المستخدمون. فمستخدمو الهاتف المحمول أقلّ صبرًا، ومشغولون طوال الوقت ودائمو التنقّل. في معظم الأوقات، يكون لديهم ولوجًا محدودًا للإنترنت وجدولًا زمنيًا أكثر محدودية. ولكن يمكن أن يكون وصول مستخدم الهاتف المحمول العادي إلى المعلومات مفيدًا للغاية. تذكّر، إذا أراد المستخدمون شيئا، فاعطيه لهم في أسرع وقت ممكن. إليك بعض الأشياء التي تحتاج إلى تذكّرها حول التصميم المتجاوب: فكِّر بشكل متجاوب. هناك تخطيطات مثالية لعمل تصميم متجاوب كما هناك تخطيطات أخرى ليست كذلك. فهم هذا من شأنه أن يجعلك تصمم مواقع تتجاوب مع أي جهازِِ كان. إيلاء الاهتمام لنقاط الفصل. تحتوي القرارات على نقاط توقف مختلفة. ستكون نقاط التوقف هذه هي دليلك في التصميم لأحجام مختلفة للشاشة. يجب أن تكون الصور مرنة. عند تغيير عرض الصفحة، تأكّد من أن تتجاوب صورك مع هذا التغيير قدر الإمكان. مواقع ويب أخفّ حجمًا تخيّل نفسك في منطاد الهواء الساخن. تخطو إلى الداخل، تشغّل الموقد، ويتمدّد البالون. لكن لا يمكنك الإقلاع لأن هذه الأكياس الثقيلة من الرمال تسحب البالون إلى الأرض. ماذا كنت ستفعل؟ ربما تكون الإجابة هي أن المواقع الإلكترونية الأخفّ هي المساهم الرئيسي في شعبية فنّ التجريد. وجود عناصر قليلة في التصميم سيعني موقع ويب أخفّ. تعني قلة المحتوى، عناصر واجهة المستخدم وعناصر التصميم داخل موقعك أنّ هناك بيانات أقلّ تحتاج إلى تنزيل بيانات بواسطة متصفحك، ممّا يمنحك تجربة مستخدم أسرع وأخفّ حجمًا وأكثر كفاءةََ وإنتاجية. يجب عليك بالأساس أن تقوم بمراعاة التجاوب وأنت تصمّم لأنّ ذلك سيلعب دورََا فى مدى سرعة تحميل الموقع على الهواتف المحمولة. بناءك لمواقع ويب خفيفة يعني سهولة تحديثتها، صيانتها أو اكتشاف الخلل فيها. تذكّر، ليس هناك أي شخص عاقل سيحب موقعا يتطلب الدّهر لتحميله. إليك بعض النصائح: احذف الإضافات غير المستخدمة. أزل أي شيء غير فعّال. إن استطعت إنشاء أيّ عنصر تصميم باستخدام الكود، فقم بذلك. علم متى يجب عليك استعمال PNG أو GIF أو JPG. المزيد من المحتوى الموجه أراهن أنّنا جميعََا نعرف أنّ المحتوى هو أهمّ شيء. لذلك أعتقد أنّ ما يدفع الناس نحو التبسيط هو عقليّتها القائمة على أهمّية المحتوى. نظرًا لأنّ مواقع الويب التجريديّة ترغب في التخلّص من العناصر غير الضروريّة، وتقسيم التصميم إلى أبسط شكلِِ ممكن، فإنها تجعل المستخدم يركّز على أكثر الأشياء أهمّيةََ: المحتوى. بدون كل مصادر الإلهاء، يمكن للمستخدمين العثور بسهولة على ما يحتاجون إليه للتجاوب مع دعوات القيام بنشاط ما. وهذا يجعل كفاءة مواقع الويب أعلى لأنها تحقّق أفضل تجارب استخدام بأقلّ جهد ممكن في التصميم والصيانة. كيف تصمم من أجل المحتوى؟ استخدم المحاذاة المناسبة. استغلّ المساحات الفارغة. استعمل الخطوط المناسبة. الحجم مهمّ. الخلاصة لماذا فنّ التجريد شعبيُُّ جدّا؟ حسنًا، إنّ هذا الفنّ يعكس طريقة الحياة التي تشجّع الاستبطان. ما هي الأشياء التي لستُ بحاجة إليها؟ ما هي الأشياء الأساسية بالنسبة لي؟ وكمصمّم، فإنّ الإجابة على هذا السؤال ستقودك إلى إدراك ما الذي يساعدك حقًا وما يجب عليك التمسّك والاحتفاظ به. تصميم سعيد! ترجمة -وبتصرف- للمقال The Rise in Popularity of Minimalism in Web Design للفريق Editorial Team