Pour s'y retrouver dans le vocabulaire de la conception, commençons par mettre les bons mots sur les choses : wireframe, style tiles, prototype, etc. Voyons ensuite comment enchaîner ça dans un workflow idéal, à moduler en fonction des équipes et des projets, pour vitaminer vos processus de conception web !
Avant de réaliser l'aspect esthétique d'un site, je réalise une maquette de mise en page : le zoning écran.
Cela permet de réaliser des sites ergonomiques au service de l'utilisateur avant de ce lancer dans la création graphique purement esthétique.
Cette démarche permet un dialogue réel avec le client et des modifications rapides. La validation est ainsi plus simple et le résultat plus qualitatif.
Android comes in a multitude of screen forms, sizes and densities which can be a real headache for many mobile app designers. To help alleviate this pain, the Android platform contains a potent cocktail of tools in the framework which are designed to provide targeted relief. In this session you will learn how to administer a swift dose of new responsive design concepts into Android applications.
Présentation de plusieurs CMS Open Source (portail web, wiki, galerie photo, ...)
A cette époque je mettais beaucoup de texte dans mes présentations !
Cette présentation a été donnée pendant la SQIL 2005 à Québec.
Quick tips for porting your iOS designs to AndroidHervé Mischler
Head to the session to learn how to adapt standard iOS design patterns to Android, snap your UI to a strong grid system, think of Android design as responsive design, use the right icons and extend this knowledge to mobile web apps. iOS is often the platform of choice when it comes to creating mobile applications, and for good reason. However, this has led us into a design monoculture where skeuomorphism and the Apple Human Interface Guidelines have become the 'angry dictators'. In this current state of affairs, it's easy to overlook the mass of Android users who expect and deserve a different user experience - one where copy-pasting an iOS design to the Android platform simply won't do. Herve will take you through the bare essentials of porting an iOS design to Android while ensuring the whole process is less painful, less costly and simply better all round.
[concept] Maquette site web de la bibliothèque universitaire Rennes 2Julien Sicot
Cette Maquette est un "concept" pour le futur site web du SCD de l'université Rennes 2 qui sera réalisé sous le CMS Drupal.
La maquette a été réalisé avec le logiciel Omnigraffle ($$ | MacOS).
Cette maquette est le résultat d'une veille réalisée sur une vingtaine de sites web de Bibliothèques académiques, pour la plupart, nord-américaines.
Notre article complet sur la rédaction des personas marketing : http://blog.punchify.me/inbound-marketing/2017/03/persona-marketing/
La persona marketing est un outil indispensable aux entreprises lors de la création de leur stratégie webmarketing. Les persona marketing permettent l'identification et la personnalisation des utilisateurs types d'un domaine d'activité, d'une marque ou d'un produit.
Les personas marketing sont la base de tous les travaux marketing. Elles offrent à l'entreprise, la possibilité de connaître son audience, le profil de ses clients et la manière dont ils consomment le contenu.
Créer et définir ses persona marketing permet d'améliorer, à tous les niveaux et points de contact avec le client, l'expérience utilisateur.
Les personas marketing sont donc un facteur clé de succès des entreprises.
Webinaire - Adaptez votre contenu au mobileDialog Insight
La consultation de courriels sur les appareils mobiles fait encore partie des sujets d'actualité bien qu'on en parle depuis quelques années déjà. La raison est simple; les statistiques d'ouvertures de courriels sur mobiles sont toujours hausse. Pour faire en sorte que l’expérience soit aussi agréable pour vous que pour votre client, il est important de penser à adapter votre contenu pour la lecture mobile.
Pour s'y retrouver dans le vocabulaire de la conception, commençons par mettre les bons mots sur les choses : wireframe, style tiles, prototype, etc. Voyons ensuite comment enchaîner ça dans un workflow idéal, à moduler en fonction des équipes et des projets, pour vitaminer vos processus de conception web !
Avant de réaliser l'aspect esthétique d'un site, je réalise une maquette de mise en page : le zoning écran.
Cela permet de réaliser des sites ergonomiques au service de l'utilisateur avant de ce lancer dans la création graphique purement esthétique.
Cette démarche permet un dialogue réel avec le client et des modifications rapides. La validation est ainsi plus simple et le résultat plus qualitatif.
Android comes in a multitude of screen forms, sizes and densities which can be a real headache for many mobile app designers. To help alleviate this pain, the Android platform contains a potent cocktail of tools in the framework which are designed to provide targeted relief. In this session you will learn how to administer a swift dose of new responsive design concepts into Android applications.
Présentation de plusieurs CMS Open Source (portail web, wiki, galerie photo, ...)
A cette époque je mettais beaucoup de texte dans mes présentations !
Cette présentation a été donnée pendant la SQIL 2005 à Québec.
Quick tips for porting your iOS designs to AndroidHervé Mischler
Head to the session to learn how to adapt standard iOS design patterns to Android, snap your UI to a strong grid system, think of Android design as responsive design, use the right icons and extend this knowledge to mobile web apps. iOS is often the platform of choice when it comes to creating mobile applications, and for good reason. However, this has led us into a design monoculture where skeuomorphism and the Apple Human Interface Guidelines have become the 'angry dictators'. In this current state of affairs, it's easy to overlook the mass of Android users who expect and deserve a different user experience - one where copy-pasting an iOS design to the Android platform simply won't do. Herve will take you through the bare essentials of porting an iOS design to Android while ensuring the whole process is less painful, less costly and simply better all round.
[concept] Maquette site web de la bibliothèque universitaire Rennes 2Julien Sicot
Cette Maquette est un "concept" pour le futur site web du SCD de l'université Rennes 2 qui sera réalisé sous le CMS Drupal.
La maquette a été réalisé avec le logiciel Omnigraffle ($$ | MacOS).
Cette maquette est le résultat d'une veille réalisée sur une vingtaine de sites web de Bibliothèques académiques, pour la plupart, nord-américaines.
Notre article complet sur la rédaction des personas marketing : http://blog.punchify.me/inbound-marketing/2017/03/persona-marketing/
La persona marketing est un outil indispensable aux entreprises lors de la création de leur stratégie webmarketing. Les persona marketing permettent l'identification et la personnalisation des utilisateurs types d'un domaine d'activité, d'une marque ou d'un produit.
Les personas marketing sont la base de tous les travaux marketing. Elles offrent à l'entreprise, la possibilité de connaître son audience, le profil de ses clients et la manière dont ils consomment le contenu.
Créer et définir ses persona marketing permet d'améliorer, à tous les niveaux et points de contact avec le client, l'expérience utilisateur.
Les personas marketing sont donc un facteur clé de succès des entreprises.
Webinaire - Adaptez votre contenu au mobileDialog Insight
La consultation de courriels sur les appareils mobiles fait encore partie des sujets d'actualité bien qu'on en parle depuis quelques années déjà. La raison est simple; les statistiques d'ouvertures de courriels sur mobiles sont toujours hausse. Pour faire en sorte que l’expérience soit aussi agréable pour vous que pour votre client, il est important de penser à adapter votre contenu pour la lecture mobile.
i3M s’est basée sur l’expression du besoin fournie par Airbus et sur
l’application telle qu’elle existait.
Une première phase d’inspection ergonomique a permis de dresser des
hypothèses sur les difficultés rencontrées par les utilisateurs.
Les analyses du travail (sur poste de travail) menées sur un échantillon
représentatif d’utilisateurs ont permis de mettre en lumière les
caractéristiques nécessaires à l’application RISE pour permettre une
utilisation performante.
Cours de webdesign. Le but de ce cours n'est pas d'apprendre le métier de webdesigner dans sa globalité, mais d'être capable d'avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.
Cours de webdesign, UX et UCD. Le but de ce cours n'est pas d'apprendre le métier de webdesigner dans sa globalité, mais d'être capable d'avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
Méthodes et stratégies de conception sites Web et mobiles. Processus de conception présentant la maquette de fil de fer (wireframe), mockups jusqu'au design. Présentation des objectifs et du rôle du Webdesigner à chacun des étapes. Rapports entre la dégradation élégante (gracefull degradation) et amélioration progressive (progressive enhancement - mobile first).
Nous vous partageons cette présentation sur la recette graphique, réalisée par Aurélie Radom, Directrice Artistique / UI Designer chez Backelite. Au programme :
La collaboration entre Designers et Développeurs
- Qu'est-ce qu'une recette graphique ? - petite définition
- Une check-list non exhaustive (à destination des UI / UX / Dev) des éléments à vérifier lors d'une phase de recette, que vous pourrez étoffer / compléter
- Une liste d'outils (extensions web et apps) facilitant la recette du côté des designers et du côté des devs avec des fonctionnalités inspect, détection de typos, couleurs, superposition de maquettes en overlay, screenshots full page etc.
- Les bonnes pratiques avec le process idéal du côté des UI
Similaire à 01 03 web_expérientiel _ designer un site web (20)
3. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Qu’est-ce qu’une API
—
Tout projet digital necessite une conception en amont.
Ouvrir photoshop et se lancer dans la réalisation d’un site internet c’est
oublier l’importance de la conception et de l’ergonomie. C’est comme
comme écrire une histoire sans en avoir le pitch et le scenario.
4. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Zoning
Le zoning découpe l’interface en différente zones de
contenu afin d’établir les niveaux de lecture.
Le zoning est un précoupage sous forme de blocs simples
permettant de poser la manière dont le contenu sera
agencé. C’est l’organisation générale de la page.
Les blocs, composés en niveau de gris permettent d’
indiquer l’importance de la zone de contenu dans la
lecture du site.
Zoning
—
5. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Wireframe
Le wireframe s’appuie sur le zoning et précise le contenu
de chaque bloc. Il structure l’interface et permet de
mettre en place l’ergonomie.
À cette étape aucun élément de design n’est mis en place.
Les UX et UI designers se concentrent sur l’ergonomie du
site ou de l’application. Le wireframe permet de tester la
pertinence de l’interface et l’ergonomie.
Wireframe
—
6. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Storyboard ou User Journey
Le user journey est le parcours utilisateur. Il indique pas
à pas la manière dont l’utilisateur va naviguer dans le site
et l’experience vécue. Il permet de mettre en pratique l’
ergonomie et réveler l’ensemble des enchainements
possibles.
Le user journey comprend l’ensemble des écrans prévues
pour les site ainsi que leur points d’entrées et sorties.
Storyboard
—
7. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Maquette
La maquette est l’expression graphique du site ou de l’
application. L’ensemble de maquettes regroupe l’
ensemble des pages du site ou de l’application.
La maquette intègre la dimension de design graphique
et respecte la chartes graphique web mise en place en
amont pour le projet.
Maquette
—
9. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Bibliographie
Global
Les différences entre zoning, wireframe, mockup et prototype :
http://marcdezordo.me/les-differences-entre-zoning-wireframe-mockup-et-prototype/
Zoning, storyboard, wireframe et prototype :
http://www.ergognome.com/conception/differences-entre-zoning-storyboard-wireframe-
prototype/
Zoning, wireframe, maquettage, prototype… les meilleures pratiques
http://blog.clever-age.com/fr/2010/06/18/maquettage-et-prototypage-le-tour-des-notions-et-
des-outils/
Bibliographie
—
10. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Bon design
Interactif ;)
Pour toutes questions concernant
la matière, les sujets ou le design;
n’hésitez pas à me contacter.
arivaux@gmail.com