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

سنتعلم في هذا الدرس كيف نرسم التصميم العام لموقع معرض أعمال أنيق وجميل بواسطة برنامج فوتوشوب وباستخدام تأثيرات مختلفة وأساليب المزج وأنماط الطبقات. يتمتع الموقع الذي سنصممه بالأناقة والبساطة بذات الوقت وسيجذب رأس الصفحة المتناقض اهتمام المستخدمين. من ناحية أخرى فإن الفكرة هي الأناقة مع أسلوب طباعة كبير وتفاصيل خفيفة في عناصر الواجهة. بعد الانتهاء من التصميم وتجهيز ملف 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.

شاركت في معرض أقيم في مدينة ناشفيل، وقد انعقد على هامش هذا المعرض هذا العام المؤتمر الوطني لمنظمة رعاية الغزلان، لقد كانت هذه المنظمة مصدر إلهام للكثير من الأفكار التي قمت بإنجازها، وهي من المنظمات المعروفة التي تضمّ عددًا كبيرًا من اﻷعضاء الذين يمكن أن يصبحوا عملاء. اشترك في المعرض أكثر من 200 عارض، وتراوح عدد الزوّار ما بين 10,000 إلى 12,000 زائر. تتلخّص مساهمتي في هذا المعرض في جناح صغير ضمن القسم التجاري، وبعد انتهاء فعّاليات المعرض أحببت أن أشارك بعض النصائح المفيدة وبعضًا من البيانات التي حصلت عليها خلال مدة إقامة المعرض. هل تجب عليك المشاركة في معرض تجاري؟إن أفضل إجابة يمكنك الحصول عليها سيكون مصدرها اﻷرقام واﻹحصاءات. ما هي التكلفة الإجمالية للمشاركة في المعرض؟ للمشاركة في المعرض ستحتاج إلى طباعة عدد من البروشورات وبطاقات العمل، كما ستحتاج إلى استخدام اﻹعلانات أو الشاشات، باﻹضافة إلى العروض التجريبية وشاشات التلفاز والحواسيب الشخصية، إلى جانب ما ستدفعه إلى متعهّدي المعرض مقابل الخدمات التي سيقّدمونها. كذلك قد يكلّفك اﻹنترنت الكثير من المال. ماذا عن تكاليف السفر؟ والطعام؟ اسأل المشاركين في المعرض عن عدد المرتادين وعن نسبة التحويل، ما هو عدد العملاء الذين يمكنك التحدّث معهم خلال المعرض؟ وإن بعت منتجك إلى ما نسبته 0.5% من اﻷشخاص الذين تتحدّث إليهم فهل سيعوّض ذلك اﻷموال التي أنفقتها؟ أم يجب أن تكون النسبة 1%؟ تحدّث في المعرض إلى بعض الخبراء في مجال التسويق وافهم منهم طبيعة نسبة التحويل التي يجب أن تتوقعها في مجال تخصّصك، إذ أنّ ذلك يعتمد على مدى ملائمة المعرض لرغبات عملائك. وإن كنت لا تمتلك منتجًا تبيعه أو عميلًا يشتري منك، فلا تنفق أموالك على المشاركة في المعرض إلا إن كانت لديك فكرة قد تم تجريبها من قبل. يمكنك كذلك الاستفادة من حضور المعرض عن طريق التواصل مع المشاركين اﻵخرين والتعلم منهم، ولكنّي لا أحبّذ هذا في بداية مشروعك التجاري. تهيئة الديكورقد يكون هذا اﻷمر مكلفًا قليلًا، ولكنّك تحتاج إلى ما يجذب انتباه مرتادي المعرض، ومن الضروري استخدام موادّ ذات جودة عالية لتعكس المظهر الاحترافي وتجذب الانتباه، ولكن تجنّب اﻹسراف، فإن إنفاق اﻷموال الطائلة على المشاركة في المعرض يستلزم منك أن تبيع كمّيات كبيرة من منتجك لتعويض تلك النفقات، لذا حاول استئجار المواد التي ستحتاجها قبل أن تفكّر في شرائها. كان عدد مرتادي جناحي في المعرض مساويًا تقريبًا لعدد مرتادي اﻷجنحة المجاورة على الرغم من أن الديكور كان أبسط بكثير، فقد استخدمت يافطة وبعضًا من المطوريات التي صمّمها صديق لي. تواصل لتحصل على المزيد من الزواريعتمد عدد اﻷشخاص الذين ستتكلّم معهم بشكل كبير على طرح نوع معيّن من اﻷسئلة لا يمكن اﻹجابة عنه بـ "نعم" أو "لا"، ولا يحتاج منك هذا لأن تقف مناديًا أمام جناحك، ولكن يمكنك طرح سؤال واحد من قائمة اﻷسئلة التي أعددتها على أي شخص يبدي القليل من الاهتمام بجناحك. حاول أن تضع بعضًا من اﻷسئلة المتنوعة والمختلفة والتي تتوقع أنّها ستكون ذات صلة بعملائك، فمثلًا أنا أدير برنامجًا لمعالجة تسجيلات ومسوحات كاميرات التعقّب التي يستخدمها الصيّادون ومربّو الحيوانات؛ لذا كانت اﻷسئلة التي وجّهتها إلى الزوّار كاﻵتي: ما هو عدد كاميرات التعقّب الموجودة في الحقل؟ما هو عدد الصور التي التقطتها هذه الكاميرات في العام الماضي؟ما هو الوقت الذي تقضيه في متابعة هذه الصور؟هل تعرف كم هو معدّل طول الجذع الرئيسي لقرون الوعول خلال السنوات الخمس الماضية؟هل يمكنك تحديد ما إذا كانت خطط التغذية التي اتبعتها قد حسّنت من صفات قرون الوعول؟ما هو الوقت الذي تقضيه سنويًّا في صناعة تقاريرك من تسجيلات الكاميرا؟ما الذي تستخدمه في الوقت الحاضر ﻹدارة هذه التسجيلات؟ﻻحظ أنّه لا يمكن اﻹجابة عن أيٍّ من هذه اﻷسئلة بـ "نعم" أو "لا"، وسيساعدك هذا على التشبّث بالعميل لفترة أطول. تمسّ هذه اﻷسئلة بعض الاحتياجات المحدّدة لعملائي، ويمكنني المضي قدمًا إن لم يكونوا مهتمّين بهذه اﻷسئلة. إحصائيات طريفةوضعنا طبقًا يحتوي على أنواع مختلفة من الحلوى على إحدى طاولات جناحنا الخاص، وحصلنا على هذه اﻹحصائيات الطريفة: زارنا 45 شخصًا من أجل تناول الحلوى فقط، ولم يتحدّثوا معنا بشكل جدّي. 10 منهم طرحوا بعض اﻷسئلة عن المنتج ﻷنّهم شعروا بأنّ عليهم أن فعل ذلك في مقابل تناولهم للحلوى. كانت Snickers الحلوى المحبوبة لدى غالبية الزائرين، وقد نفدت جميع أصناف الحلوى المصنوعة من الشوكولاطة قبل قطع الحلوى الصلبة. تحليل البياناتجمعت خلال المعرض بعضًا من اﻹحصائيات التي تدور حول: عدد اﻷشخاص الذين تكلمت معهمطبيعة اﻷسئلة التي طرحتهاالفائدة من السؤالعدد بطاقات اﻷعمال التي وزّعتهاعدد اﻷشخاص الذين سجّلتهم في المعرض (أو بعده مباشرة)عدد اﻷشخاص الذين حصلوا على النشرات اﻹعلانيةفكانت النتيجة: تحدّث إلى 105 أشخاص، ووزّعت 65 نشرة إعلانية، و23 بطاقة أعمال. أما بالنسبة للأسئلة فقد طرحت سؤالًا عن كاميرات التعقب 52 مرة وحصلت على 28 إجابة إيجابية. كذلك وجّهت سؤالًا حول التسجيلات 34 مرة وحصلت على 16 إجابة إيجابية. وكان السؤالان اﻷول واﻷخير ضمن القائمة اﻷكثر فعّالية واﻷكثر شيوعًا مقارنة ببقية اﻷسئلة. وقد سجّلت 6 أشخاص في المعرض أو بعده مباشرة. بعض النصائحنصحني Harry Hollander من Moraware قبل أن أشارك في المؤتمر بمجموعة من النصائح سأذكرها هنا توخّيًا للفائدة: لا تذهب لوحدك أبدًا.لتكن رسالتك التي ستوجّهها في المعرض واضحة، وتجنب اﻹفراط في العبارات.انتبه إلى اﻷشخاص الذين لا يبدون أي نوع من الاهتمام، ودعهم يغادرون المكان.استأجر المعدّات وراقب التكاليف، ولا تصرف الكثير من المال، إذ يكفي أن يكون لديك منتج قويّ.استغلّ الحفلات والندوات في توسيع شبكة علاقاتك.تعلّم إلقاء الخطابات.ترجمة –وبتصرّف– للمقال Exhibiting at your first trade show لصاحبه Robert Graham. حقوق الصورة البارزة: Designed by Freepik.