10 مفاهيم تصميم يحتاج كل مطور ويب إلى معرفتها

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

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

01. التصميم ليس مجرد تصميم بصري

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



كيفية إنشاء خريطة الإزاحة

التصميم هو 'كيف' و 'لماذا' يريد الناس استخدام الموقع ؛ السرعة التي يتم تحميل الموقع بها ؛ التفاعل بين التمرير والنقر واللمس ؛ والوتيرة التي تقدم بها الميزات والمحتوى الجديد. كل هذه المفاهيم تشمل التصميم.

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

02. كن مرتكزًا على المستخدم

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

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

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

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

03. التصميم بالتفصيل

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

04. عند التصميم ، ارسم في كثير من الأحيان

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

تتيح لك الرسومات التكرار على الأفكار بسرعة وتوفير الكثير من الوقت في تجربة النماذج بالأحجام الطبيعية أو التعليمات البرمجية

تتيح لك الرسومات التكرار على الأفكار بسرعة وتوفير الكثير من الوقت في تجربة النماذج بالأحجام الطبيعية أو التعليمات البرمجية

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

فوتوشوب كيفية ملء الشكل

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

05. استخدام الفضاء الأبيض

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

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

للمساحة الرأسية ، ما عليك سوى استخدام كسور من حجم خط النص. أميل إلى إبقاء الأمور بسيطة واستخدام مقياس 0.25 ، ولكن هناك العديد من المقاييس الأخرى التي يمكنك استخدامها . على سبيل المثال ، إذا كان حجم الخط الأساسي هو 16 بكسل (1em): 4 ، 8 ، 12 ، 16 ، 20 ، 24 ، 28 ، 32 ، 40 ، 48. هذا يسمح باختيار أحجام الخط ببساطة عن طريق تحريك المقياس لأعلى ولأسفل كما أنا تريد نوع أكبر أو أصغر.

تستخدم Apple المساحة البيضاء جيدًا لتسليط الضوء على منتجاتها وعرضها

تستخدم Apple المساحة البيضاء جيدًا لتسليط الضوء على منتجاتها وعرضها

06. الشبكات ليست مجرد أطر CSS

مجنون ، أليس كذلك؟ وجدت الشبكات لأول مرة مكانة بارزة في التصميم فيما يسمى الآن أسلوب الطباعة الدولي .

يجب استخدام الشبكة من أجل:

  • إنشاء علاقات بين الأشياء
  • توفير نظام أساسي للمحاذاة البصرية
  • ساعد في إنشاء إيقاع أفقي وعمودي
  • تساعد في إنشاء توازن بصري

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

اتشح

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

07. عندما يتم التركيز على كل شيء ، لا شيء يعمل

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

08. احتفظ بمجلد للإلهام

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

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

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

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

09. التصميم هو كل شيء عن حل المشاكل

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

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

10. تعرف على كيفية التحدث عن التصميم ونقده

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

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

حرب النجوم آخر خط جدي

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

الموارد وورشة العمل

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

كلمات: كايل فيدلر

كايل فيدلر هو مصمم في thinkbot ، يساعد في إنشاء تطبيقات Rails و iOS. لقد كان يصمم ويطور ، بشكل ما ، منذ طفرة الدوت كوم (والكساد) ولم يتوقف منذ ذلك الحين.

ظهر هذا المقال في الأصل بتنسيق مجلة صافي العدد 244.

أحببت هذا؟ اقرأ هذه!

هل لديك نصيحة تصميم رائعة؟ شاركه في التعليقات!