Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

نحن ننصحك بقوة بترقية متصفحك إلى نسخة أحدث مثل أنترنت اكسيلورر ٨ أو فايرفوكس و الذي سيتيح لك تصفح أفضل ليس لموقعنا فقط بل في كل أرجاء الأنترنت..

لو كنت لا تريد أو لا تملك الصلاحية لترقية المتصفح يمكنك أن تستمر في التصفح على الرحب و السعة لكن تذكر قد لا تتمكن من استعراض بعض خدمات الموقع بالشكل المطلوب . بالطبع يمكنك إخفاء هذه الرسالة و تستمر في التصفح و لن تظهر لك هذه الرسالة مرة أخرى .

Post Pic

خطوات تصميم معرض أعمالي: (١) التخطيط

في هذه السلسلة سأعرض خطواتي الأبداعية في تصميم موقعي الشخصي أو معرض أعمالي .في هذا الجزء سأتحدث عن التخطيط للموقع و أفكار حول البدء من الورقة و القلم و نبذة عن المخطط السلكي Wireframe بالإضافة لخطوات تصميم شعاري الشخصي .

بحمد الله اتممت تصميم معرضي الشخصي الجديد falemadi.com . سأبدأ بعرض سلسلة مواضيع تفصيلة عن اسرار :) كل جزء في التصميم و بالرغم من كونه تصميم من صفحة واحدة إلا أنه يحتوي على كثير من الحيل و الأفكار و التي يمكنك استخدامها . و بالتالي أكون قد طويت صفحة سمارتس ويب و بدأت العمل بشكل اكبر تحت أسمي الشخصي .

الشعار

ربما يكون هذا أصعب جزء قبل البدء هذه كانت خطوطي العريضة :

  • البساطة .
  • السطوع و الرمزية : لم أكن ابحث عن شعار يحتوي على نص بل شعار رمزي اكثر بمجرد ان تراه تمييزه .

الخطوة ١: المسودات :

أحب دوما أن ابدأ التصميم بالطرق التقليدية بالورق و القلم . قبل فترة قررت أن أبدأ أي تصميم برسم سكيتش Sketch على الورق في البداية كان ذلك صعبا لأني كنت أحس أن هذا مضيعة للوقت و أن لدي فكرة و اريد تطبيقها مباشرة لكني الأن و بعد تجربة هذا أكثر من مرة اعتقد أن استخدام الورقة و القلم فتح لي ابواب أوسع . و منذ ذلك الحين أصبت بهوس جمع الأقلام الرصاص :) .
على الورقة لا يجب أن يكون التصميم دقيقا أو مرتبا لكنه يعبر عن الفكرة المبدأية للتصميم و التي ممكن أن يتم إعادة صياغتها قليلا بعد ذلك .

في الماضي كنت استخدم أوراق من نوع A4 للرسم أو دفاتر صغيرة أحملها في حقيبتي . لكن كنت أواجه التالي رسم المسودات بترتيب عشوائي في الصفحة كان يشوش أفكاري و لا يعطي الفكرة حقها عند مراجعتي للأفكار و بالتالي صممت هذا القالب البسيط و الذي أطبعه على ورق A4 و ارسم عليه. الخطوط الهندسية داخل كل مربع تساعدك على ترتيب خطوطك  و رسم خطوط مستقيمة أكثر .

تحميل القالب

logo_sketches

_MG_2439 _MG_2438
_MG_2441
عندما بدأت لم تكن الأفكار كما أريد لم استطع أن أحدد الأتجاه الذي أريد و بالتالي بدأت “بخريطة العقل” الخاصة بالشعار و هي عملية عصف ذهني تساعدني كثير في التصميم .بعد ذلك تدفقت الأفكار .

الخطوة ٢: الرسم :

من النماذج السابقة اخترت مجموعة اعتقدت أنها تحتوى على أفكار واعدة و جربت تطبيقها . استخدم برنامج Inkscape   لرسم البنية الأساسية للشعار و هو بالمناسبة البرنامج الذي استخدمه في كل رسوماتي المتجهية فهو أفضل من وجهت نظري للرسم من الألستريتور ( قد يخالفني البعض الرأي!).

أرسم جميع الشعارات التي اخترتها باللون الأسود فالشعار المثالي هو الذي  يمكن تحويله إلا الأبيض و الأسود أو الألوان دون أن يفقد روعته .

templogo

لن اتطرق هنا لخطوات رسم الشعار بالتفصيل لاني لا اعتقد ان هذا مفيد خاصة انه شعار بسيط و لاني لم احتفظ بصور للخطوات :) فعذرا.

الخطوة٣: التلوين :

بالرغم من أن الInkscape مميز من ناحية الرسم إلا أن خواص التلوين و التأثيرات الخاصة ما زالت تحتاج للتطور قليلا و في رسوماتي المتجهية ما زلت أستخدم inkscape   لكن بالنسبة للشعارات أفضل تلوينها أحيانا في الألستريتور أو الفوتوشوب لكني لا اريد أن أفقد صيغة الرسم المتجهي Vector .

الصور المتجهية ( Ai – Eps – svg و غيرها ) خيار أفضل بالنسبة للشعارات من الصور النقطية ( jpg , png , gif و غيرها ) فعند تكبير الصور النقطية تفقد الكثير من الجودة و تحصل على صورة ببكسلات مشهوهه لكن بالنسبة للصور المتجهية فهي قابلة للتكبير لأي حجم تريد بالجودة التي تريد . بالطبع لكل نوع استخدامه الخاص .

احد الطرق التي وصلت لها هي فتح الملف على برنامج الألستريتور و نسخ الشعار ثم لصقة في الفوتوشوب فأحصل على صورة متجهية يمكن تعديلها بواسطة أداة القلم .لو كنت ستبدأ الرسم بواسطة الفوتشوب تأكد من رسم شعارك بواسطة  الباث Path tool و بالرغم من الباث تول ليس الأروع و الأفضل للرسم المتجهي إلا اني تمكنت  من استخدامه بطريقة متطورة من قبل .

للألوان انا دائما أزور معرض الأولوان Color Lovers فهو معرضي المفضل لاستلهام الألوان . قد لا اتقيد بلوحة ألوان معينة لكني استفيد منه كثيرا. في حالتي هذه كنت اعرف اني اريد استخدام اللون الرمادي مع درجة ألوان ثانية .جربت أكثر من لون . و أعجبتني مجموعة من الألوان :

و في النهاية  و كما يمكنكم أن تروا لم استخدم أي لون لكني استخدمت  أول لون في سياق تصميم الصفحة و احتفظت  باللونين الاخيرين للمشروع القادم ( قريبا).

printlogo

الموقع

البحث

احتفظ دائما في مفضلتي بالمواقع التي تعجبني مفهرسة وفقا لنوعها و كنت قد قررت من البداية أني لا أريد شي معقد لمعرضي الشخصي كل ما أريده هو صفحة واحدة و بعض البهارات بواسطة الجافا سكريبت . و بالتالي جربت البحث عن “One page portfolio “في صديقنا الصدوق جوجل و قد وجدت الكثير منها و هي على العموم من التصاميم الرائجة Trendy .هذه هي المواضيع التي استعت بها :

وغيرها .

المخطط السلكي Wireframe

حسب ويكيبيديا هي دليل  بصري يستخدم في تصميم واجهة لاقتراح هيكل موقع على شبكة الإنترنت ، والعلاقات بين صفحاته. و عادة  يتم الانتهاء منه قبل أي عمل فني .و لتبسيط ذلك  لو نظرنا للأشكال الثلاثية الابعاد في العادة يتم تكوين الهيكل لها بواسطة شكل مكون من أسلاك قبل أن نكسو الشكل بالتفاصيل و الألوان و الملامح.

هذا مماثل بشكل كبير لما نقوم فنحن عند رسم المخطط السلكي نحدد تقسيم الصفحة مكان الازرة و مكان القوائم و مكان الترويسة لكنا لا نحدد التصميم الفعلي و الألوان.و لو كنت تصمم برنامج أو تطبيق على شبكة الانترنت فأنت ترسم الشاشات التي تظهر للمستخدم و كيفية الأنتقال من شاشة لشاشة.

الطريقة التي استخدمها هي خليط بين أكثر من طريقة و قد توصلت لها في النهاية و هي فعالة لي أنا سأعرضها هنا و قد تستلهم منها طريقتك .

عند رسم المخططات و بعد طباعة القوالب أفضل استخدام أقلام رصاص بأحجام مختلفة من h إلى B .مع أني في النماذج السابقة و التالية لم استخدمها لاني لم أجدها لان ابني الصغير لعب بها و تركها وسط العابه و استمريت  في البحث عنها لأيام .( لكني استخدمها في مشاريع اخرى سأعرضها في موضوعات أخرى إن شاء الله ) وبعدها استخدم القلم الرصاص العريض أو قلم حبر أسود ذوت خط عريض قليلا لتحبير المخطط .

_MG_2456

أنا استخدم قوالب Konigi  ( يمكنك تحميلها من هنا ) . ما أقوم بها هو رسم مخطط سريع في Story Board للأشكال التي أفكر في استخدامها كالتالي :

_MG_2464

بعدها أقوم بالمرور على المخططات الصغيرة في الأعلى و اختيار ما اعتقد انه اعجبني و اقوم بتكبيره على مخطط مكون من ورقة واحدة كبيرة .

تذكر

المخطط السلكي للمواقع لا يقصد به التصميم الفعلي للموقع بل هو تصور لهيكلة الموقع و ترتيب العناصر فيه فأنت  تحدد ان الزر سيظهر هنا لكنك لا تحدد إذا كان الزر مربع أو مستطيل أو بحواف دائرية أو لون الزر سيكون احمر أو اخضر .فالتصميم للتفاصيل و الألوان يكون في المرحلة التالية .

قد لا تبدو أهمية wireframe في موقع بسيط كهذا لكن في المواقع الاكثر تعقيدا و خاصة التطبيقات ستجد أن لها فائدة كبيرة و  لكني منذ اعتمدت هذه الطريقة و أنا أفضل ابداعياو أنتاجيا على الأقل انا اعتقد ذلك .

موضوعات أخرى و مصادر حول المخطط السلكي Wireframe :

المسودة

بعد رسم المخططات نريد رسم المسودة و هي التصميم الفعلي للموقع . في المخططات في الأعلى ستجد أني وضعت علامة صح أو خطأ و هذا حدث بعد أن راجعت التصاميم بعد ساعات . و انا أقوم بذلك بعد ساعات لاني ( و هذا رأي شخصي ) اعتقد ان نظرتي ستكون مختلفة عند مشاهدة التصماميم بعد فترات من رسمها .

مررت على المسودات في الأعلى و اخترت التقسيمات التي اعجبتني و نفذتها على الورق و هذا ما وصلت إليه .

_MG_2462

من المهم تذكر أن ما نصممة على الورق ليس بالضرورة أن يظهر بشكل مطابق أو دقيق على الموقع قد تحدث تغيرات طفيفة هنا و هناك و هذا ما ستراه لاحقا في هذه السلسلة .

يمكنك زيارة معرض الشخصي على Falemadi.com

في الموضوع القادم .. حيل و أفكار في تصميم القالب على الفوتوشوب إن شاء الله .

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

أوسمة : , , , ,

تعليقات الزوار (24)

