تصميم مواقع الويب الخاصة بتطبيقات Killer Mobile أمثلة ونماذج

نما المشهد المحمول بشكل كبير خلال العامين الماضيين. أصبح تطبيق iOS App Store بالإضافة إلى تطبيقات Android على Google Play نقطتين ساخنتين لهواة الهواتف الذكية. مع زيادة عدد مستخدمي الهواتف الذكية ، نرى مئات من مطوري تطبيقات الأجهزة المحمولة يطلقون أفكارًا جديدة في السوق.

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

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

تحقق من هذه المفاهيم أدناه وحاول تنفيذ بعضها في تصميم موقع الويب الخاص بالتطبيق.

لقطات شاشة الجهاز

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

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

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

شارات متجر التطبيقات

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

أحب استخدام Instagram كمثال لأن الموقع قد تم تحديثه إلى تصميم أحدث. لديهم شارات تدعم Android Marketplace (Google Play) ومتجر تطبيقات iOS. كلا الشارات بسيطة للغاية في التصميم ولكن معترف بها بسهولة في لمحة. إذا كنت تبحث عن تصميمات أكثر تعقيدًا ، فإنني أوصي بالبحث السريع. يشارك المصممون الموهوبون غالبًا مفاهيم شارة متجر التطبيقات الخاصة بهم للحصول على انتقادات بناءة.

الشبكات الاجتماعية المتنقلة

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

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

الحد الأدنى من مشاركة الصور

Pose هي شبكة متنقلة أخرى ذات مُثل مثالية لتصميم الحد الأدنى. يمكنك تنزيل تطبيق الجوال لكل من أجهزة iOS و Android. الشعور مشابه لـ weheartit ولكنه مخصص لمحبي الموضة المتنقلة. يركز التطبيق بالكامل على الأزياء والشعر والمكياج والسحر.

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

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

من البدايات المتواضعة

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

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

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

مساحة بيضاء جميلة

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

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

الرسوم التوضيحية الملونة

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

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

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

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

مواقع التطبيق: Premium Showcase

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

Bosquet التطبيق