­čąç ┬┐Qu├ę es el Dise├▒o Web y para que sirve?

julio 31, 2019 0 Por Diswebcriscool
dise├▒o web
dise├▒o web

El diseño web se refiere al diseño de sitios web que se muestran en Internet. Generalmente se refiere a los aspectos de la experiencia del usuario en el desarrollo de sitios web más que en el desarrollo de software.

El dise├▒o web sol├şa centrarse en el dise├▒o de sitios web para navegadores de escritorio; sin embargo, desde mediados de los a├▒os 2010, el dise├▒o para navegadores m├│viles y de tableta ha adquirido una importancia cada vez mayor.

Un dise├▒ador web trabaja en la apariencia, dise├▒o y, en algunos casos, contenido de un sitio web.

La apariencia, por ejemplo, se relaciona con los colores, la fuente y las imágenes utilizadas.

La disposici├│n se refiere a c├│mo se estructura y clasifica la informaci├│n.

Un buen dise├▒o web es f├ícil de usar, est├ęticamente agradable, y se adapta al grupo de usuarios y a la marca del sitio web.

Muchas páginas web están diseñadas con un enfoque en la simplicidad, de modo que no aparece ninguna información extraña ni funcionalidad que pueda distraer o confundir a los usuarios.

Como la piedra angular de la producci├│n de un dise├▒ador web es un sitio que gana y fomenta la confianza de la audiencia objetivo, la eliminaci├│n de tantos puntos potenciales de frustraci├│n del usuario como sea posible es una consideraci├│n cr├ştica.

Dos de los m├ętodos m├ís comunes para dise├▒ar sitios web que funcionan bien tanto en el escritorio como en el m├│vil son el dise├▒o receptivo y adaptativo.

En el diseño sensible, el contenido se mueve dinámicamente dependiendo del tamaño de la pantalla; en el diseño adaptativo, el contenido del sitio web se fija en tamaños de diseño que coinciden con los tamaños de pantalla comunes.

Preservar una distribución lo más coherente posible entre los dispositivos es crucial para mantener la confianza y el compromiso de los usuarios.

dise├▒o web

Dado que un dise├▒o receptivo puede presentar dificultades en este sentido, los dise├▒adores deben tener cuidado al renunciar al control de la apariencia de su trabajo.

Si son responsables tambi├ęn del contenido, mientras que pueden necesitar ampliar sus habilidades, disfrutar├ín de la ventaja de tener el control total del producto terminado.

A continuación colocaremos varias de las preguntas más frecuentes en internet, respecto al diseño web.

  • Cual fue la Evoluci├│n del dise├▒o web?
  • Cual fue el fin de las primeras guerras de navegadores?
  • Cuales son las principales herramientas y tecnolog├şas en el dise├▒o web?
  • Cual fue el inicio de la web y el dise├▒o web?

En 1989, mientras trabajaba en el CERN, Tim Berners-Lee propuso crear un proyecto global de hipertexto, que más tarde se conoció como World Wide Web.

Entre 1991 y 1993 naci├│ la World Wide Web. Las p├íginas de s├│lo texto se pod├şan ver usando un simple navegador en modo l├şneaEn 1993 Marc Andreessen y Eric Bina crearon el navegador Mosaic.

En ese momento hab├şa varios navegadores, sin embargo, la mayor├şa de ellos estaban basados en Unix y, por supuesto, eran de texto pesado.

 No ha habido un enfoque integrado de los elementos del dise├▒o gr├ífico, como las im├ígenes o los sonidos.

El navegador Mosaico rompi├│ este molde El W3C fue creado en octubre de 1994 para «llevar a la World Wide Web a su m├íximo potencial mediante el desarrollo de protocolos comunes que promuevan su evoluci├│n y garanticen su interoperabilidad», lo que disuadi├│ a cualquier empresa de monopolizar un navegador y un lenguaje de programaci├│n propios, lo que podr├şa haber alterado el efecto de la World Wide Web en su conjunto.

