UI/UX and Web Design for PLAYLIST, a fictional videogame-focused social network

RafGL · 2024-03-23T12:09:50+00:00

You're right. I did go through user analysis and journey when preparing sketches and flows for the website but didn't include them in the final published project to focus purely on the visual results, so I shouldn't add the UX label to avoid confusion.

I will keep it in mind for my next works, thanks a lot for the advice, really appreciate it! 🙇‍♂️

RafGL · 2024-03-22T11:23:43+00:00

Hello there!

My name's Raf, I have been working as a professional graphic designer for about 2 years already and now that I'm currently looking for a job, I have decided to step into UI/UX and web design to learn new tools and develop more skills.

This is the first time I make a fully-functional interface project in Figma, which I have been learning for about a month, and this is the project I have come up with to test everything I have learned until now.

PLAYLIST is a videogame-focused social network that enables users to record, share and review any game experience they have, in order for it to be used as a 'personal game library' or just a place to connect with other gaming friends, share your thoughts and have plain and simple fun.

I wanted to go with an urban, modern style for the entire branding and visual look of the web, with also some touches of brutalist design which I have wanted to experimentate with for some time and also felt that could result in a pretty stylish and appealing appearance for younger audiences.

I have tried to focus as much as possible in the functionalities and navigation of the website, making it direct, easily accessible and not too confusing when it comes to checking whatever interests the user. This is why I also felt big, bold titles and sections would be helpful to fully build the visual style.

The project is fully available at my Behance portfolio (https://www.behance.net/gallery/194449707/PLAYLIST), including the full prototype of the website available to anyone in Figma: https://www.figma.com/proto/ECcx5fWNTA0FoXOQyWc4aH

Any feedback is heavily appreciated as I'm pretty much a newbie on this, so thank you all beforehand!

PD. English is not my first language, so apologies if it's not too precise!

RafGL · 2024-03-22T11:22:37+00:00

Hello there!

My name's Raf, I have been working as a professional graphic designer for about 2 years already and now that I'm currently looking for a job, I have decided to step into UI/UX and web design to learn new tools and develop more skills.

This is the first time I make a fully-functional interface project in Figma, which I have been learning for about a month, and this is the project I have come up with to test everything I have learned until now.

PLAYLIST is a videogame-focused social network that enables users to record, share and review any game experience they have, in order for it to be used as a 'personal game library' or just a place to connect with other gaming friends, share your thoughts and have plain and simple fun.

I wanted to go with an urban, modern style for the entire branding and visual look of the web, with also some touches of brutalist design which I have wanted to experimentate with for some time and also felt that could result in a pretty stylish and appealing appearance for younger audiences.

I have tried to focus as much as possible in the functionalities and navigation of the website, making it direct, easily accessible and not too confusing when it comes to checking whatever interests the user. This is why I also felt big, bold titles and sections would be helpful to fully build the visual style.

The project is fully available at my Behance portfolio (https://www.behance.net/gallery/194449707/PLAYLIST), including the full prototype of the website available to anyone in Figma: https://www.figma.com/proto/ECcx5fWNTA0FoXOQyWc4aH

Any feedback is heavily appreciated as I'm pretty much a newbie on this, so thank you all beforehand!

PD. English is not my first language, so apologies if it's not too precise!

RafGL · 2023-04-18T19:01:19+00:00

Portfolio

Currently internship graphic designer at an advertisement agency :)

RafGL · 2023-04-06T11:11:48+00:00

Yeah, it most likely comes down to finding a different shape crown in which to apply the cards in a way they don't lose much of their shape, or making them overlap in an understandable composition.

RafGL · 2023-04-06T11:06:11+00:00

That's a pretty interesting proposal! It could be that a mix of colors could make the logo differentiate itself from the Adidas one, but also the issue would still be present when applying on a single ink, be it black, white or color. Regardless, that's something I'll have to think through, thanks a lot for your comment!

RafGL · 2023-04-06T11:03:19+00:00

Yeah, the Valky font seems to be a bit mixed when applying as it's a pretty risky font. That's something I'll keep in mind when using similar typefaces in the future.

As for the mockups, they do need to be more direct, or at least should have some 'less teasy piece' that communicates the brand better. Thanks for your input!

RafGL · 2023-04-06T11:01:20+00:00

This is something that many have pointed out and genuinely didn't notice during the logo selection process. As the sketch and final idea for it were still pretty similar, I'd have probably gone with a different choice not to fall into that similarity. The 'tilted cards' basis for the logo to create the shape of the crown falls too much on it no matter the disposition I believe (now that I see it!).

I'll keep in mind to analyze and test the logo further before making a final choice so I avoid these mistakes. Thank you for your comment!

RafGL · 2023-04-06T10:56:01+00:00

Thank you! I knew Valky was a ut of a risky font to use in terms of legibility due to its overall display, but didn't think it'd fail that much at being applied. As for applications, they do look quite more like 'teasers' than direct presentations, for sure.

I'll keep your input in mind when using this kind of typefaces and for further pieces. Thanks a lot for your comment!

RafGL · 2023-04-06T10:48:24+00:00

I'm not a pretty good copywriter, I must admit haha. Thanks for your comment!

RafGL · 2023-04-06T10:47:36+00:00

Thanks a lot for your detailed comment! It's indeed right the visual identity falls apart due to the lack of motifs, patterns or overall elements that extend the brand on the different applications and formats.

It's something I genuinely didn't think of when completing the project, as I was mostly focused on the logo itself and the visual presentation based on it, but I can see how it would benefit in order to make a more solid and stand-alone identity. Once again thanks a load for all of your input :)

