This is round 2 of improving existing website designs with our PSD freebies. Many of you commented and told us you would like to see us do it again, so we did. If you missed round 1, check it out here.
Just like the last post we are digging up an website we built at YasTech ages ago and bringing it into this century. The website we are going to be working on is http://www.muirheadmfg.com/ and you’ll agree that it is indeed dated and needs a facelift.
Adding Freebies to Improve Web Design
Step 1: Adding a Slider
The slider I chose to use for this redesign was the one we created for Six Revisions called Ultra Sleek Accordion Slider. I chose option 3 of that slider, removed the bottom shadow (because we’re working with a dark background), and then edited the slider 1 content. To implement on this page I move my menu up under the logo and put the slider underneath it. This is the result:
If this is a slider you think you’d want to use on your website, I found a great jqery plugin and guide that will help you code this up.
Step 2: Updating the Headings
The titles on this page had a small screw icon next to them. I replaced that with our check mark icon and updated the font to Myriad Pro since the font that is there hasn’t been used for about 5 years now. You can download the check mark icons here.
As you can see, these headings look a lot cleaner.
Step 3: Update Link Text to Button
There currently is a read more link under the welcome paragraph. To make this a little strong call to action, I converted the text to a button found in our dark form ui kit. I had to update the button color to match this theme and it turned out good. You could also use CSS3 to achieve the same effect for the button.
You could use this style of button anywhere on the site where you have a call-to-action link.
Step 4: 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 add some needed color to this page. Our Dark Social Media Circle Icons work best for this design. I scaled them to fit this theme and placed them in the footer.
Step 5: Update Background
The current background on this site is a flat grey. I took on of our free Seamless Patterns and gave the background some texture.
I hope you agree that the finished product is an improvement over the original. All our freebies are customizable in Adobe Photoshop so this makes it easy for you to fit any of our freebies into your next design.
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. And as always, let us know what you think about this post and if you would have done anything different to this design.