Gilberto Ramos

Muchas veces encontramos la belleza en la simplicidad. A continuación una lista de packs de iconos minimalistas para utilizarlos en tu próximo diseño y ¡Gratis!

1. gcons

Estos iconos son de usos múltiples y pueden caber en una serie de escenarios como los temas de interfaz de usuario, diagramas técnicos, diseño web, desarrollo de prototipos, etc

2. Minimalistica Icon Set

Simple y en 2 tonos en formato PNG: 16×16, 24×24, 32×32, 48×48, 64×64, 128×128

3. Goo-EE Icon Set

En 10 opciones de colores, varios tamaños que van desde 8x8 hasta 32x32

4. Munich

Todos los iconos están orientados hacia el uso práctico y el comercio. Algunos son de carácter general (por ejemplo, dejar comentarios, usuarios, editar), algunos específicos (por ejemplo, independiente, donar, cestos).

5. Wireframe Toolbar Icons

Estos iconos pueden ser utilizados para wireframes y la creación de maquetas de software, sitios web y barras de herramientas de aplicaciones de software y menús como Android, Windows Mobile, Palm, iPhone y aplicaciones IPAD.

6. Dormunt

Dormunt esta compuesto por una línea gruesa, pero cada línea tiene una brecha. Hermoso!

7. Iconic

Iconic es un hermoso conjunto que consiste de 120 iconos en formato raster y vectorial. También viene en 14 colores diferentes para satisfacer las necesidades que los diseñadores.

8. Mono Icons

Los iconos son sencillos, en negrita y muy bien diseñado y encajaría bien en la mayoría de las aplicaciones, tal vez mejor, aunque sea dentro de una aplicación de software de interfaz de usuario o en formato blog. La facilidad con que se pueden personalizar y coloreada convierten en una opción atractiva para tu próximo proyecto.

9. Pitoico

Los iconos pueden ser incorporados en tus aplicaciones de software en línea, medios impresos, móviles. El autor sugiere incluso la utilización de los signos en el mundo real alrededor tu calle, la escuela, localidad o ciudad incluso.

10. Token

Token incluye 128 diseños de iconos únicos, disponibles como una agrupación ICO de 16 × 16, 32 × 32 256 × 256 píxeles iconos, o como un archivo PNG de 128 × 128 píxeles. Cada icono tiene dos variantes claras y oscuras, viene junto con un PSD que incluye los estilos de capa para cada resolución.

No sabría con cual quedarme como favorito la verdad. Y según ustedes ¿cuál o cuáles son los mejores?

El objetivo aquí es una imagen de fondo en un sitio web que cubre la ventana del navegador en todo momento. Vamos a poner algunos detalles específicos sobre él:

• Llena toda la página con la imagen, sin espacios en blanco
• Escalas de imagen según sea necesario
• Mantiene las proporciones de la imagen (relación de aspecto)
• La imagen está centrada en la página
• No causa barras de desplazamiento
• Compatible entre navegadores como sea posible
• No son unas artimañas de lujo como Flash

Impresionante, fácil y progresiva a la manera CSS3

Podemos hacer esto simplemente a través de CSS gracias a la propiedad background-size ahora en CSS3. Vamos a utilizar el elemento HTML (mejor que el body ya que tiene siempre al menos la altura de la ventana del navegador). Creamos un fondo fijo y centrado en él, y luego ajustamos su tamaño con background-size establecido en la palabra clave cubierta.

html {
        background: url(img/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Funciona en:

• Safari 3 +
• Chrome sea-cual-sea +
• IE 9 +
• Opera 10 + (Opera 9.5 compatible background- size pero no en las palabras clave)
• Firefox 3.6 + (Firefox 4 soporta la versión prefijada non-vendor)

Solo CSS: Técnica 1

Aquí se utiliza un elemento <img> en línea (inline), que será capaz de cambiar el tamaño en cualquier navegador. Se plantea un mínimo de altura que mantiene rellenando la ventana del navegador en posición vertical, y establecer un ancho de 100%, lo que mantiene el llenado horizontal. También establece un mínimo de ancho de la anchura de la imagen para que la imagen no se haga más pequeña de lo que realmente es.

La pisca inteligente es usar una consulta de medios de comunicación (media query) para comprobar si la ventana del navegador es más pequeña que la imagen, y con un combinado en el margen izquierdo negativo y de porcentaje de izquierda que le mantenga centrada independientemente.

Es decir, en CSS sería así:

img.bg {
        /* Setea reglas para rellenar el fondo */
        min-height: 100%;
        min-width: 1024px;

        /* Setea una escala proporcional */
        width: 100%;
        height: auto;

        /* Setea el posicionamiento */
        position: fixed;
        top: 0;
        left: 0;
}

/* Esta parte tiene que ser específica de la imagen que se utilice */
@media screen and (max-width: 1024px) {
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

Funciona en:

• Cualquier versión de los navegadores buenos: Safari / Chrome / Opera / Firefox
• IE 6: Borked - pero probablemente corregible si se utiliza algún tipo de posicionamiento fijo
• IE 7.8: Mayormente funciona, no se centra en los tamaños pequeños, pero llena bien la pantalla
• IE 9: Funciona

Solo CSS: Técnica 2

Una forma bastante simple de manejar esto es poner una imagen en línea en la página, de posición fija a la parte superior izquierda, y darle un min-width y min-height de 100%, preservando su relación de aspecto.

HTML:

CSS:

#bg {
        position:fixed;
        top:0;
        left:0; 

        /* Conservar la relación de aspecto */
        min-width:100%;
        min-height:100%;
}

Sin embargo, esto no centra la imagen aún… Por lo tanto, podemos fijar que envolviendo la imagen en un div. A ese div lo haremos el doble de grande de la ventana del navegador. Luego la imagen se coloca, aún conserva su relación de aspecto y que cubre la ventana visible del explorador, y el punto muerto de eso.

HTML:

CSS:

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Funciona en:

• Safari / Chrome / Firefox (no probé, pero las últimas versiones están muy bien) 
• IE 8 + 
• Opera (cualquier versión) y el IE fallan de la misma manera (mal colocado, no sé por qué)

EXTRA: el método con jQuery

Esta idea se convierte en mucho más fácil (desde una perspectiva CSS) si sabemos si la relación de aspecto de la imagen (<img> en línea que va a utilizar como fondo) es más grande o más pequeña que la relación de aspecto actual de la ventana del navegador. Si es inferior, entonces se puede establecer sólo el ancho a 100% en la imagen y sé que va a llenar la altura y anchura. Si es mayor, se puede establecer sólo la altura a 100% y sé que va a llenar tanto el alto y ancho.

Tenemos acceso a esta información a través de JavaScript. Como de costumbre por aquí, me gusta apoyarme en jQuery.

HTML:

CSS:

#bg { position: fixed; top: 0; left: 0; }
.fondo-ancho { width: 100%; }
.fondo-alto { height: 100%; }

JavaScript:

$(window).load(function() {    

        var laVentana        = $(window),
            $fondo           = $("#bg"),
            aspectoRelacion  = $fondo.width() / $fondo.height();

        function redimensionarFondo() {

                if ( (laVentana.width() / laVentana.height()) < aspectoRelacion ) {
                    $fondo
                        .removeClass()
                        .addClass('fondo-alto');
                } else {
                    $fondo
                        .removeClass()
                        .addClass('fondo-ancho');
                }

        }

        laVentana.resize(function() {
                redimensionarFondo();
        }).trigger("resize");

});

Funciona en:

• IE7 + (probablemente podría funcionar en Internet Explorer 6 con una posición fija)
• Prácticamente todos los demás

Bueno, espero les sirva de alguna forma y si tienen dudas u otra técnica que quieren compartir dejen sus comentarios!

Al comenzar en su próximo gran proyecto web, probablemente se encuentre tan emocionado como yo - uno mezcla en su cabeza el diseño, la paleta de colores, y la navegación hasta que no se puede pensar con claridad. He estado allí antes y sé que no siempre es tan divertido como antes al recibir el proyecto crece un estusiasmo. Hay maneras de aliviar esta tensión y el estrés que su cliente puede sentir, por tomarse el tiempo para ahondar primero en la organización de la página web, sin estos elementos extraños que más tarde se llevará a la mayor parte del tiempo de uno creando.

Wireframe para una Startup, por Stephanie Hamilton Design.

Aquí es donde los wireframes llegan. Son una simple plantilla de líneas, formas, y etiquetas para definir el diseño de un sitio web y son bastante fáciles de crear. Una gran cantidad de industrias deben disponer de maquetas y prototipos antes de ir a la producción final, así que un sitio web a gran escala no debería ser diferente. Los wireframes son creados para ayudar a establecer la jerarquía entre los contenidos y ayudar a una organización alcanzar sus objetivos de negocio en línea.

Y por cierto, ¿por qué son tan importantes?

• Establecen la jerarquía.
• Le dan al cliente una visión general a principios del diseño del sitio.
• Permiten a usted y su cliente centrarse en la disposición sin la distracción de colores, tipografía y otros elementos de diseño.
• Fomentan la comunicación abierta con el programador, quien consigue una imagen clara de lo que necesitan para codificar.
• Son mucho más fáciles de ajustar, ya que sólo tiene que mover los dibujos de líneas simples en lugar de elementos complejos para conseguir el diseño deseado.
• Son un punto de partida y se pueden adaptar a muchas secciones de la web.
• Son similares a los planos. Al igual que un edificio, una página web debe tener una base sólida antes de crear o no va a durar.

Los wireframes previenen:

• Tener que volver atrás y rediseñar un diseño complejo porque no se invirtió el tiempo suficiente en la fase de planificación.
• Un rediseño del sitio caro debido a la interfaz de usuario pobre.
• La frustración del usuario.

Un wireframe para la Embrace Pet Community, por Jesse Bennett-Chamberlain de 31Three.

Y ¿qué debo incluir?

Los wireframes son creados con la intención de mostrar los elementos importantes de un sitio web. Utilice formas simples y la etiqueta en la creación que su diseño. Por lo general, debe incluir estos elementos en la creación de que su wireframe:

• Logotipo, eslogan
• Navegación primaria (acerca de, contacto, etc.)
• Navegación secundaria (categorías, las páginas de contenido)
• Barra de búsqueda, registro en formulario, etc.
• Áreas de características (blog, acerca de, Twitter)

¿Cómo son hacen?

Las herramientas que se utilizan para crear los wireframes varían y muchas veces se reducen a las preferencias personales. Pruebe una variedad para ver qué método es más efectivo para usted.

Dibujo a mano

Dibujar a mano en papel es un gran punto de partida, ya que le permite centrarse libremente y organizar el contenido. También son útiles para uno-a-uno reuniones con clientes.

Software de Gráficos

El programa estándar de la industria para la creación de los wireframes es Fireworks. Muchos diseñadores se sienten cómodos trabajando en una variedad de programas como Adobe Photoshop e Illustrator, también, y puede alcanzar un wireframe presentable con ellos.

Software de prototipados web

Estas herramientas fueron creadas específicamente para crearlas, y su fácil manejo de capacidades de creación de prototipos hacen que sean una opción popular entre muchos.

Diagrama de flujo o software de mapas mentales (como Visio.)

Estas opciones de software cuentan con elementos pre-empaquetados que permiten crear fácilmente representaciones organigrama de su wireframe.

Aplicaciones para crear wireframes digitalmente

Mientras que los diseñadores web pueden ser propensos a la creación de los wireframes a través de lápiz y papel o Photoshop, también hay un gran cantidad de sitios web que le permiten crear prototipos, mapas de sitio, o los wireframes digital que obtiene una corrección de su equipo. Éstos son algunos de los más populares de estos programas:

Balsamiq

Fácilmente ajuste sus dibujos utilizando Balsamiq. Una vez que usted tiene en mente un diseño, puede fácilmente modificar en tiempo real en el transcurso de una reunión.

iPlotz

iPlotz hace que sea fácil crear un wireframe para el prototipado de un sitio web y fácilmente hablar de sus creaciones con los demás. Basta con invitar a otros a los comentarios sobre que su diseño para optimizar su flujo de trabajo.

DUB

DENIM es un instrumento informal para el las primeras etapas de un sitio web y diseño de interfaz de usuario. DENIM apoya dibujo de entrada, permite el diseño en diferentes niveles de refinamiento, y unifica los niveles a través del zoom.

¿Algunas directrices?

Ahora que usted entiende qué necesita ser incluido y tiene las herramientas necesarias para producir su wireframe, es el momento de bajar a lo esencial. He aquí algunos consejos claves a tener en cuenta:

Manténgalo en escala de grises

Recuerde que debe trabajar en escala de grises, ya que se centrará su atención en el diseño y menos en el diseño. Si el cliente le ha dado imágenes a todo color, como un logotipo, convertirlas a escala de grises también. Tonos de gris se puede utilizar para distinguir entre ciertas categorías y elementos.

Simplicidad

Evite el contacto sobre la cabeza y concentrarse en el diseño en esta etapa. Recuerde que la meta es comunicar rápidamente la intención de un sitio web al cliente sin el ojo añadido dulces que vendrá después. Esto se logra a través de líneas simples.

Centrarse en los objetivos de la empresa

¿Sabe usted lo que su cliente quiere que sus visitantes saquen de este sitio web? Comprender la intención del usuario hace la llamada a la acción mucho más evidente.

Asegurar el contenido de antemano

Proteger el contenido que aparecerá en la página es esencial para evitar las revisiones a tiempo más adelante. Como mínimo, el cliente debe proveerle con logotipos, anuncios, reportajes, secciones de navegación, así como un encabezado y pie de página. Teniendo estos elementos en su lugar se reduce el riesgo de confusión en la línea de las expectativas poco claras.

¿Qué debo evitar?

Para lograr el wireframe más eficaz, es importante evitar estos elementos.

Desorden

Trate diseñar su wireframe para que el cliente (y programador) pueda comprender fácilmente el diseño y lo que puede conseguir echando un vistazo en él durante 10 segundos o menos.

Demasiados detalles

La intención suya en la creación de un wireframe debe ser proporcionar un vista de pájaro de lo que un sitio web está destinado ser similar. Quedarse atascado en los detalles, tales como el ancho y la altura sólo añaden confusión.

Demasiado color y diseño

Recuerde que usted va a llegar a las cosas divertidas, como el color y los gráficos más tarde después de establecer una base sólida que usted y su cliente puede estar de acuerdo.

Recursos para el wireframes

Para obtener más información sobre los wireframes y un mirada más en profundidad en lo que ellos pueden lograr, echa un vistazo a Wireframe Magazine.

La creación de un sitio web puede ser una tarea desalentadora. El no poder planificar su próxima gran página web puede conducir a mucha frustración innecesaria y la posibilidad de incumplimiento de plazos. Aunque los wireframes no suelen ser la idea más interesante que viene a la mente cuando piensas en lo que es un sitio web, es un pequeño paso muy necesario para llegar allí!