Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

Mostrando las entradas con la etiqueta diseño. Mostrar todas las entradas
Mostrando las entradas con la etiqueta diseño. Mostrar todas las entradas

viernes, 27 de diciembre de 2013

Como crear logotipos con logotipogratis.com

Arribando al terreno de la discusión, estoy a favor de los diseños efectuados por profesionales; en especial atención si de logotipos y como se diseñan vamos a discutir. Pero esta aplicación Web ayuda—muy fácilmente, por cierto—a jugar con formas básicas, tipografías, orientaciones y colores.

Como crear logotipos con logotipogratis.com

Esta aplicación se distingue de otras que he visto, no contiene plantillas ni presets. Es la hoja de papel en blanco y las ideas y conceptos que el usuario quiera hacer jugar.

Se trata de una aplicación Web sin otro requerimiento que un navegador moderno y actualizado; así que cualquier usuario que tenga presente esto no tendrá limitación alguna.

Como dije antes, están disponibles varias tipografías y muchas formas básicas. Cada objeto se inserta dentro de una capa individual que es posible personalizar: tamaño, color, orientación e incluso el concepto individual de adelante y atrás.

Se han cuidado aspectos básicos de usabilidad que permiten efectuar secuencias de SHIFT y click para obtener múltiples selecciones; así también como múltiple selección mediante el mouse.

Insisto, no es una herramienta para poner incómodos a los diseñadores ni mucho menos. Pero sí una aplicación para obtener un logotipo básico y gratuito donde el usuario, sin mucho esfuerzo, puede lograr una identidad gráfica para su blog, club de barrio o inclusive una pequeña asociación.

Sitio Web | logotipogratis.com
Share:

domingo, 24 de marzo de 2013

Como medir cualquier elemento en una página Web

PiliApp es una aplicación Web que te permite tomar medidas de cualquier elemento en pantalla. Su uso es simple, sencillo y efectivo. Sin descargas ni instalaciones, sin add-ons ni extensiones; sólo hay que ingresar la URL que contiene el o los elementos que deseamos medir y la aplicación se encarga de cargar la página en un iframe.

Como medir cualquier elemento en una página Web

Luego, sólo es necesario redimensionar el área transparente que se presenta en pantalla para obtener—por otro lado—la medida en pixels del alto y el ancho de la misma. Esta área se puede activar o desactivar en cualquier momento; como así también moverla y redimensionarla.

Es una herramienta útil y de uso interesante. No requiere de nada, ni siquiera ver el código fuente cuando intentamos ver o averiguar algo sobre las dimensiones de tal o cual elemento; sólo es necesario (como todo) tenerla presente o bien guardada en favoritos ;-)

Sitio Web | PiliApp
Share:

martes, 19 de marzo de 2013

hhhhold | para insertar imágenes en tiempo de diseño

Contar con las imágenes adecuadas, en tiempo de diseño, no siempre es tarea fácil. La disponibilidad de las imágenes adecuadas, con las dimensiones precisa; requieren de un paso extra: redimensionar las mismas.

hhhhold es un servicio Web que provee rápido acceso y facilidad para insertar imágenes. Cuenta con la disponibilidad del servio de ffffound y permite utilizar parámetros para hacer más precisos nuestros requerimientos.

hhhhold | para insertar imágenes en tiempo de diseño

De esta forma, entre los parámetros disponibles se caracterizan algunos de los siguientes:
  • /200 — inserta un imagen cuadrada de 200px de lado
  • /500x200 — inserta una imagen de 500px de ancho y 200px de alto
  • /400-550 — inserta una imagen con ancho y alto variables entre 400 y 500px
  • /d — inserta una imagen oscura (la contrapartida es el parámetro /b)
  • /jpg — explícitamente inserta una imagen JPG

Sitio Web | hhhhold
Share:

domingo, 14 de octubre de 2012

Moqups | una solución para maquetar interfaces

Moqups es una aplicación basada en HTML5 que te permite de manera sencilla y efectiva llevar a cabo la planificación de casi cualquier interface.

Moqups | una solución para maquetar interfaces

Moqups basa su funcionabilidad en elegir, arrastrar, soltar, doble clickear y configurar.

Cada elemento se quedará ahí y nos permitirá seguir avanzando en la maquetación de nuestras ideas.

Su mayor fortaleza es la cantidad y variedad de presets o stencils, como se los llama, que nos permiten perpetrar la idea. La maqueta puede exportarse en cualquier momento; sea en formato PNG o bien en PDF. Para una mejor experiencia es beneficioso trabajar detrás de una cuenta de usuario; lo cual se tramita de forma rápida y gratuita. Lo cual incluye trabajar con gráficos propios.


Sitio Web | Moqups
Vía | Noupe
Share:

miércoles, 18 de julio de 2012

+600 íconos gratis en iconmonstr

iconmonstr es un repositorio gratuito de íconos en constante actualización. A la fecha, el sitio Web ofrece poco más de 600 íconos gratis.

+600 íconos gratis en iconmonstr

Los íconos en iconmonstr pueden descargarse en formato PNG o bien en SVG

La mayoría de estos íconos están inspirados en el uso de aplicaciones Web.

Sitio Web | iconmonstr
Licencia | Creative Commons Attribution 3.0 Unported License
Vía | Web Resources Depot

Share:

miércoles, 27 de junio de 2012

Como editar en línea botones de navegación

Da Button Factory es una buena aplicación Web que de forma rápida y sencilla permite crear botones para ser usados en diseño Web.

El sitio Web cuenta con algunos ejemplos interesantes a partir del cual se pueden hacer modificaciones. Los aspectos básicos como fuentes y colores pueden ser rápidamente modificados y luego descargar el botón en formato PNG

Como editar en línea botones de navegación

Un aspecto interesante es que—además—es posible descargar el botón en formato CSS

En mi ejemplo, unas líneas de prueba

a.button {
   display: -moz-inline-stack;
   display: inline-block;
   width: 174px;
   height: 39px;
   background: url("http://dabuttonfactory.com/b.png?t=Lorem%20Ipsum&f=Zenhei&ts=24&tc=ffffff00&tshs=2&tshc=22222200&it=png&c=10&bgt=gradient&bgc=47c&ebgc=238&be=on&hp=20&vp=11") no-repeat;
   line-height: 39px;
   vertical-align: text-middle;
   text-align: center;
   color: #ffffff;
   font-family: Zenhei;
   font-size: 24px;
   font-weight: normal;
   font-style: normal;
   text-shadow: #222222 2px 2px 0;
}
a.button > span {
   display: -moz-inline-block;
}


Sitio Web | Da Button Factory
Share:

miércoles, 25 de enero de 2012

99 Lime - HTML QuickStart

HTML KickStart es un framework; un conjunto formado por fragmentos de HTML5, CSS y archivos jQuery.

99 Lime - HTML QuickStart

Este framework contiene elementos de diseño que le dan al Webmaster una buena ventaja inicial al momento de dar inicio a un nuevo proyecto Web.


El tagline del producto, es más que elocuente: "Si sabés tipear HTML y editar CSS, esto es para vos". El frameworks es sencillo de utilizar; contiene layouts, slideshows, menúes, grillas (muy flexibles), trabaja con contenedores para las imágenes (aka image placeholders), y ofrece botones, pestañas y un largo, largo etcétera.

Si querés ahorrarte recursos a la hora de trabajar en tiempo de diseño; podés descargarte gratis este valioso framework.

Sitio Web | HTML KickStart
Vía | Los marcadores de Delicious de Juaniquillo (Gracias Víctor!)
Share:

miércoles, 5 de octubre de 2011

Kit de interface gratis

Todos los días, es posible descargar desde 365psd un archivo PSD en forma gratuita.

365psd

En esta ocación 365psd nos permite descargar un completo kit de interface

Kit de interface gratis

Sitio Web | 365psd

Share:

martes, 27 de septiembre de 2011

Samuel L Ipsum una alternativa a Lorem Ipsum

Samuel L Ipsum una alternativa a Lorem Ipsum

Samuel L Ipsum (aka slipsum) es un generado de texto de fantasía—como
el conocido
Lorem Ipsum—pero bastante peculiar por cierto. Ya que introduce, en inglés, una buena y exagerada cuota de lenguaje vulgar (niños: no utilicen este generador de texto para la presentación de diseños preliminares ¡je je!)

I gotta piss

Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.

Es posible solicitarle a esta aplicación Web la cantidad de párrafos requeridos. Como así también, el uso del encabezado (h1, h2, etc.) a ser utilizado.

