Colors on the Web: ayuda para diseñadores

ByLuis

colorsontheweb.pngVisitando una entrada de Vecindad Gráfica, he encontrado una página que nos puede ser muy útil a los que diseñamos sin llegar a ser grandes diseñadores. Se trata de Colors on the Web, una página centrada en los colores y el diseño web. En ella encontraremos información sobre los colores (colores primarios, saturación, …), el significado de los colores (por ahora solo el rojo), el uso de colores en la web, combinación de colores (rueda de colores, colores análogos, …) y tres utilidades bastante interesantes: un selector de colores similar a las que ya existen, una rueda de color que selecciona aleatoriamente colores y nos muestra sus resultados en un diseño y una colección de esquemas organizada por categorías.
Colors on the Web
Vía / Vecindad Gráfica

Similar Posts

Optimiza tus imágenes con PngOptimizer

ByLuis

Si te preocupan cosas como el ancho de banda, el espacio en el servidor o los tiempos de descarga, **PngOptimizer** te enamorará.
Se trata de un software gratuito —solo Windows— que nos permite reducir el tamaño de las imágenes para su uso en la web. Impresiona por el tamaño de la descarga (solo 163 KB) y su facilidad de uso: para optimizar una imagen basta con arrastrarla desde el explorador de archivos hasta la ventana de la aplicación.
Y por el mismo precio —cero euros—, incluye una versión para línea de comandos que te resultará muy útil en procesos por lotes.
Optimicemos, amiguete: PngOptimizer.

Nuevo diseño

ByLuis

Lo mio no es el diseño, por eso mismo no me acababa de convencer el diseño anterior, supongo que dentro de unos meses me pasará lo mismo con el disño actual.

Mientras tanto, espero que no os desagrade mucho lo que he hecho, de todas formas, la mayoría de vosotros me visitáis por feed, así que no notaréis mucha diferencia.

Toda crítica es bienvenida, otra cosa es que le haga caso, me da una pereza enorme volver a tocar el css.

Consejos para el diseño de tu blog

ByLuis

En BlogMundi nos ofrecen dos interesantes artículos que nos ayudarán en el diseño de nuestro blog. En un primer artículo nos comentan que tipo de letra usar, ya que no debería ser una elección a la ligera, ya que se deben basar en tres características:

Que se ajusten al carácter de tu sitio.
Facilidad de lectura en la pantalla del ordenador.
Estén disponibles en diversos navegadores y sistemas operativos.

En el siguiente artículo nos hablan entre otras cosas sobre los colores y el contraste que deben tener, el formato del texto, la sencillez del diseño y el formato de los enlaces.

Y ya metidos en el tema, cuando hayamos pensado en el diseño y nos pongamos a crear nuestra estructura XHTML y CSS, podemos usar esta herramienta que nos recomienda aNieto2K, para crearlas automáticamente.

¿Qué tipo de fuente usar?

Colores, formato y contenido del blog

Markup Maker

Feng-GUI: conoce que partes llaman la atención de tu diseño

ByLuis

Feng-GUI es una aplicación online que simula la detección de las zonas más llamativas para un usuario, ya sea de tu página web o diseño.
Mediante inteligencia artificial simular la percepción humana y mediante un mapa de calor resalta las zonas más llamativas.
fenggui.png
Se puede enviar una imagen o una URL, a mí no me ha funcionado con una URL, pero si se captura la imagen de la web se puede hacer de la misma manera.
Feg-GUI

Cómo realizar un diseño web 2.0

ByLuis

Un buen artículo en el que nos explican cómo pasar nuestro diseño a diseño web 2.0. Claro, cada cual tiene sus gustos y sus conceptos de diseño y puede que no esté de acuerdo con todo lo que se dice, pero aún así es un artículo a tener en cuenta.

Resumiendo un poco el post, nos encontramos con los siguientes consejos:

  • Simplicidad: cuanto más sencillo mejor, es necesario tener en cuenta que todos los sitios webs tienen sus metas y que cada página tiene su propósito. Es necesario obtener la atención del usuario, pero cuidado que su atención es algo que se acaba. La simplicidad es algo que siempre deberíamos tener en cuenta, elimininando contenido innecesario pero sin quitar funcionalidad.
  • Layout centrado: muy característico de la web 2.0 es tener en contenido centrado en la página.
  • Menos columnas: mientras que antes lo normal era un diseño en 4 columnas, ahora lo más utilizado son las dos columnas, evitando así llenar completamente la pantalla y reforzando el primer punto, la simplicidad.
  • Navegación arriba: separar la navegación del contenido principal no es nada nuevo, pero en este caso se resalta que se situe arriba.
  • Diferenciar distintas áreas: que a simple vista, cada área con diferente funcionalidad sea claramente diferenciable, incluso sin ser resaltadas con diferentes colores.
  • Navegación sencilla: debemos conseguir que el usuario sepa dónde está y a qué contenidos puede acceder desde donde está.
  • Logos en negrita: limpios, en negrita y fuertemente marcados.
  • Tamaño de texto grande: haciendo el texto grande se consigue mayor atención que con el texto pequeño.
  • Introducciones en negrita: consiguiendo así mayor impacto visual sobre las cosas más importantes.
  • Colores fuertes: usando colores brillantes y fuertes se consigue una separación de contenidos más sencilla.
  • Superficies con detalle: ya sea mediante sombras, resaltados, difuminados, que las superficies no sean simples, sino más realistas.
  • Gradientes
  • Reflejos
  • Iconos atractivos: es necesario que sean fácilmente reconocibles, que no provoquen confusión.
  • Contornos estrellados: sobre todo con el beta dentro.

Web 2.0 how-to design style guide

Vía / dzone

Novedades de Adobe Photoshop CS3

ByLuis

photoshopbox.gifParece que Adobe Photoshop CS3 viene cargada de novedades, entre una de las más importantes es la creación de dos versiones, una Standard y otra Premium, la cual incluirá más funcionalidades. Por ejemplo, la nueva versión de Camera Raw irá incluida en ambas versiones de Photoshop. Vanishing Point estará solo en la versión Premium.
A parte de mejoras en la edición de imágenes, también añadirá funcionalidades al uso de tabletas gráficas al estilo de Corel Painter y dará la posibilidad de exportar a CAD.
Vía / Bitelia