dimecres, 8 d’octubre de 2014

Bootstrap Material Design

Si us agrada l’estil visual de Material Design i feu webs i a més feu anar Boostrap, aviu us presentem Bootstrap Material Design un projecte que imita les característiques del projecte de Google orientat al disseny web que fa anar Bootstrap en la seva versió 3.



Trobarem els següents elements:
  • Botons: en diferents estils i accions (habilitat, deshabilitat)
  • Tipografia i jerarquies
  • Icones (490 icones )
  • Taules
  • Foormularis
  • Navegació: menús i submenús, paginació, breadcrumbs
  • Indicadors: alertes, etiquetes, badges
  • Barres de progrés i sliders
  • Finestres de diàleg
  • Llistes


Bootstrap Material Design

Read more ...

dilluns, 6 d’octubre de 2014

Material Design: llenguatge visual per a productes Google

Material Design és un llenguatge de disseny desenvolupat per Google pensat pel seu sistema operatiu i per les aplicacions pròpies de Google.
Aquest nou llenguatge visual, segons ens diu Google, "sintetitza els principis clàssics del bon disseny amb la innovació i les possibilitats que ofereixen la tecnologia i la ciència".
La darrera versió del SO Android (Android L) farà anar Material Design i properament totes les aplicacions de Google l'aniran incorporant.



Material design es basa en tres principis:

Metàfores
La metàfora d’elements "materials", és a dir, elements que ens recordin a coses físiques superfícies, vores, etc.

Elements gràfics del disseny pensat per a impressió
Inclou tipografia, espai, escala de color, ús de jerarquies visuals, espais en blanc, etc.

Animacions o moviment
Totes aquelles accions que poden fer eles usuaris que es mostrin de forma significativa i coherent (això és fàcil de dir , però un pèl complex d'entendre si no es veu en directe, diguem que les animacions de transició entre elements i/o pàgines responen a moviments naturals i intuïtius, en definitiva res d'explosions rares ni girs 3D per passar de pagina o per veure més gran una imatge)



Continguts:

  • Animació: es basa en l’anomenat moviment autèntic, interaccions responsive, transicions significatives i "detalls encantadors".
  • Estils: color (hi ha una paleta de colors creada específicament), tipografia, icones, imatges i el seu tractament
  • Layout: estructura i mètriques: sistema de grid, ubicació dels elements principals com barres d'eines, menús, navbar, sidenav, etc.
  • Components: els de sempre és clar; llistes, botons, quadres de diàleg, grid, barres de progrés, sliders, taules, formularis, etc.
  • Patrons: que fan referencia a les accions del usuaris, con es selecciona un text, com es fa gran un imatge, com es cerca, etc.
  • Accessibilitat: Material Design pot ajudar en la navegació i la llegibilitat de continguts a més d’oferir útils que serveixen de guia i opcions de feedback.


Si en voleu saber més: Guidelines Material Design

Read more ...

divendres, 3 d’octubre de 2014

Raumrot: imatges d'alta qualitat

Imatges d'alta resolució i qualitat això és que ens ofereix Raumrot.
Sempre va bé saber de l’existència d'aquest recursos i més si són gratuïts.
Trobareu imatges de diferents estils (blanc i negre, vintage, colors graduats, saturació i sobre exposició) i també de diverses temàtiques (urbà, natura, transports); a més dels sets especials que contenen imatges d’una mateixa temàtica.
Les imatges estan totes a 300dpi i les podem fer anar tant per un projecte web com per un en paper.
Un recurs que val molt la pena tenir als marcadors.



Visiteu el web: Raumrot
Read more ...