Share
ABC Animals est une application amusante et attrayante qui enseigne aux enfants comment écrire des lettres. Mon client, un développeur avisé qui avait créé d'autres applications par le passé, m'a présenté un concept existant pour cette application. ABC Animals pour iPhone avait déjà été produit et mon client cherchait à migrer ce concept sur iPad. Avec une augmentation de l’aspect visuel et un intérêt croissant pour l’appareil, cette application convient parfaitement à l’iPad. Cet article détaille le processus de création du design pour cette application..
Conçu dans les orientations horizontale et verticale, vous trouverez ci-dessous la conception finale de l'application créée dans Adobe Illustrator..
Bien que le principe de base de cette application soit l’amusement et l’apprentissage, il restait un niveau de précision technique à reconnaître..
Dès le départ, ce projet a bénéficié des connaissances approfondies de mon client. Il n’est pas rare que les clients demandent que les choses se fassent d’une certaine manière, mais dans la réalité, leur vision peut ne pas être la meilleure solution au problème. Cette situation était différente. Mon client est venu me dire avec une idée générale du fonctionnement de l'application et un brouillon réfléchi. De plus, comme il est lui-même un développeur, nous connaissions tous les deux les défis uniques à relever pour mener à bien cette application..
L'application devrait fonctionner dans les orientations horizontale et verticale. Gardant cela à l'esprit, nous avons fait de notre objectif prioritaire la création d'une zone carrée de la zone d'écriture principale de l'application, de sorte que la zone d'écriture reste cohérente, quelle que soit l'orientation de l'iPad. Cela réduit les délais de conception et de développement.
La zone d’écriture était un élément unique, car nous avons choisi de ne pas utiliser la métaphore du bloc-notes. Cela étant, je devais travailler avec diligence pour insuffler de la vie dans le tableau blanc. Un bloc-notes a naturellement plus de place pour une exécution créative (courbures de pages, taches de papier, etc.). J'ai donc dessiné des coins renforcés et biseauté le bord du tableau blanc pour augmenter l'intérêt porté à ce composant de l'interface. Ensuite, j'ai créé chaque ligne pour une apparence plus organique au lieu d'être solide et parfaitement droite.
Bien que le principe de base de cette application soit l’amusement et l’apprentissage, il restait un niveau de précision technique à reconnaître. Le client m'a fourni une police de traçage de lettre existante que j'ai utilisée lors de la création de la zone d'écriture..
Nous savions également que l'application nécessiterait une configuration qui permettrait à l'utilisateur d'accéder facilement à toutes les options de lettre sans trop interférer avec les propriétés visuelles avec lesquelles nous travaillions. Pour résoudre ce problème, nous créerions une navigation glissante élargie à l’interaction. Alors que l'iPad comprend des éléments génériques d'interface utilisateur pour accomplir ce look, je trouve plus approprié de concevoir des éléments uniques chaque fois que possible pour unifier le tout..
Viennent ensuite les principaux éléments visuels auxquels les enfants devraient faire référence. Pour cet élément particulier, il ne serait pas possible de le garder identique lorsque l'iPad était dans l'une ou l'autre orientation. Il a donc été décidé que l'image principale et la lettre correspondante seraient séparées dans l'orientation verticale..
Les animaux eux-mêmes ont été créés pour la version iPhone de l'application par un autre concepteur. Je les ai donc simplement inclus dans cette version. J'ai donné aux animaux la part des lions de l'espace sur les cartes et j'ai suivi leur place avec les lettres elles-mêmes. Ensuite, j'ai ajouté un peu de variance et d'intérêt aux cartes en les empilant et en les orientant légèrement. J'ai ajouté des dégradés subtils et des ombres portées pour donner vie aux cartes. Je suis même allé jusqu'à ajouter un gradient ténu dans les lettres elles-mêmes!
Apple a indirectement indiqué que les applications contenant des éléments pseudo-réalistes sont cool. Quelle que soit l'application Apple iPad que vous regardez, vous remarquerez que tous les éléments semblent avoir été conçus avec la plus grande minutie. Sachant cela, il était évident que cette application ne pouvait se permettre d'être une exception!
Pour apporter un niveau de réalisme à l'application, j'ai illustré les marqueurs et la gomme de manière plus réaliste. Une fois que la forme de base des éléments était en place, il suffisait d'ajouter des ombres et des rehauts convaincants pour compléter le look..
J’ai d’abord illustré une variété de couleurs et d’objets, puis les ai intégrés au design. Cela m'a permis de saisir rapidement un élément et de le placer dans la mise en page afin de satisfaire au design, alors que je travaillais pour compléter l'aspect général de l'application..
En matière de design, je suis assez méticuleux. J'aime placer des éléments à la perfection en pixels. Je place les objets et les déplace, les retourne, les oriente jusqu'à ce que je sois complètement satisfait.
En gardant cela à l'esprit, j'ai appris à conserver une copie de sauvegarde de mes éléments sur le côté de la page sans aucune transformation. Il est donc pratique de revenir rapidement à un élément et de l'utiliser sans se soucier du fait que l'angle d'un objet a peut-être été pivoté alors que je souhaitais peut-être que l'élément soit complètement droit..
Vous ne savez jamais quand vous devrez revenir à un élément et l'utiliser pour autre chose - les marqueurs ci-dessous en sont un excellent exemple. Je les ai laissés de côté et sans rotation.
Tout au long des nombreux tutoriels que j'ai écrits, j'ai toujours dit que les petits détails allaient très loin. Vous serez heureux de savoir que je suis mon propre conseil!
Pour ajouter un élément de fantaisie au design, j'ai pensé qu'il serait amusant de montrer différentes empreintes d'animaux à l'arrière-plan. J'ai illustré plusieurs empreintes de pas, mais j'ai utilisé des empreintes similaires pour plusieurs animaux - dans les cas où il serait impossible de détecter autrement.
J'ai expliqué à mon client que les empreintes de pas s'animeraient sur l'écran (en arrière-plan) de chaque section..
Pour terminer l'application, j'ai créé un fond texturé apaisant avec un léger dégradé. J'ai créé un effet de halo global en combinant le fond dégradé avec une vignette qui recouvre toute l'interface..
Tous les articles sont réunis pour créer un produit fini attrayant et convaincant qui apportera des heures de plaisir et d’apprentissage aux enfants de tous âges! Cette application était une explosion à créer. Non seulement parce que le sujet est amusant, mais également grâce à la facilité de travail avec le client et à notre connaissance commune du fonctionnement de chaque élément du processus de création d'une application..
Pour des demandes de renseignements sur un projet ou pour obtenir de plus amples informations, rendez-vous sur jonathanpatterson.com. Suivez-moi sur Twitter à @jon_patterson. Animaux ABC est le droit d'auteur 2010-2011 Critical Matter, Inc. criticalmatter.com.
Accentsconagua