Dirt Tech is a local Jericho, Vermont company which will give us another client to work with – in this case a “Refresh” compared to a “Redesign”. This process of analyzing local business that need your skills is the same workflow you would do when trying to attract new clients in our industry. Find a need (people with web problems), fill that need.
Their current site is much better than the previous client we did a case study on, but there are still some issues. The main issues are:
- Invalid Code – for example their first error of 10 on the homepage has images without alt tags – making them out of compliance with the Americans with Disabilities Act (ADA)
- Non – responsive site. The site does not respond to different size devices – horizontal scrollbars! In 2018 this is really unacceptable, especially if a successful business is your goal.
It isn’t all bad:
The sky isn’t falling completely for them. Their logo isn’t terrible, and certainly “feels” like dirt with colors and font. We will keep it. Right click and open in new tab to get the full sized version.
They are also using a Web 2.0 style layout, so they industry standard in that regard. We will use that as our base.
Their gallery at the bottom is hit or miss. Hit in that it shows off their work, miss in that it isn’t clickable, the photos don’t get larger.
Compared to Web Dev 3 where we did an entirely different design, we are going to do a refresh and keep the design style of Dirt Tech, but bring it into 2018 with valid code and ADA compliance. Starting with a new file (don’t try to copy any of their code, it has issues anyway) rebuild their homepage – homepage only. It should look pretty similar (fix any issues with padding’s, margin’s, etc) but create something which is responsive and valid. This is a refreshed design, as compared to a redesign.
Assets for you to use:
As we have not got to this yet in our curriculum, please just use a print screen of their animated content as a placeholder for now. You can use the one below, or take your own. Try to time your print screen so the lead image in the gallery is a full image for presentation.
They also have a video – and the video has star wipes! I kid you not, watch it, it is within the first 6 seconds. The video is to be uploaded to your school YouTube account, and them embedded into the page. The video can be downloaded here.
Design notes to keep in mind:
- Keep the existing color scheme – use free subtle pattern resources (such as Subtle Patterns) if you are trying to create the texture of the top tan and gray bars. The pattern should be subtle, and make sense the the business. This would be a bad option to choose.
- You are going to use display:flex a number of different times in this project. At the very least I see you using it:
- on the wrap for the gray/red/gray boxes.
- for the “welcome to Dirt Tech / Brown box” row. You may use a separate section here. I likely would. If that is unclear come see me early and I can explain it to you.
Refresh their site, keeping their layout, logo, colors and assets. Simply bring into the 21st century web design best practices – including being fully Responsive.
You are going to upload this project to your “webDev” folder to a folder called “week_04″. Upload your website to this folder (using an index.html). All other assets (css folder and file, images folder and files) organize accordingly.
- Assigned Wednesday, March 28th
- Due Wednesday, April 11th @ 11am