You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
3 Hrs
24 Min
17 Seg
Curso de Materialize

Curso de Materialize

Diego De Granda

Diego De Granda

Presentación del proyecto

6/17
Resources

How to plan the structure of a web project?

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.

What is a wireframe?

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.

How is the basic structure 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:

    • A search engine (input) to facilitate user navigation.
    • Blog Push cards (Blog Push) that offer visual and interactive content. They include images, titles and buttons to direct to more details. Mouse interactions can display additional descriptions.
  • Footer (Full): Used at the bottom of each page to finish off the design and provide additional quick links.

How are the elementary screens of the project managed?

The development of this project contemplates the elaboration of multiple fundamental screens for user interaction and experience.

Registration screen

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.

Blog detail screen

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.

How do you go from design to development?

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

Sort by:

Want to see more contributions, questions and answers from the community?

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 💪

disculpen donde puedo sacar wireframe gratis ?

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

Muy buena introducción al proyecto, emocionado por comenzar!!

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