Mainly use material design to construct the portal. There are some basic requirements for the portal:
- Have sections for labs, projects
- Include the link to the project journal
- Should use responsible web design to vary in different devices
- The portal theme is material design. Material Design Doc
- The portal has a navigation bar to help user lead to different types of assignments. And in the content part, there some cards which link to the project page or lab page.
- In different devices, it varies based on the window width.
- First user will be in the overview page, which includes all the projects, labs, project journal. In the navigation bar, there are overview tab, projects tab and labs tab. User can click different tabs to see different pages.
- I came to draw a stretch for the portal.
- I used the material design from the docs to design the portal.
- Tested the portal to make sure it works well.
- Just links to all my projects and labs.
- Want to create the portal more beautiful. And think about a design for it.
- Try to figure out how to make the portal beautiful and easy to use.
The foot part can’t show as I expect. The foot part is too wide for me but I can’t change the size or position. It will show differently in different window size.
- Mostly, I used the material design docs to help me design the whole portal.
- Also, I used trianglify and chroma.js to generate low-poly images in the portal.
I learned how to write a responsible website and how to use material design in my portal. Next time, I want to learn how to make the interactions more smoothly and change the layout.
The link to the portal, Link