Advertisement
Site Elements

Create A Simple User Interface Kit From Scratch (Themeroller + FW Phase!)

by

Last week, we took a look at how to create a simple user interface kit in Photoshop as a way to expedite work in some of your web design projects. We got a lot of requests for how to make the elements functional, so without further delay, here's the followup tutorial that you guys requested!

This tutorial is based on the design session that we walked through in this previous post (which includes a Free PSD file), so if you haven't checked it out, go ahead and do so now. If you want to skip straight to the functional part, that's fine too!


Two Ways

It goes without saying that pretty much anything on the web can be done in a variety of ways... so we're going to try something a little new today by showing you two different ways to achieve functionality with this design. The first is going to be with Tom Green

  1. Fireworks/Catalyst: Tom Green is going to show you how to make functional elements in Adobe Fireworks and Catalyst that can be used just about anywhere on the Creative Suite (from Flash to Flex to Dreamweaver).
  2. jQuery Themeroller: Brandon is going to walk us through how to quickly roll your own UI kit using jQuery UI's toolset.

Method 01: Build it in Fireworks

In this method, Tom Green is going to show you how to take the elements that we designed in Photoshop and make them fully functional elements in Fireworks and Catalyst. I'll let Tom take it from here:

Part 1:

Part 2:

Part 3:

Part 4:


Method 02: Using jQuery Themeroller

In this next method, I'm going to show you how to quickly create our styling using jQuery Themeroller. First, let's discuss why:

I'm a huge fan of recycling my own code... but I'm an even bigger fan of finding coding tools that have already been created for me by other (usually more experienced) coders! In fact, with so many pre-coded tools out there, it's almost silly to start any project like this from scratch unless you've got a really good reason to waste some time.

Now, we can argue over whether or not it's valuable for a web designer to learn how to code from scratch (and I would answer that it is, indeed, very important to know how all this stuff works), but this is a case where we're just creating a simple UI kit... so I'm going to assume that you've got some basic HTML/CSS knowledge under your belt and that you'll know how to open up these kinds of files and edit them in a text editor.

As such, I'm going to base this part of the tutorial on ThemeRoller - the official jQuery user interface creation tool. If you haven't used jQuery UI before, that's completely fine, but let me explain why we want to use this instead of just the raw HTML/CSS:

  • Most of the UI elements that we'd like to have at our fingertips will benefit from the jQuery interactive effects.
  • jQuery is a widely adopted, browser friendly library.
  • It will allow us to instantly leverage everything that they've created... which means less testing, headaches, and frustration.

It goes without saying, but we'll only be using ThemeRoller as a foundation... we'll be adding our own custom styling tweaks once we've gotten a good starting out point.


Step 01: Starting Out with ThemeRoller

So, where do we start? We're going to hit the code hard in a minute, but let's start out on the ThemeRoller site by creating a skin that's close to our own styling. The things that we'll want to pay attention to are:

  • Colors: We'll be using the hexadecimal color values from our Photoshop design to create the UI kit.
  • Typography: We want all text styles to match our design.
  • Spatial Styling: We want all padding, margins, and rounded corners to match our design. (note that we won't be able to do much about this until the next step when we have access to the raw CSS)
  • Specialty Styling: We want all drop shadows, overlays, gradients, etc. to match our design... (note that this too won't be touched until the next step)

ThemeRoller only gives us a limited number of values that we can edit up front (background color, border color, text color, etc.), so what we want to do in this initial step is just enter in the basic color values from our design.

You might want to use your own colors, but what I ended up with is this (click the link to see my values in action):


Step 02: Downloading Our Custom "Theme"

From here, we just need to download the theme that we've just created. The "theme" is basically just a custom CSS file (along with a handful of images) that will be used, along with the basic jQuery scripts, to create our custom styled UI elements.

You can use your own color values obviously, but feel free to grab the download using the demo from here.

What you get it essentially this: view raw demo. It's a generic HTML page that's been generated to display the widgets that we just created... from here you can incorporate it into your own designs pretty easily.


Step 03: Using the Theme in Our Own Designs

In this last step we're going to take the custom demo that Themeroller provided us, and move it into our own HTML page. This is pretty simple stuff if you have any experience with HTML - we're going to start by grabbing the raw HTML that you need for your widget and drop it into a new HTML page that includes the proper file references (below) to use these widgets as you please. The files that you need to reference in the HEAD section of your HTML document are here:

  • css/custom-theme/jquery-ui-1.8.11.custom.css
  • js/jquery-1.5.1.min.js
  • js/jquery-ui-1.8.11.custom.min.js

Remember that if you're placing all of the Themeroller files into another separate folder to adjust your folder references appropriately. In our demo, the reference section looks like this:

<link type="text/css" href="jquery_themeroller/css/custom-theme/jquery-ui-1.8.11.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="jquery_themeroller/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery_themeroller/js/jquery-ui-1.8.11.custom.min.js"></script>

Each UI widget (ie: an accordion, or a slider) has two components that you need to remember:

  • Some raw HTML
  • A corresponding activation script

The HTML part is pretty easy - just grab it from the demo HTML file that you downloaded. You'll need to include the "activation" scripts for each of the widgets that you want to use as well though. In our case, this looks like this:

<script type="text/javascript">
			$(function(){

				// Accordion
				$("#accordion").accordion({ header: "h3" });
	
				// Tabs
				$('#tabs').tabs();
	

				// Dialog			
				$('#dialog').dialog({
					autoOpen: false,
					width: 600,
					buttons: {
						"Ok": function() { 
							$(this).dialog("close"); 
						}, 
						"Cancel": function() { 
							$(this).dialog("close"); 
						} 
					}
				});
				
				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					return false;
				});

				// Datepicker
				$('#datepicker').datepicker({
					inline: true
				});
				
				// Slider
				$('#slider').slider({
					range: true,
					values: [17, 67]
				});
				
				// Progressbar
				$("#progressbar").progressbar({
					value: 20 
				});
				
				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
				
			});
		</script>

Notice how each "widget" is activated with just a couple lines of code... we're not writing any of this ourselves (although advanced jQuery coders are welcoem to), rather, we're just grabbing the scripts that the demo provided for us.

The above list represents only the widgets that were shown in the demo though... jQuery UI includes quite a few more that aren't shown here. If we wanted to add another widget, we'd simply find it inside the "development-bundle/demos" folder (from the theme download) and grab the corresponding script and HTML from there.

For instance, the HTML for a progress bar looks like this:

<div id="progressbar"></div>

And the activation script that we'd add to our other scripts looks like this:

// Progressbar
$("#progressbar").progressbar({
	value: 20 
});

Finally, let's take this for a spin in a quick custom design that I whipped together:

Whallah! There's probably nothing mind-blowing going on in terms of the design (it's intended to just be a simple demo), but we've now successfully demonstrated that we can quickly create a skinned set of UI elements using Themeroller and move them into a custom HTML page in just a few quick steps.


Where to Go From Here?

This is just the starting point of where you could go with this... obviously, to make these UI elements actually do something like storing data or sending a web form, you'll need to integrate additional coding (which you can read lots of tutorials about over at our sister site Nettuts). But for the purposes of this tutorial, we've created a quick skin that we can use in a variety of different projects.

It's also worth noting that if you aren't 100% happy with the skin as it stands right now, that you can go even further by adjusting the custom theme .CSS file that we referenced.

Related Posts
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    JavaScript & AJAX
    Ember Components: A Deep DiveEmber components retina preview
    Ember.js is a JavaScript MVC framework that allows developers to create ambitious web applications. Although pure MVC allows a developer to separate concerns, it does not provide you with all the tools and your application will need other constructs. Today, I'm going to talk about one of those constructs. Ember components are essentially sandboxed re-usable chunks of UI. If you are not familiar with Ember, please check out Getting Started With Ember.js or the Let's Learn Ember Course. In this tutorial, we will cover the Web Components specification, learn how to write a component in Ember, talk about composition, explain the difference between an Ember view and an Ember component, and practice integrating plugins with Ember components.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…
  • Code
    Creative Coding
    Using Selector-Query for Responsive, Column-Driven LayoutsSelector query 400
    We've all heard about media queries. We've used them extensively in our themes to make them responsive. They're great for most purposes, but when it comes to column-driven layouts, we sometimes need more control to make our designs stand out. In this article, you will learn about the Selector-Query jQuery plugin, and how to use it in your WordPress themes.Read More…
  • Code
    PhoneGap
    PhoneGap: Build a Feed Reader - Project StructurePhonegap feed reader@2x
    Although not specifically created to work together, jQuery Mobile and Cordova (also known as PhoneGap) are a very powerful duo to create hybrid, mobile apps. This series will teach you how to develop a feed reader using web technologies and these two frameworks. Over the course of this series, you'll also become familiar with the Cordova Connection and Storage Core Plugins and the Google Feed API.Read More…