Curso sobre la creación de páginas web

1. Diseño de Páginas Web
(Web Design)
Compilado por: Dr. ENRICO GARCÍA MARTÍNEZ

2.  El diseño web es un área enfocada en el desarrollo de interfaces
digitales, como el diseño de sitios y aplicaciones para web.
 Para ello, los diseñadores web crean las páginas utilizando
lenguajes de marcado como HTML.

3.  El diseño web implica trabajo relacionado con el layout y diseño de
páginas online, así como la producción de contenido, aunque
generalmente se aplica a la creación de sitios web.
 En este caso, los diseñadores web crean las páginas utilizando
lenguajes de marcado como HTML o XML.
 Por otro lado, la parte visual de los sitios está a cargo del CSS, término
utilizado para estilizar los elementos escritos en HTML.
 Por lo tanto, es común que los diseñadores web utilicen ambos para
construir un site porque juntos definirán cómo aparecerán las páginas
en los navegadores.
 El proceso de creación de sitios se puede realizar desde herramientas
como Adobe Dreamweaver (que requerirá que el profesional sepa más
sobre los códigos) y CMS que son plataformas de administración de
contenido.
 WordPress es uno de los más conocidos y prácticos porque tiene una
serie de templates que pueden basar el sitio. El web designer tiene la
tarea de instalarlos y personalizarlos según lo que cada cliente quiera.

4.  Cuáles son los elementos clave del diseño web?
 Cuando hablamos de un buen diseño web, algunos puntos son
fundamentales y no pueden faltar en tu sitio. Aquí están los
aspectos más destacados:
 Responsividad
 Como cada vez más las personas acceden a internet solo por
teléfono celular, es muy importante que tu sitio sea adecuado para
dispositivos móviles, es decir, que sea responsivo.
 Escaneabilidad
 ¿Conoces esos correos electrónicos que tienen un "bloque de
texto" porque todo el mensaje está escrito en un solo párrafo?
Leerlos es demasiado agotador, ¿no es así? Bueno, lo mismo
ocurre con los visitantes de tu sitio si el no considerar
la escaneabilidad textual.

5.  Tipografía
 Si desde este punto comenzamos a escribir esta publicación con un
tipo de letra completamente diferente, tu experiencia de
lectura no sería muy agradable, ¿verdad? Después de todo, es
una tipografía que no encajaría con el resto del contenido. Lo
mismo debería aplicarse a tu sitio.
 Velocidad de carga
 En un mundo donde todos parecen estar siempre apurados, tener
un sitio web de carga rápida es esencial. Según Google, los sitios
que tardan más de 2 segundos en cargarse dañan tanto
la experiencia del usuario como la indexación del sitio.


6.  Cuáles son las ventajas de invertir en un diseño web de calidad?
 Estos son los cinco beneficios que puedes tener al invertir en un diseño web profesional:
 1. Buenas primeras impresiones
 El sitio es la presentación de la empresa que gestionas en los medios digitales. Cada vez
que un posible cliente nuevo acude a tu empresa, te preocupas hacer una buena primera
impresión.
 Bueno, con tu sitio, la situación no es diferente. Debe ser un reflejo inmediato del
negocio.
 Un sitio web que no sea profesional hace que los visitantes no tengan una buena
experiencia e incluso piensen que la empresa está desactualizada. Esto hará que busquen
ofertas como la tuya en competidores que tienen un mejor sitio web.
 2. Mejores procesos de SEO
 SEO o la optimización de motores de búsqueda se refiere a la optimización orgánica de
tu sitio web entre los motores de búsqueda actuales y es uno de los puntos de estrategia
digital que cada profesional de marketing necesita aprender.
 Cuando las personas indaga sobre una compañía o servicio específico que satisfaga sus
necesidades, buscan términos en los motores de búsqueda como Google.
Estadísticamente, estos usuarios visitarán las primeras páginas que aparecen en el
resultado de la búsqueda.
 Si tu sitio no está actualizado, significa que no contiene el contenido específico necesario
para ser seleccionado e indexado por estos motores de búsqueda.
 Entonces, en lugar de estar en la primera página de resultados, puede aparecer entre las
páginas 5 o 6, por ejemplo, y nunca ser visto por tu audiencia.
 Por lo tanto, tener un buen posicionamiento de SEO es uno de los mejores métodos para
generar nuevos clientes sin tener que recurrir a anuncios de medios pagados.

7.  . Ventaja competitiva
 Tener un sitio web profesional te permite estar entre los primeros en
tu nicho en comparación con los competidores que, si no tienen
un sitio web tan bueno como el tuyo, siempre estar serán un paso
atrás en el mundo digital.
 Es decir, cuando tu competencia apenas comienza a darse cuenta de
los beneficios de tener un sitio web profesional, ya tendrás establecida
tu presencia online y continuarás como líder y referencia en el
mercado.
 4. Mayor generación de ingresos
 Un sitio web diseñado profesionalmente atraerá más atención y, por lo
tanto, a los visitantes. Las personas, por naturaleza, generalmente
buscan lo que les atrae y esto no es diferente en el mundo del diseño
web.
 Por eso es importante contar con profesionales del área para la
construcción visual de tu sitio web, porque cuanta más gente visite y
esté convencida a quedarse más tiempo, tanto por el contenido como
por el diseño, más probabilidades tendrás de convertir a esos
visitantes en clientes. Es decir, mayor será la posibilidad de generar
ingresos.

8.  5. Aumento del marketing boca a boca
 Has visitado un sitio web cuyo diseño atrajo tu atención hasta el punto
de hacerte hablar a tus amigos y colegas al respecto? Créenos: Este
efecto en las personas es más común de lo que piensas. Así que tener
un sitio web de calidad puede fortalecer tu marketing de boca en
boca.
 Después de todo, un buen diseño y una navegación intuitiva brindan a
tus visitantes una gran experiencia, además de atraer a las personas
con una predisposición a conocer tu negocio, que es el primer paso
para que se conviertan en clientes.
 6. Acceso más práctico y rápido a tu negocio
 El acceso a Internet está disponible en casi todos los dispositivos
móviles o tabletas en estos días.
 Por lo tanto, tener una forma rápida y fácil para que los clientes
encuentren tu número de teléfono, dirección o contacto por correo
electrónico es una gran ventaja comercial que los sitios web pueden
ofrecer.
 Además, pueden descubrir fácilmente lo que haces y lo que puedes
ofrecerles. No tienes que decir demasiado para llamar la atención de
la gente. A veces, puedes dejar que el diseño hable por ti.

9.  ¿Qué hace un diseñador web?
 Si bien es común pensar que un diseñador web es responsable de
crear sitios web atractivos y completamente funcionales, hacen más
que eso.
 Los diseñadores web tienen en su trabajo tareas rutinarias
relacionadas con la creación de un diseño para medios digitales y la
creación de contenido.
 Por lo tanto, deben analizar tanto las necesidades del cliente como los
objetivos para configurar un sitio web a fin de brindar a los visitantes
la mejor experiencia.
 Además, diseñadores web deben saber cómo insertar gráficos, usar
lenguajes como HTML y actualizar el sitio cuando sea necesario.
 Ahora que has permanecido con nosotros hasta el final del texto, ya
sabes qué perfil debe tener un buen profesional de diseño web.
 Por supuesto, puntos como UI y UX no se pueden omitir. Y para
comprender como la experiencia del usuario aplica a los contenidos de
los sitios web, entra a este artículo sobre UX writing.


10.  En el diseño web, las difíciles calificaciones tradicionales como
los títulos universitarios no tienen tanto peso como en otras
industrias.
 Es una industria que cambia rápidamente, así que un título de 10
años no significa que seas un gran diseñador web hoy en día.
 En cambio, los diseñadores web son juzgados típicamente por
su catálogo de trabajos recientes que se presentan en
sus sitios de portafolio.
 Y no son solo los proyectos anteriores de tu portafolio los que
ayudan a destacar tus habilidades.
 Puedes convencer a los clientes potenciales de que tienes las
habilidades de diseño y desarrollo necesarias con el sitio
mismo.
 Para inspirarse en sitios de portafolios reales que utilizan
elementos de vanguardia en el diseño y desarrollo de frontend,
puedes revisar proyectos anteriores premiados en Awwwards.


11.  Mira cómo cada diseñador utiliza la tipografía, los espacios en
blanco, las animaciones, los iconos y otros elementos de diseño
para dar lo mejor de sí mismo.
 También puedes encontrar inspiración en otras comunidades
creativas como Dribble o Behance.
 Perfecciona el Dominio de las Herramientas Necesarias y las
Habilidades Blandas para Tener Éxito
 También hay un número de herramientas que necesitas
dominar, y habilidades blandas que harán o romperán tu carrera
como diseñador web.
 Empecemos por echar un vistazo a algunas de las herramientas
que podrías usar.
• Herramientas básicas de ilustración y edición de fotos: Illustrator,
Photoshop, Sketch o GIMP.
• Herramientas de diseño de interacción: Adobe XD o Invision
Studio.
• Entorno de desarrollo local (si desarrollas prototipos o trabajas
con un CMS): DesktopServer, XAMPP, etc. (Aprende a instalar
WordPress localmente para probar nuevos diseños).

12.  También hay un número de frameworks populares y CSS que pueden
ayudarte a destacar.
• Kits de animación: Animate.css, Bounce.js, y muchos más.
• Bibliotecas de jQuery y plugins: Lazy load, parallax scrolling, y muchos más.
• La familiaridad con Bootstrap, React y otros marcos de trabajo populares
para el desarrollo del frontend es crucial.
• Conocer WordPress y cómo crear una plantilla también puede ser un punto
de venta clave para los clientes potenciales que trabajan con el CMS.
 También necesitarás una serie de habilidades sociales si quieres tener éxito.
• Una comprensión de la psicología del consumidor y el comportamiento
humano en los sitios web. Los conceptos básicos incluyen la parálisis de la
decisión, el valor de la prueba social y la psicología del color.
• Como autónomo, debes aprender a poner precio a los proyectos y a usar
técnicas básicas de negociación.
• También tienes que aprender a crear propuestas y conseguir un cliente. Esta
es una habilidad valiosa incluso dentro de una agencia o empresa.
 ¿Estás interesado en convertirte en un diseñador web? ✅ Aprende cómo empezar
con este resumen con las mejores opciones de cursos que existen. 🎨

13.  1 - Introducción al diseño web
 Empezamos el curso de diseño web estableciendo las
bases del mismo: ¿Qué es el diseño web? ¿Qué fases
debemos realizar? ¿Qué pasos debemos dar?
¿Cuándo se considera que el trabajo está acabado?

14.  2. Anatomía y claves del diseño web
 Una de las claves de diseñar una web a medida es que
no tenemos que adaptar el contenido al diseño, sino
que haremos el diseño a medida según el contenido.
Y esto, aunque parezca una tontería, es
importantísimo.

15.  Así pues, son muchos los aspectos que debemos tener
presentes en el momento de diseñar nuestra web y
suele ser difícil que una plantilla los cumpla todos.
 Esta es la ventaja de poder diseñar nuestra web a
medida, y como siempre, todo dependerá del
objetivo de la misma. Siempre debemos tener
presente este objetivo mientras diseñamos nuestra
web, si no lo perdemos de vista, solo tendremos que
hacerlo fácil y sencillo y ya lo tendremos. ¡Que no se
nos olvide!

16.  3 - Esquema funcional de una web
 Vamos pues a elaborar un funcional para la web que
nos ocupa, y veremos qué denominadores comunes
tenemos en estos casos, y qué particularidades nos
encontramos.
 Como vemos, no solo nos informa de las "vistas" que
deberemos crear, sino también del flujo de las
mismas. Lo podremos crear con cualquier software,
desde una presentación de Google hasta con
Illustrator, un Keynote o PowerPoint

17. Contenido
de un curso
Web Design
• Conceptos básicos de HTML y CSS
• Estructura de la web
• Botones
• Tipografía
• Elementos de los medios de comunicación
• Componentes
• Conceptos básicos de estilismo
• Conceptos básicos de diseño
• Diseños avanzados
• Diseño sensible
• CMS y contenido dinámico
• SEO

18. • Conceptos básicos de HTML y CSS
• Etiquetas de Encabezado y HTML
• Clases de CSS
• Estructura de la red y anidación de la división
• Elementos de los medios de comunicación
• CSS externo
• Probando tu sitio web
• Conceptos básicos de estilismo
• Conceptos básicos de diseño
• Diseños avanzados
• Diseño responsivo
• CMS y contenido dinámico
• SEO