El W3C sigue estableciendo est├índares, que hoy en d├şa se pueden ver con JavaScript. En 1994 Andreessen form├│ Communications Corp. que m├ís tarde se conoci├│ como Netscape Communications, el navegador Netscape 0.9.

Netscape cre├│ sus propias etiquetas HTML sin tener en cuenta el proceso de los est├índares tradicionales. Por ejemplo, Netscape 1.1 inclu├şa etiquetas para cambiar los colores de fondo y formatear el texto con tablas en las p├íginas web. Entre 1996 y 1999 comenzaron las guerras de navegadores, cuando Microsoft y Netscape lucharon por el dominio definitivo de los navegadores.

Durante este tiempo hubo muchas nuevas tecnolog├şas en el campo, notablemente Hojas de Estilo en Cascada, JavaScript y HTML Din├ímico. En general, la competencia de navegadores llev├│ a muchas creaciones positivas y ayud├│ a que el dise├▒o web evolucionara a un ritmo r├ípido.

Cual fue la Evoluci├│n del dise├▒o web?

dise├▒o web
Dise├▒o web

En 1996, Microsoft lanz├│ su primer navegador competitivo, que estaba completo con sus propias caracter├şsticas y etiquetas.

Tambi├ęn fue el primer navegador en soportar hojas de estilo, lo que en ese momento se consideraba una t├ęcnica de autor├şa poco clara El marcado HTML de las tablas estaba originalmente destinado a mostrar datos tabulares.

Sin embargo, los dise├▒adores r├ípidamente se dieron cuenta del potencial de usar tablas HTML para crear los complejos dise├▒os de varias columnas que de otra manera no ser├şan posibles.

En ese momento, el dise├▒o y la buena est├ętica parec├şan tener prioridad sobre una buena estructura de marcado, y se prest├│ poca atenci├│n a la sem├íntica y a la accesibilidad web.

Las opciones de diseño de los sitios HTML eran limitadas, más aún con las versiones anteriores de HTML.

Para crear dise├▒os complejos, muchos dise├▒adores web tuvieron que utilizar estructuras de tabla complicadas o incluso utilizar im├ígenes GIF con espaciadores en blanco para evitar que las celdas vac├şas de la tabla se colapsaran El CSS fue introducido en diciembre de 1996 por el W3C para apoyar la presentaci├│n y el dise├▒o.

Esto permitió que el código HTML fuera semántico en lugar de semántico y de presentación, y mejoró la accesibilidad web, ver diseño web sin tablas.

En 1996, se desarroll├│ Flash (originalmente conocido como FutureSplash).

En aquel momento, la herramienta de desarrollo de contenido Flash era relativamente sencilla en comparaci├│n con la actual, ya que utilizaba herramientas b├ísicas de dise├▒o y dibujo, un precursor limitado de ActionScript y una l├şnea de tiempo, pero permit├şa a los dise├▒adores web ir m├ís all├í del HTML, los GIF animados y JavaScript.

Sin embargo, debido a que Flash requer├şa un plug-in, muchos desarrolladores web evitaron utilizarlo por miedo a limitar su cuota de mercado debido a la falta de compatibilidad.

En su lugar, los diseñadores volvieron a las animaciones gif (si no renunciaban al uso de gráficos en movimiento) y JavaScript para los widgets.

Pero los beneficios de Flash lo hicieron lo suficientemente popular entre los mercados objetivo espec├şficos como para llegar a la gran mayor├şa de los navegadores, y lo suficientemente potente como para ser utilizado para desarrollar sitios enteros[6].

Cual fue el fin de las primeras guerras de navegadores?

Durante 1998 Netscape public├│ el c├│digo de Netscape Communicator bajo una licencia de c├│digo abierto, lo que permiti├│ a miles de desarrolladores participar en la mejora del software.

Sin embargo, decidieron comenzar desde el principio, lo que gui├│ el desarrollo del navegador de c├│digo abierto y pronto se expandi├│ a una plataforma de aplicaciones completa.

El Proyecto de Estándares Web se formó y promovió el cumplimiento de los estándares HTML y CSS por parte del navegador mediante la creación de las pruebas Acid1, Acid2 y Acid3. 2000 fue un gran año para Microsoft.

Internet Explorer fue lanzado para Mac; esto fue significativo ya que fue el primer navegador que soport├│ completamente HTML 4.01 y CSS 1, elevando el list├│n en t├ęrminos de cumplimiento de est├índares.

Tambi├ęn fue el primer navegador en soportar completamente el formato de imagen PNG Durante este tiempo Netscape fue vendido a AOL y esto fue visto como la p├ęrdida oficial de Netscape para Microsoft en las guerras de navegadores.

Cuales son las principales herramientas y tecnolog├şas en el dise├▒o web?

Los diseñadores web utilizan una variedad de herramientas diferentes dependiendo de la parte del proceso de producción en la que están involucrados.

 Estas herramientas se actualizan con el tiempo con nuevos est├índares y software, pero los principios que las sustentan siguen siendo los mismos.

Los diseñadores web utilizan editores gráficos vectoriales y ráster para crear imágenes en formato web o prototipos de diseño.

Las tecnolog├şas utilizadas para crear sitios web incluyen est├índares W3C como HTML y CSS, que pueden ser codificados a mano o generados por el software de edici├│n WYSIWYG.

Otras herramientas que los dise├▒adores web pueden utilizar incluyen validadores de marcas y otras herramientas de prueba de usabilidad y accesibilidad para asegurar que sus sitios web cumplen con las pautas de accesibilidad web.

Habilidades y t├ęcnicas principales?

Dise├▒o de marketing y comunicaci├│n

El dise├▒o de marketing y comunicaci├│n en un sitio web puede identificar lo que funciona para su mercado objetivo.

Puede ser un grupo de edad o una rama particular de la cultura; por lo tanto, el dise├▒ador puede entender las tendencias de su p├║blico.

Los dise├▒adores tambi├ęn pueden entender el tipo de sitio web que est├ín dise├▒ando, lo que significa, por ejemplo, que las consideraciones de dise├▒o de un sitio web de empresa a empresa (B2B) pueden diferir en gran medida de un sitio web dirigido al consumidor, como un sitio web de venta al por menor o de entretenimiento.

Se podr├şa considerar cuidadosamente que la est├ętica o el dise├▒o general de un sitio no choque con la claridad y exactitud del contenido o la facilidad de navegaci├│n en la web, especialmente en un sitio web B2B.

Los dise├▒adores tambi├ęn pueden tener en cuenta la reputaci├│n del propietario o de la empresa a la que representa el sitio para asegurarse de que se les presenta de forma favorable.

Dise├▒o de experiencias de usuario y dise├▒o interactivo

La comprensi├│n del contenido de un sitio web por parte del usuario depende a menudo de la comprensi├│n del funcionamiento del sitio web. Esto es parte del dise├▒o de la experiencia de usuario.

La experiencia del usuario está relacionada con el diseño, las instrucciones claras y el etiquetado de un sitio web.

El grado en que un usuario entiende c├│mo puede interactuar en un sitio tambi├ęn puede depender del dise├▒o interactivo del sitio.

Si un usuario percibe la utilidad del sitio web, es más probable que continúe utilizándolo. Los usuarios que son expertos y están bien versados en el uso del sitio web pueden encontrar útil una interfaz web más distintiva, pero menos intuitiva o menos amigable para el usuario.

Sin embargo, los usuarios con menos experiencia son menos propensos a ver las ventajas o utilidad de una interfaz web menos intuitiva.

Esto impulsa la tendencia a una experiencia de usuario más universal y a la facilidad de acceso para acomodar a tantos usuarios como sea posible, independientemente de la habilidad del usuario Gran parte del diseño de la experiencia de usuario y del diseño interactivo se consideran en el diseño de la interfaz de usuario.

Las funciones interactivas avanzadas pueden requerir plug-ins, si no conocimientos avanzados de codificaci├│n.

La elecci├│n de utilizar o no interactividad que requiera plug-ins es una decisi├│n cr├ştica en el dise├▒o de la experiencia del usuario.

