Recurso recuperado de: http://manuelmorrison.com/blog/wp-content/uploads/2013/02/ideassimplescreatividad.png
Diseño web hace referencias a la planeación, diseño, estructuración de los elementos gráficos de manera estética y creativa de un sitio web , con el fin de transmitir la información de manera adecuada , cubriendo las necesidades y expectativas del usuario permitiéndole encontrara la información que busca fácilmente. Para la creación del diseño web de una pagina es importante que prevalezca la autenticidad, identidad y creatividad dentro del proceso de construcción.
Diseño Web es un proceso que esta formado por diversas fases, a continuación se darán a conocer las mas básicas e implementadas en la construcción de un proyecto Análisis y definición del diseño Web Esta fase se encarga de estudiar la imagen que debe tener la página Web, de acuerdo al objetivo que desea cumplir. Es esta etapa se puede evidenciar la primera visión del diseño que presentarán las páginas Web del sitio Creación de la página Web Después de aprobar el boceto del diseño Web en la fase anterior, se procede a la
implementación de este diseño como página Web, con sus cabeceras, menús, animaciones e imágenes. Programación de la navegabilidad Las páginas una vez creadas y estructuradas en el sitito web, se procede a programar su navegabilidad y su funcionalidad, para una correcta presentación, así pues se hace necesario tener claridad frente a la jerarquización de las paginas. Evaluación Se hace necesario realizar un proceso de valoración frente al diseño de web construida todo lo que en ella implica, como: criterios de diseño, presentación, producción, significación, socialización, costos, mercadeo, entre otros.
Diseño Web avanzado Esta orientado por profesionales, aquellos que cuentan con las nuevas tecnologías en el diseño de páginas web. Principalmente utilizado por empresas tecnológicas o clientes que están involucrados en el mundo audiovisual.
En la actualidad el diseño Web está volcado a la construcción de la interfaz, máscaras o modos de visualización de contenidos, el cual permite la interacción con el usuario, para ello se deben considerar elementos de identificación, de navegación, de contenidos y de acción.
Diseño Web clásico Se caracteriza por ser tradicional, utilizando los elementos básicos: texto e imágenes. Este diseño Web prescinde de elementos como flash, video streaming o cualquier tecnología avanzada. Diseño Web industrial Se encarga de las páginas Web para industrias, presentando unas Webs corporativas cuyo objetivo es representar la imagen de la empresa.
En este sentido se debe tener claridad para el desarrollo de la interfaz y pensar en: 1. Dejar claro el propósito del sitio 2. Ayudar a los usuarios a encontrar lo que necesitan: 3. Demostrar el contenido del sitio: 4. Usar diseño visual para mejorar y no para definir la interacción del Sitio Web. El diseño Web contiene un amplio abanico de posibilidades, lo que lleva a una amplia variedad de tipos de diseño Web. A continuación se enseñaran algunos de los tipos de diseño.
Es hora de explorar tu creatividad y empezar a construir diseños web fabulosos, los cuales desarrollaras con autenticidad e inventiva ; con el fin de obtener un producto con alto nivel calidad e innovación.
Para la creación y/o construcción de un sitio web se hace necesario pensar en la calidad del mismo y se deben contemplar las normas y estándares de calidad para que sea fácil de interpretar en todos los navegadores y terminales con acceso a Internet, además de convertirse en una multiplataforma.
Para la creación y/o construcción de un sitio web se hace necesario pensar en la calidad del mismo y se deben contemplar las normas y estándares de calidad para que sea fácil de interpretar en todos los navegadores y terminales con acceso a Internet, además de convertirse en una multiplataforma.
Los estándares web son un conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones internacionales acerca de cómo crear e interpretar documentos basados en el Web. Son un conjunto de tecnologías orientadas a brindar beneficios a la mayor cantidad de usuarios, asegurando la vigencia de todo documento publicado en el Web.
Los estándares web se basan en tres aspectos fundamentales: 1. La interacción con el usuario, buscando una comunicación armoniosa entre el mismo y la aplicación 2. La optimización del modo en que se le presentan los datos al usuario, ayudando a que conozca en qué parte del ambiente de trabajo está situado y en qué momento 3. La estructura del sistema optimiza la ubicación de los componentes y las distintas secciones que se definen
Un sitio basado en estándares web mostrará una mayor consistencia visual. Gracias al uso de HTML y XHTML para el contenido y CSS para la apariencia, se puede transformar rápidamente un sitio, sin importar que se trate de una página web o varias, realizando cambios en un solo lugar. Los documentos que separan apariencia de contenido usan menos código, además, CSS permite conseguir efectos que antes requerían el uso de Javascript e imágenes, por lo que los sitios basados en estándares utilizan menos ancho de banda y se muestran más rápido a los usuarios, mejorando dramáticamente la experiencia de estos.
Lenguajes de Presentación • Hojas de Estilo en Cascada (CSS) nivel 1 • CSS nivel 2 revisión 1 • CSS nivel 3 (CRs o mejor) Modelos de Objetos • Modelos de Objetos del Documento (DOM) nivel 1 • DOM nivel 2 (HTML, Núcleo, Eventos, Transversal) • DOM nivel 3 (Núcleo) Lenguajes de Script • ECMAScript 262 (la versión estándar de JavaScript)
Es la capacidad de un sitio para ser visto o leído por cualquier persona o dispositivo. Cumpliendo las normas y directrices de sin sacrificar el aspecto visual, el rendimiento o la sofisticación.
Posibilita y propicia la interacción con los usuarios de forma fácil y efectiva. Logrando que el cliente encuentre en el menor tiempo Lenguaje de Marcado de Hipertexto posible la información, contenido o tema que (HTML) 4.01 esta buscando. Lenguaje de Marcado de Hipertexto La usabilidad se fundamente en: Extensible (XHTML) 1.0 Lenguaje de Marcado Extensible (XML) 1.0
Lenguajes estructurales y semánticos • • •
Eficacia: Representa la exactitud con la cual los usuarios alcanzan sus metas especificadas. Eficiencia: Los. recursos gastados con relación a la certeza con la cual los usuarios logran las metas Satisfacción: La comodidad aceptabilidad del uso.
y
la
Cantidad
Los DIVs son una técnica de distribución de las áreas de contenido moderno, que facilita la lectura de la página por los buscadores, la hacen más rápida de presentar ("renderizar") por los navegadores, y hace que el código sea más claro y corto.
Eficacia Exactitud Temporal Usabilidad
Eficiencia
Humana Costo
Satisfacción
Aceptabilidad
Garantizar que las aplicaciones Web funcionen en los múltiples navegadores y plataformas directas, con el fin que esta pueda ser accesible para el usuario.
Comodidad
La forma en que se realiza el diseño web determina, en parte, la velocidad de carga de una web. Por ello se hace necesario la optimización que busca el menor número de archivos y por tanto, mayor velocidad de carga.
La seguridad es un tema fundamental en sitios web, esta no solo se refiere a que no roben información importante y que no rompan el sitio sino además que el sitio web este disponible siempre, así pues se deben conocer aspectos fundamentales de la configuración del servidor y técnicas de seguridad en programación orientada a la web.
La pantalla es un criterio de calidad importante, ya que en la actualidad existen diversos formatos de pantalla (pantallas normales, anchas, formatos cuadrados, rectangulares, de baja resolución, de alta resolución, con diversidad de contrastes, etc), los cuales se deben acoplar gráficamente al diseño, para ser visualmente compresibles, por ello se utiliza una plantilla de código abierto.
El uso de criterios de calidad y estándares en el diseño web es de vital importancia en el desarrollo de aplicaciones y sitios web funcionales. Para cualquier aplicación Web la interfaz es la primera impresión que el usuario capta, de ello depende que la pagina sea exitosa para la empresa o entidad y útil, agradable para el cliente. Así mismo, es importante presentar en la página web un orden lógico, detallado y estructurado en cuanto a contenido y material audiovisual. Los estándares Web ofrecen un grupo de posibilidades y sus ventajas radican en la posibilidad de llegar a un mayor número de usuarios, al expandir el acceso a la información del sistema a un amplio número de navegadores y dispositivos.
La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia, eficiencia y efectividad de la Web como canal de comunicación e intercambio de datos, brindando posibilidades de contacto directo entre el productor y el consumidor de contenidos.
Las tendencias educativas en el diseño de sitios web hace alusión a los cambios y transformaciones de fondo de este ámbito, donde el estilo se hace presente para dejar huella en un periodo de tiempo determinado . Así mismo, se cual se preocupa por conocer las nuevas ideas y dinámicas de trabajo para el desarrollo y la construcción de un producto actualizado, innovador y con altos índices de calidad.
Las animaciones bien utilizadas y enfocadas enriquecen notablemente la apariencia de un sitio web, aportando de esta manera dinamicidad a la página.
Son aquellos modelos preestablecidos de diseños de interfaz que proporcionan una base para construir un sitio web, como modelo en el momento de solventar problemas en cuanto al diseño de la misma. Aplicarlos los patrones asegura que la interfaz sea intuitiva y fácil de utilizar. Es importante destacar que los patrones guían al usuario mientras navega por el sitio web . Algunos de los parones mas utilizados son:
Se utilizará como forma y no como medio para comunicar, o dicho de otra forma, se ilustrará con letras. Así pues, se hace necesario contar con un conocimiento básico para cumplir con el objetivo, consiguiendo de esta manera el resultado esperado.
Un diseño a partir de una cuadrícula fluida. Una de las más usadas en diseño responsive ya que estas cuadrículas se estrechan o se ensanchan en función de la pantalla desde la que accedemos.
Se basa en un menú que se esconde en alguna parte de la pantalla y que solo aparece cuando lo activamos; esto en caso de que la pantalla sea pequeña, si es lo suficientemente grande, el menú aparecerá tal cuál. Son páginas alargadas en las que te vas encontrando con toda la información cuando vas bajando hacia la parte inferior del sitio web.
Se da mayor importancia a la realización de contenidos, eliminando o reduciendo el tamaño de otros elementos.
Se divide en filas y columnas, hace que el espacio entre todos los componentes sea el mismo consiguiendo un acabado armónico.
Esta tendencia incorpora efectos de profundidad, sombras, transiciones y animaciones . Si se combina este tipo de diseño con animaciones se puede conseguir un efecto increíble.
Las fotografías serán reemplazadas por tipografías personalizadas que conectan con el espectador, para ello se hace necesario contar con un profesional con conocimiento sobre diseño.
Cada vez es mas frecuente encontrara paginas con usan degradados como elemento de diseño, principalmente en dos o tres colores.
Uso de formas geométricas, líneas y patrones; las cuales tienen infinidad de usos dentro de una página web y podrían ser la nueva manera de aportar personalidad y estilo al flat design.
Son formas sutiles pero poderosas de interactuar con un sitio web. A menudo se encuentran en los botones y en los efectos de desplazamiento.
Diversos usuarios acceden a internet desde dispositivos móviles, la tendencia es simplificar la navegabilidad reduciendo a pocos elementos.
Se aplica e implementa para que el contenido brille y se haga mas atractivo para el usuario. El truco está en saber elegir las imágenes apropiadas y saber combinar los colores y tipos de letras
Implementado para dar identidad y autenticidad al diseño de la pagina web, ya que son creación y construcciones únicas.
El parallax es un tipo de efecto aplicado a la velocidad y el movimiento de imágenes de fondo. El fondo de la página web se mueve a una velocidad diferente que el resto de la página, haciendo un efecto de capas de profundidad en la página. Cada vez más común encontrar en una página de inicio con ghost buttons o botones transparentes. Estos botones funcionan muy bien, sobre todo en las páginas que utilizan fotografías o videos de fondo.
El acto de narrar viene de tiempos inmemorables, así pues se convierte en una técnica que bien enfocada, permite narrar a partir de una historia el objetivo que cumple la pagina construida.
Diseño web https://www.video2brain.com/mx/tutorial/quees-el-diseno-web
Una tendencia marcada, que probablemente ha dado origen a las demás, es la búsqueda de una mayor rapidez y rendimiento de los sitios webs; ya que estos factores permiten que el usuario tenga una mejor experiencia . Así pues, los creadores en el diseño de paginas web están enfatizando en la construcción de sitios atractivos fijándose muy bien el peso y la velocidad .
Habilidades básicas para el desarrollo de una web https://www.video2brain.com/mx/tutorial/lasbases-del-diseno-web Diseño web de alta Calidad https://www.youtube.com/watch?v=tWBNH0H zYsU Curso de diseño web con los estándares https://www.youtube.com/watch?v=MBl6wjOqHw Tendencias diseño web https://www.youtube.com/watch?v=YqTFlY5k kco https://www.youtube.com/watch?v=LWajvdpF n_c https://www.youtube.com/watch?v=COPw9Q XiBBc Nota: La información recopilada en esta revista digital no es de mi autoría, por ello al final encontraras las referencias de las paginas web en las que fue consultada la información. Este documento es la recopilación de un trabajo de consulta e indagación con unos temas específicos.
¿Qué es Diseño Web? https://webdesignerandmore.wordpress.com/2012/09/25/que-es-diseno-web/ Diseño Web. https://www.ecured.cu/Dise%C3%B1o_Web Webmastering - Diseño web http://es.ccm.net/contents/781-webmastering-diseno-web Diseño Web http://www.informaticamilenium.com.mx/es/temas/que-es-diseno-web.html ¿Qué es una Interfaz? http://www.guiadigital.gob.cl/articulo/que-es-una-interfaz Las 100 frases más inspiradoras de http://www.elpoderdelasideas.com/articulos/las-100-frases-mas-inspiradoras-deldiseno/ Usabilidad de los sitios Web, los métodos y las técnicas para la evaluación http://www.acimed.sld.cu/index.php/acimed/article/view/405/306 Herramientas gratuitas para evaluar la calidad de nuestro sitio web http://www.4rsoluciones.com/blog/herramientas-gratuitas-para-evaluar-la-calidad-denuestro-sitio-web-2/ Estándares web http://www.maestrosdelweb.com/estandaresweb/ Nuevos estándares en el desarrollo de sitios web: HTML5 y CSS3 http://desarrolloweb.dlsi.ua.es/cursos/2012/nuevos-estandares-desarrollo-sitiosweb/desarrollo-web-actual
¿Estándares Web? https://web-gdl.com/servicios/diseno-de-paginas-web/estandares-web/ Estándares de diseño https://es.slideshare.net/dwebslide/estandares-de-diseo-web Estándares de diseño Web http://www.redalyc.org/html/1814/181421569009/ Tendencias en diseño web para 2016 https://www.40defiebre.com/tendencias-diseno-web-2016/ Tendencias en diseño web 2017: el oráculo ha hablado https://www.40defiebre.com/tendencias-en-diseno-web-2017/ Tendencias De Diseño Web Para 2016 https://www.lancetalent.com/blog/tendencias-de-diseno-web-para-2016/
Nuevas Tendencias De Diseño Web Para 2017 https://www.lancetalent.com/blog/tendencias-diseno-web-2017-dw/ Tendencias de diseño web https://es.pinterest.com/explore/tendencias-de-dise%C3%B1o-web/?lp=true 10 tendencias del diseño web actual https://devcode.la/blog/10-tendencias-del-diseno-web-actual/ Patrones UI, tendencia en diseño web del 2016 http://edoestudio.es/patrones-ui-una-las-tendencias-diseno-web-del-2016/ 10 Nuevas Tendencias De Diseño Web Para 2017 https://www.lancetalent.com/blog/tendencias-diseno-web-2017-dw/
Referencias imรกgenes http://iberzal.com/wp-content/uploads/2015/04/services-web-design380x380.png https://s-media-cacheak0.pinimg.com/originals/b1/5c/a4/b15ca48c73d57bd02ed5a0ff27db13d d.png http://www.imm.cnm.csic.es/themes/front/default/images/Fondo-1.gif http://manuelmorrison.com/blog/wpcontent/uploads/2013/02/ideassimplescreatividad.png https://s-media-cacheak0.pinimg.com/736x/88/86/a2/8886a28321c9879d99d7c974e712de20.j pg http://www.solucionesim.net/blog/wpcontent/uploads/2016/05/diseno_web.jpg https://i0.fiuxy.com/fb3db7178f6043cc2f8f09ab301cc28f36751869?url=ht tp%3A%2F%2Fwww.webtuyu.com%2Fwpcontent%2Fuploads%2F2014%2F05%2Ftendenciasdise%25C3%25B1o web.png http://www.codnet.com.ar/wp-content/uploads/imagenes/sitios-web.png https://www.avancecomunicacion.com/wpcontent/uploads/2014/02/web.png http://isamimarketingdigital.com/wpcontent/uploads/2015/09/img_opcion_web3.png http://demasweb.com/wp-content/uploads/2015/07/dise%C3%B1oweb.png http://www.signosmedia.com/images/full-servicios/serviciosdesarrollo.png http://www.lapaginaweb.com.ve/wpcontent/themes/lpw2015/images/imagen-diseno-web.png http://portalvirtualempleo.us.es/wpcontent/uploads/2015/05/cvsinerrores_2.png https://ugc.kn3.net/i/origin/http://www.hhconsulting.com.mx/wpcontent/uploads/2014/04/estudios_sociolaborales.png http://simergia.com/wp-content/uploads/2016/01/my_documents.png http://3.bp.blogspot.com/-hOYT_mOwx6c/VZyowL8nqI/AAAAAAAABq4/5O1UAcwUllc/s1600/referencias.png
https://bibliotecasek.files.wordpress.com/2016/10/1.png?w=739 http://1.bp.blogspot.com/-s_5agHT05yU/Vi6y0OwsKI/AAAAAAAAADo/8jGuJDWVej0/s1600/recursos.png http://www.activoenergia.com/compromiso/certificado.png http://www.dreaminmedia.com/wpcontent/uploads/2016/01/renovacion_pagina_web.png http://www.cadem.cl/wp-content/uploads/2014/06/calidad.png http://www.movistar.com.pe/documents/10182/1409512/img_d_2.png/31 58a621-c0ce-4cec-98d9-e9f1c415247c?t=1478624473908 http://www.ift.org.mx/sites/default/files/beneficios_0.png http://www.decaraalseo.com/wp-content/uploads/2014/06/Evolucion-dehtml-a-xhtml.jpg http://www.websresponsivas.com/img/img-dispositius.png http://3.bp.blogspot.com/-w1OrFfB1jo/VPXWGULWZAI/AAAAAAAAATc/mPUANUN0luQ/s455/erp.png http://kopelia.com/wp-content/uploads/2013/03/gestores.png http://aristopixel.com/blog/wpcontent/uploads/2015/09/tendencias_2016.jpg https://www.digitaldelsur.com/wpcontent/uploads/revslider/slider1/imac.png https://cdn.shopify.com/s/files/1/1229/1370/files/storytelling.png?102038 92797106785149 http://capmasao.es/wp-content/uploads/2016/11/parallaxEffect.jpg http://www.desarrollandoamerica.org/images/easyblog_images/503/b2ap 3_thumbnail_espacios-libres-web.png http://www.globalinteractive.cl/wpcontent/uploads/2016/03/microinteracciones.jpg http://1.bp.blogspot.com/I4hWrWpH518/VbuxoCjrxMI/AAAAAAAAJHM/S3SRWFZJ7jk/s1600/Tod os-los-codigos-de-colores-para-paginas-web-HTML.png http://kopelia.com/wp-content/uploads/2013/03/gestores.png https://pixabay.com/p-1435242/?no_redirect http://www.activoenergia.com/compromiso/certificado.png http://www.dreaminmedia.com/wpcontent/uploads/2016/01/renovacion_pagina_web.png
http://www.cadem.cl/wp-content/uploads/2014/06/calidad.png http://www.movistar.com.pe/documents/10182/1409512/img_d_2.png/31 58a621-c0ce-4cec-98d9-e9f1c415247c?t=1478624473908 http://www.ift.org.mx/sites/default/files/beneficios_0.png http://www.decaraalseo.com/wp-content/uploads/2014/06/Evolucion-dehtml-a-xhtml.jpg http://www.websresponsivas.com/img/img-dispositius.png http://3.bp.blogspot.com/-w1OrFfB1jo/VPXWGULWZAI/AAAAAAAAATc/mPUANUN0luQ/s455/erp.png https://dialnet.unirioja.es/descarga/articulo/940472.pdf