DEV Community

Tempest Io
Tempest Io

Posted on

Dev Diary #5 - Complete Home Screen

So where have I been yes? I have definitely taken some time off because of a surgery and also! it was my birthday yay!

A good distraction from completing the home screen since ya know I was/am kinda strugglin with it. But hey that's alright we made some itty bitty progress each day in order to get it to a place that I was semi-satisfied with!

Where were we....

Ah yes! I finished the main page but then realized I have a bunch of buttons to add in, in order for the player to teleport to all their needed locations, etc.

So I started here by importing all of the icons onto my figma page and silently whining.

Image description

Curses! Why did I make so many locations ahahaha! oh well. So after some self pity, I sat down with some coffee and arranged these in a nice little order around the main button at the bottom.

Image description

I also arranged them going up to see how they would look too.

Image description

I ended up going with the design of them going around the button since I thought it looked neater. I also think it would be a pain the ass for the player to have to stretch their thumb waayyyy up in order to hit those buttons. I mean it's inevitable with some buttons but at least for the locations I can make it easier for the user to hop between them.

After deciding the placement, I took the bubbles and duplicated them around and placed the icons in changing the colors so that they look more like they fit in with the main button. I also added some subtext underneath so that we know where we are going when we press the button.

Image description

After that, I made two iterations because it just looked a little off, one where the buttons were slightly lower and one where they were where I originally placed them. ended up going with the adjusted position.

Image description

I noticed that it was hard to read some of the text on the buttons and they just werent standing out the way I wanted, so I added a big ol circle in the back to see if that helped make them stand out and made it a darker shade of grey. Usually adding a dark object in the back will help pop something that is getting lost and separate it from the background.

Image description

Once in the right position, I changed it to a gradient and faded it from top down, its basically just 2 shades of grey one dark at the top one lighter at the bottom, and then I have an effect on from figma that blurs the crap out of it. I changed the name of the main button from 'Hatch' to 'Nursery' since I think that fits it better. And then during this whole process I added the other buttons like settings, achievements, mail, etc.

Image description

I darkened them up in the final picture and I think now the home screen is looking pretty good! Off to the races! I may do a jam on character dialogue before jumping into development but we'll see. I can always hop back and forth anyway. Man the home screen was a slog, but hey it goes to show if you take it bit by bit you can make something nice! Just gotta make sure to keep moving forward!

Anyway thanks for the read! More to come!

Tempest out!

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay