67

تصميم وتطوير موقعي الشخصي | في إنتظار آرائكم؟

  • ayman al7aj

السلام عليكم ورحمة الله وبركاته، تحية طيبة وبعد:

قبل مدة قمتُ بتجديد هويتي الشخصية.. قمتُ فيها بإعادة تصميم شعاري، وكذلك تصميم وتطوير موقعي الشخصي بنفسي [HTML & CSS & jQuery].. وبما أنني في الأصل مصمم جرافيك، لكني تعلمتُ مجال تطوير الويب حديثًا، فأسعد بأي أراء وإنتقادات خاصةً في ما يخص تصميم وتطوير الموقع..

المشاهدة الحية للموقع:

تفاصيل الهوية كاملة على بيهانس:

http://bit.ly/1RFO7t9

شكرًا لكم :)

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

جميل، إليك آرائي:

  • ما كنت لأفضل خط جذور، أقترح خط Helvatica neue أو ما شابه.

  • شعارك به تباين كبير في الأنماط، رغم أنه مميز حقًا، لكن الجزء في المنتصف منه "يمن" دون النقاط يبدو كرسم باليد، أعني بأنه لنقل بأنه خشن وغليظ الأطراف، بينما حرف الألف ناعم وهادئ، والنقاط كأنها مربعات جامدة وأنيقة، كما ترى كل جزء به تباين كبير، أرى بأن الجزء في المنتصف "يمن" هو أفضل نمط.

  • في الجزء Above the fold حين تذكر بأنك مصمم جرافيك فلا داعي لكلمة حر، أو استبدلها بكلمة مستقل.

  • لا داعي لـ"مؤمن بأن الإبداع في البساطة"، فهي معقّدة نوعًا ما وقد وضعت لها خلفية وحوصة ولوصة كما يقال، لكن الأمر عائد لك هنا، يجب أن يعبر موقعك عن هويّتك.

  • زرّا "تعرف علي" و"معرض أعمالي" يجب أن يتحاذا مع المستطيل الذي يعلوهما، لخلق التناسق.

  • تأثير المرور بالفأرة على الأزرار المذكورة أعلاه لا يدل على البساطة، أقترح فقط تغيير اللون حين المرور إلى لون أغمق أو أفتح.

  • لا داعي لأزرار التواصل الاجتماعي بعد التعريف بك ويكفي وضعها في قسم التواصل.

  • عند ذكر الرابط "في مدونتي الشخصية" يجب إبراز كون هذا رابطًا أكثر، يجب وضع خطٍ أسفله وتأثير مرور يُظهر مستطيلاً حول الرابط.

  • سرّع تأثير تزايد عدّاد عملائك، فهذا يظهر أنهم كثر.

  • ابدأ بأقوال عملائك من القول الثاني بحيث يظهر من الوهلة الأولى زرين للتحرك إلى اليمين واليسار.

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

  • لا داعي لوضع رابط أعمالك في Behance، فـBehance قد صُنع ليكون معرض أعمال من ليس له موقع يعرض عليه أعماله، لكنك الآن لديك معرض أعمالك في موقعك الخاص بك، ضع كل أعمالك الجيدة في موقعك وانسَ Behance الآن.

  • أخيرًا، حسّن نفسك في الكتابة حول ذاتك قليلاً، أي فكّر أكثر في النصوص التي تكتبها مثل نص: "وسوف أرد عليك في مدة لن تزيد عن 24 ساعة

من استلامي للرسالة بإذن الله" ولا أقصد أن بهذا النص مشكلة تمامًا، لكنك تستطيع إعادة صياغته بطريقة أفضل مثل: "ألقِ تحية عليّ ودعنا نتواصل!"

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

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

نعم أعرف هذا وقد فكرت فيه بعد "لكن لا مشكلة" فقلت له يمكنك جعل الأسماء روابط دون شعارات المواقع.

شكرًا لك عزيزي زيد على الإقتطاع من وقتك الثمين، لمراجعة الموقع وكتابة ملاحظاتك القيمة عليه، مُمتن جدًا لك..

