Website Experimentation and Explanation of Aesthetics

Experimenting with design:

Earlier, I experimented with implementing a computer as the central visual aspect on my website. I thought I wanted the computer to have an interaction with the user because Erica Scourti discussed that people trust computers more and I wanted to simulate that. However, I thought about it a lot and I realized that was not happy with the way it looked. I also decided that this form of visual articulation wasn’t engaging enough. Thus I decided to experiment some more with the visual aspect of the website. The images below portray some of the experimentations that I have done in terms of design and aesthetics. I played around with the quiz question as well as the possible ways in which I could portray my theme in a game-like design. I used various designs by other creators that I have explored earlier such as Florent Hauchard and tried to construct something that would successfully articulate my theme while also being visually interesting.

Screen Shot 2016-10-30 at 4.53.15 PM.png

Experimenting with Color Palettes:

screen-shot-2016-11-15-at-12-46-51-am

Before I made any aesthetic decisions, I looked into the concept of how information on a web page is typically communicated to my target audience and found out that it is communicated through its perceptual elements, such as text and image (Djamasbi, Siegel and Tullis, 2010). Thus, creating a ‘visual hierarchy’ through the proper arrangement of these perceptual elements can naturally guide users in viewing the page (Faraday, 2000). For example, the size of an object is an important factor in its perceived visual importance—the larger the item, the greater its importance and, consequently, the higher its level in the visual hierarchy (Faraday, 2000). These concepts thus provide an insight into how images and graphics affect my target users and helped me understand their importance when making decision in regards to the visual appeal of my website.

Since my target users are people in the Generation Y group and they ‘they prefer a large image dominating the page’ (Djamasbi, Siegel and Tullis, 2010, p.310), I decided to make my homepage have a large image of two figures that are predominantly placed in the middle of the page. I think seeing something so visually striking will attract their attention and appeal to their preferred visual senses, thus making them interested in taking my quiz. Additionally, I think I will experiment with animating the lines behind the figures in order to have them slide into the page as the user goes on it. This could be a way of inserting an awareness of the medium as it assembles in front of the user.

After multiple experimentation, I have finally settled on a design that I think works the best. Once I established the visual placement on the page, I tried playing around with different colors in Adobe Photoshop. I feel like I can definitely see a difference in the effect that each color creates, which means that choosing the right color is vital to the articulation of my theme and the general success of my website. However, after trying different various, I haven’t really decided which color palette I am actually going to use in my website. I chose the top 4 color palettes and I decided that it’ll be a good idea to talk the people in my class as well as some friends in order to see which colors work the best at portraying my theme as well as which colors attract their attention the most and make them want to stay on the website more and continue with the quiz.

Bibliograhy:

Djamasbi, S., Siegel, M. and Tullis, T. (2010). Generation Y, web design, and eye tracking. International Journal of Human-Computer Studies, 68(5), pp.307-323.

Faraday, P.(2000). Visually Critiquing Web Pages. In: 6th Conference on Human Factors and the Web. Austin, Texas, pp. 1–13.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s