11-04-2019, 07:15 PM | #1 |
تاريخ التسجيل: Feb 2019
العمر: 38
المشاركات: 1,149
التقييم: 10
|
تاريخ التسجيل: Feb 2019
العمر: 38
المشاركات: 1,149
التقييم: 10
تعرف علي أفضل شركة تصميم مواقع
توجد العديد من الشركات المتخصصة بتصميم المواقع في هذه الأيام و غيرها الكثير مما تم إنشائه في خلال وقت قرائتك لهذه التدوينة مما يرفع مستويات المنافسة و يقلل فرص أن يتم ملاحظة شركتك من بين كل هذه الأكوام. لحسن الحظ يمكن العمل على تحسين فرص الموقع إذا ما كان يتمتع بتصميم جيد. بالرغم من أن التصميم عملية إبداعية أكثر من كونه مجموعة من الخطوات إلا أن إتباع سلسلة من القواعد قد تمكن أياً كان من الحصول على تصميم على مستوى معقول من الجودة. بالرغم من عدم سهولة الموضوع و تطلبه القليل من الخبرة و الموهبة إلا أنه من الممكن تحويل أي صفحة ويب مملة إلى أخرى مبهجة في غضون دقائق. يمكنك الإطلاع على الخطوات التالية بهدف السعي لإدارة أفضل شركة تصميم مواقع. كخطوة أولى عليك أن تنظر لتصميم الويب على أنه توليفة من مجموعة متنوعة من العناصر المتناغمة حيث لا يعمل أحدها من دون البقية. تتكون هذه التوليفة من 7 عناصر أساسية: ب - التوازن 1. التوازن Balance- Grid أو الشبكة - الألوان - المرئيات Graphics - أسلوب الطباعة - المساحات البيضاء - Connection أو التواصل المطلوب في هذا العنصر أن يكون التصميم لا يميل إلى جهة معينة أكثر من سواها. ب مثال: بفي الصورة أدناة يمكن ملاحظة أن علامة إكس إلى اليمين تعادل الثقل البصري الذي يقدمه الكلب إلى اليسار، بالرغم من أنه عبارة عن تفصيل بسيط إلا أنه يساهم بشكل كبير في تحقيق التوازن. هذا المثال يسمى بالتوازن اللامتماثل أو asymmetrical balance. إذا لم تنتبه إلى مسألة التوازن أثناء تصميم الصفحات ستحصل على صفحات تفتقر إلى التناسق. يمكن التلاعب بتوازن التصميم بأكثر من طريقة مثل اللون أو الحجم أو إضافة/ إزالة العناصر. على سبيل المثال إذا ما قمت بتغير لون علامة إكس إلى البرتقالي على سبيل المثال ستتسبب في إخلال التوازن . تحقيق التوازن اللامتماثل مسألة حساسة للغاية مما يتطلب الوقت و العين المتمرسة لتنفيذها بصورة جيدة. كمثال آخر للتوازن اللامتماثل، بالرغم من أن القسم العلوي متزن بصورة غير متماثلة إلا أن الجزء السفلي مقسم إلى أعمدة متماثلة. بالرغم من صعوبة تحقيق الاتزان غير المتماثل إلا انه يضفي لمسه مرحة على التصميم. ب إذا ما وجد تصميماً جيداً فتأكد أن الاتزان هو العمود الفقري لجودته. ب 2. الشبكة Gridيرتبط مبدأ الشبكة بصورة وثيقة مع التوازن. الشبكات في التصاميم عبارة عن سلاسل من الخطوط الأفقية و العامودية التي تساعد على تجزئة التصميم. فكر بالأعمدة؛ تسهل الأعمدة عملية القراءة، مما يجعل محتوى الصفحة سهل الاستيعاب. توفير المساحات بالإضافة إلى استخدام أحد القواعد مثل Rule of Thirds أو Golden Ratio يجعل تقسيم المحتويات أكثر راحة لعين القارىء. ب تعتمد القاعدتين السالفتي الذكر على طريقة تقسيم العناصر مثلاً لماذا تشكل ال sidebars تشغل مساحة مساوية لثلث الصفحة تقريباً و لماذا المحتوى الرئيس يماثل تقريباً مساحة التصميم مقسوماً على 1.62 . ب مثال: بتساعد الشبكة على تقسيم العناصر الصغيرة. بالرغم من أن التصميم بحد ذاته لا يعتبر مبهراً مقارنة بغيره إلا أن التقسيم يجعل عملية القراءة سهلة على العين البشرية. العمود الأيسر أكبر من حجم القوائم على اليمين بمرتين تقريباً. ب 3. اللون Colorما الذي سيبدو عليه الموقع إذا ما قمت بتغيير لون أعلى الصفحة من الأحمر إلى الأخضر الباهت، هل تعتقد أن المظهر سيبدو جيداً؟ بالطبع لا لأن للاستقرار على مجموعة من الألوان المتناسقة لتصاميمك. لا يمكنك اختيار مجالأخضر لا ينتمي إلى نفس مجموعة الألوان التي يتبعها الموقع. يمكن الاستفادة من بعض المواقع مثل ColourLoversموعة من الألوان من دون التأكد من تناسقها و ملائمتها لفكرة التصميم و الغرض منه حيث أن بعض الألوان لا تتماشى جيداً مع بعضها البعض. ب أطلع على أكبر عدد ممكن من المواقع ذات التصاميم الجيدة حتى تتمكن من استيعاب الإحساس بتداخل الألوان من ثم اختر لونين أو ثلاثة ألوان أساسية مع درجات أفتح أو أغمق من هذه الألوان الأساسية و استخدمها حسب الحاجة. أهمية اختيار ألوان لطيفة تماثل أهمية اختيار ألوان متناسقة. على سبيل المثال : الألوان الترابية ستكون ملائمة لموقع خاص بأحد المطاعم الصغيرة مثل البني أو الأحمر ....كل لون يحمل رسالة معينة لذلك يجب الإنتباه أن الرسائل التي تبعثها هي ما تريد إيصاله. ب مثال:تحمل الصورة أعلاه أسلوب مميز في اختيار الألوان. بشكل رئيس فإن التصميم يعتمد على الأبيض و الأسود و تدرجاتهما لتحقيق الإحساس بالإحترافية مع القليل من الأحمر لإبراز بعض النقاط. ب الصورة أدناه تمثل تصميم مغاير مع المحافظة على التناسق. للوهلة الأولى قد يبدو التصميم اعتباطياً، و لكن اختيار الألوان يتبع نسقاً معيناً وهو شرط مهم لضمان توافق العناصر مع بعضها البعض. ب 4. المرئيات Graphicsإحدى القواعد الذهبية في هذا القسم هو أن التصميم الجيد لا يحتاج إلى مرئيات فخمة و بالمثل المرئيات الهزيلة ستؤثر سلباً على التصميم. ب مثال:يستخدم هذا الموقع عدد قليل من المرئيات إلا أن كل منها وضع في مكانه بعد تخطيط متقن مع لون خلفية هادىء و صورة تاج بتفاصيل دقيقة. بالرغم من محدودية المرئيات إلا أنها تؤدي الغرض. ب على صعيد آخر فإن الصورة أعلاه تحتوي على عدد أكبر من المرئيات و مع ذلك فإن الاستخدام و التوزيع مثالي. ب عدم امتلاكك لمهارات تصويرية أو تنسيقية لا يعني عدم قدرتك على توظيف المرئيات بشكل جيد لخدمة أهداف موقعك الإلكتروني بعض الصور الجاهزة مع بعض تقنيات الفوتوشوب ستفي بالغرض. حاول التأكد من أن المرئيات تتماشى مع بعضها البعض و تعبر عن فحوى الموقع. من المكن اعتماد التصاميم البسيطة لتجنب المبالغة. ب 5. أسلوب الطباعة Typographyمن الصعب شرح هذا العنصر لإحتوائه على مجموعة مختلفة من النواحي. يعتبر أسولب الطباعة على الويب مقيداً بالمقارنة مع الطباعة الورقية، الفرق الأكبر هو أن مدى التحكم بالمظهر على الويب أقل بسبب ديناميكيته. كنتيجة لذلك فإن المظهر يختلف بإختلاف الأجهزة المستخدمة و المنصات المعتمدة لتصفح الموقع. ب أكوام الخطوط font stacksتوجد ثلاث طرق من الممكن استخدامها لتحسين أسلوب الطباعة على الويب و أحدها أكوام الخطوط. font stacks عبارة عن basic CSS حيث تسمح لك بتحديد الترتيب الذي سيتم من خلاله تقديم الخطوط و لكن لإبتغاء الدقة فنحن نتحدث هنا عن typefaces و ليس ال fonts. ب body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } السطر أعلاه سيمنح النص مظهر ال “Helvetica Neue.” لكنه يتطلب أن يكون تم تنصيبه مسبقاً على جهاز الكمبيوتر الخاص بالمستخدم وهو ما يتواجد في أجهزة ماك على نقيض ويندوز. ب المميز في هذه الطريقة هي إمكانية إضافة مجموعة من المظاهر fallbacks حيث أنه إذا لم يوجد أحدها سيقوم المتصفح بالبحث عن المظهر التالي على الترتيب. معنى ذلك أن التصميم سيبدو مختلفاً على اختلاف إعدادات المستخدمين لكن هذا هو الحل المتوفر حالياً. ب هذا الموقع يستخدم Helvetica Neue بينما Arial موجود على أغلب الأجهزة لذلك سيظهر كما تم تصميمه إذا ما توفر الخط أو سيتم التحويل إلى Arial إذا ما فقد. بهذه الطريقة سيكون المظهر أكثر تنوعاً للمتصفحين الذين يملكون مجموعة الخطوط التي تم التصميم بناءً عليها بينما لن يلحق الضرر بالذين يفتقدون إليها. ب Measure and LeadingMeasure هو طول الخطوط و Leading هو الارتفاع أو المساحات الرأسية للسطور. في ال CSS يمكن التحكم في السطور عن طريق تحديد عرض صندوق المحتوى. ستتأثر جودة الرؤية إذا ما كانت السطور طويلة أو قصيرة عن المعدل المقبول مما سيهدد تقبل القراء للمحتوى، مثل هذه المشكلة غالباً ما تظهر مع fluid layouts. ما بين 40 إلى 80 عنصر لكل سطر يعتبر مثالياً في أغلب الحالات. ب يمكن زيادة أو تقليل ال Leading من خلال تعيين line-height CSS property. بالعادة فإن ارتفاع 1.5 يلائم الفقرات و هو ما يعني أنه إذا ما كان حجم الخط 12 نقطة فإن الارتفاع سيكون 18 نقطة (12 × 1.5) مما يسمح للنص بالحصول على مساحة ملائمة. ب Hanging Quotes and Bulletsالطريقة الثالثة لتحسين المظهر العام للقراءة هو عن طريق استخدام Hanging Quotes and Bullets. بدلاً من ترك النص المحتوي على نقاط بمظهرها الأصلي جرب تنسيقها بصورة متوازية مع بقية النص كما هو موضح في المثال أدناه. ب يبين الخط الأحمر كيف أن النص قد تم مقاربته بشكل متوازي عن طريق تعيين padding-left CSS property بقيمة 0 . على صعيد آخر فإن الأمر ليس بالسهولة نفسها بالنسبة لل hanging quotes. معظم المصممين يلجؤون لاستخدام صورة خلفية للاقتباسات و من ثم يقومون بمقاربتها بعد ذلك كما فالصورة أدناه. بقواعد الطباعة الغير قابلة للتطبيق المطبوعات و المواقع الإلكترونية مختلفة عن بعضها حيث أن الطباعة ثابتة بينما الويب متغير و التحكم في مظهر صفحات الويب لكل مستخدم أمر مستحيل. ب كلمة عن استبدال الصوريعود القرار إليك في ما إذا كنت ترغب في استخدام النصوص أو الصور لكنها من الصعب أن تحل محل الكلمات. ب 6. المساحات البيضاء White Spaceالمساحات البيضاء هي المساحات الخالية من أية عناصر على صفحات الويب. يمكنك استغلال هذه المساحات لتسليط التركيز على عناصر بعينها عن طريق عزلها.و لكن تأكد أن الفقرات محشوة بما فيه الكفاية لضمان مستوى قراءة جيد. ب مثال:بيعتمد التصميم في الصورة أعلاه على الخط و المساحات البيضاء التي تمثل 50% من إجمالي الصفحة. تمثل المساحات البيضاء من أسهل الوسائل و أكثرها فاعلية للتصاميم المبهجة و السهلة القراءة. ب تضفي المساحات البيضاء لمسة من الأناقة على التصميم. أدناه مثال آخر على المساحات البيضاء: هذا التصميم مثال على السهل الممتنع حيث أنه مليىء بالبيانات و المساحات على حد سواء. 7. التواصل Connectionهذا العنصر يشير إلى تصاميم الويب التي تتسم بالتناغم و الوحدة. هذا العنصران يمثلان حرفية التصميم و بالتالي مدى براعة المصمم بالرغم من شمولية المعاني التي يشيران إليها. يجب أن يكون التصميم متناغماً من حيث استخدام الألوان، تنوع الخطوط المستخدمة، و الأيقونات ...إلخ كل هذه العناصر مهمة حيث أنه من الممكن أن يبدو التصميم رائعاً بالرغم من افتقاره للتناغم. ب مثال: بيؤدي عدم التناغم إلى غياب وحدة المحتوى. تعبر الوحدة عن مدى كون العناصر المختلفة متفاعلة و متلائمة مع بعضها. على سبيل المثال هل تتوافق الألوان مع المرئيات المستخدمة؟ هل تساهم العناصر في التعبير عن رسالة موحدة. على الأغلب فإن الوحدة أهم من التناغم حيث أن غيابها يضر بالتصميم أكثر مما يسببه عدم التناغم. بالنسبة للمقومات المتبقية فإن التواصل هو الأهم لأنه يجمع البقية و من دونها ينهار التصميم. من الصعب تعلم هذه المهارة أو تعليمها لذلك من المهم امتلاك حس فطري بهذه النقطة. ب هذه الصورة مثال جيد على التواصل حيث أن المرئيات و التنسيق العام يحملون لمسة التصميم اليدوي مما يحقق التناغم و الوحدة. ب في النهاية فإن الحصول على تصميم جيد لا ينحصر بهذه السبع عناصر فقطو لكنها الأهم. من المهم أن تمنح نفسك الوقت اللازم للتمكن من مهارات تصميم الويب قبل أن تقرر ما إذا كنت صالحاً لها أم لا. ب
المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress |
اقتباس |
أضف رد جديد |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
خدمة تصميم واعداد بروفايلات شركات احترافية | ضياء روحي | قسم الإعلانات التجارية | 0 | 04-09-2019 05:49 AM |
تعلم معنا طريقة تصميم موقع مجاني | raheel | قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress | 0 | 11-04-2019 06:50 PM |
تعرف علي مستقبل تصميم تطبيقات الجوال | raheel | قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress | 0 | 11-04-2019 06:47 PM |
فوائد اختيار قوالب ووردبريس عند تصميم مواقع إنترنت | raheel | قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress | 0 | 11-04-2019 05:43 PM |
تعرف علي أفضل إضافات ووردبريس لعام 2019 | raheel | قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress | 0 | 27-03-2019 10:08 PM |