This is my attempt to replicate the design that was delivered to us by the Microverse team.
design guidelines
They provided us with a link to a Behance project where we could obtain a picture of the design they wanted us to build.
I picked up that picture and chopped it into individual layouts that then I send to Figma, where I could use every image as background and guide, and over them replicate as accurately as I could the whole project.
Here you can visit the Design System that I created in Figma :
Notice that I recreated the site with its elements and components in Figma so I could have a real idea of the different components and how they interact with each other.
In real life the developer would be provided with a Figma file like this, that includes all the information needed to develop a real site similar to the demanded.
I didn't have access to the font Cocogoose, so I searched for the one more similar to it, and that was Sans Serif.
Everything is explained in the video that I recordedd showcasing the project itself, so please check it out by yourself. ( You can see how in Figma there is real elements over the original image)
Project requirements
You should personalize the content of your page. Choose a topic first and then design your webpage, keeping your topic in mind while you design it so that your page design works well for the topic you choose.
You should build only these 2 pages:
The home page.
The about page.
Each of these pages should have versions for 2 different screen sizes:
The home page should have a link in the menu to the about page.
The logo in the header links to the home page.
Mobile menu
When the user clicks (or taps) the hamburger button on the header, the mobile menu appears over the page.
There are no guidelines for the mobile menu in the docs, but you should implement it so it is consistent with the design (colors, typography, spacings, etc.).
The mobile menu should have a close (X) button that closes the menu.
Dynamic page
The section "Featured speakers" should be created dynamically in JavaScript.
You should use a JavaScript variable with the data about the speakers and use it when the page loads to create the HTML for this section dynamically.
This is my attempt to replicate the design that was delivered to us by the Microverse team. design guidelines They provided us with a link to a Behance project where we could obtain a picture of the design they wanted us to build. I picked up that picture and chopped it into individual layouts that then I send to Figma, where I could use every image as background and guide, and over them replicate as accurately as I could the whole project. Here you can visit the Design System that I created in Figma :
[
https://www.figma.com/file/uxDIr6zq8lVsdJH08j6b0w/capstone-1] (https://www.figma.com/file/uxDIr6zq8lVsdJH08j6b0w/capstone-1)Notice that I recreated the site with its elements and components in Figma so I could have a real idea of the different components and how they interact with each other. In real life the developer would be provided with a Figma file like this, that includes all the information needed to develop a real site similar to the demanded.
I didn't have access to the font Cocogoose, so I searched for the one more similar to it, and that was Sans Serif. Everything is explained in the video that I recordedd showcasing the project itself, so please check it out by yourself. ( You can see how in Figma there is real elements over the original image)
Project requirements