Enlace de las imágenes usadas aquí
Introducción a Materialize
Frameworks ¿Qué son?
¿Qué es Material Design y Materialize?
La lógica detrás del Grid system
Documentación y características de Materialize
Componentes de Materialize
Desarrollo del sitio
Presentación del proyecto
Instalación del proyecto
Elaboración del header
Estilos al header
Construcción del main homepage
Finalizando cards en el homepage
Terminando el index.html y estilos en el mainpage
Desarrollo de la página de artículo
Desarrollo del formulario de registro
Desarrollo de checkboxes en el formulario
Despliege del proyecto
Despliegue del proyecto en Firebase
Conclusiones
You don't have access to this class
Keep learning! Join and start boosting your career
Planning the structure of a web project is fundamental to obtain a coherent and functional design. This initial step involves examining the base designs, in this case, wireframes, which provide a visual guide for development. Wireframes allow you to outline each element page by page, thus establishing the basic organization of the website.
A wireframe is a simple, schematic representation of the look and structure of a web page. Its main purpose is to show how the elements will be laid out in the user interface before detailed programming begins. For example, in the project described, wireframes indicate the presence of a "mend contener", a main container around which the twelve columns typical of web design will be organized.
To begin with, each section of the site must be clear and organized. Here are the fundamental parts of the project:
Header (Gideon): Includes the logo and a navigation menu (Naz) with three links and a button styled with specific classes (possibly from CSS frameworks such as Bootstrap).
Main (Mail): The main part is divided into two sections:
Footer (Full): Used at the bottom of each page to finish off the design and provide additional quick links.
The development of this project contemplates the elaboration of multiple fundamental screens for user interaction and experience.
In this screen, by clicking on a specific button, the user is directed to a registration form. As in other parts, a constant header with logo and navigation links is used. The main will contain a card similar to those of the Blog Push, but focused on collecting data for registration.
For individual articles or blogs, the detail screen is displayed. The header follows the general line of the project, but the main is adjusted to show:
Title and main image: They form the first section that captures visual attention.
Blog content: Includes the article itself, possibly combined with elements such as curative facts or recommendations of other related articles.
Each screen described above, headed by the Gideon (header) and closed by the Full (footer), allows the user to navigate consistently and simply throughout the site.
With the wireframes structured, the next step will be to set up the project's file and folder base, thus initiating programmatic development. This crucial step involves translating the visual ideas into code, using CSS tools for styling and HTML for structure, adjusting each element according to the initial design specifications.
Careful and detailed planning of wireframes helps ensure that the end result accurately reflects the purpose and style of the web project. As a student or developer, this methodical approach ensures a seamless experience from conceptualization to implementation.
Contributions 25
Questions 0
Enlace de las imágenes usadas aquí
Este ejercicio de “Repasar el diseño” sobre el papel es muy importante, sobre todo si estas usando BEM pues te ayudará a identificar los Bloques, los elementos y los modificadores.
Ya estoy ansioso por empezar
importantísimo tener la estructura base antes de desarrollar!!
Soy el único al que le genero escalofríos el sonido del marcador sobre el papel 😮 haha Genial clase interesante como se realiza la planificación de una pagina desde el papel 💪
Que buen ejercicio el de ver en papel la maquetacion del proyecto. Grande De Granda.
Si les gustaría diseñar su propio Wireframe pueden usar Uisard. Les dejo el link: https://uizard.io/
Este tipo de proyectos se ha de implementar en algunos otros cursos, son de una valiosa ayuda.
Excelente curso
Es muy bonito cuando repasas el diseño en papel, tienes una mejor idea de como puede funcionar tu diseño.
Ayuda muchísimo esta presentación del proyecto 👏
& - screen 2 Form join know
Main container es donde estan los componente y esta mas hacia el centro
Excelente… Es hora de repasar esto!
Muy bien explicado!
Genial :0
Una excelente clase! 😎
💚🌻El curso va muy bien… la presentación del wireframe excelente para conocer lo que vamos a hacer ❤️
A iniciar el proyecto 😃
Excelente, desglose del wireframe. A por ello
Me encanta como divide tan rápido en componentes
Excelente explicación del proyecto, se entiende muy bien de esta forma.
Me gusta cuando tenemos claro que es lo que vamos a construir :3
Want to see more contributions, questions and answers from the community?