UI (not sure how to improve my text)

Feedback & Problem Solving
,
#1

Hi everyone!
question for UI designers, anyone else is welcome to comment as well :slight_smile:

I’m working on designing this screen however, I’m still struggling with the alignment of the text.
Despite trying multiple times, I am still not satisfied with the design.
I posted a screenshot, can u please tell me if its readable and how to improve the look of the design to look professional (any tip or sources will be highly appreciated)

Thanks!!!

sdsdsdsdsds
sdsdsdsdsds374×781 44.7 KB

#2

Hello there Louie,

your problems stem from lack of basic typographic guidelines. There are a lot of things awry, like the choice of font for body copy and the line height.

The font choice you did is good for headers, but the class of the font will be hard to use in body copy. You can read up on font classifications before you decide on which font to choose. In short, you are using a geometric sans serif that needs more detail put into placement. Use a standard Google font you see in most apps to make it work, you can use Google fonts to find good partners for your headline font.
Those classifications work well : Type Classifications | Fonts.com

1 Like
#3

It’s good you have been able to look at the design with a critical eye and acknowledge that alignment needs work. I agree with everything Marco says. Starting from the top, the back button should always be in the top left (like right at the very top) – however, if this is an Android App it may not be necessary as Androids have a built in back button (research that, because it’s been a few years since I’ve worked on a native app).

This page also needs navigation, whether a tab bar at the bottom, or a hamburger menu.

The top heading should be the largest heading. Your text area does not look like it is aligned to the centre of the page. And what is the purpose of the images at the bottom of the page? Are they links to other sections? Some accompanying text would help here.

1 Like
#4

Hi Louie, try to utilize the Guide feature of your tool. This will help you check the alignments and the overall layout. As for the font, always set your scale to 100, it would would help

1 Like
#5

As for the text, in your opinion, it would look much better if the text was aligned in the center of the screen.

1 Like
#6

Hi,
Here are some things that might help, sorry if I am repeating some of the points.

  1. First heading should be the largest.
  2. Keep the line-height of the body text at 1.5x of the font size you choose.
  3. Font size should be at least 16px.
  4. Keep padding on both sides generally similar, but don’t use justified or center-aligned text.
  5. Utilize the Graphic used above and move the main heading there.
  6. Align the thumbnails at the bottom according to the padding of the text above.
  7. Round the thumbnails to about 4px and use a slight drop shadow.

I would reword the content to be mainly bullet points with explanations beneath them for easier reading.

Hope this helps.

2 Likes
#7

Hey Imran,
Thank you for the input, you’re more than welcome to look at the improvement I did, even small suggestion would be highly appreciated
click on the link below:

Thanks! :slight_smile: