Paper wireframe

Clase 14 de 41 • Curso de HTML y CSS 2019

Clase anteriorSiguiente clase

Yuri Añorga

student•

Programación + Diseño … ¡Este curso me está encantando!.. Y sé que a ustedes también.

Johan Marcel Fernandez Castillo

student•

See 😁

Rabi Leonel Leon Chan

student•

Super Excelente !

Luis Fernando Valladares Castro

student•

Hola a todos, soy un viejo alumno del curso y decidí crear el proyecto detalle a detalle como se presenta en este vídeo y desarrollo a lo largo del curso más pequeñas correcciones y ciertas mejoras en el código.

Me alegra poder compartirlo para que puedan utilizarlo como referencia a lo largo del curso y comentarles que cuenta con su repositorio de GitHub para que puedan clonarlo.

Pagina Web: https://luisvalladaresc.github.io/producto-digital/ Repositorio: https://github.com/luisvalladaresc/producto-digital

Gerardo Alvarado Garcia

student•

Te quedó muy bien

Santos Romero

student•

Muy valioso tu aporte.

Andres Felipe Valencia Benitez

student•

Boceto rápido en inVision-Freehand:

alvaro nicolas agreda bogota

student•

hay algún vídeo en platzi que explique como usar esa herramienta ?

Andres Felipe Valencia Benitez

student•

Hola Nicol! Si esta herramienta la explican en el siguiente video Boceto rapido. Es del curso de Diseño de prototipos.

Never Andrés Aparicio Hernandéz

student•

PLATZI NO ME ESTA GUSTANDO, ME ESTA ENCANTANDO MAS DE LO QUE PENSÉ LOS MEJORES 900000 INVERTIDOS EN MI VIDA

Jose Armando Acevedo Angarita

student•

Estoy totalmente de acuerdo querido compañero, lo mejor de la vidaaaaaaaa!!

Raysa Karina Diaz Cifuentes

student•

Cierto!

Pablo Andres

student•

Paper wireframe

Qué queremos hacer?

Primero comunicamos nuestro producto. Procuramos tener los CTA (call to action o los botones) visibles para el usuario.

Agregamos el logo en la esquina superior izquierda, ya que la visualización de los usuarios es en la diagonal de izquierda a derecha de arriba hacia abajo. Los elemento principales deberíamos ponerlos en esa línea.

Sólo agrego los elementos que se que voy a usar efectivamente en el sitio.

Lo importante es que hagas un “Paper Wireframe” rápido, en menos de 10 minutos, si no, no vale la pena que hagas uno.

Me pongo en el lugar del usuario.

Boris Hilmar Encinas Manjon

student•

++Conceptos basicos son IMPORTATANTES tener claros en el video++

Wireframe (diseño web) Ir a la navegaciónIr a la búsqueda Para otros usos de este término, véase wireframe.

Un documento esquemático para un perfil personal creado usando Balsamiq. Un wireframe para un sitio web, también conocido como un esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web.1 El wireframe esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto.2 Usualmente este esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos.3 En otras palabras, se enfoca en “qué hace la pantalla, no cómo se ve.”4 Los esquemas pueden ser dibujados con lápiz y papel o esquemas en una pizarra, o pueden ser producidos con medios de diseño de aplicaciones de software libre o comerciales. Los wireframes se enfocan en:5 • Los tipos de información que será mostrada • La cantidad de las funciones disponibles • Las prioridades relativas de la información y las funciones • Las reglas para mostrar ciertos tipos de información • El efecto de los distintos escenarios en la pantalla El wireframe del sitio web conecta la estructura conceptual, o arquitectura de la información, con la superficie, o diseño visual del sitio web.2 Los wireframes ayudan a establecer funcionalidad, y las relaciones entre las diferentes plantillas de pantallas de un sitio web. Un proceso iterativo de creación de wireframes es una forma efectiva de hacer prototipos de páginas rápidos, mientras se mide la practicidad de un concepto de diseño. Típicamente, la esquematización comienza entre “diagramas de flujo de estructuras de trabajo de alto nivel o mapas de sitio y diseños de pantallas.”3 Dentro del proceso de construcción de un sitio web, el dibujo de un wireframe es donde el concepto se vuelve tangible.6

++¿Qué es y para qué sirve una landing page?++ Una landing page es una página web preliminar o pagina de aterrizaje donde queremos destacar algo en especial, ya sea un producto, o alguna novedad o promoción de un producto. Se utilizan para todo lo que es SEM (search engine marketing), más conocido como los anuncios de Google Adwords.

++++++¿Qué es el footer de una página web?++++++ El footer es la parte inferior de una estructura web en la que generalmente se incluyen links de navegación, enlaces de interés, copyright o botones a las redes sociales del site. El footer suele estar claramente diferenciada de alguna forma del resto de la página web.

Eduardo Saa

student•

Importante para tener claros los conceptos.

Johnny Aroldo Lopez de la Cruz

student•

Like si también has visto la carita feliz. 🙂

Jesus Olivo Lacroix