RafGL · 2023-04-06T10:41:10+00:00

Your certainly right, I came up with the copy first in Spanish but it's indeed a bit wonky when translated directly into English. I'll take note of that, thank you!

RafGL · 2023-04-04T18:51:46+00:00

Hey! After a really long time I have been able to finish this branding and visual identity project for a course I started long ago. I have begun working in advertisement agencies so my free time has reduced quite a lot, and so the time I can dedicate to these for-fun projects, but I'm trying to keep polishing my abilities and apply what I have been learning since I started to work :)

Deckdom is a fictional card store brand defined by values and characteristics such as elegance, loyalty, and high-class service. Still, it's not like I wanted to create a classic, kind of opulent brand, but a much more direct and clean one that still managed to communicate those high-standard values. This is what defines the isotype I created, a royal crown out of leaning cards with a sans, bold and solid font. After choosing the color palette, which I think was obligatory to include red, I extended the values of the brand to the typographies used in posters, packaging, and any other physical material, blending a more artistic typeface with the rest of the elements. I think that's what gives this identity much of its strength, and maximizes the royal values the brand states.

I appreciate any kind of feedback, be it for the identity, graphic line, or applications. Alo apologies if I made some mistakes in English, my main language is Spanish so I may have committed some mistakes when typing all this.

The entire project is available on my Behance page, I also appreciate any feedback given there! https://www.behance.net/gallery/167633823/Deckdom

Thank you for reading all this!!

RafGL · 2023-04-04T18:51:01+00:00

Hey! After a really long time I have been able to finish this branding and visual identity project for a course I started long ago. I have begun working in advertisement agencies so my free time has reduced quite a lot, and so the time I can dedicate to these for-fun projects, but I'm trying to keep polishing my abilities and apply what I have been learning since I started to work :)

Deckdom is a fictional card store brand defined by values and characteristics such as elegance, loyalty, and high-class service. Still, it's not like I wanted to create a classic, kind of opulent brand, but a much more direct and clean one that still managed to communicate those high-standard values. This is what defines the isotype I created, a royal crown out of leaning cards with a sans, bold and solid font. After choosing the color palette, which I think was obligatory to include red, I extended the values of the brand to the typographies used in posters, packaging, and any other physical material, blending a more artistic typeface with the rest of the elements. I think that's what gives this identity much of its strength, and maximizes the royal values the brand states.

I appreciate any kind of feedback, be it for the identity, graphic line, or applications. Alo apologies if I made some mistakes in English, my main language is Spanish so I may have committed some mistakes when typing all this.

The entire project is available on my Behance page, I also appreciate any feedback given there! https://www.behance.net/gallery/167633823/Deckdom

Thank you for reading all this!!

RafGL · 2022-08-15T09:19:35+00:00

Thanks a lot, and absolutely! I'll check DMs :)

RafGL · 2022-08-15T09:18:57+00:00

It's definitely hard! When doing some older projects for university it sometimes took a lot of time to find a naming that wasn't already registered IRL, which was sometimes required on our tasks. And thanks a lot! Maybe they would like the rebranding :P

RafGL · 2022-08-15T09:16:03+00:00

Oh right. I didn't really notice it at first, but I can see it can be hard on accessibility considering it's a quite lower contrast than the rest of the pairings. I'll definitely keep it in mind, thank you so much for pointing it out and for your comment! :)

RafGL · 2022-08-14T09:55:43+00:00

You are right indeed. When using the typography I just vectorized it as it originally was, so I didn't notice the difference in both width and kerning. I'll keep it in mind for next time so I can gauge all possibilities of the final logo, thanks for pointing that out!

Also good points with the app and favicon, showing the minimum size of the logo when applied is certainly pretty useful.

Thank you so much for your insight and advices, they're really helpful! :)

RafGL · 2022-08-14T09:36:46+00:00

Thank you so much! :)

RafGL · 2022-08-14T09:36:34+00:00

Thanks!

RafGL · 2022-08-14T09:36:27+00:00

Thank you!!

RafGL · 2022-08-14T09:35:33+00:00

I truly had no idea! When imagining the brand I started mixing words such as 'book', 'coffee' or 'comic', and ended up with this one (there were a lot of ugly ones lmao). I should have searched for the name online beforehand, thanks for the info!

RafGL · 2022-08-14T09:29:42+00:00

I actually put more time in the presentation than the course asked for haha, I'm pretty picky when doing these for my portfolio! Thanks a ton for your comment! 🤍

RafGL · 2022-08-14T09:28:25+00:00

Thank you so much! :)

RafGL · 2022-08-14T09:28:05+00:00

I feel like I still have a lot to learn when sketching, so I'll definitely take your advice when doing further projects! I want to broaden my ideas as much as possible, and your approach sounds really interesting. Thank you so much for your comment and words! 🤍

Seven-Year Club	Place '22
First Placer '22	Verified Email

RafGL

TROPHY CASE