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

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

الشعار

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

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

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

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

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

تحميل القالب

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

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

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

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

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

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

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

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

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

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

الموقع

البحث

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

• 25 One Page Portfolio Websites of Designers on Twitter
• Web Design Inspiration: 40+ Impressive Single Page Websites …
• Theme forest

وغيرها .

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

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

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

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

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

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

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

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

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

• مجلة Wire frame مصدر إلهام كبير في هذا المجال .يمكنك أن تجد نماذج و طرق يتبعها المصممون . و هنا يمكنك ان تجد أن لكل شخص طريقته التي يفضلها .
• ٣٥ مصدر للمخططات السلكية
• ٩ برامج لتصميم المخططات : ليس بالضرورة استخدام الورقة و القلم لتنفيذ المخطاطات .
• I love wireframes : نماذج .

المسودة

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

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

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

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

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