Diseño web

Diseño web abarca muchos diferentes habilidades y disciplinas en la producción y mantenimiento de sitios Web. Las diferentes áreas de diseño web incluyen el diseño gráfico de la web; diseño de la interfaz; creación de contenidos, incluyendo el código estandarizado y software privativo; diseño de experiencia de usuario; y posicionamiento en buscadores. A menudo muchas personas trabajarán en equipos que cubren diferentes aspectos del proceso de diseño, aunque algunos diseñadores cubrirá a todos. El diseño de la web de término se utiliza normalmente para describir el proceso de diseño relacionadas con el front-end diseño (lado cliente) de un sitio web, incluyendo elaboración de marca. Diseño web se superpone parcialmente Ingeniería Web en el ámbito más amplio de Desarrollo Web. Se espera que los diseñadores web tener una conciencia de facilidad de uso y si su función consiste en la creación de marca para arriba entonces que también deben estar al día con accesibilidad web directrices.

Historia

Libros de diseño web en una tienda

1988-2001

Diseño web tiene una historia bastante reciente, puede vincularse a otras áreas como diseño gráfico. Sin embargo diseño web también puede verse desde un punto de vista tecnológico. Se ha convertido en una gran parte de la vida cotidiana de las personas. Es difícil imaginar Internet sin gráficos animados, diferentes estilos de tipografía, fondo y música.

El inicio de la web y diseño web

En 1989, mientras trabajaba en CERN Tim Berners-Lee propone crear un proyecto de hipertexto global, que más tarde se conoció como la World Wide Web. Durante 1991 a 1993 nació la World Wide Web. Páginas sólo de texto podrían verse con un navegador en modo de línea simple. En 1993 Marc Andreessen y Eric Bina, creó la Navegador Mosaic. Al tiempo hubo varios exploradores, sin embargo la mayoría de ellos estaban basados en Unix y naturalmente texto pesado. No ha habido ningún planteamiento integrado a los elementos de diseño gráfico como imágenes o sonidos. El navegador Mosaic rompió este molde. El W3C fue creado en octubre de 1994 para "liderar la World Wide Web a su máximo potencial mediante el desarrollo de protocolos comunes que promuevan su evolución y aseguran su interoperabilidad." Esto desalentó a cualquier uno empresa de monopolizar un navegador propiedad y programación lengua, que podría haber alterado el efecto de la World Wide Web como un todo. El W3C continúa estableciendo estándares, que pueden verse hoy con JavaScript. En 1994, Andreessen formado Communications Corp. que más adelante se conocía como Netscape Communications, el navegador Netscape 0.9. Netscape crea sus propias etiquetas HTML sin tener en cuenta el proceso de estándares tradicionales. Por ejemplo, Netscape 1.1 incluyen etiquetas para cambiar colores de fondo y dar formato al texto con tablas en las páginas web. A lo largo de 1996 a 1999 la Guerra de navegadores comenzó, como Microsoft y Netscape luchó por la dominación definitiva del navegador. Durante este tiempo hubo muchas nuevas tecnologías en el campo, en particular Hojas de estilo en cascada, JavaScript, y HTML dinámico. En general, la competencia de navegador dio lugar a muchas creaciones positivo y ayudó a diseño web evolucionan a un ritmo rápido.

Evolución del diseño web

En 1996, Microsoft lanzó su primer navegador competitivo, que se completa con sus propias características y etiquetas. También fue el primer navegador para soportar hojas de estilo, que al tiempo fue visto como una técnica de edición oscura. El Formato HTML para tablas fue pensada originalmente para Mostrar datos tabulares. Sin embargo los diseñadores rápidamente se dio cuenta de la posibilidad de utilizar tablas HTML para crear los diseños complejos y múltiples columnas que de lo contrario no eran posibles. En este momento, como diseño y buena estética parecía prevalecer sobre la buena estructura del mark-up y se presta poca atención a la semántica y accesibilidad web. Sitios HTML fueron limitados en sus opciones de diseño, más aún con las versiones anteriores de HTML. Para crear diseños complejos, muchos diseñadores web tenían estructuras de tabla complicada o incluso usar en blanco espaciador. GIF imágenes para detener las celdas de tabla vacía de derrumbarse. CSS fue introducido en diciembre de 1996 por el W3C apoyar la presentación y el diseño. Esto permitió HTML código semántico en lugar de tanto accesibilidad de web semántica y presentación y mejor, ver diseño web sin tablas.

En 1996, Flash (originalmente conocido como FutureSplash) fue desarrollado. En el momento, el Flash contenido herramienta de desarrollo es relativamente simple comparado con ahora, utilizando la disposición básica y dibujo herramientas, un precursor de la limitada ActionScripty una línea de tiempo, pero diseñadores de web es activado para ir más allá del punto de código HTML, GIFs animados y JavaScript. Sin embargo, debido a que Flash se requiere un plug-in, muchos desarrolladores web evitar usarlo por miedo a limitar su mercado compartan debido a la falta de compatibilidad. En cambio, los diseñadores volvieron a animaciones gif (si ellos no renuncian a usar gráficos de movimiento en conjunto) y JavaScript para widgets. Pero los beneficios de Flash lo suficientemente popular entre los mercados específicos a trabajar eventualmente su camino a la gran mayoría de los navegadores y lo suficientemente poderoso como para ser utilizado para desarrollar sitios completos.

Final de la primera guerra de navegadores

En 1998 Netscape lanzó el código de Netscape Communicator en un licencia de código abierto, permitiendo a miles de desarrolladores a participar en la mejora del software. Sin embargo, decidieron empezar desde el principio, 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 fue explorador formado y promovido el cumplimiento HTML y CSS mediante la creación de las normas Acid1, Acid2, y Acid3 pruebas. 2000 fue un gran año para Microsoft. Internet Explorer fue lanzada para Mac; Esto fue significativo como lo fue el primer navegador que apoyaba plenamente HTML 4.01 y CSS 1, elevando el nivel en términos de cumplimiento de los estándares. También fue el primer navegador para apoyar plenamente a la PNG formato de imagen. Durante este tiempo Netscape fue vendida a AOL y esto fue visto como la pérdida oficial de Netscape a Microsoft en la guerra de navegadores.

2001-2012

Desde el inicio del siglo XXI Internet ha integrarse más en la vida de las personas. Como esto ha sucedido la tecnología de la web también ha pasado. También ha habido cambios significativos en la manera de la gente utilice y acceder a la web, y esto ha cambiado, cómo están diseñados los sitios.

Desde el final de la Guerras de navegadores nuevos navegadores han sido liberados. Muchos de estos son código abierto lo que significa que tienden a tener el desarrollo más rápido y son más de apoyo de nuevas normas. Las nuevas opciones son consideradas por muchos a ser mejores que los de Microsoft Internet Explorer.

El W3C ha publicado nuevos estándares para HTML)HTML5) y () CSSCSS3), así como nuevos JavaScript De API, cada uno como un estándar nuevo pero individual. Mientras que el término sólo se utiliza para referirse a la nueva versión de HTML HTML5 y algunos el JavaScript de la API, se ha vuelto común usarlo para referirse a la serie completa de nuevos estándares (HTML5, CSS3 y JavaScript).

En 2016, el término "web Brutalismo"fue aplicado al diseño web que enfatizaba la presentación simple y carga de página rápida.

Herramientas y tecnologías

Diseñadores web utilizan una variedad de diferentes herramientas dependiendo de qué parte del proceso de producción participan en. Estas herramientas son actualizadas en el tiempo por estándares más nuevos y software, sino los principios detrás de ellos siguen siendo los mismos. Diseñadores web utilizan ambos Vector de y Raster Editores gráficos para crear prototipos de imágenes o diseño con formato web. Tecnologías utilizadas para crear sitios web incluyen estándares de W3C como HTML y CSS, que pueden ser codificadas a mano o generado por Software de edición WYSIWYG. Otras herramientas web diseñadores uso incluiría marca para arriba Validadores de mantenimiento del y otras herramientas de testing de usabilidad y accesibilidad para sus sitios web cumplen con las pautas de accesibilidad web.

