Big news everyone! As I’ve been going through my courses at Drexel, I’ve been learning the basic coding skills required to make a functional website. As such, I will be putting the majority of my attention there instead, as it continues to grow with my knowledge of HTML, CSS, and Javascript. Take a peek for yourself!
The URBN center at Drexel, the main building for the majority of my classes, is just about one of the most complicated buildings I’ve been in. There are a number of twists and turns and dips on every floor, making it very easy to get lost. However, that’s exactly what you want if you’re getting lost in the world of photography. I explored all four floors before my Monday class looking for the coolest color shots I could find, and captured quite a few great ones.
Enjoy.
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.
The only photography class I’ve taken was taught in black and white, so that is what I am most familiar with. That’s definitely not a bad thing though, because I’ve gotten really good at it. I particularly enjoy using the lack of color to put emphasis on other design features of each photo, such as the geometry and framing, which is the main variable in this set. I had gone out with my friend Sydney to capture some, since she is taking the class this term and I wanted to explore the limits of contrast with her. Despite the melancholic demeanor of these few, we had a good time.
That being said, the theming behind this little collection is based on some thoughts that pass through my head at times, like weary travelers looking for a place to stay for a while. I take them in and turn them into something beautiful. It’s an interesting double standard, how most of the joy in my life comes from my creative outlets, photography included, yet my main inspiration is rooted in despair. Perhaps it’s the thought that my free-flowing ambitions aren’t enough on their own, as a career. “Visions Imprisoned,” I feel, best captures this emotion, for my will to create will need to be shelled up into the inflexible foundation of societal worth, an artistic eye peering through metal bars.
Enjoy.
As one of my most in depth and successful projects at Drexel so far, Dine With Dragons was an app that I designed as a Drexel centric payment app that would allow students to pay for meals together without having to divvy up costs after the fact. It is not a fully functional app, but it has been outlined and prototyped with Figma, displaying comprehensive details on the inner workings and an interaction demonstration fully animated in Adobe After Effects. This was my final project for my Interaction Design class, and perhaps I can fully realize it in the years to come at Drexel.
My initial inspiration / example service to work from was Venmo, and I had to pick it apart to isolate a singular task flow that a person would go through when using it. The only problem was that I hadn’t ever used Venmo before starting this project, only knowing that it was specifically used for paying other people, and I ended up missing some steps in the task flow. As a result, my own app design had to be built more off of my own ingenuity, imagining how it would have to function as a legitimate product, and there ended up being more steps than necessary. However, for the main stand-out function of the app, allowing multiple people to join in on a single transaction, it panned out very smoothly in the end
Where my creative ability really took flight was in the animation process. Seeing my ideas all come together in a realistic in-app experience gave me so much more confidence in the structure I had built. Everything happens so quickly and smoothly that it could very well work as a real application, and that gives me the motivation to pursue this further in the future. Not all of my animation ideas could be realized, such as a more realist coin drop animation, but it still looks polished and functional. For my first time using After Effects too, I’m incredibly proud of the end result, and have been working more with the program to fine tune my skills.
For a closer look, download the final presentation here.
Paul's Portfolio 