background preloader

Créer les maquettes de son site web

Créer les maquettes de son site web
La réalisation des maquettes est une étape déterminante dans la création d’un site internet. Pour que votre site web soit agréable, il faut naturellement soigner le design de l’interface graphique, mais surtout, pour que votre site internet soit efficace, il faut construire une mise en page intelligente et adaptée à vos objectifs et vos contenus. La réalisation des maquettes doit passer par plusieurs étapes, du design fonctionnel en noir et blanc, au design graphique intégrant votre identité et vos couleurs. Dans cet article, nous allons vous donner toutes les clés pour réussir cette étape fondamentale dans tout projet de création de site web. La réalisation des maquettes, une étape clé dans la création de votre site internet Maquette, wireframe, ergolayout, mockup ou interface graphique : de quoi parle-t-on exactement ? Les professionnels du web sont généralement créatifs en matière de sémantique. La maquette fonctionnelle (wireframe) La maquette graphique (photoshop) Related:  Infographie, conception ressources

Étude : les contenus qui génèrent des backlinks et des partages sur les réseaux sociaux Moz et BuzzSumo présentent les résultats d’une étude conjointe sur les partages et les backlinks. 1 million d’articles ont été analysés. Objectif : comptabiliser les partages sur les réseaux sociaux et les liens obtenus sur d’autres sites (backlinks), mesurer la corrélation entre le nombre de partages et les backlinks, et mettre en évidence les éléments qui permettent d’obtenir des partages et des backlinks. La distribution des partages et des backlinks Premier enseignement : la plupart des contenus publiés sont très peu partagés sur les réseaux sociaux. 50% des articles obtiennent 2 partages Facebook ou moins (en agrégeant les likes, les commentaires et les partages), 2 partages Twitter ou moins, 1 partage Google+ ou moins et aucun partage LinkedIn. Les réseaux sociaux sur lesquels les contenus sont partagés BuzzSumo a également isolé les 757 317 posts issus de sa propre base de données. La corrélation entre les partages et les backlinks Les caractéristiques des contenus populaires

Scénariser et produire un module de formation en Méthodologies pour le développement de cours e-learning - Un guide pour concevoir et élaborer des cours d’apprentissage numérique Les appellations employées dans ce produit d’information et la présentation des données qui y figurent n’impliquent de la part de l’Organisation des Nations Unies pour l’alimentation et l’agriculture (FAO) aucune prise de position quant au statut juridique ou au stade de développement des pays, territoires, villes ou zones ou de leurs autorités, ni quant au tracé de leurs frontières ou limites. La mention de sociétés déterminées ou de produits de fabricants, qu’ils soient ou non brevetés, n’entraîne, de la part de la FAO, aucune approbation ou recommandation desdits produits de préférence à d’autres de nature analogue qui ne sont pas cités. Les opinions exprimées dans ce produit d’information sont celles du/des auteur(s) et ne reflètent pas nécessairement celles de la FAO.

Choisir la bonne typo avec Typement Pour la moindre présentation ou projet web destiné à être lu, le choix des typos se pose. S’il existe des outils pour harmoniser les couleurs, et ne pas faire de fautes de goût, on se sent souvent seul au monde et perdu au moment de choisir une typo. Surtout quand on du mal à se souvenir du nom de telle ou telle typo. Pour nous aider à faire les bons choix, un outil va très vite devenir votre indispensable : Typement. Vous entrez un texte et choisissez typo sans-serif, serif ou écrite à la main. Une grille d'analyse de la qualité des cours en ligne Produire de beaux cours est une obsession légitime de tout établissement de formation. Qu'il soit présentiel ou en ligne, tous désirent offrir les meilleurs parcours, les plus pertinents et qui répondent aux besoins des apprenants. Le problème est qu'il est difficile parfois de s'évaluer. Aux États-Unis, les établissements offrant des cours en ligne peuvent compter sur une organisation à but non lucratif qui a été formé dans le Maryland pour proposer une grille d'analyse qui est de plus en plus adoptée dans les écoles et lieux de formation en Amérique du Nord. La qualité de cours compte Quality Matters (QM) est un consortium de collèges et d'universités du Maryland qui promeut depuis le milieu de la décennie 2000 la qualité de la formation en ligne. Présentation de cours et introductionObjectifs d'apprentissageTravaux et évaluationMatériel d'enseignementActivités du cours et interactions de l'apprenantTechnologies du coursSupport de l'étudiantAccessibilité Et du coup, les effets? Références