حسنًا سوف أعلق على بعض النقاط..

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

  • Behance أكبر من مجرد صفحة لعرض الأعمال، فهو شبكة إجتماعية كبيرة لربطك مع مجتمع التصميم. وخلق وجود قوي في الموقع أمر مهم جداً، بل هو الأصل الذي يتوجب توجيه العملاء له..

  • بالنسبة لنصوص الموقع، فقد قمتُ بكتابتها بنفسي، وبشكل عام حرصت على أن تكون بسيطة / سهلة / ومباشرة، وتكون معبرة عني بشكلٍ شخصي، أي أن النصوص سوف تكون موجه من شخص إلى شخص، وليست من شركة إلى شخص مثلًا.. وتحديد المدة المتوقعة للرد أراه أمر مهم جداً، فلا تتوقع أن يصلك الرد في ساعتين مثلًا!

بالنسبة لفقرة "مؤمن بأن الإبداع في البساطة" فبجعلها متحاذية مع أطراف الأزرار، يجعلها تبدو أكبر، لأنها لا تحتوي على حواف دائرية:

على العموم قمتُ بقراءة ما كتبته من نقاط أكثر من مرة، وقد أستفدت منها فعلاً خاصة فيما يخص منطقة الـ Fold، وقد قمتُ إجراء بعض التعديلات عليها.. وغض الطرف عن بعض النقاط لا يعني أنها خاطئة، فالأمر نسبي / زوقي في النهاية..

الموقع الشخصي فرصة ثمينة، لجعل كل بكسل في الموقع يعبر عن رؤيتك / فلسفتك / وزوقك في العمل :)

شكرًا لك مرة أخرى عزيزي..

Oukrchet أضف ردا

بكل صراحة، الشعار والموقع أعجبوني كثيراً ، كما أن الألوان المُختارة أعجبتني لأنها هادئة ومُتناسقة! 

أتمنى لك إن شاء الله المزيد من التأق الإبداع في المجال! تحياتي.

الله يكرمك عبدالله، من زوقك والله.. بالتوفيق للجميع :)

mo7@mmed أضف ردا

بصراحة تصاميمك قمة في الروعة الإبداع ؟

اعجبتني كثيراً الشعارات الخطية التي تقوم بتصميمها

سؤال : هل تقوم برسمها بيدك ومن ثم تحويلها ببرامج مساعدة ؟ أم أنك تقوم كل شيء بالبرنامج ؟

لطالما تمنيت أن اصمم شعارات عربية بهذه الطريقة ، لكني لم استطع حقيقتاً

لذلك ابهرتني كثيراً

بالتوفيق لك

تسلم يا محمد، سعيد بأن أعمالي نالت إستحسانك..

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

ممكن تتطلع على الفيديو دا:

بالتوفيق للجميع :)

بصراحة رائع جداً

سأحاول لعلى وعسى أن اصبح مثلك في يوم من الأيام

ابهرتني تصاميمك كثيراً بسيطة وجميلة جداً

شكرا لك على الإفادة واتمنى لك التوفيق

مجهول
  • حذف بواسطة المستخدم

إي نعم بالماوس فقط :)

أنا بالـWacom لا أستطيع فعلها وأنت تفعلها بالماوس، أنت تستفزني لأكسر الجهاز الآن ._.

أعطني الواكم وأكسر الجهاز :D

أتصور أن الأمر أسهل بكثير، خاصة وإنوا ممكن تعدل على المسار بأداة البن تول :)

بعدما أمضيت سنة أحاول شراءه تريدني أن أعطيك إياه؟ أنا أعضه بأسناني الآن كيلا يلمسه أحد :D

على العموم أنا جلبت الـWacom على أساس تعلم الرسم الرقمي والتلوين، في الواقع، كل عملي في التصميم الجرافيكي بدأ من هذا، كنت أشاهد رسامي الكاريكاتير يرسمون رسومات بيضاء ناصعة بألوان جميلة مكتملة، وكنت أتساءل عن كيفية تصويرهم للورقة وكيف جعلوا الورقة بيضاء ولم يخربها المسح مثلاً، عرفت لاحقًا بأنهم يفعلونها باستخدام الحاسب الآلي، تواصلت مع فنان كاريكاتير وسألته عن الطريقة المناسبة لأفعل مثله وعرضت له أعمالي السابقة في الرسم على الورق -كنت جيدًا جدًا على الورق- فطلب مني أن أستمر بالرسم على الورق ولا أهتم الآن للحاسب الآلي ومع الوقت سأتعلم بنفسي، لذا قررت تعلّم الـPhotoshop ثم تعلّمت كل المجالات من المطبوعات إلى الواجهات مرورًا بالهويات وتجربة الاستخدام، وكلّ ذلك بنفس الهدف، الآن، بعدما اشتريت الجهاز، ها أنا منذ قليل أضعه في الدرج كالأحمق، بعدما يئست من استخدامه استخدامًا صحيحًا، لا أقصد بأنني يئست تمامًا أو لن أستخدمه أبدًا، لكنني أحاول التجربة والتدرّب كل يوم، المشكلة هي أنني أستعمل Intous 4 على أساس التعلم عليه أولاً ثم أنتقل إلى الـCintiq لكن الأفضل لي كما أرى هو أن أستعمل الأخير فهو الأسهل وهو ما تعودت عليه في الرسم على الورق، أي أن أرسم وأنا أرى ما أرسم على لوحة الرسم.

