المحتوى عن 'portfolio'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • مقالات عامة
  • التجارة الإلكترونية

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML5
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة R
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات عامّة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • مقالات عامّة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 4 نتائج

  1. لم تعد الوظائف كالسّابق حيث كان عليك الجلوس في مكان محدّد لوقت محدّد يملؤه الملل، فلقد تحولّ العالم كلّه إلى الرّقميّات وأصبح كلّ شيءٍ رقميًّا، وصار بإمكان النّاس العمل في أيّ مكان يريدونه، والفضل يعود للإنترنت. لم يعد هناك ما يُسمّى بالبحث عن وظيفة، فالفرص على الإنترنت أصبحت أكثر من أن تُعدّ، وقلّما تجد من يقرأ جرائد إعلانات التّوظيف لأنّ العمل الحرّ أصبح خيارًا متاحًا، ولكنّ عليك تذكّر بعض الأمور قبل أن تقرّر بدء العمل الحرّ، وأحد هذه الأمور هو البدء في تجهيز قائمة أعمالك. يمكنك أن تضع نسخًا من أعمالك السّابقة في قائمة وتسمّيها قائمة أعمال، ولكنّ ذلك لن يكون الخيار الأفضل على الأرجح، فأنت في عصر المعلومات، وعمل موقع ويب كمعرضٍ لأعمالك خيارٌ أفضل بكثير. قد تتساءل "لم عليّ إنشاء قائمةٍ بأعمالي؟ فعملي يسير على ما يُرام، لم عليّ بذل جهدي في أمر مزعجٍ كهذا سيستهلك وقتًا في تصنيف وتجميع أعمالي السّابقة؟" ستجد في هذا المقال بعض الأسباب الّتي ستقنعك بإنشاء موقع معرض أعمالك الآن: ستساعدك على التميز عن الباقينستواجهك منافسةٌ كبيرةٌ عند تقديم عرضك على عملٍ ما، ولتحسين فرصك أمام الزّبون يجب عليك إنشاء معرض أعمالٍ جميلٍ ومتميّز. إليك بعض النّصائح لجعل معرض أعمالك متميّزًا: أنشء موقعًا لمعرض أعمالك ذا تصميمٍ فنّيّ وجذّابضع أفضل أعمالك على الواجهةلا تضع أعمالك متوسّطة الجودةكن صادقًا ونزيهًااكتب عناوين جذّابة لأعمالكليرى زبائنك أعمالك في أي وقت وأي مكان صار لدى جميع النّاس هواتف ذكيّة، ولذلك عليك تهيئة معرض أعمالك ليراه زبائنك (عملاؤك المستقبليّون) في أيّ وقت يرغبون فيه بذلك، لذا اجعل معرض أعمالك جميلًا عن طريق: التّأكّد من أنّ الموقع يعمل بشكل جيّدتحسين نتائج الموقع في محركات البحثالتّأكّد من أنّك تستخدم رسومًا واضحةً وبسيطة لكنّها رائعةلحفظ الكثير من وقتك الوقت هو الحياة، وهو أهمّ شيء لصاحب العمل وللمستقلّ، ولذلك سيرغب أصحاب الأعمال في رؤية نماذج لعملك على الفور، وعندما يكون معرض أعمالك جاهزًا سيوفّر عليك النّقاشات والمقابلات الّتي تهدف للتّأكّد من مواهبك، وسيقودهم معرض أعمالك إلى الإجابة فورًا. لأنها تبين شخصيتك ستسمح لك بمشاركة أسلوب حياتك وشخصيّتك في أعمالك، فعليًّا أنت تشارك جزءًا من ذاتك مع النّاس عندما تنشر نماذج أعمالك، وسيتبيّن لصاحب العمل بسهولةٍ طبيعة الشّخص الّذي سيتعامل معه، كما يمكنك إدراج بعض شهاداتك ممّا سيجعلك أكثر وثوقيّة، كما أنّ توضيح لمساتك الشّخصيّة في أعمالك سيؤكّد ملكيّتك لها وأنّها ليست أول عشر نتائج وجدّتها عندما قمت بالبحث على Google. يمكنك الاستعانة بالنّصائح التّالية لجعل معرض أعمالك أكثر تعلّقًا بشخصيّتك: أضف شهاداتكاكتب بطريقة وصفيّة وبيّن ذاتك في ما تكتببيّن الصّعوبات الّتي واجهتك في أعمالك ومشاعرك أثناء القيام بهاأضف صورًا أثناء العمل إن كان ذلك ممكنًاتبين احترافيتك في عملك سيبيّن معرض أعمالك خبرتك الحقيقيّة، والموقع الّذي ستنشئه سيبيّن مهارتك وإبداعك وتنظيمك، وهذا يختلف كثيرًا عن كتابة قائمةٍ بإنجازاتك على ورقة. كلّما كان توثيق أعمالك وشهاداتك أكثر وضوحًا وتفصيلًا تبيّن لأصحاب الأعمال قدرتك على التّنظيم والإبداع، لذلك عليك الاهتمام بالعبارات وتصميم الصّفحة بأكبر قدرٍ ممكن. تجذب النظر دون بذل جهد لفت الانتباه وجذب الأنظار أمور أساسيّة لا يمكنك العيش بدونها في مجال تصميم صفحات الويب فالمنافسة شديدة، وعليك جذب النّظر إليك لأنّ هذه هي الطريقة الوحيدة لتجني المال، وعليك أن تجعل صاحب العمل ينظر إليك أكثر من أيّ شخصٍ آخر، وليس هناك أفضل من معرضِ أعمال مرتّب وجميلٍ للقيام بذلك، ستأتي إليك الوظيفة دون أن تطلبها حتّى. دع إنجازاتك تتكلّم عنك، ستوفّر الكثير من النّقاش مع الزّبائن لأنّك تريهم نماذج للنّتائج الّتي سيحصلون عليها بدلًا من الكلام الفارغ. سيجدك زبائنك المحتملون بسهولة سيكون هذا أفضل ما يقدّمه لك معرض أعمالك على الإطلاق، فهو على الإنترنت، وقد يعثر عليه أيّ زبون في أيّ وقت، فمعرض أعمالك يشبه إعلانًا كبيرًا تضعه في أحد الشّوارع، وستسوّق نفسك دون بذل أيّ جهد. ستعزز فرصتك للحصول على وظيفة سيسهّل معرض أعمالك على رجال الأعمال اتّخاذ قرارهم بتوظيفك، فهم يحبّون النّتائج السّريعة، وعندما يرون إنجازاتك وقدراتك وكم تجني من المال، فستحصل على أفضليّة في التّوظيف على الآخرين. خلاصة يتزايد انتشار مواقع الويب لعرض الأعمال، ولذلك عليك مواكبة ذلك كمستقلّ لعرض إنجازاتك لأنّ هذه هي الطّريقة الوحيدة لتحصل على الزّبائن وتحصل على وظيفة، أتمنّى لو تقوم الآن بإنشاء معرض أعمالك وتشاركه في التّعليقات كي نراه، بالتّوفيق. ترجمة -وبتصرّف- للمقال: 10Reasons Why You NEED to Launch Your Online Portfolio NOW لصاحبه: Rudolph Musngi. الصورة البارزة.
  2. في هذا الدرس سوف نقوم بتحويل تصميم تم إعداده باستخدام فوتوشوب وجعله صفحة ويب جاهزة وذلك باستخدام لغتي HTML وCSS (وهو أمر يُعرف أيضا تحت اسم “التكويد”). هذا هو التصميم الذي سوف نعمل على تكويده في هذا الدرس: استخراج بعض الصورقبل أن نبدأ في تكويد التصميم سوف نحتاج إلى استخراج بعض الصور منه (في الأسفل يوجد صورة توضيحية للملفات التي نحتاجها، وكوننا لا نملك الملف لاستخراج الملفات منه فيمكنك استعمال أي بديل تراه مناسبًا فالمهم هو أن تعرف كيفية التكويد وكتابة أكواد مناسبة). بنية ملف HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Chris Spooner Design Portfolio</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="container"> </div> </body> </html> يبدأ ملف الـHTML كما هو معتاد على وسم <doctype> و <head> وأخيرًا وسم <body>. كما أننا قمنا بربط ملف CSS بواسطة استعمال وسم <link> وأضفنا أيضًا وسم <div id="container"> ليعمل كحاوٍ لجميع محتوى الصفحة. <p id="logo"> <a href="#"><img src="images/logo.png" alt="Chris Spooner logo" /></a> </p> <ul id="nav"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact</a></li> </ul> <div id="header"> <h1>Hello, I'm Chris Spooner.</h1> <h2>I craft websites that are beautiful on both the inside and out.</h2> <p class="btn"><a href="portfolio.html">View my portfolio</a></p> </div>لو نظرت إلى التصميم سوف تجد أن القائمة تأتي قبل الشعار ولكن مع ذلك فإننا سوف نقوم بإضافة الشعار قبل القائمة حتى نبقي كل شيء مرتّبًا ومنظمًا. وضعنا الشعار داخل وسم <p> واستعملنا العنصر <ul> ليحتوي على عناصر القائمة وأضفنا أيضًا وسمي <h1> و <h2> وبداخلهما عنوان ومقدمة بسيطة. <div id="content"> <h3>About Chris Spooner</h3> <p>I earn a living by creating custom brands and logo designs from scratch, as well as designing and building high quality websites and blogs, but I also enjoy producing the odd t-shirt graphic, illustration or character design. I pride myself in having the nerdy skills to build top notch creations online, as well as being knowledgeable in the print side of design.</p> <h3>My latest work</h3> <p>I’m forever creating design work for both myself as personal projects and as a hired gun for clients from around the world. Here’s a few of my most recent works.</p> <div class="portfolio-item"> <a href="#"><img src="images/portfolio-1.jpg" alt="View more info" /></a> <p class="btn"><a href="#">See more</a></p> </div> <div class="portfolio-item"> <a href="#"><img src="images/portfolio-2.jpg" alt="View more info" /></a> <p class="btn"><a href="#">See more</a></p> </div> <div class="portfolio-item"> <a href="#"><img src="images/portfolio-3.jpg" alt="View more info" /></a> <p class="btn"><a href="#">See more</a></p> </div> <div class="portfolio-item"> <a href="#"><img src="images/portfolio-4.jpg" alt="View more info" /></a> <p class="btn"><a href="#">See more</a></p> </div> </div> <div id="footer"> <p id="copyright">&copy; Chris Spooner / SpoonGraphics (Please don’t steal my work)</p> <p id="back-top"><a href="#">Going up?</a></p> </div>قمنا بعد ذلك بإضافة وسم <h3> وبداخله نص يعتبر أقل أهمية عن النص السابق (فكما تعلم أنّ وسم <h1> أهم من <h2> ومن <h3> وهكذا). بعد ذلك قمنا بإضافة العنصر <div id="content"> وبداخله يوجد المحتوى الرئيسي للصفحة والعديد من وسوم <div> كل واحد منها يحتوي على صورة مصغرة عن أحد الأعمال التي قمنا بها (وكأنها معرض أعمال مُصغّر). وأخيرًا يوجد هناك التذييل (footer) ممثلًا بالعنصر <div id="footer"> وبداخله حقوق الملكية وزر العودة للأعلى. الآن وبعد أن انتهينا من ملف الـHTML دعونا ننتقل إلى تنسيق الصفحة باستعمال CSS. تنسيقات CSSbody, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { background: #f2f0eb url(images/bg.png); font: 16px Helvetica, Arial, Sans-Serif; color: #636363; line-height: 24px; } #container { width: 960px; margin: 0 auto; } #logo { margin: 10px auto 0 auto; position: relative; width: 183px; } بدأنا ملف الـCSS بتنسيقات بسيطة لإزالة التنيسقات الافتراضية للمتصفحات، وبعد ذلك قمنا بإضافة بعض التنسيقات لجسم المدونة (وسم <body>). لاحظ أننا قمنا في البداية بإضافة خلفية مزخرفة (صورة) إلى جسم المدونة وبعدها أضفنا بعض التنسيقات التي تخص الخطوط في الصفحة. قمنا بعدها بإعطاء العنصر الحاوي (container div) عرضًا بقيمة 960px واستعملنا أيضًا الخاصية margin: 0 auto لتوسيط العنصر في منتصف الصفحة، كما أننا أضفنا نفس الخاصية السابقة إلى الشعار حتى يتوسط في الصفحة. ul#nav { width: 940px; list-style: none; overflow: hidden; margin: -134px auto 25px auto; } ul#nav li { width: 126px; height: 33px; float: left; padding: 13px 0 0 0; background: url(images/nav-bg.png); font-weight: bold; text-align: center; text-transform: uppercase; } ul#nav li:nth-child(1) { margin: 0 60px 0 0; } ul#nav li:nth-child(2) { margin: 0 316px 0 0; } ul#nav li:nth-child(3) { margin: 0 60px 0 0; } ul#nav li:nth-child(4) { margin: 0; } ul#nav li a { color: #616369; text-decoration: none; } ul#nav li a:hover { color: #a12121; } سوف نحتاج لإضافة مجموعة من الخصائص للقائمة الرئيسية حتى تتماشى وتتوافق مع التصميم الذي نعمل عليه، فقمنا أولًا بتحريك العنصر <ul> إلى الأعلى وذلك باستخدام قيمة margin سالبة وبعدها قمنا بإعطاء كل عنصر من عناصر القائمة (عناصر <li>) مجموعة خصائص، أبعاد، خلفيات وتنسيقات خطوط حتى تتوافق مع التصميم الذي نريده. وحتى نجعل الصفحة تبدو كالتصميم تمامًا فإننا استخدمنا المحدد ()nth-child: حتى نُعطي قيم margin مختلفة لكل عنصر. #header { height: 244px; padding: 52px 0 0 57px; background: url(images/home-header.jpg); } #header h1 { font: 38px Georgia, Serif; color: #f2f0eb; letter-spacing: 2px; margin: 0 0 20px 0; text-shadow: 0px 3px 3px #494949; } #header h2 { width: 510px; font: 30px Georgia, Serif; color: #f2f0eb; letter-spacing: 2px; margin: 0 0 20px 0; text-shadow: 0px 3px 3px #494949; } #header p.btn a { display: block; width: 225px; height: 50px; overflow: hidden; background: url(images/home-header-btn.jpg); text-indent: -9999px; } لاحظ أننا أعطينا الترويسة (header) ارتفاعًا بقيمة 244px وذلك لأن ارتفاع صور الخلفية الذي أعطيناها لها هو 244px. بعد ذلك استخدمنا padding مناسب حتى نُبعد النصوص عن الحواف ونجعل كل شيء مناسبًا ومتوافقًا مع التصميم، وقمنا أيضًا بإعطاء الوسمين <h1> و <h2> الموجودين في الترويسة بعض تنسيقات الخطوط حتى تتوافق مع التصميم (نوع الخط Georgia واستخدمنا أيضًا الخاصية letter-spacing لزيادة المسافة بين كل أحرف الكلمات). يمكننا كذلك محاكاة تأثير الظل عن طريق استخدام الخاصية text-shadow، بينما أضفنا عرضًا بقيمة 510px للوسم <h2> حتى نمنع النص من الظهور فوق المنطقة المخصصة له. وأخيرًا قمنا باستخدام الخاصية ()background: url وبعض الخصائص الأخرى على العنصر الذي يحمل الفئة btn. وذلك لتحويله إلى زر كما هو موجود في التصميم. #content { background: url(images/content-bg.png) repeat-y; padding: 57px 69px 50px 69px; overflow: hidden; } #content h2 { font: 30px Georgia, Serif; letter-spacing: 2px; margin: 0 0 20px 0; } #content h3 { font: 26px Georgia, Serif; letter-spacing: 2px; margin: 0 0 20px 0; } #content p { margin: 0 0 30px 0; } #content a { color: #a12121; text-decoration: none; } #content a:hover { color: #671111; } #content .portfolio-item { width: 182px; padding: 4px; background: #eee; text-align: center; float: left; margin: 0 7px 14px 7px; } #content .portfolio-item p.btn { margin: 0; } #content .portfolio-item p.btn a { display: block; width: 183px; height: 29px; padding: 7px 0 0 0; background: url(images/see-more-bg.png); font-weight: bold; text-align: center; text-transform: uppercase; text-decoration: none; } الآن سنقوم بتنسيق المحتوى الرئيسي للمدونة. لاحظ أننا أعطينا العنصر content# صورة كخلفية وأضفنا padding بقيم معينة حتى نُبعد المحتوى عن الأطراف. بعد ذلك استخدمنا overflow: hidden حتى نتأكد من أنّ جميع العناصر الموجودة داخل هذا العنصر والتي تحمل الخاصية float لن تقوم بتشويه التصميم وتخطيط الصفحة (استخدام الخاصية overflow: hidden في مثل هذه الحالة يسمى clearing floats). قمنا كذلك باستخدام بعض الخصائص البسيطة للنصوص الموجودة داخل هذا العنصر (كنوع الخط وحجمه وبعض الأمور الأخرى). قمنا بعد ذلك بتنسيق الصور المصغرة وذلك بإعطائها خلفية بلون رمادي وإعطائها الخاصية float: left حتى تظهر جميع الصور إلى جانب بعضها أفقيًا، وأخيرًا قمنا بتنسيق عناصر <a> لنجعلها تبدو وكأنها أزرار وذلك بإعطائها خلفية باستعمال الخاصية ()background: url. #footer { background: url(images/footer-bg.png) no-repeat; padding: 40px 0 0 0; overflow: hidden; margin: 0 0 30px 0; } #footer p#copyright { font-size: 12px; float: left; margin: 0 0 0 30px; color: #b8b6b2; } #footer p#back-top { font-size: 12px; float: right; margin: 0 30px 0 0; } #footer a { color: #a12121; text-decoration: none; } #footer a:hover { color: #671111; } بقي علينا الآن تنسيق التذييل الخاص بالصفحة. الجزء الأسفل من المحتوى تم إضافته كخلفية للتذييل، وبعدها أضفنا padding بقيم مناسبة حتى ندفع بمحتوى التذييل إلى أسفل صورة الخلفية. لاحظ أننا استخدمنا no-repeat وذلك حتى نتأكد بأنّ الصورة تظهر مرة واحدة فقط ولا تتكرر. قمنا بإضافة خصائص نصيّة لكل من حقوق الملكية وكذلك زر العودة إلى الأعلى وقمنا أيضًا باستخدام الخاصية float لإزاحة العنصرين إلى يمين ويسار الصفحة. إضافة بعض الجافاسكربت لدعم متصفح IE8 وأقلإنّ متصفح IE8 والنسخ الأقدم منه لا تدعم المحدد nth-child: لذلك إذا أردت أن تدعم هذه المتصفحات فبإمكانك أن تستخدم مكتبة jQuery لتساعدنا في ذلك: $(document).ready(function() { $("ul#nav li:nth-child(1)").css("margin-right", "60px"); $("ul#nav li:nth-child(2)").css("margin-right", "316px"); $("ul#nav li:nth-child(3)").css("margin-right", "60px"); $("ul#nav li:nth-child(4)").css("margin-right", "0px"); });حتى وإن كانت تلك المتصفحات لا تدعم المحدد nth-child إلا أن استخدام هذا المحدد مع jQuery ممكن وسوف تقوم تلك المتصفحات بتطبيق التنسيقات بدون أي مشاكل. إنهاء الصفحات الداخليةبعد أن قدمنا بإنهاء الصفحة الرئيسية فإننا سوف نقوم ببناء الصفحات الداخلية للموقع. سوف تكون بنية هذه الصفحات متشابهة نوعًا ما مع القليل من الاختلافات كما أن فيها بعض العناصر المشتركة لذلك سيكون بناؤها أمرًا يسيرًا. <div id="header" class="page"> <h1>About Chris Spooner</h1> </div>لنقوم بتنسيق ترويسة أخرى يمكننا بكل بساطة أن نضيف فئة (class) للترويسة الخاصة بالصفحات الداخلية وبعدها نقوم بإعطاء هذه الترويسة حجمًا أصغر وصورة خلفية معينة. لقد قمنا مسبقًا بإنشاء الشيفرة البرمجية الخاصة بعناصر معرض الأعمال، لذلك يمكننا تكرار هذه العناصر لكل مشروع على حدة، وكل ما نحتاج لتغييره هو الصورة المصغرة الخاصة بكل مشروع. خاتمةوهكذا نكون قد قمنا بتكويد كامل التصميم. أتمنى أن تكونوا قد استفدتم من الدرس. ترجمة -وبتصرّف- للمقال How to Code a Stylish Portfolio Design in HTML/CSS لصاحبه Iggy.
  3. سنتعلم في هذا الدرس كيف نرسم التصميم العام لموقع معرض أعمال أنيق وجميل بواسطة برنامج فوتوشوب وباستخدام تأثيرات مختلفة وأساليب المزج وأنماط الطبقات. يتمتع الموقع الذي سنصممه بالأناقة والبساطة بذات الوقت وسيجذب رأس الصفحة المتناقض اهتمام المستخدمين. من ناحية أخرى فإن الفكرة هي الأناقة مع أسلوب طباعة كبير وتفاصيل خفيفة في عناصر الواجهة. بعد الانتهاء من التصميم وتجهيز ملف PSD يمكنك الذهاب إلى الدرس التالي لتتعلم كيفية برمجة وترميز التصميم باستخدام HTML و CSS. افتح ملفا جديدا على فوتوشوب. أنا اميل إلى العمل بأبعاد 1680×1050 للحصول على فكرة عما سيبدو عليه موقع الإنترنت في الشاشة العريضة. لوّن الخلفية باللون الرمادي الفاتح كلون الكْرِيم وطبّق فلتر noise من قائمة الفلاتر بقيمة 2%. بالزر الأيمن حوّل transform التحديد إلى 960px ثم ارسم أدلة لتحديد المركز والجوانب. استخدم أداة المستطيل مستدير الزوايا rounded rectangle لرسم منطقة المحتوى ولكن اترك حواف بقيمة 10px بعيدة عن الأدلة للسماح بظهور تأثير الظلال Drop Shadow التي سنضيفها لاحقًا. ألصق شعارك في مركز التصميم. استخدم أداة المستطيل مستدير الزوايا rounded rectangle tool لرسم زر في منطقة رأس الصفحة. غيّر خصائص المزج إلى Overlay للسماح بظهور الخامة الضمنية من خلال هذا الزر. أضف ظل داخلي رقيق لإعطاء الانطباع بأنه محفور داخل الأرضية. المفتاح هو تخفيف opacity نحو 10%. اصنع عدة نسخ من الزر وضعها على جانبي الشعار ثم أضف النص إلى كل زر منها. الصفحات النموذجية يجب أن تكون الصفحة الرئيسية، حول الموقع، معرض الأعمال وللاتصال بنا. انقر مع الضغط على مفتاح CMD أو Ctrl على مُصغّر منطقة المحتوى البيضاء ثم اسحب مع الضغط على مفتاح ALT عبر الجزء السفلي مع أداة marquee tool لترك تحديد قصير. لوّن هذه المنطقة باللون الأسود. افتح نافذة نمط الطبقة من أجل هذه الطبقة وأضف نقش متراكب. استخدمتُ هنا نمط الآيفون4 خامة القماش من Dr.Palaniraja. ارسم حدود رفيعة 4px عبر أسفل منطقة رأس الصفحة ولوّنها بالرمادي الفاتح. استخدم التدرج اللوني من الأسود إلى الشفافية لرسم ظلال قصيرة على طول حافة أسفل منطقة رأس الصفحة. خفف opacity لنحو 10%. استخدم خط Georgia لكتابة عنوان تقديمي أنيق في منطقة رأس الصفحة. أضف لمسة من الظل الفاتح شبه الشفاف إلى الحروف. ارسم زر باستخدام أداة المستطيل مستدير الزوايا rounded rectangle ثم استخدم نافذة نمط الطبقة لتجميل الزر. ابدأ مع تدرّج لوني مع الرمادي الداكن والفاتح القريب من ألوان أرضية منطقة رأس الصفحة. أعطي الزر مظهرًا مشطوفًا عبر التلاعب بالتوهج الداخلي Inner Glow بحدود رمادية فاتحة ثم أضف حدودًا رمادية داكنة بقيمة 1px. أكمِل تصميم الزر عبر إضافة النص واضبط الإعدادات لتأثير الظلال لإنشاء مظهر الإقحام داخل الأرضية. ألصق مثال عن عمل تصميم موقعك في رأس الصفحة. اصنع تحديد من منطقة رأس الصفحة ثم أضف قناع الطبقة لقص لقطة الشاشة على حجم الملف. أضف ظل Drop Shadow باستخدام تأثير أنماط طبقات الفوتوشوب ثم بالزر الأيمن اختر إنشاء طبقة Create Layer. استخدم خاصية الالتواء من ميزات التحول لثني الظل للخارج. خفف Opacity لمنحه مظهرًا وقعيًا. استخدم أسلوب الطباعة من رأس الصفحة في منطقة المحتوى الرئيسي ودوّن نسخة الجسم الرئيسي بواسطة خط sans-serif الكبير الجميل. ارسم مستطيل رمادي كقاعدة لمعاينة عنصر معرض الأعمال ثم اصنع زر مستطيل مستدير الزوايا بظلال داخلية. أكمل عنصر معرض الأعمال بمصغّر يبدأ بعرض المشروع ثم أضف نص الرابط مستخدمًا نمط النص في أزرار القائمة. اجمع Group وضاعف العناصر التي تمثل معرض الأعمال ووزعها بشكل صحيح مع استبدال الصورة المصغرة التي ستبرز آخر أعمالك. أكمل منطقة أسفل الصفحة بملاحظة حقوق النشر والرابط لأعلى الصفحة. فكرة الصفحة الرئيسية اكتملت الآن لذا دعونا نصمم الصفحات الداخلية. ضاعف ملف PSD وأطلق عليه اسم About. الصفحات الداخلية لا تحتاج إلى منطقة رأس كبيرة ولكن يمكننا أن نستخدم هذه المساحة لإظهار عنوان الصفحة. صغّر حجم منطقة رأس الصفحة. اضبط النص في رأس الصفحة لتقديم الصفحة. في هذه الحالة صفحة About ستكون بعنوان "About Chris Spooner" أو قد تكون فكرة جيدة لو استخدمت اسمك. ألصق نسخة جسم الصفحة لتملأ منطقة محتوى صفحة About. لا تنسَ أن تترك مساحة لوضع صورتك الشخصية. صفحة معرض الأعمال يمكن أن تصمم من خلال مضاعفة عناصر معرض الأعمال واستبدال المصغّرات بتصاميم مشاريعك. املأ الصفحة بعناصر معرض الأعمال المختارة. بما أننا بنينا هذا الموقع بنمط WordPress فسيكون علينا إنشاء مشاركة مدونة لكل من عناصر معرض الأعمال. استخدم مجموعة مختلفة من المستطيلات مستديرة الزوايا لتنسيق نموذج الاتصال في صفحة الاتصال ثم أدرج مجموعة من الأيقونة التي تمثل مواقع التواصل الاجتماعي المفضلة لديك. لا تنسَ أن تقرأ الدرس التالي لتتعلم كيف تحول ملف PSD هذا إلى موقع Html وCSS كامل. ترجمة -وبتصرّف- للمقال: How To Build a Stylish Portfolio Web Design Concept لصاحبه Chris Spooner.
  4. عندما تبدأ العمل ككاتب حر، قد تشتري اسم نطاق، ترفع موقعك إلى شبكة الإنترنت وتنتظر ليتهافت عليه العملاء، ولكن الوقت يمرّ دون أن يحدث أي شيء. هذا ما حدث معي، وعليه قمت بمراجعة كل ما كتبت في الموقع وعلمت أن هناك خطأ ما، فذهبت لمواقع التواصل الاجتماعي واستفسرت عن الأمر، وكنت على أهبة الاستعداد للتغيير من أجل زيادة الإنتاج والكسب. ولكن هل تعرف ماذا حدث بعد ذلك؟ لم يحدث شيء. في نهاية المطاف، راجعت ما كنت أفعله و حاولت جاهداً لإيجاد مواضع الخطأ، وأخيراً اعترفت لنفسي، فالخطأ كان مؤلماً، إن موقعي كان شبه طارد للعملاء، وليس فيه عناصر جاذبة. إذا كنت كاتبًا مستقلًا وتحاول الحصول على عملاء، ولكن ذلك لم يحدث، فقد حان الوقت لمواجهة الحقيقة القاسية، وهي أن موقعك طارد لزواره، يحدث هذا حتى وإن كانت لديك الخبرات والمهارات الجاذبة، ولكن العملاء المحتملين ما إن يدخلوا موقعك الخاص حتى يولوا مُدبرين. مع أخذ ما سبق بعين الاعتبار، سأحاول وضع الخطوط العريضة للأسباب التي تجعل من موقعك موقعاً طارداً، ومن ثم أشرح ما يمكنك عمله لتغيير الأمور للأفضل. بدون موقع على الشبكةخطأ فادح، أتمنى أنك لم تقع فريسة له، ولكن الكثير من المستقلين ليس لديهم موقع على شبكة الإنترنت، فإذا كنت حتى الآن بدون موقع على الشبكة، فأنت تمارس العمل الحر بالطريقة الخطأ. أطلق موقعًا أو مدوّنة، ارفع إليه قالبًا جاهزًا، أو حتى استعن بمُصمّم لتصميم قالب لك، المهم يجب أن يكون له حضور على الإنترنت. ولكن ابتعد قدر المُستطاع عن المنصات التي تُقدم الاستضافة المجانية والتي توفر أدوات لبناء موقعك من دون برمجة،لأن الإعلانات التجارية التي تُظهرها هذه المواقع ستجعلك تبدو أقل مهنية، استثمر بعض المال لحجز استضافة، إذا كنت تريد أن تُظهر عملك أكثر احترافية. الفوضى البصريةوهي من أكبر المشاكل التي يعاني منها الكثير من المواقع، فقد تجعل من قراءة مُحتوى الموقع مهمّة صعبة جدًا، لوجود الكثير من النصوص المكدسة فوق بعضها البعض، وهناك الكثير من الصفحات التي لا داعي لها أيضاً، أو أن اختيارك للألوان اختيار غير موفق ومشتت لتفكير الزائر. فالعملاء المحتملين هم في عجلة من أمرهم في الغالب، فلا يحبذ معظمهم فكرة بذل مجهود كبير لقراءة كل النصوص الطويلة على موقعك، وبالتالي فالكرة في ملعبك الآن. فمن الأفضل دائماً: اعتماد البساطة في عرض المعلومات على الإنترنت.أن تكون الصفحات الرئيسية قليلة قدر الإمكان، تحمل عناوين واضحة، وسهلة التنقل فيما بينها.حاول جاهداً أن تكون الفقرات قصيرة، فكثير من الناس يقرأ بالمسح السريع للنص.ليتمكن العميل من العثور على المعلومة بسرعة، أجعل النص بلون غامق على خلفية بيضاء، وتأكد من وجود مساحات بيضاء أكثر من النص.أعمل على وضع الصور والرسوم بشكل مدروس وعند الحاجة إليها فقط وليس لملء الفراغات.صعوبة التواصل معكأحد أكبر الأخطاء التي يمكن أن ترتكبها على موقعك هو عدم توفير معلومات الاتصال بشكل مترافق مع الخدمات التي يمكن أن تقدمها، فقد تُكثر من كلمة "إذا" مثل: إذا كنت ترغب في الحصول على اتصال. إذا كان لديك مشكلة. إذا كنت تعتقد أنك بحاجة للمساعدة.وغيرها الكثير، ولكنك في المقابل لم تخبر العملاء المحتملين ما يجب عليهم القيام به بالضبط. قد تطرح عليهم الأسئلة ولكن تترك لهم مهمة البحث عن معلومات الاتصال للحصول على المزيد من المعلومات. فبدل من استعمال كلمة "إذا" وتترك للعميل يتخيل كيف يتصل، عليك أن تقول له ما يجب عليه القيام به بالضبط، على سبيل المثال: اتصل بي اليوم في الفترة بين كذا وكذا. يمكنك الاشتراك في قائمتي البريدية والحصول على التقرير الخاص بك مجاناً.وبعدها بشكل مباشر عليك إضافة معلومات الاتصال الخاصة بك. ويُفضل وجود رقم الهاتف في مقدمة معلومات الاتصال، ثم عنوانك البريدي، ولا تنتظر أن يقوم بملء نموذج الاتصال. لا بد أن تحتوي جميع الصّفحات نداء للإجراء call-to-action، بشكل يُسهّل على الزّائر للاتّصال بك بطريقة لا تتطلّب أي جهد من طرفه. الاستفاضة غير الضرورية في سرد المعلومات الشخصيةإذا انتابك شك حول أداء موقعك، وكنت تعتقد بأن هناك مُشكلَا فيه فأوّل ما يجب التّحقّق منه هو محتويات صفحة المعلومات الشخصية على الموقع، وطريقة سرد هذه المعلومات، لأن العميل المحتمل لن يطلب خدماتك بسبب قصّة حياتك ولكنه سيتعاقد معك إذا علم القيمة الحقيقية لما يمكن أن تقدمه له، وبالتالي فعندما تقوم بتجميع المحتوى لموقعك، تأكد من: التركيز على الزبائن وما يمكنك القيام به بالنسبة لهم.لا تكثر الحديث عن نفسك، اذكر القليل فقط (القدر الكافي الذي يُظهر جانبك الإنساني) حيث أن الإطناب سيُعطي الانطباع بأنك شخص مهووس بنفسه.لا تضع جميع الأعمال التي قمت بها، استعرض فقط أفضل العينات.حاول التركيز على المعلومات الأساسية ووضعها في الأعلى بشكل مرئي دون الحاجة للبحث المضني عنها.تزييف الحقائقعندما بدأت العمل كمستقل، أردت لموقعي أن يبدو أكثر مهنية وأكثر إثارة للإعجاب، لذلك كتبت بصيغة توحي بأنني جزء من فريق مؤسسة عريقة، ولم أدرك الخطأ الفادح الذي قمت به إلى أن تحدثت على الهاتف مع أحد العملاء وشرحت له أنني لا أستطيع القيام بالمهمة بالسرعة التي يطلبها لأنني وحدي، حيث أن الزبونة أرادت التعاقد معي على أساس الصيغة الملكية لكلمة "نحن" (والتي هي في حقيقة الأمر تتحدث عني وعن... قطتي) التي كانت واضحة في الموقع. لا حرج من استخدام صيغة جادة خاصّة إذا كانت هذه الصّيغة هي المُفضّلة لنوعية الزّبائن الذين تستهدفهم، لكن احذر من مغبة إظهار نفسك أكبر من حجمك الحقيقي، فقد يُعطي الأمر نتائج عكسية وستظهر بمظهر العامل الحُر الغبي. تجّنب الحديث عن نفسك بصيغة الغائب، أو أن تخلط ما بين صيغة المُتكلم والغائب معًا، تجّنب صيغة الجمع "نحن" وابتعد قدر الإمكان عن المُصطلحات الرّنانة واستبدلها بمُصطلحات أبسط. اكتب وكأنك تُخاطب عميلك مُباشرة، حدّثه مُباشرة وبكلمات بسيطة عن السّبب الذي يجعل من توظيفك هو الخيار الأنسب بالنّسبة له. لن يُساعد ذلك على جعلك موقعك يظهر بمظهر أفضل، بل سيُعطي الفرصة لزبائنك لمعرفة المزيد حولك ولزيادة فرص توظيفهم لك. حان الوقت لتصحيح الأمرإن أهم ما في الموضوع أن تدرك أن موقعك غير جاذب، وعندها فقط يمكنك العمل على تحديد مواقع الخلل فيه. ومع ذلك فمهمة إعادة صياغة كاملة للموقع ليست بالمهمة السهلة أبداً، وربما ستكون سببًا في صرفك النظر عن تغييره أو تأجيل هذه المهمة، يحدث ذلك حتى وإن كنت تعرف ما تريد فعله بالتحديد، فقد تجد نفسك تحدق في موقعك لمدى شهر وأنت على علم أنه غير جاذب، دون القيام بأي تغيير، لأنك لا تعلم من أين تبدأ. إذا أنتابك مثل هذا الشعور، فلا تحاول فعل كل شيء دفعة واحدة ولا أن تتجاهل المشكلة، ولكن أبدأ في التغييرات واحداً تلو الأخر حتى يتألق موقعك. وإليك بعض الأفكار التي قد تساعدك في ذلك: إقرأ النصوص الموجودة في موقعك بصوت عالِ، بذلك ستتمكن من معرفة الأماكن التي لا تتناسب وما ترُيد قوله وما يجب إبقاؤه وما يجب حذفه.اطلب من أحد أصدقائك الذين يعملون في مجال الكتابة والتّحرير، أن يطّلع على موقعك بهدف معرفة مدى سهولة قراءته.استخدم قالبًا جديداً يحتوي على المزيد من المساحات البيضاء، أو تواصل مع مصمم مواقع لمساعدتك في ذلك.حاول خفض ملف التعريف الخاص بك إلى فقرة أو اثنتين على الأكثر.أعد يومياً كتابة صفحة واحدة على الأقل من الصفحات القديمة على موقعك.أضف عنوان بريدك الإلكتروني إلى صفحة الاتصال الخاصة بك.اطلب من زملائك في المجال مراجعة عملك.إيجاد زبائن لك كمستقل هو في الغالب من أصعب التحديات، فلا تدع موقعك يجعلها أكثر صعوبة، خذ وقتاً كافياً للتأكد من سير موقعك، وأنه معك لا ضدك، وسيكون بذلك عما قريب أفضل مسوّق لك. هل تجد أي من هذه الأخطاء في موقعك؟ هل استخدمت أي من هذه النصائح لتجعل موقعك يزيد من تألقك؟ شاركنا أفكارك وتعليقاتك على الموضوع. ترجمة -وبتصرّف- للمقال: Why Your Freelance Website Stinks (Mine Did Too) and How to Fix It.