9 أمثلة جميلة لتصميم تطبيقات الويب الحديثة لإلهامك

تصميم تطبيقات الويب هو الوضع الصعب لواجهة المستخدم.

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

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

لماذا تطبيقات الويب؟

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

أهمية تصميم تطبيقات الويب

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

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

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

9 أمثلة لتصميم تطبيقات الويب الأيقونية

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

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

1) مساحة عمل Google

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

الدرس: التكامل

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

2) تويتر

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

الدرس: المحتوى والمرافق

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

3) سبوتيفي

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

الدرس: حافظ على العلامة التجارية

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

4) تريلو

تسهل "لوحات" Trello على غرار Kanban من تتبع عبء العمل لديك. تتيح لك الصفحة الرئيسية الفسيحة عرض اللوحات السابقة أو إنشاء واحدة جديدة أو تصفح بعض القوالب الشائعة. وفي الوقت نفسه ، تتيح لك القائمة العلوية التبديل بسهولة بين اللوحات ومساحات العمل.

الدرس: الوصول إلى الأشياء الجيدة

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

5) أسانا

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

الدرس: الحرية

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

6) كانفا

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

الدرس: تلبية احتياجات القاعدة

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

7) سلاك

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

الدرس: الويب صديقك

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

8) TeuxDeux

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

الدرس: حافظ على البساطة

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

9) مكتب 365

دخلت Microsoft Office في اللعبة السحابية منذ بعض الوقت ، ولكن قد لا يزال الكثيرون غير متأكدين من الإصدارات عبر الإنترنت المستندة إلى السحابة من منتجات MS Office. تحاكي تطبيقات الويب الخاصة بـ Office 365 التخطيط المألوف لـ Microsoft Word و PowerPoint وغيرها من البرامج. تتمثل الاختلافات الرئيسية في الشريط العلوي الذي يسمح لك بالتبديل السريع بين التطبيقات والأزرار الإضافية لتشجيع التعاون مثل "المشاركة" و "التعليقات" و "اللحاق".

الدرس: رأس في السحب

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

خاتمة

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

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