background preloader

More Meaningful Typography

More Meaningful Typography
We have all heard of the golden mean (also known as the golden ratio or golden section): the self-replicating page with a proportion of 1:1.618 that is said to be found in everything from the design of ancient Greek architecture to the growth patterns of plants. Article Continues Below This and other meaningful ratios rooted in geometry, music, nature, and history can be expressed as modular scales and put to work on the web. Fig 1: A simple modular scale: 10@1:1.618 Fig 2: Our example page, designed using a modular scale. A modular scale is a sequence of numbers that relate to one another in a meaningful way. By using culturally relevant, historically pleasing ratios to create modular scales and basing the measurements in our compositions on values from those scales, we can achieve a visual harmony not found in layouts that use arbitrary, conventional, or easily divisible numbers. Let’s start by looking at what modular scales are, and how they apply to web design. Conclusion#section5 Related:  Graphisme

Modularscale How do I use this? Use a scale like you would use a ruler. Many people set heading type sizes with numbers from a scale, but that's just one possibility. You can use a scale to measure or set the size of any element or negative space in a composition — including grids, and the overall dimensions of the composition itself. What’s a good base? Body text type size is a good place to start. What’s a good ratio? Ratios can be chosen carefully and meaningfully, drawing inspiration from the history and character of a typeface or other elements in a project. Can I use more than one ratio? Sure! Why can't I use multiple bases and ratios? Because that would really dilute the scale. Should I use the Sass / JS plugins? They are amazing, but they do require setup. Both plugins work the same way: First, you need to install them in your project. When you have things all set up, use the function ms(0) in your Sass or JS. About this website

50 Free Wireframe Templates for Mobile, Web and UX Design In the initial stages of a project, when ideas aren’t quite fully formed, it’s good practice to wireframe the layout of your mobile app or web project by stripping away all design elements and flourishes to help define and better communicate the information hierarchy of the layout and plan for functionality and user flow. Whether you create them using a whiteboard, pencil and paper, web-based tools, or using a graphic application, effective wireframing and planning play a critical role in the success of your product. While most wireframing tools are readily and freely available (pen, paper, markers…), you may have to pay to use some web-based tools, and if you know where to look, you can also grab some free, templates for graphic applications like Photoshop, Illustrator or Sketch. Material Design Wireframe Kits Material Design Wireframe Kit (Sketch). Material Design Mobile Wireframe Templates (PSD). iOS Wireframe Kits iPhone 6 Vector Wireframing Toolkit (AI). iPhone Wireframes (Sketch).

6 secrets to creating outstanding infographics In the Instagram and Snapchat era, audiences are increasingly visually oriented. But sometimes an image alone isn’t enough: you need a clever combination of words and graphics to tell a detailed story in a way that can be grasped quickly and easily. Cue the infographic. But while they may look easy to create, in practice they can be darned difficult to get right. There are, however, some basic principles you can follow to make sure your design is as effective as possible. (And here's a bonus content tip: always run a spellcheck before sending your infographics out into the world.) Here, we share six secrets to creating outstanding infographics... 01. The first thing to consider when setting out to design an infographic is whether or not you actually need one. Your client may have heard at a marketing seminar that infographics are “big right now” and “a great way to go viral”. 02. So don’t put the cart before the horse. 03. This isn't always easy. 04. 05. 06. Related articles:

Rechercher des mots clés et améliorer votre stratégie grâce à l'outil de planification des mots clés – Google AdWords Touchez les bonnes personnes avec les bons mots clés Obtenez des idées de mots clés afin d'élaborer vos campagnes à l'aide de l'outil de planification des mots clés AdWords. Utiliser l'outil de planification des mots clés "Grâce à cette fonctionnalité, nous pouvons nous tenir au courant des tendances au niveau des mots clés. Brad Beiter, VP Performance Content, Performics Fonctionnement Trouvez de nouveaux mots clés Commencez par rechercher des termes ou des expressions en rapport avec vos produits ou services. Comparez les tendances au niveau des mots clés Obtenez des suggestions d'estimations d'enchères, et étudiez la fréquence de recherche des mots clés et l'évolution des volumes de recherche au fil du temps. Créez et partagez votre plan Une fois que votre plan vous convient, vous pouvez l'enregistrer dans votre compte ou le partager avec d'autres personnes. Commencez à choisir des mots clés plus efficaces

Workday Canvas Design System [Glossaire] Ces mots du web à comprendre - Web et Solutions Vous utilisez Internet au quotidien, aussi bien dans votre vie personnelle, que dans votre activité professionnelle, et vous êtes souvent confronté.e à des termes qui vous semblent compliqués ou pour lesquels vous n’êtes pas sûr.e de bien comprendre ce qu’ils signifient… Nous avons donc dressé pour vous dans ce glossaire une liste des mots qui nous paraissaient aussi importants qu’ils peuvent paraître complexes. A/B Testing L’A/B testing est une technique marketing utilisée pour tester deux versions d’une seule variable (page web, objet d’un email, visuel, couleur, etc.) pour déterminer la version qui obtiendra les meilleurs résultats (clic, ouverture, remplissage d’un formulaire …). Le test se fait sur un échantillon égal de personnes. La version gagnante est ensuite activée ou envoyée au reste de l’échantillon. (Google) Analytics Google Analytics est un outil gratuit de suivi du trafic d’un site web créé par Google. Benchmark Big Data Cookies Ergonomie Fil d’ariane Flux RSS Hébergement Parallax

Begin at the beginning – Sketching out a full, extended web design process: the initial steps | drupal blog Many times in redesigning websites there is pressure to jump straight into the visual design and programming phases but spending time & effort in initial planning can improve efficiency and help the later work go more smoothly. Some of the first steps of the planning phase include site content audits, website strategy plans, and card sorting exercises. A content audit takes an inventory of the website’s existing content. As the content is inventoried some problem areas may stand out to web team members. Heuristics and review of site analytics can be used to confirm problem areas (structure usability problems, audience marketing problems). Phase 1: Planning – Conducting Site Content Audits: One of the first things in a website redesign process that a web team should do is conduct a Site Content Audit of the existing site pages. Conducting Site Content Audits resources & articles: – Example content inventory spreadsheets Phase 1: Planning – Writing Website Strategy Plans

prehysteries of new media

De belles proportions
For better proportions by mebae Oct 28

Related: