Les programmeurs et les développeurs ne sont généralement pas des concepteurs - cela est largement accepté comme étant vrai. Les développeurs ont tendance à s’efforcer de faire fonctionner une application - les concepteurs s’efforçant de rendre l’application attrayante du point de vue esthétique . Mais pourquoi les développeurs ne peuvent-ils pas en faire autant?

À l'époque, lorsque les pages de renvoi animées et les superbes mises en page étaient une chose très intéressante, il était donc logique de faire appel à un designer professionnel. Mais la tendance est aujourd’hui minime - ou du moins très simplifiée.

Laissez-moi vous donner un exemple anecdotique - il y a quelque temps, quelqu'un m'a demandé de créer un écran de démarrage pour leur logiciel PC. Je me suis donc mis à fond - je l'ai dessiné sur du papier à dessin, je l'ai importé dans PhotoShop, j'ai créé beaucoup de lignes et d'effets de néons de fantaisie. Cela aurait pu être un fond d'écran, plutôt qu'un écran de démarrage. Le point est que j'ai créé ce design vraiment sophistiqué et élaboré pour eux.

Comme vous pouvez probablement le deviner, ils n'aimaient pas ça. La conception qu'ils ont utilisée était littéralement un petit logo de quelques cercles de couleurs se chevauchant, et le nom du logiciel en dessous. J'aime, 2 minutes en travail PhotoShop. Et tu sais quoi? J'ai dû accepter que c'était mieux que le mien.

Le point que je soulève est donc - je pense que les programmeurs tombent dans le piège de faire la même erreur que moi. Nous avons tendance à penser que les interfaces utilisateur et les écrans de démarrage doivent être des éléments vraiment fantaisistes et accrocheurs qui font que l'application se démarque . Mais ils ne doivent pas l'être - honnêtement, ils ne devraient pas l'être. Nous devrions prendre l’ esprit du programmeur et l’appliquer à la conception esthétique - travaux simples, fonctionnels.

Dans cet article, nous allons examiner des moyens très simples de créer une élégante APP Android UI / UX, même si vous n’avez presque aucune expérience en matière de conception.

Sauf si vous voulez vraiment autre chose, restez fidèle à la conception matérielle

Votre application n'a pas besoin d'être « unique» et « se démarquer du reste» pour être populaire et bien paraître. C’est ce que la conception matérielle de Google avait pour objectif de créer: une norme pour l’interface utilisateur des applications dans l’industrie, et ils ont fait du bon travail. Il existe une tonne d'applications populaires qui collent à Material Design - certains des plus grands noms des applications Android, comme SwiftKey, Nova Launcher, Textra SMS, YouTube, pour n'en nommer que quelques-uns.

L'objectif principal de Material Design est une mise en page à base de cartes, avec une palette de couleurs unies. Google a travaillé avec des designers de premier plan, puisant dans de nombreux éléments tirés de pratiques de conception minimalistes, puis a publié le tout gratuitement - c'est une très bonne affaire, car les cours de conception de sites Web et d'applications peuvent générer des centaines de dollars en livres électroniques, vidéos, etc. etc.

Commencer à utiliser Material Design est incroyablement facile, et il existe quelques outils qui le rendent encore plus simple, que nous allons énumérer ci-dessous:

• Éditeur de thème de matériau (macOS + Sketch)
• Module externe de palette de couleurs de conception matérielle (PhotoShop / Illustrator)
• Kit d'interface utilisateur de conception matérielle PSD (PhotoShop)
• Kit d'interface utilisateur de conception de matériel Android ( esquisse)
• Générateur de thèmes d'interface utilisateur

Et si vous avez besoin d'inspiration pour créer des thèmes simples et élégants dans Material Design, consultez la liste de ces blogs:

• MaterialDesignBlog - 15 exemples impressionnants de conception de matériaux bien faite
• MockPlus - 12 meilleurs exemples de sites Web dédiés à la conception de matériaux pour attirer l'inspiration
• AndroidAuthority - 10 meilleures applications de conception de matériaux pour Android

