تويت
٢٠ سر من أسرار وخفايا تصميم المواقع الاكترونية لغير المصممين
في هذه المقالة سوف نعطيك بعض الاقتراحات لكي تحصل على نتائج في غاية الروعة لتصميماتك، هذه المقالة متخصصة نوعا ما في تصميم المواقع الالكترونية. لكن يمكن تطبيق هذه المبادىء على جميع أنواع التصميمات.
قد تستغرب من ان أكثر ما يميز التصاميم الرائعة هي أصغر التفاصيل ،ويجب ان تعلم أن عدم اتباع قواعد التصميم يمكن أن يتسبب بتدمير أي عمل و ترك التصميم يبدو بشكل غير احترافي ويمكن ان يتسبب بعكس بعض معاني التصميم.ولحسن الحظ ،هناك بعض الارشادات التي يمكن ان تستخدم لتحسين التصميم الخاص بك.قبل أن تقوم بنشره.هذه العشرون خدعة عليك حفظها واتباعا .....
1- ارتفاع الخط (Line Height):
الجزء الأكبر من التصميم يتكون من الكتابة (Typography) حيث تشكل 90% من التصميم ، لهذا السبب كيفية تنسيقة هو الجزء الأصعب.. اضبط ارتفاع الخط 1.6 على جميع عناصر النصوص في ملف الـ CSS لكي تحصل على نصوص مقروءة.
2- استخدم نوعين من الخطوط :
في الواقع طريقة اختيار الخطوط ، والمقارنة بينهم أمر متعب ، لتسهيل الأمر عليك اختر خطين واجعل احدهم للنصوص وآخر للعناوين. اجعل حجم الخط (Font Size) الخاص بالعنواين اكبر من حجم خط النصوص بـ مرتين ونصف اي اذا اخترت حجم خط للنصوص 16px يجب عليك اختيار حجم خط 40px للعناوين.
3- اكتب النصوص داخل اعمدة ذات عرض قليل:
حاول ان تقرأ موضوع في مجلة سوف تلاحظ بأن قراءة المواضيع التي تم تنسيقها ضمن اعمدة صغيرة العرض اسحل للقراء من الموضوع الموضوع في تنسيق عامود واحد عريض. عند قراءتك لموضوع فان اعينك تبحث عن بداية كل سطر، عندما يكون السطر طويل يصعب على العين ايجاد بداية السطر الجديد مقارنة بالأسطر قليلة العرض.
4 - استخدام لونين
ختر لونين للعمل عليهما ، واختر واحد منهما واجعله اللون الخاص بالعناصر التي تقوم بتنفذ المهام مثل الأزرار الخاصة بالجداول Forms. واللون الآخر للعناصر بالأخرى. مثلا اذا كنت تعمل على تصميم موقع اختر اللون الأحمر للعنواين واللون الأسود للنصوص وايضا استخدم اللون الاحمر على العناصر التي تشعر انه من المهم ابرازها.
تأكد من استخدام درجة الألوان التي اخترتها بدقة ولا تستخدم احساسك لمطابقة اللون حتى ولو كان يبدو اللون متطابقا بالنظر في حالة وضع التصميم على شاشة اخرى او في حالة الطباعة سوف يبدو اللون مختلفا ، استخدم اداة تحديد الألوان للحصول على اللون بدقة Color Picker.
5- استخدم ذكائك في السرقة:
نعم اسرق لاكن بذكاء لاتعمل على نسخ المواقع حرفياً ، القي النظر على عدة تصميمات وقم باقتلاص بعض الأفكار من هنا وهناك ، اذا القيت النظر على بعض تصميمات المواقع الالتكترونية تجد ان معظم المواقع في الوقت الحالي يتم تصميمها بأنماط متشابهة ، حيث تتميز واجهاتها بسهولة الاستخدام وبساطتها، لهذا السبب يمكنك تقليد بعض الافكار مع تعديلات طفيفة عليها دون ان يشعر احد بذلك لأن جميع المواقع في الوقت الحالي تستخدم نفس مبادىء التصميم تقريبا.
6 - اضف سطر تحت العنوان :
الحاجة الى كثرة استخدام النصوص في التصميم و خاصة في تصميم المواقع الاكترونية ، يضيف بعض التحديات على المصمم للحصول لتوضيح النقاط الرئيسية من بين عدد كبير من الجمل. جرب ان تقوم باضافة خط اسفل العناوين (Underline) وسوف تجد فرق شاسع في تصميمك، بهذه الطريقة تكون قد فصلت بين العنوان والمحتوى.
7 - التسلسل الهرمي:
لكي تفهم مضمون التسلسل الهرمي بكل بساطة امسك ورقة وقلم وقم بترتيب العناصر من معيار الأهمية ضع العنصر المهم في الأعلى ومن ثم العنصر الذي يليه اسفل من والعناصر متاشبهه الأهمية بجانب بعضها البعض هذه الطريقة تساعدك على توفير الكثير من الوقت والجهد .
العناصر في اعلى التسلسل الهرمي يجب ان تعطى اهمية مثلا يجب ان تكون مكتوبة باللون الغامق (Bold) على سبيل المثال والعناصر التي بأسفل التسلسل الهرمي يمكن ان تكون بالخط الفاتح ، والعناصر المتشابهه يجب ان يكون لها نفس خصائص التصميم ،بهذه الطريقة تكون قد جذبت اعين الناظر الى الأمور المهمة بتصميمك.
8 - كرر استخدام بعض العناصر في صفحات اخرى:
اذا كنت من مصممين المواقع الاكترونية هنالك العديد من العناصر المتشاببهه مثل الترويسة في الموقع (Header) يمكنك تصميم هذه الناصر في البداية ومن ثم تكرارها على جميع الصفحات بهذه الطريقة تكون قد وفرت على نفسك الكثير من الجهد.
9 - اترك مساحات فارغة بتصميمك :
لا بد من الخروج عن المألوف احيانا ، ترك مساحة بيضاء حول بعض العناصر في بعض الأماكن يعطيها جمالا ويجب ان لا تنظر الى هذه المسافة على انها مساحة فارغة بس انظر لها على انها اداة من ادوات التصميم التي تعطي لتصميمك جمالا.
10 - رتب العناصر حسب تشابهها او نوعها:
اذا ذهبت الى دكان ووجدت ان البائع قد رتب العناصر بشكل عشوائي مثلا مواد التنظف بجانب الخضروات ، فسوف تجد صعوبة بالحصول على العنصر الذي تبحث عنه عدا عن مشاكل التلوث التي قد تصيب الخضراوات.
لهذا يجب ترتيب العناصر المتشابهه مع بعضها البعض او التي يوجد بينها علاقة ما و اختيار نسق معين خاص بها (Style) ووضعها ضمن مجموعات، والعمل على فصل هذه المجموعات بواسطة المساحة فارغة.
11 - استخدم خلفيات ملونة:
إن شعرت أن تصميمك ينقصه شيء ما ؛ جرب ان تقوم باضافة خلفية بسيطة من مجموعة من الألوان او اي شيء آخر ، حاول ان تقوم بالتعديل على الوان الخلفية و على اضاءتها (Lightness and Saturation) وانظر إلى التصميم ، هل اختف العيوب التي كنت تشعر بها؟
اذا مازالت لم تختفي حاول مرة اخرى بالتعديل على الخلفية او اتبع اسلوب آخر لإخفاء هذه العيوب.
12 - ضع قوانين لتصميمك (Style Guide)
تشبه قوانين التصميم إلى حد كبير قوانين ونظام الشركات ؛الشركات تحكمها القوانين لإتمام عملها ؛وبطبيعة الحال يعرف الموظفون هذه القوانين لإتمام العمل والتعديل عليها إن كانت بحاجة لهذا التعديل ، وكذلك المصمم تحكمه بعض القوانين لإتمام تصميمه. مثل: نوع الخط ،حجم الخط ، لون الخط ،المسافة بين الأسطر .. الخ. يجب عليك ان تقوم بتحديدها بحيث يستطيع اي شخص آخر التعديل على تصميمك باستخدام هذه القوانين.
13 - استخدم الأيقونات :
في الآونة الأخيرة انتشر استخدام الأيقونات بشكل كبير جدا (icons) حيث انها اصبحت عنصرا مهما في التصميم الجرافيكي و خاصة تصميم المواقع الالكترونية ، يمكنك ايضا استخدامها لانشاء شعار بسيط لموقعك اذا كنت لا تمتلك الوقت لتصميم شعار .
العين البشرية تستطيع تمييز الأشكال اسرع من تمييز الاحرف والكلمات من هنا بدأت أهمية استخدام الأيقونات في التصميم.
عندما تقوم باضافة bullets point اضف قبل الجملة ايقونة مناسبة لها كما هو موضح بالصورة اعلاه .
14 - ارسم ما تود القيام به باستخدام قلم وورقة قبل أن تبدأ بالعمل:
ضع ورقة وقلم بجانبك ، حاول أن تخطط لما عليك تصميمه ، تحتاج بعض الأمور إلى تخطيط مسبق ، التخطيط لتصميم ما يشبه رحلة قمت بها سبقها الكثير من التخطيطات المسبقة.
التخطيط يوفر الكثير من الوقت والجهد قد تجد الموضوع ممل في بداية الأمر لكنك لن تشعر بأهمية التخطيط الا عندما تقوم بتجربة العمل على مشروع ما بدون التخطيط له ومشروع آخرقد تم التخطيط له مسبقاً سوف تجد فرقاً شاسعاَ بالوقت والجهد و الالتزام بموعد التسليم
>
15-الالتزام بالمحاذاة:
اذا كنت من الأشخاص الذين يستخدمون محاذاة الى المنتصف للعناوين حاول هذه المرة محاذاة جميع الاسطر الى اليسار اذا كانت الكتابة باللغة الانجليزية والى اليمين ان كانت الكتابة باللغة العربية. المحاذاة الى جهة معينة يعطي انطباع الفخامة للتصميم.
16 - استخدام الشبكة الوهمية Grid Layout البسيطة:
قبل أن نبدأ بإنشاء بنية خاصّة بنا، هناك بعض الأمور التي نحتاج أن نعرفها مسبقًا. لإنشاء مخطّط لموقع ويب جديد نبدأ أولّا بالشبكة ستحتوي هذه الشبكة الأساسيّة على أسطر rows وأعمدة columns وخلايا cells ومسارات tracks وخطوط lines ومناطق areas. هناك أيضًا عناصر الشبكة :وهي بشكل أساسي عبارة عن المحتوى الذي نضعه ضمن الشبكة.
استخدام الشبكة الوهمية في تصميمك يعطي لتصميمك اناقة واتزان لذا ننصحك باستخدامها في تصميماتك خاصة اذا كنت تعمل على تصميم موقع الكتروني.
17- رتب الصور بطريقتك الخاصة:
من الصعب التعامل مع عدة صور بأحجام مختلفة ، يوجد طريقة لحل هذه المشكلة وحتى أيضاً لتحسين المظهر الاجمالي للصور ، من الممكن أن تضعها في تخطيط شبكي كما هو موضح بالصورة بالأعلى.
18- انشىء ظلال خفية:
استخدم خاصية الظلال تحت الكلام (Shadow) لكن يجب ان تكون ظلال خفية بحث لا تكون بارزة ، الصورة اعلاه توضح ان الشفافية Opacity قد تم ضبطها على 30% ،مثل هذا النوع من الظلال الخفيفة يعطي جمالا غير ملموس لتصميمك.
19 - استخدم تدرج الأوان بشكل خفيف:
اضافة القليل من تدرج الألوان يمكن ان يخفي الكثير من العيوب الموجودة بالتصميم، نحن نعلم بأن التصميم المسطح هو الشائع في هذه الأيام (Flat Design) واستخدام تدرج الأوان يناقد مبادىء التصميم المسطح ، لاكن هذا لا يمنع من استخدام تدرج الأوان بشكل قليل جدا وبألوان غير حادة بحث يبدو انه مازال مسطحا.
20 - استخدم خامة (Texture) في الخلفية بشكل خفيف:
هكذا نكون قد انهينا آخر النصائح للحصول على تصاميم خلابة باضافةخامة ذات طابع خفيف أو خفي اضافة خامة شبه غير مرئية على بعض عناصر التصميم أو في جزئية معينة قد يعطي التصميم أناقة كبيرة.
في هذه المقالة سوف نعطيك بعض الاقتراحات لكي تحصل على نتائج في غاية الروعة لتصميماتك، هذه المقالة متخصصة نوعا ما في تصميم المواقع الالكترونية. لكن يمكن تطبيق هذه المبادىء على جميع أنواع التصميمات.
قد تستغرب من ان أكثر ما يميز التصاميم الرائعة هي أصغر التفاصيل ،ويجب ان تعلم أن عدم اتباع قواعد التصميم يمكن أن يتسبب بتدمير أي عمل و ترك التصميم يبدو بشكل غير احترافي ويمكن ان يتسبب بعكس بعض معاني التصميم.ولحسن الحظ ،هناك بعض الارشادات التي يمكن ان تستخدم لتحسين التصميم الخاص بك.قبل أن تقوم بنشره.هذه العشرون خدعة عليك حفظها واتباعا .....
1- ارتفاع الخط (Line Height):
الجزء الأكبر من التصميم يتكون من الكتابة (Typography) حيث تشكل 90% من التصميم ، لهذا السبب كيفية تنسيقة هو الجزء الأصعب.. اضبط ارتفاع الخط 1.6 على جميع عناصر النصوص في ملف الـ CSS لكي تحصل على نصوص مقروءة.
2- استخدم نوعين من الخطوط :
في الواقع طريقة اختيار الخطوط ، والمقارنة بينهم أمر متعب ، لتسهيل الأمر عليك اختر خطين واجعل احدهم للنصوص وآخر للعناوين. اجعل حجم الخط (Font Size) الخاص بالعنواين اكبر من حجم خط النصوص بـ مرتين ونصف اي اذا اخترت حجم خط للنصوص 16px يجب عليك اختيار حجم خط 40px للعناوين.
3- اكتب النصوص داخل اعمدة ذات عرض قليل:
حاول ان تقرأ موضوع في مجلة سوف تلاحظ بأن قراءة المواضيع التي تم تنسيقها ضمن اعمدة صغيرة العرض اسحل للقراء من الموضوع الموضوع في تنسيق عامود واحد عريض. عند قراءتك لموضوع فان اعينك تبحث عن بداية كل سطر، عندما يكون السطر طويل يصعب على العين ايجاد بداية السطر الجديد مقارنة بالأسطر قليلة العرض.
4 - استخدام لونين
ختر لونين للعمل عليهما ، واختر واحد منهما واجعله اللون الخاص بالعناصر التي تقوم بتنفذ المهام مثل الأزرار الخاصة بالجداول Forms. واللون الآخر للعناصر بالأخرى. مثلا اذا كنت تعمل على تصميم موقع اختر اللون الأحمر للعنواين واللون الأسود للنصوص وايضا استخدم اللون الاحمر على العناصر التي تشعر انه من المهم ابرازها.
تأكد من استخدام درجة الألوان التي اخترتها بدقة ولا تستخدم احساسك لمطابقة اللون حتى ولو كان يبدو اللون متطابقا بالنظر في حالة وضع التصميم على شاشة اخرى او في حالة الطباعة سوف يبدو اللون مختلفا ، استخدم اداة تحديد الألوان للحصول على اللون بدقة Color Picker.
5- استخدم ذكائك في السرقة:
نعم اسرق لاكن بذكاء لاتعمل على نسخ المواقع حرفياً ، القي النظر على عدة تصميمات وقم باقتلاص بعض الأفكار من هنا وهناك ، اذا القيت النظر على بعض تصميمات المواقع الالتكترونية تجد ان معظم المواقع في الوقت الحالي يتم تصميمها بأنماط متشابهة ، حيث تتميز واجهاتها بسهولة الاستخدام وبساطتها، لهذا السبب يمكنك تقليد بعض الافكار مع تعديلات طفيفة عليها دون ان يشعر احد بذلك لأن جميع المواقع في الوقت الحالي تستخدم نفس مبادىء التصميم تقريبا.
6 - اضف سطر تحت العنوان :
الحاجة الى كثرة استخدام النصوص في التصميم و خاصة في تصميم المواقع الاكترونية ، يضيف بعض التحديات على المصمم للحصول لتوضيح النقاط الرئيسية من بين عدد كبير من الجمل. جرب ان تقوم باضافة خط اسفل العناوين (Underline) وسوف تجد فرق شاسع في تصميمك، بهذه الطريقة تكون قد فصلت بين العنوان والمحتوى.
7 - التسلسل الهرمي:
لكي تفهم مضمون التسلسل الهرمي بكل بساطة امسك ورقة وقلم وقم بترتيب العناصر من معيار الأهمية ضع العنصر المهم في الأعلى ومن ثم العنصر الذي يليه اسفل من والعناصر متاشبهه الأهمية بجانب بعضها البعض هذه الطريقة تساعدك على توفير الكثير من الوقت والجهد .
العناصر في اعلى التسلسل الهرمي يجب ان تعطى اهمية مثلا يجب ان تكون مكتوبة باللون الغامق (Bold) على سبيل المثال والعناصر التي بأسفل التسلسل الهرمي يمكن ان تكون بالخط الفاتح ، والعناصر المتشابهه يجب ان يكون لها نفس خصائص التصميم ،بهذه الطريقة تكون قد جذبت اعين الناظر الى الأمور المهمة بتصميمك.
8 - كرر استخدام بعض العناصر في صفحات اخرى:
اذا كنت من مصممين المواقع الاكترونية هنالك العديد من العناصر المتشاببهه مثل الترويسة في الموقع (Header) يمكنك تصميم هذه الناصر في البداية ومن ثم تكرارها على جميع الصفحات بهذه الطريقة تكون قد وفرت على نفسك الكثير من الجهد.
9 - اترك مساحات فارغة بتصميمك :
لا بد من الخروج عن المألوف احيانا ، ترك مساحة بيضاء حول بعض العناصر في بعض الأماكن يعطيها جمالا ويجب ان لا تنظر الى هذه المسافة على انها مساحة فارغة بس انظر لها على انها اداة من ادوات التصميم التي تعطي لتصميمك جمالا.
10 - رتب العناصر حسب تشابهها او نوعها:
اذا ذهبت الى دكان ووجدت ان البائع قد رتب العناصر بشكل عشوائي مثلا مواد التنظف بجانب الخضروات ، فسوف تجد صعوبة بالحصول على العنصر الذي تبحث عنه عدا عن مشاكل التلوث التي قد تصيب الخضراوات.
لهذا يجب ترتيب العناصر المتشابهه مع بعضها البعض او التي يوجد بينها علاقة ما و اختيار نسق معين خاص بها (Style) ووضعها ضمن مجموعات، والعمل على فصل هذه المجموعات بواسطة المساحة فارغة.
11 - استخدم خلفيات ملونة:
إن شعرت أن تصميمك ينقصه شيء ما ؛ جرب ان تقوم باضافة خلفية بسيطة من مجموعة من الألوان او اي شيء آخر ، حاول ان تقوم بالتعديل على الوان الخلفية و على اضاءتها (Lightness and Saturation) وانظر إلى التصميم ، هل اختف العيوب التي كنت تشعر بها؟
اذا مازالت لم تختفي حاول مرة اخرى بالتعديل على الخلفية او اتبع اسلوب آخر لإخفاء هذه العيوب.
12 - ضع قوانين لتصميمك (Style Guide)
تشبه قوانين التصميم إلى حد كبير قوانين ونظام الشركات ؛الشركات تحكمها القوانين لإتمام عملها ؛وبطبيعة الحال يعرف الموظفون هذه القوانين لإتمام العمل والتعديل عليها إن كانت بحاجة لهذا التعديل ، وكذلك المصمم تحكمه بعض القوانين لإتمام تصميمه. مثل: نوع الخط ،حجم الخط ، لون الخط ،المسافة بين الأسطر .. الخ. يجب عليك ان تقوم بتحديدها بحيث يستطيع اي شخص آخر التعديل على تصميمك باستخدام هذه القوانين.
13 - استخدم الأيقونات :
في الآونة الأخيرة انتشر استخدام الأيقونات بشكل كبير جدا (icons) حيث انها اصبحت عنصرا مهما في التصميم الجرافيكي و خاصة تصميم المواقع الالكترونية ، يمكنك ايضا استخدامها لانشاء شعار بسيط لموقعك اذا كنت لا تمتلك الوقت لتصميم شعار .
العين البشرية تستطيع تمييز الأشكال اسرع من تمييز الاحرف والكلمات من هنا بدأت أهمية استخدام الأيقونات في التصميم.
عندما تقوم باضافة bullets point اضف قبل الجملة ايقونة مناسبة لها كما هو موضح بالصورة اعلاه .
14 - ارسم ما تود القيام به باستخدام قلم وورقة قبل أن تبدأ بالعمل:
ضع ورقة وقلم بجانبك ، حاول أن تخطط لما عليك تصميمه ، تحتاج بعض الأمور إلى تخطيط مسبق ، التخطيط لتصميم ما يشبه رحلة قمت بها سبقها الكثير من التخطيطات المسبقة.
التخطيط يوفر الكثير من الوقت والجهد قد تجد الموضوع ممل في بداية الأمر لكنك لن تشعر بأهمية التخطيط الا عندما تقوم بتجربة العمل على مشروع ما بدون التخطيط له ومشروع آخرقد تم التخطيط له مسبقاً سوف تجد فرقاً شاسعاَ بالوقت والجهد و الالتزام بموعد التسليم
>
15-الالتزام بالمحاذاة:
اذا كنت من الأشخاص الذين يستخدمون محاذاة الى المنتصف للعناوين حاول هذه المرة محاذاة جميع الاسطر الى اليسار اذا كانت الكتابة باللغة الانجليزية والى اليمين ان كانت الكتابة باللغة العربية. المحاذاة الى جهة معينة يعطي انطباع الفخامة للتصميم.
16 - استخدام الشبكة الوهمية Grid Layout البسيطة:
قبل أن نبدأ بإنشاء بنية خاصّة بنا، هناك بعض الأمور التي نحتاج أن نعرفها مسبقًا. لإنشاء مخطّط لموقع ويب جديد نبدأ أولّا بالشبكة ستحتوي هذه الشبكة الأساسيّة على أسطر rows وأعمدة columns وخلايا cells ومسارات tracks وخطوط lines ومناطق areas. هناك أيضًا عناصر الشبكة :وهي بشكل أساسي عبارة عن المحتوى الذي نضعه ضمن الشبكة.
استخدام الشبكة الوهمية في تصميمك يعطي لتصميمك اناقة واتزان لذا ننصحك باستخدامها في تصميماتك خاصة اذا كنت تعمل على تصميم موقع الكتروني.
17- رتب الصور بطريقتك الخاصة:
من الصعب التعامل مع عدة صور بأحجام مختلفة ، يوجد طريقة لحل هذه المشكلة وحتى أيضاً لتحسين المظهر الاجمالي للصور ، من الممكن أن تضعها في تخطيط شبكي كما هو موضح بالصورة بالأعلى.
18- انشىء ظلال خفية:
استخدم خاصية الظلال تحت الكلام (Shadow) لكن يجب ان تكون ظلال خفية بحث لا تكون بارزة ، الصورة اعلاه توضح ان الشفافية Opacity قد تم ضبطها على 30% ،مثل هذا النوع من الظلال الخفيفة يعطي جمالا غير ملموس لتصميمك.
19 - استخدم تدرج الأوان بشكل خفيف:
اضافة القليل من تدرج الألوان يمكن ان يخفي الكثير من العيوب الموجودة بالتصميم، نحن نعلم بأن التصميم المسطح هو الشائع في هذه الأيام (Flat Design) واستخدام تدرج الأوان يناقد مبادىء التصميم المسطح ، لاكن هذا لا يمنع من استخدام تدرج الأوان بشكل قليل جدا وبألوان غير حادة بحث يبدو انه مازال مسطحا.
20 - استخدم خامة (Texture) في الخلفية بشكل خفيف:
هكذا نكون قد انهينا آخر النصائح للحصول على تصاميم خلابة باضافةخامة ذات طابع خفيف أو خفي اضافة خامة شبه غير مرئية على بعض عناصر التصميم أو في جزئية معينة قد يعطي التصميم أناقة كبيرة.