-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #47 from A1ya1/patch-1
Create Improved Layout Design for Book Lists
- Loading branch information
Showing
1 changed file
with
19 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
#Improved Layout Design for Book Lists | ||
|
||
## Introduction | ||
This pull request showcases a comprehensive UI/UX redesign for the book lists layout in the MyLibrary 📚 web application. The MyLibrary app is a modern library management tool developed using React.js, featuring 🔐 Auth0 for authentication and utilizing 📖 Google Books API for book data. The user interface has been styled with 🎨 Tailwind CSS to provide an exceptional user experience. | ||
|
||
## Design Overview | ||
The primary goal of this redesign is to elevate both the user interface (UI) and user experience (UX) of the book lists within the MyLibrary project. We have focused on proposing an improved layout design that enhances accessibility, usability, and visual appeal. | ||
|
||
## Design Assets | ||
- **Desktop Size**: 1356px by [Height] | ||
- **Book Title**: Roboto, 22px for the title, 24px for lineheight, color #1f2937 | ||
- **Availability**: Segeo UI, 16px for content, 24px for hlineheight, no color change | ||
- **Published Date, Author, Genre**: Inter, 16px for content, 20px for lineheight, using brand color medium | ||
- **Author's Name, Genre Type, Published Date**: Inter Regular, 14px for content, 20px for lineheight | ||
- **Button Text**: Space Grotesk Bold, 18px | ||
- **Filtered and Sorted by**: Brand color, 18px for content, 20px for lineheight | ||
- **Filter By, Sort By**: Segeo UI, 20px for content, 24px for lineheight | ||
|
||
- **Link to Figma design**: [https://www.figma.com/file/2Ioo7XKcrMX4Qs8gVnFmlh/MyLibrary?type=design&node-id=4%3A892&mode=design&t=LWf4xbRAXAOMHrG3-1] |