divendres, 31 d’agost de 2012

Sneakpeekit fulls per la creació de wireframes en paper

Pels que no podem prescindir del paper a l’hora de fer un disseny o un wireframe i per a que no en passi allò del bloqueig de la pàgina en blanc (que no s’arregla fent anar un full en color) avui us presentem Sneakpeekit.
Sneakpeekit ens proporciona una plantilla descarregable i imprimible en paper per a la creació de wireframes y esbossos ràpids.

Els fulls s'adapten als sistemes de grids més utilitzats com 960 Grid System, 1140 CSS Grid, Less Framework 4, The Semantic Grid System, 978 Grid System, entre altres.
Podem descarregar un pdf de la plantilla que necessitem encaixada perfectament en un full DINA4 directament per poder-la imprimir i treballar.
Trobarem fulles (Sketch Sheets) per a web, tablets i dispositius mòbils.


Read more ...

dijous, 30 d’agost de 2012

The Tool Box: recopilació del millor de la web per disseny i desenvolupament web

The Tool Box és uan col·lecció de les millors aplicacions online, widgets i eines de disseny i desenvolupament web que podem trobar a Internet, ordenades i classificades.
Podem trobar generadors de tot tipus (text simular, colors, CSS), eines de tipografia, editors, icones, grids, recursos de disseny gràfic i molt més.
Interessant donar-li una ullada de tant en tant.


Read more ...

dimecres, 29 d’agost de 2012

Wirefy un framework per a prototipus Web de disseny web de resposta (responsive)

Wirefy és una col·lecció d'arxius CSS i JS per a crear de forma ràpida prototipus web amb l’afegit de que aquests prototipus estan basats en el Responsive Web Design.
Wirefy és independent d’estils gràfics de manera que els elements de disseny queden supeditats a l’estructura, la idea és que sigui una eina per al desenvolupament, proporcionant els estils més bàsics sense estar subjectes als elements de disseny gràfic.
Aquest framework o boilerplate està composat per una sèrie d’elements que serveixen tant per aplicacions de dispositius mòbils com per la web, així Wirefy respondrà a la visualització apropiada.
Wirefy es composa d’arxius descarregables que inclouent els elements comuns dins d’una estructura web con són:
  • Grids
  • Menús i submenús
  • Breadcrumbs o molletes
  • Paginacions
  • Images
  • Slideshows
  • Tipografia, incloent encapçalaments i icon fonts
  • Botons d’acció
  • Pestanyes
  • Taules
  • Formularis
  • Media queries

Read more ...

dimarts, 28 d’agost de 2012

Moqups: Una aplicació en HTML5 per crear Wireframes

Moqups és una aplicació construïda amb HTML5 online i gratuïta per crear wireframes, maquetes o prototips d'interfície d'usuari. L’aplicació és molt simple i intuïtiva i està basada en estàndards oberts.
Una eina molt útil per crear prototipus online de forma fàcil i ràpida.
Característiques

  • Més de 60 components definits que poden utilitzar
  • Permet exportar a PDF i PNG.
  • Podem utilitzar diferents tipus de grid de columnes per manipular objectes i elements.
  • Permet carregar imatges des del nostre ordinador.
  • Opció d’auto-save
  • Opcions de Desfer, Refer, Tallar, Copiar i Enganxar



Read more ...

dilluns, 27 d’agost de 2012

Tipus de lletra d’icones per interfícies d’usuari

Avui us presentem un recull de tipus de lletra d’icones que ens seran molt útils per a la creació d’interfícies d’usuari.
Els tipus de lletra d’icones o en anglés (icon fonts) són un tipus de lletra que contenen símbols i pictogrames enlloc de caràcters alfanumèrics.
Aquests tipus de lletra són com les fonts dingbat, però estan dissenyats específicament per a interfícies d’usuari. Com que no deixa de ser un tipus de lletra el podem fer anar amb les propietats font-face de CSS o amb cufon.
Les característiques d’aquest tipus de lletra:
  • Suport per a diferents navegadors (cross-browser suport (fins i tot IE6 , per exemple, pot representar les fonts web utilitzant el @font-face )
  • Són escalables (com qualsevol tipografia) a través del navegador
  • Es poden representar amb color diferents
  • Són susceptibles de propietats CSS com text-shadow o gradient
Aquí teniu també un tutorial de com fer anar les Icon Fonts: Tutorial de CSS-Tricks 

Icon fonts amb llicència Creative Commons
Typicons 

Entypo 

Amb altres llicències de lliure ús (caldrà consultar-les segons si es poden fer anar per només us  personal o comercial)

PulsarJS @FontFace


Iconic Icon Set 


IcoMoon
Read more ...