dimarts, 14 de juliol de 2015

Do UI Kit

El DO UI Kit no és només un d'aquests packs de components.



És UN PACK DE COMPONENTS en majúcuscules disponible en versió Photoshop i en versió Sketch (como mola això de l'Sketch, n'haurem de fer un post).
Conté més de 130 pantalles, 10 temes complets i més de 250 components, que ben combinats ens ajudaran a crear aplicacions magnífiques.
Descarregueu-lo, val molt la pena.

Do UI Kit



Read more ...

dilluns, 13 de juliol de 2015

Coverr: vídeos gratis per la homepage de la teva web

Està de moda això de posar un vídeo a la plana d'inici de la nostra web. I com que està de moda tothom ho vol posar. Però, és clar, no tots tenim temps, o àmins de fer un vídeo.
Vés per on a Internet hi ha de tot :)
Avui us presentem Coverr un repositori que permet descarregar vídeos especialment creats per la plana d'inici.

Coverr són vídeos de 12 a 15 segons de durada en molt bona qualitat.
Pots descarregar-te el vídeo i també els fragments de codi HTML, CSS, i JavaScript que necessitis per poder afegir-lo en la teva web.
N'hi ha de diferents temàtiques, en van afegint de nous cada setmana i el millor de tot és que són 100% gratuïts.



Read more ...

dimecres, 26 de novembre de 2014

Roots: Punt d'inici per crear themes HTML5 per WordPress

Roots és una eina de construcció de themes HTML5 per a Wordpress enfocat tant a dissenyadors com a programadors.
Roots ens ofereix un punt d'inici amb una estructura bàsica que aprofita al màxim les virtuts de l’HTML5.
Un aspecte molt interessant d’aquesta eina és que està creada sota el popular principi DRY (Don’t Repeat Yourself), que garanteix un codi net i ordenat, fàcil de mantenir i d'utilitzar.
Roots també incorpora Bootstrap fet que ens permet incloure la majoria de les característiques d’aquest recurs.


Trobareu extensa documentació sobre el projecte Roots, instal·lació, personalització, plugins, etc. També compta amb una secció d’screencasts per aprendre a utilitzar i treure-li el major profit a aquesta eina.
Una eina molt útil i interessant.
Read more ...

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 ...