¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos

A mi también me gustaría sigerir una página llamada Material Palette donde tu puedes combinar dos colores y te entrega toooda una pelata de colores con sus códigos hexadecimal para usar:
.

.
Yo aún sigo pensando en qué colores debería usar… 🤔

Les recomiendo mucho figma, es fácil de utilizar y puedes llevar tu diseño muy fácil, me ayudó a diseñar y construir mi portafolio😃

https://platzi.com/clases/figma/
Por cierto mi portafolio todavía no esta terminado pero me gustaría recibir algo de feedback 😄
https://brandonargel.github.io/

Va mi identificación de elementos.

Verrrdaderamente, así me sentí:

Hace un tiempo hice este proyecto con lo que aprendí de Estefany en Platzi Master 😄.

Me gustó la idea 1 e hice algo muy similar 😄

Este será mi proyecto para practicar grid 😃, es una mini biografía de unos de mis mangas favoritos

Resumen:

Inspiracion:

• Pinterest
• Dribabble
• Asymetrical Grid design

Hacer una lista de todo lo que se necesita

• Tematica
  • Lluvia de ideas
• Figuras principales
  • Lluvia de ideas: Circulos, cuadros, overlap
• Imagenes
  • De uso libre
    • Pixabay
    • Pexels
    • Freepick
• Tipografia
  • Google Fonts
• Paleta de colores
  • ColorHunt
  • Picker

Hacer un bosquejo y plasmar las ideas

Encontré éste sitio, es muy interesante: https://gridcritters.com/

Espero lograr el siguiente objetivo:

Punto de partida

puedes construir sus paletas de colores utilizando https://coolors.co

No es mucho pero pues al menos es mío

TABLET:

CEL:

Como cuando uno no tiene ni idea de lo que quiere… y dispara con una metralleta a ver a qué le da… vamo a ver qué sale de todo esto 🤘

Este es mi Borrador …

Por ahora. 😄

Hace tiempo hice una lista con muchos sitios para elegir una paleta de colores, espero que les sea de utilidad:

• Coolors.

• Color tool

• Picular

• Color Hunt

• MyColorSpace

Les dejo éste sitio para que, no vayan a pesar tanto sus imágenes ( https://tinypng.com/ ).

Mi moodboard

Comparto el moodboard:

Y el bosquejo que realicé a partir de los elementos:

Hola❤ este fue mi proceso creativo y la idea final

Moodboard:

Elementos:

Idea final:

iniciando mi blog

¡Empecemos!

Hola a todos, la verdad me inspiré en muchas revistas de fotografía de animales y en layout grids bastante interesantes.

Conceptos

layout inspiration

Grid inicial

Aqui mis elementos: Ya con ansías

aprovechando que es octubre voy a poner esta obra maestra de los point & clicks como referencia a ver como termina todo

![](

Comparto la selección que hice para mi proyecto:

Mi diseño

Aquí mi diseño

Les dejo mi proyecto para grid, me inspire en la correinte Bauhaus

Creo que lo que mas me gusta de platzi es la cantidad de gente creativa que hay! Me inspiran.

Aquí mi moodboard:

Mi borrador (no soy bueno con el dibujo… 😛)

Les recomiendo a los que no han hecho el curso de figma, creo que es el momento

Otra página que les recomiendo para experimentar con paletas de colores es dopely colors
.

En mi caso estoy terminando de generar mi portfolio y quiero actializar los estilos con grid 💪🏽

Les comparto mi lista:

Y mi UI inicial: https://www.figma.com/file/GWWmr8DP1c3mdeXgQ5XaYy/Untitled?node-id=0%3A1

Saludos a todos [email protected] crack!
Acá mi lista de elementos:

Hola PlatziNautas,

Les comparto mi lista :

Saludos!

Tengo mi idea con lo siguiente, espero salga como la tengo en mente, ademas lo hago con mi videojuego favorito!

https://javisperez.github.io/tailwindcolorshades/?eunry=D7AFA3&hemp=967A72 paleta de colores tailwind
https://uigradients.com/#KyeMeh colores gradientes
https://pixabay.com/es/ imagenes gratuitas

Recomiendo como “extra”, el curso de Introducción al diseño.

Anexo una idea para un futuro proyecto:

Pretendo realizar una composición en la que juego con diferentes tamaños y orientaciones de letras:

Quiero utilizar algunos bordes de ciertas cuadrículas que hacen parte de otras cuadrículas. Así mismo, girar la composición en la pantalla. Tener un alto contraste entre tipografía y fondo en un color vivo. Posiblemente aprezcan 1 o 2 imágenes / vectores de deportistas (corriendo, o previo a correr o un escalando).

El mensaje central será: “NUNCA PARES DE APRENDER”. Como textos secundarios ubicados en vértices estratégicos, aparecerán conceptos tales como: reinventarse, explorar nuevas posibilidades, cambiar de carrera, transformación digital, descubrir habilidades, desarrollar nuevas competencias, aprender haciendo, generar nuevas conexiones. | Disciplina, autogestión, constancia, concentración, empoderamiento. | Platzi

Como referente opté por algunas piezas visuales desarrolladas por Paula Scher.

Hola a todos esta es mi tematica para el proyecto:

Mi guía de estilos

Para sacar una paleta de colores a partir de una imagen les recomiendo https://color.adobe.com/es/create/image es bastante intuitiva y sencilla de usar

Hola,

Este es mi aporte. Realice el tablero con HTML Y CSS dejo el código por si a alguien le sirve.

HTML

   <main>
        <section class="container">
            <div class="item item-1">
                <article class="container__item-card">
                    <h2>Temática</h2>
                    <p>Portafolio web</p>
                </article>
            </div>
            <div class="item item-2">
                <article class="container__item-card">
                    <h2>Figuras princiaples </h2>
                    <figure>
                        <img src="/assets/figures.png"  alt="fonts">
                    </figure>
                </article>
            </div>
            <div class="item item-3">
                <article class="container__item-card">
                    <h2>Imágenes</h2>
                    <p>I'm thinking about it.</p>
                </article>
                
            </div>
            <div class="item item-4">
                <article class="container__item-card">
                    <h2>Tipografia</h2>
                    <figure>
                        <img src="/assets/fonts.png" alt="fonts">
                    </figure>
                </article>
            </div>
            <div class="item item-5">
                <article class="container__item-card">
                    <h2>Tipografia</h2>
                    <div class="container__item-card-imgs">
                        <figure>
                            <img src="/assets/paletadecolores.png" alt="paleta de colores">
                        </figure>
                        <figure class="cover-album">
                            <img src="/assets/cover-album.png" alt="Night cover image dragons">
                        </figure>
                    </div>
                </article>
            </div>
        </section>
    </main>

CSS

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-family: 'Nunito', sans-serif;
    font-size: 62.5%;
}
.container{
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: 
        "item1 item2 item3"
        "item4 item5 item5";
    background-color: #3c3a42;
}
.item{
    padding: 20px;
}
.container__item-card {
    height: 100%;
    background-color: aliceblue;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 14px;
    margin: 0;
}
.container__item-card h2{
    height: 20%;
    font-size: 2.4rem;
}
.container__item-card figure{
    margin: 20px;
}
.container__item-card p {
    font-weight: 900;
    color: #382b43;
    font-size: 3rem;
}
.container__item-card img{
    width: 200px;
    object-fit: contain;
    border-radius: 10px;
}
.container__item-card-imgs{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.item-5{ 
    grid-area: item5;
}

planificación

Hola a todos!!! 😃
les comparto mi lista…

Comparto pagina CSS Gradient para Paleta de colores:

Paleta de Colores CSS Generate

Tematica:Dog´s breed
Figuras principales: circulos, rectangulos, cuadros
Imagenes:puppy dogs
Tipografía:yakone 700 ,poppins 400,500
Paleta de colores:
.dark-primary-color { background: #7B1FA2; }
.default-primary-color { background: #9C27B0; }
.light-primary-color { background: #E1BEE7; }
.text-primary-color { color: #FFFFFF; }
.accent-color { background: #448AFF; }
.primary-text-color { color: #212121; }
.secondary-text-color { color: #757575; }
.divider-color { border-color: #BDBDBD; }

Si quieren generar paletas de colores apartir de images les recomiendo esta pagina:

https://www.canva.com/colors/color-palette-generator/

yo recomiendo pueden encontrar miles de combinaciones para poder inspirarse

Entro en desesperacion por que no se que hacer
debo ser original o que kmrglmñrqemñlrh mñlrEHHRW

Proceso de imi proyecto
Lo hice en notion.

Aquí mi idea:

Identificación de elementos terminada:

Comparto mi proceso.

Recursos para grid design

![](

Aquí va el mío

Plantilla!!

Mi Moodboard

Este es el moodboard que hice

Y mi diseño

Soy medio malo diseñando pero bueno, ya mejoraré 😃

Primer prototipo de lo que haré para este curso
Ya definí mi temática, mis imágenes, la tipografía y mi paleta de colores.
Iré mejorando el diseño, posiblemente hayan cambios hasta el resultado final
Espero este bien 😃

Estos serán mis elementos, espero que todo convine bien 😅

¡Listo! 😁🎹🎶

Aun no estoy seguro de la temática y de las imágenes :v

Dejo mi lista de elementos por aqui ✍🏽

Identificación de elementos:

Idea:

TEMATICA
-_PORTADA
IMAGES
-_mr. robot _
FIGURAS GEOMETRICAS
__-ovalado -pentagono -rectangulo
TIPOGRAFIA
__-Train One
PALETA DE COLORES

Hola! aquí les dejo el enlace de la pagina web Pinetools en la que puedes insertar una imagen y esta te devuelve una paleta según los colores de la misma.

https://pinetools.com/es/obtener-colores-imagen

😄

Aquí esta mi lista de elementos

Recomiendo muchisimo para escoger nuestra paleta de colores esta pagina llamada “trending color palettes”, nos presentan ideas varias de los colores mas usados.
https://coolors.co/palettes/trending

No les voy a mentir, creo que terminaré haciendo todas las ideas que propone.
¡TODAS ESTÁN INCREÍBLES!

Queria hacer algo pequenio y ahora ya estoy pensando en redecorar mi pagina personal

Después de encontrar un diseño que me gusto en Pinterest, seleccionar algunas figuras, paleta de colores y tipografía, junte todo con Figma. Les recomiendo mucho usarlo, facilita demasiado la implementación del diseño 😃

Tipografía:
Josefin Sans
https://fonts.google.com/specimen/Josefin+Sans?query=josefin

Paleta de colores utilizando una imagen en:
https://www.canva.com/colors/color-palette-generator/

Imágenes:
https://unsplash.com/
https://www.pexels.com/

Adobe Color también te permite hacer un gradient, puedes subir una foto y sacar la paleta de colores de la imagen y sacar un gradiente de esa imagen que subiste, es muy completa la herramienta la recomiendo.

una página que muestra que colores están presentes en una imagen, espero les sirva
https://pinetools.com/es/obtener-colores-imagen

Este aporte se responde con herramientas para paletas de colores 👀

Les recomiendo mucho figma esta idea que diseñe con figma !! 😄

Aqui esta mi bosquejo :3

–
Me inspire en este design que encontre en dribble:

Si ya saben un poco de Figma (o incluso si no, la verdad es que es bastante facil e intuitivo de usar) pueden usar su whiteboard para realizar su bosquejo.
La herramienta es relativamente nueva y aun esta en beta pero es bastante buena para que vayan plasmando sus ideas, les dejo un poco su info aca: FigJam

Bueno después de darle muchas vueltas, este va a ser la base de mi proyecto.

Soy muy malo en diseño. Pero este es mí proyecto

Aqui esta mi MoodBoard 😃

Hay dos cursos muy buenos en platzi que nos puede ayudar a la creatividad y a diseñar, son:

• Curso de Diseño Para Programadores.
• Curso de Técnicas Para Desarrollar Tu Creatividad.

Existen dos herramientas que nos pueden ayudar mucho para la búsqueda de imágenes para tomar inspiración de estas, que son:

• Pinterest
• Dribbble

Es importante tener organizado nuestro Mood board, pero es como tener un grupo de imágenes que nos gusten para nuestro proyecto para que sirva como inspiración.

Necesitamos una lista de elementos que necesitaremos para poder crear esta pagina web, que son:

• Temática: Comida, música, deportes.
• Figuras Principales: Cuadros, Circulos, Triangulos
• Imágenes: Busca de uso libre.
• Tipografía: Google Fonts es recomendado
• Paleta De Colores: Es de lo mas difícil, busca paginas que te ayude a encontrar paleta de colores.

La pagina web de Jen Simmons (https://labs.jensimmons.com/) hay muchas ideas con el sistema de grid

Esta en particular me encanta:
![](

Buena clase. Necesitamos atrevernos a salir de la zona de confort, arriesgarnos a crear. Dejar que nuestras ideas fluyan, seguro sale algo bueno.

Lo prepare en photoshop, todavia no se usar Figma.

Recomiendo usar para la paleta de colores esta página, la usaba en dibujo, pero si suben una imagen y extraen tema les da la paleta de colores.
https://color.adobe.com/es/create/image