Fundamentals of Interface Design

What you will need

• A paper and pencil.
• Adobe Photoshop.

Part One: Conceptualization.

What kind of website is it?

Ok so you want to make a website. . .but what is it going to be about? If you don’t know then making a website is impossible. Take out a piece of paper and a pencil and jot down a few ideas. Also think about what additional sections might be needed. For instance if you do a portfolio website, you’ll also need a contact page, and maybe even a news section.

Will your website grow?

Will this be a big website? If so, you need to consider the implications of growth. You’ll need to design it so that many people can access a wealth of information quickly and easily. You’ll also want to make it easy to add sections (while not affecting the content).

Branding

What about theme and branding? What impression do you want people to get from this? Do you want your website to be immediatly recognizable just from the look alone? Branding is a widely used stragegy in business, for instance the Apple computer company is recognizable in all their products by their elegant use of glossy white and smooth edges.

Also notice that they both share a similar name “iMac and iPod.” So not only are they branded through appearence but by name as well. Through this ingenius strategy they’re one of the most recognizable companies on the planet.

Who will be my audience?

What kind of people are going to be using your website? If you make a tutorial website like
pixel2life.com then it’s a fair chance that the majority of users will have larger monitors with modern browsers. In this case you could design your website to be larger and have some more advanced features (such as AJAX).

Take all these into consideration as you write down ideas for your website, it will make design and development much easier.

Part Two: What will your layout be?

In the web development world there a select few layout designs that have been considered the standard

Other Layouts

Obviously these aren’t the only layouts, try playing with four column layouts or something wild and crazy in flash.

Fluid or Fixed?

What kind of layout will this be? Fluid or Fixed? A fluid layout can adjust its size for any screen but has certain graphic limitations. A fixed layout is stuck at a certain resolution and my not be viewable on certain screens, but is much easier to design for. Think of your audience when you’re deciding this.

Part Three: Visualizing the Layout

Before I begin any work on a computer I sketch out some ideas on paper. This step is extremely important as it’s all about creativity. By sketching things out you don’t have to worry about any technical challenges beyond using a pencil. (If a pencil is a challege for you, you may want to try another tutorial first :p).

Sketch #1

This is my first sketch for the interface. I know I wanted a three column layout so I immediatly started with that. I liked the number of panels that I had but it still felt a bit off.

Sketch #2

I kept working with that sketch to see if it developed into something I liked. The more I worked with it the more I liked the placement of the panels but the less I liked the rounded edges. I also felt that the portfolio section could be improved.

Sketch #3

I started over on my sketch and finally came up with something I felt had potential. The portfolio section was greatly simplified and I sharpened the edges of the panels.

Sketch #4

Then I started to play with color composition. I hadn’t done much with light blue for a while so I decided to use that as my base.

Notice that these sketches are very loose and there isn’t that much detail at all. All these are is a tool to get ideas flowing in my head. As I was doing this I was already making final decisions about how I wanted the final website to look.

OK, now let’s open Photoshop. . .

Part Four: The Body

Open up photoshop and make a new document. Set its size to the standard 800 x 600 pixels.

Press U to select the rectangle tool, make sure that the Rounded Rectangle Tool is selected. Set the radius to 10px.

Draw a rectangle from the top left hand corner of the canvas to the bottom right of the canvas. Don’t worry about the color, we’ll adjust that later.

Change the Rounded Rectangle Tool to the Rectangle Tool. Click + on the keyboard (or click Add to Shape Area).Draw a rectangle at the top to remove the round corner. Note that the change of color is for demonstration purposes and yours will not look like that.

You should have a shape with round corners at the bottom and sharp corners at the top.

With the shape layer selected click the little F at the bottom of the layers palette to bring up the layer effects dialog. Click Gradient Overlay and apply these settings.

Click Stroke in the layer effect dialog and apply these settings.

It should look something like this.

Ok now lets add a footer.

Part Five: The Footer

Create a new Group in the layers palette, name it Footer.

Create a new layer in that group, name it Base.

With Base selected, Ctrl-Left Click the shape mask in the layers pallette to make a selection. Hold down Alt and drag a box to deselect to top portion of the shape. Fill that selection with 3c4549.

Draw a thin white rectangle shape over Base.

It should look something like this.

Part Six: The Header

For the header I wanted to make a slightly futuristic feel but also keep the feel of my current website.

Draw a rectangle at the top of the canvas and apply these layer effects.

Then draw a thin white rectangle and set its opacity to 28% It should look something like this

The Icons

I’m not going to cover how I made every single icon, instead I’ll show you my technique I used for one and then you can use that to make your own :).

I started with a sketch first.

Then I added paths in photoshop.

I pasted the image onto the header bar and added an outer glow filter.

With all the icons and text, it should look something like this.

The selected icon graphic was very simple, I just made a rectangle shape and applied these settings.

Then I drew a white shape on top of that rectangle and set its opacity to 14%

And this is what it looks like.

For the logo I already had the one that I made for my first website so I just grabbed that and resized it.

The font for the text was Arial. I also applied a light gradient to it. I’m going to leave this up to you. Have fun! :).

Your interface should look something like this now.

Part Seven: The Portfolio Menu

The portfolio menu is pretty straight forward. I wanted to differentiate the portfolio navigation from the rest of the site. I wanted the visitor to get the impression that this was a special navigation, separate from the rest of the site. I also wanted to keep it simple so that the user already knew how it worked.

With the portfolio menu it should look like this.

Part Eight: The Content.

Create a new rectangle in the middle of your interface. Fill it with effaff and name it Panel Base.

Give it a 1 pixel stroke with a color 869ca4 Set its position to Inside.

Create another rectangle.

Give it these settings.

Add the text for this panel and then duplicate and resize it to match the picture below.

The content is what really needs to stand out from the rest. So in this case I made the natural decision to make the content the largest portion of the layout. I also put the largest and most colorful images in this section. Notice that the icon images for my projects are not only bigger but also have a slightly different design from my tutorial icons. This says discreetly “hey. . my tutorials are cool but what I really want you to do is check out my portfolio.”

I really wanted the welcome section to stand out and I felt that text just wouldn’t do it by itself. So I made a globe surrounded by a wireframe to give it that “internet” feel.

A note about color

A good rule of thumb is to keep the color palette very limited. 4 or 5 colors maximum. I tend to pick a color theme (in this case blue) and use different saturations and brightnesses (is that a word?) of that color. If you’re lost as to what color scheme you’re going to use check out www.colorschemer.com he has great color schemes for you to play with.

Part Nine: The News Panel.

The News panel is very simple as you can tell. Just make sure that the date and the description are easily distinguishable. If you have any links in there, separate them out with a different color. I used orange. Isn’t it pretty?

Part Ten: The Tutorials Panel.

Another simple panel. I merely grabbed the tutorial icons that I made for my website and placed them inside the panel with their corresponding descriptions. When you have stock images like this it’s a good idea to create an icon template with all the styles saved so that you can simply apply it to the new image.

Icon Template

I created a PSD file with all my styles and graphics that I wanted applied to my icons. Then is was just a matter of applying it to my icons.

Part Eleven: The Result

Put all these parts together and you get this!

Click for a larger view

Conclusion.

I hope this tutorial was helpful, feel free to post any comments or questions. (Or contact me directly).

Also I’m accepting requests. If any of you have a question about Photoshop or PHP and would like to see a tutorial, send me an email. Make sure that you put “request” in the subject.