I have developed my site with emotional and responsive design in mind. I reflected a great deal on whom my intended audience is and what would attract their attention and interest. My intended audience is potential employers for an internship or employment in the field of communication and digital media. I have designed my site to be an experience of no-nonsense and no-clutter. I kept my style clean and simple on purpose to not distract the reader in any way. I feel that potential employers want to see creative portfolios of work, but want to get to the point and the highlights without too much clicking around. They are busy people looking for talent and my site is designed to pull them in with ease. Our reading and theories from the course taught us to design with the goal of building a relationship with the audience and create a human connection; I feel that I have strived to accomplish this on my site. In addition, I did try to make the look, color and fonts visually appealing. I also focused on the responsive design aspect by adjusting to screen size, platform and orientation.
On the home page, I present a friendly, creative and welcoming set of photos. I used a photograph that I took of the city to link to my photography page. I tried to pick one that complemented my site and also showcased the kind of photos I like to take. The self portrait highlights me in a colorful, peaceful setting creating a warm welcome considering it is the center image of the page. This picture also leads to my about page and I purposefully chose this picture because it is hiding my face and shows personality but also you can click to learn more about me on the about me page. I am specifically focused on social media content creation, so I highlight this text as a label that stands out as who I am, positioned clearly on the top left of my photos underneath my name in larger font size. The last photo I have leads to my works page and I again tried to capture my work in this photo with an eye-catching image to tie the design of my front page together.
I have a specific interest in photography and video and have illustrated by portfolio of work on my site. I have clear tabs to share my works. I have selected a handful of photos to show my skill and style while not overwhelming them with too much information. I also have tried to express meaning in my photography work and generate emotion with the audience. I also am sharing a documentary that is compelling to most audiences, focused on bringing awareness to the homeless situation in Philadelphia. The next tab is “about me”. I focused on designing with ease of use in mind and also having the content and information formatted so that key items standout and clearly emphasize the main points in my professional statement and the contact me section. I tried to reflect my personality in hopes that they will relate to me as a person rather than a web site.
I feel that my site portrays emotional and responsive design. I have designed my site to show myself through my work, connect on a personal basis with the audience (potential employers), reflect my personality and welcome the audience to stay and explore the entire site; with the goal of contacting me.
My initial drawings of my site were somewhat similar but more involved. I simplified the content to make my site easy and simple to focus on key aspects of my skills, education and samples of creative work. I kept my style and color scheme ideas as they reflect my personality. As my portfolio of work grows and expands, would possibly add additional sections to illustrate various types of my work samples. This would generate a more emotional response from the employers seeing additional capabilities of my work product. As I gain internship and employment opportunities and experience, highlighting this would also generate more emotional connection with employers seeing the experience and how it might fit into their organization. Focusing more on the responsive design techniques could also enhance the mobile application experience. For example, possibly redesign of some of the pages to be more adaptable to a smaller display. Overall I feel that I have utilized the emotional and responsive techniques that we have read and learned about to create a warm, welcoming, professional site that illustrates my career goals, aspirations and accomplishments.
Below are some sketches. The first two were my original design and the next one was the design I modified before modifying it one more time to look like my current website. I decided to float the h1 next to my nav bar in my final design.
I have clearly progressed from my first assignment to the end of the second assignment. In the beginning there was so much to take in and the nervousness of coding. During the first project I became familiar with coding and also with responsive web design and emotional design. I have become much more successful in focusing on usability and accessibility during my second project; through practice and gaining more confidence in coding. My coding skills have become more refined, while not perfect as I have had more practice and experience. In the first project the focus was on learning and applying this which took up most of the time. As I progressed I was able to spend more time thinking about the design before coding. During the second project I was able to use some of the organizational features of coding that I did not in the first project. I also became more proficient with the technical terminology from project one to project two, which made it quicker to look for technical help with the books and reading materials.
Advancing from project one to project two completion I have focused more on emotional design to gain and keep the attention of the audience. I have spent more time reflecting on my design in the second project as I have become more comfortable in coding. Learning about the importance of whitespace, emotional design, and creating a personality has helped me think through the actual design and aesthetic choices that I made in project two. I feel that I have been exposed to best practices that I was not aware of and have tried to use them in my design, but will also use these more as I have additional time in the future.
From a technical perspective, I have advancing through unordered lists, headers, sections and div tags. I learned to group related content to ensure the information was organized and clear to the reader. Through developing the content of my resume and professional statement, the use of tags and lists helped to focus on placement, indentations and visual ease to allow the reader to quickly identify key points. I focused on making my content as clean and clear looking as possible. I also learned through coding how to place items on the page, how to separate with headings, lists, paragraphs and tags. The coding exercises helped me to really consider placement, sizing and various attributes used to develop web content with a human-centered design. Many of these topics were learned during project one and I applied them in an advanced way in project two.
If I was more proficient I may have had more time to focus on creating some additional creative attention keeping techniques, such as interactive items to keep peek interest. In addition, I possibly would have added an additional section or two of my portfolio of work, like sample writings, etc. that would have rounded out my portfolio of work. I also would have added a hover effect on the images on my front page but I could not figure out how to do that. Overall I am happy with the progress and outcomes of the project based on learning coding and the new aspects of web design. I feel that I have a good understanding of the techniques through this course that focus on human-centered design, and accessibility that I will use for future coding and design work that I do. I will leverage all of the knowledge I have gained in this course to advance my content creation and coding for emotional and responsive design.
I feel the class in well-done and provides good information to enable learning web design and coding. I think one suggestion that I have might be to have a lab environment on a regular basis for web coding. This may have helped save some time when trouble-shooting. Although I realize that I have actually learned a lot through this process and also learned more effective ways to troubleshoot a problem.