UI Mockups

In my free time, I like to make mockups and redesigns for certain tools, softwares and websites. For this, I use Adobe XD most of the time.

PS5 Home-Screen UI Mockup v.2:
After I made my first version of the PS5 Home-Screen, I felt like it does not look as modern and clean as I wanted. This is why I decided to create another, even simpler, and nicer looking (at least in my opinion) version of what the new Home-Screen of the PS5 could look like.
I took a lot of inspiration of my first design, but decided to go back to the square design of titles, but round their corners, to make them look more modern. The design is a lot more functional as well, including more info on the screen, as well as including button prompts, controller charge indicators, etc.
PS5 Home-Screen UI Mockup:
Once the PS5 was confirmed, and many designers started pushing out concepts for a PS5 home-screen, I wanted to add my spin to it as well!
Thinking that Sony might go with modern design cues (minimalism, rounded edges, slight gradients), I decided to take these into consideration.
In the first screenshot, I designed the main home-screen, that the console will boot into when starting it up. On there, the first big change is that the icons for games and apps are not square anymore, but rather resemble the aspect ratio of game covers, to also show more of the game on this icon. The selected game is hightlighted with a calm glow, as well as it being scaled up. The selected game's information will also be displayed below (right now, this information is the achievement section), also an image of the game is displayed in the background.
In the second screenshot, I show a library view, which displays all of the games the user has installed on their machine, ordered by alphabet. Basically, the design is very similar to the home-screen, but it has a slightly different display of the titles.
In the third, and last screenshot, I designed a very basic version of a possible storefront. The blue background is not screen-filling, since it is supposed to kind of pop in from the bottom of the screen, and would disappear again downwards, when exiting the store. On the store, I wanted to clean the entire thing up, and put the games available front and center.
New iPod Classic UI Mockup:
Original Lock-Screen concept from Álvaro
Original Lock-Screen concept from Álvaro
Home-Screen concept, based on the iOS layout
Home-Screen concept, based on the iOS layout
Different studies on Launch-Screens for streaming apps
Different studies on Launch-Screens for streaming apps
Launch-Screen for Spotify
Launch-Screen for Spotify
Song-/Album-Selection-Screen within Spotify
Song-/Album-Selection-Screen within Spotify
Track-Screen within Spotify
Track-Screen within Spotify
After seeing Álvaro Pabesio's mockup of a possible new iPod Classic (Screen #1), I immediately wanted to mock up more screens for his design. Following iOS 13 design guidelines, I tried adding a home screen to it, featuring icons just like the iPhone or the iPad. To solve the issue of using the circular dial instead of just touching the screen, I added a white outline (here visible in Screen #2 around the Spotify app) to show what app the cursor is currently on.
In Screen #3, I just tried to mock up different launch screens for apps, featuring a regular and a negative version. I always took a primary color (green for Spotify, red for Netflix) and tried using this as the background. As the alternative, negative style, I tried inverting the colors to make it look more dark and unified.
Screen #4 shows the app booting screen which features the app icon above a background of the same background color. To separate the app icon, I used a drop shadow around the icon.
Screens #5 and #6 feature a design for the Spotify app. While I got inspired by the original iPod Classic's playback screen, I modified it a bit and made it look more modern and fitting to Spotify's design.
Google Stadia Mockup:
'God of War' as a suggestion on the front page
'God of War' as a suggestion on the front page
'Spyro' as a suggestion on the front page
'Spyro' as a suggestion on the front page
'Assassin's Creed Odyssey' as a suggestion on the front page
'Assassin's Creed Odyssey' as a suggestion on the front page
'Forza Horizon 4' as a suggestion on the front page
'Forza Horizon 4' as a suggestion on the front page
The 'Explore' section in which all available titles are displayed
The 'Explore' section in which all available titles are displayed
The 'My Games' section which acts as a library
The 'My Games' section which acts as a library
Before Google Stadia was released, I wanted to explore a concept I had in mind for its User Interface. 
First off, I started gathering references from other digital rentalservices, such as Netflix and Amazon Prime. Based on these designs, I created the first layouts and instantly started to like them.
My main focus for this mockup was simplicity - I wanted to have bold images and a constant representation of Stadias color-scheme.
The first 4 images show the EXPLORE-section in which the top 4 matches for the user will be displayed (this could also include the last played game as the first suggestion).
The fifth screenshot shows the BROWSE-section in which a list of all available titles will be displayed in a grid view. Owned/played titles would be displayed with a checkmark-symbol.
The last image shows the MY GAMES-section. In here, all previously played titles will be displayed in a carousel-style.
Unreal Engine Re-design Mockup:
The 'old' version - what UE4 looks like right now
The 'old' version - what UE4 looks like right now
My updated version of UE4
My updated version of UE4
When I started using Unreal Engine 4, I fell in love with the power that it provided to developers.
However after using it for a longer time, getting used to its quirks and somewhat clunky interfaces, I decided that I wanted to tackle what a redesign would look like for me.
First off, I reduced all the rounded shapes to squares. Additionally, I completely removed the 3d-effects that a lot of the elements in the user interface had, as well as a lot of graphical elements which were absolutely obsolete.


Guitar Hero-esque Mobile Game Mockup:
Layout Pass #1
Layout Pass #1
Variant of Pass #1
Variant of Pass #1
Song Selection Screen
Song Selection Screen
Different Layout/Elements
Different Layout/Elements
Dark Design Variant
Dark Design Variant
After playing a lot of Guitar Hero again, I wanted to make a mockup for how I think a mobile version could look like, especially with a less rock-y design, but rather a simplistic design.
The focus was on having a neutral background and having the foreground-elements pop with nice colors, like the notes in the mockups.
One challenge was to design the fret-board in the center where the player would actually click the incoming notes. One of my options was to make a different design for it, but I simply but a light divider above it to clearly separate it from the rest of the screen and gave the buttons a different look - the missing circle in it is exactly the size of the incoming notes, so when a note overlaps perfectly, the button will fully be filled and the player knows when to touch it.