Imaginería: Usando imágenes en el Diseño de Páginas Web
Lineamientos generales para Imaginería/Gráficos en el Diseño Web
Use imaginería para agregar significado: ya sea hacia la marca, o hacia el contenido.
Trate de ser tan económico como sea posible, y conseguir más significado de pocos gráficos. La imaginería que tiene significado (imaginería primaria) debe ser el foco del diseño de una página. Concentre la imaginería primaria en las siguientes áreas:- Id / Logo del sitio- Contenido primario- Navegación primaria
Donde se usan otros gráficos, éstos deben sostener la imaginería primaria, ayudando al ojo a moverse sobre los elementos de menor prioridad. Esto no significa que las áreas no primarias no puedan ser ricas y sutiles, pero no deberían ser atractivas, en el sentido literal. Los colores simples, el contraste sutil, los gradient.....
Leer el arículo completo
El diseño Real Web 2.0, las utilidades de diseño Web2.0 esenciales
Aunque hay algunos diseños importantes y relevantes que podemos asociar con "Web2.0", no son los estilos y efectos de superficie que podrían venir primero a la mente. Los elementos del diseño Web2.0 reales no son puramente gráficos.
Efectos como gradientes, colores sólidos, fuentes grandes, reflejos y etiquetas flash, que he descrito en 2 artículos previos (Estilo Actual en Diseño Gráfico para la Web y Guía de Estilo Web2.0) son productos a corto plazo para un giro cultural más fundamental.
Éste artículo apunta a explicar la diferencia, y demostrar los elementos valorables que todo diseñador debe aprender del diseño de paginas web moderno.
El sello del Diseño Web2.0 no es gráfico
El efecto de mesa brillante no representa el Web2.0 verdadero más que los alfileres de .....
Leer el arículo completo
.jpg)
Logos basados en texto
Consejo: Al diseñar un logo, considere cuidadosamente los méritos del texto por sí solo, aunque algún símbolo ilustrado pueda agregar valor. Buen reconocimiento
Las palabras denotan claramente significado, al requerir una muy pequeña interpretación mental, incluso comparadas con símbolos icónicos. Nuestros cerebros suelen seleccionar e interpretar palabras fuertes, como lo hacen cientos de veces todos los días. Buena descriptividad
Cuando el logo entero es una palabra con significado, el logo entero tiene significado. Esto es muy económico, con una alta tasa de actividad visual para valorar. Buena presencia
Un texto en solitario llena naturalmente todo el espacio que ocupa. Además, recuerde que las fuentes son diseñadas con un peso y contraste visualmente consistente, significando una gran parte del trabajo de hacer a su diseño visualmente consistente. Poten.....
Leer el arículo completo
Diseño de Logos para Sitios Web
Para que el diseño de un logo para sitio web sea visualmente efectivo, debe exhibir ciertas características de diseño fundamentales relacionadas:
- Forma
- Presencia
- Peso
- Contraste
Éste artículo describe cómo emplear estas simples características para crear un logo fuerte usando ejemplos del mundo real.
Para ayuda profesional, puedo recomendar LogoMaid para un diseño de logos accesible y de alta calidad Característica 1: Forma
Un logo (o ícono) distintivo tiene una forma reconocible, así que aún es reconocible desde el esquema.
El cerebro adora usar la forma para identificar objetos, porque puede hacerlo muy rápidamente. (Nota: ésta es también la razón principal por la que el espacio en blanco es importante).
¿Qué es lo que le da distinción a un logo? El esquema debe ser simple, pero no demasiado, y claro.
Además, los elementos con.....
Leer el arículo completo
Efectos 3D para sugerir "Clickeable" o "Interactivo"
En el mundo real, las cosas que son oprimibles tienden a ser tridimensionales, tales como botones en una radio. Los diseñadores de interfaces de usuario gráficas para computadoras lo usan para crear un atajo GUI realmente conciso para decir "clickeable".
El efecto de botón es una de las convenciones de diseño más fuertes en el diseño interactivo. Ejemplos de efectos 3D de botones & biseles
El área superior de navegación de esta página web (escala 50%) usa 3D de 3 maneras: para darle riqueza y peso a la línea horizontal, para hacer que los botones de la pagina en la parte de arriba a la derecha parezcan más clickeables, y para hacer que la navegación de primer nivel parezca más clickeable.
Los efectos 3D en los links son sutiles, pero obviamente dicen "Haga click". Esto es ayudado p.....
Leer el arículo completo
Posicionamiento Lógico de Componentes de Páginas Web
Al disponer formularios y otros elementos de la pantalla, lea la disposición como una conversación, que funcione desde el comienzo de la página. Acomode los elementos para asegurarse de que el diálogo tenga sentido, y será una mejor experiencia para el usuario. El monólogo mental del browser
Cuando usamos una página web, como algún software o medio de comunicación, todos tenemos un comentario mental sutil corriendo dentro de nuestras cabezas. Éste toma decisiones, da instrucciones, hace preguntas, y hace comentarios sobre la página. Ejemplo de monólogo mental
- ¿Qué es esto?
- "¡No, no quiero recibir más información!"
- "Esto se ve como aqué.....
Leer el arículo completo
Ritmo y repetición en la disposición de una página web
El ritmo es la más sutil y abstracta de las herramientas 'de asociación'.
El ritmo ayuda a asociar elementos repitiendo una presentación o arreglo estilístico común. Esto funciona incluso cuando los elementos no están agrupados o alineados, pero funciona a menudo en conjunción con estas técnicas.
El ritmo es una técnica común en el diseño gráfico. Puede funcionar siempre que se repite un estilo. Los ejemplos familiares incluyen listas y encabezados publicados.
Es más fácil mostrar como funciona el ritmo o repetición a través de ejemplos.
Ejemplo simple de ritmo
Este recorte de la página inicial del Partido Republicano de EEUU (no implica una toma de partido), muestra ritmo y efecto.
El estilo del encabezado de la sección es repetitivo, todas las secciones están alineadas a la izquierda y separadas con un .....
Leer el arículo completo
El poder de la proximidad en la disposición de una página web
La manera más simple de asociar una cantidad de elementos es agruparlos juntos.
Lo que hace el agrupar es hacer que los objetos similares se vean similares.
De ese modo, el ojo puede descifrar un título (por ejemplo) e inmediatamente asociar ese título con todos los objetos a su alrededor. Haciendo similares a los objetos similares, el agrupamiento hace que los objetos diferentes se vean diferentes. "¿Porqué están los objetos en ese grupo en lugar del otro grupo..? Deben ser diferentes."
El diseño 2D usa una serie de técnicas de agrupamiento, desde párrafos y márgenes hasta barras de navegación y elementos de formulario agrupados.
Así como con otras herramientas de diseño y creacion de paginas web , el agrupamiento con proximidad se basa en fuerzas contrastantes, en este caso esp.....
Leer el arículo completo
Usando la Alineación en la disposición y el diseño de una página web
La alineación funciona asociando visualmente una cantidad de elementos. Cuando usted ve una cantidad de elementos alineados, cree instintivamente que esos elementos son iguales a los otros, o que comparten alguna otra propiedad común.
Ésta es una herramienta realmente útil para permitir rápidamente a un usuario saber qué están mirando al trazar relaciones instantáneas entre diferentes elementos.
Cómo Funciona la Alineación en el Diseño Gráfico
La alineación funciona con cualquier elemento de la pantalla: párrafos de texto, imágenes, botones, fotografías, links, e incluso combinaciones de todos ellos.
Aunque los elementos alineados son comunmente agrupados espacialmente, no tienen porqué estarlo. La alineación funciona a lo largo de la pantalla entera, incluso cuando el eje es.....
Leer el arículo completo
Contención en una disposición de diseño web
Hay dos variaciones de mecanismo: encapsulación estricta, donde el elemento es contenido totalmente dentro de un cuadro; y contención suave, donde el cuadro es sugerido usando la cascada jerárquica y el espacio en blanco.
Estricto: Encapsulación
Aquí es donde usted muestra que un elemento es parte de, o un retoño de, o relacionado con (en una dirección), otro elemento, colocando al retoño dentro de los bordes de su elemento padre. El elemento padre debe ser simplemente identificado por una etiqueta que esté ya sea dentro del cuadro y hacia el origen, o ubicándolo en el borde del cuadro.
" Web host en Mexico en Okhosting.com, visitanos y contrata tu plan de hosting y dominio al mejor precio, aprovecha nuestras promociones en registro de dominios . MX "
En este ejemplo, los tres p.....
Leer el arículo completo
Disposición en Diseño Web
Las posiciones relativas implican relaciones en varios niveles diferentes.
La clave es asegurarse de que usted representa visualmente las relaciones correctas.
Herramientas de disposición
Usted puede usar herramientas como contraste y espaciado para ayudar a diferenciar los elementos.
Otras técnicas son útiles para asociar visualmente elementos similares.
Estas técnicas son usadas comunmente en combinación - cuando usted agrupa una colección de links, por ejemplo, diferencia también el grupo de los elementos alrededor suyo.
Técnicas para crear asociaciones
Asociar elementos implica una relación de similaridad, p.ej. A, B, C son un grupo de elementos 'similares' equivalentes.
Los grupos pueden ser creados usando cualquier combinación de los siguientes mecanismos:
Agrupamiento - crear asociación a través de colocar juntos elementos similares
Contención - hacer uno o más elementos parte literal de otro elemento
Alineación - alinear elementos a lo la.....
Leer el arículo completo
Texto efectivo para el diseño web
Los beneficios del texto en el diseño web
A pesar de las limitaciones de no ser capaz de controlar el tipo y el tamaño de fuente, el texto 'común' tiene propiedades que lo hacen una herramienta muy poderosa.
No es ambiguo, es rápido de interpretar
El texto puede ser mucho más claro que las imágenes, porque es 'literal'. La palabra "Buscar" en un botón no es ambigua en absoluto, mientras que un ícono de maximizar o una flecha necesita más decodificación (no hay un símbolo universal que signifique 'Buscar').
Esto no es desde luego universalmente verdadero. Algunas veces una imagen o un ícono puede ser mucho más compacta y eficiente que el texto equivalente (y por lo tanto más rápida de interpretar). Otras veces, el objetivo puede ser un significado más 'borroso'.
Descarga y presenta más rápido
Reducir el tama.....
Leer el arículo completo
Legibilidad - haciendo a las páginas web fáciles de leer
No use demasiados tamaños de fuente
Los tamaños de fuente son un gran diferenciador. Funcionan como señales que dicen "Aquí hay algo importante" o "Aquí hay una nueva sección - La letra grande dice de qué se trata la sección, la pequeña debajo es el contenido". Al igual que cualquier otro medio para diferenciar elementos visualmente, se necesita que haya un nivel suficiente de diferencia visual en el tamaño del texto para que funcione.
Por esta razón, no se recomienda usar más de 3 diferentes tamaños de fuente principales para su contenido principal (p.ej. encabezado principal, subencabezado, cuerpo). Esto se aplica sólo al cuerpo de texto principal. Otros elementos de pantalla pueden usar tamaños alternativos (tales como superíndice/subíndice, et.....
Leer el arículo completo
Usando el Contraste en el Diseño Web
El contraste hace que los objetos sobresalgan entre lo que los rodea, que se noten más. Los objetos con mayor contraste se notarán más.
El contraste es el área problemática más común que encuentro al analizar diseños, comunmente porque no hay suficiente contraste, o los elementos de mayor contraste no son los correctos.
Cómo usar el Contraste
Los diseñadores usan el contraste para ayudar a los usuarios a recorrer la página efectivamente guiando el ojo rápidamente y sin esfuerzo a lo largo de la misma. Una página web que ha sido bien hecha se ve fácil de mirar, porque ayuda a minimizar la dificultad de interactuar con una pantalla (mirar arriba). Todos los elementos de la pantalla compiten por la atención del ojo. El alto contraste es empleado para promover los elementos más importantes. El contraste bajo ayuda a hacer.....
Leer el arículo completo
Guías para usar color en el diseño web
Dele a su sitio web un esquema de color
Las páginas web visualmente atractivas necesitan un esquema de color consistente. Sin color, a una página puede faltarle personalidad. Con un esquema de color consistente y balanceado, una página puede tener una personalidad consistente y balanceada. Demasiado color, o una coloración errática, le da a una página una personalidad confusa.
Un esquema de color se refiere a menudo a un sistema consistente de tonalidades que encaje bien. Puede significar alternativamente una manera de usar los colores, que no pertenezca necesariamente a una familia de tonalidades.
Por ejemplo, Apple.com usa colores diferentes en secciones diferentes, pero los colores son usados de una manera similar. En este caso, la consistencia deriva del tratamiento y la aplicación, más que de los colores en sí mismos......
Leer el arículo completo
El objetivo es acomodar varios elementos en la página web que se va a crear para maximizar las chances del usuario de usar el sitio exitosamente. Aquí hay una serie de herramientas de diseño simples disponibles para ayudarle a ayudar al usuario.
La claridad trata de relaciones entre elementos
El factor principal del diseño visual efectivo es crear relaciones para mostrar:
- qué es parte de qué
- qué es diferente de qué
- cómo los elementos distintos se relacionan entre ellos
Un principio fundamental para la claridad es la economía: No use más técnicas de las necesarias para diferenciar. (Por ejemplo, si usa texto en negrita para diferenciar una porción de texto de otra, pregúntese si realmente necesita usar también dos puntos.)
Herramientas para diseñar la capa de despliegue
En conjunción con las herramientas de disposición ya descritas (agrupar, alinear, etc.), son utilidades a usar luego que tienen un impacto sobre el atractivo de un diseño y la facilidad .....
Leer el arículo completo
VIII. Promocionar Su Sitio Para Incrementar el Tráfico
El propósito principal de la SEO es hacer a su sitio visible para los buscadores, llevándolo a figuraciones más altas en los resultados de las búsquedas, lo cual ayuda a conducir más tráfico a su sitio. Y tener más visitantes (y sobre todo compradores) es en última instancia el objetivo en la promoción depaginas web. Para hacer honor a la verdad, la SEO es solo una alternativa para promover su sitio e incrementar el tráfico - hay muchos medios tanto en línea como fuera de ella para cumplir el objetivo de tener un tráfico elevado y alcanzar a su público objetivo. No vamos a explorarlos en este tutorial pero nada más tenga en mente que los buscadores no son la el único medio para conseguir visitantes para su sitio, aunque se vean como una opción preferible y un medio relativamente sencillo de hacerlo.1. Colocar Su Sitio en Directorios de Búsqueda, foros y sitios especiales
Luego de que ha terminado de optimizar su nuevo sitio, .....
Leer el arículo completo
VII. URLs Estáticas Contra URLs Dinámicas
Basado en la sección anterior, debe haberle quedado la impresión de que los algoritmos de los buscadores tratan de humillar al esfuerzo de todo diseñador por hacer elegante a una pagina web. Bien, la sección ha explicado porqué a los buscadores no les gustan las imágenes, las películas, los applets y otros extras. Ahora, usted debe pensar que los buscadores son lo suficientemente descarados como para que tampoco les gusten los URLs dinámicos. Honestamente, a los usuarios tampoco les gustan las URLs como http://domain.com/product.php?cid=1&pid=5 porque estas URLs no dicen demasiado sobre los contenidos de la página.
Hay un par de buenas razones por las que las URLs estáticas dan más resultado que las URLs dinámicas. Primero, las URLs dinámicas no siempre están ahí - p.ej. la página es generada a partir de un pedido luego de que el usuario lleva a cabo cierto tipo de acción (llenar un formulario y enviarlo o llevar adelante una búsqueda usand.....
Leer el arículo completo
VI. Extras Visuales y SEO
Como ya hemos mencionado, los buscadores no tienen manera de indexar directamente extras como imágenes, sonidos, películas de flash, javascript. En su lugar, ellos confían en usted para que proporcione una descripción textual con significado y basados en ella ellos pueden indexar estos archivos. De cierto modo, la situación es similar a lo que era con el texto hace aproximadamente 10 años - usted proporciona una descripción en la metatag y los buscadores usan esta descripción para indexar y procesar su página. Si la tecnología avanzara más, un día puede ser posible para los buscadores indexar imágenes, películas, etc. pero por el momento esto es sólo un sueño.1. Imágenes
Las imágenes son una parte esencial de cualquier página Web y desde el punto de vista de un diseñador de paginas web no son un extra sino un elemento obligatorio para cualquier sitio.
Sin embargo, los diseñadores y los buscadores están en polos opuestos porque para los buscadores cualque.....
Leer el arículo completo
Si usted es nuevo con la SEO, debe ser una sorpresa para usted el que el texto sea una de las fuerzas que conducen a mejores ubicaciones. Pero es un hecho. Los buscadores (y sus lectores) adoran los contenidos nuevos y abastecerlos con contenidos relevantes actualizados regularmente es una receta para el éxito. Generalmente, cuando un sitio es actualizado frecuentemente, esto incrementa la probabilidad de que el spider vuelva a visitar el sitio pronto. Puede estar seguro de que si actualiza su sitio diariamente, el spider lo visitará incluso una vez por semana pero si no actualiza sus contenidos regularmente, es seguro que esto le hará caer del tope de los resultados de búsquedas.
Antes de subir el diseño de tu pagina de internet recuerda contratar un proveedor de web host confiable y profesional como okhosting.com Alta calidad en hospedaje web y registro de dominios de internet en Mexico, no dejes tu pagina web en manos de cualquier empresa y asegura tu tranquilidad con los profe.....
Leer el arículo completo