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).
Cours d'initiation au web pur des étudiants de première année (prépa) à l'institut du multimédia (pôle léonard de vinci)
transcript : http://freelancis.net/ressources/web/initiation
starter : http://www.whatthefuckistheweb.com
(présentation initialement faite sous keynote avec de la vidéo intégrée)
Processus de réalisation et de transformation d'une maquette de site Web en page Web. Analyse de la charte graphique d'un site et de ses composantes. Description du rôle et des étapes de création d'une page Web.
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).
Cours d'initiation au web pur des étudiants de première année (prépa) à l'institut du multimédia (pôle léonard de vinci)
transcript : http://freelancis.net/ressources/web/initiation
starter : http://www.whatthefuckistheweb.com
(présentation initialement faite sous keynote avec de la vidéo intégrée)
Processus de réalisation et de transformation d'une maquette de site Web en page Web. Analyse de la charte graphique d'un site et de ses composantes. Description du rôle et des étapes de création d'une page Web.
Web in - Mobile First: créer une bonne expérience mobileFrédéric Harper
Comme l'industrie du mobile explose et que le support pour de nouvelles technologies est maintenant disponible sur les principales plateformes, nous devons arrêter de prendre les téléphones mobiles comme des appareils de second plan. La philosophie mobilité en premier (Mobile First) nous force à penser, à designer et à créer pour les appareils mobiles en premier lieu. Utiliser cette technique nous forces à focalisés sur ce qui est vraiment important pour nos utilisateurs, nos clients, sans négliger pour autant les autres appareils, tels que les PCs.
conception de site web : introduction à l'analyse fonctionnellelaureno
L'analyse fonctionnelle d'un site vise à vérifier que le site sera facilement utilisable et doit permettre d'anticiper les attentes des différents utilisateurs.
In this PPT we Explaining the overview of Sitemap.
Topics:
Purpose of a sitemap?
Elements Of Sitemap
Types of Sitemaps
What you need to create your sitemap?
What is a website sitemap?
Fundamentals Of Sitemap
Creating a sitemap
Applying principles of tech & user doc
The sitemap as a collaboration & planning tool
Avoid the heartache of rushing to site buildout by following a step-by-step process that provides a clear path for website architecture and takes out the guess work.
Creately offers many website sitemap templates which you can use instantly to create your own sitemap for your website. Draw your sitemaps with Creately sitemap templates. Many designs of sitemap diagram templates can be found on our diagram community. Just click on the use as templates button to immediately start modifying it using our online diagramming tools.
Planning Your Website’s Structure - Starting with rough sketches and wireframes, we'll build site and integrate SEO. Techniques for good web design, color schemes, typography, and to provide a good user experience.
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.
The document discusses what a website sitemap is and its purpose for planning and organizing a site's architecture, navigation, and content. It covers the different elements and types of sitemaps, and provides guidance on creating a sitemap including outlining the steps, tools, and principles to consider. The sitemap is presented as a collaborative planning tool to map out the logical structure and flow of a website.
Introduction aux concepts de Responsive Web Design, méthodos, outils et REX sur ces méthodes (Avantages, inconvénients, coûts...) pour le BreizhCamp 2013
Découvrez ce “MobiliteaTime” de 50 pages pour mieux comprendre ces deux méthodes de conception :
> Commencez par plonger dans la navigation web d’aujourd’hui. Entre diversité des devices utilisés, mobinautes de plus en plus nombreux et actifs, la navigation se fait de plus en plus sous le prisme du multidevice et surtout du mobile. Découvrez les solutions qui s’offrent à vous.
> Faites le point sur les concepts de bases liés au responsive et à l’adaptive design (breakpoints, design fluide, résolution d’écran, etc) et les avantages liés à ces stratégies (des sites plus rapides à charger, moins coûteux en data, etc).
> Explorez les différentes possibilités de design au sein d’un site responsive ou adaptif, ainsi que les contraintes techniques associées.
> Ressortez de cette lecture avec (nous l’espérons) une meilleure compréhension du responsive et de l’adaptive design et les clefs pour mettre en place la stratégie adaptée à vos besoins.
La notion de Responsive Web Design regroupe différents principes et technologies qui forment une approche de conception de sites Web dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation, quel que soit son interface connectée...
Web in - Mobile First: créer une bonne expérience mobileFrédéric Harper
Comme l'industrie du mobile explose et que le support pour de nouvelles technologies est maintenant disponible sur les principales plateformes, nous devons arrêter de prendre les téléphones mobiles comme des appareils de second plan. La philosophie mobilité en premier (Mobile First) nous force à penser, à designer et à créer pour les appareils mobiles en premier lieu. Utiliser cette technique nous forces à focalisés sur ce qui est vraiment important pour nos utilisateurs, nos clients, sans négliger pour autant les autres appareils, tels que les PCs.
conception de site web : introduction à l'analyse fonctionnellelaureno
L'analyse fonctionnelle d'un site vise à vérifier que le site sera facilement utilisable et doit permettre d'anticiper les attentes des différents utilisateurs.
In this PPT we Explaining the overview of Sitemap.
Topics:
Purpose of a sitemap?
Elements Of Sitemap
Types of Sitemaps
What you need to create your sitemap?
What is a website sitemap?
Fundamentals Of Sitemap
Creating a sitemap
Applying principles of tech & user doc
The sitemap as a collaboration & planning tool
Avoid the heartache of rushing to site buildout by following a step-by-step process that provides a clear path for website architecture and takes out the guess work.
Creately offers many website sitemap templates which you can use instantly to create your own sitemap for your website. Draw your sitemaps with Creately sitemap templates. Many designs of sitemap diagram templates can be found on our diagram community. Just click on the use as templates button to immediately start modifying it using our online diagramming tools.
Planning Your Website’s Structure - Starting with rough sketches and wireframes, we'll build site and integrate SEO. Techniques for good web design, color schemes, typography, and to provide a good user experience.
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.
The document discusses what a website sitemap is and its purpose for planning and organizing a site's architecture, navigation, and content. It covers the different elements and types of sitemaps, and provides guidance on creating a sitemap including outlining the steps, tools, and principles to consider. The sitemap is presented as a collaborative planning tool to map out the logical structure and flow of a website.
Introduction aux concepts de Responsive Web Design, méthodos, outils et REX sur ces méthodes (Avantages, inconvénients, coûts...) pour le BreizhCamp 2013
Découvrez ce “MobiliteaTime” de 50 pages pour mieux comprendre ces deux méthodes de conception :
> Commencez par plonger dans la navigation web d’aujourd’hui. Entre diversité des devices utilisés, mobinautes de plus en plus nombreux et actifs, la navigation se fait de plus en plus sous le prisme du multidevice et surtout du mobile. Découvrez les solutions qui s’offrent à vous.
> Faites le point sur les concepts de bases liés au responsive et à l’adaptive design (breakpoints, design fluide, résolution d’écran, etc) et les avantages liés à ces stratégies (des sites plus rapides à charger, moins coûteux en data, etc).
> Explorez les différentes possibilités de design au sein d’un site responsive ou adaptif, ainsi que les contraintes techniques associées.
> Ressortez de cette lecture avec (nous l’espérons) une meilleure compréhension du responsive et de l’adaptive design et les clefs pour mettre en place la stratégie adaptée à vos besoins.
La notion de Responsive Web Design regroupe différents principes et technologies qui forment une approche de conception de sites Web dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation, quel que soit son interface connectée...
Les défis d’une application mobile multi-périphériques avec HTML5davrous
Aujourd’hui, on peut s’approcher de plus en plus des capacités des applications dites « natives » grâce à HTML5. Il y a 2 manières pour atteindre ce but. Utiliser les capacités intrinsèques d’HTML5 en faisant un site web moderne ou étendre ses capacités avec des frameworks comme PhoneGap. Mais ce n’est pas tout. Il y a ensuite de nombreux défis à relever : gestion du tactile, identité visuelle de chacune des plateformes, performances très différentes du desktop, etc. Nous verrons comme adresser certains de ces points via des exemples parfois issus du monde du jeu vidéo pour égayer cette présentation !
http://conf2013.web-5.org/speaker/david-rousset-les-defis-dune-application-mobile-multi-peripheriques-avec-html5/
Le responsive design est une approche de la conception web dans laquelle l'interface s'adapte à la disposition de l'appareil, ce qui facilite l'utilisation, la navigation et la recherche d'informations.
La réactivité est possible grâce aux media queries, qui permettent à la conception de s'adapter automatiquement à l'espace du navigateur pour garantir la cohérence du contenu sur tous les appareils, et aux éléments de conception dimensionnés en unités relatives (%).
Réussir son projet Drupal. Plusieurs clefs du succès par Maxime TOPOLOV (@mtopolov) CTO de @adyax, Leader Européen sur Drupal.
Méthodes qui marchent
Equipe projet
Organisation
Estimation du projet
Choses à faire et à pas faire....
Kit De Survie Techno et Web à l'usage des EntrepreneursStéphanie Hertrich
Ce programme a été conçu sur mesure, spécialement pour vous, entrepreneurs ou porteurs de projets qui serez tôt ou tard confrontés à des problématiques de développement applicatif ou web.
L'idée est de vous aider à appréhender les principes, les notions de base et le vocabulaire associés au développement applicatif et web.
Nous vous donnerons des repères théoriques et pratiques pour que vous puissiez communiquer et orienter plus facilement vos décisions relatives aux composantes technologiques de votre projet.
En d'autres termes : vous n'avez pas un profil technique, mais vous avez un super projet impliquant du développement ? Le kit de survie est fait pour vous !
Partie 1 : Architectures des applications et technologies de développement
Par Stéphanie Hertrich & Benoit Le Pichon, Evangélistes Développement et Michel Rousseau Evangéliste Expérience Utilisateur (Microsoft)
Cette session abordera les notions de base et les technologies mises en œuvre pour le développement d'applications au sens large:
- Quelle est la différence entre une application, un site web, un service web, … ? Quelles en sont les composantes et comment interagissent-elles ?
- Développer pour un smartphone, une tablette, un poste de travail : quelles différences ?
- Quelles sont les grandes familles de technologies et de langages de développement, quelles sont leurs caractéristiques ?
- Le Cloud diffère-t-il réellement d’un hébergeur classique ?
- Quels bénéfices apporterait concrètement le Cloud à mon projet ?
- De l'importance de l'ergonomie des applications.
- Comprendre les tendances et intégrer le branding et l’identité de marque.
- Valider l'expérience utilisateur et tester sa démarche.
- Rendre ça beau, intelligible et en faire une proposition de valeur.
- Travailler le résultat avec un développeur.
Partie 2 : Concevoir une application, les étapes et la mise en œuvre:
Par Stéphanie Hertrich Evangéliste Développement (Microsoft) et Florent Santin, Développeur et Entrepreneur http://www.infinitesquare.com.
Cette session passera en revue les étapes du processus de conception d'une application:
- Définition du besoin, spécifications, code, tests : quel est le cycle de vie d'une application ?
- Quelle méthodologie et quels outils employer ?
- Les équipes : embaucher ou externaliser son développement ?
- Savoir communiquer avec son équipe technique.
- De l'importance du designer.
- Les questions à se poser pour faire les bons choix.
Comment avancer concrètement sur votre propre projet ? Différents programmes sont accessibles suivant votre niveau d’avancement.
- Des programmes d’accompagnement techniques (Pépinière Microsoft Azure, Speed-dating experts, Accélérateur Apps, ,…)
- Bizspark,le programme dédié aux startups : logiciels & conso Cloud Azure gratuite jusqu’à 60 000$
- Microsoft Ventures : l’accélérateur à startup Parisien de Microso
Similaire à Responsive Design : impact sur les processus de production (20)
3. Trafic moyen par type de terminal
% des utilisateurs
2011
2015
Mobiles non-Smartphones
0,11 %
0,06 %
Objets connectés (M2M)
0,2 %
3,6 %
Ebook readers
0,7 %
3,9 %
Tablettes
2,7 %
11,2 %
Smartphones
4,9 %
16,8 %
Laptops et desktops
91,4 %
64,4 %
Source: http://newsroom.cisco.com/press-release-content?type=webcontent&articleId=668380
2015 en France
• 28% des visiteurs sous tablettes
et mobiles
• Résolution moyenne mobile :
960×640 / 3,5 pouces / 326 ppp
• 33% des visiteurs sous
terminaux tactiles
• + 600 nouveaux terminaux sur le
marché.
4. Responsive design: Définition
« Le Responsive Design et une approche de conception Web qui
permet à une interface de s’adapter aux différentes tailles et
résolutions des terminaux qui la consultent. »
5. Les bénéfices (théoriques)
• Division des coûts de conception
• Division des coûts/temps de maintenance
• Amélioration globale de l’expérience utilisateur
sur TOUS les supports
• Anticipation sur l’avenir des usages
6. La réalité
L’approche responsive peut affecter:
• Le modèle économique: Pas de régie pub
• La RH :Compétences rares / chères
• La direction des projets: Nouveaux processus
L’approche responsive impacte
• Le choix des contenus (Flash, propriétaire, taille..)
• Le choix des fonctionnalités
• La relation client: Livrables plus abstraits
• Les coûts de tests
7. Responsive ou pas?
• 0% ou 100% Responsive?
• Responsive partielle?
Étudier la « compatibilité responsive »
• Des contenus (Content first)
• Des supports (Mobile first)
• Tenter l’approche «Patterns first»?
8. Responsive jusqu’où?
Mobiles
Smartphones
Smartphones / tablettes / e-Readers / NetBookd
Desktop / TV, etc….
1920 x 1200
2550 x 1440
96
X
65
128
X
128
128
X
160
176
X
208/220
240
X
320
320
X
480
640
X
200/360/480
800 X 352/400/480
1024 X 768
1280 X 720/800/1024
• Listez les terminaux à prendre en compte
• Constituez vos familles de résolution
• Définissez les points de ruptures
9. Bonnes pratiques 1: Le contenu
Compatibilité des contenus
Une interface responsive restreint le contenu aux limites «physiologiques»
de chaque terminal.
Solutions:
• Limiter la longueur des articles
• découper les contenus en plusieurs parties (= gabarit spécifique pour
les petites résolutions).
• Modifier la taille des éléments pour les grandes résolutions
• Faire disparaître le contenu sur certaines résolutions
TIPS: Précisez le degré de compatibilité de chaque contenu avec chaque
terminal retenu dès l'inventaire des contenus. Vous devez définir si un design
pattern ou un type de contenu posera des problèmes d’affichage ou une
expérience utilisateur pénible sur une résolution ou un terminal.
10. Bonnes pratiques 2: les fonctionnalités
Compatibilité des fonctionnalités
• Toutes les fonctionnalités ne sont pas disponibles sous tous les terminaux.
• Toutes les fonctionnalités ne sont pas pertinentes sous tous les terminaux.
Attention aux contraintes hardware
•
•
•
•
La géolocalisation
Aux interactions riches (Formulaires complexes, un configurateur, etc…)
Orientations
Cameras ou photos
11. Bonnes pratiques 3: l’ergonomie
Considérations ergonomiques
Attention aux
•
•
•
•
•
Systèmes d'information complexes
Navigations multiples
Méga menus
Arborescences à quatre ou cinq niveaux de profondeur.
Performances!
TIPS:
• Pour optimiser l'accessibilité : limiter le masquage de fonctionnalités entre
les différentes versions.
• Si vous choisissez malgré tout de cacher certaines fonctionnalités, alors
pensez à mettre un switch "Version desktop" / "Version smartphone", qui
puisse désactiver / réactiver les media-queries, à l’aide de javascript.
12. Bonnes pratiques 4: le design
Ne pensez pas « webdesign »,
pensez « Direction Artistique»!!!!
13. Le processus de conception « Patterns
first »
Phase
préparatoir
e
• Liste des terminaux visés
• Etc…
UX
Prototypa
ge
• Inventaire des contenus &
fonctionnalités
• Architecture de l’information
(siteflow)
• Inventaire des design
patterns
• Zoning
• Modèle de données
• Inventaire des
incompatibilités
• Définition du nombre de
versions dédiées
• Liste des points de ruptures
Compétences:
• Connaissances des patterns
natives
• Flux HTML
• Possibilités JavaScript
• Connaissance des
contraintes Devices
• Expérience des usages
• Anticiper les contraintes de
conception
• Prototypes HTML
• Tests sur terminaux
Productio
n
• Design
• Intégration finale
• Développement
• Mapping
• Etc…
Compétences:
• Ergonomie IHM
• Flux HTML
• Intégration
• Developpement JavaScript
• Connaissance des
contraintes Devices
• Expérience des usages
• Anticiper les contraintes de
conception
16. Conclusion
Adaptez vos processus de production à votre
contexte d’entreprise, aux profils de vos clients et
aux projets!
Merci!
laurent@demontiers.com
Twitter: @L_Demontiers