كيف تصمم موقع الكتروني - how to design a website

how to design a website – كيف تصمم موقع

مقدمة

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

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

الخطوات اللي هتتقال دي هتلاقيها متكررة في مشاريع تانية زي logo design و ad design مع اختلاف التنفيذ ووضعها.

بخصوص الموقع احنا الخطوات دي هتكون ميكس بين ال ux design tasks و ui design tasks

الخطوة الاولى: تجميع المعلومات والملفات المطلوبة من العميل

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

اسئلة زي .. ايه اللي بتفضله كنوع تصميم .. ايه الالوان المفروض تستخدم .. مين المنافسين .. مين المستهدفين من الويب سايت .. ايه اهدافه .. ليه بتعمل ويب سايت او ليه بتجدده .. ايه الوظيفة الرئيسية للويب سايت ده

لازم برضه تسأل العميل على الملفات المطلوبة زي اللوجو وهل اللوجو ده ليه قواعد عند استخدامه في التصميم ولا لا ، الالوان المفروض تستخدمها  ، صور خاصة لو كان عنده ، السايت ماب وعينة من الكونتنت

معلومة على السريع

حاول تستخدم الوان من الوان اللوجو متبعدش اوي عنه علشان يفضل الموقع branded للوجو سواء هو لشخص او علامة تجارية لشركة.

معلومة على السريع

ماتحاولش تستخدم lipsum .. حاول تستخدم محتوى حقيقي لان ده بيبق اقرب للواقعية عند تقديم ال mockup للعميل بكده تصميمك هيكون واقعي وافضل من مجرد template فيها الكونتنت شبه بعضه

الخطوة الثانية: البحث

عملية البحث بالنسبة لي عاملة زي لما تيجي تبني بيت وترمي اساس للبيت ده، كل ما يكون الاساس قوي وثابت كل ما يكون البيت ده ثابت امام الهزات والزلازل،

ليه البحث مهم كده لانه

١. بيخليك تبني حاجة صح  

٢. بيخلي الحاجة دي مبنية عن علم مش افتكاسة حتى لو صح   

٣.بيخلق افكار عندك مكنتش في بالك خالص في الاول   

٤. البحث عامل زي عملية التعديل على فكرتك لغاية ماتوصل للفكرة الانسب.

ازاي تبدأ البحث:

الاول ممكن تدور على الtrends الجديدة في عالم التصميم … وبعد كده ممكن تدور على ال compatitors كمحليين وعالميين حتى لو مش هم direct compatitors، مفيد جدا انك تعرف الناس التانية بتعمل ايه لان دايما اي شركة بتطمح للعالمية حتى لو امكانياتها انها بتنافس الشركة اللي جنبها.

بعد كده ممكن تعمل حاجة اسمها MoodBoard، دي باختصار انك تفتح ملف فوتوشوب او اليسترتور كبير مثلا وتبدأ وانت بتدور الافكار اللي تشوفها مناسبة او تنفع مع الموقع بتاعك .. تبدأ تاخدها وتحطها في الملف ده . ليه لان ال moodboard ده عامل زي الفلترة للحاجات الكتير اللي بتشوفها واللي من خلاله تقدر تعمل فلترة واتنين وتلاتة.

معلومة على السريع

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

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

بعد ما عرفت نوعية المستخدم من اجابات العميل ، على سبيل المثال الموقع لشركة تبيع منتجات رياضية اونلاين .. فالعملاء المتوقعون هم: الفئات من الرجال والنساء من سن مثلا ١٨ سنة ل ٥٠ سنة ، نوعية المنتجات ديه غالية فالفئة المستهدفة هي فئة ال A و ال B+ من فئات المجتمع .. الشركة تستطيع توصيل المنتجات لباب المنزل والدفع مثلا عند الاستلام والمعاينة ، تقدر تعرف اكتر ان المستخدمين الاكثر اهمية هم من سن ال ٢٥ ل ٣٥ بما انهم الاكثر استخداما للانترنت والاكثر قابلية للتعامل والشراء واستخدام المنتجات .. بكده انت حددت نوعية المستخدم اكثر.

طبعا موضوع ال user experience موضوع كبير جدا هنعدي عليه هنا بسرعة لكن علشان تحدد المستخدم ده فيه طرق كتير واساليب مختلفة لتحديد نوعية المستخدم وعمل التجربة معه لتحديد هل التصميم فعلا مناسب ام لا

الخطوة الرابعة: التحليل

دلوقتي بقى عندك : معلومات من العميل ، الملفات المستخدمة زي اللوجو والصور، ال mooboard، نوعية المستخدم ومتطلباته، وظائف الموقع الاساسية والفرعية

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

طبعا النتائج لا تكون ١٠٠٪ من اول مرة بل بالعكس لا تكون كذلك ابدا … احد مزايا وعيوب التصميم عامة انه دايما محتاج iteration تعديل ..

الخطوة الخامسة: الواير فريم wireframe

بعد ما اصبح معاك النتائج المستخلصة من التحليل .. تبدأ مرحلة ال wireframe, وافضل شئ ليها هي الورقة والقلم بعد ماتوصل للوايرفريم المناسب على الورق هتحوله لsketch ببرامج مختلفة ومتنوعة مثل sketch3, omnigraffle, illustrator, photoshop

بعد كده قدامك طريقين

١. انك تكمل بعد الواير فريم وتشتغل على الموك اب mock up لان العميل اللي بتتعامل معاه مش عارف الوايرفريم وممكن يفهم الدنيا غلط ولا هيفهم كل الخطوات اللي انت عملتها

٢. او انك تقابل عميل فاهم فيكون الافضل انك تبعتله الوايرفريم يشوفه ويدي تعليقات عليه قبل ماتدخل في خطوة الmockup بحيث توفر وقتك ووقته.

معلومة على السريع

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

الخطوة السادسة: الموك اب mockup

بعد مرحلة ال wireframe هتكون خطوة ال mockup وفيها بتحول ال wireframe ل تصميم متكامل من حيث الالوان وحجم الفونت وشكله ونوعه .. اماكن واشكال الصور المستخدمة… الايفيكتات وخلافه.

من الاخر الموك اب هو شكل الموقع الحقيقي بس كصورة jpg

بتوري التصميمات ديه للعميل وبتفضل معاه لغاية ماتاخد منه ال approve النهائية سواء كان في تعديلات او مفيش.

معلومة على السريع

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

في بعض الاحيان بتضطر تحول الmockup لحاجة اسمها الprototype علشان الprototype بيكون اكثر واقعية

الprototype باختصار: هو ال mockup بس في حالة interaction حيث العميل يستطيع التنقل بين صفحات التصميم كأنه في موقع حقيقي.

احد افضل المواقع لعمل interactive prototype هو UXpin

Share on LinkedInShare on Google+Tweet about this on TwitterShare on Facebook

4 thoughts on “how to design a website – كيف تصمم موقع

  1. naturally like your web site but you have to check the spelling on several of your posts. Several of them are rife with spelling issues and I find it very bothersome to tell the truth then again I will certainly come back again.

    1. Thank you RAY BAN, I will take your feedback into consideration :), and hope that you can come again to check latest posts.

  2. I blog quite often and I genuinely thank you for your content.
    Your article has truly peaked my interest. I will bookmark your blog and keep checking
    for new information about once a week. I opted in for your Feed too.

    1. Hello Technologya, I appreciate your feedback :), I will keep posting new stuff in the coming weeks and hope to get more benefits.

      I am also available if you want any support or answers 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *