CLASE 2
TEMA:
DISEÑO Y DESARROLLO WEB
(2)
¿QUÉ ES EL DISEÑO WEB?
El diseño web se ocupa de la estructura y
composición del sitio web, además de la tipografía, paleta de colores, botones,
gráficos y todos los aspectos estéticos de la página.
HERRAMIENTAS COMUNES EN EL DISEÑO WEB
HERRAMIENTAS DE DISEÑO:
Figma, Adobe Photoshop, Sketch o Adobe
Xd, son las que pueden diagramar el ambiente y, posteriormente, añadir
todos los colores, tipografías y recursos de la página.
HERRAMIENTAS DE DESARROLLO WEB NO-CODE:
Webflow, Wix, Wordpress o Squarespace.
A pesar de que estas
herramientas son muy útiles y veloces, tienen varias limitaciones al querer
añadir características o funcionalidades únicas a tu sitio.
ASPECTOS DEL DISEÑO WEB:
NAVEGACIÓN
Al diseñar un sitio web tienes que pensar cómo
y en qué orden quieres que el usuario acceda a las diferentes páginas o
secciones del sitio: ¿Qué tipo de menú vas a utilizar? ¿Tu página será una
landing o una página multisitio? Todo eso tendrá que ser respondido.
SEO (Search Engine Optimization)
Hay que tener en cuenta este aspecto como un
factor clave para diseñar la página. Dejar espacio para diferentes tamaños de
títulos y la cantidad suficiente de texto, es crucial para que el sitio web
tenga un buen desempeño en los motores de búsqueda.
VELOCIDAD DE LA PÁGINA
Es correcto buscar la mayor calidad de
imágenes, pero la mayoría de veces las imágenes se mostrarán en pantallas de
muchos menos píxeles que la imagen, por lo que serán recursos
desperdiciados. No existe un tiempo de carga establecido, aunque los
usuarios no suelen esperar más de 4 segundos antes de abandonar el sitio web.
Por lo que considerar comprimir los recursos, tanto Videos, GIFs e imágenes, es
crucial para una experiencia óptima.
DISEÑO RESPONSIVE
En la era digital tenemos más variedad de
tamaños de dispositivos que conversaciones cara a cara, por eso, es importante
que tu sitio web tenga un diseño responsivo, es decir, que se adapte a los
diferentes tamaños de pantallas de la mayoría de dispositivos. Ten en cuenta
que un sitio web se puede abrir desde una Mac de 27 pulgadas hasta un iPhone
mini de 5.4 pulgadas.
UX (User Experience)
UX (Experiencia de Usuario) este concepto se refiere a cómo se siente una persona al interactuar con una página web o una aplicación. No se trata solo de que algo se vea bonito, sino de que sea intuitivo, funcional y agradable de usar.
¿QUÉ ES EL DESARROLLO WEB?
Es el proceso de crear y mantener un sitio web
que sea funcional en internet, a través de diferentes lenguajes de
programación, según el modelo y la parte de la página que corresponda. Cada
sitio tiene una URL única que lo distingue de los demás en la red informática
mundial.
Un sitio web puede clasificarse en dos
partes.
- Frontend. Es la parte que interactúa con el usuario, tanto en imagen como en función. Por ello está íntimamente relacionada con la experiencia del usuario (UX) y la interfaz de usuario (IU).
- Backend. Se refiere a la parte que
está en contacto directo con el servidor; es donde se aplica el código de
programación para crear la estructura. Permanece en un segundo plano a
cargo de la accesibilidad, actualización, bases de datos y cambios del
sitio.
DIFERENCIA ENTRE DISEÑO Y DESARROLLO WEB
1. DEFINE EL PERFIL DEL PROYECTO
Para iniciar un sitio web lo primero es
establecer las bases de lo que se requiere; es decir, definir cuál será el
objetivo del proyecto, a quiénes va dirigido, para qué es necesario en el
negocio o la empresa, qué se podrá hacer o consultar, cuál es la personalidad
de la marca que se quiere mostrar, entre otros aspectos esenciales.
2. PLANIFICA EL TRABAJO
Se recopila toda la información necesaria para
definir cada una de las etapas del proyecto. Involucra la investigación
de mercado, el análisis de la competencia y el estudio de los
consumidores. A partir de ello decide cuál es la estrategia de
contenido y la estructura del sitio web más adecuadas para el propósito del
proyecto.
3. DISEÑA EL SITIO WEB
Esta etapa corresponde a la organización y
acomodo de los elementos que van a componer cada una de las páginas del sitio,
es decir, el diseño web. Con la participación del cliente y atendiendo a la voz
de marca, hay que seleccionar los colores que se usarán; la posición del
logotipo; el favicon, el tipo de letra para barras, títulos, menús y
cuerpos de texto; las imágenes y videos; la versión móvil y para otros
dispositivos, y las principales interacciones que tendrá el sitio.
4. DETERMINA LOS CONTENIDOS
Es importante definir los contenidos del sitio
web, considerando aspectos SEO para todo lo relacionado con banners, bloques de
información y los textos de cada una de las secciones. Este trabajo se
relaciona estrechamente con el punto anterior, ya que el diseño y los
contenidos se conjugan para que sea funcional.
5. DESARROLLA EL CÓDIGO
Es momento para traducirlo a un lenguaje
de programación y frameworks. Inicia con el wireframe o esquema de
las páginas del sitio para adaptarlo. En este punto también se determinan las
funcionalidades que tendrá el sitio, la configuración del SEO, la base de
datos, la velocidad de carga y rendimiento, las pruebas del código, la
ciberseguridad, entre otros aspectos relacionados.
En este punto del desarrollo web hay un trabajo
por parte del backend y otra del frontend para que haya una funcionalidad
eficiente, tanto para el servidor como la interfaz y la interacción de todos
los elementos que integran el sitio web.
6. REVISA Y COMPRUEBA EL FUNCIONAMIENTO DEL
SITIO
Hoy se utilizan diversos elementos para hacer
pruebas al código como un sandbox. Cuando ya se ha generado la programación
debe hacerse una revisión exhaustiva del funcionamiento del sitio web,
atendiendo a lo que se esquematizó en el diseño, y corroborar que los
contenidos estén correctos y operen adecuadamente.
7. SUBE EL SITIO WEB
Cuando ya verificaste la programación del sitio
y ya se ha comprobado su funcionamiento, diseño y contenidos es momento
de lanzar la página web, es decir, ponerla en marcha en la red.
Entrega los archivos para que sean publicados
en el servidor elegido por el cliente. Luego de ello, los internautas
ya podrán acceder al sitio oficialmente. Si es una web de negocios es de suma
importancia que agregues un software de analítica para obtener las métricas e
informes del comportamiento de los usuarios; sobre todo para acciones de
compra, relleno de formularios, chats, etc.
8. EVALÚA Y OPTIMIZA
Analiza cómo está funcionando el sitio web una
vez que ya está en la red, verifica áreas de mejora y trata de optimizar
todo lo que puedas en cualquier nivel: ya sea en el backend o en el frontend.
Incluso esta evaluación te sirve para identificar aspectos de diseño o
contenidos que se pueden mejorar.
9. HAZ UN MANTENIMIENTO CONTINUO
Es una de las acciones vitales, pues de esto
depende la permanencia de un sitio en internet. Si no atiendes los errores en
el sitio que puedan surgir, es posible que muchos usuarios ya no regresen por
la mala experiencia de navegación. Mantente al tanto del funcionamiento
óptimo de todas las páginas de la aplicación web.
LENGUAJES MÁS UTILIZADOS EN EL DESARROLLO WEB
=====================================================================
=====================================================================
No hay comentarios:
Publicar un comentario