I first heard about this new fast growing mobile game HQ trivia on twitter so naturally i checked it out, firstly i suck so bad at trivia so the chance of me winning is zero! however the design of the app is stunning so i thought i would try recreating it using Gravit designer.
Above is the official design for this tutorial we will be designing the profile area this is where you can view how many lives you have , view the game schedule & how much you have won.
5 4 3 2 1 ... LETS GO!!!!!!
Lets load up Gravit and create a custom template size 400 wide by 700px as for our background colour we will need #373D97
Awesome next up is adding in ruler guides for this as a slight guide however we aren't designing our HQ trivia replica to the pixel so don't worry to much.
Next up is the cool Logo :) this is pretty easy to achieve using Gravit's shapes, the colours within logo are a complete guess. However they hexcode's for the colours i have used are red - #C63459 yellow - #DDC467 light purple - #DDC467 the logo is small in size & aligned center within our frame.
Once you have mastered the logo next up is our text fields to show our users what time the next game is and how much the prize is worth
using the text tool firstly we will type NEXT GAME and with text selected we will use the font options on the right to set the font size to 16px , Amiko font & bold according to google the original font name is circular but i couldn't find it so Amiko seemed close enough.
Repeat the steps for the time & prize amount both set to Amiko , font weight bold & font size 25px
Its starting to come alive :D , next we are going to draw the white rectangle and once we have our rectangle again on the right tool bar set our corner radius to 13px like so :)
Next up is filling our rectangle with the content, So firstly draw a circle shape 70 x 70px and then we shall add our profile image *for this you will need any stock image or your own avatar if you have stored on your machine. We need to mask our avatar within our circle so select our image and then the rectangle and click the mask button (*found in green bar) to bring your avatar inside the circle. Then all you need to do is play around with the size to make sure it fits nicely :)
Moving on using the line tool we are going to draw out three lines, like so.
The lines are set to 1px wide & light grey. Once we have the box drawn out we now need to add more text to show our amount & our weekly stats. so to start we will add BALANCE in uppercase & light grey followed by WEEKLY RANK the same.
The font type however is using Armata and both set to 14px in size.
The larger $0 is set to Amiko / bold & font size 36px its also using the same colour as our background so we can simply select our font and using the colour picker hover over the background and set the colour to match. The small line under weekly rank is using the same colour as background also and all we do for this is draw a small line and set the width to 4px and align under our text like so.
Now for the buttons using the rectangle draw two rectangles 164.5 x 44px to make things easier draw a random sized rectangle and while selected on the right we can change the width & height by typing in the value once we have our rectangles next while still selected we need to set corner radius to 21px, and finally align them like so under our white panel. Once we have them in place we will add both leaderboard to the left hand button & Invite to the right hand button making them both centred and using Amiko font / bold / 12px.
TADA ! we are nearing the end
Next up we need to add our info button the top right of our design so for this we need to draw a small circle light purple - #DDC467 and add a simple question mark Amiko font / bold / 18px and align center.
You will also notice in the above screenshot 3 small circles stacked vertically in top right of our white panel, so draw out a small circle light grey and copy/paste so we have 3 in total and once you have them positioned vertically and slightly spaced select all and right click and select group so we can move them around as one object, this way we can move them to the corner of our panel with ease.
Finally for our last section which will complete our panel we are going to add EXTRA LIVES in the left hand space followed by a simple heart icon which can be found on Iconfinder this will be centered so it aligns with our vertical line then lastly our GET MORE button.
When we copy our heart icon from iconfinder by default the colour will be black we can fix this by selecting our object and from the effects panel find Color Adjust and reduce brightness until the heart begins to look light grey then add a 0 within the middle to represent how many lives we have ( my case none! )
For our extra lives font we will set Amiko font - bold - size 12 & change font color to light grey.
Lastly our button the Get more font is again Amiko font - bold - size 18 and our rectangle shape will be drawn out to fit the remaining area as shown but when styling our button we will remove fill by selecting Fill and select the small black/white striped box to remove fill. The border will be set to light grey and size 2px wide then we will align our text in the middle :)
Thats it we have completed the layout for our Hq trivia app. Thats not all though Hq trivia has a really nice animated background filled with assorted shapes & lines, sadly we cant achieve that animation effect here :( however we can create a static version.
AS you can see in the final version i've added assorted shapes with very thick borders & added corner radius to the triangle., finally drawing a 1px line across the top section and arching it. I wont walk you through this step as this is pretty simple and only takes a few minutes.
Thanks and hopefully you learnt a few tricks to designing your own mobile app layout :)
In this video, we will clean up our application a bit by correctly displaying th...