22 Excelentes webs de vectores gratuitos

martes, 6 de noviembre de 2012

Uno de los recursos más buscados por los diseñadores son los vectores gratuitos, aunque sea para inspirarse. Hoy os traigo un recopilatorio de webs dedicadas a hacernos la vida un poco más fácil.
Algunos de estos sitios están muy elaborados y bien organizados, cosa que se agradece.


Freepik.es


Pantalla inicial Freepik.es

Para mi una de las mejores páginas en español sobre vectores, siempre suelo encontrar lo que busco y además completamente gratis.
Es una pagina completa, tiene a disposición del usuario vectoresfotografías y psd.
Hay muchas calidades, tanto profesional como más personal (todo depende de lo que se quiera encontrar).
Se puede hacer la búsqueda general a partir de una palabra e indagar en todo su archivo gráfico y luego seleccionar solo vectores, por ejemplo. Además tiene diversas categorías y se puede ver lo que se ha subido recientemente o lo más descargado.

Vectorizados.com


Pantalla inicial Vectorizados.com

Es necesario registrarse para poder descargarse los vectores pero la verdad es que no cuesta nada y el resultado de búsqueda es gratificante.

Qvectors.net


Pantalla inicial Qvectors.net

La pagina esta en inglés pero es bastante intuitiva. Clasifica los vectores en categorías y subcategorias.

Freevectorarchive.com



Un buen sitio dedicado a los vectores. Bien presentado y organizado donde al buscar, a parte de las categorías, puedes escoger hasta la extensión del archivo.

Greatvectors.com


página de inicio de Greatvectors.com

Ofrece una amplia gama de vector art, clip art, arte toon, conjuntos de iconos, botones, imágenes de productos y experiencia en una variedad de estilos. Encontramos vectores con todo tipo de licencias: gratis, de pago, comerciales...

Vecto2000.com



Gran número de vectores y recursos de Photoshop como pinceles y psd.

Dezignus.com



Gente compartiendo gráficos gratuitos y útiles para los diseñadores: vectores, galería de fotos, pinceles de Photoshop y formas personalizadas, texturas, fondos y patrones de costura, marcos y plantillas PSD, entre muchos otros.

Vectoropenstock.com



Para descargar para uso personal (gratis) o licencia comercial (de pago).

123freevectors.com


página de inicio de 123freevectors.com

El sitio incluye una mezcla de vectores en color y en blanco y negro, imágenes prediseñadas y backgrounds. Todas las imágenes son gratuitas para uso personal y algunas pueden ser libres para uso comercial.

Vectorvalley.com


Pantalla inicial vectorvalley.com

Quizá esta es la página que menos conozco pero hay una colección que no esta nada mal.

Coolvectors.com



Es un amplio directorio de imágenes vectoriales, tanto en blanco y negro como en color para su descarga gratuita. Las licencias varían según el diseño.

Vecteezy.com


Pantalla inicial Vecteezy.com

En esta página encontramos una cantidad considerable de vectores, clasificados, que son gratuitos aunque también podemos convertirnos en Premium y hacernos con otros vectores más conseguidos.

Freevector.com


Página de inicio de Freevector.com

Idesignvectors.com



La recopilación cuenta con vectores de toda la web, es una de las colecciones más grandes.

Downloadfreevector.com


Pagina Inicial de Downloadfreevector.com

Ésta es un poco recargada a la vista pero una vez te haces con ella no es tan complicada como parece.

Vectorjungle.com


página principal de Vectorjungle.com

La colección es muy variada. El sitio cuenta con una colección de vacaciones que es adecuado para tarjetas de felicitación y álbumes familiares, así como una gran cantidad de uso general. Aunque tiene pinta de blog, esta ordenado por categorías.

Createsk8.com


página de inicio de createsk8.com

Se trata de un blog donde la sección Illustrator Free Stuff está llena de vectores únicos,  patrones y tutoriales para Illustrator.


