Advertisement
Site Elements

Designing a Modular User Interface Kit in Photoshop

by

The role of Photoshop in web design is becoming more modular. Instead of composing a pixel-perfect layout of an entire web page, it's perhaps more sensible these days to concentrate on general styles, color schemes and specific interface elements. Today we'll be looking more closely at designing UI elements, pulling together our own UI kit in the process.


Learning by Example

Before we get started designing our own collection of UI elements, let's take a look at some websites which are doing a great job with their interface. It certainly doesn't hurt to get some inspiration!

Exhibit A: Flow

Flow's UI

Flow's UI

Flow does a great job with their user interface. It's totally clean, vibrant - and just by looking at it you instinctively know what do do and where to go. Notice the great use of colors and icons which are incorporated into the web application.

Exhibit B: Gumroad

Gumroad's UI

Gumroad's UI

Gumroad has a great vibe going on with their interface. Not only is the interface fun, it does a great job of presenting information in a clean, concise and simple manner. Notice how the call to action buttons really leap out from the page.

Exhibit C: Squarespace

Squarespace's UI

Squarespace's UI

Squarespace takes minimal and clean to the next level. Without the use of colours, the interface still allows users to easily navigate through the dashboard. Notice how even though theres a lot of content, the smart use of shading makes all those numbers less intimidating.

Exhibit D: GoSquared

GoSquared's UI

GoSquared's UI

GoSquared's UI shows that content-heavy web applications can also leverage great design. With the use of modules the interface becomes clean and consistant. The great use of color accents also add to the UI. Notice how this type of interface lends itself well to customization; users can easily shift, remove, add or edit modules.


Creating Our Own Design

Now that we've taken a look at some existing user interfaces, it's time to take a crack at it ourselves!

We'll begin with the header.

Color Scheme

