background preloader

Design

Design
Related:  Tutoriels, Formations, conseils utiles, bonnes pratiques etcUX / UI / Ergonomie

Apprendre à utiliser Material Design Lite : La grille Récemment nous avons jeté un oeil sur le nouveau Framework front-end de Google, Material Design Life (MDL). Nous avons découvert que MDL est livré avec une floppé de composants pour construire l'interface utilisateur d'un site web grâce à des lignes directrices et des principes de conception matérielle. Dans cette séries de tutoriels, nous allons examiner les composants individuels de MDL en détail, à commencer par son système de grille qui constitue la base de tout Framework front-end. C'est parti ! Avant de pouvoir utiliser la grille, ou tout autre composant de MDL, nous devons d'abord implanter ses librairies CSS et Javascript. Les feuilles de styles pour les icones de MDL La police Roboto qui est la police principale La feuille de styles générale Le fichier Javascript Une fois implanté, nous pouvons commencer à construire l'interface utilisateur avec les couleurs définies dans les feuilles de styles. Nous commençons une grille avec une balise div vide.

Structure - Layout For guidance on arranging elements in z-space to achieve the correct behavior and shadows, see the Environment and Elevations and shadows sections. This structure includes a permanent app bar and floating action button. An optional bottom bar can be added for additional functionality or action overflow. Side nav menus overlay all other structural elements. This structure shows a permanent app bar with a floating action button. The desktop structure contains a permanent app bar with a floating action button. Side navigation menus can take up the full height of the screen size (including under the app bar) and be accessed temporarily or pinned for permanent display. Define a primary horizontal or vertical divider. Avoid slicing up the interface into too many regions which can cause L shapes. Break edges with cards and floating action buttons.

University | Product Design Training Bryan Zmijewski Founder, President Bryan is our fearless leader and chief instigator. Hailing from the Stanford Product Design program and getting his roots from IDEO, he has advised more than 200 startups on how to build digital products. Brandon Arnold Design Lead Brandon is a mastermind when it comes to responsive design. Daniel Codella Marketer Marketing guru Daniel Codella brings his experience in sending emails and maintaining customer relations to ZURB, where he practices creating campaigns, sending and receiving customer emails daily.

Gestalt principles in UI design. Here’re the Gestalt principles which can inform today’s UI design. Elements arranged close to each other are perceived as more related than those placed further apart. This way different elements are viewed mainly as a group rather than as individual elements. How does the Proximity principle apply to UI design? We can use the Proximity principle in UI design for grouping similar information, organising content and decluttering layouts. Its correct use will have a positive impact on visual communication and user experience. As the principle states, items that are related should stay close to each other, while the unrelated items should stay further apart. We can apply the Proximity principle pretty much everywhere from navigation, cards, galleries and banners to lists, body text and pagination. Similarly to the Proximity principle, elements placed within the same region are perceived as grouped. How does the Common Region principle apply to UI design?

iOS Human Interface Guidelines As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality. Three primary themes differentiate iOS from other platforms: Clarity. To maximize impact and reach, keep the following principles in mind as you imagine your app’s identity. Aesthetic Integrity Aesthetic integrity represents how well an app’s appearance and behavior integrate with its function. Consistency A consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. Direct Manipulation The direct manipulation of onscreen content engages people and facilitates understanding. Feedback Feedback acknowledges actions and shows results to keep people informed. Metaphors User Control Throughout iOS, people—not apps—are in control.

Laisse-moi faire ma diva – 24 jours de web Ou pourquoi détruire un design en dev c’est plus grave que ça en a l’air. Développeurs, intégrateurs, je vous dédie ce poème. Designers, graphistes, vous n’êtes pas seuls. 1. Quand j’étais intégrateur HTML chez Publicis, il y avait une race de chefs de projet qu’on redoutait plus que tout : celle qui croyait mieux connaître notre métier que nous. C’était il y a dix ans. Eh bien dites-vous que pour un créatif, ces nuisibles, c’est à chaque projet. 2. C’est humain : tout le monde a des yeux. Sauf que le créatif qui a bossé sur votre projet n’a jamais eu pour objectif de vous plaire : il fait du design, pas de l’art. Le designer n’utilise pas ces outils au hasard. Tout ça pour dire que cette expertise a une véritable valeur. Alors si vous avez des idées à soumettre à votre créatif : il peut les écouter, mais il n’est certainement pas tenu de les mettre en œuvre. 3. Votre designer vous a autorisé à parler ? 4. Voilà pour la théorie et le modus operandi. Pourquoi ? Un exemple ? 5.

Conception de site web La création et la conception de site web ou web design est la conception de l'interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans un site web. La conception d'un design web tient compte des contraintes spécifiques du support Internet, notamment en termes d’ergonomie, d’utilisabilité et d’accessibilité. Le web design d'un site se présente en premier temps sous forme de maquette fonctionnelle avec des spécifications techniques : ergonomie, charte graphique, identité visuelle, marketing, interactivité. Histoire[modifier | modifier le code] Capture d'écran du navigateur World Wide Web Le berceau du Web[1] se situe au CERN (Organisation Européenne pour la Recherche Nucléaire). Le site Web fit ses premiers pas hors du CERN en 1991, celui-ci comportait des informations relatives au navigateur WWW et décrivait les principales caractéristiques du web. Premiers pas[modifier | modifier le code] Formation[modifier | modifier le code]

