Web Interface:

20 Feb 2013

10

A Showcase of Beautifully Crafted, Free UI Kits

When building a web app it’s important to keep in mind how much of it’s success is built on having a thoughtfully designed, well laid out and instantly usable user interface. A bad UI can ruin an otherwise fantastic app, and can cause more people to abandon it. Of course, the opposite is true too – great UIs can encourage use, and can mean more sales and more people talking about and sharing your app.

19 Aug 2010

14

What You Need to Know about Cross-Cultural Web Design

How do you ensure your website will be well-received around the world? At Lingo24, we’ve learnt some valuable lessons about how affordable – and profitable – it can be to dip your toes into the foreign language internet by building websites optimised for different countries and language groups.

Several years ago we built special sites for our translation agency that were optimised for the German, Spanish, French, Italian, Chinese and Japanese markets, and consequently saw a surge in our profits as our custom in those markets soared.

10 Feb 2010

12

350+ Amazing CSS3 Resources – All You’ll Ever Need to Become a CSS3 Master!

css3 resources

Knowledge of CSS3 is fast becoming a crucial element of any web designer/developer’s skillset, which means that it’s an excellent time to start learning, if you haven’t already! A solid knowledge of CSS3 has a large market value and will take you a long way towards success, giving you an image of competence and authority.

Thankfully, there’s a huge amount of terrific tutorials and resources available – if you can find them. Here you’ll find an amazing ‘ultimate’ toolbox of over 350 of the best tuts and tips out there. Get ready to be amazed!

16 Apr 2009

13

Grunge Web Design Tutorial

Grudge style is meant to be quite the opposite of the Web 2.0 Style Design: dirty, and irregular. Often times grunge design features more ‘Down to Earth’ elements, whether it be with photos or texture.

The Core Features of Grunge Style

Here are some of the key features that define grunge design. We’ll need to consider them when making our own Grunge Style Web Design:

  • Grunge design almost always includes some sort of texture. Texture is ‘real’, and often times dirty or old.
  • Typography in a grunge design usually uses serif fonts, although all fonts can be implemented. A number of techniques, however, should be present to make the typography look old, washed away, and like a real element on the page.
  • Grunge design is never perfect. This type of design often features out of place objects, crooked images or textures, and washed away typography or pictures.

Research

As always, we’ll do some research before we start designing, as well as gather some resources. Considering the points above, let’s research grunge design to find out more techniques, and collect grungy fonts, pictures, and textures.

The Grid

1. Go ahead and create a new document that is 1200×1200 pixels. Let’s fill the background with a dark gray so we can see the grid better when creating it.

2. Make sure the rulers are open by pressing ‘Ctrl R’. They should show on the top and left of the workspace. Right click one of the rulers and make sure it is set to pixels.

3. By dragging the rulers from the left-hand ruler, create side margins at 150px and 1050px. This will create 900px to work with in the middle. With added padding and other forms of spacing, the content should be an appropriate width for anyone with a 1024×768 screen resolution and above.

4. Drag rulers from the top ruler to create horizontal margins. I created 50px margins from the top and bottom to start. Created a top header that is 100px tall, left 20px for padding, a second header that is 300px tall, and then another 20px margin.

From the bottom margin I created another ruler for a footer that is 200px tall, then created another 20px padding margin, and left the rest for the content area.

The Grid

Click on the image to see the full size. You can see the heights of all the margins I’ve created in the screenshot captions.

Grungy Background

Next we’re going to find a grungy texture put in the background. Like stated above, texture is one of the primary features of grunge design. I found the site below with some really neat seamless textures:

1. Pick out one of the textures. I’m going to use the 4th one down in the Grunge category.

2. Download the image and open it in Photoshop. Go to Edit > Define Pattern and save it with an appropriate name.

3. Next, go to our layout and select the Paintbucket tool (Press ‘G’ on the keyboard). In the toolbar options panel (up above), select ‘Pattern’ in the dropdown menu, and find your newly created pattern in the drop down to the right of that. It should be near the bottom.

4. Fill in your background with this new pattern. Because it is a seamless pattern, you can use the image you found off of the above website as the background in CSS.

