Design Woop | The Web Design and Development Blog » Web Design

10 Useful jQuery Plugins For Enhancing Your Website UX

David — Mon, 30 Jan 2012 08:00:00 +0000

Incorporating jQuery effectively and modestly in your website build process is a great way to enhance and take your user experience to another level. Using jQuery plugins can be a great tool for helping display content to your users in a much more intuitive and interactive way. The jQuery community is fantastic, developers are consistently releasing new, quality jQuery plug-ins for us to incorporate into our websites.

In this post I will take show you a collection of jQuery plugins that are really useful for improving your overall user experience on your website.

Nivo Slider

The Nivo Slider is a fantastic jQuery slider plug-in, it is available in two formats, one jQuery plug-in is a dedicated WordPress plug-in and the other is freely available for all websites.

Isotope

Isotope is a jQuery plug-in that can add some serious improvement to how your users navigate content displayed on a webpage. The plugin makes use of some great jQuery effects to alter your content layout on a page.

FlexSlider

Another great yet simple to use free jQuery slider plug-in which is completely responsive and packed with tons of slide animations.

Mosaic

One of my personal favorite jQuery plugins for improving how additional content is served to a user is Mosaic. Mosaic automatically generates sliding boxes and captions, allowing slide and fade animations with custom directions.

Supersized

If you use big background images in web design, then Supersized is a jQuery plugin you should take a look at. Supersized is a full screen background slideshow allowing you to rotate through, pause/play and array of images that are set as the website background.

jQuery Image Parallax

The jQuery Image Parallax plug-in allows you to manage the animation aspects of a banner which you could use for your header or background.

jMenu

jMenu is a useful jQuery plug-in that allows you to create awesome menus that include unlimited sub navigation items.

Assign

Assign is a jQuery plug-in that lets you easily assign multiple keyboard shortcuts and events for specified functions.

Dynamic Tag

The Dynamic Tag form is a stylish way to enhance your tags inside a form input, try the demo its a great enhancement plug-in.

jQuery Tour

jQuery Tour is a flexible plug-in that can provide a stylish, high customizable way to provide your users with a website tour.

What Plugins Do You Use?

I would be interested to hear about some of the plugins you use on a regular basis, drop me a comment and I will add them to the list.

30 Inspiring Examples of Big Typography in Web Design

David — Mon, 02 Jan 2012 08:00:00 +0000

One of the most important aspect of modern and effective web and graphic design these days is typography. Good selection of font type, size and color can make your website look more interesting and attractive for your website visitors. Using large typography you will easily grab an attention of website visitors and it will be easy to impress them and send the message at the same time. You will see that huge typography is being used everywhere in the website, starting from header and finishing with footer.

In this collection you will find 30 inspiring examples of big typography implemented in modern web design.

Mo’s & Bows

Yamaha WaveRunners

Yugu

Deen

Isaias Mulatinho

Intellisult

Zachery Rodgers

Kantt

Avex Designs

Alex Malukov

Matt Koch

TribeCon 3

Gecko Imaging

Denis Fernandez Gridchin

Ashfall Design

Mairis Briedis

Love of My Life

Cesar Cabral

Fabio Neural

Kaleidoscope

SicanStudios

Team PAWS

Bear Grylls Live

Stephen Caver

Teixido

Clear Air Challenge

Zee

Urbanoff

Deren Keskin

Mark Hobbs

20 Pixel Perfect Travel Website Designs

David — Mon, 26 Dec 2011 08:00:00 +0000

Travel websites should be inspirational to the user, featuring large images, videos and written content selling the travel bug to the user. In this post I am looking at 20 perfectly designed travel related websites, some of these travel websites are destination specific, others are blogs and some are accommodation focused travel websites.

vTravelled

Travelllll

Tureta Travel

We Heart

i Avion

Design Hotels

Anndou Senegal

Go To China

Cottonseed Oil

Travel Is On

WHV makers

Une vie des voyages

Escapade Carbet

Travel Buzz

Bureau Fjord

Salzburg Parkhotel

57 Nord

Comfort Crew

Surf Camp

Cheval Blanc

30 Inspiring Music Websites for Design Inspiration

David — Mon, 19 Dec 2011 08:00:00 +0000

In every community there is a different story to be told and different artists to tell it. Musicians come from all walks of life and there are so many to turn to, novice or professional, that it can be hard to find new music that is worth listening to. In this day and age, it is important for an artist to stand out if they want to be noticed.

Unfortunately, just as with every art form, a certain look really goes a long way. It is not enough to just be talented and write beautiful music any longer, one must have a certain aesthetic to truly reach their full potential for an audience. A professional-looking website can go a long way in helping an artist come closer to their dreams.

Ellie Goulding

Family Force 5

Arcade Fire

Hanson

Hot Hot Heat

Passion Pit

The Kooks

Young The Giant

Lee Land

Phil Wickham

Yeasayer

Evan McHugh

Ingrid Michaelson

Brooke Waggoner

Cold Play

Derek Webb

Eisley

Red Hot Chili Peppers

Naked And Famous

Lady Ga Ga

Aaron Gillespie

The Radiance Effect

The Devious Means

Lights

Chris Cornell

The Exchange

Francesca Battistelli

Rocket Club

Jason Mraz

Mike Poss

Whether your client is a world-famous band or a local artist, a simple theme is important for their website. Attention to detail, easy page navigation, music inclusion, and informative content are the most important part of an artist’s site.

While some artists hire graphic designers to help create their sites from the ground up, there are other strong options for a full website with basic content. A popular trend for artists with music to stream is to opt for pre-made templates like that offered on sites like Bandcamp. Others choose to use blog site templates as their websites but no matter the option, the same goal is obtained: to share information, get noticed, and create a pleasant atmosphere for fans to remember.

A Showcase Of Creative Facebook Fan Pages

David — Mon, 28 Nov 2011 08:00:00 +0000

There are currently over 800 million active people using Facebook, an average user has over 130 friends making Facebook an incredible marketing tool for your business. A majority of websites link out to their Facebook fan pages making their page an extension of their brand and a great platform to leverage exclusive deals and connect with their customers and users.

Facebook allows you great flexibility in creating your own page, you can create advanced apps that integrate with your own website or choose from a wide selection of freely available apps to enhance the functionality of your Facebook page. Take a look at this collection of unique and creative Facebook fan pages that will hopefully inspire you to create your own.

At the end of this post I have included a collection resources, such as Facebook PSD’s and drag and drop apps, that will enable you to get started building your own Facebook fan page.

The Vermont Country Store

FITC Events

Cosby Sweaters

Meghan Fabulous

Allegiant

Ultimate Year Out

Eaglewood Resort

Filth UK

Party Lite

HK Anderson

Roots Canada

Garage

American Eagle

Banana Republic

DC Shoes

Adidas Originals

Vans

Zara

Burberry

Nespresso

Skittles

Oreo

Cranium

Facebook Fan Page GUI PSD’s

Here are some high quality Facebook Fan page GUI PSD that will help you get started designing your Facebook page.

Freebie: Facebook Fan Page GUI PSD (Smashing Magazine, 2011)

Smashing Magazine has released a free Facebook page GUI PSD mock-up that is 100% pixel-accurate, the PSD has 4 viewing modes (default wall, wire frame wall, default tab, wire frame tab), all layers labeled and grouped. Smart guides are included.

Free Facebook Fan Page GUI PSD (We Are Hike, 2011)

We Are Hikehave provided a clean, pixel perfect Facebook Fan Page GUI PSD. The PSD comes fully layered and ordered appropriately with the added bonus of being completely vector based.

Free PSD: Facebook Fanpage Template (Fuel Your Creativity, 2010)

Fuel Your Creativity has released a mock-up of a Facebook Fan page, the PSD provides you with completely editable layers such as editable text and posting times.

Facebook Fan Page Builders

PageModo

PageModo allows you to create and publish Facebook fan page in minutes, you do not need to design or coding skills to get started.

Fan Page Engine

Fan Page Engine allows you to use a simple drag and drop page maker to quickly and easily build your Facebook page.

North Social

North Social allows you to use highly customizable apps on your Facebook fan page.

10 Popular Mobile WordPress Themes

David — Mon, 21 Nov 2011 08:00:00 +0000

Responsive web design means adjusting and customizing your website design so it can accommodate screens of different sizes and display content to the user to make a better user experience. To make your website responsive to different screen sizes you should use fluid grids, images and queries, to do this there are many responsive web design tools available to assist you. You can see some examples of responsive web design in action in a previous post: A Collection Of Exceptional Responsive Web Designs.

In this post I am going to take a look at some of the available mobile WordPress templates available that will allow you to easily convert your WordPress theme into a fully responsive design that can display your content on browsers of all different size, including the iPhone and iPad.

HandHeld

Viewing your website on small screens like the iPhone or iPad can make the viewing experience can awkward. HandHeld is a mobile WordPress theme that solves this problem, it serves your mobile visitors an alternate design which has been optimized for the small screen. The HandHeld WordPress theme works alongside with your normal theme, and is only used when the plugin detects that your visitor is using a mobile phone.

Mobile Pro

MobilePRO is a beautiful professional WordPress theme for mobile devices, it comes with an intuitive, easy-to-use admin panel. The WordPress theme automatically detects your device, and resizes and reorganizes its components to make the best possible use of space.

My Mobile v2 WordPress Theme

My Mobile Page V2 WordPress Theme is a unique WordPress mobile theme with some great new features, the theme is 100 % customizable, fluid and automatically resized to every mobile resolution and has auto device orientation detection.

1st Giant Leap

1stGiantLeap Mobile is a HTML5 /CSS3 template designed to look perfect in all mobile browsers. The theme markup is device orientation (landscape/portrait) sensitive, so when you change device orientation by rotating it 90 degrees CW or CCW this template will look nice.

My Mobile Page WordPress Theme

My Mobile Page WordPress Theme is a minimal mobileWordPress theme. The WordPress theme features a modern look and lotsof cool features this can be the perfect pesonal mobile website for you. The theme uses automatic resolution detection so your site displays perfectly on small and big screen resolutions.

DotMobi

dotMobi is a mobile theme for WordPress. It can be used either as a standalone blog OR in conjunction with one of the many plugins that offer theme switching according to the users platform. The dotMobi WordPress theme can run straight out of the box with no plugin’s required to get it up and running.