CSS Can Influence Screenreaders | Ben Myers Introduction Let's say we're building a shopping list app. As we build out the app, we decide to style the list, stripping out the bullets that the browser gives us by default. Line 1 <ul> Line 2 <li>Apples</li> Line 3 <li>Bananas</li> Line 4 </ul> Line 1 <ul style="list-style: none;"> Being dutiful accessibility testers, let's run our screenreaders over the two lists. I was able to test the two lists with NVDA for Windows and VoiceOver for macOS. When I tested against the first, bulleted list, the screenreaders always told me how many items were in the list and preluded each list item with "bullet." ... As we keep building our hypothetical shopping list app, we implement a feature to let users add new items, complete with a shiny new "Add" button. Line 1 <button> Line 2 Add Line 3 </button> Line 1 <button style="text-transform: uppercase;"> Upon testing the page with screenreaders, our screenreader's readout confirms that it is receiving the "ADD" text in all caps. What is happening here?

Mockups & Rough : gagnez du temps ! Ça y est, vous devez créer un nouveau site internet ! Comme d'habitude, après avoir sabré une célèbre boisson alcoolisée, c'est direction tête baissée dans Photoshop pour attaquer le design. N'est-ce pas la marche à suivre ? Pas vraiment. Si il s'agit d'un projet personnel pour lequel vous savez exactement où vous voulez aller en ayant tout votre temps, pourquoi pas. Il existe deux étapes essentielles avant la conception du graphisme : le mockup (appelé aussi zoning, wireframe - ou fil de fer) et dans certains cas le rough. Création d'un site internet : le workflow 1. C'est le pilier d'un projet : sans lui vous ne savez pas où vous allez ni quelles sont les fonctionnalités attendues. 2. Chacun a des goûts différents : c'est fantastique ! Le design se veut le reflet graphique du cahier des charges (apparence, mise en forme des contenus, ergonomie…). 3. Lorsque la maquette est validée, on passe à l'intégration en page web. 4. 5. Le Mockup Un mockup regroupe essentiellement : Les outils

16 Things to Improve Your Website Accessibility (Checklist)  Accessibility is the practice of ensuring websites are equally available to people with disabilities so they have equal access to the goods and services those sites provide. It’s an integral part of professional web design and development. Why Should You Care About Accessibility? There are many reasons why developers, designers, and their employers/ clients should ensure that accessibility is an early and integral part of the process of web development. In many territories, such as the USA, EU, UK, Israel, and Japan, it’s a legal requirement not to discriminate against people due to their disability. The Common Standards and the Problems Luckily, the W3C (the body that produces many of the standards that the web relies on) has a standard on how to make websites accessible. Unfortunately, WCAG is a long, dry, and very technical read, so let’s look at what you can do relatively easily and get the biggest bang for your buck. How to Improve Website Accessibility (Best Practices) So: 2) ReCAPTCHA

Les grilles dans le webdesign "Il y a quelque chose de différent entre ce site et le mien… Il a l'air de faire plus pro et je ne sais pas pourquoi !" N'avez-vous jamais eu ce genre de remarque ? Pourtant vous utilisez Photoshop (ou autres programmes équivalents) depuis un certain temps, vous connaissez les règles typographiques et celles du web, la palette de couleur a été choisie avec soin... Bref, rien n'y fait : votre site semble déstructuré / désharmonisé. Pas d'inquiétude, vous n'avez sans doute pas utilisé de grille dans votre design ! Une grille, comme dans le film* ? Utilisée en imprimerie, il est tout à fait possible de transposer le système de grille dans le domaine du web. * Un film très bleu avec des motos, des combats de disques et un certain monsieur Flynn. Grilles : les bases Il existe beaucoup de grilles différentes avec autant de cas concrets d'utilisations. Anatomie d'une grille Elle sert d'armature pour organiser la page et son contenu. On obtient alors une page plus lisible et plus homogène.

Effective Dart: Design | Dart Here are some guidelines for writing consistent, usable APIs for libraries. Names Naming is an important part of writing readable, maintainable code. DO use terms consistently. Use the same name for the same thing, throughout your code. pageCount // A field. updatePageCount() // Consistent with pageCount. toSomething() // Consistent with Iterable's toList(). asSomething() // Consistent with List's asMap(). renumberPages() // Confusingly different from pageCount. convertToSomething() // Inconsistent with toX() precedent. wrappedAsSomething() // Inconsistent with asX() precedent. The goal is to take advantage of what the user already knows. AVOID abbreviations. Unless the abbreviation is more common than the unabbreviated term, don’t abbreviate. pageCount buildRectangles IOStream HttpRequest numPages // "Num" is an abbreviation of "number (of)". buildRects InputOutputStream HypertextTransferProtocolRequest PREFER putting the most descriptive noun last. pageCount // A count (of pages). if (!

Tendance Webdesign 2016 - Les tendances web design en 2016 - Agence web pour la performance de l'entreprise Quand on travaille dans le web, qu'on soit graphiste, web-designer, ou développeur front-end, il est indispensable de suivre l'évolution des tendances webdesign. Que ce soit pour le choix du template, le choix de la maquette graphique, le choix de la Typographie, le choix des animations ... tous les différents éléments propres à la construction d'un site web, sont soumis à la tendance de la toile ! J'ai donc voulu faire un récapitulatif de ce que sont les tendances du webdesign en 2016. Les tendances générales du Webdesign en 2016 Où en sont les tendances du web en 2016 ? Quelles sont les éléments toujours d'actualité, quelles sont les nouveautés ? Le Flat Design Le Flat Design n'est pas nouveau, il continu. Le choix des couleurs : des couleurs rassurantes, positives , optimistes Les internautes ont besoin, pour faire face à l'actualité pas toujours gai, de retrouver sur la toile des couleurs apaisantes, rassurantes. Le Responsive Web design Le Long Scrolling Le Long Scrolling ? Les Animations

Related: