Elementos

básicos en la
maquetación de
una página web

Desarrollo Web
Que necesito para mi diseño web?

Contenido base Plataforma web

Textos de la web Plantillas web, desarrollo,
aplicaciones.

Objetivo Principal Diseño visual

Que se pretende conseguir Logos, tipografía y colores
con ella.
Maquetación
web
Maquetación Web
● La maquetación web se encarga de la distribución de los diferentes elementos en una página:
encabezados, columnas, menús…

● La maquetación web consiste en transformar el diseño de una web en un conjunto de archivos

(html, css y js) para que los navegadores web puedan interpretarlos y reproducirlos correctamente
en diferentes dispositivos. La maquetación es una fase avanzada del proceso de desarrollo web.

● Mediante esa maquetación, definimos ante

qué tipo de página nos encontramos: la
página de inicio, también llamada home o
homepage, una página de aterrizaje o landing
page, la ficha de producto en una tienda
online, secciones corporativas, textos legales
etc.
Tipo de página
Landing page Sección corporativa

Inicio o Home Ficha de producto

Página de inicio
● Es la que vertebra un sitio web, y la que van a buscar todas
aquellas visitas que hayan accedido a cualquier otra de las
páginas de la web y precisen más información o detalles que
les inspiren confianza. Por lo general, suele ser la página con
mayor peso y en la que recalan la mayoría de las visitas.

● La maquetación web intenta representar tres aspectos

importantes: la marca (que ocupa la zona alta de la home),
los servicios o productos (que quedan en la zona media de
la página) y finalmente otros aspectos complementarios de
interés (en la parte inferior o footer), como pueden ser los
datos de contacto.
Zona superior
La primera parte de la home es la parte dedicada a tu propia marca.

MUESTRA AL USUARIO QUIÉN ERES Y QUÉ TE HACE TAN ESPECIAL

Cuando un usuario llegue a tu web por primera vez debe saber en máximo tres segundos a qué te
dedicas.

Los elementos que debe distribuir adecuadamente la maquetación web de la página de inicio pueden
ser los siguientes:

● Logotipo
● Imagen fija o slider (carrusel de imágenes y/o texto)
● Menú
● Favicon
● Datos de contacto esenciales
● Caja de búsqueda
● Slider
Zona media de la home:
Esta zona se utiliza para mostrar de un primer vistazo los principales productos o servicios, y también
el espacio en que : explayarse en los contenidos con un buen copy (texto persuasivo clásico del
marketing) para introducir las palabras clave por las que es importante conseguir que la página
aparezca en los primeros resultados de los buscadores.

Explicar los aspectos diferenciadores del negocio de forma atractiva y ubicar correctamente
llamadas a la acción son tareas clave que ha de tener en cuenta la maquetación web de una buena
página de inicio.
Zona inferior de la home:
Es el espacio en el que poner aspectos adicionales, pero también importantes para el usuario (y por qué
no decirlo, para el posicionamiento).

● Algunos de ellos son:

● Testimonios de los clientes.
● Mapa y detalles de contacto.
● Redes sociales que seguir.
● Últimos artículos publicados en el blog.
 En la maquetación de una página web se utilizan lenguajes

HT
de programación. Si bien existen muchos de ellos, el más
utilizado es el HTML porque es el más eficiente para poner
cada cosa del diseño estático en su lugar.

Para maquetar un sitio web con HTML y CSS, se edifican

ML diversos bloques y contenedores a través de códigos, en los

que se ponen imágenes y textos y se planifica el ancho y el
alto, entre otras cosas.

y
CSS
Maquetación web
Pasos para la maquetación:
● Realizar bocetos (wireframe): antes de maquetar es necesario elaborar un boceto en donde esté clarísima
la distribución de los elementos de la web (titulares, párrafos, imágenes, banners de publicidad, y más).
● Elegir paletas de colores: el diseño de una web tiene que ser bonito y atractivo para que cause una buena
impresión en el navegador. Para ello, es necesario escoger una paleta de colores bonita y que se adapte al
perfil de la página.
● Uso de etiquetas HTML5: este es un paso muy importante para el posicionamiento de la página web. La
clave es emplear diversidad de etiquetas para mejorar el nivel de indexación.
● Prefijos CSS3: aquí es indispensable poner prefijos para no tener problemas de incompatibilidad entre los
navegadores.
● Comprobar tecnologías HTML5, CSS, SVG: estos tres aspectos tienen infinidad de propiedades que los
navegadores no soportan. Para evitar problemas, es necesario utilizar una página donde se pueda ver
cuáles funcionan y cuáles no.
● Usar tipografías para iconos: se están empezando a reemplazar imágenes por tipografías para los iconos
porque realzan el aspecto estético de la web.
● Documentar el código: es útil dejar documentado todo el proceso para tener un seguimiento de lo que se
hizo.
Estructura básica de una página web
● Crear carpeta: Pagina web
● Crear documento de texto (bloc de notas)
● Cambiar nombre y la extensión del archivo (index.html)
● Después para editar, clic derecho y block de notas

Elementos básicos del código:

 <!DOCTYPE html>
 <html>
 <head>
<title>BIENVENIDO</title>
 </head>
 <body>
<h1>Bienvenido</h1> (texto o título)
<p>Mi primera página web</p>
 </body>
 </html>
Guardamos y veremos o actualicemos en el navegador
Color de fondo, parrafos
 <!DOCTYPE html>
 <html>
 <head>
<title>BIENVENIDO</title>
 </head>
 <body bgcolor=“black” text=“White”>
<h1>Bienvenido</h1> (texto o título)
<p>Mi primera página web</p>
 </body>
 </html>

http:/www.color-hex.com/color-wheel/
Insertar imágenes
 <!DOCTYPE html>
 <html>
 <head>
 <title>BIENVENIDO</title>
 </head>
 <body bgcolor=“black”, text=“white”>Bienvenido
 <p>Mi primera página web</p>
 <img src="img1.jpg">
 </body>
 </html>
Títulos
 <!DOCTYPE html>
 <html>
 <head>
 <title>BIENVENIDO</title>
 </head>
 <body bgcolor=“black”, text=“white”>Bienvenido
 <p>Mi primera página web</p>
 <img src="img1.jpg">
 <h1>Titulo aqui</h1>
 <h2> Titulo aqui </h2>
 <h3> Titulo aqui </h3>
 <h4> Titulo aqui </h4>
 <h5> Titulo aqui </h5>
 <h6> Titulo aqui </h6>
 </body>
 </html>
Tablas
 <!DOCTYPE html>
 <html>
 <head>
 <title>BIENVENIDO</title>
 </head>
 <body bgcolor=“black”, text=“white”>Bienvenido
 <p>Mi primera página web</p>
 <table border=“1”>
 <tr> (línea)
 <td>Texto 1 </td>
 <td>Texto 2 </td>
 <td>Otra columna</td>
 </tr>
 <img src="img1.jpg">

 </body>
 </html>
https://www.youtube.com/watch?v=9l1hicPrRNM

https://lemon.digital/diseno-web-ux-ui/
Características de la maquetación web
1. Presenta una navegación simple
Para aprender cómo maquetar una página web, primero debes saber que este proceso tiene el objetivo de ofrecer al
usuario una navegación rápida e intuitiva. Por lo mismo, los botones, enlaces y otros elementos que necesita
encontrar el usuario para realizar una acción no pueden estar ocultos.
De hecho, mientras menor sea la cantidad de clics, mucho mejor. Recuerda que si el usuario percibe complicaciones
para navegar lo más probable es que se retire.

2. Sigue un orden jerárquico

Con esta característica de la maquetación web se pretende guiar al usuario a concretar una acción en particular
desde que ingresa a la página. Para ello, es fundamental ubicar las imágenes, menús y tipografías de forma
estratégica.
Si tu página web sigue una distribución adecuada, será más práctico para el usuario navegar a través de ella. Esto
significa que permanecerá más tiempo en el sitio y, por ende, descubrirá a detalle todas las funciones que se han
incorporado como parte del maquetado de la página web.

3. Incluye CTAs
Finalmente, esta característica de la maquetación web pretende marcar un antes y un después en la efectividad de tu
página.
Si con el orden jerárquico le sugerimos al usuario el rumbo que debe seguir para navegar en nuestra página, con
una llamada a la acción (CTA) nos aseguramos de que realiza una acción en particular, por ejemplo, una compra.
Entonces, asegúrate de dedicar el tiempo necesario a esta tarea, pues una maquetación web exitosa debe contar con
los mejores CTAs.
Contents of this template
This is a slide structure based on a project proposal
You can delete this slide when you’re done editing the presentation

Fonts To view this template correctly in PowerPoint, download and install the fonts we used

Used and alternative resources An assortment of graphic resources that are suitable for use in this presentation
https://www.inboundcycle.com/blog-de-inbound-
Thanks slide marketing/trucos-dise%C3%B1o-ux-ui
You must keep it so that proper credits for our design are given

Colors All the colors used in this presentation

Icons and infographic resources These can be used in the template, and their size and color can be edited

Editable presentation theme You can edit the master slides easily. For more info, click here

For more info: You can visit our sister projects:

SLIDESGO | SLIDESGO SCHOOL | FAQs FREEPIK | FLATICON | STORYSET | WEPIK | VIDEVO
Table of contents
About the project Sneak peek
01 You can describe the topic of the 04 You can describe the topic of the
section here section here

Major requirements Project stages

02 You can describe the topic of the 05 You can describe the topic of the
section here section here

Project goals Our team

03 You can describe the topic of the 06 You can describe the topic of the
section here section here
Our company
You can give a brief description of
the topic you want to talk about here.
For example, if you want to talk
about Mercury, you can say that it’s
the smallest planet in the entire Solar
System
 01
About the
project
You can enter a subtitle
here if you need it

https://www.youtube.com/watch?v=9l1hicPrRNM
About the project

Do you know what helps you make your point

crystal clear?
Lists like this one:

● They’re simple
● You can organize your ideas clearly
● You’ll never forget to buy milk!

And the most important thing: your audience

won’t miss the point of your presentation ever
again, that’s for sure
Now
Earth is the third planet from the
Sun and the only one that harbors
life in the Solar System. It’s the
planet on which we live
Future
Despite being red, Mars is
actually a cold place. It's full of
iron oxide dust, which gives the
planet its reddish cast
Awesome
https://www.pinayu.com/blog/que-es-la-maquetacion-
web

words
Major requirements

Mercury Venus
Mercury is the closest Venus has a beautiful name
planet to the Sun and the and is the second planet
smallest one in the Solar from the Sun. It’s hot and
System—it’s only a bit has a poisonous
larger than the Moon atmosphere
10M
Big numbers catch your
audience’s attention
Budget

20% 30% 50%

Mercury Saturn Venus
Mercury is the closest Saturn is composed of Venus is the second
planet to the Sun hydrogen and helium planet from the Sun
Project goals

Goal 1 Goal 2 Goal 3

Mercury is the closest planet Venus is the second planet Despite being red, Mars is a
to the Sun from the Sun very cold place

Goal 4 Goal 5 Goal 6

Jupiter is the biggest planet in Saturn is composed of Neptune is the farthest planet
the Solar System hydrogen and helium from the Sun
Predicted results

$84,900
Expected income for 2XXX

1,300
Expected new customers for 2XXX

Follow the link in the graph to modify its data and then paste the
new one here. For more info, click here
 Check it out!
Earth is the third planet from the
Sun and the only one that harbors
life in the Solar System. It’s the
planet on which we live
 Sneak peek
You can replace the image on the
screen with your own work. Just
right-click on it and select
“Replace image”
Project stages
Jan Feb Mar Apr May Jun
Stage 01
Jupiter is the biggest
planet of them all

Stage 02
Venus is the second
planet from the Sun

Stage 03
Neptune is far away
from Earth
Shop online project proposal timeline

2xxx Mercury Mercury is the closest planet to the Sun

2xxx Venus Venus is the second planet from the Sun

2xxx Jupiter Jupiter is the biggest planet of them all

2xxx Saturn Saturn is composed of hydrogen and helium

Customer relationship management: types
CRM
Customer relationship
management

Operational Analytical Collaborative

Mercury is the closest Venus is the second Mars is actually a very
planet to the Sun planet from the Sun cold place

75% 20% 5%
Our partners
Partner A
Saturn is composed of
hydrogen and helium

Partner B
Jupiter is the biggest
planet of them all

Partner C
Mercury is the closest
planet to the Sun
World map
Our team

Rebecca Morris Sam Johnson Akita Kinomoto

You can speak a bit about this You can speak a bit about this You can speak a bit about this
person here person here person here
 Thanks!
Do you have any questions?

addyouremail@freepik.com
+91 620 421 838
yourwebsite.com
CREDITS: This presentation template was created by
Slidesgo, and includes icons by Flaticon, and
infographics & images by Freepik

Please keep this slide as attribution

Icon pack
Alternative resources
Here’s an assortment of alternative resources whose style fits that of this template:

Vectors:
● Isometric cms concept illustrated
● Isometric style cms concept illustrated
● Isometric cms concept
● Isometric illustration cms concept
Resources
Did you like the resources of this template? Get Vectors:
them for free at our other websites! ● Isometric style cms development concept
● Isometric style illustration cms concept
Photos: ● Isometric cms development concept
● Woman sitting on the floor while making a n ● Isometric style cms concept
ew purchase
● Isometric content management system illust
● Delivery man holding shopping bags ration
● Full shot woman shopping in market ● Web development isometric concept compos
● Medium shot woman carrying fabric bag ition illustration
● Beautiful young woman shopping for food
● Man checking off items in shopping list

Icons:
● ECommerce Flat Icon Pack
 Instructions for use
If you have a free account, in order to use this template, you must credit Slidesgo by keeping the Thanks slide. Please
refer to the next slide to read the instructions for premium users.

As a Free user, you are allowed to:

- Modify this template.
- Use it for both personal and commercial projects.

You are not allowed to:

- Sublicense, sell or rent any of Slidesgo Content (or a modified version of Slidesgo Content).
- Distribute Slidesgo Content unless it has been expressly authorized by Slidesgo.
- Include Slidesgo Content in an online or offline database or file.
- Offer Slidesgo templates (or modified versions of Slidesgo templates) for download.
- Acquire the copyright of Slidesgo Content.

For more information about editing slides, please read our FAQs or visit Slidesgo School:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school
 Instructions for use (premium users)
As a Premium user, you can use this template without attributing Slidesgo or keeping the Thanks slide.

You are allowed to:

● Modify this template.
● Use it for both personal and commercial purposes.
● Hide or delete the “Thanks” slide and the mention to Slidesgo in the credits.
● Share this template in an editable format with people who are not part of your team.

You are not allowed to:

● Sublicense, sell or rent this Slidesgo Template (or a modified version of this Slidesgo Template).
● Distribute this Slidesgo Template (or a modified version of this Slidesgo Template) or include it in a database or in
any other product or service that offers downloadable images, icons or presentations that may be subject to
distribution or resale.
● Use any of the elements that are part of this Slidesgo Template in an isolated and separated way from this
Template.
● Register any of the elements that are part of this template as a trademark or logo, or register it as a work in an
intellectual property registry or similar.

For more information about editing slides, please read our FAQs or visit Slidesgo School:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school
 Fonts & colors used

This presentation has been made using the following fonts:

Arya
(https://fonts.google.com/specimen/Arya)

Lato
(https://fonts.google.com/specimen/Lato)

#361ca0 #f9f9f9 #e2ffd5

#88d7ba #428abc
 Storyset

Create your Story with our illustrated concepts. Choose the style you like the most, edit its colors, pick
the background and layers you want to show and bring them to life with the animator panel! It will boost
your presentation. Check out how it works.

Pana Amico Bro Rafiki Cuate

 Use our editable graphic resources...

You can easily resize these resources without losing quality. To change the color, just ungroup the resource
and click on the object you want to change. Then, click on the paint bucket and select the color you want.
Group the resource again when you’re done. You can also look for more infographics on Slidesgo.
 JANUARY FEBRUARY MARCH APRIL MAY JUNE

PHASE 1

Task 1

Task 2

PHASE 2

Task 1

Task 2

JANUARY FEBRUARY MARCH APRIL

PHASE
1

Task 1

Task 2
 ...and our sets of editable icons

You can resize these icons without losing quality.

You can change the stroke and fill color; just select the icon and click on the paint bucket/pen.
In Google Slides, you can also use Flaticon’s extension, allowing you to customize and add even more icons.
Educational Icons Medical Icons
Business Icons Teamwork Icons
Help & Support Icons Avatar Icons
Creative Process Icons Performing Arts Icons
Nature Icons
SEO & Marketing Icons