Reflection

As we have learned throughout the last few weeks, emotional and responsive design are very crucial in developing a relationship with our audience and also in giving them several engaging opportunities within our websites. Many readings have highlighted this significance, but what guided me the most while creating a website that accomplished this was Aaron Walther’s “Designing for Emotion.” It is stated that the primary goal of emotional design is to generate human to human communication and to achieve this it is crucial to consider how we react with one another in real life.

With this in mind right from the beginning, I put desiging to effectively communicate my personality to generate emotional response and audience engagement right in the foreground, building from my design persona. I wanted to come across as lively but not overwhelming and organized but not boring and I did so by keeping the color scheme subtle with a lot of whites and greys, but added a little dynamic with coral colored headings. This is meant to convey to my audience the vibrant side of me and also to keep them attracted to my page. Here is an example of how I did this on my About page:

This is an image of erinrcastellano.com's About page. The picture is ment to convey the example of adding color into her site to show Erin's bright side of her personality

Another way that I emotionally and responsively designed for my grid-based professional website was the organization of my structure. As I mentioned above, I wanted the personality of my site to come off as organized but not boring, so in my Portfolio section for instance, I added distinction within my content through floating elements and here is how I incorporated these visual contrasts on my Portfolio page:

This is a photo of an element on erinrcastellano.com's Portfolio page that is floated to the left. It is meant to show the distinction of alignment of her content on the page. It shows Erin to be organized but not boring
This is a photo of an element on erinrcastellano.com's Portfolio page that is floated to the right. It is meant to show the distinction of alignment of her content on the page. It shows Erin to be organized but not boring

On my initial sketches I had an image of myself on all of the inner pages. At first, this seemed like a good idea but after transfering the sketches into coding my actual site, the photos really overpowered the rest of the content, specifically the created works presented in my portfolio page. As a result, I only placed photos of myself on the front and about page; this way my audience can still recognize who I am but also have the opportunity to focus prominently on my content on certain pages.

If I could have added anything to make my website more emotional and responsive I would have removed the white space underneath of my image displayed on my front page on the mobile phone media query. Several of my classmates and I were struggling with this issue, and it took us along with Bill, to come up with the solution. By the time we did so, it was too late and I had to submit the assignment, but if there were more time that would have been an area of prominent change for me. I also would have liked to add more to my portfolio to convey the variety of creative skills that I uphold. Because I had to focus on both adding to my portfolio but also making sure that it was structurally valid for this project, time ran out. I struggled with coding my portfolio, so if that were not as big of an obstacle as it was, I would have incorporated more articles I have written, photos I have taken, and graphic designs I have made.

Looking back to the first assignment all the way up until now, I can confidently say that I have kept clean coded stylesheets and also organized folders on Filezilla. These have helped me in regard to locating errors and knowing exaclty where all of content is placed if I ever wanted to incorporate it easily on my site. This has both helped me save time but also learn how important it is to keep track of your content because of how tedious coding can be. Here is an example of how I continuously maintained this:

This is an example of the inner.css stylesheet for erinrcastellano.com. This stylesheet explicates the CSS coding for the About, Portfolio, and Contact pages for the mobile phone, 320 px media query. This image is meant to represent Erin's organizational skills through consistent pattern and spacing of her code This is an image of Erin Castellano's CSS folder. In here, all of her CSS stylesheets that she has created for all of her projects are located. This is meant to show her organizational skills through keeping all similar files in the same folder, so that they are easy to locate and avoid accidental deletion. This is an image of Erin Castellano's Images folder. In here, all of her images  that she has incorporated into all of her projects are located. This is meant to show her organizational skills through keeping all similar files in the same folder, so that they are easy to locate and avoid accidental deletion.

I remember how hard it was to get familiar with the several elements of code that we were using. Generic headers and content within the body such as lists and paragraphs came easily to me, but as we moved further along into boxes and floating I found myself getting lost. During the resume assignment, I frantically asked my peers and Bill for help, which gave me some benefit but I know I could have done more. What I did once we hit the grid-based responsive professional site was I would have the textbook out while I was coding. Having already done the readings and having it there as an additional guide only boosted both my confidence and my knowledge even more, plus I had more than just collaboration as my tool for success. I wish I had done this sooner because as you can see, the floating structure of my resume is not as appealing and accelerated as the floating on my portfolio displayed above, but now I can say I have definitely learned from this experience.

This is a screenshot of Erin Castellano's resume page. Here her skill sets, education, and work experience are displayed. The point of placing this image here is to convey the improvement in floating that Erin has made since she created this project

I can say that this along with the collaborative work between my peers, Bill, and myself has got me to what I now feel is a more accelerated coding level. Although I wish I had more time to add more of my personality to my site through a wider selection of fonts, and also a different range of background images on my inner pages, I now feel confident in coding a web page entirely and I believe that I was provided enough knowledge and practice in this class to now go on and experiment with web designing in my future if desired. Between becoming patient with tedious structural coding elements to feeling comfortable with expressing my creative personality through specific stylistic coding choices, this class has had me take many risks that had I not taken, I would not be as comfortable with coding as I am now

My overall suggestions to successfully reach your goals is to never doubt yourself. Although coding gets frustrating, hard work, organization, and a strong work ethic will guide you to accomplish and master any task. Also, as I have reiterated over and over again, organization is key. Keeping a consistent pattern will get you more accustomed with coding quicker and you will be an expert in no time.