Habilidades y técnicas

Diseño de marketing y comunicación

Diseño de marketing y comunicación en un sitio web puede identificar lo que funciona para su mercado objetivo. Esto puede ser un grupo de edad o un filamento particular de la cultura; así el diseñador puede comprender 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, (B2B) Business-to-business diseño web consideraciones pueden diferir grandemente de un consumidor objetivo web tales como un venta por menor o sitio web de entretenimiento. Cuidadosa consideración podría hacerse para asegurar que la estética o diseño general de un sitio de no entrar en conflicto con la claridad y la exactitud del contenido o la facilidad de navegación web, especialmente en un sitio web B2B. Los diseñadores también pueden considerar la reputación del propietario o negocio el sitio representa para asegurarse de que son retratadas favorable.

Diseño de experiencia de usuario y diseño interactivo

Comprensión del usuario del contenido de un sitio web a menudo depende de la comprensión del usuario del funcionamiento del sitio Web. Esto es parte de la diseño de experiencia de usuario. La experiencia del usuario está relacionada con diseño, instrucciones claras y etiquetado en un sitio Web. Cómo bien un usuario entiende cómo interactúan en un sitio puede también depender de la diseño interactivo del sitio. Si un usuario percibe la utilidad del sitio web, son más probables a seguir utilizándolo. Los usuarios que son calificados y bien informados con el uso del sitio web pueden encontrar una más distintivas, aún menos intuitivo o menos fácil de usar sitio web interfaz útil sin embargo. Sin embargo, los usuarios con menos experiencia son menos propensos a ver las ventajas o la utilidad de una menos intuitiva interfaz Web. Esto conduce a la tendencia de una experiencia de usuario más universal y la facilidad de acceso para dar cabida a tantos usuarios como sea posible independientemente de la habilidad del usuario. Gran parte del diseño de experiencia de usuario y diseño de interacción se consideran en la diseño de interfaz de usuario.

Funciones interactivas avanzadas pueden requerir plug-ins Si no es lenguaje de codificación avanzada. Elegir si o no utilizar la interactividad requiere plug-in es una importante decisión en diseño de experiencia de usuario. Si el complemento no viene pre-instalado en la mayoría de los navegadores, hay un riesgo que el usuario tenga ni el saber cómo o la paciencia para instalar un plug-in para acceder al contenido. Si la función requiere avanzada codificación de lenguaje, puede ser demasiado costoso en cualquier tiempo o dinero para código en comparación con la cantidad de la mejora de la función se sumará a la experiencia del usuario. También es un riesgo que el avanzado de interactividad puede ser incompatible con navegadores antiguos o configuraciones de hardware. Una función que no funciona confiablemente es potencialmente peor para la experiencia del usuario que no realizar ningún esfuerzo. Depende de la audiencia, si es probable que sea necesario o vale la pena cualquier riesgo.

Diseño de página

Parte del diseño de interfaz de usuario se ve afectada por la calidad de la diseño de página. Por ejemplo, un diseñador puede considerar si diseño de página del sitio debe seguir siendo constante en las diferentes páginas al diseñar el diseño. Ancho de píxel de página también pueden considerarse vital para alinear objetos en el diseño. Las webs más populares de la fijo-anchura generalmente tienen el mismo ancho ajustado para que coincida con la ventana actual del navegador más popular, en la resolución actual de pantalla más popular, sobre el tamaño actual de monitor más popular. Mayoría de las páginas es también alineado al centro para los problemas de estética en pantallas más grandes.

Diseños líquidos creciente popularidad alrededor de 2000 como una alternativa a los diseños basados en tablas HTML y diseño basado en grid en tanto principio de diseño de diseño de página y en la técnica de codificación, pero eran muy lentos para adoptar. Esto fue debido a las consideraciones de dispositivos de lectura de pantalla y tamaños de ventanas que los diseñadores no tienen ningún control sobre. Por consiguiente, un diseño puede dividirse en unidades (barras laterales, bloques de contenido, publicidad integrado áreas, zonas de navegación) que son enviados al navegador y que se instalarán en la ventana de visualización del navegador, como mejor puede. Como el navegador de reconocer los detalles de la pantalla del lector (tamaño de la ventana, tamaño de fuente en relación con la ventana etc.) el explorador puede hacer ajustes específicos de usuario diseño diseños fluidos, pero no fijo-anchura de diseños. Aunque tal exhibición a menudo puede cambiar la posición relativa de grandes unidades de contenidos, barras laterales pueden ser desplazados por debajo cuerpo del texto en lugar de al lado de él. Se trata de una exhibición más flexible que un código red diseño que no se ajusta a la ventana del dispositivo. En particular, la posición relativa de los bloques de contenido se puede cambiar dejando el contenido dentro del bloque afectado. Esto también minimiza la necesidad del usuario para desplazar horizontalmente la página.

Diseño Web responsivo es un enfoque más reciente, basado en CSS3 y un nivel más profundo de la especificación de cada dispositivo dentro de la hoja de estilo de la página a través de un mayor uso del CSS @media regla.

Tipografía

Diseñadores web pueden optar por limitar la variedad de tipografías Web en sólo unos pocos que son de un estilo similar, en lugar de utilizar una amplia gama de tipos de letra o estilos de tipo. Mayoría de los navegadores reconoce un número específico de fuentes seguras, que los diseñadores utilizan principalmente para evitar las complicaciones.

Descarga de fuente fue incluido más adelante en el módulo de la fuentes de CSS3 y desde entonces ha sido implementado en Safari 3.1 y Opera 10, Mozilla Firefox 3.5. Posteriormente esto ha aumentado interés en tipografía Web, así como el uso de descarga de la fuente.

Más diseños de sitio incorporan espacio negativo para romper el texto en párrafos y también evitar el texto alineado al centro.

Gráficos de movimiento

La interfaz de usuario y diseño de página también puede ser afectada por el uso de gráficos de movimiento. La opción de si o no utilizar gráficos de movimiento puede depender el mercado objetivo de la Página Web. Gráficos de movimiento pueden ser esperados o recibió por lo menos mejor con un sitio web orientado al entretenimiento. Sin embargo, un público sitio web con un interés más serio o formal (por ejemplo, empresa, comunidad o gobierno) podría encontrar animaciones innecesarias y distracción si únicamente para fines de entretenimiento o decoración. Esto no quiere decir que contenido más serio no podía mejorarse con presentaciones animadas o videos que sea pertinente para el contenido. En cualquier caso, diseño gráfico de movimiento puede hacer la diferencia entre efectos visuales más eficaces o visuales que distraigan.

Gráficos de movimiento que no son iniciados por el visitante del sitio pueden producir problemas de accesibilidad. Las normas de accesibilidad del Consorcio World Wide Web requieren que los visitantes sean capaces de desactivar las animaciones.

Calidad de código

Diseñadores de sitios web pueden considerar que es buena práctica para ajustarse a las normas. Esto se hace generalmente vía una descripción especifica de lo que está haciendo el elemento. Falta de conformidad a las normas no puede hacer un sitio web inservible o error propenso, pero estándares pueden relacionarse con el correcto diseño de páginas para facilitar la lectura, así asegurándose de que elementos codificados se cierran adecuadamente. Esto incluye errores en código, más organizado diseño para código y asegurarse de IDs y clases son identificadas correctamente. A veces familiar se llaman páginas mal codificado sopa de la etiqueta. Validación de W3C sólo es posible cuando se hace una declaración DOCTYPE correcto, que se utilizan para destacar los errores en el código. El sistema identifica los errores y áreas que no cumplen con estándares de diseño web. Esta información luego puede ser corregida por el usuario.

Contenido generado

Hay dos formas se genera sitios web: estáticamente o dinámicamente.

Sitios Web estático

Artículo principal: Página web estática

Un sitio Web estático almacena un archivo único para cada página de un sitio Web estático. Cada vez que se solicita la página, se devuelve el mismo contenido. Este contenido es creado una vez, durante el diseño del sitio Web. Generalmente manual escrito, aunque algunos sitios utilizan un proceso de creación automatizado, similar a un sitio web dinámico, cuyos resultados se almacenan a largo plazo como páginas terminados. Estos sitios estáticos creados automáticamente se convirtió en más populares alrededor de 2015, con generadores como Jekyll y Adobe Muse.

Los beneficios de un sitio Web estático son que eran fácil de host, como su servidor sólo debían servir contenido estático, no ejecutar secuencias de comandos del servidor. Esto requiere menos administración y tuvo menos oportunidad de exponer los agujeros de seguridad. También podrían servir páginas más rápidamente, en hardware de servidor de bajo costo. Estas ventaja llegó a ser menos importante como barato web hosting ampliado para también ofrecer características dinámicas, y servidores virtuales ofrece alto rendimiento para intervalos cortos a bajo costo.

Casi todos los sitios web tienen algún contenido estático, como un apoyo a activos tales como imágenes y hojas de estilo son generalmente estáticas, incluso en un sitio web con páginas muy dinámicas.

Sitios web dinámicos

Artículo principal: Página web dinámica

Webs dinámicas se generan sobre la marcha y utilizan la tecnología del lado servidor para generar páginas Web. Por lo general se extrae su contenido de bases de datos de back-end de uno o más: algunos son consultas de base de datos a través de una base de datos relacional para consultar un catálogo o resumir información numérica, otros pueden utilizar un base de datos documental tales como MongoDB o NoSQL para almacenar unidades más grandes de contenido, como entradas en el blog o artículos.

En el proceso de diseño, páginas dinámicas son a menudo burlado o transporte uso de páginas estáticas. El conjunto de habilidades necesaria para desarrollar páginas web dinámicas es mucho más amplio que una páginas estáticas, con servidor y base de datos de codificación así como diseño de la interfaz del lado del cliente. Proyectos dinámicos incluso medianas son casi siempre un esfuerzo de equipo.

Cuando desarrollado páginas web dinámicas, ellos típicamente fueron cifrados directamente en idiomas tales como Perl, PHP o ASP. Algunos de estos, especialmente PHP y ASP, utilizan un enfoque de 'plantilla' donde una página del servidor se asemejaba a la estructura de la página completa de cliente y datos fue insertados en lugares definidos por 'etiquetas'. Esto era un medio más rápido de desarrollo de codificación en un lenguaje de codificación puramente procesal como Perl.

Ambos de estos enfoques han ahora sido suplantados para muchos sitios web de alto nivel centradas en aplicación de herramientas tales como sistemas de gestión de contenidos. Estos construcción encima de codificación plataformas de propósito general y asuman que existe un sitio web para ofrecer contenido de acuerdo con uno de varios modelos bien reconocidos, como una secuencia de tiempo blog, un sitio temático de la revista o noticias, un wiki o un foro. Estas herramientas hacen de la implementación de un sitio muy fácil y una tarea puramente organizativa y basado en el diseño, sin necesidad de cualquier codificación.

Diseño de página web

Expertos en usabilidad, incluyendo Jakob Nielsen y Kyle Soucy, a menudo enfatiza el diseño de la Página principal para el éxito del sitio web y afirmó que la página es la página más importante en un sitio Web. Sin embargo los profesionales en la década del 2000 estaban empezando a encontrar que un número creciente de tráfico de la página web fue pasar por la página, va directamente a páginas de contenido internos a través de motores de búsqueda, boletines y RSS feeds. Llevando muchos practicantes para argumentar que páginas web es menos importantes de lo que piensa la mayoría de las personas. Jared Spool sostuvieron en 2007 que la Página principal de un sitio era realmente la página menos importante en un sitio Web.

