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
- 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).
- 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:
1 |
|
2 |
<link type="text/css" href="jquery_themeroller/css/custom-theme/jquery-ui-1.8.11.custom.css" rel="stylesheet" /> |
3 |
<script type="text/javascript" src="jquery_themeroller/js/jquery-1.5.1.min.js"></script> |
4 |
<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:
1 |
|
2 |
<script type="text/javascript"> |
3 |
$(function(){ |
4 |
|
5 |
// Accordion
|
6 |
$("#accordion").accordion({ header: "h3" }); |
7 |
|
8 |
// Tabs
|
9 |
$('#tabs').tabs(); |
10 |
|
11 |
|
12 |
// Dialog
|
13 |
$('#dialog').dialog({ |
14 |
autoOpen: false, |
15 |
width: 600, |
16 |
buttons: { |
17 |
"Ok": function() { |
18 |
$(this).dialog("close"); |
19 |
},
|
20 |
"Cancel": function() { |
21 |
$(this).dialog("close"); |
22 |
}
|
23 |
}
|
24 |
});
|
25 |
|
26 |
// Dialog Link
|
27 |
$('#dialog_link').click(function(){ |
28 |
$('#dialog').dialog('open'); |
29 |
return false; |
30 |
});
|
31 |
|
32 |
// Datepicker
|
33 |
$('#datepicker').datepicker({ |
34 |
inline: true |
35 |
});
|
36 |
|
37 |
// Slider
|
38 |
$('#slider').slider({ |
39 |
range: true, |
40 |
values: [17, 67] |
41 |
});
|
42 |
|
43 |
// Progressbar
|
44 |
$("#progressbar").progressbar({ |
45 |
value: 20 |
46 |
});
|
47 |
|
48 |
//hover states on the static widgets
|
49 |
$('#dialog_link, ul#icons li').hover( |
50 |
function() { $(this).addClass('ui-state-hover'); }, |
51 |
function() { $(this).removeClass('ui-state-hover'); } |
52 |
);
|
53 |
|
54 |
});
|
55 |
</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:
1 |
|
2 |
<div id="progressbar"></div> |
And the activation script that we'd add to our other scripts looks like this:
1 |
|
2 |
// Progressbar |
3 |
$("#progressbar").progressbar({
|
4 |
value: 20 |
5 |
}); |
Finally, let's take this for a spin in a quick custom design that I whipped together:
- View Custom Design (before adding Themeroller)
- View Final Design (after adding Themeroller)
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.
