Freebiesbug, recursos para diseñadores

freebiesbug

A la hora de desarrollar un nuevo proyecto es importante tener al alcance de la mano todo tipo de recursos que se pueden emplear durante el proceso de creación de un sitio web, tanto para ser usados como para ser fuente de inspiración, para cumplir este doble objetivo existe una página web como Freebiesbug, capaz de albergar gran cantidad de recursos de todo tipo para ayudarnos al diseño tanto de webs como de aplicaciones.

Freebiesbug se trata de un magnífico portal de todo tipo de recursos que engloba la totalidad del desarrollo web, desde diferentes fuentes o cantidad de iconos para nuestros proyectos como plantillas en WordPress u otras plataformas o plugins para mejorar la usabilidad de nuestra web o app.

Además cuenta con bastante mockups para inspirar nuevas ideas de diseño, portfolios de diseñadores, kits de interfaces de un mismo diseño para distintos dispositivos. Vamos, que se trata de una fuente de recursos de gran calidad y una no peor fuente de inspiración para ayudarnos a definir una buena interfaz para nuestros proyectos.

Lo mejor no acaba aquí, si no que además, todo lo que encuentres en su web es totalmente gratuito, sin más. Pinchas en el recursos que más te ha gustado, nos da la información del desarrollador o diseñador que lo ha creado y lo descargas, luego podrás pasarte por la web del creador y darle las gracias o contribuir de alguna otra manera. Además, la mayoría de estos recursos, como es el caso de los iconos especialmente, cuenta con diferentes formatos de descarga.

No sólo para disfrutar del trabajo del otro ha sido pensado este portal, si no que también, si eres desarrollador o diseñador, podrás colaborar en la comunidad y difundir todos tus trabajos para ayudar a darte a conocer y hacerte un nombre en internet.

Pásate y échale un vistazo para encontrar esos iconos o esa plantilla que tanto se te resiste, Freebiesbug.

Publicado el

Octuweb, 22 días aprendiendo

octuweb

Vuelve Octuweb con su mes favorito y nos vuelve a regalar, esta vez, 22 artículos de 22 genios del diseño que comparten su experiencia y sus conocimientos para que aprendamos un poco más sobre diseño web y sobre todo CSS.

Este proyecto, que cumple con la curiosidad de celebrar en el mes de Octubre una vorágine de artículos de expertos diseñadores, repite experiencia después de que el año pasado fuese todo un éxito y pudiésemos disfrutar de relatos de verdaderos expertos en la materia que revelan sus trucos y sus consejos.

Si el año pasado pudimos disfrutar de los artículos de algunos reputados diseñadores, como Martín Iglesias y sus tablas responsives, Jorge Aznar, Alejandro AR, etc. Este año vuelven a traer a gente reputado en esto del CSS como es el caso de Naiara Abaroa, que ya ha tenido su turno con un gran artículo sobre trabajar con CSS en 2015, repite gente como es el caso de Jorge Aznar y otros muchos con los que podremos aprender un poco más sobre diseño web.

Así que ya sabes, Octubre cargado de buenos artículos casi diarios desde Octuweb.


Nueva versión Bootstrap 4

bootstrap

El conocido framework de diseño Bootstrap, creado por los fundadores de Twitter, destinado para la creación de sitios web responsive multi plataforma, ha anunciado la disponibilidad de una nueva versión, la 4, en la que incluye nuevos e interesantes cambios para mantenerlo como la mejor alternativa entre los frameworks de diseño.

Entre algunas de las mejoras o novedades presentes en esta última versión, encontramos las siguientes:

  • Cambio en el preprocesador de CSS de LESS a SASS: Con este cambio la velocidad de compilación mejora y además da un paso hacia el más que implementado SASS.
  • Cambios en el sistema de rejilla: Se añade una nueva etiqueta de clase para mejorar el diseño en pantallas ultra pequeñas. Añadiendo aún más posibilidades a su más que extraordinario sistema de rejilla.
  • Rediseño de la barra de navegación: Incorporando nuevas posibilidades, como la fácil inclusión de imágenes, a modo de icono.
  • Mejoras en el rendimiento: Se han reescrito todo el Javascript.
  • Nuevo componente Cards: Este nuevo componente sustituye a los antiguos paneles y promete ser un nuevo componente más flexible y fácilmente extensible.
  • Otras muchas mejoras, adios a los Glyphicons, cambios en la tipografía, etc..

Estas mejoras siguen haciendo que Bootstrap este en la cima en cuanto a frameworks de diseño se refieren, además su gran comunidad y la buena fama que le preceden, lo convierten de lejos en la mejor opción para simplificar el diseño de tu página web responsive.

Puedes consultar todas las novedades en la página oficial de Bootstrap y su nueva versión 4 alpha.


Recursos para diseñadores web

HTML y CSS

Diseñar una web es una tarea bastante compleja y más si no contamos con recursos suficientes que nos faciliten la tarea con algunos elementos básicos de una web como pueden ser los fondos, los colores o las fuentes.

Algunas webs nos ofrecen soluciones para esos tres elementos básicos a la hora de conseguir una web con un diseño atractivo. También existen bastantes lugares donde nos enseñan a combinar ciertos elementos para lograr diseños realmente buenos y no llegar a resultados horripilantes o simplones.

Por ejemplo, si lo que estas buscando, posiblemente sea lo primero que te hayas planteado, unos colores principales para la web, tienes que partir por saber como combinar colores en la web, para ello un tutorial bastante ilustrativo para combinar colores en tu plantilla y no morir buscando una combinación errónea.

Después de saber como combinar los colores dentro de una página web, lo siguiente es tener algunos colores que nos gusten y que sean atractivos en tus diseños. La siguiente web nos propone bastantes colores, originales todos ellos con sus códigos RGB y hexadecimal, tanto en modo aleatorio como clasificados por escala de colores.

También puedes optar por el uso de texturas para los fondos principales de tu web, si es así, deberías conocer algunos sitios donde poder disfrutar de estos recursos tan elegantes si se combinan bien. Entre ellos puedes intentar hacerlos tu mismo, con este generador de texturas, o si lo prefieres, puedes elegir algunas texturas ya creadas en este pequeño directorio de texturas.

Por último, y no menos importante para conseguir un buen diseño web, es la elección de una fuente idónea para la página. Para ello puedes visitar y elegir alguna de los tipos de letra disponibles que tenemos en este directorio de fuentes.

Si además quieres darle toques diferentes incorporando algunos iconos temáticos con diseños simples pero elegantes, lo mejor es visitar este directorio de iconos que posee una gran cantidad de ellos, a precios competitivos y con una amplia colección. Podrás disfrutar de colecciones si buscan alguna temática en especial u obtener iconos determinados.


Media Queries

resposive

Seguro que mucha gente se acuerda de lo tedioso de programar y diseñar una web para que se viese correctamente tanto en móvil como en las pantallas convencionales de los ordenadores, el tener que programar dos hojas de estilos, tirar de javascript para conseguir que nos reconociese la pantalla desde la que navegábamos y mil historias más.

Gracias a dios todo evoluciona y el diseño web no podía ser de otra manera. En las últimas versiones de CSS, concretamente con CSS3, nos encontramos con las media queries que se trata de expresiones para restringir las características de los elementos en un ancho, alto o color determinado. Podemos lograr con esto que algunos elementos de la página web, véase los divs, imágenes o cabeceras tengan diferentes propiedades en función a un tamaño de pantalla o a un color.

Media Queries y los tamaños de la pantalla

Posiblemente el ejemplo más interesante y con el que más rendimiento podemos encontrar al usar las media queries sean el cambio de resolución o tamaño de pantalla y la visualización de algunos elementos. Además de conseguir resultados rápidos, las media queries resultan muy sencillas de usar, consiguiendo un diseño resposive en pocos pasos.

Si nos ponemos con los ejemplos podemos imaginar un div que queremos que desaparezca cuando se navega desde un teléfono móvil, ese div lo tratamos de manera normal en el principio de nuestra declaración en CSS, tan sólo debemos pensar en la medida a partir de la cual queremos hacerle desaparecer, por ejemplo 480 pixels, entonces tendremos que incluir lo siguiente en nuestro CSS:

@media screen and (max-width: 480px) {
.contenedor{
display: none;
}
}

Con este pequeño fragmento podremos hacer desaparecer el div contenedor cuando el tamaño de la pantalla desde la que navegamos sea menor a 480 pixels de ancho. Con esto se abre un abanico de posibilidades como por ejemplo, hacer que un elemento de la web se coloque en diferentes posiciones según se vaya reduciendo el ancho de la pantalla, que se sobreponga encima de otros elementos, con el z-index, pero también podremos jugar con los colores de la pantalla o con el alto de la pantalla, tan sólo tendremos que cambiar la propiedad max-width por max-height.

Publicado el