Final Project Report

~ For Someone Special

Topic/Background/Introduction

Purpose/Mission

This website is a gift to my sister, Lisa, who has not only sacrificed, and served me throughout the years as I raised my children but, who also served our country as a member of the United States Air Force for twenty years. Lisa has always had a dream of owning her own custom designed clothing shop for pets and little girls. She would love to simply make the days a bit brighter weather it would be for a holiday, birthday, or just any day. Her outfits are unique and very well crafted. She works very diligently ensuring a lasting quality allowing for enjoyment for many years to come.

Goals/Objectives

Why does this website exist? Who is the target audience?

This website is designed to draw the attention of women who love to lavish on their Grand Daughters, and pets in beautiful, and fun outfits as well as anyone (primarily females between the ages of 15-100+). This audience will be made of people who may or may-not have the skills to make quality outfits but know quality when they see it. Quality is of utmost importance to the customers of: For Something Special. These items are of heirloom quality for lasting life long memories.

Problem Exploration

Questions for the Client

1. The client's goals. (listed above)

2. What color scheme do you have in mind? A: "Bright and colorful: Purple, Yellow, Green, Pink."

3. What is the overall feel you would like to accomplish with the website? A: "Fun, and inviting.""

4. What will determine if the website is a success? A: "If Lisa likes it. That is all."

Issues with bandwidth

The amount of pictures required to display the sampling of Lisa's work.

Scope of the website: Total pages, levels, page complexity, multimedia, etc.

The website meets Lisa's requirements at this time. When she is ready with more items to display there will be a need to update the website adding additional multi media, and images. At a later date there will also be an online payment method. Due to the client's availability she declined these elements.

Requirements Analysis and Specification

Browsers tested, Future Features, and Maintenance
Browser: Firefox Chrome Safari IExplorer
*Features: MasonryJS, Online Pay, Database, Contests
Maintain By: Forest View Web Designs Contact: Tina Bryan

All Future Features will be added upon Client's request.

Information Architecture, Organization, and Design

Website Architecture, Organization, and Design*

a. The background is an image made to fill the entire screen, static with a scrolling container with the information. By using the static background it allows a more pleasant look as users browse the material. (This information was given through feedback of draft.)

b. The organization of the website is by order if you were to walk into a store. Each page is linked from all pages allowing the user ease of use. With consistent navigation links the users do not need to search or struggle to find where they want to navigate to next or from where they came. (This is per request from user feedback of draft.)

c. The design of the website is primarily by the client. The look and feel of the colors and images are per the client's request. After the testing period there became a need to make some design changes. The colors of the links were requested to be made larger to accommodate elderly users, allowing them more ease in selecting links. To solve this the buttons were created along with a highlight that clearly defines the selection that is being made. There was also a request to minimize the colors used on the links to two colors. Black for the unselected and red for the hover. (This is per request from user feedback of draft.)

d. The site was tested with users ages 18 - 79; this gave a good range within the target group the client desires. The response was very informative allowing the changes to be made that satisfied the client as well as giving a more pleasant customer experience.

Testing, Maintenance, and Promotion Plan

*Please see above section that covers testing along with design.

The promotion of the website will be through Social Media.

Implementation and Reflection

a. In reflecting on the entire process of this project, this has been a great experience! I have a lot to learn and look forward to a life long pursuit to become a well-skilled Front-End Web Developer.

b. The difference between the "Big Picture" and the outcome has some differences but not on the client's side. The differences are from the developer's wishes. That was a wake-up call for me as I attempted to discus and 'twist my sister's arm' to implement more advanced methods. She didn't want it, and that was that. This is a client service industry. It was better for me to face that in the beginning rather than down the road with a real client. I found that to be a bit disappointing.

c. The difficulties were that there is so much information on the web that it took many hours combing through article after article, as well as stackoverflow. There are many ways to accomplish the same outcomes that it becomes very confusing to know which route to take.

Appendices

Usability Testing ~ Outside Resource for Testing via email & Facebook post asking for input.

    • Mac
      • Darleen Cox
      • Boy that is some jazzy music. :O) Is there a better picture of the flowers and the butterflies? I would love to plant that flower. I imagine Ray could tell me. He does love butterflies. I clicked on some pages there is a 'not found' or 'forbidden' that comes up for each page. They were not part of the assignment? What is "skip navigation" for?

      • David Maddox
      • It is looking good. Get some sleep!

      • Matthew Condra
      • The measurement link under the kids photo is the same as the dog YouTube video. I would either remove the 2nd link or try and find one that shows measuring kids/humans.

    • PC
      • Lisa Maddox
      • Love it, so fun to be the best part of your homework! Tee hee

      • Holly Cunningham
      • I would check grammar punctuations. I would move the pictures of the dogs under the pic of the veterans.

      • Matthew Condra
      • Couple of things I see on your site that will need tweaking. Your "nearby" link is connecting to google but it looks like the GPS parameters aren't set.

      • Tracy Parker
      • Looks great! One thing I see is that when you click on the various pages in the nav, the color change stays when you move on to another page. Do you know how to use the "selected" code to make them only be a different color when you are on that page?

  1. Page Validations as PDF's
    • W3C CSS Validation Service
    • https://jigsaw.w3.org/css-validator

  2. Other Documentation
    • Classmate Feedback via Discussion Board
    • 1. As far as your website goes I really like the layout and color scheme. The background really complements the web-page and all the vibrant colors. Some issues that I ran into on the site was when I clicked on the 'Missions' link it did not open a new tab in my browser. Your other links opened in new tabs so I feel the code for target="_blank" was accidentally left out on that document. The only other thing I noticed was that the links did not consistently appear as I went from page to page. For instance when I click on the 'Home' page I see a 'Nearby' link and then when I navigate to the 'About Lisa' page it changes to a 'Missions' link. Other than that I think you really have a nice website design. I hope the best for you in the remainder of the semester!

      2. Nice work on your web site, Tina. I saw several things on your web site which have inspired me to make improvements to my own. Some of the things I really liked were that you had a lot of different pictures, how easy your site was to navigate, and especially the favicon. The implementation of a sub-menu along with the "back to the top" links are especially useful and I think that's something I can work into my own design for my blog. One issue that I did notice was that some of the images on the "About Lisa" page were causing your text to fill awkwardly into the rest of the frame which made it hard to tell where the text was continuing. A possible solution might be to float all the images to the right so that the text flows more naturally on the left. Another possible solution might be to create a seperate div element for the text that way the text will be kept together instead of being seperated in odd ways. I like the colorfulness of your page also. However, I felt that it might be a bit too many colors going on to be able to tell easily which text was a link or not. That's just my own aesthetic so I wouldn't put too much stock in that advice however. I myself got the advice that I should add more color and a background image to my own page.

      3. I really enjoyed your website. I liked that you were able to make a very fresh and bright page.Your execution of the website is superb as well as your styling of the site.

Tina Bryan, Project Final Report