Grungy Background

Content Background

Our next step is to create backgrounds in the content areas for more legible text.

1. Select the Eyedropper Tool (‘I’ on the keyboard) and select the lightest color you can find throughout our background image. I found #c2b89f.

2. We’ll want to go a bit lighter than this, so open up the Color Picker by clicking the color on the bottom of the toolbar. Manipulate this color so it ends up a lighter version.

31

3. Create a new layer clicking the ‘New Layer’ icon at the bottom of the layers palette. We’ll create the content background in this new layer to differentiate it from the background texture.

4. Using the Rectangular Marquee Tool (‘R’ on the keyboard), select the area for the first header, and then use the Brush tool (‘B’ on the keyboard) to color it in. Do this for the second header, content section, and footer.

Fill in the content areas with our new background color

This would be a good time to rename our new layer to something more appropriate. I’ll name mine ‘Content Background.’

5. Our current background for content looks a bit out of place from our design. Let’s add a stroke around all the boxes to give some more effect. Right click the new content layer and go to Blending Options.

Click on ‘Stroke’ on the left hand side, and change it to the following settings:

51

This will provide our border with some separation of the background, while adding some visual appeal by matching the grungy background’s inconsistency.

Closeup border

6. To make our design look worn, we’re going to switch to the Eraser Tool (‘E’ on the keyboard). Find some grungy brushes if you don’t already have some, through the links above.

7. Find a grungy brush and start erasing the corners and edges of the blocks to seem worn and old. Switch between different brushes to get a variety of erases.

71

Above is a closeup of the content background layer once some of the edges have been removed.

Title and Primary Navigation

Next we’ll start adding some content. We’ll add the title and primary navigation, and then work with a few more visual details.

1. Switch to the Text Tool (‘T’ on the keyboard) and type the site name. I’ll be using ‘Webitect’. We’ll need some grungy text now. Either find a new grunge font to work with, or manipulate a current font to look grungy. For the purpose of this tutorial, I’ll be altering a current font.

2. Choose the font, text size, and character details (kerning, leading, etc.–settings in the ‘Character Palette’). Make the final alterations to the font, and then rasterize it by right clicking the Text Layer and choosing ‘Rasterize Type’. By rasterizing this layer we can manipulate it more.

I’m using ‘Impact’ because it is a big, bold font that will be noticeable even with the distracting background and extra details. I’m using a dark red: #b20000, and at size 72pt.

3. Use the same technique we used to fray the edges of the content areas with the Eraser tool, only with the title text.

Below is what our current design looks like. Click on the image to see the full size.

Current Preview

Looking at what we have so far, I realize it would be a bit boring to just add the primary navigation off to the right and be done. So let’s tweak the title a bit more, and then add the primary navigation in more interesting way.

4. Let’s make the title on it’s own separate background. Cut off the excess content background in the first header to the right of the title:

101

Click the image for a larger view.

5. Switch to the Eraser tool (‘E’ on the keyboard) and use the grungy brushes again to get a old, washed out look on the side we just cut off.

6. Using the Rectangular Marquee Tool (‘M’ on the keyboard), and with the content background layer selected, select this whole top piece. Press Ctrl ‘T’ (Cmd T on a Mac). This will allow you to Transform this new area.

Use this new tool to rotate and move the selection into a more interesting position:

111

Press enter or move to a different tool to bring up the finalization dialog box. Select Apply.

7. In the layer’s palette, select the rasterized text layer. In this case, the layer called ‘Webitect.’ Press Ctrl ‘T‘ again to open the transformation tool, and move the text over the new background and align it.

121

This provides a lot more interest for our design. Next we’ll start on the primary navigation.

8. Create a new layer and place it under the content background layer. Using the Rectangular Marquee Tool (‘M’ on the keyboard), make a selection to the right of the title, and then fill it in with a darker color found in the background. (Use the Eyedropper tool to select colors.) I found #201003.

131

Click on the image to see the larger view. Notice I didn’t line up this bar exactly to the borers of the content area. Grunge design is supposed to be imperfect, and a minor detail like this can really bring that out.

9. Using the Polygonal Lasso Tool (‘L’), make some jagged selections around the edges of this bar, and delete.

141

10. Create a new text layer and type out the primary navigation on top of this bar.

For the font, I chose Mistral because it is a messy, hand-written font that represents a very ‘real’ feeling. It’s 36pt smooth, with a color of #eae2d4.

151

Extra Background Focus

This whole background may be rich in texture, but it doesn’t have focus. Download some grudge brushes if you haven’t already, and we’ll add some more to the background. The brushes can be abstract or real objects.

1. Create a new layer and place it under all of the other layers, except for the background texture.

2. Randomly place the grungy brush(es) around the header areas to make it more visually appealing. Use grungy colors, like green, red, yellow, and grayed-out tones.

161

The result above is what I got. I used a variety of brushes from a few different sets to create a very abstract look.

Dummy Text

1. Add some dummy content–both images and text. I made my design seem like a portfolio, so I put some thumbnails of portfolio pieces in the first header. You can do what you want with these three content areas.

The font should reflect the grunge style. That is best done using a serif font– I used Georgia 12pt. I added a 75 kerning and 18pt line height.

Final Design:

So finally, here is our final design:

Final Grunge Design

Click on the image for the full-size view.

This design was fairly simple in concepts for grunge design, but still contains a lot of detail. For even more interest, add vintage images, or grungy photoshop techniques– like with PSHero’s Virtual Duct Tape Tutorial.

02 Apr 2009

8

Typography-based Web Design Tutorial

In a later article, I’ll go through how to make typography much more interesting than what we’re doing here–but just for reference, this tutorial covers the main steps any typography design should abide by.

Although I’m going to be making this PSD design in Photoshop, I understand everyone doesn’t have (a.k.a. can’t afford!) Photoshop or the other Adobe software. Keep in mind that while the specifics may change, you can probably alter this tutorial to work in a variety of graphics programs.

Research

So just like with every design process, let’s start by researching and finding inspiration. For interesting typography design we’re going to need some interesting fonts, an insight to what typography really is, and it’d be helpful to read some techniques and articles as well.

Resources & Articles

Free Fonts:

Choosing a Central Font

Because there are so many styles of fonts, there can be many different themes for a typography-based design. We’re going to choose a font we find interesting in one of the free font sites above, and use it around our design. I usually use 1001freefonts.com because there is a great variety of choices and they are well categorized. You can also go through your own list of available computer fonts.

It is not always necessary to find a custom made, artsy font for these types of designs. A lot of the time designers will use a basic web font like Verdana, and still make an amazing design with just color, size, and proximity of the text.

After going through a list of my available fonts, I chose ‘Scrypticali Normal’. I got this font off of 1001freefonts.com a few weeks ago.

Now we can actually get started on our design.

Headline & Tagline

1. Open a new Photoshop document that is 1100px by 1100px.

2. I’ve decided to do a dark background with lighter text. Since we’re mainly using typography in this design, we can use this technique to make things more interesting. We can make adjustments later, but for now set the foreground color to #333333, and then use the Paint Bucket Tool to fill the entire document with this dark gray.

3. Switch to the Text Tool by pressing ‘T’ on your keyboard. We’re going to find the font we chose above, our central font. In this case, ‘Scrypticali Normal’ with a 150pt size and color of plain white. For this tutorial I’m going to type ‘Webitect’, but you can use whatever text you want. Right now it doesn’t matter where the text is placed because we’re going to do some alterations with it before we decide where to put it.

18

As you can see, the ‘W’ seems separated from the rest of the name, ‘ebitect’. This is actually an illusion, because as you can see, the first ‘e’ is technically the correct distance away from the right edge of the ‘W’.

To fix this we’re going to manually kern the text. This means we’re going to bring the last part of the word closer to the ‘W’ manually.

4. First choose the final color and size you’d like the text to be. We’ll need to rasterize the text, so we won’t be able to alter it as a text element anymore. I like the plain white against the dark gray, so I’m going to keep it as is.

5. Right click the text layer and then choose ‘Rasterize Type’. In this case, the text layer would be called ‘Webitect’. This will make the layer a rasterized layer, opposed to a text layer, and will give us more functionality for kerning. Using the Polygonal Lasso Tool (Press ‘L’ on the keyboard), create a selection around ‘ebitect’.

