background preloader

Du zoning au mockup, itinéraire d'une maquette web

Du zoning au mockup, itinéraire d'une maquette web
Du zoning au mockup, itinéraire d’une maquette web, en passant par le moodboard, le wireframe, les style tiles et le prototype… Il n’est pas toujours évident de s’y retrouver dans le vocabulaire, nouveau et souvent anglophone, de la conception web. Nous sommes nombreux [**] à avoir déjà vécu une situation d’incompréhension à cause de ce vocabulaire. Les termes « zoning » et « mock-up », en particulier, ont des significations différentes selon les personnes [**] et prêtent au quiproquo, quand ils ne sont pas carrément considérés comme synonymes de « wireframe »… Pour mieux s’y retrouver, commençons par mettre les bons mots sur les choses. sketch / croquis La première chose que l’on fait, c’est de jeter des idées sur papier, sous la forme de croquis.Outils : papier et crayons, Sneakpeekit, InterfaceSketch Le sketch est trop peu utilisé : vous êtes peu nombreux à crayonner régulièrement et près de la moitié [**] à ne jamais faire de croquis ! Conception ergonomique zoning prototype

Balsamiq Croquis, Mockups / Wireframes et Prototypes : quels avantages et comment s’y prendre ? - EXIT Studio - Agence web de création de sites internet et e-commerceEXIT Studio – Agence web de création de sites internet et e-commerce EXIT Studio n’hé­site pas à faire appel au trio croquis (sketch), mockups / wire­frames et proto­type en amont de la réali­sa­tion des desi­gns (et du déve­lop­pe­ment web) de certains de ses projets. Bien que l’er­go­no­mie et la réali­sa­tion de mockups soit quelque chose qui m’in­té­res­sait, j’avais, de prime abord, un peu de mal à conce­voir en quoi cela allait m’être utile, sans me faire perdre du temps. Nombreux sont ceux qui partagent cette idée, et je consacre donc cet article à vous expliquer pourquoi (et comment), la concep­tion de croquis, de mockups / wire­frames et enfin, le proto­ty­page peuvent être utiles tant d’un point de vue graphique et tech­nique, que pour convaincre et rassu­rer un client vis-à-vis d’un projet. Qu’est-ce qu’un mockup / un wire­frame ? Dans le domaine du web et de l’in­for­ma­tique, un mockup (égale­ment appelé Wire­frame) désigne la maquette simpli­fiée d’une inter­face utili­sa­teur. Mockups et Wire­frames, à quoi ça sert ? Étape 4 : proto­ty­page

UX & UI, combinaison gagnante Complémentaires mais différents Confondre UX (User Experience) et UI (User Interface) peut être une erreur commune car ces 2 concepts contribuent à la création d’un site, d’un jeu, d’une application,… tout ce qui peut impliquer une interaction avec un utilisateur. Ils ne peuvent être dissociés si l’on veut obtenir un produit abouti. Si ils sont complémentaires, ils ont aussi chacun un rôle et une place différente dans le processus de travail. L’essence d’un projet, c’est l’harmonie parfaite entre l’esthétique, l’utile et le juste. L’UI n’est pas l’UX mais l’UI c’est de l’UX. L’UX est un processus global qui englobe à la fois UI, contenu, architecture, ergonomie, recherche… L’UI est le support visible de l’expérience, le lien direct entre l’utilisateur et le produit mais surtout le résultat d’un travail approfondi qui prend en considération les besoins de l’utilisateur. L’UX ou Expérience Utilisateur Le design d’expérience utilisateur passe par plusieurs étapes. L’UI ou Interface Utilisateur

ViewLikeUs - Check Sites in Multiple Resolutions and Screen Sizes! GitHub Pour les Nuls : Pas de Panique, Lancez-Vous ! (Première Partie) - Sur la route de l'IndieWeb Traduction d’un article original de Lauren Orsini publié le pour ReadWriteWeb. Seul le lien original fait référence. La traduction reste à raffiner avec la pratique de cet outil. Seconde partie en cours d’étude pour me lancer sous peu dans les premiers commits à la ligne de commande. Mise en forme prévue pour le plan de route indieweb 2014. Merci. - xtof_fr GitHub est plus qu’un simple outil de programmation. Nous sommes en 2013 et pas moyen d’y échapper : vous devrez apprendre comment utiliser GitHub. Pourquoi ? En étant simplement membre, vous pourrez croiser le fer avec ce qu’aiment Google et Facebook. Chercher des Réponses GitHub Aussi gênant que cela puisse paraître, j’ai écrit ce tutoriel parce que je me sentais vraiment perdue dans tous les articles de type “GitHub pour Débutants”. Voir aussi : Tom Preston-Werner de Github : Comment Nous Sommes Devenus Mainstream Ce que vous pourriez ignorer, c’est qu’il existe plein de raisons d’utiliser GitHub même si vous n’êtes pas programmeur.

Meetup Star d'UX : PO, PM, UX Designer, BA... Mais qui fait quoi? Le 23 mai 2017, UX republic a accueilli des personnes d’horizons différents pour alimenter le débat des rôles et responsabilités dans les équipes produits IT lors d’un Meetup « table ronde ». Si vous n’avez pas pu venir, vous pouvez voir la vidéo. Vous n’avez pas le temps pour 1h12 de vidéo ? Cet article de blog est peut-être LA solution ! Vous voulez une réponse en moins de 5 minutes ? L’expérience utilisateur : un sujet pour toute l’équipe Procurer la meilleure expérience utilisateur possible doit être la préoccupation de l’ensemble de l’équipe produit. Les méthodes UX pour mettre l’utilisateur au centre du processus de conception.Les méthodes agiles qui recentrent le produit sur sa valeur.Le lean startup et lean UX qui prônent des cycles rapides de génération et vérifications d’hypothèsesL’écoute active aussi bien avec les utilisateurs qu’entre membres de l’équipe. La rencontre des utilisateurs est une préoccupation récurrente. Des orientations différentes Une forte collaboration Yannick

