Principios Esenciales Para Diseño Web En Tu Negocio – Parte 3

Principios Esenciales Para Diseño Web En Tu Negocio – Parte 3

Estamos en al último artículo sobre el diseño web en tu negocio. Recuerda que esto debe implicar la consecución de un buen diseño que sea útil y agradable, que ofrezca información y que construya tu marca y que sea técnicamente correcto y visualmente coherente.

Las distintas partes que estamos viendo sobre el diseño de tu sitio web son

Parte 1: distinción de tu sitio web; la separación; la navegación.

Parte 2: el diseño que debes crear; la tipografía; la usabilidad.

Parte 3: la organización de tu diseño; la claridad; la coherencia de tu diseño.

Ahora vamos a continuar con los tres últimos principios para el diseño web en tu negocio

Principio 7. La organización de tu diseño

arrow4blueMantener las cosas bien organizadas es tan importante en el diseño Web en tu negocio como en el diseño de impresión. Eso no quiere decir que todo deba estar en una línea recta, sino que hay que tratar de mantener las cosas puestas sistemáticamente en una página.

arrow4blueEl orden hace que tu diseño esté más ordenado y sea más fácil de entender y además, hace que parezca más limpio.

El buen diseño significa no tener que decir nunca “Haz Clic Aquí” (diseñador Shawn Leslie)

arrow4blueTe recomiendo que bases tus diseños en una red específica. Este año he visto algunos muy buenos artículos sobre diseño de cuadrícula incluyendo SmashingMagazine de Proyectos con Enfoque de cuadrícula & A List Apart es pensar fuera de la cuadrícula. De hecho, si estás interesado en el diseño de red, sin duda debes visitar la bien llamada DesignByGrid.com, el hogar de todas las cosas griddy.

Principio 8. Claridad (Nitidez)

arrow4blueMantener tu diseño nítido y fuerte es super importante en el diseño Web . Y cuando se trata de la claridad, es todo acerca de los píxeles.

arrow4blueEn tu CSS, todo lo relacionado con los píxeles estará controlado, así que no hay nada de qué preocuparse, pero en Photoshop no es así. Para lograr un diseño de vanguardia tienes que:

arrow4blueMantén la forma de los bordes ajustados en pixeles. Esto podría involucrar el limpiar de forma manual las formas, líneas y cajas si las estás creando con Photoshop.

arrow4blue Asegúrate de que cualquier texto se crea mediante el ajuste de suavizado apropiado. Yo uso mucho el ”agudo”(sharp).

arrow4blueAsegúrate que el contraste es alto para lo que las fronteras están claramente definidas.

Saltamos de diseñar de 150 – 300 píxeles/pulgada a 72 píxeles/pulgada. Esa resolución es la ideal para internet y para las pantallas. No necesitamos más. Todo lo que supere a esta resolución tendrá exceso de peso en la web y por tanto resultará más lenta.

Principio 9. Consistencia

arrow4blueDebemos ser coherentes en todo lo que hacemos:

# Opciones de fuente, color, estilos de botón, espaciamiento, los tamaños, el diseño de elementos, estilos de Ilustración, opciones de foto, etc.

# Todo lo debes aplicar a los temas para hacer que tu diseño sea coherente entre las páginas y en la misma página.

arrow4blueMantener tu diseño coherente te hará ver como más profesional. Las inconsistencias en un diseño son como las faltas de ortografía en un ensayo.

arrow4blueEllos simplemente bajan la percepción de la calidad. Sea cual sea tu parecer en cuanto al diseño, debes mantenerlo siempre consistente y te llevará a un nivel superior. Incluso si se trata de un mal diseño, al menos que sea un mal diseño consistente.

arrow4blueLa forma más sencilla de mantener la coherencia es tomar pronto las decisiones y cumplirlas. Con un sitio muy grande, sin embargo, las cosas pueden cambiar en el proceso de diseño. Hay diseños que pueden tomar meses de duración.

Cuando tienes un buen conjunto de hojas de estilo CSS, se puede recorrer un largo camino para hacer un diseño coherente.

Intenta definir las etiquetas básicas como <h1> y <p> de tal manera que hagan tus valores predeterminados y que coincidan adecuadamente para evitar tener que recordar los nombres de clases específicas en todo momento.

¿Qué más estás haciendo para aumentar tus ingresos en las ventas de este año? 

Gracias por todo y te invito a que compartas tus comentarios y sugerencias en el cuadro de comentarios a continuación.

Antonio Fernández
“Emprendedor-Exitoso.com”
“Principios Esenciales Para Diseño Web En Tu Negocio – Parte 3″

Emprendedor en Internet que ayuda a empresas y negocios a obtener más clientes y más ventas. Asesoramiento gratuito.

Principios Esenciales Para Diseño Web En Tu Negocio – Parte 2

Principios Esenciales Para Diseño Web En Tu Negocio – Parte 2

Principios Para El Diseño Web De Tu Negocio -2En el anterior artículo (VER AQUÍ) empezamos a hablar de los principios para el diseño web en tu negocio, ya que tu web debe ofrecer información y debes construir tu marca a partir de un buen diseño, que seas técnicamente correcto y visualmente atractivo y coherente.

Te recuerdo las distintas partes para el diseño de tu sitio web.

Parte 1: distinción de tu sitio web; la separación; la navegación.

Parte 2: el diseño que debes crear; la tipografía; la usabilidad.

Parte 3: la organización de tu diseño; la claridad; la coherencia de tu diseño.

Ahora vamos a continuar con los siguientes principios para el diseño de tu web

Principio 4. El tipo diseño que debes crear

La vida se ha vuelto mucho más fácil para los diseñadores gracias a la innovación y transición producida con diseños CSS, pero incluso ahora debe ser importante pensar en cómo vamos a construir un sitio web cuando algunos aún utilizan Photoshop.

Hay que tener en cuenta para el diseño algunos aspectos y contestar las siguientes preguntas:

¿Qué puedes hacer realmente?

Es posible que hayas encontrado un tipo de fuente (letra) increíble para escribir tu artículo, pero ¿es realmente un tipo de letra estándar HTML? Es posible que tengas un diseño bonito, pero este diseño suele ser de 1100px de ancho y suele contener un desplazador horizontal para la mayoría de los usuarios.

Es importante saber qué es lo que se puede hacer y qué es lo que no se puede hacer. Por eso pienso que todos los diseñadores web deberían saber crear sitios web para completar su formación.

¿Qué sucede cuando una pantalla está redimensionada?

¿Necesita duplicación de fondos? ¿Cómo van a trabajar? ¿El diseño está centrado o alineado a la izquierda?

Incluso para el posicionamiento en CSS, algunas cosas como la alineación vertical resultan difíciles de aplicar y, a veces, es mejor evitarlo.

¿Podrían los pequeños cambios en nuestro diseño simplificarse y acortar el tiempo de construcción del sitio?

Algunas veces, mover un objeto en torno a tu diseño puede dar lugar a tener que volver a codificar de nuevo tu formato de CSS.

Ten en cuenta que si tu diseño tiene digamos tres elementos y cada elemento es completamente independiente uno de otro, sería más fácil de construir tu sitio. Si estos tres elementos se solapan entre sí, aún podría ser fácil, pero probablemente será un poco más complicado.

Deberás encontrar un equilibrio entre lo que se ve bien y los pequeños cambios que puedan simplificar su construcción.

Y para los sitios grandes, en particular, ¿se pueden simplificar las cosas?

Hubo un tiempo en que solía hacer botones de imagen para mis sitios. Así que si había un botón de descarga, por ejemplo, haría una imagen pequeña para la descarga.

En el último año o así, he cambiado y uso CSS para hacer mis botones y nunca me he acordado de lo que hacía antes. Claro, pero esto significa que mis botones no siempre tienen la flexibilidad que podría desear, pero el ahorro en tiempo al crear mi sitio y el hecho de no tener que hacer docenas de pequeños botones son enormes.

Principio  5. La tipografía

El texto es el elemento más común del diseño, así que no es de sorprender que gran parte de mi pensamiento lo haya dedicado a esto.

Es importante tener en cuenta cosas como:

# Las opciones de fuente – Los diferentes tipos de fuentes expresan diferentes cosas acerca de un diseño. Algunos parecen modernos y otros pueden parecer retros. Asegúrate de que estás utilizando la herramienta adecuada para el trabajo.

# Los tamaños de la fuente – Hace años la moda era que el texto fuera muy pequeño. Afortunadamente, en estos días la gente ha comenzado a darse cuenta de que el texto está destinado a ser leído y no se ha limitado su tamaño. Asegúrate de que el tamaño de tus textos son consistentes, lo suficientemente grandes como para que puedan ser leídos, y que estén proporcionados para que los capítulos y subcapítulos destaquen adecuadamente.

# La separación – Como ya comentamos, es muy importante tener en cuenta el espacio entre líneas y distribuir bien los otros cuerpos el texto. También puede ser importante el espacio de las letras, aunque en la web esto es de menos importante, ya que tú no puedes llevar el control de tantos elementos.

# La longitud de la línea – No hay regla persiste y rápida sobre esto, pero por lo general las líneas de texto no deben ser demasiado largas.

Cuando un lector está leyendo un artículo, si tienes distribuido el mismo en pequeños párrafos tu visitante se sentirá más cómodo en su lectura y continuarán leyendo. Si, por el contrario, son párrafos largos tu lector se cansará de leer y abandonará tu artículo, más difícil va a ser que continúen con la lectura del mismo.

# El color – Uno de mis peores hábitos es hacer un texto con contrastes bajos. Se ve bien, pero no lo leerán tan bien, por desgracia. Aún así, me parece bueno hacerlo con cada diseño de sitio Web.

Principio 6. Usabilidad

El objetivo para tu web es que la interfaz se vea más clara y sencilla para el visitante. Por lo tanto, mejorar la usabilidad quiere decir optimizar el hábito del usuario dentro del sitio web.

Hacer un diseño web no trata tan solo en crear bonitas imágenes. Con tanta información y con tanta interacción como hay en un sitio web, es importante que tú, como diseñador, proporciones todo. Esto significa hacer el diseño de tu sitio web sea usable.

Ya hemos hablado de algunos aspectos de la usabilidad, como la navegación, la precedencia y el texto.

Aquí hay tres que son también importantes:

Adherirse a las normas

Hay ciertas cosas que la gente espera, y no darles causa a confusión, como por ejemplo, cuando el texto tiene un subrayado y parece que es un enlace. Hacer lo contrario no es una buena práctica de usabilidad. Claro, tú puedes romper algunos pactos, pero la mayor parte de tu sitio Web debe hacer exactamente lo que la gente espera que hagas.

Piensa en lo que los usuarios realmente quieren hacer

Mira este link “Prototyping que te dará cierta información acerca de la estructura adecuada para una página web, es una pantalla de plan esquemático, una guía visual que representa la estructura esquelética de un sitio web.

Piensa en las tareas del usuario

Cuando un usuario llega a su sitio ¿qué es lo que intentan hacer? Haz una lista de los diferentes tipos de tareas que la gente podría hacer en un sitio, cómo van a lograrlo, y lo fácil que quieres que resulte para ellos.

Esto podría significar tener tareas muy comunes de una página web (por ejemplo, “shopping inicio”, “aprender acerca de lo que hacemos”, etc.), o puede ser que signifique asegurar algo como tener una caja de búsqueda siempre de fácil acceso.

