Art Influenced Site-Full Process

http://photoinspired2.netlify.com/index.html

Above is a link to my art influenced site. I have made a few changes to improve it based on an in-class critique:

-fixed padding between text and image/sides

-fixed font along the navigation bar to match the rest of the page

-added hyperlinks to the gallery and article pages to show what they would look like


The process I undertook for this project has been documented in separate posts that I will link to and describe in this post as well.

The first step in this project was to decide which of our art and common themes we wanted to pull from and use in our site design. We were also tasked with finding an artistic ally; someone we aspired to be like, someone who worked in the same field, or someone who created art with the same materials and/or themes. For my art site, I chose to take a closer look at my photography and use some of the textures and themes seen throughout them. My artistic ally was Art Wolfe, American photographer who is best known for his nature and cultural photography. Since the photographs I had taken to look at were of animals and also incorporated highly saturated color, I found that Wolfe was a good match.

Influence



The next steps to this project were to go through an iterative process using Adobe Xd. I went through several draft phases to decide on a final design. The first draft I tried to focus on getting a layout that would not be driven by content. However, due to the use of an actual image instead of a placeholder image, it got a little confusing. I also tried using colors that were found in my photos, however the color scheme shown below was not working. The only texture came from a bar at the bottom of the page. The white bar with green text at the top threw the entire page off balance. My next draft was an attempt to address some of these issues.

Draft 1


This second draft took into consideration what was not working with my first draft. Once again in Adobe Xd, I went through my design concept and fixed some of the major issues. I added the white background with a lowered opacity to help separate the text from the background. I also added more texture to the site with the clouds and a second horizontal wooden bar, which in turn also helped to balance the site. The images were replaced with placeholder images, and the navigation bar at the top now has emphasis placed on the page you are currently viewing.

Draft 2


For the third draft, I took another look at my design. I decided against using the different colored and font choices for active pages. Having a hover state for each clickable and interactive piece was enough to emphasize what you were doing.

Draft 3

Advertisements
This entry was posted in Interactive and tagged , , . Bookmark the permalink.

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