I decided to research some of the best projects for a bookstore app interface to get more help and inspiration for my high fidelity prototype. Below is an image of an app made by  Aravind Little JackBangalore. 

This interface offers a default mode in white and also a dark mode in total black. This is a setting I aim to offer in Bookmark maybe in the second semester if I don’t get it fully functional soon. As it’s a setting that’s built into most apps now so I think it’s definitely a “must have” feature to try and incorporate into my app.

This app uses a bottom tab bar with 4 different sections: 

bookshelf

bookstore

bag

community.

The main page has a burger menu in the top left, a search bar in the centre and a bell icon for notifications on the right. Then there is a section for user favourite books and a wishlist.

I’ll take some inspiration away from this UI design, however, I think there’s possibly too much going on to make it look too busy. I’ll also have five sections in my bottom tab bar so it’ll be a lot more crowded.

The second interface is made by Ryan Spencer, for an audiobooks library.

In this interface he simulates an app where you can scan your books on your bookshelf, then the app will recommend popular similar books that you can purchase and listen to.

The interface, made in white and green (or black and green with dark mode activated), is modern and made with round buttons and views. The colour scheme of the white and light green works very well together, but I think it’s even better when dark mode is activated. So I need to consider my colour scheme for this purpose if I want to really have the option for dark/light mode, as the colours I use will need to be well thought out and work together in both background colours.

On the main page, there is a search bar on the top, a popular books section with many book categories and a list of top authors. This is similar to what I hope to have on my own Search section, however, I never really thought about the user having the ability to scan a book into the app to get recommendations on that one book. So it’s definitely something I could look into more detail to further extend the features on my app.

The interface made by Agus “Kawur” Handoko uses orange and white as main colours. 

I found this book user interface design on Dribbble, Agus uses a bottom tab bar with 4 different sections: home, explore, cart and profile.  The explore section reminds me of the Instagram interface, where instead of stories there are the top authors.

I think this is a clever idea and something I could try to incorporate into my own search section, the option for top authors and top books to appear first before the user actually types in any information. I’ll need to try a dew wireframes and see if it works or if it’ll just make the search screen too complicated/ or busy.

Choices related to layout, spacing, colour, hierarchy, size, and typeface will make or break a design. Especially something meant to be used by others.

1. Pick a typeface that scales well

I need to ensure that I use a typeface which will be great even when scaled to smaller and larger devices.  As users will be accessing your website from multiple types of phones, screen sizes, and resolutions. So, It’s imperative to choose a typeface that works well across different sizes, weights, and environments in order to maintain easy readability and usability.

2. Limit yourself to just one typeface

A majority of people recommend only using 1 typeface throughout your work, but sometimes it’s good to use 2.

Anything more would make your interface look unprofessional and chaotic.

If I decide to use more than 1 typeface I need to ensure that the font-families compliment each other while also providing enough contrast from one another.

In order to do this I’ll need to pay attention to:

line-height

cap-height

character width

stroke-weight

character style

3. Have enough contrast

I need to put the focus on key areas in my app in order to help guide the user through their journey of achieving their goal. There are many typographic ways to enhance your contrast levels. The two most common are font-weight and font-size.

Contrast means to be strikingly different than something else.

This allows designers to emphasise important elements on a page and to minimise the insignificant ones.

So, for instance my headers could be in bold whilst all the information below it is in regular font so show a sharp contract and the hierarchy of the important information.

4. Give your words sufficient spacing

Allowing your type to breathe is essential in conveying meaning and soothing the reading experience. Utilising things like leading and kerning allow you to really command the space of your interface.

Leading

A good practice when setting the leading is to use 1.2x — 1.5x the current font-size. This ensures paragraphs aren’t too tight or too spaced out.

The importance of kerning

There is no set number on what this rule should be as it really varies from typeface to typeface. When using kerning I need to  always aim for equal spacing or for something that is optically symmetric.

5. Keep around 60 characters per line

This usually only applies to desktop as Medium are the prime example. As  they keep the text block to about 680 pixels wide on desktop. This equates to around 75 characters per line.

A good rule of thumb is to keep around 60 characters per line.

6. Utilize grids

Grids help establish order and consistency in your UI.  Grids give designers a way to better handle alignment and justification of text and other items.

7. Don’t rely on math. User your eyes

Because of all the various typefaces and fonts, it’s difficult for computers to get it right every time and for every use case. So it’s important to keep playing around until it feels aligned or looks visually balanced.

Resource: