Application et Design Tactile

Adapter une application portable a un écran hybride.

Application et Design Tactile

Cette semaine j'avais pour objectif de créer un webdesign optimale pour un écran Hybride. Je me suis basé sur l'application portable Wattpad.

Par ou commencer?

J'ai commencé par regarder l'application portable, ou j'ai pris des screenshots. De la j'ai regardé ce qui était necessaire et ce qui n'était pas necessaire. Suite à ce tri, j'ai pu mettre en place un wireframe et enfin faire un webdesign pour un écran hybride. Voici Les screenshots de l'appllication portable.

Screenshot1 Screenshot2 Screenshot3 Screenshot4 Screenshot5 Screenshot6

*Un Wireframe et un Webdesign

En essayant de garder l'identité visuel de Wattpad, j'ai proposé ce Wireframe (J'ai crée plusieurs wireframes pour les différents pages, donc 6 différents):

wireframe

Avec ce wireframe j'ai pu élaborer un webdesign, en prennant en compte les limites des écrans hybrides. C'est quelque chose que j'ai trouvé difficile, car on veut que les informations importantes soit a porté de main, mais en dependant d'ou on les mets la main de l'utilisateur va gener, bref il faut penser a beaucoup de choses niveau ergonomie. J'ai pu deduire avec des documentations et de la mise en page que ce qu'on veut a porter de main doit etre sur les bords à gauche et à droite car c'est la que les manipulations vont être les plus facile. De plus en gardant les interactions sur les bords la main de l'utilisateur ne va pas passer devant l'écran et donc ne va pas cacher des innformations.

wattpad5 wattpad6 wattpad8 wattpad10 wattpad11

Ici vous pouvez voir plusieurs pages du webdesign, l'image en tête de l'article est aussi une page du webdesign

Les écrans hybrides sont assez compliqué à penser, surtout quand on essaye de faire un web design compatible avec toutes les types d'écrans qu'on a maintenant. Je pense que c'est queque chose qui doit être encore bien réfléchi et à encore beaucoup de progès a faire.

Hannah