DailyUI 003 – Landing Page

3rd challenge is upon us and here we have a landing page. I chose to do a landing page for a product, because being too expensive or not, I am quite excited for the Sony a6300 which was announced just a few days ago.

I knew straight away that I wanted something simple, but the fear is always to make it too simple. The second fear I had was finding proper product images of the a6300, because most product pictures are too stale in my opinion. But I managed to snag a few from the official page and various media outlets. Because of that I tried out several different options, some with only one huge image in the background, some with several images. At the end I decided to simply cut this one out from its background. While the background was a simple shade of grey it had a shadow that was cut off at the very edge of the image, thus looking jarring when resized to this size.

At this point I had the overall structure set out in my head. The next part was laying out the text, which was simply cut and pasted from the official product page. Having it at the top looked strange, but when it was on the bottom I felt that the product name didn’t quite fit. So I decided to split the page in two, grabbing the red colour off of the G branding on the lens and I attached the product name to the red edge. I felt this not only emphasised the name of the product better but it also gave the overall design more of a flair.

But with only the descriptive text it felt kind of empty, so I decided to add a link to a gallery, much like the official product page itself. So I built the gallery icon and added the text. For some reason I felt that it didn’t really appear like a link, so I added the down arrow as well. Not really sure how that resonates, but I felt safer with the text flanked by two icons.

Lastly, I added the down arrow FAB to give the illusion that there’s more content to be seen below. Not really sure why I made this into a FAB, but it looked so stale without the white background.

The font used here is the regular Roboto. At first I was using Lato, but it didn’t have the alpha character that is used in the a6300 name, and using a normal A didn’t look as good. So after trying out a few different fonts I ended up with Roboto, simple and works in most situations.

That’s all for this time. Peace.