Throughout this web design project, I tried to always keep emotional design in mind. It is really important to me to let my personality show through all of my work. The design persona we created a few weeks ago helped me to pin down the qualities I wanted to portray and focus on how I wanted my site to look. Here is what I said my goals were in my design persona: “My brand is friendly, open and inviting. The tone is casual and approachable, showing my interest in working with people. I always take my audience into consideration, as collaboration goes into much of my work as a writer and journalist. My personality is curious and person-oriented, but also observant and attentive to detail.” I used bright shades of blue, a friendly and trustworthy color, to convey my openness and approachability. The photos I used also played a significant role in achieving my emotional design goals. I selected my homepage photo because I thought it communicated a welcoming and curious vibe, as it is from the perspective of someone entering a big, exciting city. It is serene with the varying shades of blue and gray, but it is full of anticipation and invitation to explore. On my about page, I featured a photo of myself to make the site more human and personal. The photo depicts me on an assignment, expressing my curiosity and displaying an example of my work. Finally, I used the photos on my portfolio page hopefully to stir intrigue. At first, I was not sure how to best represent my work, as it is mostly written for print. Instead of just making a list of links with short descriptions, I thought it would be more appealing and interesting to include screenshots of the articles as they appear in print. I selected my articles with the most interesting designs and emotionally compelling photos. As we recognize at the newspaper, photos lead people in more than text. My main goal to was to match the characteristics I assigned to my brand:
The responsive aspect was a little more difficult to manage. I knew it was important to make sure everything was functional, readable and visually appealing all at the same time. The first step was to make sketches for different screen sizes: a phone, a tablet and a computer. My sketches are not exactly the same as how my site looks now, but they did help me to start thinking about how my website should look for different audiences. It took some trial and error to actually work out how things should look. I had to constantly change the sizing and position of different elements until everything fell into place, as it appears now. I am happy with the way the computer screen and phone screen look, as they seem to be emotional and functional to me. However, I am still working on my tablet screen view. Styling that query has been more difficult since I do not have a tablet to look at. I found it very helpful to use my phone while coding instead of just shrinking the computer screen, and I wish I could have done the same with a tablet. There are still some flaws with my 768 media query, but I plan to keep working on it.
I believe I have made substantial progress from the first coding assignment to this final project. At the beginning of the course, I had many concerns about how I would keep up with the class. Coding seemed very daunting at first, and I was not sure if I would be able to remember everything. However, I am surprised how much more comfortable with coding I have become. I have mastered many of the basic codes so I can comfortably work on my code without having to look many things up. Unless I am making major alterations, I can usually tinker with the styling, such as padding, floating, fonts, sizes, colors, etc. without needing to refer to the Internet or old code. It can still be frustrating at times if I mistype or forget something, but I am much more capable of solving my own problems now by a quick Internet search or simply rereading my code more carefully.
Here is an early version of my first coding project, the responsive resume:
This page featured the most basic coding and tags: headers, paragraphs and colors. I used the default fonts and the colors that brackets suggests. At this point, I was still playing around with the basic tags and trying to work on the positioning of the elements. I had just managed to figure out how to use floating, but I struggled to float multiple sections. Now, I have mastered floating, as I successfully managed to layout my portfolio with four floated items that are all exactly the same size and perfectly lined up. To achieve this and other stylistic choices throughout my size, I utilized div id’s and classes frequently. I did not realize how useful those would be during the first project, but now I have created a div of some kind for nearly every element on my site. It took a lot of time to style each component individually, such as when I individually coded all of the links on my site so that they would be different colors than the links in my navigation bar without being the default colors. However, it was worth it in the end to make almost everything exactly how I wanted.
As I mentioned in the previous question, I plan to continue working on my website to fix a few problems I am still having. For example, the tablet view of my home page does not look very good. I have to work on resizing the photo, but I struggled to get it the right size. This was also challenging because I was never able to look at my website on a tablet.
Another thing I was hoping to achieve was adding a footer to the bottom of my homepage. I think having something at the bottom of the page would have made it look more like a professional website. I intended to try it out, but I simply ran out of time. Since we did not cover it in class, I was nervous to attempt it at the last minute and potentially mess something up. Overall, however, I am content with how my site looks at this point, mainly because of how much progress I have made over the course of the semester. I did not think I would be as comfortable with coding as I am now or as proud of my final outcome.