Diseño de sitios web
El diseño web tiene un enlace directo al aspecto visual de un sitio web. El diseño web eficaz es necesario para comunicar ideas de forma eficaz.
El diseño web es un subconjunto del desarrollo web. Sin embargo, estos términos se usan indistintamente.
Puntos clave
El plan de diseño debe incluir lo siguiente:
Detalles sobre la arquitectura de la información.
Estructura planificada del sitio.
Un mapa del sitio de páginas
Wireframe
Wireframese refiere a una guía visual del aspecto de las páginas web. Ayuda a definir la estructura del sitio web, los enlaces entre las páginas web y el diseño de los elementos visuales.
Las siguientes cosas se incluyen en una estructura alámbrica:
Cajas de elementos gráficos primarios
Colocación de titulares y subtítulos
Estructura de diseño simple
Llamadas a la acción
Bloques de texto
La estructura alámbrica se puede crear usando un programa como Visio, pero también puede usar un lápiz y papel.
Herramientas de diseño web
Aquí está la lista de herramientas que se pueden usar para hacer diseños web efectivos:
Coda 2Coda 2 es una poderosa herramienta de diseño y desarrollo web, viene con una mejor interfaz de usuario, edición de texto, administración de archivos, clips, sitios, diseño y mejor soporte para Mysql.OmniGraffle
OmmniGraffle se utiliza principalmente para wireframing. La desventaja de esta herramienta es que no tiene prototipos interactivos y está disponible solo para Mac.Pen and Paper
Se puede usar lápiz y papel para dibujar la apariencia del sitio web.Vim
Vim es una gran herramienta de diseño web que admite la auto-intención de código completamente personalizable, múltiples búferes para almacenar código cortado / copiado y registro de acciones para la repetición automática.
| SN | Descripción de la herramienta |
|---|---|
| 1. | Photoshop CC Esta es una gran herramienta de diseño web proporcionada por Adobe. El último Photoshop CC 2014 admite muchas funciones nuevas, como objetos inteligentes, composiciones de capas, guías inteligentes, integración de Typekit, búsqueda de fuentes y mejoras en el flujo de trabajo. |
| 2. | Illustrator CC Illustrator CC también es una herramienta de diseño web que viene con funciones poderosas como bibliotecas AutoCad, sobreimpresión en blanco, intercambio de proxy de relleno y trazo para texto, generación automática de esquinas, imágenes no integradas y herramientas de tipo táctil, etc. |
| 3. | |
| 4. | |
| 5. | Sublime Text Sublime Text es un editor de código fuente con interfaz de programación de aplicaciones Python. Su funcionalidad se puede ampliar mediante complementos. |
| 6. | |
| 7. | |
| 8. | Imageoptim Básicamente se utiliza para optimizar imágenes en un sitio web con el fin de cargarlas más rápido encontrando los mejores parámetros de compresión y eliminando comentarios innecesarios. |
| 9. | Sketch 3 Sketch 3 es una herramienta de diseño web desarrollada específicamente para diseñar interfaces, sitios web, iconos, etc. |
| 10. | Heroku También es una gran herramienta de desarrollo web que admite Ruby, Node.js, Python, java y PHP. |
| 11. | Axure Admite herramientas de creación de prototipos, documentación y estructura de cables para realizar un diseño interactivo de sitios web. |
| 12. | Hype 2 El Hype 2 ofrece: la forma más fácil de animar y agregar interactividad, endurecer el poder de HTML5, capacidad de respuesta móvil y características WYSIWYG. |
| 13. | Image Alpha Esta herramienta ayuda a reducir el tamaño de los archivos PNG de 24 bits. Lo hace aplicando compresión con pérdida y convirtiéndolo a formato PNG8 + alfa, que es más eficiente. |
| 14. | Hammer Esta herramienta es apta para no programadores y buena solo para proyectos pequeños. |
| 15. | JPEGmini Lite Es una herramienta de optimización de imágenes y admite fotos en cualquier resolución de hasta 28 megapíxeles. |
| dieciséis. | BugHerd Esta herramienta ayuda a ver cómo van los proyectos y en qué están trabajando todos. También ayuda a identificar problemas en desarrollo. |
Anatomía de la página web
Un sitio web incluye los siguientes componentes:
Bloque que contiene
Containerpuede tener la forma de la etiqueta del cuerpo de la página, una etiqueta div que contiene todos. Sin contenedor no habría lugar para colocar el contenido de una página web.
Logo
Logo se refiere a la identidad de un sitio web y se utiliza en las diversas formas de marketing de una empresa, como tarjetas de visita, membretes, brouchers, etc.
Navegación
Los sitios navigation systemdebe ser fácil de encontrar y utilizar. A menudo, la anotación se coloca en la parte superior de la página.
Contenido
El contenido de un sitio web debe ser relevante para el propósito del sitio web.
Pie de página
Footerse encuentra en la parte inferior de la página. Por lo general, contiene información legal, contractual y de derechos de autor, así como algunos enlaces a las secciones principales del sitio.
Espacio en blanco
También se llama como negative space y se refiere a cualquier área de la página que no esté cubierta por el tipo o las ilustraciones.
Errores de diseño web
Uno debe ser consciente de los siguientes errores comunes que siempre se deben tener en cuenta:
El sitio web no funciona en ningún otro navegador que no sea Internet Explorer.
Usando tecnología de punta sin una buena razón
Sonido o video que se inicia automáticamente
Navegación oculta o disfrazada
Contenido 100% flash.