Sitio Web | Samuel L Ipsum

Share:

sábado, 5 de marzo de 2011

IE6 es más popular de lo que creés

IE6 es más popular de lo que creés

Microsoft lanzó Internet Explorer 6 poco más de 10 años atrás. Prácticamente, en el mismo momento histórico que lanzó—también—Windows XP.

Mucho ha sido "criticado" en detrimento de Internet Explorer 6; en especial atención a lo que mucho que se ha negado—siempre—a seguir los estándares. Y es el navegador "odiado" por diseñadores y maquetadores, en fin...

Un reciente estudio de Net Applications confirma que:
  • una tercera parte de China permanece utilizando IE6
  • en Corea del Sur, cerca del 25% continúa utilizando este navegador y
  • a nivel mundial, IE6 tiene una cuota del 12%
Muchos diseñadores, han tomado como práctica cotidiana—de un tiempo a esta parte—el uso de scripts del tipo The Internet Explorer 6 Countdown o Browser Detection.

Vía | Digital Inspiration
Share:

sábado, 19 de febrero de 2011

Diseño | descargar cajas de búsqueda

Diseño | descargar cajas de búsqueda

En Design 3 edge han publicado un pack de cajas de búsquedas en formato PSD el cual—mediante Photoshop—puede ser modificado y adaptado, inclusive los colores.

Las fuentes utilizadas son Calibri y Arial y el archivo ZIP contiene:
  • archivo PSD en capas y editable
  • archivo JPG que oficia para la visualización del contenido

#LazyDesigners

Sitio Web | Design 3 edge
Share:

sábado, 23 de octubre de 2010

Como comprobar un sitio Web en Safari bajo Mac

webdevlab.com  ha lanzado, recientemente, un servicio (el cual es gratuito) que permite comprobar a cualquier webmaster como se renderiza el diseño del sitio Web bajo Apple Safari.

Como comprobar un sitio Web en Safari bajo Mac

Sólo es necesario completar en la consulta, la URL del sitio Web que nos ocupa.

Sitio Web | How does your website look on Apple Safari ?
Share:

viernes, 22 de octubre de 2010

Recomendaciones para diseñar aplicaciones Web para móviles | W3C

Recomendaciones para diseñar aplicaciones Web para móviles | W3C

El grupo de trabajo de Buenas Prácticas de Diseño Web para Móviles, acaba de publicar una nueva versión que califica de recomendación sobre Buenas Prácticas para Desarrollar Web para Móviles.
El objetivo de este documento es ayudar al desarrollo de aplicaciones Web para dispositivos móviles. Recoger las prácticas de ingeniería más relevantes, promoviendo aquellas que permiten una mejor experiencia al usuario y alertar contra aquellas que se consideran perjudiciales.

Entrada relacionada | W3C buenas prácticas para diseñar aplicaciones Web para móviles
Share:

jueves, 21 de octubre de 2010

Como enviar una página Web por mail

Como enviar una página Web por mail

Pocas frustraciones en diseño Web son comparadas a:
  • lidiar con navegadores que no siguen los estándares
  • enviar un newsletter por correo
Atentos a lo segundo va este post. Premailer es una utilidad que toma el contenido desde una URL y genera todo el CSS inline necesario para hacerle las cosas más sencillas a los clientes de correo. Asimismo, convierte cualquier URL relativa en absoluta.

El resultado es una versión HTML para pegar en el cuerpo de cualquier mensaje y otra versión en texto plano.

De esta manera, se obtiene—además—un listado que contiene los alertas HTML y CSS en línea con las recomendaciones de Email Standards Project

Sitio Web |  Premailer
Share:

Null | + 1 fuente gratis en Font Fabric

Null | + 1 fuente gratis en Font Fabric

NULL es una fuente gratuita que se puede descargar desde Font Fabric, la cual tiene un diseño que puede aplicarse fácilmente a diseño Web, impresiones, motion gráfics, inclusive para estampados de prendas o posters y tal vez logos

Descargar fuente gratis | NULL Free Font
Formato | Opentype (aka .otf)
Set | 162 caracteres, no incluye caracteres extendidos (acentos, eñes)
Vía | Paola Murias Gracias Pao, te leí en Facebook :)
Share:

viernes, 15 de octubre de 2010

Diseño Interactivo para todos: usable y accesible