6. With the area still selected, switch to the Move Tool (Press ‘V’ on the keyboard). This will form a tighter selection around the text. Use the left arrow key on your keyboard to move the selection over so it sits nicely next the ‘W’.

21

Click on the image to see the full size.

Now you can press Ctrl D to deselect. The headline should now look better in terms of proximity.

Next we’re going to add a tagline. This should be smaller than the headline, but still big enough, and within close enough proximity to the headline that the visitor’s eyes will be lead to it next.

7. In a new Text layer, write out your tagline. It should be short and simple, or a small paragraph. Make sure it describes your site, you, or whatever it needs to describe. For Webitect it will be ‘Resources for web designers and developers. Articles, tutorials, tips, trends & more.’

8. We’ll need to adjust the font and text size. Let’s change the font first, since the text size varies depending on the font. To add some contrast and interest, let’s do a font that is opposite of our current font, but still compliments it.

I’ve chosen ‘Trechubet MS’. It contrasts because it is a sans-serif font opposed to the serif script font we used for the header, but is still smooth enough to compliment the curves of the header font.

Next choose the text size. You’ll have to try different things to see what looks best. For this tutorial, I’ve chosen 36pt.

31

In order to finalize our header and tagline text, we’re going to align and space it out appropriately. We’ll want our tagline to line up with the width of our headline, and also bring the tagline closer. Also, we’re going to make the tagline text a shade darker, so the visitor’s eye goes directly to the headline first, and is then lead to the tagline.

9. Let’s deal with the color first. For now I’m going to stick with the grays, so let’s just make it a bit darker. I’ve changed the text color to #cccccc. I’ve also italisized it for a bit more contrast.

10. Using the Ruler Tool (Press Ctrl R if it is not showing) drag two vertical rulers to the edges of the headline.

41

Click on the image to see the full size.

11. Drag the tagline to line up with the headline. Move it so that it is in an appropriate proximity to the header, and adjust the lines and kerning of the tagline to be the same width of the headline.

Below you can see the ‘Character’ panel where you can adjust the kerning, leading, etc. of the tagline text. Other alterations will require manual movement.

51

Click on the image to see the full size. Note the Character details are different for each line in the tagline. Each is set separately to align appropriately with the margins.

Now if you remove the rulers (Ctrl H), you’ll notice the alignment of the header and tagline look a bit funny. This is because the ‘W’ is creating a strange illusion again, and our brains tell us the left edge of ‘Webitect’ is further in on the ‘W’. This is all apart of the design process when working with typography. To fix this, let’s redo step 10 and 11 to make it look better.

61

Press ‘Ctrl H’ to hide the rulers.

12. In the layers palette, use the Ctrl key to select both the tagline and header layers. Right click and choose ‘Merge Layers’. Then, rightclick this new layer and rename it to something better to refer to it by.

The Grid

We can finally start creating the grid to abide by. The first step is to create a very basic grid based off of the header and tagline.

71

Click on the image to see the full size.

1. Choose the top and left margins for the header and tagline title with the use of the Ruler Tool. I’ve done a 100px margin on the left and right, and a 50px top margin.

2. Switch to the Move Tool (‘V’ on the keyboard) and align the headline and tagline layer in the top left, set by the margins. Next add some rulers to the right and bottom of this layer.

This will set up basic guidelines for the rest of the elements on the page to align correctly with our main typography feature: the headline and tagline layer.

Alignment, Spacing, and Proximity

Next we’ll want to set up margins around the header and tagline, so we have a set guideline of where other elements should go.

Because our design is only going to contain typography, we want enough distance between all the text so it doesn’t blend together too much. With that being said, let’s make a 40px margin. Dramatic and creative spacing (while still keeping proximity and flow in mind) can add a lot of aesthetic appeal to a simple design such as this one.

1. Using the ruler to guide you, create a 40px margin to the right of the headline and tagline and a 40px margin below.

Preview with 40px margins

Dummy Text, a big part of typography design

