Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Resultado final

20/22
Recursos

Aportes 62

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Dudas muchas, muero por aprender React, pero voy de a poco, pero a pesar de las dudas sobre ese Framework en cuanto a conceptos fundamentales de diseño todo quedó muy claro y las ganas de aplicar se verán reflejadas en mi próximo proyecto. Me dignaré a crear mi propia página web personal fuera de mediocridades y con mucho amor 💚

AH!!! YA ENTENDÍ EL STYLE GUIDE!!! es una página que sirve como referencia visual de los estilos que se están aplicando!!!

Pasos del diseño
1-Crear el brief para tener claor los objetivos
2-Crear siteMap para definir la estructura de la app basado en los objetivos del brief
3-Crear User flow para mapear las tareas mas comunes del usuraio (pasos que tiene que hacer un usuario para realizar una tarea) se pueden crear tantos como sea necesario
5-Dibujar wireframes de baja fidelidad a mano para modificarlos rápidamente
6-Crear wireframes de alta fidelidad (dektop, mobile, etc.)
7-Probar nuestro diseño con colores, tipografías etc. (con ayuda de nuestro Style Guide)
8-Crear los componentes (en módulos separados para facilitar la reutilización y con variables CSS para cambiar la paleta de colores fácilmente)

Directo al curso de Sass->

Siento que la guía de estilos es un proyecto similar al del curso de Sistemas de Diseño para Desarrolladores

Un sitio web donde consultar y documentar los estilos como fuentes, colores, componentes, animaciones, etc… que usa el proyecto. Recomiendo mucho ese curso.

Les comparto el resultado final del proyecto del curso

PD: No sale toda la página : 8

Páginas recomendadas que ví a lo largo del curso:

figma.com – Página web para realizar diseños prototipo de páginas web, con sistema de colaboración como Google Drive. (Aporte de @albertkevin)

color.adobe.com/es/create/color-wheel – Página web para ver y crear una paleta de colores.

fonts.google.com – Fuentes de letra everywhere.

material.io – Página sobre Material Design, que es una normativa de diseño puesta por Google en Android, se pueden aprender cosas de diseño o utilizar sus íconos y recursos.

Super sin duda aprendí un proceso creativo para desarrollo de web y buenas practicas para mejorar muchos aspectos de mis proyectos

Muy buen curso, aporta muchas herramientas, pero tambien revelo todo lo que me falta por aprender de css y definitivamente toca tomar curso de React aunque un amigo que es Arquitecto en un equipo de desarrollo me recomendo hacer tambien el curso de Angular

Creo que tomare el curso de React por que esta parte no lo entendí muy bien.

React es fenomenal. Acelera el desarrollo de la página y lo hace mas sencillo.

React o Angular ? …

Paso para el Diseño

  • Paso 1: Creamos nuestro Brief -> Resumen de plan
  • Paso 2: Creamos nuestro site Map -> Mapa del sitio de solución al brief
  • Paso 3: Creamos nuestro wireframe -> diseño en blanco y negro en Desk y Tablet
  • Paso 4: Creamos nuestro sketch -> diseño con tonos de color e iconografías en Desk y Tablet
  • Paso 5: Definir componentes para evitar retrabajo
  • Paso 6: No olvides mostrar tu trabajo y tener mente abierta para los comentarios y criticas todo comentario es bueno para mejorar, claro obviando los comentarios tóxicos.

Me quedó muy presente lo del proceso creativo porque ciertamente yo me creo (creía) una persona poco creativa, y conocer este concepto me hizo reconsiderar mis pensamientos.

Para practicar lo voy hacer con html, css, js para poner en practica lo aprendido ya que todavía no toco react.js

Excelente recapitalización

Está bastante interesante esto y quedan ganas de aprender más de estas tecnologías, ya las estoy agregando a la ruta de aprendizaje.

🎨 El diseño es importante, este es el primer contacto que tendrá el usuario con la aplicación.

Aprendi muchas cosas de diseño aunque de react no tengo idea esa parte me dejo confundido no importa fue un buen curso

Es increible el tiempo que te podes ahorrar gracias a React

Este curso me gustó mucho a pesar de que no entendí las partes de sass y react. Tiene muchas perlas de información super valiosas

En esta clase se consolida todo el curso, se puede apreciar el resultado de todo el conocimiento dado, que buen curso!

¿Como se abre el proyecto de git en nuestro pc?

Mi reto sera pasar esto usando CSS y JS puro, sin frameworks. 😃

Gracias platzi!!!

Increíble! Curso!

Aunque como novato hay muchas dudas ya tengo mis apuntes y a ver los cursos de lo que no me quedo claro…

El sitio web se arma como un rompecabezas 😄

Excelente… se siente deseos de Volar… de continuar y no dejar de aprender…

Para mi estuvo muy satisfactorio el curso, aprendí bastante, pero tambien me di cuenta que esto es solo el comienzo, hace falta mucho por aprender 😃

Lo de diseño es claro ya lo referente al desarrollo web hay que seguir aprendiendo!

4.- Wireframe

1.- Brief

2.- Site map

3.- User flow

Página final

Los primeros pasos son.

  1. Brief y requerimientos técnicos.
    1.1 Objetivos, publico objetivo, distribución, competencia y
    cronograma.
  2. Site map y user flow por pagina.
  3. Wireframe.
  4. Creación de la pagina.

Vengo en la ruta de fundamentos de programación y éste curso está perfecto por que de verdad te muestra muchos conceptos básicos de diseño y te vas haciendo a la idea de lo que debes o no hacer al momento de aplicar tu programa, web, app, etc. Es muy buen curso y ésto como Samantha lo menciona en un principio es aplicable a muchas otras áreas de la programación. Además de que en mi caso me hace interesarme un poco más en el diseño… cosa que no me atraé mucho.

Veo el Sketch gris y aun así se ve bien, veo el get away del curso, gracias

Muy buen curso, aunque creo que es necesario profundizar muchos conceptos con otros cursos, pero abre los ojos para darse cuenta que se estaba trabajando mal varios aspectos.

Muy bueno, hasta ahora e slo mas cerca que he experimentado de un trabajo completo como desarollador, coincido con varios comentarios, esto es solo el comienzo, falta mucho

Me encanto el curso ❤️

gracias me ayudo demasiado para poder hacer una web para restaurante restaurante pero primero partir de un diagrama y tambien establecer nuestros colores y tipografia como diagramas para saber el funcionamiento

Gracias por el resumen, muy oportuno.

El resultado final debe contener el Brief, diagrama de flujo, user flow, wirefrimes y el diseño final de la pagina. Me gusto este curso, gracias Samanta.

Aun que ya utilice ciertas herramientas mencionadas, voy a tratar de mejorar en las recomendaciones como en la parte de imágenes y animaciones.

Muy interesante el curso, para los que estamos empezando nos da una pauta del diseño para nuestras creaciones, lo más importante, en mi caso, me mostró las falencias en mi conocimiento y ayuda a trazar una mejor ruta de aprendizaje.

Me gusta la idea del styleguide, y usar css grid es de las mejores herramientas que podemos usar para estructurar una web. Recomiendo mucho aprenderlo

muy buen proyecto, tomarlo como referencia ayudara bastante.

Excelente curso! Breve pero potente. Me sirvió para reforzar varios temas y para aprender buenas prácticas de diseño web 😃
.
Gracias Samanta!!

Definitivamente aprendí un montón con este curso. Quiero avanzar en muchos temas. Tema favoritos: Colores, UX y Brief. Importantes. Me encantó.

aprendiendo cada dai mas 💚

Muy buen curso, básico pero conciso, es el primer curso que se debería tomar antes de empezar con cualquier otro de desarrollo.

uy interesante como se hizo un resumen de todo el curso, fue muy conciso!!!

Excelente resumen, preciso e interesante. #NSL 😄

Gracias por el contenido!

Alguien me podria decir ¿que es progressive enhancement aun no me quedda claro?

Me abrieron los ojos, yo pensé que el diseño solo eran colores y letritas. Muchas gracias.

Sin duda me ha servido de ayuda para poder comprender de una manera un poco mas clara el tema del diseño y la importancia que este al igual que el backend tiene para el performance de un sitio, hay mucho que aprender pero vamos a darle

Muy buen curso

Exelente Samanta!

Creo que como muchos me voy con dudas pero bastante motivado a aprender más ❤️

Para mi fue un gran curso. Debo ver otros cursos para aplicar lo visto en este, y asi poder desarrollar el proyecto de la profe Samanta. Esto me hábre el camino del diseño y la programacion que se ven muy interesante juntos como complemento uno del otro. ¡Nunca pares de aprender!