Project: We’re going to make your Student Info App Dashboard project look like a real iOS app.
Take your existing dashboard. Clean it up, if you’d like.
Split it into three tabs. However you’d like.
Make at least one element push into a sub view using a navigation controller.
Make at least one element push into a sub view using a modal controller.
Make your interface look like a real iOS app. Pick either dark or light mode — don’t worry about accounting for both.
Please feel free to build from the components in the “iOS 14 GUI” link from last class — rebuilding everything from scratch will be time-consuming.
Be aware of minimum sizes for readable text and tap areas. See the HIG for specifics.
My recommendation, again: Stick to the defaults unless you have a specific reason to deviate. And “it just looks better” can be a perfectly valid reason!
The first thing I did was download the iOS 14 GUI, this made the process of converting the Student Info App Dashboard to look like a real IOS app a lot easier. I copy/pasted almost every element with the exception of a few icons. I created two main screens, Home/School because I felt that all of the elements could be divided into one of those categories. The third screen is modally pushed into view when you click the "Assignments" button in the "School" screen. The assignments are part of the classes but I didn't want them to be on the same screen. The "Home" screen slides into the other view when you click the "School" icon at the bar. Overall I do think this resembles an IOS app, I was inspired by the iOS widget layouts for the "Home" screen and I think it makes the layout look more interesting. Similar to IOS I used white/gray to distinguish foreground from background and highlight some elements, my original prototype was lacking this distinction so I hope this is better.
Figma Prototype: https://www.figma.com/proto/NjFiAdxiPZ46mqlp2xDZcu/student-info?node-id=82%3A104&scaling=scale-down