Inspirations et outils pour créer sa charte graphique On ne répétera jamais assez l'importance d'avoir une image de marque solide pour réussir à se faire connaître à une époque où les sollicitations sont plus que jamais nombreuses. Si l'on peut rapidement comprendre les clés pour créer une expérience de marque réussie, reste à déterminer précisément ce qui nous définit. Bien entendu, lorsque vient le moment de créer son image, il ne faut surtout pas oublier que des professionnels dont c'est le métier sont là pour nous aider. Et que sauf cas très particulier, il n'y a que très peu de chance que tu parviennes à faire mieux en bricolant avec les moyens du bord. Soyons clairs. Cependant, pour de petits projets non professionnels, avec peu ou carrément pas de budget, il peut nous arriver de devoir nous débrouiller : pour un blog personnel, un side-project, les travaux d'une association de bénévoles... Ce n'est pas pour autant que l'on doit faire un travail bâclé. Des outils de création rapide de charte graphique Frontify Tu peux ainsi : Une démo ici.

Créer son identité de marque et une charte graphique simple Voici comme promis la suite de mon article sur les outils et inspirations pour créer soi-même une charte graphique simple. Comme je l'évoquais alors, construire une charte graphique est un vrai travail de professionnel, qui ne s'improvise pas si l'on souhaite avoir un résultat de qualité. Ces articles répondent donc à des besoins précis, par exemple pour des projets personnels ou associatifs, pour lesquels le budget est parfois proche de zéro. Ils peuvent aussi pourquoi pas être une bonne base pour pouvoir discuter avec des pros, en appréhendant un peu mieux le travail qu'ils ont à fournir. Mon but aujourd'hui est de faire le tour des éléments minimum à prendre en compte, pour s'assurer de ne rien oublier. Je me suis aidé pour cela de mon propre exemple (c'était l'occasion), à l'aide de l'outil gratuit Frontify que j'ai présenté la dernière fois. Quelques éléments importants avant de commencer Définir son identité Quelles sont ses missions ? Quelles sont les valeurs qu'elle défend ? Logo Couleurs

Free data, statistics, analysis, visualization & sharing - knoema.com techniques d’inventaire des contenus | architecture de l'information avec IAFACTORY Résumé : partageons ensemble quelques moments de réflexions sur la problématique, ô combien complexe, de l’inventaire des contenus. Vous savez les contenus, cette chose qu’on appelle parfois le « wording », « l’editing » et qui fait toute la différence quand le spider vient faire la moisson… Vous avez certainement déjà été amené(e) à travailler sur la refonte d’un support digital, n’est-ce pas ? Oh, je ne parle pas bien sûr d’un inventaire de quelques pages… En dessous de 100 pages c’est presque trop facile, pas de défis, pas de challenge, presque inintéressant. Ce type de problématique, relativement fréquente aujourd’hui, notamment pour les grands groupes amenés à traiter une multitude de sujets et à être présent sur tous les fronts, implique des techniques d’inventaire sur lesquelles il me semblerait intéressant de faire un zoom. Faisons ce zoom ensemble. En bref, une des premières étapes du travail d’architecture de l’information revient à inventorier tous les contenus.

carte des illustrations pour le mindmapping Solution open source et gratuite de Heatmap pour visualiser les clics Analyser les clics sur votre site internet à l’aide de Heatmap (Carte de chaleur) pour visualiser l’ensemble des interactions sur vos pages webs. Améliorer l’expérience utilisateur de votre site internet !Diminuer les taux de rebonds et le nombre de pages vues en repositionnant vos menus, liens et éléments cliquables. La solution open source et gratuite de Heatmap (Carte de chaleur) pour visualiser les clics Clickheat ClickHeat Clickheat génère des carte de températures pour vous indiquer les zones chaudes de votre site internet. labsmedia.com/clickheat Autres solutions premium de Heatmap, Mouse tracking, Eye tracking… Crazyegg Crazyegg Version gratuite de 30 jours avec un Heatmap, un scroll map, un overlay et un outil de confetti. Crazyegg.com Click Density Clickdensity Analyse de la home page gratuite pendant trente jours. clickdensity.com Clicktale ClickTale Version gratuite et limitée disponible. clicktale.com Userfly Mouse tracking avec userfly Mouse tracking. userfly.com Eye tracking

Améliorer votre expérience utilisateur grâce aux scénarios utilisateurs Pourquoi devriez-vous faire l’effort d’écrire un scénario d’utilisateur ? Connaître votre cible d’acheteurs, n’est-ce pas suffisant pour concevoir pour eux ? La connaissance de votre cible est importante et le travail des personas contribue certainement à apprendre à connaître vos utilisateurs. Néanmoins les personas ne vous disent pas pourquoi les utilisateurs viennent sur votre site, exactement ce qu’ils recherchent et comment ils s’y prennent… Un scénario utilisateur vous permet de saisir de bons objectifs utilisateurs et de réaliser une conception de votre produit à la perfection. Qu’est-ce qu’un scénario utilisateur ? Le scénario utilisateur décrit en détail ce que les utilisateurs font sur un site web et plus précisément pourquoi ils le font. Pourquoi réaliser des scénarios utilisateur ? Les scénarios utilisateur ou scénarios d’utilisation sont un outil très pratique lors de la conception d’interfaces utilisateur. Quand faut-il créer des scénarios utilisateur ? Conclusion Source

Related: