Trabajo de Sexto Semestre, Diseño de pantallas para web y formularios webDiseño de paginas web de entrada para Internet.

1. Diseño de pantallas para web y formularios
web
Diseño de paginas web de entrada para
Internet
Grupo # 3
• BARRE OLMEDO ROSA YAMILETH
• MEDINA YELA ADALBERTO
• VILLAMAR ACOSTA ANDY ARTURO
Proyecto de Diseño de Sistemas Informáticos por Andy Villamar. Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-CompartirIgual 4.0
Internacional.
Creado a partir de la obra en https://docs.google.com/presentation/d/18O5v_qfVObD-0l1a4qwjH2-vBMQ2bD-E/edit?usp=sharing&ouid=108459245398259258823&rtpof=true&sd=true

2. Diseño de pantallas para web
Primero se desarrolla un prototipo
para ver la aceptación del
cliente.
Software que simulan la pantalla de
un sitio web

3. Justinmind
La aplicación es bastante sencilla de
usar y se divide en dos partes
principales, los paneles dinámicos y los
eventos. Los paneles dinámicos
permiten poner varios elementos en la
misma área, de esta forma podremos
simular botones, cambios de pestaña u
otros contenidos que cambian
dinámicamente. Los eventos permiten
indicar acciones sobre los elementos que
tenemos en nuestro diseño.

4. ¿Qué es el Diseño Web
Responsivo?
El diseño responsivo es
un enfoque del diseño
web que hace que el
contenido de la web se
adapte a los diferentes
tamaños de pantalla y
ventana de una variedad
de dispositivos.

5. ¿Qué es el Diseño Web
Adaptativo?
El diseño adaptativo
entrega múltiples
versiones
completamente
diferentes de la misma
página.

6. Diseño de formularios web
Los formularios permiten a los usuarios la
introducción de datos, que generalmente
se envían a un servidor web para su
procesamiento y almacenamiento (Enviar
los datos de un formulario más adelante
en el módulo), o se usan en el lado del
cliente para provocar de alguna manera
una actualización inmediata de la interfaz.

7. 7 Reglas de oro para el diseño web de formularios
Pedir solo los
datos
esenciales
Apostar por
las llamadas a
la acción
Ahorrar tiempo
de escritura al
usuario
Diferenciar los
campos
obligatorios
de los que no
01 03
02 04
Evitar el
botón de
restaurar
campos
Liberarse de los
captchas
imposibles
05
06
07
Proporcionar un mensaje
de error claro

8. Ejemplos de diseño de formularios
El formulario principal de
Pinterest se destaca por
la gran cantidad de
alternativas que te
entrega para poder crear
una cuenta y poder
ingresar.
Pinterest

9. Ejemplos de diseño de formularios
Su formulario de registro
es muy corto, pero lo
interesante es que te
nombra unos cuantos
objetivos que puedes
lograr con este sitio.
Mailchimp

10. Ejemplos de diseño de formularios
Incluye su formulario de
búsqueda para encontrar
el mejor lugar luego de
que el usuario le indique
ciertos datos.
Airbnb

11. Diseño de páginas web de entrada para Internet
Como su nombre lo indica, la página de
entrada es el punto donde los usuarios de
internet llegan a su sitio web o sitio móvil,
es la primera página que alguien ve en su
sitio. Consultando las páginas de entrada
principales en los informes analíticos, se
descubre en dónde y porqué los usuarios
son atraídos al sitio para luego optimizar
estas paginas de entrada para captar más
usuarios y que estos quieran investigar
más del sitio.

12. Estructura de una página de entrada
● La primera parte de la home es la parte
dedicada a tu propia marca.
● La segunda zona es la parte donde
muestran cuáles son los servicios que
ofrece tu empresa.
● Por último, en tercer lugar la parte más
variable de tu sitio donde mostraremos
elementos como blog, mapa, redes
sociales o testimonios, por ejemplo.

13. ZONA 1: 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. Por ello,
cuando hablamos del diseño de la
página de inicio es fundamental seguir
el esquema de la pirámide invertida,
colocando los elementos más
importantes en la parte de arriba y lo
menos relevante debajo.
Lo más Importante
Lo menos
Impo
rtant
e

14. ZONA 1: MUESTRA AL USUARIO QUIÉN ERES Y QUÉ
TE HACE TAN ESPECIAL
¿Qué elementos incluir en
la zona 1?
Datos de
contacto
Menú
Logotipo
Slider Caja de
búsqueda

15. ZONA 1: MUESTRA AL USUARIO QUIÉN ERES Y QUÉ
TE HACE TAN ESPECIAL
Menú de Hamburguesa
El menú hamburguesa es un botón que
normalmente se sitúa en una esquina
de la parte superior de la interfaz
gráfica, y que se usa como menú donde
guardar enlaces o categorías para
facilitar la navegación.
La forma consiste en tres líneas
horizontales paralelas, que sugieren
una lista.

16. ZONA 2: CUÁLES SON TUS SERVICIOS
La segunda parte de la home es la que vamos a dedicar
a hablar de nuestros servicios o productos.
Hay dos motivos FUNDAMENTALES por los que incluir
este espacio en la página de inicio:
• Por Usabilidad
¿Para qué obligar al usuario a hacer clic en la pestaña
de servicios de arriba si puedes mostrarle lo que haces
sin que tenga que hacer ninguna acción?
• Por Seo
Añadir los servicios en la home es una oportunidad para
incluir keywords relevantes para tu posicionamiento en la
sección de tu web a la que más importancia otorga
Google.

17. EJEMPLOS

18. ZONA 3: EXTRAS QUE REFUERCEN TU MARCA
Testimonios
Redes
sociales
Trabajos
realizados
Últimos
artículos del
blog
01
03
02
04
Mapa y
contacto
05