Menu

Bienvenido a Recursos

Articulos para hacer un sitio responsivo , buenas conductas.

¿Qué características debe cumplir un buen sitio web?

Hacer una web amigable, intuitiva y de fácil uso para el usuario pero sin perder de vista que posea un buen contenido, son los objetivos que debe perseguir todo diseñador y desarrollador web.

Entre las características principales que debe tener un buen sitio web, podemos destacar las siguientes:

sample-image Web amigable.

"No nos sirve una web bien diseñada y de contenido pobre, ni nos interesa un buen contenido en un sitio que el usuario final no sepa manejar o carezca de elementos atractivos". Un buen sitio web debe ser fácil de leer, con colores e imágenes de fondo que combinen, rico en contenido y con una navegación intuitiva por los diferentes menús y submenús. Tampoco debemos perder de vista en el desarrollo del sitio seguir los principios del diseño web responsivo, lo que favorecerá la experiencia de usuario y reducirá los costes de mantenimiento y desarrollo.

Diseño basado en web responsivo.

A la hora de publicar una web, conviene ceñirse a ciertas especificaciones técnicas y estándares de desarrollo como los definidos por W3C. Se debe garantizar que a cualquier usuario le resulte cómoda e intuitiva la navegación, y evitar los altos tiempos de carga, de lo contrario muchos usuarios abandonarán la navegación sin dar una oportunidad al sitio, aunque su contenido pueda resultarles de utilidad. Un buen desarrollador web, perseguirá a su vez un diseño consistente, de manera que los usuarios no tendrán la sensación de estar en una web diferente cada vez que naveguen por el sitio, independientemente del dispositivo, navegador o sistema operativo. Garantizar un correcto posicionamiento mediante técnicas de SEO será básico para atraer usuarios a través de los diferentes motores de búsqueda..

Contenido bien estructurado .

Por lo general los usuarios que acceden a un sitio web valoran el tiempo, por lo que conviene que la navegación sea clara y que haya atajos para acceder a los contenidos. Por otro lado, en una web la primera impresión cuenta y define la imagen de marca que se pretende representar. Por lo cual una buena estructura del diseño debe generar confianza, seriedad y buena impresión. Se debe poner especial atención a la organización de los contenidos, que estén bien relaciones y no transmitan imagen de caos o desorden. La importancia de una estructura clara y objetiva mantendrá al usuario conectado. Una buena página web tiene una jerarquía clara, se le debe dar al usuario la posibilidad de saltar de un contenido a otro, ya que los sitios web no se leen de manera lineal. Como norma se debe situar lo más importante al inicio..



Entornos de desarrollo

  • Editores Online
  • Editores de HTML y CSS
  • Sistemas CMS

  • Conocidas las características que se deben perseguir para diseñar y desarrollar un buen sitio web, surge la problemática de qué herramientas de diseño y desarrollo usar para alcanzar los requisitos de un diseño efectivo y eficiente de un entorno web. La elección de unas u otras herramientas se convierten en un elemento clave a la hora de maximizar recursos.

    “ En los últimos años, debido a la creciente demanda de desarrollo de páginas web, han surgido una gran cantidad de herramientas que facilitan el proceso de creación de un sitio web, cubriendo todo tipo de necesidades de diseño y desarrollo.”

No se debe perder de vista, que estamos inmersos en un área de trabajo en donde la tecnología se mueve y cambia muy rápido, por lo que un buen diseñador y desarrollador web, debe manejar varias herramientas y estar al día de las últimas tendencias del mercado.

A continuación, se exponen una serie de herramientas para el desarrollo de entornos web multiplataforma, agrupadas en tres tipos:


    Diseño visual

    En ésta etapa decidimos muchos de los aspectos visuales que queremos que provoque nuestra web, por ello debemos hacer especial hincapié en éste paso.

    El diseño visual, está formado por una serie de bloques o módulos dispuestos en una forma estandarizada, que permiten a los usuarios captar con simples recorridos visuales donde se encuentran los diferentes elementos que componen una página. Esta disposición responde a modelos de lógica visual que están relacionados con el comportamiento de los usuarios.

    Un papel importante juega la calidad visual de la misma, ya que la vista es un factor diferencial. Especial atención debemos tener en la resolución de las imágenes, pero también aportar un toque a un simple menú puede ayudar en la navegación del usuario .”

En el diseño de páginas web, deben emplearse modelos que a los usuarios les resulten familiares, es decir, colocar en la misma ubicación áreas funcionales y contenidos importantes.

Los diseños excesivamente llenos de elementos, con fondos recargados o de bajo contraste, pueden dificultar el establecimiento de puntos de referencia visual que hagan comprensible la organización del contenido.

Los componentes que debe tener todo diseño web son los documentos html y css fundamentalmente, además de otros que contengan algún otro lenguaje de desarrollo web. Por otro lado, nos encontraremos con todo lo que tiene que ver con el contenido de la misma, desde textos, imágenes, vídeos, audio, etc.

Atención al detalle

La atención al detalle es un factor más relevante de lo que a priori cabría esperar, ya que el cuidado al detalle de la web puede aportarle un valor diferencial respecto a otras, y con ello hacer al usuario tomar la decisión de seguir navegando por la web.

Nos centraremos en los aspectos visuales que signifiquen un cambio profundo en la experiencia del usuario, por ejemplo, en cómo los usuarios perciben el tema del sitio, o el mensaje principal, o la manera en que navegan por él. Lo más recomendable es que los usuarios no tengan experiencia en el campo del diseño en general, ya que serán más determinantes a la hora de elegir qué elementos eliminar, el resultado revelará los errores de una manera notable.

Lo más adecuado es que este público sea un usuario normal de la web, un consumidor tipo. El tema radica en la experiencia del usuario. Los diseñadores web deben tener una comprensión excelente de todos los elementos visuales que desempeñan un papel diferenciador en cómo las personas utilizan y perciben el diseño de la página web.

Editores online

Sin duda son una buena opción para aquellos empresarios autónomos, sin conocimientos en el diseño y desarrollo web y que tampoco se pueden permitir la contratación de un profesional con este perfil.

En la actualidad hay una gran cantidad de herramientas que permiten la creación de sitios web, más o menos funcionales, sin necesidad de que el diseñador tenga conceptos de programación en HTML o CSS, ya que estos editores traducen de forma automática el diseño creado al lenguaje de programación.

Si bien estos editores permiten crear y administrar un entorno web de forma rápida y sencilla, están limitadas sus funcionalidades, en principio debido al propio desconocimiento del desarrollador del código que se genera. Su uso es recomendable para iniciarse y crear páginas web sin necesidad de dedicarle mucho tiempo, pero no como plataformas para uso profesional, ya que se limitan las capacidades que se adquieren con el desarrollo de código HTML y CSS.

Podemos encontrar gran cantidad de plataformas online que permiten el desarrollo de webs, tanto personales como profesionales. Suelen ser entornos gratuitos y en función de las características que se deseen alcanzar con la página web se debe pagar por uno u otro servicio, como el alojamiento, la gestión de las compras a través de la página, etc. Es decir cuantas más funcionalidades se quieren agregar a la página más módulos se deberán comprar.

La importancia del cuaderno de diseño

El layout, a grandes rasgos, está compuesto por columnas, cabecera y pie de página. Su composición puede ser variada si jugamos con estos elementos o incluso suprimiendo alguno de ellos, por ejemplo, variando el número de columnas.

Se conoce como layout o plantilla al esquema general de la distribución de los elementos que conforman una página web. Compuesto por un conjunto de bloques en los que se insertará el contenido

Establecer la rejilla

Es importante tener el boceto de nuestra web ya definido, antes de ponernos manos a la obra, saber el número de columnas y su organización en el layout.

Debemos cuidar la colocación de cada elemento o bloque en nuestra web, ya que determinará cómo navegan los usuarios por nuestra web. Los layouts preestablecidos cada vez son menos usuales.

A continuación, veremos algunos ejemplos de ellos basados en la unidad de medida que usan para su ancho:

Clases en medida que usan para su ancho.

    • Líquida o fluida. Ocupa todo el ancho de la pantalla sin importar el tipo de dispositivo desde el que se visualice. La única diferencia entre verlo en un monitor o un móvil será el ancho de las columnas, ya que está expresado en porcentaje y eso variará dependiendo de las medidas totales.
    • Fija. El ancho siempre es el mismo, por lo que sería un inconveniente a la hora de adaptarse a todo tipo de pantallas. La unidad de medida está expresada en píxeles.
    • Elástica. El diseño se adapta dependiendo del tamaño de letra configurado por el usuario en su navegador. Si decide modificarlo, la rejilla variará con ella. La unidad de medida es em.
    • Absoluta. Se mide en unidades de medida habituales en medios impresos, como mm o cm, por lo que está casi en desuso.
    • Equiparada. Gracias a CSS establece el ancho a través de una operación matemática combinando varias unidades de medida, ya sean absolutas o relativas. Tendrá en cuenta tanto elementos que pueden varias de tamaño como otros invariables.

    • Romper la rejilla



      Debemos tener cuidado al hacerlo, puede afectar a la navegabilidad del usuario, ya que al no tener una organización coherente puede perderse o no encontrar lo que busca.



 

 

Contenido interesante.

En la actualidad existen millones de páginas web, de hecho según los datos aportados a tiempo real por Internet Live Stats estamos hablando de cifras que rondan algo más de los 1000 millones de web activas, número que se incrementa a diario. Estamos por tanto ante una nueva era de comunicación, en la que la competencia por captar usuarios es bastante alta, lo que genera la necesidad de crear un buen diseño web para garantizar el éxito de nuestro sitio.




Contenido de utilidad.

El contenido es importante para cualquier web, ya que si éste es bueno atraerá a una buena cantidad de visitantes y favorecerá además que vuelvan y permanezcan más tiempo en la página, por lo que es vital publicar contenido fresco e informativo. La temática y las búsquedas deben ir acordes con el usuario final, para evitar que abandone la navegación. Además se debe elaborar un contenido interesante para el lector, midiendo los tiempos y las maneras en las que se suministra al público. Es importante mantener un formato correcto, ordenado y coherente con el fin de facilitar al visitante la lectura y la absorción de información.



Garantizar una buena experiencia del usuario

Todo sitio web debe garantizar una buena experiencia de usuario, ya que ésta será la base que garantice un mayor número de visitas a una página. Así, una buena web debe conocer bien a su público objetivo y adecuar su arquitectura, diseño y contenido a la audiencia a la que va dirigida. Un buen entorno web debe combinar los textos con imágenes, vídeos y elementos interactivos, ya que se trata de una plataforma multimedia que ofrece un valor añadido al usuario. En definitiva se persigue un diseño atractivo. Se debe brindar al usuario un espacio para la interacción con los responsables del sitio web, para ello es importante situar en lugares visibles los datos de contacto, teléfonos y dirección. No deben enlazarse emails, sino hacer uso de formularios de contacto e incitar al usuario a contactar con los responsables o solicitar más información. Garantizar la funcionalidad de la web será clave para una buena experiencia de usuario, ya que la generación de fallos o errores durante la navegación frustraran al usuario y harán que salgan de la web.

La importancia del color

Sensación,significado del color

Conocemos muchos más sentimientos que colores. Por eso, cada color puede producir muchos efectos distintos, a menudo contradictorios. Un mismo color actúa en cada ocasión de manera diferente. El mismo rojo puede resultar erótico o brutal, inoportuno o noble. Un mismo verde puede parecer saludable, o venenoso, o tranquilizante. Esto se produce porque ningún color aparece aislado; cada color está rodeado de otros colores..

Las paletas de colores también juegan un papel importante en la vida de todos, porque si la combinación de colores no es suficiente agradable para quien la percibe, entonces no existe ninguna ventaja en el uso de los colores, así que es importante poder hacer la mejor selección de las paletas de color adecuada para nuestro proyecto

Sensación paletas de color. (Fríos)

La paleta cromática correspondiente al frío está conformada por aquellos colores que tienen una temperatura cromática reconociblemente baja, como los azules, verdes que tienden a la desaturación y algunos tonos de grises cromáticos o colores muy desaturados. En esta gama, los colores deben tender a separarse, a no mezclarse, a contrastar fuertemente ya sea por su saturación o su luminosidad y peso. De tal manera que parecieran congelados o duros como el hielo. Pero para contrarrestar la gama múltiple del verde al azul, aparecen también el blanco, color del invierno según Johannes Itten, y un gris oscuro que tiende levemente más a la calidez que al frío, pero se mantiene acorde en su desaturación y aporta un mayor peso. En el proceso, elegir una paleta cromática mayoritariamente fría, se debe tener en cuenta que no necesariamente todos los azules y verdes serán fríos.