صراحة لا اعلم بالضبط عن ما تتكلمون لاني مطور ويب . لكن هذا الفيديو الهمني جدا :

تصاميم رائعة بل غاية في الجمال.

أرفع لك القُبَّعة وبما أننا عَرَبْ أرفع لك الشِّماغ.

  • تحياتي لك.

الله يكرمك سامر، شكرًا لك على لطفك :)

تصميمك جميل جدا . لكن ان اردت ان تبهر الزائر حاول عمل تصميم غير متداول . انا عن نفسي اراه عادي جدا ويستخدم بكثرة. تستطيع عمله مع قالب AVADA في الوردبريس ببساطة .ان اردت التميز عليك بل تصميمات الاحترافية جدا خصوصا في مجال الكرافيك .

مثال عما اتكلم :

اما عن تصميمك الحالي فلدي بعض الاقتراحات :

--- في قسم قالوا عني

تستطيع استخدام مكتبة OWL SLIDER تكون اكثر احترافية مع حركة اجمل .

---في محيط جملة " مؤمن بأن الإبداع في البساطة" لم تستخدم border-radius لكنك استخدمتها في الازرار التي تحتها مباشرة وهذا اسلوب قديم بعض الشيء

--- زر الصعود الى الاعلى غير متناسق . حاول ان تصغر الايقونة الى 12px وقم بعمل بتغيير العرض والطول الى 30px;

اتمنى ان اكون قد افتدك . 

تحياتي .

شكرًا لك عزيزي على ملاحظاتك ورأيك..

في المستقبل قد أستخدم بلقن إحترافي للسلايدر، شكرًا لك :)

megasoft أضف ردا

ماشاء الله جميل

هل انت من صممت قالب الموقع؟

تسلم عزيزي :)

إي نعم، الموقع من تصميمي وتطويري :)

انت رائع بمعنى الكلمة اتمنى لك التوفيق دائما يا صديقى وفعلا الإبداع في البساطة.

تسلم عزيزي، وبالتوفيق للجميع :)

رائع بكل صراحة, تصميم مميز, ملاحظة بسيطة فقط حول Transition , معظم عناصر الصفحة تستغرق وقت أطول من الازم ليتم عرضها

أعتقد أنك تقصد ظهور العناصر، عند النزول بالأسكرول لأسفل؟

إي نعم هذه إضافة wow.js وهي تقوم بإظهار العناصر بشكل جميل عند النزول لأسفل الصفحة.. قد تكون قيمة الـ Offset كبيرة، لذلك لابد من النزول أكثر حتى يظهر العنصر..

صححني إن كنت مخطئاً..

تماما, حاول جعلها أكثر إنسيابية

تمّ، شكرًا لك عزيزي :)

أنت موهوب و تصميمك متميز ... أتمنى أن أتعاون معك قريباً

تسلم يا خشباوي، أسعد بالتعاون مع مبدعٍ مثلك :)

وبما أنك لك باع كبير في تطوير الويب، هل من إنتقادات أو نصائح فيما يخص كود الموقع؟

شكرًا لك.

أخجل ان اعلق على مثل هذا الإتقان والعمل الجاد :)

هذا الكلام شرف لي بحق! تسلم :)

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

إن شاء الله، بالتوفيق لك :)

تصميم رائع اخي و جداب اتمنى لك المزيد من النجاح

من زوقك صديقي، شكرًا لك :)

الموقع أكثر من رأئع!! والمصمم أكثر مكن مبدع !! أتمنى لك التوفيق أخي أيمن.

سؤال:

هل بالإمكان عمل نفس الحركات التي بموقعك بالجافا بدلاً من الجي كويري؟

أتصور أنك تقصد الجافا سكربت؟

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

شكرًا لك.

شكراً لك :)

ظننتها شيئاً منفصلاً...

يمكن

رائع جدا أخي أيمن

خصوصا الشعار جد متميز وفكرة أكثر من رائعه

