جار التحديث ...
جار التحديث ...
صورة المقال الافتراضية

خطوات و معايير بناء مشروع موقع

  • 3

السلام عليكم و رحمة الله تعالى و بركاته

في هذا الموضوع سنقوم بالتطرق إلى الخطوات القبلية للتصميم ثم ننتقل إلى معايير التصميم .

الخطوات القبلية : هي الخطوات التي تسبق البدأ بالتصميم .

أولا قبل البدأ بأي تصميم يجب أن يكون لديك على الأقل التصور المبدئي لشكل الموقع .

------------------------------- عملية التصور -----------------------------------

و لكي يكون لديك ذلك التصور المبدئي يجب أن تكون قد أجبت على التساؤلات أدناه :

1-ما هو هذا الموقع.

2-ما هو مجاله ( تقني , طبخ ... إلخ ).

3-من يستهدف أو من أجل من صنع هذا الموقع.

4-ما هي تقسيماته أو بعبارة أخرى ما الذي سيجده المستخدمين في موقعك.

5-ما هي فوائده و ما هي مميزاته.

6-من هم منافسيك ( إن لم يكن هناك منافسين , فما هي المواقع الأقرب لفكرة أو مجال موقعك ).

-تساؤلات أخرى... مثل كيف سيجني المال .... كيف تراه بعد 5 سنوات من الآن ... إلخ

كل تساؤل تجيب عليه سيقرب و يوضح لك الصورة و لون و شكل الموقع أكثر فأكثر .

فلو قلنا أن الموقع عبارة عن شبكة إجتماعية , فالصورة التي في مخيلتك الآن لن تكون مثل موقع لوصفات الطبخ .

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


1- ما هو هذا الموقع : هل هو موقع شخصي هل هو موقع لإبراز علامتك التجارية ... إلخ

2- ماهو مجاله : هذه واحدة من أهم الأسئلة .. بعد إجابتك عنها ستحدد لك الكثير من التفاصيل و محتويات الموقع ... مثلا : مجاله الطبخ .

-الألوان المحتملة : الأبيض , الأصفر , الأحمر , البرتقالي , البني , الأخضر .. إلخ

-الألوان التي يفضل تجنبها : الأزرق , الأرجواني ... إلخ

-الموقع يحتوي على صور أو فيديوهات بالإضافة إلى مقالات .

3-من يستهدف أو من أجل من صنع هذا الموقع: هنا سيتحدد لك تقسيم الموقع و آليات عمله .

4-ما هي تقسيماته أو بعبارة أخرى ما الذي سيجده المستخدمين في موقعك : سؤال مباشر .. إذا وصلت إلى هذا السؤال فسأستنتج بأنك قد حددت معظم كينونة الموقع .

5- ما هي فوائده و ما هي مميزاته : الفوائد ليست المميزات .

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

-وجودها ضروري لأن المستخدم يستخدم موقعك لأجلها.

-هي من الأساسيات التي بغيابها لن يلتفت المستخدم لموقعك أبدا.

-المميزات : - و هي الإضافات التي سيستخدمها في موقعك .

-وجودها شيئ جيد.

-غيابها لا يضر.

راجع هذا المقال : https://site.nawaa.app/%D9%81%D9%88%D8%A7%D8%A6%D8%AF-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D8%AC%D9%83-%D9%84%D9%8A%D8%B3%D8%AA-%D9%85%D9%85%D9%8A%D8%B2%D8%A7%D8%AA%D9%87/


6-من هم منافسيك : هذه خطوة مهمة جدا .. ستساعدك في الكثير ... منها أنك ستعرف ما يفضله المستخدم من دون سؤاله .. إلخ


كما بإمكانك أن تضيف ساؤلات أخرى حسب نوع الموقع و رؤياك .


بعد أن إنتهينا من التحدث عن ماهية الموقع و بعد أن إتضحت صورته نأتي إلى الخطوة التالية :

-------------------------------- عملية التخطيط ----------------------------------

بإمكانك أن تأتي بورق و قلم للبدأ بوضغ ذلك التصور المبدئي على الورقة ... كما بإمكانك إستخدام برنامج معين ( أنا أستخدم برنامج figma ) .

البداية ستكون بتدوين لائحة تقسيمات الموقع .

يمكنك أيضا تفقد المواقع المشابهة للإستلهام منها.

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

-تجربة المستخدم UX :

هو ليس بشيئ مادي , بل هو شعور المستخدم البسيط عند تصفحه للموقع . هل هو مرتاح عند التصفح هل الأوان قوية لدرجة أنه يظن أنها تشوش عليه ... إلخ.

و هو شيء ليس ثابت و لكنه ليس عشوائيا أيضا .

-أما اليوزر أنترفايس UI :

فلها أيضا قواعدها مثل المساحات البيضاء و التخطيطات .

لن ندخل إلى هذا المجال لضعفي فيه ... لكن إن وصلتم إلى هنا فبإمكانكم سؤال الخبراء و آراء المصممين الآخرين مثلما أفعل أنا في سيرفيرات ديسكورد

https://i.ibb.co/899xdky/untitled.png


https://i.ibb.co/PFw8pKN/untitled-1.png


https://i.ibb.co/XjTwxRp/untitled-2.png

و ستتلقون ردود مختلفة

و كما يمكنكم دراسته أيضا .

------------------------------ تكويد التصميم --------------------------------

إلى هنا نكون قد وصلنا إلى تكويد التصميم باللغات الوصفية Html و Css و لغة javascript لإضافة التفاعل للتصميم .

هذه المرحلة تتطلب قدرة على جعل تصميم الموقع مجرد رسم على ورق إلى صفحات حقيقية .

و يجب أن تكون متقنة , بالإضافة إلى جعلها مجاوبة مع معظم الشاشات ( شاشة الكمبيوتر , التابلت و شاشة الهواتف )


------------------------------ برمجة الموقع -----------------------------------

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


بما أنني وصلت إلى نهاية هذا المقال , فأقترح عليك أن تلقي نظرة على هذه الروابط :

https://webflow.com/blog/the-web-design-process-in-7-simple-steps

https://www.orbitmedia.com/blog/web-design-standards/

https://www.forbes.com/sites/denispinsky/2018/02/12/website-design-standards/#55bfe91cf54f


و إن كان لديك إستفسار أو تعقيب , فلا تتردد في وضعه في التعليقات .


ارى صراحة ان خطتك لعمل الموقع سليمة الى حد كبير , خطورات منظمة وواضحة تؤدي في النهاية الى مشروع متكامل مبني بطريقة صحيحة تزيد من فرص النجاح , لكن سؤالي هنا وأعتقد انه مهم , في أي مرحلة يتم تصميم الهوية البصرية للموقع ؟

أقصد بالهوية البصرية هي الشعار وبعض الصور والالوان والنصوص وما الى ذلك , هل المكان الانسب هو بعد مرحلة التخطيط (قبل مرحلة التكويد) أم بعد تكويد الموقع ؟


  • 1
رد على التعليق (2)

الردود :


شكرا على الإطراء ... المعلومات التي هنا هي نتاج بعض من المطالعة في المواقع الأجنبية مع بعض ما جربت لذلك قمت بإرفاق المصادر .. أما بالنسبة للهوية البصرية للموقع فهي من أساسيات بناء المواقع .. أما عن مكانها الأنسب فأرى أنه في مرحلة التخطيط أفضل لأنه في تلك المرحلة تكون كل الأوراق فوق الطاولة كما بالإمكان تحسينها في أي مرحلة أخرى أو حتى تغييرها مثل الكثير من الشركات . راجع هذا الرابط : https://www.hongkiat.com/blog/logo-evolution/ --- آسف على الرد المتأخر---

يسعدني ردك وتبادل النقاش معك , مرحباً بك في مجتمع نقرة :)


سجل الدخول لاضافة رد
سجل الدخول للتعليق