Webmastering - Webdesign Février 2016 Introduction au webdesign Le terme « webdesign » désigne la discipline consistant à structurer les éléments graphiques d'un site web afin de traduire, à travers une dimension esthétique, l'identité visuelle de la société ou de l'organisation. Il s'agit ainsi d'une étape de conception visuelle, par opposition à la conception fonctionnelle (ergonomie, navigation). L'objet du webdesign est de valoriser l'image de l'entreprise ou de l'organisation par le biais d'éléments graphiques afin de renforcer son identité visuelle et de procurer un sentiment de confiance à l'utilisateur. Néanmoins, en vertu des critères d'ergonomie, un site web doit avant tout répondre aux attentes des utilisateurs et lui permettre de trouver facilement l'information qu'il cherche. Par extension le terme webdesigner désigne le métier consistant à concevoir le design d'un site web. La nécessaire inspiration Agencement de la page La structure traditionnelle d'une page web est la suivante : Charte graphique
Productivité et web : le guide Presse-citron Cet article s’inscrit dans une série sur la productivité, réalisée en partenariat avec Azendoo (Voir détails en fin d’article). Être productif, ne pas se laisser submerger par les mails, travailler efficacement en équipe sont devenues les nouvelles croisades de notre génération. Et il est difficile de rester à jour avec la masse d’outils et de méthodes utiles ou inutiles qui voient le jour constamment. C’est pourquoi nous inaugurons aujourd’hui une nouvelle rubrique qui, au fil des articles, va devenir un véritable guide Presse-Citron de la productivité. Et pour attaquer un sujet aussi vaste que la productivité, Presse-Citron s’est rapproché de l’une des start-ups françaises les plus en pointe du domaine : Azendoo (récemment sacrée meilleure application web aux TNW French Startup Awards) Partenaire de cette nouvelle série, Azendoo va apporter son expertise et les compétences de son équipe pour nous aider à vous offrir un rendez-vous de qualité. Demandez le programme Savoir dire NON.
Design mobile : différencier web et application ? Lorsque j’ai été contacté par Matthieu Bué pour écrire sur WDfriday, j’ai été très honoré, de part la qualité du contenu, les sujets et thématiques abordés, mais aussi car j’allais pouvoir enfin vous parler de ce qui a beaucoup modifié mon travail de designer ces dernières années : le design d’interface en condition de mobilité (comprenez le “design sur mobile & tablette”). Aujourd’hui, je vais donc plus précisément aborder la question suivante : Pourquoi & comment différencier les applications web mobile et les applications mobiles natives Introduction J’ai souvent autour de moi des entreprises avec lesquelles je travaille qui se posent la question, légitime, de la conception d’une web app ou d’une application native. Ensuite, vient très vite les choix suivant : concevoir un site web mobile (en responsive design, pourquoi pas);concevoir une web application consultable dans le navigateur du téléphone, de la tablette;concevoir une application native iPhone, iPad, Android, Windows, etc. 1.
Une entreprise perd 25% de sa valeur boursière suite à un faux tweet Mercredi 30 janvier Buzz - 30 janvier 2013 :: 12:41 :: Par Eric Une entreprise cotée au NASDAQ a vu son cours de bourse chuter de 25% en quelques minutes suite à un faux tweet publié à partir d’un faux compte totalisant seulement 11 followers. Qui a dit que l’influence était surtout une question de taille ? Dernier exemple en date, du genre qui fait froid dans le dos : le cours de bourse d’une entreprise a dégringolé de 25% en quelques minutes suite à un message posté sur Twitter. Le tweet en question annonçait une information erronée, non fondée et très probablement malveillante, disant en substance que la société Audience, cotée au NASDAQ, faisait l’objet d’une enquête du département de la justice pour des motifs de fraude. Mais l’histoire ne serait pas aussi invraisemblable si elle ne précisait pas ce petit détail croustillant : le faux tweet en question a été publié à partir d’un compte totalisant… 11 followers. Les boursiers, un peu naïfs ? (source)
Les principes de la Gestalt appliqués au webdesign (1/2) J’ai toujours entendu dire qu’un bon design de page web se résumait à peu de choses : équilibre, rythme et organisation du contenu. C’est pas faux, mais un peu plus de détail ne ferait pas de mal. Pour aller dans le détail, il faut se pencher légèrement sur la psychologie de la forme, que l’on appelle aussi gestaltisme (le terme qui à lui seul vous fait paraitre intelligent), avec quelques principes simples, assez évidents pour certains, que l’on appelle les principes de la Gestalt. Les principes de la Gest- quoi ? C’est généralement la réaction quand on lit pour la première fois le terme. Quand on parle de Gestalt, en gros, c’est donc pour dire que, dans la psychologie de la perception, un ensemble de forme n’est pas l’addition des formes qui le composent, mais une autre forme à part entière. A partir de ce principe général découle 6 principes sous-jacents, qui se complètent et se contredisent, que l’on va essayer d’illustrer avec des exemples tirés de sites actuels. 1. 2. 3. 4. 5. 6.
Les internautes, les community managers et l’humour Vendredi 8 février Réseaux sociaux - 8 février 2013 :: 19:00 :: Par Camille Le métier de community manager n’est pas tous les jours facile : certains messages postés par les internautes sur les réseaux sociaux sont parfois assez critiques voire violents. Quand il y a un problème ou quelque chose qui ne va pas, les internautes sont bien présents pour se défouler ou dire simplement ce qu’ils pensent sur les pages Facebook et autres comptes Twitter… Le cas de la SNCF est aujourd’hui intéressant avec une lettre de rupture publiée sur Facebook par Xavier Leboulanger, un spécialiste des réseaux sociaux et un abonné de la ligne Rouen – Paris. Dans ce message posté il y a deux jours sur le réseau social, il explique avec beaucoup de poésie et d’humour que la qualité du service, rythmée par les retards et les conditions de voyages inconfortables, ne cesse de se dégrader et le prix continue d’augmenter depuis son abonnement il y a quatre ans.
Story-boarding : 8 outils pour vos prototypes Le maquettage d’un site est une étape incontournable de l’approche de conception. Elle permet de visualiser dans des conditions les plus proches de la réalité les pages-clés de votre futur site. Effets de scrolling, placement des boutons d’actions, enchaînements des pages, aspects fonctionnels, rien ne vous échappera. Leurs bienfaits sont multiples et en phase de conception. Il en existe de nombreux aujourd’hui. Ne dites plus que vous n’en savez rien, ce billet vous en dresse une première liste, histoire de vous prendre pour un maître ergonome Les Mockups et wireframes Ces deux termes désignent l’ensemble des techniques et des outils qui permettent de maquetter un site web sous les angles graphiques, fonctionnels et ergonomiques,à l’image des story-boards utilisés dans l’audiovisuel. Pour quels usages ? La liste des usages peut aller encore bien plus loin et supporter des discours fonctionnels élaborés avec mises en situation. Quels sont les outils phares du marché ? Powerpoint Pencil Visio Axure
Leap Motion refait parler de lui... en musique Lundi 11 février Musiques - 11 février 2013 :: 09:56 :: Par Eric Un développeur et musicien français a mis au point un hack qui permet une utilisation étendue du fameux Leap Motion, transformé en contrôleur d’instruments de musique, dont une batterie virtuelle. Vous vous souvenez du projet Leap Motion, ce capteur de mouvements qui pourrait bien révolutionner le PC comme l’iPhone a bouleversé le monde du smartphone ? En attendant sa commercialisation auprès du grand public, qui ne devrait plus tarder, certains développeurs ont déjà accès à la bête, et commencent à imaginer des usages détournés ou en tout cas étendus. L’engin est utilisé pour modifier le pitch de la guitare (la hauteur de note) en bougeant celle-ci, soit un effet un peu similaire à l’effet vibrato que l’on obtient avec GarageBand sur iOS dans la partie Guitare quand on secoue son iPad ou iPhone. Stéphane indique que l’exercice n’est pas évident, mais ça marche, comme en témoigne cette vidéo. (source)
[Infographie] 10 choses à savoir sur le responsive design Splio, prestataire spécialiste de la relation client multicanal, vient de réaliser une infographie sur le responsive design. Cette notion consiste à repenser la manière de concevoir les parcours de navigation en ligne. L’objectif est donc de réorganiser l’information en fonction des paramètres de l’appareil. Relativement technique, l’infographie met en avant, sur un ton décalé, 10 conseils clefs à destination des designers et développeurs. Mettre en place une mise en page simple. Afin d’illustrer l’ensemble de ces « tips », l’agence Splio renvoie les curieux vers le site mediaqueri.es, qui propose une série d’exemples.
Google Glasses Project : Le projet pionier de GoogleCoBloging Je vais vous parler dans cet article de lunettes à réalité augmentée, même si beaucoup d’entre vous le savent déjà faisons un petit rappel sur ce en quoi consiste la réalité augmentée. La réalité quoi? La réalité augmentée! Un terme bien compliqué et mystérieux pour un concept assez facile à comprendre. La réalité augmentée consiste à superposer une image virtuelle à la vision que nous avons de la réalité. Comme beaucoup d’autres inventions vouées à un succès commercial extraordinaire, elle a fait son apparition dans l’armée dans les années 1980 pour assister les soldats au cœur du combat. Les applications se sont ensuite rependues au monde médical et a très vite suivi pour le grand public. La réalité augmentée a bien évolué depuis et Google a dévoilé un projet futuriste qui prends l’apparence de lunettes. Les Google glasses Le laboratoire (plus si) secret de Google, le Labo Google X, a dévoilé récemment un projet un peu fou : des lunettes à réalité augmentées.
50+ Ressources indispensables pour les webdesigners 50+ Ressources indispensables pour les webdesigners Webdesign 24 août 2010 Utiliser les bonnes ressources peuvent parfois vous faire économiser un sacré temps tout en vous apportant une valeur ajouté à votre travail…Vous êtes ainsi plus performant et professionnel ! Il est donc essentiel pour tout webdesigner qui se respect, d’apprécier les différents outils/ressources listés dans cet article présentant les 50 ressources indispensables pour les webdesigner. Inspiration / Showcase Site internet Logo Graphisme / Art digital Wallpapers Outils Générateurs de texte Couleurs Showcase de couleurs Nuances de couleurs Palette de Couleurs à partir d’une image Création de conceptBoard Ressources Icones Fonts Images Gratuites / Libre de droits Payantes (Discount) Payantes ($$$) Textures Motifs Brushes Vecteurs Partagez cet article Vos réactions ... Nadège 24 août 2010 at 20 h 35 minSuper ressources! Laisser un commentaire Articles en relation Articles populaires Articles Récents Recevoir votre code RIO Free Gratuitement
Meg 4.0 : Olympus et les lunettes à réalité augmentéeCoBloging C’est la grande mode en ce moment ! Les lunettes à réalité augmentée sont des classiques de la science-fiction, plus pour longtemps apparemment. Bientôt un monde de binoclards ! La course à la technologie est lancée, après les annonces de Google suivis par celles de Sony et Apple, on apprends aujourd’hui que le fabricant d’appareils photos Olympus nous prépare aussi une paire de lunettes High-tech. Pourtant, cette paire de lunette dénommée Meg 4.0 propose un positionnement différent : Pas d’appareil photo, pas de caméra et un poids ultra-léger d’à peine 30g. Les lunettes Meg 4.0 du fabricant japonais Olympus. Fonctionnement et utilisation Les lunettes sont équipées d’un accéléromètre qui permet à l’utilisateur de commander les lunettes à partir des mouvements du corps. Les Meg 4.0 utilisent la connection Bluetooth. Meg 4.0 parmi ses concurrents