دليل تصميم الويب للمطورين

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

التصميم

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

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

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

لا يتعلق الأمر بالموهبة

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

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

في الواقع ، أخبرت هذه القصة بحقيقة أن التصميم مهارة ، وكما هو الحال مع أي مهارات أخرى ، يمكن إتقان التصميم.

اختيار الأداة

في البرمجة ، يمكنك أخذ Notepad عادي واستخدامه لكتابة تطبيق ليس بأي حال من الأحوال أقل من ذلك الذي تم إنشاؤه باستخدام IDE قوي ، على الرغم من أن البرمجة في Notepad قد لا تكون المهمة الأكثر إمتاعًا ، وربما تستغرق عملية التطوير وقتًا أطول بكثير من باستخدام الأدوات المناسبة. إذا تحدثنا عن تصميم الويب ، يمكن لـ MS Paint أن يلعب دور Notepad هنا ، وآمل أنه ، كما في المثال في Notepad والبرمجة ، سيستخدمه القليل جدًا لحل مشاكل التصميم.


أدوات تصميم الويب الشائعة

فيما يلي بعض أدوات تصميم الويب الشائعة:

• Sketch أداة حصرية لنظام MacOS. إذا قمت برسم موازٍ لعالم برمجة الويب ، فسيكون شيئًا مثل React للتصميم. هناك شعور بأن ذكر Sketch موجود في كل وظيفة شاغرة للمصمم. هذا الشيء يكلف 99 دولارًا سنويًا.
• Adobe XD هي أداة مجانية عبر الأنظمة الأساسية ، وتواصل تشابه البرمجة ، تشبه Vue. حول Adobe XD ، لم يتم تكوين مجتمع كبير مثل Sketch ، ولكن إتقان هذه الأداة بسيط للغاية.
• Adobe Photoshop هو شيء يشبه السكين السويسري في عالم التصميم ، والذي يعرفه الجميع ، والذي يمكن مقارنته بـ jQuery. يمكنك استخدام Adobe Photoshop مقابل 9.99 دولارًا في الشهر.

لا يوجد فرق فعليًا سواء كنت تستخدم Sublime أو VS Code لكتابة التعليمات البرمجية. يمكن قول الشيء نفسه حول ما إذا اخترت React أو Vue لتطوير الواجهة. هذه مسألة ذوق. ويمكن قول الشيء نفسه عن أدوات المصمم. لكل منهم مزاياه وعيوبه.

أستخدم Adobe XD. السبب الرئيسي لهذا الاختيار هو عبر المنصات ، ونتيجة لذلك ، كما لو كنت اخترت Sketch ، فأنا لست رهينة لنظام Apple البيئي. بالإضافة إلى ذلك ، يتم دعم Adobe XD من قبل Adobe ، لذلك يمكنك أن تأمل في وجود هذا المشروع لفترة طويلة جدًا. وسيكون من الممتع بشكل خاص للمبتدئين أنه منذ مايو 2018 يمكن استخدام Adobe XD مجانًا ، على الرغم من بعض القيود (على الرغم من أنه من غير المحتمل أن تتداخل معك على أي حال).

عن المزاج الصحيح

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

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

أدوات التعلم

عند كتابة كود لصفحات الويب ، يتم استخدام عناصر HTML ، مثل div ، span ، حقول إدخال البيانات ، مما يسمح للمتصفح بتحويلها إلى شيء يمكن رؤيته على الشاشة. من خلال العمل باستخدام أدوات التصميم ، تحصل على فرصة للتخلص من التوسط واستخدام العناصر المرئية ، مثل الأشكال الهندسية أو أجزاء النص ، مباشرةً.

لقد اخترت الأدوات المصممة الأربعة الأكثر استخدامًا ، فهي ليست كثيرة ، لذلك لا يمكنك قضاء الكثير من الوقت في تطوير هذه الأدوات. من الأفضل قضاء الوقت ، في الواقع ، على التصميم. أي ، بسرعة فهم الأساسيات ، يمكنك البدء على الفور في الممارسة. لنتحدث عن هذه الأدوات باستخدام Adobe XD كمثال.

Toolأداة المستطيل - مستطيلات

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


مستطيل

ool نص أداة - تسميات سطر واحد

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

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

لإنشاء جزء من سطر واحد من النص ، حدد أداة النص في شريط أدوات Adobe XD ، وانقر فوق مكان النص ، وأدخله. يجب أن يؤخذ كقاعدة لاستخدام هذا الوضع في النقوش ذات الخط الواحد ، والتي يمكن تحديد عرضها تلقائيًا. هذه هي رؤوس وتسميات الكائنات أحادية السطر.


أداة النص - تسميات سطر واحد

oolTool Text - نصوص كبيرة

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


أداة النص - مقتطفات نصية متعددة الأسطر

▍ حدد أداة - اختيار الكائنات

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


حدد الأداة

oolأداة خط - خطوط

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


أداة الخط

التصميم: توصيات وحيل

▍ التخطيط

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

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


أمثلة على التخطيط غير الناجح والناجح

▍الألوان

عند اختيار الألوان لمشروعك التالي ، كن على دراية بمفهوم مثل علم نفس اللون . للعثور على تركيبات ألوان جيدة بناءً على اللون الأساسي ، يمكنك استخدام مشروع Paletton .

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


أمثلة على العمل باستخدام الألوان والنص

ypالطباعة

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

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


أمثلة نصية كبيرة

تصميم الصفحة الرئيسية (أو الهبوط)

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

بعد أن أفهم القصة التي أريد سردها من خلال الصفحة ، عادة ما أبدأ في البحث عن الإلهام. مصدر كبير للإلهام بالنسبة لي هو مشروع land-book.com ، وهو عبارة عن كتالوج شامل للتصميمات الرائعة لتصميمات الصفحات المقصودة التي يمكنك التصويت لها. مشروع آخر حيث يمكنك البحث عن الإلهام هو واجهات . pro . يسمح لك بتحديد صفحات من أنواع معينة ، على سبيل المثال ، يمكن أن تكون صفحات تحتوي على معلومات حول الأسعار ، أو صفحات 404 ، أو صفحات تحتوي على معلومات حول المواقع. أنا فقط أشاهد كل هذا حتى أتمكن من العثور على ما يكفي من المواقع التي أحبها ، ويتوافق مظهر الصفحات التي تتوافق مع أفكاري حول أسلوب المشروع الذي أقوم به.


الصفحة المقصودة

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

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

▍ الاستنتاجات والتوصيات

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

تصميم تطبيق الويب (أو لوحة التحكم)

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

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

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


تطبيق ويب

Contain حاويات العرض الثابتة

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

فيما يلي بعض الأمثلة على تطبيقات الويب التي تستخدم حاويات ثابتة: Twitter و Buffer و DigitalOcean و Netlify و GitHub .

contain حاويات مرنة

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

تتضمن الأمثلة على التطبيقات التي تستخدم حاويات مرنة Slack و Intercom و Hotjar و Google Sheets و Trello و Spotify .

▍ الاستنتاجات والتوصيات

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

الملخص

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

أعزائي القراء! هل تعتقد أن المبرمج الوحيد يمكنه تحقيق نتائج تصميم جيدة؟