student•

Este profesor es lo que se le conoce en el campo como "Un Unicornio" por eso sabe tanto y su metodologia de enseñanza es tan interactiva (Colorida), ya que maneja mucho contenido visualmente atractivo con el cual esta muy familiarizado y nos permite fijar mas rapido la informacion. (Por lo menos mas rapido para personas visuales como yo)

José Francisco Ojeda Vera

student•

Los paper wireframes nos permiten armar de manera rapida una estructura de entrada al proyecto que estamos construyendo.

Christian David Sánchez

student•

Es una buena herramienta para hacer el diagrama del flujo de la información https://www.lucidchart.com

Cristihan Albarran

student•

Pienso que tambien seria importante tomar en cuanta lo siguiente: - Se requiere que los usuarios esten autenticados para realizar cualquier operacion de pago - Crear login y signup page - Una page del estado de la compra y producto (queremos darle un feedback al usuario de que nos estamos encargando del producto)

otras cosas mas... pero esto creo que seria lo general.

Alejandro Sanchez

student•

Bueno es un curso básico todavía xD

Antonio Guerrero Espinoza

student•

Impresionando que no puedo ver el vídeo con tranquilidad por el sonido del plumón en el papel jajaja, ni modo.

Andrés Felipe Eslava Zuluaga

student•

Jajajajaja perdón, pero es que
Concepto de caja en CSS: 2 horas.
Comprender bien la caja en HTML: 1 hora.
Usar JS para animar una caja: 2 horas.
Curso de Desarrollo Web Avanzado: 12 horas.

Que ese dibujo no parezca una caja no tiene precio.
Jajajaja
Excelente profesor!! 😉

HECTOR CARTAGENA CARTAGENA

student•

Muy bueno

Daniel Alex Vallejos Paredes

student•

Lo justo y necesario. Muy buena didáctica.

Jaime Santos

student•

Brigitte Melody Mendez Pastor

student•

Gracias!

Sebastián Riátiga

student•

La visualización del usuario es cruzada, de izquierda a derecha y de arriba hacia abajo.
Para poner un menú, este debe cumplir un objetivo, de lo contrario, es mejor no colocarlo.
Un paper wireframe debe ser rápido (máximo 10 mins).
En el PW, aparte de la estructura, se debe especificar cada punto.
Primero se debe crear la sección y luego se crea el link.

Bryan Duarte

student•

RIP oídos por el plumón x_x

Gerardo Ruiz

student•

Odiaba hacer estos diagramas en Ingeniería de Software en la Universidad XD

Héctor Alonso Padilla Ramírez

student•

Toda idea empieza con papel y lápiz. Sneakpeekit tiene plantillas universales para que bocetes tus proyectos web.

Jose Morales Varon

student•

Esta clase de planificación acerca del producto a realizar es una de las cosas que más me gustan de esta clase de carrea de arquitetcto frontend. A darle ❤

Luan de Souza

student•

Tal vez te interezara la carrera de desarrollo de "Diseño de Producto" Podes verla aquí https://platzi.com/clases/learning-path/diseno-producto/

Jhanpiere Montes

student•

Alguien más sabía sobre la facilidad del paper wireframe?

Andrés David Solarte Vidal

student•

Genial, no?

Aarón Fabricio Santa Cruz Valdez

student•

La verdad es muy útil para plasmar tus ideas.

Paper wireframe

Internet

¿Dónde aprender HTML y CSS modernos?

Pasos para aprender HTML y CSS

¿Qué conocimientos necesito para tomar este curso?

¿Cómo se construye la tecnología web?

¿Cómo instalar ATOM?

Comprendamos Internet

Los básicos del web

¿Cómo funciona HTML?

Etiquetas y sus atributos

Reto 1: crea tu fiesta de gifs

¿Cómo funciona CSS?

¿Cómo funciona JavaScript?

Hola mundo y estructura del proyecto

Listado de las etiquetas más usadas

Construcción de un producto digital

Paper wireframe

¿Cómo instalar XD?

Diseño de interfaces

Maquetación de la NavBar

Maquetación de main_section y agregando estilos CSS

Maquetación de tarjetas de producto

Fuentes personalizadas y variables de CSS

Categorizando etiquetas según nuestra estructura en HTML

Reto 2: Maquetar el home del producto digital

Reglas responsive

Animaciones y transiciones

Integrando otras herramientas

Atributos especiales de las etiquetas para mejorar el funcionamiento de nuestros formularios

Librería vs Framework

Sistema de Grillas

Completando el Sistema de Grillas

Reto 3: implementación del sistema de grillas

Maquetación del formulario

Creación de formulario: inputs

Creación de formulario: botones

¿Cómo crear tu cuenta en Paypal?

Configuración del botón de pago con Paypal

Autofill del formulario de PayPal

Maquetación de pantalla de éxito y error

Deploy

Testing con el Navegador

Cómo crear tu cuenta en Github

Subiendo nuestro proyecto a Internet con Github

Conclusión

Conclusiones

Bonus

Librería vs Framework