Web Dev 2 will be focused on a step towards client work. You will work in a similar model as when you start out doing freelance work, finding small local jobs which need the help of a Web Designer, but don’t have the budget for a $10,000 site redesign from one of the big local firms such as Propeller in Burlington.
You are working for the Chittenden County Fish & Game Club. You are going to do some spec work for them. Spec work is speculative work that is done for free, often with the hope the client will choose the designer for the paid job. Spec work has also got a bad name as many designers think it devalues what we do to a “race to the bottom” mentality where the cheapest work wins, regardless of the quality. Interesting to consider both sides of the argument.
We are going to redesign the homepage only. This is what we will show to the client in an attempt to have a high school student land this job.
As you can see we are going to have some issues.
First – it is non-responsive. In 2019 there is no reason responsive sites shouldn’t be the standard everywhere.
Second, it is not valid. By using the W3C’s validation service we see there are problems with the code. Problems with the code can lead to many different issues including browser compatibility. It is our goal to have an error free website. You can also see in this design there is the mixing of style rules in the html. This is a big no-no in 2019. Ideally, we are going to have:
- Structure in .html
- Presentation and design rules in .css
Finally – the visual aesthetic is not what it could be. The owner of the Chittenden County Fish & Game Club want their new design to be heavily influenced by a page on the Vermont Department of Fish and Wildlife Website. It makes sense that these organizations share visitors, and the Vermont site is pretty darn good aesthetically and works responsively. (Yes the have errors themselves, that can be our next job).
What we have is the floating page design we have been working on in class. Mimic this type of a design for Web Dev 2. Whatever info currently shows up on their Homepage, shows up in your redesign.
- All content which shows up on Homepage of existing Chittenden County Fish & Game Club must show up in your redesign. Call your .html file “index.html” and organize all other assets accordingly.
- The right-hand vertical navigation bar on the existing site (starting with News and Events) must be redesigned to display as a horizontal desktop navigation (inside of <nav>) and be vertical for mobile.
- Use any and all html5 tags you need to redesign the layout appropriately.
- All outbound links must work.
- Fully Responsive
- Use a Google Font for Display Text – determine as a designer what makes the most sense based on the theme of the business. No Comic Sans, No Smiling Jim, John, etc.
- Valid html5 – this may mean you have to research HTML Special Characters to learn how to make the “&” symbol in the name of the business. Good to know.
In terms of the visual aesthetic, notice the blurred background image of the Vermont Fish and Game Website. Your client wants this as well. We are going to blur an image which fits with the theme of the business and place that in the background. Find out how to control the background image so that it appears once in the background of the new layout.
We are going to use Unsplash to get some free imagery. Unsplash images are free to use, even for commercial purposes. It is a good place to look when trying to find inspiration or imagery to use when you don’t want to spend the money or time to get high quality photos.
You are going to upload this project to your “webDev” folder to a folder called “week_02″. Upload your website to this folder (using an index.html). Make sure that you upload css / images folders and other assets.
- Assigned Wednesday, March 6th (at noon)
- Due Wednesday, March 20th (3pm)
Questions ask early. I do not help students the day the assignment is due. If I did this it would:
- Encourage a “last minute” work ethic.
- Take away from working with the other students because YOU are unorganized. We need to weed out the lazy, unmotivated people in our industry.
Check out the myriad of resources available out there. Here are two that I use for 99.9% of my questions.
There is also W3Schools, and it isn’t terrible, but not as robust as the others. You need something quick, don’t shy away from it, but the depth of the explanations and documentation is lacking.
Email me as well! You know I have no life.
Finally – welcome to college.