RoundPixel.org


página de inicio de RoundPixel.org

Otro blog dedicado a la ilustración y el diseño web. La sección de goodies incluye buena selección de vectores libres. El autor pide un enlace para su uso, pero no requiere uno. Licencias permiten el uso comercial y personal.

Vectorvault.com


página de inicio de vectorvault.com

En una sección de esta página encontramos vectores gratuitos diarios que van variando, el resto son de pago. 

Freevectors.net


Página inicial de Freevectors.net

No está tan lograda como las anteriores pero que tiene algunos vectores interesantes. No están categorizados, tan solo son posts con diferentes temas de vectores


Dagonartz.net


página de inicio de Dragonartz.net

Vectores libres para descargar, modificar y compartir en la web siempre que se mencione a los creadores. La obra resultante no se puede vender comercialmente.

Design-freebies.com


página de inicio de Design-freebies.com

Un blog dedicado a postrar vectores interesantes diariamente, aunque tiene un apartado que reúne todo los vectores. Además dispone de patterns, iconos, fuentes, texturas, Photoshop, Wordpress...


Tienda virtual e-commerce con Blogger gratis

¿Tienes un blog con tus productos pero no sabes como hacer una tienda virtual? ¿Alguna vez has pensado en vender algo que haces? ¡En Blogger es posible!

Hoy en día Internet es uno de los sitios en potencia para vender y promocionar productos y, además, es gratuito. ¿Cuanta gente no se atrevía a montar un negocio y ahora puede hacerlo sin necesidad de gastarse un duro?

Mirando y mirando he encontrado una serie de templates para tiendas virtuales con Blogger totalmente gratuitas y que la verdad es que no están nada mal.

Espero que sea de ayuda para los nuevos emprendedores!

BloggerStore




Chica Blogger nos enseña una plantilla e-commerce en su blog muy interesante. Es un template de diseño atractivo que incluye un carrusel de imágenes y menús deplegables con jQuery. Es interesante la integración de SimpleCart, un plugin javascript para e-commerce que te permite añadir ítems a tu carrito de compras, y que trabaja con Paypal para realizar los pagos.

La plantilla no es difícil de instalar y personalizar.


Shopping Cart Blogger Template



Una plantilla limpia y elegante para un e-commerce profesional. Es simple a la vista y en la página de descarga enseña como personalizarla. Esta lograda, tiene lo necesario y no despista con decoraciones. Recuerden menos es mas.



Johny BlackStore



Una plantilla muy completa, es casi una web. Permite pago con diversos métodos como PayPal, Visa o MasterCard entre otros. Utiliza jQuery para mostrar los productos, un carro de la compra visible en todo momento, social media, un menú para organizar los productos y ordena por categorías.



eStore



Con esta plantilla, diferente a las que normalmente encontramos, podemos crear fácilmente una tienda en línea y vender productos. Es un template muy fácil de configurar. También utiliza una cuenta de PayPal para la venta de sus productos en línea. Y contiene SimpleCart, para la venta de productos añadiendolos a la cesta.


Simplex Eshop



Otro tipo de tienda virtual que nos ofrece Simplex Design en su blog. Otra plantilla limpia aunque esta tiene el carrito en la izquierda, algo un poco inusual hoy en día. 

En el link de descarga encontrareis las instrucciones para su instalación y personalización.

Posicionamiento Google (SEO)

lunes, 5 de noviembre de 2012

Hoy en día Google es el rey de Internet, la mayoría de gente usa éste buscador para encontrar el contenido que desea. Un 65% de las búsquedas mundiales se hacen en él. En España, nada más y nada menos que un 94'42% de los usuarios lo usa y, el resto, lo hace en Bing (2'08%).

Lo que debéis saber es que Google analiza y estudia cada caso y saca unas variables al respecto para luego poder sacar una media que es la que hará que la página suba en el buscador.

Seguro que muchos de vosotros os preguntais como se posiciona una web en Google. Bien, la verdad es que su proceso no es nada simple.

Para que nuestra página sea bien vista por Google, tenemos que seguir unos pasos a la hora de crearla.

Para empezar, explicaremos qué es Google. Se trata de un motor de búsqueda que indexa archivos almacenados en servidores gracias a un "spider". El Spider inspecciona las páginas automáticamente y crea una copia del cogido fuente de éstas para que su motor las indexe.

¿Cómo funciona Google?

1- Explora y descarga las páginas

Almacena, comprime y guarda en el "storeserver" el código fuente de cada una de ellas. Entonces, pone un ID, es decir, un nombre para poder encontrarla.

2 - Indexa

Interpreta el código y saca un conjunto de palabras o "hits".
Seguidamente hace un "Hitlist" (un ranking) de las palabras más utilizadas en cada página según la importancia que tengan (h1, strong, bold...).
Hace lo mismo con todos los links y los guarda en un archivo llamado "Anchors".
Todas las páginas y los links van en un documento que almacena.

Gráficamente seria lo siguiente:


Aqui también entra otro tema, que es el Pagerank. Se trata del índice de popularidad de la web que lo mide a partir de los links externos que van a tu web. Así pues, es muy importante tener blogs, páginas en las redes sociales (Facebook, Twitter, Pinterest..), amigos que tengan otras paginas o blogs... para que Google vea que se habla de nuestra página y la considere importante.
Cantidad y calidad.

3 - Buscar

A la hora de buscar, Google sigue 3 pasos:
  • Palabra clave: Se coteja en la BBDD (base de datos)
  • Hitlist + DocID: Listado de coincidencias
  • Pagerank: jerarquía por importancia.


SEO Checklist

Es una serie de actividades que se realizan para incrementar las visitas a un sitio web proveniente de un buscador.

1 - Etiquetas

Todas ellas van dentro de <head> y son importantes ya que un buscador es lo primero que mirará. Hay más etiquetas que podemos poner pero estas son las imprescindibles.

- Title

Se trata del titulo de la página que debe contener entre 5 y 7 palabras.
Para cada página debemos dar un nombre distinto: "Mi Empresa" a la pagina principal y "Contacto" para la página de contacto.
<title>Titulo de la página</title>

- Base 

Sirve para tener los derechos de la página, por si la roban. Evita que si la copian Google la indexe.
<base href="www.mipagina.com"/>

- Keywords

Las palabras clave que saquemos de nuestra página.
<metra name="keywords" content="palabra1, palabra2, palabra3"/>

- Geo

La geolocalización de nuestra página también es importante. Sirve para definir a que usuarios va dirigida o de donde es.
<meta name="city" content="Barcelona"/>
<meta name="country" content="Spain"/>
<meta name="state" content="Catalonia"/>
<meta name="zipcode" content="08640"/>
<meta name="geo.placement" content="Barcelona, Catalonia, Spain"/>

- Robots

Muy importante: deja pasar a los buscadores.
<meta name="robots" content="index, follow"/>

- Language

Indica en que idioma esta escrita la página.
<meta name="content-language" content="ES"/>

2 - Textos

El HTML de nuestra página debe ser visible, cuidado con Java, Flash y jQuery. Las imágenes, vídeos y animaciones son invisibles para el buscador. El texto invisible no le gusta a Google y lo ignora o lo penaliza a la hora de indexar.

- Nº optimo de palabras clave por página

El número mágico es de 4-5%. Un valor mayor se penaliza.
En la página de Webjectives podemos contar el nº de palabras clave de nuestra página.

- Prominencia de palabras clave

Orden, títulos de párrafo, viñetas y atributos de texto. Las palabras clave deben aparecer en las etiquetas <h1><h2><h3>.. (headline), en las viñetas <f1><f2>... y en las negritas o mayúsculas.

- Elección de URL

Descriptivos, no genéricos. Deben ser urls dinámicas, para ello debemos reescribirlas (mod_rewrite)

- Etiquetas ALT

Explicación alternativa a imágenes, vídeos.. Es muy importante poner siempre esta etiqueta.
<img src="imagen.jpg" alt="texo explicando la imagen"/>

- Anclas de texto

Links dentro del texto.
<p>Esto es el <a href="inicio.html> Inicio </a> de la página</p>

- Tablas

No se deben utilizar, tan solo lo justo y necesario.

- Tamaño del documento

Debemos saber que Google deja de escanear páginas de 101k.

3 - Links

 - Jerarquia de links

Calidad mejor que cantidad

- Importancia del texto del link

No deben ser genéricos.
No controlamos los links entrantes a nuestra página, solo los que salen de ella.

- Links absolutos

www.mipagina.com/unos/dos.html

- Sitemap

Otro tema importante de nuestra página, el Sitemap. Se trata de una lista de las páginas que hay dentro de nuestra web.
Existen generadores de Sitemps online que van realmente bien. Os dejo algunos que son gratuitos:

4 - Otros

- Contenidos actualizados

Debemos actualizar periodicamente nuestro contenido ya que si Google ve que hay algo que no varia lo da como no relevante.

- Índice de pulsaciones en los resultados de búsqueda

Se trara de algoritmos que capturan las veces que un resultado es pulsado.
Cuantas más veces pulsen nuestro resultado en un listado de Google mejor. Aun así no lo pone tan fácil, tiene filtros para evitar malos usos: si un mismo usuario pulsa muchas veces el mismo link, Google sospecha de su IP.

- Tiempo invertido en página web

Registra los movimientos que hacemos y el poco tiempo invertido en la web es analizado. Si es poco se penaliza.
Fidelidad y coherencia.

Más de 50 páginas de tipografías gratis

Tener una gran colección de tipografías es algo muy importante. La fuente marca la sensación que vivirá el espectador delante del diseño y debemos tener un amplio abanico de posibilidades a la hora de crear.

A la hora de diseñar, no tan solo las más conocidas deben ser utilizadas, aunque nos parezcan las correctas porque han sido aceptadas por la sociedad. Es más, tenemos que ser innovadores y marcar tendencia.

A medida que pasa el tiempo, cuando se buscan tipografías nuevas, aparecen paginas donde el creador ha dejado libre su trabajo para que diseñadores puedan hacerse con ellas y la verdad es que son de gran ayuda para nosotros.

Supongo que conocéis más de una página pero no va mal que os las recuerden.


Bancos o catálogos tipográficos gratuitos


101fonts.com: De las más antiguas, con un extenso catálogo
Search Free Fonts: Más de 13.000 tipografías
Abstract Fonts: 10.800 tipografías en su catálogo
Google Web Fonts: Recurso de Google (también para implementar en web)
FFonts: 14.00 tipografías
Better fonts: Más de 10.000 tipografías
Neat fonts: Similar al anterior
CreaMundo: 9.800 fuentes gratis
UrbanFonts: Más de 8.000 tipografías
Dafont: Más de 7.000 fuentes
Fontreactor: 4.200 tipografías
High Fonts: 3.000 fuentes
Dingbat Depot
Beautiful Fonts
Font Face
Out Fonts


Tipografías Temáticas


Stencil Revolulutions: Fuentes para crear stencils
Dieter Steffman: Tipografías de estilo gótico y medieval
Sci-Fi fonts: Tipografías sobre ciencia ficción
Pirates & Fonts: Fuentes relacionadas a los piratas
Blackletter Revival: Varias con diseño medieval
Miffies Fonts: 50 tipografías de video juegos
Act Select: Fuentes relacionadas a Sega y Sonic
Apostrophic Laboratories Fonts: Fuentes desarrolladas por Apostrophic Laboratories
Fontennium: Tipografías con grabados egipcios, romanos, celtas...
Pia Frauss: 10 con diseños antiguos
Blambot: Tipografías para comic. (Las gratuitas son las que no tienen un punto rojo)
Fonts for Flash: Posee algunas de pago y otras gratuitas. (Sección Freebies)
Proggy Programming Fonts: 23 fuentes pixeladas gratuitas
CSSBlog: 35 nuevas tipografías Grunge gratis
Designeed: 10 nuevas fuentes retro


Colecciones personales


Fontfabric.com: 42 tipografias gratuitas
Fontriver.com: Tipografías nuevas
CSSBlog: Blog con nuevas tipografías gratuitas
Bloggea2soft: Paquete con más de 500 fuentes gratuitas
Cosassencillas.com: 23 recopilaciones de excelentes tipografías gratuitas
Smashingmagazine.com: 30 nuevas tipografías de alta calidad gratis
Tutorgrafico.com: Mas de 1000 fuentes para descargar totalmente gratis
25horas.com: 15 nuevas tipografías gratis
Frogx3.com: 50 fuentes nuevas gratis para diseños profesionales
GDJ: Blog con muchísimas tipografias nuevas
StimulEye Fonts: 40 tipografías con diseños varios
The Subflux experiment: 26 exclusivas fuentes para descargar
Floodfonts: 11 fuentes excelentes
Nerfect: 30 tipografías con diseños varios
Misprinted type: 19 fuentes gratuitas de estilo grunge
Fonthead Design: 9 tipografías gratuitas
Astramat: 15 fuentes
TarmSaft Fonts: Más de 100 tipografías
Robot Johnny: 21 fuentes para uso personal
Font Bros: 7 gratuitas tipografías para bajar
SMeltery: Excelentes 30 fuentes

Combinar tipografías

Buscando tipos para un diseño encontré un articulo muy interesante sobre 19 combinaciones tipográficas. La de veces que se duda al empezar un trabajo, verdad? En este articulo dan unas soluciones y consejos muy buenos que hacen que tus ideas se aclaren.

En un diseño o página web, una buena elección tipográfica es una cuestión muy importane, por no decir que es vital.

Las tipografías hablan por si solas y debemos tratar este tema con cuidado ya que, si elegimos mal, le dará valores al diseño que pueden alterar su significado y, en consecuencia, el mensaje que damos dar puede no ser el adecuado. Cada familia tipográfica tiene sus propias características y personalidad, que permiten expresar visualmente diferentes aspectos del diseño.

Una de las reglas de oro de las combinaciones tipográficas es combinar una tipografía serif con una sans serif. Esto suele dar siempre un buen resultado ya que se crea un contraste tipograficamente y visualmente interesante. Cuando las tipos son demasiado similares se crean disonancias y no se consigue un diseño compacto.
Algunas tipografías tienen versión sans y versión serif y suelen formar una perfecta combinación. Normalmente se usa una sans serif para títulos y una serif para texto, o viceversa.

En general, las familias con serifas, funcionan mejor en imprenta y, las de palo seco o sin serifas, dan mejor resultado en monitores y pantallas. El factor más determinante sobre la elección de un tipo de letra base debe ser su legibilidad. Este aspecto del diseño es algo imprescindible ya que si no puede ser leído ya no tiene utilidad.  Es cierto que podemos jugar con el tamaño pero nunca debemos basarnos tan solo en eso, a no ser que estemos hablando de títulos.

Los títulos tienen una mayor flexibilidad en cuanto a fuentes ya que dice mucho del diseño. Con él podemos expresar muchísimos aspectos en función del espíritu del documento y la sensación que nos interese crear. Aunque nunca debemos olvidar que a éste le acompañará un texto o subtítulos que deben ser creados con lo que anteriormente se ha dicho.

Aqui os dejo unas cuantas combinaciones ideales de tipografías que han sido creadas por Bonfx:



Si quereis descargar el documento en PDF tan solo tenéis que entrar en este enlace http://bonfx.com/wp-content/uploads/2009/09/19-top-fonts-in-19-top-combinations-chart.pdf

Las combinaciones son:
  • Helvetica / Garamond
  • Caslon / Univers
  • Frutiger / Minion
  • Futura / Bodoni
  • Garamond / Futura
  • Gill Sans / Caslon
  • Minion / Gill Sans
  • Univers / Caslon
  • Bodoni / Futura
  • Myriad / Minion
  • Avenir / Warnock
  • Caslon / Franklin Gothic
  • FF Din / Baskerville
  • Trade Gothic / Clarendon
  • Baskerville / Univers
  • Akzidenz Grotesk / Garamond
  • Clarendon / Trade Gothic
  • Franklin Gothic / Baskerville
  • Warnock / Univers

(Si os parece interesante, podéis leer el articulo completo aquí: 
http://www.cosassencillas.com/articulos/las-19-mejores-combinaciones-tipograficas)

+70 páginas de templates para Blogger gratis

Al buscar templates o plantillas para Blogger gratis en Google cuesta mucho encontrar algo de calidad. Estas paginas que os dejo a continuación han sido revisadas y seleccionadas dentro de este gran mundo.

Todos los links son a páginas podéis descargar nuevos templates para Blogger totalmente gratis. La verdad es que hay muchos y las opciones para personalizar son bastante extensas.

Bancos de plantillas o templates


Btemplates.com: +6000 templates, podemos buscar por columnas, colores, temas y otros tags.
Deluxetemplates.net: Cantidad de plantillas clasificadas.
Eblogtemplates.com: Plantillas tanto para Blogger como para Wordpress.
Thecutestblogontheblock.com: Templates especiales y diferentes, como su pagina
Allblogtools
Bloggertemplates.info
Bloggertemplatesfree.com
Dreamtemplate.com
Templatesgratis.org
Skinpress.com
Alconhive.com
All-blogspot-templates.blogspot.com
Chicablogger.com
Pyzam.com/bloggertemplates
Ourblogtemplates.com
Mytemplatebox.com
Bloggerblogtemplates.com
Themesblogger.blogspot.com
Freetemplates.org
Freetemplates.blogspot.com
Templates-blogger.com


Recopilatorios personales


Spiceuptourblog.com: 25 de las mejores plantillas del 2012
Webgenio.com: 21 Plantillas para Blogger gratis y de calidad
Web.tursos.com: 30 Excelentes plantillas para Blogger gratis
Stardustxs.com: 100 Plantillas para Blogger (100 Blogger Templates)
Hongkiat.com: 50 (Most) Beautiful Blogger Templates


Espero que os sean de inspiración para empezar a personalizar vuestro blog!

¡Bienvenidos a mi blog!

domingo, 4 de noviembre de 2012


Me llamo Ingrid Moragas y soy diseñadora grafica y desarrolladora web.

Terminé mi carrera de Bellas Artes en la Universidad de Barcelona en 2011 y hace poco he acabado un Máster en Diseño gráfico y Publicaciones web en Eina, Escola d'Art i Disseny de Barcelona.

Desde entonces me he dedicado a hacer trabajos para empresas pequeñas que necesitan una imagen nueva.

Al empezar me di cuenta de que el diseño es algo que nunca se termina de aprender, siempre aparecen nuevas cuestiones y problemas que resolver. Durante este tiempo me han sido de gran ayuda otros blogs o paginas que ofrecen recursos gratuitos para aquellos que no sabemos como llegar a crear eso que tenemos en mente.

Así pues, he decidido reunir todos esos recursos que voy descubriendo en un solo blog para que pueda ser de ayuda a otros diseñadores. También quiero compartir temas de inspiración o artículos sobre temas que creo que os pueden resultar interesantes.

¡Espero que los posts que iré realizando os sean de gran ayuda y os den aire después de tantas horas de trabajo!