Al final del día, el diseño web es una herramienta que las personas deben saber utilizar y a la gente no le gusta el uso de herramientas molestas.

En el siguiente artículo continuaré hablando de otros principios para tu diseño web…

¿Qué más estás haciendo para aumentar tus ingresos en las ventas de este año? 

Gracias por todo y te invito a que compartas tus comentarios y sugerencias en el cuadro de comentarios a continuación.

Antonio Fernández
“Emprendedor-Exitoso.com”
“Principios Esenciales Para Diseño Web En Tu Negocio – Parte 2″

Emprendedor en Internet que ayuda a empresas y negocios a obtener más clientes y más ventas. Asesoramiento gratuito.

Principios Esenciales Para Diseño Web En Tu Negocio – Parte 1

Principios Esenciales Para Diseño Web En Tu Negocio – Parte 1

El diseño web en tu negocio puede resultarte al principio difícil y engañoso, ya que:

1.- Implica la consecución de un diseño que es a la vez útil y agradable

2.- Ofrece información y construye tu marca

3.- Es técnicamente correcto y visualmente coherente.

Añadir a esto el hecho de que muchos diseñadores web son autodidactas, que el diseño web no se debe considerar como algo secundario sino necesario y novedoso, y que tendrás que considerar los cambios constantes en la tecnología para no quedarte atrás.

Así que hoy vamos a empezar a hablar de algunos principios esenciales para diseño web en tu negocio. Como tiene bastante contenido lo vamos a desglosar en 3 artículos:

Parte 1: distinción de tu sitio web; la separación; la navegación.

Parte 2: el diseño que debes crear; la tipografía; la usabilidad.

Parte 3: la organización de tu diseño; la claridad; la coherencia de tu diseño.

Estas son sólo mis opiniones y las he tratado de complementar con información adicional.

Principios Esenciales Para el Diseño de tu Web

Principio 1. Distinción de tu diseño web

Un buen diseño web es tal vez incluso mejor que otro tipo de diseño que trata solo de información. Una de las mejores herramientas que debes tener en tu arsenal para hacer esto es la “distinción”.

Cuando navegas por un buen diseño, el usuario debe sentir que es atraído a la pantalla por el diseñador. Yo llamo a esta “distinción” y debe ser algo prioritario y necesario, y debes tener en cuenta qué partes de tu diseño puede atraer a la visión de tu visitante.

Un ejemplo sencillo de distinción de tu diseño puede ser el logotipo, que es lo primero que ven la mayoría de las personas al acceder a un sitio web. Esto sucede así porque visualmente está arriba a la izquierda y es lo primero que se ve.

Pero tu prioridad debe ir mucho más allá. Debes dirigir los ojos del usuario a través de una secuencia de pasos.

Por ejemplo, es posible que desees que tu usuario pase de ver el logotipo o marca de tu negocio a una imagen impactante (para que tu sitio tenga personalidad propia), y luego considerar como acción secundaria el que sea dirigido al texto del cuerpo principal, con una barra lateral con la que pueda navegar.

Lo que tu usuario busque depende de ti, y esto debes averiguarlo tú o el diseñador Web, que haga el diseño.

Para lograr esta “distinción” existen muchas herramientas a tu disposición:

Posición – Cuando algo está en una página influye claramente en qué orden puede verlo el usuario.

Color – Usar colores audaces y sutiles es una forma sencilla de decirle a tu usuario dónde buscar.

Contraste – Ser diferente hace que las cosas destaquen más que hacer lo mismo que todos hacen y se convierte como algo secundario.

Tamaño – Lo grande prevalece sobre lo pequeño, pero no hacer todo grande, solo lo que quieras que destaque sobre lo demás.

Elementos de diseño – si hay una flecha grande que apunta a algo, supongo que los  usuarios la verán, ¿no crees?

Principio 2. La separación

Cuando empecé a diseñar quería llenar todo el espacio disponible con cosas. El espacio vacío parecía un desperdicio. De hecho es todo lo contrario.

