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

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í:

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

Punto de partida

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:

No es mucho pero pues al menos es mío

TABLET:

CEL:

Hola❤ este fue mi proceso creativo y la idea final

Moodboard:

Elementos:

Idea final:

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

Mi moodboard

Este es mi Borrador …

Por ahora. 😄

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 🤘

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

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

Comparto el moodboard:

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

iniciando mi blog

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

Bueno, admito que el diseño no es lo mio, pero ahi vamos xdd
aqui esta mi MoodBoard:

y aqui ya esta el resutado final ig?

espero les guste ^^

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

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

Aquí mi moodboard:

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

Mi diseño

¡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

Este es mi MoodBoard:

.

Y este es mi diseño:

Voy con ganas ❤️

Trabajo mi humilde trabajo
Ahi vamos aprendiendo bastante de CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}
body {
    font-family: 'EB Garamond', serif;
    background-color: #e5dedf;
}
.container {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(8, 1fr);
    text-align: center;
    padding: 10px;
}
.menu {
    grid-column: 5 / 13;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.menu a {
    font-weight: 500;
    font-size: 1.5rem;
    text-decoration: none;
    color: #fffcfc;
}
.services {
    font-size: 2.5rem;
    color: #fffcfc;
}
.cure {
    grid-column: 2 / 3;
    grid-row: 1;
    align-self: center;
}
.ourservices {
    grid-column: 7 / 11;
    grid-row: 2;
}
.working {
    grid-column: 12 / 14;
    grid-row: 3;
    font-size: 1.5rem;
    align-self: center;
    color: #a1a08e;
}
.book {
    grid-column: 15 / 17;
    font-size: 1.5rem;
    align-self: center;
}
.picture img {    
    height: 100%;
    width: 100%;
    object-fit: cover;
    border: 2px solid black;
    box-shadow: 0 4px 8px 0 #00243a, 0 6px 20px 0 #00243a;
}
.item1 {
    grid-column: 3 / 7;
    grid-row: 4 / 9;
}
.item2 {
    grid-column: 6 / 12;
    grid-row: 3 / 8;
}
.item2 img {
    opacity: .8;
}
.item3 {
    grid-column: 11 / 14;
    grid-row: 4 / 6;
}
.item4 {
    width: 150%;
    height: 150%;
    background-color: #929a75;
    border-radius: 100%;
    position: relative;
    left: 25vw;
    top: 15vh;
    z-index: -1;
    box-shadow: 0 4px 8px 0 #00243a, 0 6px 20px 0 #00243a;
}
.item4::after {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #485131;
    position: absolute;
    border-radius: 100%;
    left: 45%;
    top: 10%;
}
.item4::before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #485131;
    position: absolute;
    border-radius: 100%;
    left: 40%;
    top: 40%;
}
.item5 {
    width: 200%;
    height: 200%;
    background-color: #929a75;
    border-radius: 100%;
    position: relative;
    left: 55vw;
    top: 38vh;
    z-index: -1;
    box-shadow: 0 4px 8px 0 #00243a, 0 6px 20px 0 #00243a;
}
.item5::after {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #485131;
    position: absolute;
    border-radius: 100%;
    left: 60%;
    top: 80%;
}
.item5::before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #485131;
    position: absolute;
    border-radius: 100%;
    left: 70%;
    top: 60%;
}

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

planificación

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.

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:

Aquí mi diseño

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

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 l@s crack!
Acá mi lista de elementos:

Hola PlatziNautas,

Les comparto mi lista :

Saludos!

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.

Mi selección final:

_

algo asi quiero ver si lo puedo hacer

Escogencia: 💟

Les muestro mi humilde aporte en esta fase de creatividad, mi idea es crear un página con los personas de Super Mario y que en ella se muestre las descripciones de cada uno de ellos.

Aquí también les dejo algo de inspiración de lo que quiero lograr:

Quizás remodele mi portafolio web 😄

idea para el proyecto
![](

mi idea

Mi propuesta

Es un comienzo, en el camino se irá mejorando:

En mi caso haré maquetaré la web para mi negocio de fotografía.
Espero que mi brief no sea tan malo xD
Soy nuevo en esto y tengo miedo de hacer cosas malas… pero bue fallando se aprende y se mejora 😄
saludos a todos!

Fase de creatividad

Moodboard

Abstract

Main idea

Aquí está mi identificación de elementos:

Aquí dejo mi moodboard y como imagino el proyecto, hecho en figma 😃

Aqui dejo mi identificación de elementos y estilos de mi proyecto:

Mi lista de elementos:

.

Estoy desarrollando mi portafolio y me inspiré en algunos diseños de acá junto con algunas ideas que ya tenía plasmadas.
Antes

Despues

también pueden visitar mi portafolio ver las animaciones que les he puesto y darme su feedback, un abrazo ❤️.

esta es mi moodboard

Anexo una idea para un futuro proyecto:

Hola a todos esta es mi tematica para el proyecto:

Mi guía de estilos

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;
}

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