Cálidos

La paleta cromática correspondiente al calor, está conformada por aquellos colores que son reconocidamente cálidos, como rojos intensos, amarillos que tienden al naranja y anaranjados turbios. En esta gama, los colores tienen a juntarse o fundirse como producto del calor del desierto, como la visión de los espejismos, o los materiales que se funden o entremezclan con el calor. Pero además, la experiencia cromática ha determinado que un rojo también puede aparecer como frío, o un verde sentirse cálido, es por eso que se incluyen a esta gama un tono de café neutro, que recuerda la temperatura de un buen chocolate caliente, y sobre esta línea un rosa rojizo, acompaña en analogía. Completa la paleta un violeta cálido, como contrapunto y realce de la gama.

Niños

Las variaciones de los primarios aditivos (rojo, azul y verde) constituyen el esquema básico de la gama cromática de los niños. A medida que se van combinando entre si, se va sofisticando la paleta, y se va complejizando al igual que las habilidades que va adquiriendo el niño. A medida que aumenta la edad del niño, también se incrementa su gusto por los colores y combinaciones más complejas. El negro y el gris se introducen como colores neutros y también entran en juego relaciones cromáticas de tres o sistemáticas (la utilización de dos o tres colores análogos y un acento complementario)

¿Por qué los wireframes son  una mejor idea?

En la creación de una página web o el desarrollo a medida de un proyecto para el diseño de una página web, existen al menos, 6 etapas esenciales.
No hay que olvidar que el objetivo de una página web no es otro que adaptar tu negocio al aspecto online o virtual. Para ello, el contenido debe ser continuamente actualizado y debe consolidarse, tanto diseño como contenido, con el fin de mejorar la experiencia del usuario y reducir costes en el desarrollo del proyecto en sí.
La página web, a diferencia de los documentos físicos, es un soporte que está en continua mejora o actualización y donde realmente nunca se termina de editar. Una página web está en continuo crecimiento y evolución, constantemente creciendo o evolucionando.

"Igual que todo aquello que no aparece (infinito el número en este caso), esta selección, este compromiso se relaciona íntimamente con el contenido de la obra, con la ideología del artista. De la misma manera, la jerarquización, el modo de composición es también un acto de compromiso..."

  • Diseñar consiste en adecuar distintos elementos gráficos dentro de una misma área visual, seleccionada previamente para desarrollar nuestra composición, combinándolos para que aporten un significado que pueda ser transmitido gráficamente.
    El exceso de datos gráficos puede producir ruido, que podría ocultar o enmascarar el mensaje principal de la comunicación, es decir, un diseño conformar una totalidad pero que cada una de sus partes tengan también una función específica dentro del mismo, sin interferir en los demás.
    Por lo que podemos decir que la composición es el orden adecuado y armónico de los elementos que forman un diseño, para comunicar e impactar visualmente al destinatario con la mayor claridad y efectividad posible.

  • Los elementos que se encuentran derecha del diseño poseen un mayor peso visual y dan la idea que la composición continúa.

  • Los elementos que situamos en la zona izquierda transmiten una sensación de ligereza visual.

  • Los elementos en la zona superior tienen un escaso peso.

  • En sentido general la composición es el ordenamiento y la estructuración de los elementos que componen la obra, con dos tareas principales. Una es facilitar la percepción del receptor y la otra jerarquizar los componentes, y con ello unirse orgánicamente con el contenido, expresarlo de la manera más fuerte, generar para eso un ordenamiento interior, una estructura que sirve para posibilitar el camino del receptor hacia el núcleo de la obra, manteniendo y guiando su interés por la misma.
    Pero composición no significa sólo eso, o sea la estructuración de los elementos, sino también, y, ante todo, la realización de la obra total. Más que un hecho, un gesto realizado, más que el resultado de este hecho, la composición es un hacer ininterrumpido. Podríamos decir que el proceso compositivo es también el proceso creador.
    La composición, por ser estructura también, funciona como marco. Contiene y separa lo que tiene que participar en la obra de aquello que no tiene que aparecer en ella. Componer es elegir, y en última instancia comprometerse. Lo que aparece en la obra está allá porque consciente o inconscientemente fue seleccionado por el artista.

    Wireframes

    Un wireframe para un sitio web, también conocido como un esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web.
    El wireframe esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto Usualmente este esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos.
    En otras palabras, se enfoca en “qué hace la pantalla, no cómo se ve.Los esquemas pueden ser dibujados con lápiz y papel o esquemas en una pizarra, o pueden ser producidos con medios de diseño de aplicaciones de software libre o comerciales.
    El wireframe del sitio web conecta la estructura conceptual, o arquitectura de la información, con la superficie, o diseño visual del sitio web. Los wireframes ayudan a establecer funcionalidad, y las relaciones entre las diferentes plantillas de pantallas de un sitio web. Un proceso iterativo de creación de wireframes es una forma efectiva de hacer prototipos de páginas rápidos, mientras se mide la practicidad de un concepto de diseño. Típicamente, la esquematización comienza entre “diagramas de flujo de estructuras de trabajo de alto nivel o mapas de sitio y diseños de pantallas. Dentro del proceso de construcción de un sitio web, el dibujo de un wireframe es donde el concepto se vuelve tangible.

    Identidad

    La identidad se refiere más a los aspectos visuales y tangibles que forman parte de la marca como la papelería, los anuncios, la página web, colores de la marca, tipografías, etcétera.
    La identidad de una marca son todos aquellos elementos y atributos que la hacen reconocible e identificable y que, además, generan una interpretación por parte de las personas que entran en contacto con ella.
    Es necesario identificar los dos aspectos que la componen: la personalidad y la imagen. La personalidad son todos aquellos elementos que la marca escoge como propios, en pocas palabras se habla de quién es la marca, cómo quiere ser vista y cómo la marca se ve a sí misma.