[+] أضف تعليقك من فضلك



  1. ماشاء الله تبارك الله
    شغل رهيب جدا ومرتب واستفدنا منه الكثير ماشاء الله عليكي

    للأسف المعررض لم يعمل معاي اتوقع انو يوجد مشكلة بالموقع الان


  2. شكرا عبدالرحمن ..
    المعرض شغال كان فيه مشكلة في السيرفر


  3. ماشاء الله تبارك الله الموقع رهيب جدا جدا جدا وشغل رائع كما تعودنا عليكي ماشاء الله تبارك الله

    لدي سؤال هل استخدمتي اسكربت معين اما الموقع عادي لا يوجد به اسكربت صفحات عادية او انك قمتي ببرمجة اسكربت خاص ؟؟


  4. عمل مبدع و شرح رائع , أعجبني التخطيط و التنظيم للعمل بشكل خطوات واضحه و متتابعه يدل على احترافيه بالعمل و استخدام العصف الذهني و خرائط العمل يخرج الابداع الذي بداخلك

    في المخطط الاول للخربشات ما سر رسمة اخر مربع على اليمين

    الطفل الذي ينظر الى اعلى و يخرج لسانه بسخرية هل كنت تنوين استخدامها كشعار ام مجرد تسليه و الخروج من دائرة الروتين و الملل؟


    • شكرا لك :)
      أنا ارسم هذه الشخصيات كلما تجمد عقلي ابداعيا :) ارسمها في الغالب و أنا افكر .. لسبب ما تحرك عقلي كثيرا و انا ارسم نفس المجموعة من الشخصيات منذ أيام الدراسة :) فكرت في حذفها من الصورة في الأعلى لكني وجدت ان لا ضرر لوجودها لم اعتقد ان أحد سينتبه لها


      • توقعت هذا الشي لانني احيانا اشرد برسم شخصيات لازمتني منذ الطفوله مثل شخصية فيدو ديدو يا اذيذ يا رايق التي مازالت في اعلانات السفن اب :) و غيرها

        لكن الذي لم الاحظه الشعار الذي اخترتيه غير موجود بين الرسمات التي في الاعلى و لدي فضول لاعرف اي واحده هي الاساس


  5. ابداع ماشاء الله استاذه فاطمه
    انا مهتمه بمجال تصميم الشعارات
    و استفدت من كثير شغلات ذكرتيها في المقال

    الله يعطيك العافيه

    منتظرة الباقي بشغف


  6. هوندا كتب:

    ماشاء الله لا قوة الا بالله بجد أنا فخورة بيكى اوى :) ونفسى أوصل لمستواكى بجد


  7. abdallh كتب:

    ابداع في ابداع

    ماشاء الله

    سأبدأ بتصميم معرض اعمال خصاص بي وسأستعين بتدوينتكم هذه :)


  8. ماذا سأقول…

    مبدع و قليلة فيكم


  9. b.althubaiti كتب:

    عمل منظم : ) واللوجو جميل فاطمة

    موفقة


  10. omargmal كتب:

    جذلك الله خيرا وعلى هذة المعلومات الرهيبة وبالخصوص المخط السلكى


  11. thoq كتب:

    ما شاء الله روعه

    الله يحفظك


  12. شغل جميل واسلوب راقى ومنظم يا اخت فاطمة.
    اتمنى لك دوام التوفيق.


  13. You will find always 2 sides of the same coin, but I must say, I’m studying a lot from your website. Occasionally other people have very limited mindset, that’s why they fail to understand the others.


  14. إسلام محمد كتب:

    مشاء الله
    حتى الان لم اقرأ موضوع إلا ولقيته اكثر من رائع
    تقبلي مروري


  15. rejannah mohamed كتب:

    احببت مدونتك كثيرا وخاصة هذا الموضع واتمنى ان تكملي باقى اجزاؤه فانتى قدوة لى واتمنى ان اصبح مثلك فى المستقبل


  16. ميمي كتب:

    موضوعات اكثر من رائعة

    ولك مني اقوى تصفيق واحترام

    بطله انتي ودعواتي لك بالتقدم والنجاح .


  17. Snet Work كتب:

    بارك الله فيك أختي ، موضوع مميز .. قرأته بتركيز واستفدت منه الكثير .. الحمد لله

    أتمنى لك التوفيق