Diseño Interactivo

Este evento: Diseño Interactivo para todos: usable y accesible, constituye el puntapié inicial del Movimiento de Diseño Inclusivo.

Esta actividad arancelada (1) se desarrollará en:
   Universidad Tecnológica Nacional – Medrano 951
   Ciudad Autónoma de Buenos Aires
   Jueves 28 de octubre de 14:00 a 21:00 hs.
Programa del evento Diseño Interactivo para todos: usable y accesible

Aquellas presentaciones que se lleven a cabo las 14:45 y las 18:00 se se distribuirán en 3 salas distintas; por lo que los asistentes deberán optar a cual concurrir:
  • Técnicas de Usabilidad
  • Accesibilidad Web
  • Diseño Centrado en el Usuario

De todas maneras, está disponible el Programación del Evento

Queremos que el diseño haga usable y accesible para todas las personas cada producto o servicio interactivo, sin importar el nivel de alfabetización digital y las capacidades físicas, sensoriales, e intelectuales que tengan.

Sitio Web | Movimiento de Diseño Inclusivo
Vía Twitter, gracias a Verónica Traynor
(1) Arancel: $30 = U$S 7.50 (reembolsable)
Share:

lunes, 11 de octubre de 2010

El 80% de los casos de discapacidad visual son evitables

El próximo jueves, 14 de octubre, se celebrará el Día Mundial de la Visión, una fecha que la Organización Mundial de la Salud (OMS) aprovecha para recordar que el 80% de los casos de ceguera existentes actualmente en el planeta son evitables.

El Día Mundial de la Visión se celebra en el marco de la campaña global "Visión 2020", promovida por la OMS y la Agencia Internacional para la Prevención de la Ceguera, junto con una coalición de organizaciones internacionales.

El objetivo de este día es centrar la atención en la ceguera, la discapacidad visual y la rehabilitación de las personas con problemas visuales graves y este año se celebra bajo el lema "Imagínate si juntos pudiéramos eliminar la ceguera evitable".

Según la OMS, en algunas partes del mundo todavía hay que lograr que hombres y mujeres reciban servicios de atención ocular de manera igualitaria.

Vía | Servicio de Información sobre Discapacidad
Share:

The Square Grid | un framework para CSS

The Square Grid | un framework para CSS

The Square Grid es un framework para diseñadores y desarrolladores basado en 35 columnas de igual ancho. De esta forma, las posibilidades de trabajo son bien amplias e intentan satisfacer la mayoría de las necesidades que puedan presentarse en tiempo de diseño.

Incluye 3 casos donde puede trabajarse con diseños basados en la proporción aúrea (aka golden ratio).

Sitio Web | The Square Grid
Share:

jueves, 30 de septiembre de 2010

+10 fuentes gratis para titulares


Para cualquier tipo de publicación, el título del artículo o el post—a veces—no es tan llamativo como la tipografía misma a ser utilizada.

Museo Slab

Museo Slab - +10 fuentes gratis para titulares

Franchise

Franchise - +10 fuentes gratis para titulares

ChunkFive

ChunkFive - +10 fuentes gratis para titulares

League Gothic

League Gothic - +10 fuentes gratis para titulares

Nevis

Nevis - +10 fuentes gratis para titulares

Sertig

Sertig - +10 fuentes gratis para titulares

Academic



Code Bold

Code Bold - +10 fuentes gratis para titulares

Mido

Mido - +10 fuentes gratis para titulares

Telegrafico

Telegrafico - +10 fuentes gratis para titulares

Vía | TheRoxor
Share:

viernes, 10 de septiembre de 2010

Como hacer un menú con CSS3 Menu

Como hacer un menú con  CSS3 Menu

CSS3 Menu es un programa gratuito que permite fácilmente gestionar menúes de navegación basados en listas desordenadas mediante CSS3; de esta forma, las animaciones prescinden de cualquier tipo de script, sea Javascript o jQuery.

Estos menúes son 100% indexables por los motores de búsqueda (aka SEO friendly) y este tipo de navegación—en CSS3—es soportado por todos los navegadores modernos. Al respecto, IE6 está fuera de este tipo de segmentación.

CSS3 Menu

Sitio Web | CSS3 Menu
—disponible la descarga tanto para Mac como para Windows
Share:

Publicidad

Estadísticas