Si el plug-in no viene preinstalado en la mayor├şa de los navegadores, existe el riesgo de que el usuario no tenga ni el conocimiento ni la paciencia para instalar un plug-in s├│lo para acceder al contenido.

Si la función requiere conocimientos avanzados de codificación, puede ser demasiado costoso en tiempo o dinero para codificar en comparación con la cantidad de mejoras que la función añadirá a la experiencia del usuario.

Tambi├ęn existe el riesgo de que la interactividad avanzada sea incompatible con navegadores o configuraciones de hardware m├ís antiguos.

Publicar una funci├│n que no funciona de forma fiable es potencialmente peor para la experiencia del usuario que no intentarlo.

Depende de la audiencia objetivo si es probable que sea necesario o que valga la pena correr riesgos.

Diseño de página

Parte del diseño de la interfaz de usuario se ve afectada por la calidad del diseño de la página. Por ejemplo, un diseñador puede considerar si el diseño de la página del sitio debe permanecer consistente en diferentes páginas cuando diseña el diseño.

El ancho de p├şxel de la p├ígina tambi├ęn se puede considerar vital para alinear objetos en el dise├▒o de la maqueta.

Los sitios web de ancho fijo más populares generalmente tienen el mismo ancho establecido para que coincida con la ventana del navegador más popular, con la resolución de pantalla más popular, y con el tamaño de monitor más popular.

La mayor├şa de las p├íginas tambi├ęn est├ín alineadas en el centro para preocupaciones de est├ętica en pantallas m├ís grandes.

La popularidad de los dise├▒os de fluidos aument├│ alrededor del a├▒o 2000 como una alternativa a los dise├▒os basados en tablas HTML y en cuadr├şculas, tanto en el principio de dise├▒o de dise├▒o de p├íginas como en la t├ęcnica de codificaci├│n, pero su adopci├│n fue muy lenta, debido a las consideraciones de los dispositivos de lectura de pantalla y a los diferentes tama├▒os de ventanas sobre los que los dise├▒adores no tienen control alguno.

En consecuencia, un dise├▒o puede dividirse en unidades (barras laterales, bloques de contenido, ├íreas de publicidad incrustadas, ├íreas de navegaci├│n) que se env├şan al navegador y que el navegador introducir├í en la ventana de visualizaci├│n, de la mejor manera posible.

Como el navegador reconoce los detalles de la pantalla del lector (tama├▒o de la ventana, tama├▒o de la fuente en relaci├│n con la ventana, etc.), el navegador puede hacer ajustes de dise├▒o espec├şficos del usuario a los dise├▒os de fluido, pero no a los dise├▒os de ancho fijo.

Aunque esta visualizaci├│n puede cambiar a menudo la posici├│n relativa de las principales unidades de contenido, las barras laterales pueden desplazarse por debajo del texto del cuerpo en lugar de estar al lado del mismo.

Se trata de una pantalla m├ís flexible que un dise├▒o basado en una cuadr├şcula de c├│digo duro que no se ajusta a la ventana del dispositivo.

En particular, la posici├│n relativa de los bloques de contenido puede cambiar sin que el contenido del bloque se vea afectado.

Esto tambi├ęn minimiza la necesidad del usuario de desplazarse horizontalmente por la p├ígina.

Responsive Web Design es un nuevo enfoque, basado en CSS3, y un nivel m├ís profundo de especificaci├│n por dispositivo dentro de la hoja de estilo de la p├ígina mediante un uso mejorado de la regla CSS @media. En marzo de 2018, Google anunci├│ que pondr├şa en marcha la indexaci├│n de m├│viles en primer lugar.

Fuentes informativas:

https://www.squarespace.com/website-design

https://www.thebestdesigns.com/

https://www.awwwards.com/95-inspiring-websites-of-web-design-agencies.html

https://en.wikipedia.org/wiki/Web_design

https://webflow.com/blog/20-web-design-trends-for-2019

https://www.webdesign.org/

https://www.interaction-design.org/literature/topics/web-design