As we saw earlier, colors are very important when it comes to a web application; a color scheme helps define the atmosphere and makes the app easy to identify. Different colors also provoke different moods or themes (for example, Gumroad's playful colors suggest the web app is stress-free and easy to use), and they can be used to target different demographics (for example, bright and vibrant for a young audience, neutral and simple for an older audience).

Keep in mind that it might be best to choose a modest color scheme with colors that are easy to look at. Also, make sure you use contrast and different shades, as this helps define visual hierarchy and makes the content a lot easier to filter through, as seen in the examples above. As we don't really have a purpose for this app, we will be modest and choose a sophisticated, blue-gray color scheme:

Eight main colours we're using for our design
Eight main colours we're using for our design

Style

Being unique in terms of style is important for a web application; like colors, style is one way to make your application recognizable and stand out from the rest. Today, our focus will be on modern and simple. Although gradients are great on their own, adding textures and patterns can make elements stand out and create a more tactile experience. To achieve that effect, we will be using a noise pattern on the navigation bar and the buttons. Check out the difference:

Notice the difference the noise makes on the left? Simple, but effective!

Notice the difference the noise makes on the left? Simple, but effective!

In addition to the patterns, we'll use layer styles to tweak the buttons so that they not only stand out, but their states are also distiguishable. In the image above, you can clearly see that the 'Home' button is active.


Step 1: Setting up the Design

Without any further delay, let's fire up Photoshop! Start off by creating a new file that is 600px wide and 350px high (default web settings). Create a rectangle shape that fills the whole canvas and rename the layer to 'BG'. Since we have a background now, delete the default 'Background' layer. Next, change the fill color to #dde3ec.

Now, create a new rectangle shape that is 600px wide and 70px high, and align it to the top of the canvas. This will be our web app's navigation bar. It is important to keep dimensions in mind when designing, in this case, we don't want a navigation that is too big and intrusive to the rest of the app, so 70px is ideal.

Note: In a browser situation we may well be using ems to size our page elements, but when using Photoshop we need to stick to pixels.

Rename that layer to 'Nav Bar' and change the fill color to #303844. It's important to choose a contrasting color for your navigation element and make it stand out from the background. In this case, we have a light blue background and a dark blue-gray navigation bar. Lock the positions of both layers, just so they don't shift accidentally. Here is what you should have at this point:

Web App UI Step 1

Step 2: Creating a Noise Pattern

Before we start adding styles to our navigation bar, we'll simulate the noise pattern that I mentioned before.

Create a new file that is 100px wide and 100px high (default web settings). Create a new layer, select the whole canvas (cmd/ctrl + a) and fill it with any color (cmd/ctrl + backspace). From the menu, navigate to Filter > Noise > Add Noise. Set the noise amount to 400%, the distribution to Uniform and make sure Monochromatic is selected. Here is how it should look:

Web App UI Step 2

Once you have that, go to menu, Edit > Define Pattern, name the pattern 'Noise' and click 'Ok'. Now, you have a noise pattern that you can use to style elements! There are a lot of great resources online that provide patterns for web use - try experimenting with them to create a unique look!


Step 3: Navigation Bar

Returning back to our web app UI PSD, go to the layer style options for the 'Nav Bar'. Using some layer styles, it is easy to add some great effects this simple shape.

We will start off by adding a 1px stroke outside the layer, with the fill color #000000 and the opacity at 100%. This will give us a defining line separating the element from the background.

Next, we will add a drop shadow to the layer: blend mode as normal, color as #000000, opacity as 58%, angle as 90 degrees, distance as 1px, spread as 0px and size as 5px. This drop shadow will lend a nice effect highlighting the navigation bar and making it more prominent.

Next, we will add a inner shadow: blend mode as linear dodge (add), color as #ffffff, angle as -90 degrees, distance as 1px and choke and size as 0px. This linear shadow adds a 3D effect to the navigation bar and just adds a bit more to the design.

Our navigation bar looks a little flat (nothing wrong with that, bny the way!), but let's add a gradient: blend mode as overlay, opacity as 20%, default black to white gradient, style as linear, and angle of 90 degrees. To help our gradient out let's add the pattern we were working on earlier: blend mode as overlay and opacity as 1%. Here is what you should have:

Web App UI Step 3

Step 4: Buttons

Active Button

Now that our navigation bar looks great, it's time to add some items into it. The design of the buttons is quite important to an interface's design - they are used a lot and need to be both distinguishable, functional, and representable of the brand. 

Distinguishing between different button states is also important - the user needs continual feedback, so by altering the layer styles a bit, we can create various states. We will start off by creating the active button.

Create a new layer 'Nav Button Active' with a rounded rectangle shape: width of 100px, height of 40px, and a border radius of 4px. Again, dimensions are very important. The width and height of the button relies on many factors such as the dimensions of their parent elements, the amount of text and the size of text. Position it vertically centered, with respect to the navigation bar and 40px from the left of the canvas.

Set the fill color to #90a2c3, the fill opacity to 25% and open up the style settings for the layer. Once again, create a stroke that is 1px outside the layer, has an opacity of 100% and has a fill color #000000. Next create an inner glow: blend mode normal, opacity of 13%, color of #000000, choke of 0px and size of 4px. This inner glow gives us the 'pushed in' effect.

Now, for the drop shadow: blend mode of normal, color of #ffffff, opacity of 10%, angle of 90 degrees, and distance of 2px. This drop shadow adds further to the pushed in effect.

Next, add a gradient: blend mode normal, opacity of 6%, default black to white, linear, and an angle of 90 degrees. Just as we did with the navigation bar, add a noise pattern with the blend mode overlay and opacity of 2%.

The result is a button that has an intuitive quality to it; without even looking at the other button states, a use can immediately recognize that whatever text in that button is referring to content that is actively on the web page.

Button Text

Text is equally important on a button; keep in mind that it requires breathing room based on the size of the button you choose as well as the amount of content you wish to display in the button.

Create a new text layer named 'Text Active'. Set the color to #f3f5f9, font size to 12px and font family to Helvetica Neue.

Note: Helvetica Neue is present as a system font in many versions of OS X, bu not so for Windows. You may prefer to use Arial for this UI kit, as it's more widely available to the end user.

Add a drop shadow: blend mode as overlay, opacity of 35%, angle of -90 degrees, distance of 1px and spread and size of 0px. The sans-serif text now looks like it is pushed in with the active button. Finally, center the text with respect to the button. Here, what we have is a rather simple text inside the button, but using a color that is consistent with the theme and a simple drop shadow, it enhances the content and makes it a lot easier to read.

Web App UI Step 4-1

Normal Button

Now, let's create a normal styled button for items in the navigation bar that are not active. It's important to maintain the theme of the other button state, but also change the styling so that it is suitably different from the active state.

Duplicate the 'Nav Button Active' layer as 'Nav Button Normal' and the text layer 'Text Active' as 'Text Normal'. To make the normal state button look different, we will inverse that pushed in look and style the button so that it looks like it is pushed out of the screen. This not only makes it stand out, but lets the user know that it can be selected. Start by changing the button fill color to #c2dcff and fill opacity of 5%.

Also, change the drop shadow: blend mode of normal, color as #000000 opacity of 10%, angle of 90 degrees, distance of 2px. Next, change the inner shadow: blend mode of normal, opacity of 25%, color as #ffffff, distance of 1px. Now, add an inner glow: blend mode of screen, opacity of 7%, color as #ffffff and size of 3px. Finally, change the gradient opacity to 13% and remove the pattern overlay. The result will be a button that's a bit lighter than the navigation bar, standing out with the help of the drop shadow and stroke.

Differentiating the text color and styling is another way you can make states look different. Change the text color to #e8ecf3 and the drop shadow so that the opacity is 50% and the angle is 90 degrees.

Web App UI Step 4-2

Power Button

Instead of giving the user a boring 'Login' button to click on, why not change things up and have a power icon instead? Doing this will add something creative and unique to the design, whilst also allowing users to quickly distinguish the login button from everything else. Start off by duplicating the 'Nav Button Normal' Layer to 'Nav Button Login'. Adjust the size of the shape so that it is a 40px by 40px rounded square. You can do this by using the direct selection tool, selecting the 4 points on the right side of the shape layer, and shifting them to the left so that the width changes to 40px (shift + <). Use this method rather than transforming the shape layer, as that distorts the rounded edges.

To create the power icon, create a series of shapes on one layer named 'Power Icon'. First, make a 16px by 16px circle. Next, subtract a 12px by 12px circle in the center of the larger one. This should give you a 16px by 16px circle that is 2px thick. Next, subtract a square 6px wide aligned to the top center of the circle. Finally, add a 2px wide, 8px high rectangle centered with respect to the subtracted square and aligned 1px above the highest point of the circle.

At this point, you should have one shape layer with the power icon. Change the color of the power icon shape to #ffffff. Open up the layer styles and add a drop shadow: blend mode of overlay, color as #000000, angle of 90 degrees, distance of 1px and spread and size of 0px. Then add a gradient: blend mode of normal, opacity of 10% and default gradient of black to white.

Finally, align the login button icon to the center of the login button and align the button 40px from the right of the canvas. Here is how the finalized navigation bar should appear:

Web App UI Step 4-3

Even though we used the same styling for the this button as the other one, replacing the text with an icon enhanced the overall design.


Step 5: Login Dropdown

We've established a great base for our web application's UI, but so far we've only designed buttons and backgrounds. Let's try to expand the UI by adding a dropdown login interface. This will give us a chance to create some form elements and buttons styled for different backgrounds.

Base Design

Let's first make a new rounded rectangle (4px border radius as before for consistency) that is 300px wide and 200px high, naming it 'Login Dropdown BG'. Next, add a triangle that is 14px wide and 7px high to the 'Login Dropdown BG' layer and align it 13px from the top right of the rounded rectangle. This will create a tooltip effect to the dropdown and represents a connection between the login button above it.

When we change the color of the login drop down to #ffffff, it doesn't exactly stand out from the canvas background. To make it stand about more we will add a drop shadow: blend mode of normal, opacity of 25%, angle of 90 degrees, distance and spread of 0px and size of 4px. This gives us a subtle shadow to the drop down, making it not only more prominent, but also giving the effect that it is hovering over the background. If you were coding this, it might be a good idea to add a short animation to add to the floating effect. Align this drop down shape 40px from the right of the canvas and 13px from the bottom of the navigation bar. Here is what we have so far:

Web App UI Step 5-1

Notice how the alignment of the dropdown is flush with the button? Consistency with position and padding makes the cleaner, and it is easier to code within a container.

Text

Now, add a text layer with the text 'Log in to your account, or create a new one.'. Change the font size to 12px, font family to Helvetica Neue (Regular) and the color to #92969b. To represent a link, change the color of the 'create a new one' to #5c6f91.

With respect to the 'Login Dropdown BG' layer, align the text 14px from the left and 20px from the top. We don't want to make the text stand out too much as we want users to focus on actually logging in, which is why a relatively smaller font size and lighter colors is a good idea.

Text Field

It's important to remember that our text field should fit with the theme of the design, but also stand out enough so that the users can recognize it and fill it in. Create a new rounded rectangle (3px border radius) that is 270px wide and 30px high and name it 'Text Field'. Notice that instead of a 4px border radius, we are using a 3px border radius for the text field. The reason for this is because the text field is within the dropdown and it would look awkward if the radius size was the same.

Change the fill color of the layer to #f9fafc and add a 1px stroke outside the shape that is the color #d3d8e1 (100% opacity). To add a bit of a highlight to the text field, add an inner shadow: color of #ffffff, opacity of 100%, angle of -90 degrees, distance of 1px and spread and size of 0px. I chose to change the color of the text field so that it stands out and doesn't blend into the background of the drop down.

Add a text layer with the text 'Username' (12px font size, Helvetica Neue Regular, color of #727d88) and align it vertically centered and shifted 10px left with respect to the text field. Align the text field 14px from the left of the drop down background and 18px from the bottom of the text layer. To create a password field, simply duplicate the text field layer and text layer and align it 12px from the bottom of the first text field layer. Here is what you should have at this point:

Web App UI Step 5-2

Notice how the sizes and positions of all the text and text fields look natural; you don't want to keep too much or too little space, but rather just enough for the content to fit comfortably.

Login Button

It's time to add a login button for our form drop down, but the button we created for the navigation won't exactly fit in with the design. This is because now, we are dealing with a light background and the styles used on the navigation bar will not stand out against the white background of the dropdown. Contrast is very important for an accessible interface.

We will create a secondary button style, one that can be use for the main content of the app and which also works well on light backgrounds. We will be using similar styling from the navigation buttons to style the login button, so that our style is consistant.

Start off by creating a new rounded rectangle shape (3px border radius) that is 90px high, 35px wide and name it 'Login Button'. Change the fill color to #a3b2cd and add a 1px stroke outside the shape layer that is the color #7b8da4 (100% opacity). Next, add a gradient overlay of 25% opacity, with the default black to white colors. Finally, add a normal inner shadow with the color #ffffff, 45% opacity, angle of 90 degrees, distance of 1px and spread and size of 0px.

For the textual content, create a new text layer (12px size, Helvetica Neue Regular, color #ffffff) with the text 'Login', and add a drop shadow: blend mode of overlay, color #000000, distance of 1px, and spread and size of 0px. Align the text layer to the center of the login button.

Just like Gumroad's design, we want our users to know exactly where to click after they fill in their login details.

That's it with our foundation UI design!


Expanding the UI

After a couple of layers and a couple more layer styles, we have completed the design for the foundation of our web app's UI! With what we have, you can get a feel for the theme, style, colors and elements of the user interface.

Building Further

With all the ground work we've done, it's relatively simple to continue designing more elements. We have laid out the color scheme and style of our design, so all that is required is to make more shapes and tweak the colors/layer styles. Essentially, once you have foundational design elements, you can lay out significant modules from your application.

The best part about creating a 'sample' UI is that it doesn't require as much effort as if you were to create a complete UI set. Let's say you aren't happy with the direction the UI is going - it's better to walk away from a small collection of elements rather than throwing hours of work down the drain. This workflow approach also allows you to explore a bunch of different UI themes and choose the one that's perfect for your app.

Related Posts