Aviat Studios Version 4.1 already !

Say what? Aviat Studios Version 4.1 already? Exactly… I’ve been intermittently working on this update for the last couple of weeks. Even though version 4.0 of this site came out in November of last year and the fact that I mentioned this would be the version I’m sticking with for quite some time, I already had one or two things in mind I wanted to implement in my design.

I’ve never been here, what did the old Aviat Studios look like?

Not too different from this version except with inappropriate padding and margins in some places, less readability, no catering for resolutions over 960px resolution sizes, ugly social media icons, incorrectly sized buttons for touch screen devices, removal of unnecessary borders on some images throughout the site etc… Basically I corrected all the things I wanted to take care of when version 4.0 was released and beyond. Once I started re-fiddling with the CSS I just couldn’t stop so easily. Enough rambling! A picture is truly worth a thousand words, and in this case you’ll be able to appreciate the subtlety of some changes.

The Home Page Comparison

Home Page Website Screens

As you can see in the image above, right off the bat we’re able to notice the rearranging of content in the output of the loop. I chose to display the thumbnails horizontally and take up the whole space instead of using a smaller square thumbnails. We can also see that the excerpt is styled differently with a different font color and font size, making it much more readable. The social media icons have been replaced with new ones designed specifically for this site, and I’ve released them as a freebie by the way, you’re welcome =D. Finally we notice a difference in styling on the search form, basically I squared everything up. Almost forgot! I replaced the background noisy texture with a much more subtle repeating pattern.

Single page Top Comparison

Single Page Website Screens

In this screen capture we can really appreciate the readability differences between the two version along with the added benefit of catering for 1280px resolutions. The side navigation menu was altered to provide each link with a bigger surface area thus ameliorating the navigation performance overall but in particular with mobile devices. We can see that not much has changed concerning the popular posts widget.

Mobile and Tablet Size Comparison

Mobile Size Website Screens

Finally we get to where a big percentage of the total work has been done, the mobile devices. Let’s start from top to bottom shall we? The logo has been reduced to fit these resolutions better. I’ve given extra padding to the top and bottom the responsive menu for those with awful hand and eye coordination. I suppressed the image slider for these resolutions as they give no real added benefit. I did however retain the thumbnails in this version as their new size copes well with the resolution changes. I then added a bit of top and bottom padding on the pagination element, again to help with navigation efficiency (I could have probably made each individual button a bit bigger and add extra padding… Further testing will dictate this edit). The whole sidebar then slips underneath, no change here from what we’ve seen with the previous image. You’ll then notice that there is practically no difference with the footer elements.

Conclusion

There are a few more differences included in this design update but there’s no point in listing them all one by one… I’ll give you, the readers, a opportunity of discovering them progressively as you keep on visiting this site, by the way thanks to all who do and leave a comment or two, it really is my motivational source on keeping the updates coming. Any feedback on some cross browser issues you’re having would be extremely appreciated! Don’t be shy and leave a comment, I’d love to hear what some of you have to say about this new design update. Constructive criticism is always welcome here!

Previous Post
Top Ten Items on any Designer’s Wishlist for Christmas 2012

Related Posts

Menu