La separación hace que las cosas se vean más claras. En diseño web, hay tres aspectos del espacio que debes considerar:

# Interlineado

Cuando escribes un texto, el espacio entre las líneas afecta directamente a su legibilidad. Si pones poco espacio hace que sea fácil la lectura de tu artículo pues tu ojo irá directamente a la línea siguiente y la visión no se perderá.

Si dejas muchos espacios la visión de lo que lees se puede perder. Así que hay que encontrar un término medio.

# Relleno de texto

En general nunca debes tocar otros elementos. Las imágenes, por ejemplo, no deben contener texto apasionante, tampoco límites o tablas.

El relleno es el espacio entre los diferentes elementos y el texto. La norma aquí es que debes tener un espacio allí. Hay excepciones, por supuesto, en particular, si el texto es una especie de título / gráfico o tu propio nombre. Pero, como regla general, dejar espacio entre el texto y el resto hace que sea infinitamente más fácil de leer y agradable .

# Espacios en blanco

Primero indicarte que cuando hablo de espacio en blanco no quiere decir que tenga que ser de color blanco. Esta forma de hablar o este término se refiere simplemente a un espacio vacío en una página (o espacio negativo como a veces se le llama).

El espacio en blanco se utiliza para dar equilibrio, proporción y diferencia en una página. Una gran cantidad de espacio en blanco tiende a hacer que las cosas parezcan más elegantes y bonitas, así que por ejemplo, si vas a un arquitecto caro,  casi siempre ves un montón de espacio.

Si quieres aprender a utilizar el espacio en blanco con eficacia, puedes ir a alguna revista y ver cómo están distribuidos los anuncios. Los anuncios de las grandes marcas de relojes y coches y similares tienden a tener un montón de espacio vacío utilizado como un elemento de diseño.

Principio 3. La navegación

Una de las experiencias más frustrantes que puede tener un sitio Web es ser incapaz de averiguar dónde ir o dónde se encuentra lo que está buscando.

Me gustaría pensar que para la mayoría de los diseñadores web, la navegación es un concepto que hemos logrado dominar, pero me sigo viendo como ejemplos páginas con diseños de difícil navegabilidad. Hay dos aspectos de la navegación a tener en cuenta:

# ¿Dónde ir en tu web?

Hay algunas reglas de sentido común que te debo recordar. Los botones para navegar dentro de un sitio web deben ser fáciles de encontrar, como por ejemplo en la parte superior de la página, y fáciles de identificar.

Deben verse como botones de navegación y estar bien descritos. El texto de un botón debe ser muy claro en cuanto a la acción que pretendes realizar. Aparte del sentido común, que también es importante cuando quieres que la navegación sea usable.

Por ejemplo, si tienes un submenú de giro, es importante que una persona pueda llegar a los elementos del submenú sin perder la imagen de sustitución inicial. Del mismo modo el cambio del color o la imagen de “rollover” es una excelente respuesta para un usuario.

# Orientación – ¿Dónde estás ahora?

Existen muchas formas de orientar a un usuario y  que no pueda haber excusa para no hacerlo. En sitios pequeños, podrías colocar una indicación o botón como “ver más abajo” o “arriba.

En un sitio más grande, deberías de crear un mapa indicativo de la estructura de tu sitio con subtítulos, para los que verdaderamente se puedan perder.

En el próximo artículo continuaré hablando de otros principios para tu diseño web…

¿Qué más estás haciendo para aumentar tus ingresos en las ventas de este año? 

Gracias por todo y te invito a que compartas tus comentarios y sugerencias en el cuadro de comentarios a continuación.

Antonio Fernández
“Emprendedor-Exitoso.com”
“Principios Esenciales Para Diseño Web En Tu Negocio – Parte 1″

Emprendedor en Internet que ayuda a empresas y negocios a obtener más clientes y más ventas. Asesoramiento gratuito.