UI Design
The Mentorship iOS app has been inspired from the Mentorship Android app. The Mentorship iOS app is designed in-line with the android app while expanding on its features and using native UI elements for the optimal user experience.
The Mentorship iOS app follows Apple's Human Interface Guidelines for iOS. This ensures in giving the users a consistent experience and work seamlessly with the operating system making full use of its power.
In addition, the Mentorship iOS app supports powerful system features such as Dark Mode, Localization, and Accessibility.
The Mentorship iOS Design Considerations document can be referred to get a deeper insight into the initial design decisions taken during GSoC20.
The Mentorship iOS Design Guide features early discussions made for points ranging from fonts and margins, and mocks of various different prototypes.
In the Mentorship iOS project, all the design properties including constants for padding, spacing, width, height, opacity, corner radius, colors, etc have been stored in the DesignConstants.swift file under the Constants group.
This has been done for better isolation, a much neater codebase, and incredible modularity. This has significantly helped in keeping a consistent UI design and has also led to much easier debugging and development throughout the project.
The Constants group also features other Swift files for different types of constants. One of them is ImageNameConstants.swift, which stores the image name values for all the images used in the app along with SF Symbols.
-
Big Bold Button - This is a custom button style that features a rounded button with the standard app colour background and the primary (semantic iOS colour) colour for their text.
-
Round Filled Text Field - This is a custom text field style that features a larger size than default for greater usability. This style also features a secondary (semantic iOS colour) background and automatically adapts for light and dark background.
Built in SwiftUI, the Mentorship iOS app features system-synced app-wide dark mode. The mocks for the light and dark mode of Home screen and Profile screen are given below-
