1. Portal
1.1 Design for Class Portal
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
1.2 Portal Milestone 1
- 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.
1.3 Portal Milestone 2
Document the process you went through creating your portal.
- 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.
Iterations of your visual design.
- 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.
Describe problems or roadblocks you encountered and how you resolved them (or not)
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.
Sources you used in creating your portal
- 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.
Lessons learned
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.
A link to your portal
The link to the portal, Link