The major difference between User Interface Design I and II was that our choice of site to redesign was much more limited. While before we could choose whatever site we wanted, we had to pick a type of site that was very content heavy, specifically a news site, as directed by our instructor. Since I rarely pay attention to the news, I was a bit reluctant to get started, but soon realized that it’s essential that I need to be open to all types of sites and configurations, since there are sites for almost anything, and I could be working for any one of them someday as a user experience designer. It was a necessary pull out of my comfort zone, and it gave me a huge confidence boost when the ideas started flowing in.
In my search for a news site that I would be interested in working with, I came across ARTnews, which is dedicated to updating the art connoisseurs of the world on what’s happening in the art world. Unfortunately for them (and fortunately for me), there were quite a number of issues I ran into while exploring the site that could be innovated on. The search bar gives you two categories to search from, but neither of them are clickable, and the navigation of the site is incredibly confusing, some heading tabs leading you to other sites entirely. While I was not able to address the search issue, since I hadn’t learned coding at the time, I was able to greatly simplify the site navigation by prioritizing the main interests of the company (gaining more subscriptions, since they advertised it heavily throughout their own pages), while putting the other specifications in the menu. The rest of the page displays the leading articles, editor picks, most recent uploads and top stories, taking up the majority of the screen space with large and attention-grabbing pictures.
This was also the first project in which I had to consider responsive design, and I ended up creating three different page layouts for the website: mobile first, then tablet, and lastly desktop. While it’s structured in such a way to give more breathing room, rather than needing to remove items that wouldn’t fit in smaller designs, filling in the open space was also relatively difficult. However, I felt it was important to do so, since the site had a lot of white space at the time, but it felt somewhat contradictory to the nature of museum art as a whole. Some of the images were nice and big, like a large painting on display, while others were more subtle and less visible. I aimed to treat each image like it was a painting, with large blown up pictures in a gallery view with “museum placards” beneath to display the article title. I also amped up the immersion further within the mobile designs, as the images contained in the articles, once just thrown between large text walls in white space, became one with the article itself. Each image was placed in the background behind the text, as though you are looking into the framework of the painting itself. If you wanted to get a closer look at the painting itself, you could click on the title of the painting, or the “view image” link if it was not listed, and it would bring you into an isolated space with a dark background and an overhead light, as if you were actually in an art gallery to divert your full attention to it. The desktop space, however, was too wide to display the whole images in the background, so I placed it along the sides of the paragraphs for people to view while reading, rather than after reading the section. This prevents readers from having to go back if they forgot some details about the piece that were already written.