Top Banner
Christina Moore Instructor Susan Duff Screen Design & Graphics January 5, 2014 Taylor County Boondocks Mud Park Website Redesign Project
13

Screen Design

Jan 27, 2017

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Screen Design

Christina Moore

Instructor Susan Duff

Screen Design & Graphics

January 5, 2014

Taylor County Boondocks Mud Park

Website Redesign Project

Page 2: Screen Design

Taylor County Boondocks Mud Park Project

https://www.taylorcountyboondocks.com

Page 3: Screen Design

Website Analysis

The Positive: The navigation of the site is easy to find and browse through. They have a

simple earthy color scheme goes hand in hand with the activities the park offers. The logo (a

mudding tire splattering mud) was well thought out and is a great representation for the park.

The site offers users a lot of information about the park, their events, and offers a wide variety of

documents to prepare any interested in attending or participating in the events. Images are

crispy.

The Negative: There are many issues with the current website design, like: high contrast,

disorganization, and redundancy in content.

The logo is displayed in a brown hue with a white background and a playful font but the areas of

text to the right of this are white background with strict black fonts. The scrolling text produces a

visual blur when you try to read it.

There are a lot of "Notice" "Click here" and "Attention" areas throughout the homepage and

other pages that are displayed repeatedly and designed poorly with an attempt to grasp the

user’s attention. You also see the forms of payment repeatedly and randomly on every page.

There is a bit of vertical scrolling that could be condensed by reorganizing as well.

The background of the page displays, what I would assume, past recreational ventures that

were held at Taylor Count Boondocks but behind the header the images overlap images and the

body hides most of the images, only allowing a small portion of the left and right margin to be

seen.

They display several videos and photos found throughout the site but only two videos on the

"Photos" tab and an animated image display that takes you to an external google images page

when clicked. When trying to view past photos, you’re taken to an external page and can chose

from several previous dates but instead of viewing the photos, you are directed to Village

Photography’s “Find Your Photos” page and greeted with the message “Sorry, we couldn't find

your pictures! The User Name: or Password: you provided was incorrect, or your photos have

not been added to our website. Please try again.”

Demography: The site targets fun-loving, adventurous, and extremists of all ages, races, and

genders.

Page 4: Screen Design

Taylor County Boondock’s Mudpark Website Redesign

Page 5: Screen Design
Page 6: Screen Design
Page 7: Screen Design
Page 8: Screen Design
Page 9: Screen Design

Website Rationale

The new grid is clean and clear and easier to navigate through. It offers versatility by the

change in the use of columns and rows throughout the pages of the global navigation but

regularity in headers, footers, and colors.

The redesign structure I chose is a hierarchical, which will allow users to browse freely, and

move to/from any other category without returning to the homepage or visiting following pages

in order to return to a previous category. This will work well for this site because the user

demographics are wide range, making their needs while visiting the page array. This structure

will allow parents to immediate navigate to the page addressing minor’s rules, the tourist visiting

town to browse images, or the committed racer to view upcoming events without the frustration

of navigating through useless information to find them.

The header and footer of the interface will display the same images and information on every

page to. This offers users consistency and familiarity.

You’ll notice a few things missing from the current homepage from my selected design. This is

because they were poorly designed elements that took away from the site’s appeal and were

found in other areas of the website.

I took out the scrolling next events type effect and placed Upcoming Events at the top right

corner under the header in a column to make the list of that month’s events just as noticeable

but only in one area. The checkered “ATTENTION RACERS” and textured camo banner that

offered FAQ were relocated to the same column as Upcoming Events. This column will share

an earth tone color that will alternate a lighter tone to a darker tone down the column.

The current arrangement has information about the Mud Park on the homepage and the fees for

the park on the About Us page. I moved the park information to the About Us page and will still

include the fees on this page. I kept the google map the site has incorporated but enlarged it for

easier viewing and will be adding instructions from different route positions to the written

directions area on the left of the map.

The park address will now appear in the footer positioned on the left side. This will make it easy

for users to find from any page within the site instead of searching for which page you

remember seeing it on while browsing due to its absence on the current Contact Us page. The

Contact Us page was removed because of the information being available on every page now.

The social networking image (Facebook) was randomly placed in the heading section of the

homepage prior and relocated to the center of the footer. The payment acceptance image will

be moved to the right of the footer and have the copyrights, Adobe Reader Link, and an

alternative link to FAQ under it in a small type.

I’ve added a single image to the homepage to welcome users. This will help any user initiate an

immediate feel for the park. The global navigation bar was moved to the top right of the header

and will be easily distinguished from its background image by a contrast color. I also added a

section for documents. The site currently offers their Rules and Regulations in a downloadable

Page 10: Screen Design

PDF format. The Rules page will still offer the PDF links but will be organized into three

columns and offer a little bit of text to make the area appear more professional.

This design concept will display Taylor County Boondock’s current content but in a more

functional way that creates balance, organization, and uses focal points to make areas

important instead of high contrast, animation, and redundancy.

Project Mood Chart

Page 11: Screen Design

Project Style Guide: Colors

BACKGROUND: Shadow #807145

WRAPPER: Twine #c2986e

CONTAINERS: Avocado #919160

Border: 3pt Solid Black #000000

BODY COPY: Black #000000

Background: Shadow #8a814b

HEADERS: Black #000000

Background: Shadow #807145

NAVIGATION: White #FFFFFF

Text Shadow: Black #000000

FOOTER FONT: Black #000000

Page 12: Screen Design

Project Style Guide: Typography

Project Style Guide: Images

Images will be shown in full color and surrounded with a

solid 3pt border of Black (#000000).

There will be a 30px margin surrounding the image.

Page 13: Screen Design

User Testing

During user testing, I learned that perception is in the eye of the beholder. The younger

generation was more interested in images than content, and parents wanted to be able to find

safety regulations and documents. Both agreed there was a satisfying balance between

information and images. One user commented they did not even notice the logo until prompted

to look for it with one of the questions, and that there wasn’t enough contrast between the global

navigation and the header background image. This made me revise the previous header

content by adding drop shadows and a slight stroke to both the logo and navigation tool bar. I

also formatted the global navigation in small caps to help improve readability. I presented it to

the user after and he agreed it was a good improvement.