Sure we provide you with free web design elements, but how can they be used to help you with design? Today I want to show you how to use these freebies to improve an existing website.
This is a post I have been excited to do for awhile now. I am going to take an existing website, and show you how using our freebies can convert the design into a much better product. I hope you’re excited as me, so let’s get started.
Outdated to Fresh in 5 Easy Steps
The website we are going to be working on is http://www.grainbindirect.com/. This is a website we built at YasTech eons ago (we’ve come a long way from then), and if you check it out, you’ll agree that it is dated and needs a facelift.
Step 1: Add a Slider
Most new websites take advantage of using a slider to present more information on their home page. So I’m going to take our freebie, Slider One, open it in Photoshop and convert the colors to match this website. I will then be able to replace the top image that appears on the site with this slider:
If this is a slider you think you’d want to use on your website, here is a great jquery slider plugin you could use to help you code this slider.
Step 2: Updating the Menu
The menu on this site is atrocious. I don’t like the placement or the outdated CSS that was used to build it. I’m going to start by downloading our Tabbed Navigation freebie and modifying the colors again to match the colors of this website.
This menu style works better near the top of a website, so I’m going to move it up into the header like this:
If you want to use this menu on your website, here is a great link that contains the CSS you will need to code this menu:
Step 3: Add a Call to Action
Grain Bin Direct wants their clients to call them to get more information. Our recent Call-to-Actions buttons are perfect to help me bring a strong call-to-action to this home page.
Step 4: Highlight Slogan
At the bottom of the home page is a slogan that should stand out. I chose to tackle this design improvement with my Dark Ribbon Set. The long ribbon works great to help the slogan stand out. I darkened it a bit to fit the theme better.
Step 5: Add Social Icons
Most small businesses have a presence on many of the top social media sites. Adding social media buttons into the footer of this site will make these icons appear on every page of the site. The Minimal Social Meida Icons work best for this design. I scaled them to fit this theme and placed them in the footer.
I think you will agree that the finished product is a huge improvement over the original. Other than the menu and the slider, these improvements are as easy as adding background images or creating css buttons. Since all our freebies are customizable in Adobe Photoshop, you can easily modify the colors, text and size of our freebies to fit your needs.
So, do you think we’ve been able to improve the design of this website with our freebies? Would you do something different?
If you’ve used our freebies in your website projects we’d love to see. Add the link to your website in the comments below or email us a snapshot of the design you’re working on.
Should we do this again?
I really enjoyed putting this post together. If you think you’d like to see another post like this, let us know in the comments below. If people really like it, we’ll definitely do another and maybe even make it a monthly feature. Also, if you have a website that you think needs some work and think we might be able to use it for a post like this, send us the link and what you’d like to achieve with a redesign. If it is something we’d like to take on, we’ll build a redesign post with your site and you’ll get a free redesign!