إظهار الرسائل ذات التسميات تصميم. إظهار كافة الرسائل
في السنوات الأخيرة اصبحت المدونات تغزو الوطن العربي و الكل اصبح يود ان يمتلك مدونة , هذا بالطبع ليس بالأمر السيء , بالعكس هو امر رائع لكون كثرة المدونات سيساعد على تبادل المعرفة و المعلومات من طرف الجميع و بالتالي المزيدد من تبادل المعلومات و الأفكار , إلا أن الأمر الكثير في بعض المدونات هو نقل المواضيع لغرض الربح فقط و هذا لن يساعد على ماسبق ذكره و لن يسهم ايضا في امتلاك مدونة احترافية .
فلكي تملتك مدونة ناجحة و مميزة إضافة إلى المحتوى الذي تقدمه , فيتوجب عليك تصميم قالب احترافي و متناسق حتى تجلب القراء أولا وتمتع القارئ اثناء الدخول للمدونة و القراءة بشكل مميز دون ملل .
ساساعدك في صلب هذه المقالة و كمصمم ويب متواضع لاشاركك بعض النصائح الذهبية لتصميم قالب مدونة احترافي لجعل مدونتك اكثر نجاحا .
أولا : تحديد محتوى المدونة
لايمكن ان تبدأ في تصميم قالب مدونة و انت لاتعرف محتوى هذه المدونة , فالمحتوى هو ذلك الشيء الأول الذي يعطيك نظرة عن نوع التصميم و كيف يسكون التنسيق الخاص بالمدونة فتصميم مدونات التسويق الالكتروني مختلف عن تصميم المجلات الإلكترونية و مختلف عن المدونات الشخصية ... لهذا اختر محتوى المدونة ليساعدك هذا في تنفيذ المرحلة القادمة .
ثانيا : فترة الإلهام
لايمكننا ان نستغني عن الإلهام , فالأفكارالإبداعية تأتي من الإلهام و لهذا يتوجب عليك البحث في معارض القوالب الأجنبية مثل ThemeForest و موقع Behance الذي سبق و ان تحدثنا عنه في مقالة خاصة هذه المواقع ستعطيك نظرة أولية عن التصاميم التي يمكن عملها للمدوات التي تقدم نفس محتوى موقعك و بالتالي برؤيتك مثلا 20 مثال تستطيع أن تأخذ فكرة هنا و فكرة هنا ثم تستجمع افكارك لتستعد للقيام بالخطوة القادمة
ثالثا : التخطيط على الورق
بعد فترة الألهام عليك بورقة بيضاء و قلم لكي تقوم برسم الأفكار التي استلهمتها من التصاميم السابقة حتى تصمم تصميم خاص بك و مميز لمدونتك , و هذه المرحلة اعتبرها مهمة جدا و لايمكن الإسغناء عنها لأنه يمكنك أن تضيف أي شيء تريده و تحذف العنصر الذي لاترغب فيه حتى تستخلص تصميم أولي عن مدونتك أو موقعك
رابعا : اختيار الألوان
من أصعب المراحل التي قد تمر بها و انت تعمل على تصميم قالب مدونتك هي مرحلة اختيار الألوان فاستراتيجية اختيار الألوان جد مهمة و يتوجب أن تختار الوان متناسقة فيما بينها و لاتضر بالعين مثل الأصفر و الأبيض في مكان واحد . و لاتكون عشوائية أبدا فل أعطيك مثال بسيط من تصميم أكاديميتي فالألوان الأساسية في التصميم هما الون الأزرق و الذهبي والرصاصي هما مختاران من اللوجو , فاللون الأزرق يدل على التقنية و اللون الذهبي يدل على التميز والرصاصي يدل على الغموض أي إن اردت التوضيح أن الألوان تدل أنه تأتي من الغموض إلى ان تصل إلى التميز .
لهذا يتوجب عليك أنت كذلك اختيار الألون حسب محتوى مدونتك , فمدونة نسائية مثلا تكون بالألوان الوردية غالبا ... فخلاصة القول الألوان لها مدلول و ليس اختيار الألوان المتناسقة فيما بينها فقط
رابعا : تصميم الواجهة الرسومية
اثناء الإنتهاء من اختيار الألوان المستعملة في التصميم هنا تبدأ في تصميم القالب على برنامج الفوتوشوب و اختيار قياسات الصفحة حتى تتمكن من رؤية التصميم بشكل واضح و كيف قد يبدو بعد ان رسمته و خططته على الورقة .
فلايكفي بطبيعة الحال التصميم على الورقة و انما يتوجب ليك تصميمه على برنامج الفوتوشوب حتى تشاهد الألوان و ترى التصميم كأنك تشاهد الموقع مباشرة وكيف سيكون و بالتالي ستستطيع أن تقوم بتنسيق عناصر الصفحة و ضبط اعداداتها و حجمها ثم طريقة ظهورها حتى تستطيع ان تعطي شكلا نهائيا رائعا و مميز .
فلايكفي بطبيعة الحال التصميم على الورقة و انما يتوجب ليك تصميمه على برنامج الفوتوشوب حتى تشاهد الألوان و ترى التصميم كأنك تشاهد الموقع مباشرة وكيف سيكون و بالتالي ستستطيع أن تقوم بتنسيق عناصر الصفحة و ضبط اعداداتها و حجمها ثم طريقة ظهورها حتى تستطيع ان تعطي شكلا نهائيا رائعا و مميز .
خلاصة :
وفي النهاية قم بتكويد القالب الخاص بك على حسب المنصة التي تعمل بها سواء كانت ووردبريس أو بلوجر ... وتمتع بقالب رائع جدا و مميز وابتعد عن القوالب المسروقة و المنقولة من مدونات اخرى و التي ستضعف و تنقص من قيمة مدونتك .
كانت هذه عبارة عن نصائح ذهبية لتصميم قالب احترافي لمدونتك اتمنى ان تستفيذ من هذه النصائح و ان تساعدك بشكل كبير لإنجاز تصميمك الخاص . لاتنسنا بصالح الدعاء لنا ولجميع المسلمين , تحياتي لك .
في الآونة الآخيرة ظهرت العديد من المواقع الإجتماعية التي تخص المبرمجين وفي نفس الوقت المصممين و المبدعين , وفي هذاالجانب ظهر مجتمع بيهانس Behance الذي يخص المبدعين بصفة عامة سواء كانو رسامين , مصممي الجرافيك , مصممي الويب ....
فبعد إجراء بحث بسيط على شبكة الأنترنيت لم نجد نصائح أو مقالات جيدة تتحدث حول هذه الشبكة وجل ماوجدناه كان محدودا لهذا قررت كالعادة التحدث حول هذا الموضوع و أعطيكم مجموعة من النصائح حول هذا المجتمع .
فبعد إجراء بحث بسيط على شبكة الأنترنيت لم نجد نصائح أو مقالات جيدة تتحدث حول هذه الشبكة وجل ماوجدناه كان محدودا لهذا قررت كالعادة التحدث حول هذا الموضوع و أعطيكم مجموعة من النصائح حول هذا المجتمع .
ماهو بيهانس Behance ؟
بيهانس (Behance) هي منصة اجتماعية اشترتها شركة أدوبي Adobe سنة 2012 و تخص المصممين و المبدعين من أجل مشاركة أعمالهم و ابداعاتهم الفنية مع الآخرين مع امكانية الحصول على تعليقات ومراجعات الآخرين أومتابعتهم للحصول على جديد إبداعاتهم التي ينشرونها على بروفايلهم .لمذا يتوجب عليك كمصمم ويب الإلتحاق إلى مجتمع بيهانس ؟
1-عرض الأعمال و الإبداعات :
كما سبق و أن أشرنا أن مجتمع بيهانس بمثابة ذلك المكان الخاص بعرض إبداعاتك و تصاميمك كمصمم ويب أو جرافيك و بالتالي سيكون أيضا بمثابة Portfolio أو معرض أعمال شخصية لك يمكن أن ترسلها لمن تريد و تشاركها مع الآخرين .
2-الحصول على فرص العمل
كثيرا ماتضع بعض الشركات العمل على بعض التصاميم أو ماشابه و يمكنك أنت كمشترك في بيهانس الإنضمام للحصول على عمل لكن بعد موافقتهم ورؤيتهم أعمالك الشخصية .
3-مكان الحصول على الإلهام
من أهم الخطوات في التصميم هي الإلهام أو بطريقة أخرى الحصول على أفكار إبداعية لتصاميمك حتى تستطيع أنت بدورك إنشاء تصميم جيد بفكرة مميزة , هذه الخطوة غالبا ماتحتاج فيها رؤية أعمال سابقة في نفس المجال الذي تشتغل فيه حتى تكتسب أفكار أولية تساعدك في انشاء فكرتك , وبيهانس هو المكان الأمثل لهذه العملية
4-الحصول على مراجعات
كما تعلم عزيزي أن بيهانس هو المجتمع الأول في العالم الذي يجمع بين المبدعين , إذن فأنت ستحصل على تقييمات لأعمالك من اناس يحترفون المجال و بالتالي ستساعدك هذه النصائح بتحسين قدرتك و مستواك في التصميم .
رابط الموقع : Behance
تابعني على حسابي : https://www.behance.net/Hdev
خلاصة :
انا شخصيا كنت اسمع بمجتمع بيهانس منذ أزيد من سنتين إلا أني لم أدخل لأكتشف هذا المجتمع الرائع إلا بعد اهتمامي الكبير بعالم التصميم و الجرافيك و مؤخرا أنشأت حسابي في بيهانس و ها أنا ذا كالعادة أشارككم الأشياء التي أعرفها و أتمنى من كل قلبي أن تفيدكم في مسيرتكم إن شاء الله تعالى , فالكثير يسمع عن بيهانس و يعرفه و البعض الآخر لم يسمع به قط و نحن نشارك المعلومة لكي تصل إلى أكبر عدد ممكن من المتابعين .
دمتم في رعاية الله وحفظه
CSS هي اختصار لـCascading Style Sheets فهي تخص جانب التصميم و التنسيق لصفحات الويب فهي صممت لعزل اكود الهيكلة عن التصميم , فلايمكن الحديث عن تصميم ويب بدون الحديث عن لغتي HTML و CSS لكون HTML تخص البناء و CSS التنسيق , فهذه اللغة هي التي تمنحنا الميزة في اضافة ألوان , صور , تأثيرات على الموقع ليبدو بشكل جميل .
دورة تعلم لغة HTML
دورة تعلم لغة CSS
إلا أنه يمكن أن تبدع كذلك في سي إس إس وتقوم بإنشاء أنيمشن احترافية و عمل اشياء خيالية ما كنت لتتوقعها أبدا باستخدام سي إس إس . بكل بساطة سوف امنحك موقع رائع سوف يذهلك بأشياء رائعة يتم انجازها باستعمال لغة CSS الرائعة مع امكانية رؤية الكود الخاص بالعمل إذا كنت تريد فهم طريقة عمله و هذا سيساعدك في العثور على افكار جديدة تقوم بتطبيقها مستقبلا .
رابط الموقع : http://cssdeck.com
من المراحل الصعبة التي قد يمر بها كل مصمم سواء كان مصمم مواقع أو مصمم شعارات لشركات أو بنرات إلى غير ذلك هي مرحلتي إيجاد فكرة مناسبة للعمل ثم أيضا إختيار ألوان مناسبة و متناسقة , فالعديد من المصممين قد يحتارون في اختيار الألوان المناسبة , فاللون يعطي أزيد من 75 بالمئة من جمالية التصميم و الباقي على الهيكلة إلى غير ذلك , فرغم أن بعض التصاميم تتميز في الإبداع و التخطيط لها إلا أن اختيار الألوان في هته التصاميم يجعلها رذيئة الجودة .
ولذلك في صلب هذا الموضوع سوف أزودكم بـ5 مواقع تساعدك على اختيار ألوان مناسبة لتصاميمك وجعل تصاميمك متناسقة .
1- موقع Color Scheme Designer :
2- موقع Color Rotate :
3- موقع Flat Ui Colors :
4- موقع Adobe Kuler :
.jpg)
ماهو التصميم التجاوبي ؟ كيف يعمل التصميم التجاوبي ؟ وماالفائدة في تصميم موقع تجاوبي ؟
أعلم أن هته الأسئلة تراودك و أنت تقرأ هته المقالة , لكن لاتستعجل سوف نجيب على كل هته الأسئلة في صلب مقالتنا اليوم .
1- ماهو التصميم التجاوبي؟
التصميم التجاوبي (Responsive Design) هو التصميم الذي يتناسق مع جميع المتصفحات و يلائم جميع أحجام الشاشات , فلو قمت بالدخول إلى موقع لايسخدم هته التقنية من الهاتف مثلا سوف تلاحظ أن هناك صعوبة في تحميل الموقع و تصفحه , وهنا يكمن دور التصميم التجاوبي حيث يوفر لك امكانية عمل تصميم يظهر في الهاتف فقط أوفي الأجهزة اللوحية فقط , هذا على حسب مقاسات الشاشة .
2-كيف يعمل التصميم التجاوبي ؟
التصميم التجاوبي بكل بساطة يتم عمله بCss و بخاصية @Media Screen حيث تحدد أقصى حجم الشاشة الذي تريد أن تظهر فيه التغييرات و تقوم بعمل أكواد Css بداخله ,هذا فقط وكما توضح الصورة أسفله .
3-ماالفائدة من تصميم موقع تجاوبي ؟
مع الإنتشار الواسع للأجهزة اللوحية و الأجهزة الذكية أصبح العديد يتصفح الأنترنيت من خلال هته الأخيرة أي أن نسبة الزوار لموقع ستكون من هته الأجهزة و بالتالي يتوجب عليك تصميم موقع تجاوبي وجعل زوارك يتمتعون به و يتمتعون بتصفح أفضل وسريع للموقع وذلك من أجل كسب الزيارات و المزيد من الأرباح عوض التفكير في صنع تطبيق لهاتفك الذي قد يكلفك الكثير من المال .
4-ماهي طريقة تصميم موقع تجاوبي ؟
لتصميم موقع تجاوبي توجد طريقتين , الأولى كما ذكرت في الصورة أعلاه الخاصة ب @Media Screen و الثانية هي عن طريق استعمال إطارات العمل مثل البوتستراب Bootstrap أو اطار العمل Foundation أو Gumby هذا سيساعدك بشكل كبير على تصميم موقع تجاوبي .
أتمنى أن تنال هته المقالة اعجابكم , و أنا بدوري أفكر في إنشاء دورة خاصة بتصميم موقع تجاوبي , إن أعجبتك الفكرة أكتبها في تعليق و ان رأيت الكثير تفاعل مع الموضوع سوف أقوم لكم بدورة تطبيقية أشرح فيها كل ماقلته في المقالة .
دمت في رعاية الله .
فأول شيء سنحتاجه في هذا الدرس هو دراستك لدورتي HTML و CSS ثم تنصيب برنامج فوتوشوب و برنامج محرر الأكواد مثل Brackets و NotePad++ ...
