Let's whip up a simple, yet effective 'static admin bar' in Photoshop. We'll take a selection of UI elements, and design their various states, ready for building in HTML and CSS.
Introduction
If you've used WordPress since v3.1 then you'll have no doubt noticed the ever-present admin bar which shows up on the front-end whenever you're logged in..
A simple, useful tool which enables you to jump directly into the admin without - you know - first going to the admin. Google are fans of the static admin bar too; it fits in nicely with the whole web-app thing. If you use GMail, Google Docs, Google +, you'll have seen this:
Even the Chrome browser sometimes has a similar toolbar in the footer..
And if you visit Themeforest, you'll often find authors using static bars to navigate their theme previews:
OK, so now we know what we're talking about, let's now think about some of the design aspects we need to consider.
Considerations
- We need our admin bar to be fixed to the top of our page, and as it's always going to be visible, we don't want it to take too much focus from the site itself. Granted, no actual users will see it, it's for our eyes only, but still. We'll therefore go for neutral colors, nothing too in-your-face.
- It also needs to be relatively narrow; a 500px high toolbar at the top of the page would be a little restrictive.
- It will also need to be quickly loaded, there's no point having it weigh down our resources. We're therefore going to keep images to a minimum. Actually, we're going to forget images all together and use a great @font-face tool for our icons.
Enough talk. Let's open up Photoshop (or feel free to create yours in Fireworks) and kick things off..
Step 1: New Document
Open up a new document, mine's 200x1000px, and add some guides to define your toolbar (70px high), your buttons (30px pixels vertically centered within the bar), plus a margin left and right of 20px.
Add a random texture to the main background, this represents your web page and will sit underneath the bar. Then, add a shape (black) with 85% opacity. This is the bar itself, and giving it a slight transparency will emphasize the fact that it's 'above' the web page content.
We're now going to add some common elements to the page. There'll be a few examples, but we needn't draw everything, just as long as we cater for all the states of our various items. With that done, the rest of the build can be done in the browser.
Step 2: Gravatar
When it comes to building our admin bar, we're going to pull in a thumbnail image using the Gravatar API. This will be present to illustrate to the user that they're logged in (that may sound obvious, but it's a useful reminder in case someone wishes to log out when they leave.)
In the meantime, I've grabbed the default gravatar image, and we're going to use this as a placeholder.
Create a rounded rectangle (U), with a border radius of 2px, between the guides as shown below. Hold down shift as you're dragging it, restraining the dimensions to square. You will have made a neat 30x30px square. Place the thumbnail image above it, right click it in the layers panel, and select 'Create Clipping Mask'.
I've added a dark drop shadow to the mask layer (double-click the layer to open up the layer properties) of 2px directly downwards. This will be a common state of many of our elements, which we'll see later.
Add some text to welcome the user (in this case Droid Serif Italic at 12px), and a more neutral label to allow the user to logout.
Step 3: A Note About Anti-Aliasing
When drawing shapes in Photoshop, you'll often find that the anti-aliasing (which makes everything warm and fuzzy) can take away some of the detail from your work. Let's demonstrate this now by drawing a simple square shape on our dark background.
It's perfectly precise, or so you think. Once zoomed in you can clearly see the blur along each of the edges. By removing these, we can clean up our image and achieve pixel perfection. Make a copy of the shape, and place it along side.
Very good. Now take the Direct Selection Tool (A) - the little white cursor arrow - and select the shape. Command and click to select two nodes along one edge, then nudge them inwards until you see a perfectly crisp edge.
Much better! The vectors are lining up precisely with the pixel grid. Now repeat this for the other three edges, making sure you retain the object's dimensions as well as possible.
OK, that looks much better, but the real difference becomes clear when we zoom out to actual pixels..
A delicate, yet significant difference. Bear this in mind when you're building the buttons during this tutorial, and the final result will look all the better for it.
Alternatively..
Avoid having to clean up any stray edges by first turning on "Snap to Pixels" in your shape options:
Thanks again to Jeff for pointing this out!
Step 4: Notifications Button
We've already discussed the general dimensions of our buttons, so moving on and building a few won't be a problem. We're now going to look at a free-standing (not connected to any other buttons) example - the notifications button.
In the same way we formed our gravatar mask, draw a 30px high rounded rectangle around some simple Arial 12px text. This button is going to illustrate a hover state, so we're going to place a well visible stroke around the rectangle, give it a solid background color, and (as we did with our gravatar) apply a drop shadow to give the button a raised look.
Step 5: Notifications Info
Another common UI feature is the numbered label denoting how many emails, notifications, updates etc. are active. You'll be familiar with these if you're a smartphone user, a mac owner, come to think of it - if you've ever opened a browser of any kind…
We're going to utilize this UI convention and give our notifications button a numeric label. We'll use a more striking color as the idea behind these is to catch the user's attention. A dark, bold Arial text with a pale drop shadow, set against a subtle yellow gradient should do the trick. Here's a quick look at the gradient settings:
Again, this is a small, rounded rectangle, with a 2px radius on the corners, and has a subtle drop shadow. We'll place it on top of our button, and to the right. Neat.
Step 6: Default State
Having created our button in its hover state, we should now deal with the default state. This will be less striking - clear, yet discrete. Copy the notifications button, being sure to keep each of your elements neatly within a folder of its own in the layers panel. Change the label text (if you wish) then dull down the color a little. Do the same for the stroke color, and remove the drop shadow.
Duplicate this button, because we're also going to use this one to demonstrate how grouped elements appear.
When we have a small collection of associated buttons (navigation buttons, for example) we should make the user aware that they're dealing with a group, and not just a row of random elements. We can use proximity, a technique by which unity in web design is achieved. We place objects close to one another so that their relationship is visually indicated.
As you can see, we've removed the rounded corners where our buttons meet. The rounded effect will only be evident along the outside edges of grouped objects. In a moment, we'll add another button between these two to further highlight the effect.
Firstly though, let's just look at how we remove the rounded corners. With our rectangle highlighted, select the Delete Anchor Point Tool, and remove the outer two nodes of the curve.
Next, select the Convert Point Tool, and convert the remaining two points to right-angles.
Bingo!
Having removed the rounded corners from one side of each of the buttons, you can now butt them up together.
Step 7: Icon Buttons
There's nothing like a set of quality icons to instruct users in the most direct form possible. On some of our buttons we're going to use icons instead of text - they look great, and they save on space. We can always use tooltips to verify what each one is for. Here's an example of two icons buttons, butted together, one of which demonstrating the hover effect:
As I mentioned though, we won't be using a single image during this tutorial (OK, apart from the gravatar thumbnail). Instead, go and grab the Web Symbols typeface from Just be Nice Studio. How nice of them.
It's beautiful, and comes complete in .otf format (for using on your system) and a web font kit for implementing into your web pages with @font-face. This means we don't have to use any sprites or single image files; we can just use characters and apply this font - brilliant.
In this case I've used the U and S respectively, but we can chop and change very easily when we're building. We can even apply effects using CSS, just as we would with normal fonts, but I'm getting ahead of myself here.. For now, just build a couple of buttons and use some of these great icons.
Step 8: Search Field
In much the same way as we've been working, build a search field. It's identical to the buttons in their default state (pale gray stroke, pale gray font color, no drop-shadow), except for the fact that it has no solid background.
Its adjoining button does however, and again makes use of one of our Web Symbols characters (L). Butt the whole thing up against the right-hand guide, as we're going to position it in the browser over on this edge.
Step 9: Extra Button
I thought it might be nice to include an extra button which draws extra attention, in case anything - er - extra, needs doing. A 'publish', or 'close frame' button, for example.
Again, we can make use of the icons, retaining the usual button dimensions and 2px rounded corners. This time, however, we use the same yellow gradient as we did with our notification number label, #f9d944 to #fee77f, with a stroke of #f9d944. The icon is dark gray #292929, just as with the notification, with a pale drop shadow.
Its hover state will, as expected, have a dark drop shadow just as with the other buttons.
Step 10: Menu
We're drawing to a close now, and have almost covered all possible states of our UI elements. We're going to add an extra button between our Settings and Profile buttons, this time to act as a drop down menu (note complete absence of rounded corners):
In the screenshot above you'll see the drop down visible, by definition then the button is active (or hovered over). The button takes on the appropriate state; highlighted stroke, lighter text, and dark drop shadow. I've used another Web Symbols icon ({) to denote that there's more content under the button.
The drop down menu itself needs to be visually associated to the rest of the UI elements, but needs to stand out. It will also be above any web page content visible at the time. I therefore chose to make it a simple white rectangle, with a drop shadow:
The light background binds it visually with the hovered 'menu' button, and the shadow helps it stand out from any other content. The highlighted hover effect on the drop down link is simply a paler shade of the yellow we've been using.
Step 11: Tooltip
There's just one little element which we now have to deal with; the tooltip (remember we mentioned that?) We're going to use it as verification in case the purposes of our icon buttons aren't immediately clear.
The screenshot above shows my first tooltip - perfectly clear, in principle, but I then realized that it was visually identical (aside from the little point) to the drop down menu. As that would suggest they somehow performed a similar role, I decided it better to take an alternative route. This is a tooltip; it should not be confused for anything else.
The second attempt is much more successful. It's subtle against our dark admin bar, but the highly contrasting text makes it very legible. All you need to build this little puppy is a black rectangle (no rounded corners this time, but that's up to you). With your first shape drawn, draw another, making sure you have the Add to Shape Tool (+) selected. This will bind your two shapes into one form, whilst retaining the individual vectors for editing:
With the Direct Selection tool (A) you can select the points of the second shape, and manipulate it separately. Resize it as you see fit, and rotate it 45°. You'll end up with something like…
Conclusion
The end of the road! Hopefully you'll have pulled together a UI design which meets your approval. In the next tutorial we'll see about coding this lot up into a browser-friendly, walking, talking static admin bar. Thanks for reading, I look forward to hearing what you think of this in the comments!
