Flat design et skeuomorphisme... Voilà déjà quelque temps que l’on nous parle du flat design comme étant la grande tendance graphique à suivre. À l’inverse, le « skeuomorphisme » serait devenu ringard, passé, « so 2000’s »… . Alors, essayons de démêler tout ça et d’y voir plus clair… Le skeuomorphisme c’est quoi ? Selon Wikipédia : « un élément de design dont la forme n’est pas directement liée à la fonction, mais qui reproduit de manière ornementale un élément qui était nécessaire dans l’objet d’origine. » En d’autres termes, il s’agit de donner l’apparence d’un objet existant à un élément de design ayant la même fonction que cet objet, le plus souvent dans le but de rendre son utilisation plus intuitive. Quelques exemples de skeuomorphisme : Et le flat design c’est quoi ? Le flat design est un style graphique débarrassé de tout effet de relief ornemental privilégiant ainsi la lisibilité de l’interface. Quelques exemples de flat design : Mais alors, on ne mélange pas flat design ET skeumorphisme ? Quelques exemples :
Doit-on remplacer les textes par des icônes 04 juillet 2014 Doit-on remplacer les textes par des icônes ? "Tiens, et si on remplaçait cet intitulé trop long par une icône ? Ce serait plus court, plus convivial, plus rapide, plus..." Prudence. Dans sa dernière étude sur les icônes, l'agence Miratech montre qu'elles ne sont pas toujours bien comprises. Et pour commencer, faites vous-même le test. Remplacer un texte encombrant par un dessin. Miratech a mené un test utilisateur à distance sur un panel de 150 participants, tous utilisateurs de smartphone/tablette ou ayant l’intention d’en utiliser plus tard. Voir tous les résultats par icône Conclusion : avant de remplacer un texte par une icône, assurez-vous qu'elle soit parfaitement comprise de TOUS vos internautes. Voir les autres newsletters de MiratechComment les pages web sont regardées ? Commentaires Poster un commentaire
Webdesigner - Offre d'emploi CDI CDD Nous recherchons un (bon) webdesigner-graphiste. Mots clés : interfaces, design, ergonomie, icônes, goût, logo, illustrations. Motivé(e), sérieux(se) et impliqué(e), vous serez totalement intégré(e) à la vie de notre agence. Vous participerez à toutes les tâches qui incombent à votre poste, de la réflexion à la réalisation. Vous devrez également connaître les tenants et aboutissants de l'intégration web (HTML, CSS, JavaScript). Votre curiosité et votre désir de perfectionner votre savoir en vous maintenant informé(e) (veille technologique) seront essentiels. Si vous êtes intéressés, n'hésitez pas à nous faire un retour par e-mail (uniquement) avec : * Votre CV ou présentation / site / book / skyblog (au choix) * Vos super-pouvoirs secrets * Vos prétentions salariales et toute autre information qui pourrait nous intéresser Référence : pixelroxor Type de contrat Durée indéterminée (CDI) Durée déterminée (CDD) Poste à pourvoir à une date précise : Durant le 1er semestre 2014 Compétences souhaitées
[Photoshop] extraire un calque / groupe dans un nouveau fichier (.PSD ou .PNG) au pixel près Le titre n’est pas très explicite, je vais vous expliquer le concept en image. Imaginez que vous ayez une composition avec pleins de calques dans tous les sens, mais que vous souhaitez en extraire qu’un seul morceau , que ce soit un calque ou un groupes de claques (une icône, une image, un bouton, etc) pour l’utiliser dans une interface ou ailleurs. Comme explicité dans les commentaires, il m’arrive souvent d’avoir à extraire un “morceau” (appelons le comme ça) de .PSD perdu au milieu de calques non nommés. Mon dernier cas concret était d’extraire les miniatures photos de tous les produits pour une intégration d’une page. Pour l’extraire, vous pouvez par exemple cacher tous les calques sauf ce que vous voulez extraire, puis redimensionner tout autour, ou utiliser l’outil “slice” de Photoshop pour créer une tranche et l’extraire. Extraire dans un nouveau fichier .PSD Extraire en .PNG directement Besoin d'un designer ?
This Awesome Urn Will Turn You into a Tree After You Die | Design for Good “After you die, do you want your body to feed worms or to feed squirrels?” asks the team behind the Bios Urn — a product by Spanish design studio estudimoline — that enables you, your loved ones, or your pets to be buried in a life-assuring kind of way by transforming their ashes into a tree. “Bios Urn changes the way people see death, converting the 'end of life' into a transformation and a return to life through nature. [It is] a smart, sustainable, and ecologically friendly way to approach what’s, probably, one of the most important moments in human life.” The Urn is 100% biodegradable, made of coconut shell, compacted peat, and cellulose. It has two parts — a top capsule for the seed, and a bottom part for the ashes. The Urn is manufactured both for people and for pets; it can be used with ash saved from another urn, and it doesn’t expire. Leaving behind a tree definitely seems like a better option than leaving behind a tombstone. Photos: Urna Bios
Itérer son design avec invision Bienvenue dans cette nouvelle vidéo Hackademy qui portera sur un outil bien pratique que je tenais à vous faire découvrir : InVision. Cet outil vous permet de gérer vos projets de webdesign, de la maquette à l’intégration. InVision se présente comme une solution à plusieurs problèmes auxquels sont confrontés les webdesigners. Avant de commencer, InVison est un service pensé tant pour un freelance que pour une entreprise et est payant au delà d’un seul projet (ce qui vous permet de l’essayer sans soucis). Le service met à votre disposition une interface web complète pour gérer vos projets ainsi qu’une application desktop de synchronisation que vous pourrez tout aussi bien remplacer par DropBox (et tant mieux puisqu’elle n’est disponible que sur OSX). Posons nous une première question, un outils de synchronisation ? Versioning de fichier design (.psd, .sketch) Dans InVision chaque version est enregistrée avec un screenshot et une date. Outils de prototypage Passons en mode Build. En bref
Comment sécuriser son WordPress Article invité rédigé par Aurélie, développeuse chez Atchik Services, depuis plus de 8 ans ! Hello à tous !! Comment allez vous ? Aujourd’hui je vous propose un article invité qui vous donnera quelques conseils pour sécuriser votre blog / site WordPress. Bref, pas très sérieux de ma part. Merci à Aurélie pour son temps et le partage de connaissances ! Comment sécuriser son WordPress ? Avant tout je tiens à remercier Miss SEO Girl de m’avoir invité à rédiger un petit article sur son Blog Depuis quelques mois il ne se passe pas un jour sans lire ou entendre qu’une personne autour de moi s’est fait pirater son ou ses sites. En mars dernier nous étions a plus de 40 000 attaques par minute. Si vous voulez être notifié des alertes de sécurité concernant WordPress et être averti de la vulnérabilité des plugins et de l’état de correction de ceux ci, je vous invite à vous inscrire à la newsletter de Wordfence. Mais pourquoi ces sites en particulier se font-ils hackér ? C’est fait ? 1. 2.
Unroll.me : Service web gratuit pour se désinscrire des newsletters en un clic Petite découverte du vendredi après-midi : Unroll.me, un service web complètement gratuit permettant de faire le tri dans vos emails en vue de vous désinscrire en un clic de toutes les newsletters qui ne vous intéressent plus et peuvent polluer votre boite mail. Après vous être inscrit sur le site directement, Unroll.me va vous demander votre permission pour scanner entièrement votre boite mail. Il part alors à la recherche de newsletters qu’il va ajouter à sa liste. L’étape suivante vous présente l’ensemble des newsletters trouvées. Chose intéressante, le service permet aussi d’ajouter une newsletter à un « Rollup ». Si tout n’est pas clair, Unroll.me vous propose cette courte vidéo de présentation très explicite : En tout cas, on apprécie GRANDEMENT la possibilité de se désinscrire facilement de nombreuses newsletters. Je remercie Kriisiis d’avoir partagé sa trouvaille qui je l’espère, vous comblera autant que moi !
Les Grots Mots du Mobile. Dictionnaire des mots un peu trop compliqués des créateurs d'applications mobile. Analytical Puzzles and Problems Lateral thinking puzzles that challenge your preconceptions. 1. You are driving down the road in your car on a wild, stormy night, when you pass by a bus stop and you see three people waiting for the bus: 1. An old lady who looks as if she is about to die. 2. An old friend who once saved your life. 3. Knowing that there can only be one passenger in your car, whom would you choose? Hint: You can make everyone happy. Solution: The old lady of course! 2. Hint: The police only know two things, that the criminal's name is John and that he is in a particular house. Solution: The fireman is the only man in the room. 3. Hint: He is very proud, so refuses to ever ask for help. Solution: The man is a dwarf. 4. Hint: It does not matter what the baby lands on, and it has nothing to do with luck. Solution: The baby fell out of a ground floor window. 5. Hint: His mother was an odd woman. Solution: When Bad Boy Bubby opened the cellar door he saw the living room and, through its windows, the garden. 6. 7.
UXPin ou comment améliorer son workflow en webdesign Nous allons nous pencher sur le workflow ou flux de production pour les anglophobes ! Le processus webdesign que j'applique aujourd'hui est bien meilleur que celui que j'utilisais il y a quelque temps et je voudrais le partager avec vous en vous expliquant pourquoi vous allez gagner en efficacité avec cette méthode plus adaptée aux projets d'aujourd'hui. 1- Pourquoi faut-il maquetter ? Les étapes d'un projet webdesign sont très importantes, à commencer par le cahier des charges. Mais ce n'est pas la problématique que je veux aborder aujourd'hui. Passons directement à la phase de maquettage. Je suis sûr que pour certains, vous sautez directement sur votre logiciel de PAO favori (Photoshop, Illustrator ou encore GIMP) après avoir récupéré les besoins du client. Vous venez de griller une étape ! Et la question que vous devez vous poser, c'est "comment vais-je hiérarchiser et organiser mes éléments et comment vais-je les rendre fonctionnels ?". 2- Le web évolue et les clients aussi ! . . . .
Quand, quoi, comment: tout sur le test utilisateur Observer un participant qui pense à voix haute en réalisant une liste de tâches sur votre site? Faites le test utilisateur tôt et régulièrement! Quand tester son interface web? Il n’est jamais trop tôt dans le processus de développement d’une interface web (site, maquette, application mobile, formulaire) pour commencer à tester l’expérience utilisateur. Selon Steve Krug, auteur du livre « Don’t make me think », tester un site avec un seul utilisateur, assez tôt dans le projet et, répéter l’opération régulièrement, serait plus efficace que de le tester avec 50 personnes lorsque le site est presque abouti! Concrètement? Ensuite, continuez vos test utilisateurs durant l’entièreté du développement: wireframes, prototypes et, finalement, les véritables pages de votre interface. Le rôle du facilitateur est double: d’une part s’assurer que le participant reste concentré sur les tâches à effectuer et, d’autre part, s’assurer que le participant pense à voix haute.
Dareboost Dareboost se présente comme un site d'analyse et conseil en performance et qualité web. C'est un outil d'audit en ligne comme il en existe d'autres, mis à part que celui-ci dispose de nombreux atouts qui le différencient de ses confrères, notamment en regard de son périmètre très large : Performances d'affichage Validation / Compatibilité navigateurs Accessibilité Bonnes pratiques SEO Bonnes pratiques jQuery / JavaScript Conseils côté serveur et durée de cache etc. Et surtout : l'outil est gratuit (et le restera) et il est français ! Certains conseils et certaines évaluations méritent encore toutefois d'être un peu plus explicites pour le commun des mortels, mais dans l'ensemble il s'agit d'un très bon point de départ pour dégrossir les principaux points de progrès de votre site web.