WHAT: daily UI challenge for UI exercising
WHY: I want to be more familiar with the UX/UI tools
HOW: a UI design prompt is generated by Daily UI, find a UI example that I like and try to replicate that design, and have a self-reflection for each challenge
Today's UI Challenge: Landing Page
What's the main focus? Is it for a book, an album, a mobile app, a product? Consider important landing page elements (call-to-actions, clarity, etc.)
Tools and resources that I used for this challenge
Design Tools: Sketch
Photo resource: Unsplash.com
UI example
Artsy: https://www.artsy.net/
My process
Artsy's landing page shows a nice balance between the visual and the content. It may feel overwhelmed when I think about various types of artwork. However, the landing page elements are well organized. As a first-time visitor, I know the hierarchy instantly. By replicating the design, I hope to see the deeper layer of the design.
To do so, I first divide the page into various blocks/sections and try to understand its structure of it (below left). Then, I replicate the design by filling in the same text content. For graphics/images, I use Unsplash photos.
While I was replicating the design, I realized the sliders' navigation location is a little different than what I usually see. For most of the sites that I visit, I saw the sliders' navigations usually on top of the sliders, sometimes 3-5 dots or lines. Artsy's slider navigation, on the other hand, is down below and maybe less distracted. Second, that navigation also functions as a divider to the elements down below. Making the Featured Fairs section nests between the slider navigation and the thin line below it.
More thoughts... I only see the surface of the landing page without digging deeper about its users. There is not much I would do differently at this point without further exploration. I may not be an art buyer or seller, but I still appreciate the look and feel of this landing page, especially the use of white spaces.
Comments