Smitty's Makeover

Overview

     To wrap up this year in web design we decided to take yet another web page and transform it using our finely tuned web skills. This time we chose a website that wasn't struggling, but just needed some work on content: Smitty's Lawn & Garden Equipment. This time, instead of just revamping this site the traditional web-design way, we decided to put a twist on things and test out a theory growing in popularity called Mobile First Design, where you literally design the mobile version of the site and work your way up to desktop. Now let's get into the process!

The Paper-Process 

     First, before even laying out any design was deciding which content was necessary and which was not. I used this chart below to start the process of ruling content out. 

     After going through my Discovery packet, which you will see a cover image of later, I figured out what the goals were for the site, what content would fulfill those goals and I began to form what the sight would look like in my mind.

    Next stop, designing time. I was provided with templates for a mobile, tablet and desktop design so I began with the mobile.

     As you can see above I created two designs to see which one I liked better. Keep in mind these are pretty rough sketches, where the squiggly looking links in the first design are actually chainsaws which you will see later. Below the designs I listed the order of the content that was pictured in the designs. From the start of the designing process I definitely already had a pretty good idea of what I wanted to do, which helped later along. After pondering over it, and asking the opinion of my peers, I decided to take the first design pictured all the way to publication. Now it was time to design the tablet and desktop versions. 

     The first thing you probably notice about the tablet design is that there is more content added. The one column grid design has turned into two and there is also more text to read about the actual company, something I thought mobile users would view as tedious. You will also notice that the "contact me" link has changed into the actual contact form, although I liked the idea of it I didn't actually fall through with it when making the actual website simply because it cluttered up the sight and if users really needed to contact the company I don't think they would mind the few seconds it would take to load the contact me page after clicking on the link. But overall, I kept the same look and feel to insure a smooth transition from each version.

     This is the version of the site where web designers would usually start out and spend the most time on, but I actually spent the least. The same "lawn" feel with the grass and chainsaws is kept but more company content is added. The two column is no longer a 50/50 focus but a 25/75 focus. I felt that desktop users would be more okay with having more company text on there screen because screen space isn't as precious for desktop users. I also added an ad because desktop users are much more used to ads on their computer, and some may not even see it if they have fell in love with Google Chrome's Ad Blocker as much as I have. But now that everything was laid out for me, it was time to dive head first into dreamweaver and make this design come to life.

The Digital Process

    It's time for the nitty gritty. At first I didn't really know where to start, but I was provided with information on a lovely HTML element called Media Queries. These queries allow you to have different CSS styles for different sized screens all in one CSS document. An example of one would be: @media (min-width:700px max-width:1000px). Then everything under that tag would apply to the site if the size of the window was within those parameters. I didn't use a media query for my mobile version because that was the one I was starting with. But I went ahead and made the other two for tablet and desktop and then I went into Photoshop and made all of the graphics I was going to use. This didn't take too long, and I then made the basic CSS, deciding which font family I wanted, font colors, background colors and laying out the divs and inserting placeholder content within those. Finally, after several tribulations with elements such as the visibility tag, display tag, margins, and making sure my website was as responsive as possible, the website was born! (and completed) 

     This is what my mobile design ended up looking like. As you can see at the top, I have the logo, address and search bar placed because I feel that they are some of the most important elements of the webpage. Next I have the links of the most important sections of the site on chainsaw graphics that have a hover effect to show that you have actually clicked (of touched) them. Then in the footer I have a "contact us" button that has a hover effect as well. Then under that I have the company info repeated as well as shipping information which I found on the site right above my copyright information. This is all encompassed in a "lawn-like" color scheme equipped with grass borders and all. Now on to tablet.

         There isn't too much to say about my tablet design because it is pretty similar to my mobile design. The only thing that is drastically different is the two column design with the company text added in the right column. This way tablet users can read a little bit about the company before navigating through the rest of the site. I also added an image, but besides the overall width nothing is too crazy different. Drumroll now....the desktop version!

     The desktop version is only the tablet version on steroids. The two add ons are the ad, which I pulled from the site, and the social media buttons at the bottom of the menu. The content is the main focus of the desktop site because generally, desktop users want more content. I could've added even more but I wanted to keep the website simple. In conclusion, I was really pleased with how my website turned out. 

Conclusion

     This project was definitely one of my favorites this year. I actually really enjoyed starting with the mobile design first, it helped me to realize the true necessary content that I needed to include. The process of the design helped me tremendously as well, starting with listing out what I needed, moving to the goals of the website, to drawing it up on paper to then creating it allowed me to make one stellar project. The work we did with responsive web design as well as fluid grid layouts was also an aid in this process, and I learned HTML elements that I will definitely use in the future. Happy designing everyone!!