One of our readings talked about the importance of white space, so I tried to implement that element into my design as much as possible; It said that whitespace could be useful when communicating elegance, openness, and freshness. Boag wrote, “Placing too much content high on the page reduces the prominence of key content,” so I tried to use whitespace to section out my paragraphs and pictures. I also used it in my navigation bar so that it was easy to distinguish each tab. I made sure to chose my letter spacing wisely so that each word is easily readable. I think that my website effectively conveys emotion. My design is responsive since the pictures have voice audio over it. This enables people with disabilities to hear the caption of the photos so that they can see the image in their mind. It is also responsive since my name and navigation tabs are clickable. My name will automatically take the viewer back to the home page, and the navigation tabs automatically connect to its page if clicked.
At first, I had no idea what I wanted my theme to be. It took a lot of research to figure out which fonts and colors coordinated well together, but I finally found a combination that evoked my personality traits. At first, I planned on using a bright blue and green, but ending up choosing a light yellow, dark magenta, and “cornflower blue” because they were not too bright and complimented each other well. I chose my fonts because they make my site more personable. I originally wanted to keep my font basic and simplistic, but realized that choosing something more original would attract more attention and interest. I originally wanted to add a personalized graphic to my site. I think that it would be useful to have added a logo, or something other than photos. I would have liked to create and implement an animation into my website, but was too focused on other design elements.I also want to improve my content and continue adding to my portfolio and about pages.
I think that my website is responsive because it is accessible in all views- phone, tablet, and web. My contact page is responsive because it connects directly to my email, so if someone needs to notify me, I will be able to speak to him or her directly in a timely manner. My resume page is responsive since it connects directly to the pdf file. In the future, I would like to code it so that it matches the rest of my site. My About and Portfolio pages reflect my individuality through the use of photos and descriptive captions. I made my captions short and sweet so that they were not too long and overwhelming. I am very satisfied with my Twitter tab because it directs people to my account’s feed automatically. This increases accessibility and responsiveness by simplifying the process to search for my timeline. My navigation is also responsive because it allows people to see what pages they have already visited by looking at the color of the tab. The same goes for my name tag- the color changes when people have clicked on it to get back to the site’s homepage.
This second project gave me a more in-depth understanding of coding, human-centered design, and the importance of visual elements. For my first resume, I chose bright colors and less-appealing fonts that did not look too professional. Although I incorporated playful fonts into my second project, I made sure that the color scheme was subtler and that the fonts were more legible. Next time, I would try to use a background with a texture or pattern to give the site more personality. I tried to maintain a roundness on the site by choosing fonts and boarders that were circular.
My skills definitely improved; as I got more familiar with using Brackets and ftp, I became more organized and confident in my abilities. I feel a lot more comfortable now than I did when I first started coding. It took me a long time to figure out where to put lines of code, so I realized the importance of sections and placement. My development in this class affected the way I coded. This second project allowed me to take more risks, enabling me to learn more about the software as each mistake and success occurred. I was able to plan out the structure more than I was on the first project. This enabled me to choose which factors and elements I wanted to implement a head of time.
I had to code each of my layouts separately, but made sure that they all were consistent with each other. In my HTML pages, I included headers, classes, sections, and images. My CSS page was mostly math-based and had containers, navigation, width, and lists. My containers made it easier to code each layout and enabled me to keep my site centered. If I had the time, I would try to modernize my site. I feel that it looks kind of like a 90’s website! I could do this by adding graphics, videos, or a logo. I also would have perfected my phone layout. I tried to use float to center my text in the containers, but was still unable to have all the words fit into the boarder at times. Even after changing the widths, nothing seemed to work!