6 مبادئ تطبقها شركات تصميم مواقع الانترنت المحترفه في اعمالها

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

شركة تصميم مواقع


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

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

01. التوازن في تصميم الموقع الالكتروني


هل سبق لك أن رأيت yogi تعيس؟ يبدو أن إيجاد التوازن هو المفتاح للحظ الجيد ، والاستقرار ، والسعادة المهنية ... والتراكيب الفنية. من حيث التصميم ، يتحقق التوازن من عدم وجود عنصر واحد يعلو على عنصر آخر ، مما يؤدي إلى تضاؤل ​​العناصر الأخرى في الخلفية ولا يخدم أي غرض. هناك ثلاثة أنواع من التوازن للاختيار من بينها:

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

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

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

كيفية تطبيقه على موقع الويب الخاص بك:


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

02. تباين الالوان في التصميم


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

كيفية تطبيقه على موقع الويب الخاص بك:


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



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

03. التأكيد


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

كيفية تطبيقه على موقع الويب الخاص بك:


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

04. الحركة ليس دائما جيدة في مواقع الويب


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

كيفية تطبيقه على موقع الويب الخاص بك:


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

05. التكرار 


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

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

06. التسلسل الهرمي 


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

كيفية تطبيقه على موقع الويب الخاص بك:

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

تعليقات

المشاركات الشائعة من هذه المدونة

أساسيات مهمة لتصدر موقعك الالكتروني بمحركات البحث

كيفية تصميم موقع صفحة واحدة بسيط وجميل