Delilah Shepard

The Design and Usability Comparison of Two Websites.

Unsplash.com
Pexels.com
Navigation
The navigation menu for unsplash.com is clear and descriptive. They utilize the width of the screen by having many different categories to shop from. Customers can know exactly what they are looking at. They also have a "featured" area so that customers can look at what images are in right now. The navigation menu is also very clear and visible from any category you visit. In both sites, the naviagtion bar remains at the top while scrolling.
Back Button
The back button is available for both sites and doesn't take you to a new page. In both unsplash.com and pexels.com, when clicking on an image, it only magnifies the image and doesn't open in a new tab unless desired. Then a user can hit the back button or press the grey "X" in the left corner to return to other images.
Simple and Promised Labels
When clicking on one of the labels in the unsplash.com website, it takes you directly to images that fit that labeled name. There are no surprises when clicking on "Black & White" because it takes you immediately to a selection of black and white photos. Pexel.com has a different approach to their navigation menu, however, clicking on "Leaderboard," takes you to a list of people and their rank in the amount of successful views their images have received in the last month.
Title
When clicking on a label, the title is displayed clearly at the top of the page before scrolling on both websites. The title is also displayed in bold lettering. On unsplash.com, they include a "submit" button to each category so that users can submit personal photos. The titles for unsplash.com are very descriptive and they match the category labels so there is no surprise when clicking on the navigation bar. The browser tab also has a title that matches the category clicked on. For example, clicking on the animal section, it takes me to, "Animals | Unsplash."
Fonts and Color Scheme
Both sites use a lot of black text and white space to highlight colored images. Unsplash.com uses muted bright colors for the background of their titles after clicking from the navigation bar. Each background image for section on unsplash.com resembles the title name. For example, in the animal section, there is a picture of a do; in the nature section, there is a picture of rocky hills. In pexels.com, they have animation videos when clicking on one of the sections. The white backgrounds for both sites make the colors in images and videos stand out more. It brings the focus to what is happening in the image and video than what's in the background.
Call to Action
Each website has a call to action button that is white with black text. unsplash.com has a border around their button stating, "submit a photo." In addition, they have cta buttons within each section when clicking a category also stating, "submit to ..." which matches whichever the title is. In pexels.com, it has a big "join" button in the top right corner. Both cta buttons are clickable and take you to another screen within the website to sign up or login. Pexels.com has a question before signing up asking what the purpose is that you are signing up for.

    Recommendations

  1. For pexels.com, I suggest that they take advantage of their space like unsplash.com does and create more, descriptive titles in their navigation bar. They only labe 4 sections, which are, "Home, Videos, Leaderboard, and Challenges," which are very broad and unappealing. I also suggest that they utilize their extra size. What I mean is, they have a lot of words in the center of the website on top of their hero image, however, they look bunched together because of the amount of empty space.
  2. I suggest that both websites think about adding more colors to their websites. I understand that the white space is there so that people can focus on the images, but it is too much white space. Maybe if they added borders and background colors to their heading sections, it might be more appealing. But overall, looking at both websites, there is too much white space for me to try not to focus on.
  3. For unsplash.com, I suggest that they choose different font sizes for their top navigation menu. It includes, "explore, advertise, unsplash+, login, and submit a photo," but they are the same font as the sections below. I find it confusing to know what the difference is supposed to be. I would assume that those sections are supposed to be a tad bit important. I think that whole width should be bigger to distinguish between the categories.