Gracias al layout mantenemos una web organizada y alineada que nos ayudará a tener un resultado limpio y coherente, rompiendo la rejilla podemos causar desconcierto en el usuario, ya que corremos el riesgo de que no entienda la navegabilidad de la web y la abandone, sin embargo, si hacemos una ruptura de ella muy radical, el usuario visualmente percibirá la idea, y por ello suponga que se trata de una web diferente.
En lo que respecta a la tipografía, la rejilla ayuda a una buena organización que ayudará a la legibilidad de los textos, tan sólo con que algunos textos no estén bien alineados respecto a otros pueden echar al usuario literalmente de nuestro sitio.

Tener en cuenta

Si pretendemos mantener un equilibrio visual, romper la rejilla no es la mejor de las ideas, ya que tendremos que hacer malabares visuales para ello. Ahora si pretendemos impactar realmente, cuando más exagerado sea ese desequilibrio más sensación causará.
Desarrollar una web rompiendo la rejilla puede limitar mucho tu proyecto a medio o largo plazo, puede restringir mucho el desarrollo o evolución de la misma web y dificultar enormemente la creación de otras webs secundarias o satélites.

Dichos

  Desarrollo Web

Desarrollo web es un término que define la creación de sitios web para Internet o una intranet.
Para conseguirlo se hace uso de tecnologías de software del lado del servidor y del cliente que involucran una combinación de procesos de base de datos con el uso de un navegador web a fin de realizar determinadas tareas o mostrar información.
La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos.
El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. A menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.






Dichos

Su trabajo va a ocupar una gran parte de su vida, y la única forma de estar verdaderamente satisfecho es hacer lo que cree que es un gran trabajo. Y la única forma de hacer un gran trabajo es amar lo que haces. Si aún no lo ha encontrado, siga buscando. No te conformes. Como con todos los asuntos del corazón, sabrá cuando lo encuentre.

Steve Jobs

El buen diseño es el menor diseño posible.

Dieter Rams

Paginas interesantes



Contacto

Aquí puede dejar sus comentarios

Aqui su Mensaje

* son obligatorios
Something went wrong. Please try again.
Your message was sent, thank you!

Contacto Información

Dirección

Río Manzanares-27-1-C
28913 Leganés
Madrid

Email

miguelvalencia@mvvdesing.info

Teléfono

(34) 655115423