بالتوفيق لك اخي

تسلم يا أنس، وبالتوفيق للجميع :)

قمة في الروعة والاحترافية ..

بصدق انت فنان مبدع

تحياتي

الله يكرمك هيثم، شكرًا لك :)

أكثر من رائع

تسلم عزيزي محمود، شكرًا لك.. :)

Thank You For Watching My Source Code :)

^_^

ما رأيك؟ هل لديك أي ملاحظات أو نصائح؟

أكثر من رائع !

شكرًا لك أحمد.

تبارك الخالق، تصميم جميل وألوان هادئة ومتناغمة :)

على الهامش:

أحييك أخي أيمن، يبدو أنك وجدت طريقاً لقلوب الأعضاء، 45+ نقطة ايجابية ولا نقطة سلبية :) حتى الآن على الأقل.

الله يكرمك عادل، شكرًا لك.. والحمد لله أولًا وآخرًا :)

تبارك الله، تصميم جميل جداً وظاهر أنك تؤمن بأن البساطة في الإبداع من خلال التصميم الرائع.

لدي سؤال عن ماهو إسم الخط؟

تسلم عبدو، بالنسبة للخط فهو خط جذور فلات، يمكنك الإطلاع عليه من هنا:

شكراً لك :)

شكراً، بالمناسبة تقيمي هو 10/10

بدون مجاملة أخي , كتقييم : 9.7/10

الله يكرمك محمد، شكرًا لك..

تصميم أكثر من رائع والشعار أعجبني كثيراً

أتـمني لك التوفيق من كل قلبي

شكرًا لك محمد، وبالتوفيق للجميع :)

روعة !

فونت إحترافى

تدرج لوني مناسب

شعارات أكثر من ممتازة

فقط اريد أن أعرف لو أردت لوجو كم الكلفة والوقت ؟

الله يكرمك أخي..

التكلفة والوقت يتم تحديدها بناءاً على تفاصيل كثيرة تخص العمل.. شكرًا لك.

كيف يمكننى التواصل معك ؟

ayman {at} ayman-7 {dot} com

لا أجد ما أقوله لوصف إبداعك

وخصوصا أننى من معجبين أعمالك منذ أكثر من سنتين وأنا أتابع أعمالك وأحبها جدا وتعد من مصادر إلهامي

مرحبًا صديقي عبدالرحمن، أشكرك على لطفك.. ومتابعتك شرف لي بالتأكيد..

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

عمل رائع وجميل ومدهش ومذهل و ساحر في نفس الوقت ...

تسلم علي، شكرًا لك :)

اكثر من رائع

لقد ابهرتني حقا

ماذا استخدمت من لغات و اطر عمل ؟

الله يكرمك أحمد..

بالنسبة للغات فهي HTML5 & CSS3.. وبالنسبة لإطر العمل فهي الـ jQuery، والـ Grid system الخاص بالبوتستراب..

شكرًا لك :)

اهلا ،

التصميم حقيقة أخي اكثر من رائع .. ماشاء الله :)

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

تحياتي

تسلم عزيزي، شكرًا لك..

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

بالنسبة للمصادر، فليس هنالك مصادر معينة.. لكن بيهانس، يعد المصدر الأول في ذلك..

بالتوفيق.

شكرا على الاجابة اخي:)

جميل جدا

شكرًا يونس :)

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

الله يكرمك محمد، شكرًا لك على لطفك. :) بالتوفيق للجميع.

جميل... رائع... بسيط... ملفت.... يدل على رقي شخصي

والي حبيته اكثر ردك المحفز على التعليقات

بعد ان يأست من تعلمي الويب ديزاينر قررت احاول مرة اخرى بسبب تعليقاتك المحفزة

هل من مصدر تدلني عليه يساعدني فانا اشعر كاني اتخبط كثيرااااااا ومامن جدوى

اشعر كأن هناك ترتيب معين يجب ان اتبعه في ترتيب الكود

شكرًا لك عزيزي :)

عربيًا لا أجد أفضل من الأستاذ أسامة الزيرو، شرح مبسط، وممتع.. قناته على اليوتيوب:

المسار المقترح (تم وضعه من قبل الأستاذ أسامة أيضاً):

أتمنى أن تكون إجابتي شافية، بالتوفيق لك :)

بالفعل

اشكرك على الجواب

متمني لك كل النجاح

هل يمكن لأي احد ارسال صورة لي من التصميم لأني تحمست لأراه والمشكلة ان الموقع لا يعمل