En 2012 y 2013, carruseles (también llamados 'sliders' y 'rotar banners') se han convertido en un elemento de diseño muy popular en páginas web, utilizada a menudo para presentar contenido reciente o recomendado en un espacio confinado. Muchos médicos sostienen que carruseles son un elemento de diseño ineficaz y lastimar la optimización del motor de búsqueda de un sitio web y la usabilidad.

Ocupaciones

Hay dos trabajos primarios involucrados en la creación de un sitio web: el diseñador de web y Desarrollador Web, que a menudo trabajan juntos en un sitio Web. Los diseñadores web son responsables por el aspecto visual, que incluye el diseño, color y tipografía de una página web. Diseñadores web también tendrá un conocimiento de trabajo de lenguajes de marcado como HTML y CSS, aunque la medida de sus conocimientos será diferente de un diseñador a otro. Particularmente en las organizaciones más pequeñas una persona tendrá los conocimientos necesarios para el diseño y programación de la página web completa, mientras que organizaciones más grandes pueden tener un diseñador responsable del aspecto visual solo.

Más puestos de trabajo que pueden involucrarse en la creación de un sitio web incluyen:

• Diseñadores gráficos para crear efectos visuales para el sitio como logotipos, diseños y botones
• Especialistas para ayudar a mantener presencia en Internet a través de soluciones estratégicas dirigidas a los espectadores al recinto, mediante técnicas de marketing y promoción en internet de marketing en Internet
• Escritores SEO investigación y recomendar las palabras correctas para ser incorporado en un sitio web en particular y hacer la web más accesible y encontrado en numerosos motores de búsqueda
• Redactor de Internet para crear el contenido escrito de la página para atraer a los espectadores específicos del sitio
• Experiencia de usuario Diseñador (UX) incorpora aspectos de consideraciones sobre el diseño centrado usuario que incluyen la arquitectura de la información, diseño centrado en el usuario, test de usuarios, diseño de interacción y diseño visual de vez en cuando.

Véase también

Véase también

Estética Teoría del color Composición (artes visuales) Cross-browser Diseño de la educación Principios de diseño y elementos Dibujo Premios de diseño europeo Primer manifiesto lo primero 2000

Software gráfico del arte Ocupaciones de diseño gráfico Gráficos Gráficos de información Lista de las instituciones de diseño gráfico Lista de diseñadores gráficos notables Logotipo Mejora progresiva Guía de estilo

Web 2.0 Colores del Web Fuentes seguras de Web Usabilidad Web Framework para aplicaciones Web Arquitectura de sitio web Premios Web Constructor de sitio web Sitio web wireframe

Disciplinas relacionadas

Diseño de la comunicación Redacción Publicar de escritorio Ilustración digital Diseño gráfico

Diseño de interacción Diseño de la información Comunicaciones de marketing Nuevos medios de comunicación Posicionamiento en buscadores (SEO)

Escritor técnico Tipografía Experiencia de usuario Diseño de interfaz de usuario Desarrollo Web

Referencias y lectura adicional

• Nielsen, Jakob; Tahir, Marie (octubre de 2001), Usabilidad de la Página principal: 50 Websites Deconstructed, Jinetes de nueva editorial, ISBN 978-0735711020 

Acoplamientos externos

• Consorcio W3C para estándares web
• Desarrollo y diseño web en DMOZ

Otras Páginas

• Promocion de ventas
• Pagina de entrada
• Intervalo post mortem
• AutoTrack
• Iglesia Presbiteriana de la Republica de Corea
• Tolombeh-ye Jehadi Hajerat
• Oncologo ortopedico
• Ayuno preoperatorio
• Municipio de Waco, Condado de Sedgwick, Kansas
• OnePulse
• Metodo de la deuda-bola de nieve
• Electronic Entertainment Expo 2011