Day 18/21 - Focused Reading App with Distraction-Free Mode by K N Abhishika
Designed the reading app with below emphasis:
- Home Screen Design
Efficient grouping of articles allows users to grasp essential information without feeling overwhelmed, maintaining a clean, minimal design for enhanced usability.
- Import Floating Action Button (FAB)
A prominently placed FAB enables seamless article, PDF, or document import with a single tap, streamlining the user experience for quick access to new content.
- Intuitive Navigation Bar
Easy access to bookmarks and saved articles enhances user convenience, while a search icon at the top supports quick, voice-enabled searches for effortless content discovery.
- Informative Thumbnails
Thumbnails convey the article type (e.g., article, PDF, document) for quick identification, enhancing clarity and helping users navigate their reading materials.
- Comprehensive Article Details
Each article tile includes key details such as the title, author, estimated reading time, completion percentage, and last opened date, all presented in a user-friendly format for easy reference.
- Focus Mode Toggle
The reading screen features a toggle for Focus Mode, allowing users to eliminate distractions. Icons for settings open a modal for easy customization of the reading experience in just a few clicks.
- Progress Tracking
A progress bar at the bottom displays the user’s reading progress, and when Focus Mode is activated, it hides the navigation, further enhancing concentration on reading.
prototype here:
https://www.figma.com/proto/XS4NA9yqvAh5N0vfuozdLV/PeerList-Design-Challenges?page-id=0%3A1&node-id=272-189&node-type=frame&viewport=1523%2C-19297%2C0.53&t=5qFksNq3UBlOlmIj-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=272%3A189&show-proto-sidebar=1
Your upvotes and feedback are welcome!
Words have more power than we think. Be kind.