Final Project for WEBD480 - Web Design & Development Practicum - Fall 2020

Final project for my Web Development Degree - December 2020

Table of Contents

• Objective
• Process Outline
• First Draft and Changes to Make
• Second Draft
• Final Review and Live Site Link

Objective

This course is designed to provide you with the opportunity to enhance and showcase your knowledge and skills that are directly related to and support all aspects of web design and development. During the course, you will choose one of two scenarios and then design and develop a website based on the scenario. While the organizations in the scenarios differ, the basic requirements of the stakeholders in the projects are nearly identical. The organizations are seeking websites that will attract and engage visitors. They also desire websites that can be easily updated, preferably in-house or as part of a low-fee service agreement.

This repository contains the final code for the finished website, as well as assignments written each week for each step of the outline, including a mock proposal, sitemap, style guide, and blog post.

Process Outline

1. Meet the clients and choose from one of two organizations to conduct your project with (fictional);
2. Create a website questionnaire for the client;
3. Create a proposal and contract;
4. Determine appropriate audience for the site;
5. Create a sitemap;
6. Create a style guide;
7. Adapt a logo change to your current designs;
8. Determine if content will be in-house or outsourced;
9. Submit the first draft;
10. Create a video showing the current status of the website;
11. Determine an appropriate CRM service for the client;
12. Add a blog per the client's request and submit a blog post template;
13. Submit the second draft and include security measures, including form validation;
14. Reflection and site launch.

First Draft and Changes to Make

The client I decided to choose was an animal shelter. They asked for a site that could provide listings for available animals for adoption, as well as a calendar of events, forms for donations and sponsorships, and a blog.

Sitemap

Style Guide

Style guide was later adjusted to a change in the logo that removed the teal color. Primary color ended up being orange, with the secondary color staying beige.

Prototype/First Draft

The prototype was submitted with a workable draft of the homepage.

Changes made included overall layout design to the pages to make them more cohesive, as well as including a blog section to the site.

Second Draft

Second draft was a submission of the site being mostly completed. Blog was created on Wordpress.

Critique from fellow students included the following:

"First off, I really like the way you utilized branding colors. Your use of orange was consistent throughout the entire site, with headers, links, and icons. I also thought the artwork you used worked really well throughout the site. Did you create all those icons/artwork or did you outsource it? I think the site works great on mobile devices, but as you said, could use some work on desktop devices. I have found the use of css grids to be super helpful in creating responsive blocks or pages. You can check it out here if you haven't used it before: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout (Links to an external site.). I also noticed that when hovering over the top level nav bar links the drop-down options are aligned to the left, which feels a little awkward to me (I'm used to them being either directly below or aligned a bit to the right). That may just be a personal preference to me but I found that my cursor didn't naturally drop in that direction. Finally, I think it would help to add "cursor: pointer;" to your hover effects on all of your buttons and links. This just changes the cursor to the pointing finger, which is a nice indicator that you're hovering over a link."

"I really like the design of your website it is very friendly and welcoming. All the images and icons are excellent, and the best part is how easy all the text is to read. Great use of contrasting colors especially with the text on the images. One of the biggest things I noticed when researching local real estate websites was the number of sites that would have text that was difficult to read.

My favorite page is probably help at the shelter, I love the images you used especially the one in the feeding and cleaning section. I did notice what you were talking about with the responsive design on this page, the images were going over the text when you bring it down to a mobile view. It seems like you are close though, just minor tweaks needed.

Really great job on everything, particularly with all the images, icons, and color choices."

Final Review and Live Site Link

Final review critique was the following:

"Overall, I loved your design and I think you captured exactly what FurFriends was looking for in a redevelopment.

Navigation was generally very easy, though I did notice a couple of oddities, like the first cat on the list linking to Buddy, a dog. Also, donate in footer led to 404. Site had tremendous visual appeal, with excellent use of graphics to evoke appropriate emotions, and forms were easy to read. There were a few spelling errors in forms. I would recommend a bit more consistency in font size on different pages, i.e. community events is large, but fostering is much smaller in comparison. Learn doesn't have any text, just a graphic. From a user point of view - users love consistency - this can work in a web site such as this one but using this same design for a commercial breeder with these minor differences, for example, would be something that could cause someone to go elsewhere."