DailyUI 016 – Pop-Up/Overlay
Last UI challenge was an on/off switch. I didn’t post about it because I deemed it unnecessary, but please check it out on my Instagram.
Anyway, today’s was a kind of pop-up or overlay. First thing that comes to mind is one of those pesky things that pop up when you visit a brand website of some kind, usually clothes or something similar. As I’ve been doing a lot of tech related things as of late, I decided to go for one of my favourite sneaker brands instead – Onitsuka Tiger.
Browsing their American website I saw this colourful image promoting their Makumo collection. It immediately caught my interest and gave me inspiration. To stick with their “branding” of the website, a lot of the design elements reflect the way they shape and design things on their website. The blocked in text, the serif font combined with a bit thicker, condensed sans serif.
There are two main colours in use here – both picked from one of the sneakers. I had originally picked another picture showing off all the shoes from the top, and I snagged the orange and blue from one of the sneakers. In this picture it is near the top. They’re very subtly in use; the blue is used as a very light tint over the image to make the white text pop and stand out more and the orange is used as an accent colour, AKA the two lines surrounding the serifed title.
The text is taken from the official promotion page itself. At first I had a much longer text, but I cut it down to the most important bit as it’s merely an informational pop-up, providing a button link to see/read more if you’re interested.
Self-made icons are once again the close button in the top right corner. A pop-up should have an obvious way of being closed after all. And then of course the arrow for the “see collection” button. Simple things that add a context to the actions.
Fonts used are DIN Condensed Bold for the sans serif and Marion Regular for the serif. I tried two completely new typefaces this time as I have been using the same for quite some time now. As I was going through what I had installed, these two struck me as a great combination. They complement each other very well I think and still reflect the Onitsuka branding they use on their website.
The rectangle itself has squared off edges. I chose to do this because I usually do this on my dailies to make it stand out a bit. In this case however, I sort of regret it. It clashes a bit too much with the otherwise squared off design language. Then again, it might help taking away from the monotony of the squares.
Anyway, that’s it for now. Peace.