No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Resultado final

20/22
Recursos

Aportes 69

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 馃挌

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)

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

Directo al curso de Sass->

Les comparto el resultado final del proyecto del curso

PD: No sale toda la p谩gina : 8

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.

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

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

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.

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.

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

React o Angular ? 鈥

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

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

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

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

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鈥

Excelente curso. Personalmente me sirve para ver desde otra perspectiva el dise帽o.

Me encanto el curso 鉂わ笍

Bueno, muy bien,鈥 como dise帽ador UI/UX, este curso ha despertado mi suficiente inter茅s por aprender m谩s sobre programaci贸n, especialmente entender qu茅 es SASS y Javascript con React. 隆Gracias por este curso que est谩 a la mitad entre dise帽o y programaci贸n!

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.

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)

Yo amo figma para hacer estos planos/dise帽os!!!

Buenas tardes comunidad! realmente fue un curso r谩pido y productivo, me gustar铆a tener un folder para guardar clases como esta, que seguramente me servir谩 en mi futuro como developer.

隆隆Muy pr谩ctico!!
隆隆A darle!!

馃槵 Lo que aprend铆 de dise帽o aqu铆 es de bastante utilidad!

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

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!