Comment booster la créativité de ses employés Pour doper la pensée créative de leurs équipes, les entreprises du secteur technologique ne manquent pas d'imagination... et ça paye. Explications. Le secteur technologique progresse à un rythme effréné, constamment à la recherche d'un produit inédit, d'un service innovant ou d'une prouesse technique. C'est pourquoi les entreprises évoluant dans ce domaine ont imaginé un ensemble d'astuces pour stimuler la créativité de leurs employés. D'une conférence animée par Lady Gaga aux congés sabbatiques d'un an, ces idées ont souvent permis de donner naissance à certains des plus grands succès d'une entreprise. Elles améliorent également le moral des employés. Sagmeister & Walsh accorde une année sabbatique tous les 7 ans Tous les 7 ans, le designer graphique Stefan Sagmeister ferme son studio de New York, Sagmeister & Walsh à l'occasion d'un congé sabbatique d'un an pour laisser le temps à ses employés de rajeunir et rafraîchir leur vision créative. Le fameux "20%" de Google 3M et ses "15%" libres

Explain Git with D3 We are going to skip instructing you on how to add your files for commit in this explanation. Let's assume you already know how to do that. If you don't, go read some other tutorials. Pretend that you already have your files staged for commit and enter git commit as many times as you like in the terminal box. git branch name will create a new branch named "name". Branches can be deleted using the command git branch -d name. Type git commit and git branch commands to your hearts desire until you understand this concept. git checkout has many uses, but the main one is to switch between branches. In addition to checking out branches, you can also checkout individual commits. Type git commit, git branch, and git checkout commands to your hearts desire until you understand this concept. You can combine git branch and git checkout into a single command by typing git checkout -b branchname. This command is normally used with one of three flags: "--soft", "--mixed", and "--hard".

Les écueils à éviter pour réussir son Design Sprint …directement avec ses utilisateurs ? C’est la promesse du Design Sprint ! Le Design Sprint est une méthodologie développée par Jake Knapp pour Google Ventures pour rapidement développer et valider une idée en l’espace de 4 jours. C’est un outil puissant qui permet de directement se confronter aux utilisateurs tout en évitant de déployer des moyens financiers trop importants. Après avoir mené plusieurs Design Sprint avec des équipes diverses, j’ai cependant pu relever plusieurs points qui nécessitent une attention plus particulière afin de réussir au mieux son Sprint. #0 Mener la phase de recherche en amont Un Sprint ne peut répondre à lui seul aux questions pourquoi et pour qui. #1 Réunir la bonne équipe On peut avoir envie de lancer un Design Sprint uniquement avec son équipe projet. #2 Faire l’impasse sur un membre du support client Souvent, on a tendance à oublier aussi d’inclure une personne de l’équipe support dans l’équipe du Sprint. #3 Cadrer les exercices dans le temps Take Away

Les conseils de Warren Buffett à la génération Y Warren Buffett s'est improvisé mentor de jeunes professionnels lors d'une session organisée par le réseau social professionnel Levo League. Pendant son chat vidéo en streaming, le PDG de Berkshire Hathaway a exhorté les jeunes femmes à "se mettre en avant" et a partagé des anecdotes personnelles pour illustrer des leçons de carrière universelles. Il a notamment expliqué comment il a vaincu sa peur de s'exprimer en public. Voici quelques-uns des conseils donnés par Warren Buffett lors de son intervention : 1. "N'arrêtez jamais de chercher le travail qui vous passionnera, a-t-il affirmé. 2. "Dites-moi qui sont vos héros et je vous dirai qui vous allez devenir. 3. Buffett a déclaré qu'alors qu'il étudiait pour obtenir son MBA à l'Université de Columbia, il était "terrifié à l'idée de parler en public" et s'était inscrit à un séminaire de Dale Carnegie, avant de changer d'avis à la dernière minute. "Je me suis rapproché de tous les participants de cette formation. 4. 5. 6. 7. 8. 9.

Les classes et objets La programmation par objet ( POO ) a été intégrée au langage PHP dans sa version 4. Mais à cette époque, le modèle objet de PHP était beaucoup trop sommaire. Nous ne pouvions réellement parler de programmation orientée objet. Ce premier cours sur la programmation orientée objet sera une première découverte et une présentation de la syntaxe d'écriture de classes. Quels sont les avantages et inconvénients d'une approche objet ? La programmation orientée objet offre de nombreux avantages. La possibilité de réutiliser le code dans différents projets. Il existe cependant quelques inconvénients à l'utilisation de la programmation par objet : Une application orientée objet mal conceptualisée sera difficilement maintenable et modulaire. Remarque : la programmation par objet n'est pas synonyme de bonne programmation. Qu'est-ce qu'un objet ? Définition Un « objet » est une représentation d'une chose matérielle ou immatérielle du réel à laquelle on associe des propriétés et des actions. Attributs <?

Atomic Design by Brad Frost - Make and Maintain Great Design Systems Je suis freelance.com | Idées, astuces et inspirations pour développer votre activité solo

Related: