Trending designs to inspire you
Work designers are riffing on
Interviews, tutorials, and more
Prompt to flex your design skills
Find your dream design job
An exclusive list for contract work
Get new leads in your inbox every day
Introduce yourself to new clients with Pitch
Learn product design in just 12 weeks...
Level up your skills with our interactive workshops…
A marketplace of digital assets…
Icons, Illustrations, Patterns, Textures…
Display, Script, Sans Serif, Serif…
Mock Ups, Social Media, Presentations…
Characters, Objects, Textures…
WordPress, Shopify, Bootstrap, HTML5…
Procreate, Affinity, Photoshop, InDesign…
Earn money doing what you love
Find, contact, and hire designers
The #1 job board for creatives
Board for freelance & contract work
Leaderboard (as part of UI Learn by Denislav Jeliazkov)
The goal was to design a leaderboard screen which included players names, numbered list, scores and filter.
Challenges I faced:
1) Since I choose pirate theme, I wanted to find a cool typography style that would look as awesome as pirates do. After some research I decided to use Windlass typeface for headlines and PragRoman typeface for content. Both styles work very well together.
2) I wanted the first three places to stand out, but since pirates care more about treasure than crowns, I used some pirate coin icons and I know pirate users would appreciate it.
3) I wanted to put an illustration from the Sea of Thieves game in the background, but had some issues with the visibility of the text. Some dark blur behind the text seems to fixed the issue and the background fits perfectly with the leaderboard and the pirate theme.
4) The background is very dark so dark coloured text was not an option. I used light colours on typography - the important information is white, everything else is slightly darker, but still visible enough.
5) I tried to include filter on the top right of the screen, but in the end I didn't, because it didn't go well with the context. It could be included in the ''Show more'' screen.
6) At first I made elements too big, so I reduced the text size and the icons. It made all the difference - the importance of the white space was a huge lesson for me. Also the background is more visible and it looks very cool.
What I learned:
1) Define the most important element on the screen and made it stand out from the rest.
2) Carefully choose the typography size and typeface to reflect the hierarchy of the elements.
3) Consistency is very important and sometimes I should limit ideas and wishes to maintain it.
4) How to use white space to your advantage.
5) How to have fun with typography, icons and elements to create a beautiful thematic leaderboard screen.