<?xml version="1.0" encoding="utf-8"?>
Open full project

Book App practice UI: A hands-on project to develop a visually appealing and intuitive UI for a book-reading application, incorporating key design principles and best practices.

Tools used

Figma
FigJam
Adobe Photoshop

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

2 reviews


The highlights:

  • I like the visuals and the placement of them - seeing the book covers really gives the feel of browsing in a library
  • The layout feels clean and thats because of the good use of white space and the subtle colour scheme
  • The call-to-action buttons on the page are clear and the icons are easy to interpret and add to the feel of this being a mobile app
  • I like seeing the profile of the person using the app, it adds personalisation to the app which in the long term makes users feel like its "their" app and adds to continuing engagement
  • It looks like an app I would love to use and the reviews on each book also shows which ones are good recommendations which is key to influence a person's decision on which one to buy next!

The little tweaks:

  • Although the soft yellow colour gives the app a nice feel, the white text on yellow buttons will not pass the contrast check for accessibility
  • There are some inconsistencies with spacing - for example the 'Edit profile' button text isn't quite aligned to the center
  • The heading spacing also needs some love, for example the "My library" heading above the book gallery is spaced a bit too tightly.
  • I see some inconsistency in the typefaces as well, the "Sign in" button and "Continue" button typeface is different to the others in the app
  • I also see opportunities to remove 'Lorem ipsum' and put some nice text in there to really sell the idea of the app and bring it to life
  • Although the app says its books for students, I see the books are pretty standard stories and I'm not entirely sure why these are just for students - perhaps you can change the books to choose something more targeted to students?

Overall:

Lovely clean and modern design that you could take to the next level with the few tweaks mentioned before. It looks like it would be a joy to use and appealing to the eyes.

Thank you for your valuable feedback! I'm grateful for your time and insights. I'll carefully address your suggestions, including improving accessibility with button colors, ensuring consistent spacing and typography, and replacing placeholder text with more engaging content. I'll also expand the book selection to offer more targeted options for students while maintaining a diverse range of genres. Your feedback has been invaluable in helping me refine the app and make it even more user-friendly. I'm excited to implement these changes and create a superior product in my next works.
Super to hear! Great that you're taking the feedback so gracefully.

I love all the effort you have put into creating these designs so well done! How did you choose your colour palette and did you test them with a contrast checker?

While looking at your designs i noticed a few things you could tweak. There are some alignment issues with text and other parts of your design. If you haven't you can use a grid to aid you with this. Do not be afraid to give your design space to breathe. You can boost the white space a little between some of you items for instance in the recommended section. Also be careful with your buttons as some of the text and icons are not aligned!

I look forward to seeing your designs progress!

Thank you so much for your thoughtful feedback! I'm glad you appreciate the effort put into these designs. You're absolutely right about the alignment issues. I'll definitely revisit the design and use a grid to improve the overall layout. I'll also pay closer attention to the spacing between elements and ensure that buttons and icons are properly aligned. Thank you again for your valuable insights. I'll take your suggestions into account and continue to refine these designs.

8 Claps
Average 4.0 by 2 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>