Abstract.

Back in 2017, I applied for a UX/UI job without really being clear what it entitled. The job said “Visual Designer” and I figured “i’m a designer who uses his visual skills to design. Sign me up!” I was very very wrong. At the time, I had only been using Illustrator in order to design and was asked if I had knowledge of sketch. I had no idea what she was talking about. She asked me about my design process etc. and I was completely floored by the many things I had no idea.

I wasn’t called back after 3 interviews. I was very frustrated at myself and dare I say even depressed, but I took that frustration and decided to turn it into a learning experience. First off with learning more about UX/Ui (downloaded about 30 books on the subject). And after learning about design sprints, personas, affinity mappings, user flows, etc. I decided to tackle on the new design tool: Sketch. I was very annoyed by it at the beginning. Comparing it all the time with how it lacked a lot of illustrator features, let alone relearning new shortcuts. It was a tough, but necessary bumpy road.

I decided that if I was gonna take on this challenge, might as well have it be with one of my favorite things: El Barça. Since this was for pure fun/;earning. my reasoning was based solely on best design practices. I didn’t take into consideration stakeholders, user interviews etc. This was just me making a more appealing sight based off of my love for the FCB and my need to learn how to work with sketch.

Everything beyond this point (except the photography, that was manipulated in photoshop in order to make the ads and the iPhone tracings) was made in sketch from scratch.  

Official FC Barcelona Crest. Made in Sketch. 2018

Alternative Crest Designs. Made in Sketch. 2018

UI Icons.

Lionel Messi Illustration. Made in Sketch. 2018

Color Palette.

BRAND-01
#0000FF

BRAND-02
#DD000D

BRAND-03
#631935

BRAND-04
#FFE500

BRAND-05
#DFB700

SUPPORT-01
#FF001A

SUPPORT-02
#22C651

SUPPORT-03
#FFE000

SUPPORT-04
#0073FF

TEXT-01
#1A1818

TEXT-02
#565151

TEXT-03
#797272

UI-01
#C4C4C5

UI-02
#D5D5D6

UI-03
#ECECED

Mobile UI.