Olivia Massaro


Portfolio Reflection 2


Emotional and Responsive Design

As I moved away from my original opaque pink color background, I felt that my site was universally being pulled together. The new eggshell-pink background was much more aesthetically pleasing for both men and women users. I ran a trial with my male family and friends, to see how they were responding to the site's design. Some feedback I received was that it catered to my personal aesthetic while appealing to their preferred cleanliness and uninterest in a wild color palette. From my female audience, they liked how the brown contrasted against the light shade of pink. One mentioned that this was a classic color scheme that not many can get tired of. A huge thank you to all that helped me in the process of reaching the perfect design scheme, as I was fulfilled with the confidence required to move forward to the photo choice and layout.



I am a stickler for high resolution photos that are taken at the right angles, edited lightly, and cohesively cater to the rules of third when necessary. These photography skills are not only quintessential from a photographer’s perspective, but from a professional one as well. If I were looking at a student’s gallery, I would want to ensure that they are able to follow certain rules that have been proven to cater to the audience’s emotions. Whether this be for personal keepsake or visuals for the job, practicing these techniques are always a good move. I tried my best to look through the archive of my photography and pick the most recent and what would appeal to the eye. This means that all the chosen photos are consistent in colors, landscapes, portraits, and details. Finding the perfect balance of pinks, tans, browns, greens, darks, and whites, took the longest time in this web design process. I have switched back and forth, thanks to my indecisiveness, on which photos to finally settle on. On pages such as my portfolio and travel pages, I wanted to make sure that the cover images were telling their own story right off the bat. I have relied on photography to tell the stories over the course of my life and feel that these were cohesive images to choose for their respective purposes.



When the index.html and imagehome.css were introduced, I was extremely excited to begin the design process. We laid the necessary coding groundwork that had led to the moment of homepage design. After much deliberation, I settled on three images for the responsive design outline that was set in place for us. My computer image is from my trip from September to Amalfi Coast, Italy. I chose this photo as it juxtaposed a complex and intricate background against the up close profile. I wanted to show an element of myself without showing completely; this photo allowed for just that. The tablet image is a seamless transition from the computer image as it is taken from the same place. I decided to keep this as a landscape so that it looked clean and clear on the handheld device. Finally, the phone image matches the best with the navigation bar format that I chose. The colors blend nicely which responds well on such an immediate access point. Students and those in a younger demographic will appreciate the simplicity of the site and bright complex that comes from the phone.

Progress Up To This Point

When I look back at the course of the semester and see where fall today, I feel that I have made progress to be proud of. Prior students warned us about the time that coding would take and I am grateful for their insight. I don’t think my site would be where it currently is, without the time and desire to make it a worthwhile project. This is the kind of course where you could easily fall behind when you are not proactively working towards the possibilities of your site. Coming off the midterm checkpoint, I wanted to dedicate any empty time to coding and chomping away at small bits for the rest of the semester. As COVID struck, it made my coding more of a hobby, rather than an assignment. For this reason, I feel that I have been able to transition the work from a weekly assignment , to a professional platform that is almost ready to be shared.

In terms of my successes, I would say that my greatest triumph has been being completely comfortable manipulating all style sheets. Whether I wanted a different navigation bar appearance, photo size, video display, or header style, I easily found a technique that worked to make quick adjustments as I saw best fit.
In my first reflection, I shared that writing for a website should be short, informative, and engaging. I feel that I have kept the consistency of that motto up until the end. This was something that I was initially concerned about and if I could successfully find a way to stay creative in taglines and subtexts. Looking at the final version of my site, I think the short subtexts on the portfolio images make all the difference, rather than having descriptive paragraphs on the face of the page.

This brings me into the advice that I have for those students entering this Web Design course. You should most definitely take advantage of Firefox Developer and every tool that it has to offer. I think that the Inspector and Code Validator should be introduced much earlier in the course so that the design process does not come as a scary assignment, but rather something that can easily be changed using these services. I also think that virtual code conferences worked in our favor, making it easy to share screens with Bill and quickly nail down any issues with the code. My final statements are these. Don’t be overwhelmed by the work at all. If you nail down clean coding, group collaboration, an hour or two a day for the code, and take advantage of Bill's time and expertise, you are setting yourself up for success.

Unassigned Skills Acquired:

  1. Interactive Portfolio Images
  2. Hidden Images on Phone/Tablet/Computer Screens
  3. Linked Footer Elements
  4. Travel Page and Interactive Images (to be continued)
  5. Interactive Resume Button
  6. Alt-Text for Reflection Images