Les dégradés de couleurs sont beaucoup plus faciles que vous ne le pensez

Pour une alternative à Material Design, les dégradés de couleurs sont simples, tendance et accrocheurs. Et vous pourriez penser que les concepteurs passent beaucoup de temps à peindre dans toutes les couleurs ou à concevoir le dégradé ultime. Vous auriez tort - cela peut être fait en 10 secondes dans PhotoShop.

10 secondes dans l'interface utilisateur gradient de Photoshop.

Je vous expliquerai même si c'est facile.

Créer un nouveau projet PS pour mobile ( 1080 x 1920 px @ 72 ppp fonctionne bien)

UIGradients.com - Grande collection de dégradés pré-fabriqués.

Allez sur UIGradients.com et trouvez quelque chose que vous aimez.

Copier les valeurs hexadécimales de couleur à partir de UIGradients

Copiez les dégradés de couleurs au-dessus de l'aperçu.

Sélecteur de dégradé PhotoShop.

Cliquez avec le bouton droit sur un calque vide dans PS, puis sélectionnez Options de fusion> Superposition de dégradé.

Cliquez directement sur l'aperçu du motif en dégradé dans le menu déroulant. Ne cliquez pas sur le bouton déroulant. Un clic directement sur le dégradé ouvre l'éditeur de couleurs.

Entrez les valeurs hexadécimales d'UIGradient dans l'outil de dégradé PS.

Il suffit maintenant de coller les valeurs hexadécimales de couleur de UIGradient dans l’éditeur de dégradé PS.

Ajustez si nécessaire. Vous avez maintenant un arrière-plan dégradé professionnel pour votre application Android.

Autres outils de dégradés à découvrir:

• WebGradients.com
• Android Shapes Generator ( pour générer des formes via XML, avec option de dégradé)

Utiliser des SVG au lieu de JPG / PNG

Au lieu d'utiliser des PNG ou des JPG pour vos éléments graphiques (boutons, logos, etc.), vous devriez plutôt utiliser des SVG ( Scalable Vector Graphics) . En effet, les SVG peuvent être redimensionnés sans perte de qualité. Par exemple, si vous convertissez un fichier JPG en une valeur supérieure, il perd de la qualité et devient flou / pixelisé. Un SVG ne le fait pas. Les gens essaient d’utiliser d’énormes fichiers PNG qui seront redimensionnés pour s’adapter aux écrans Android. À la place, vous pouvez utiliser des SVG plus petits qui sont redimensionnés sans perte de qualité.

De plus, les fichiers SVG peuvent avoir une taille de fichier jusqu’à 60% à 80% inférieure à celle du fichier PNG . Cela signifie que votre application ou votre site Web mobile se chargera plus rapidement pour l'utilisateur, et sera beau quelle que soit la résolution de l'écran.

Inclure un mode sombre à l'aide de Theme.AppCompat.DayNight

Vous n'avez pas besoin de concevoir deux thèmes distincts pour inclure un thème de mode nuit / nuit dans votre application. Il est pratiquement intégré à la bibliothèque AppCompat. Il vous suffit de l'activer et de modifier les valeurs.

Voir le guide d'Appual «Comment implémenter un mode sombre dans votre application Android».

Utiliser un modèle ou un kit d'interface utilisateur mobile

Si votre application ne nécessite pas une interface graphique personnalisée sophistiquée, l'utilisation d'un modèle ou d'un kit est absolument irréprochable. Les modèles et les kits peuvent être utilisés comme une ligne directrice inspirante, ou vous pouvez littéralement simplement utiliser le modèle / kit tel quel, en ajoutant vos propres boutons et autres éléments.

Quelques bonnes ressources pour les modèles et kits d'interface utilisateur Android:

• SpeckyBoy - 50 kits d'interface utilisateur mobile gratuits pour iOS et Android
• SketchAppSources - Ressources pour l'application Android ( Sketch)
• Freebiesbug - Kits d'interface utilisateur PSD ( PhotoShop)