UI Challenge 06 - User Profile
This is a UI Challenge to design a user profile.
"ItME" functions as a place for artists to display their work or for ordinary users to display their more artistic sides. Photographers, artists, video editors, poets, and writers would be found here.
The UI is intended to be as simplistic and minimalistic as possible, so users can better browse and appreciate the artist's work.
The top of the page is reserved for the global navigation and how it appears for a user who is not logged in. The layout is divided into four columns, with the leftmost one being dedicated to showcasing who the user is and their social media statistics.
With regards to the left most column, from top to bottom the information is prioritized in a hierarchy of what might be the most important first. Name first, then avatar, then the follow button. Below that is the number of followers, number of users this person is following, and number of posts. The posts are divided by slashes to represent the number of posts within different categories of what they may post: Images, videos, and writing. This allows viewers to see at a glance both how much this artist has posted and what specifically they post.
The right 3 columns are used to display the artist's work. 3 thumbnails a row for each work. Above the three columns of thumbnails are "tabs" which allow users to sift through the types of work that his artist has created. If we keep in mind the "posts" count on the left side of the screen we know that this artist has posted 46 images, 3 videos, and 4 works of writing. Clicking on another tab will bring up the other collections of their work in another category.
I had considered using a white background and light UI because it trends to appear more simplified, accepted, de-cluttered and "cleaner".
After much internal debate I finally settled on a “dark” UI color scheme. This time the color isn't full black or simply a lighter black but a very dark-slightly blue for the background. This allows the buttons to stand out for the navigation but also more importantly it allows the images in the displayed in the collection to stand out. My biggest concern is that with a pure white background, the white spaces between the images form borders and seem to appear more as a "frame" that is placed "on top of" of the pictures. With a very dark blue-black, the images can now better stand out, contrast, and appear "on top" of the layout of the page. The “frames” no longer detract from the focus on the thumbnails. The dark blue-black I selected I feel best does this while retaining a "simple" look that white would have had. It also allows the colors within thumbnails to better stand out, and lessens eye fatigue.
Lastly "follow", "log in" and "sign up" are boxed so that users consistently know those are clickable. The tabs for "images" , "videos", and "writing" appear as tabs and are featured prominently in both appearance and use. The search bar at the top is italicized to differentiate it as a field that one can input type into. The user's profile picture is spaced a bit further left, unaligned, and slightly smaller to distinguish it from the work and so it doesn't blend it. This is done to help retain visual hierarchy.
Background Photos used (by row, from left-to-right):
Top row: Photo by Lucas Sankey on Unsplash https://unsplash.com/photos/bXq8pVfP-fY
Photo by Rafa Prada on Unsplash https://unsplash.com/photos/-tYc6bODtxU
Photo by Luca Bravo on Unsplash https://unsplash.com/photos/_QdFx92MO2U
Photo by Adi Constantin on Unsplash https://unsplash.com/photos/C8Z5DvtWQMw
Second Row: Photo by Muzammil Soorma on Unsplash https://unsplash.com/photos/KTdzeb28jyo
Photo by Paul-Vincent Roll on Unsplash https://unsplash.com/photos/c61jL_NpAn8
Photo by Vangelis Kovu on Unsplash https://unsplash.com/photos/P4i878dvd1M
Third Row: Photo by Bambi Corro on Unsplash https://unsplash.com/photos/uYewNGsTXPA
Photo by Gayatri Malhotra on Unsplash https://unsplash.com/photos/P9gkfbaxMTU
Photo by Filip Mroz on Unsplash https://unsplash.com/photos/023T4jyCRqA