Next is the dummy text. Because our design is only going to have typography, it will need extra consideration. We’ll work on the headers first <h1>.

1. Create a new text layer (Type ‘T’ on the keyboard to invoke the Text tool). Type something simple, like ‘Header One’.

2. Zoom into the full width of the document to pay better attention to the text itself. We’re going to pick the font and size of the text to be used as headers.

Depending on the type of site, you’ll want to determine if you’ll be using a web safe font or not. If your design is going to be something like a portfolio where you’ll be able to create the headers once and leave them unaltered, than you can use any font, and create images for them later. If you’ll be using this layout for a blog where the headers will change constantly, you’ll want a web-safe font to work with as we’ll be doing the final typography in CSS.

3. I’m going to choose a sans-serif font since our largest text element in a script font. This will add appealing contrast. Be sure to experiment with font, size, and color when determining a header text.

I’ve chosen Arial 30pt Bold, with a light blue color: #9ed0ff.

4. With the new header layer selected, press ‘Ctrl J’ on the keyboard to duplicate the layer. Change this text layer to something like ‘Header Two’. Put it somewhere below the first header layer so we have a few different example titles to work with.

Header text with margins

Headers without margins

The first screenshot is our PSD with the headers, and the second is the same without the rulers in the way. Our next step is to add some more dummy content.

5. Create a new text layer (‘T’) and create some dummy text with the Lorem Ipsum generator. Chose another text combination, with a web-safe font for sure this time.

6. To the right of the text choices at the top, you’ll see a dropdown box to style your text. It will have options such as None, Sharp, Crisp, Strong, Smooth, etc. Be sure this is set to none because that’s what the text will look like naturally in a browser.

7. Choose a web-safe font for your general content. We’ll go with another sans-serif for legibility and repitition.

I’ve chosen Trechubet MS 14pt Regular with a gray color: #bbbbbb.

Dummy Content Text

Click on the screenshot to view the full size.

8. The next step is to reposition the headers and content text appropriately. Although we’ve aligned the the top of the first header with the top of ‘Webitect’, it doesn’t seem that way because the t’s are shorter than the tallest letter, the ‘b’. So we’ll align the top of the text to the top of the t’s.

9. Line up the content text below it so it’s a reasonable distance away from the header. It should be close enough in proximity for the viewer to realize it’s the subtext of the header, but distant enough to be a separate entity, and mimic the margins throughout the rest of the design.

The spacing I’ve chosen is about the same as between the headline and tagline in the layout.

10. Copy the content layer (Ctrl J) and do the same under the second header. Move those two within an appropriate proximity below the first header and content text.

11. Create a few more headers and text layers to make it look like live content.

Layout with More content

Navigation

We’ll do the navigation next, to the left of the content and under the headline and tagline.

1. To make things interesting, and have the navigation be a primary focus, we’ll make it large text. We’ll use the same font as the headers for repetition, and a similar, but darker blue.

I’ve used 60pt Bold Arial, with a 100pt line height.

Large Navigation

When creating the live version of a layout like this, you may want to create in image of the navigation, and create an image map because large web text can get a bit scratchy.

Footer

Like many of the other details, we’re going to create an alternative solution for the footer to add interest.

1. At the bottom edge of the navigation, create another 40px margin.

2. Using the ruler guidelines, fill in the last rectangle below the navigation with a lighter color in a new layer. I’ve just used the rectangular marquee and fill tool, but you can use the rectangle tool as well. I’ve used a medium gray: #cccccc.

Footer

3. Add some final text to the footer. I’ve just added my about text from Webitect.

Final Result

Our final result is below. This is a very simple, yet very effective design. Three main elements are seen first: Website title and motto, navigation, and about. The content is easy to find and read as well.

15

Click on the screenshot for a the full-size view.

In a future article, I’ll be going over more techniques to make typography more interesting, and more of an art-like element.

20 Mar 2009

7

Sleek Web Design Tutorial

It looks like the sleek, Web 2.0 style website design was the most popular request on last week’s poll. This is not surprising since these types of designs are very popular right now, or in the very least, the core components of them are popular: simplicity, typography, whitespace, and a close attention to proximity.