It looks like the sleek, Web 2.0 style website design was the most popular request on last week’s poll. This 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.
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.
So let’s get started.
Research
It is important to understand exactly what a Web 2.0 style web design is, and what the core components of a design like this are. With any design process, research is a big part. I found this page that outlines the main features of a Sleek/Web 2.0 website design, and also considers the smaller details of this style.
Scan through this real quickly, and remember the main points when we go through this PSD tutorial. I’d also bookmark this page if you plan to create your own Web 2.0 style design because this a great guide to follow.
Basic Parts
So let’s start thinking of what we need in our design. This a good initial step to go through so you don’t leave anything out when creating the final draft, and are then forced to squish a forgotten piece in. In our design we’re going to need space for the following components:
- Logo
- Primary Navigation (About, Portfolio, Services, Contact)
- Secondary Navigation (Sidebar menu, perhaps archives or categories )
- Content
- Header
- Footer
Generic Rules of Design
One of the next steps is to create a grid in Photoshop to place all of our components in. Before we do that, though, we need to understand some of the generic rules of good design:
The Grid
Let’s get started making the grid. I’m not going to use it in this tutorial, but for future reference, the 960 Grid System is a great tool for creating web design grids and for following the design principles listed above.
1. Start by opening up Photoshop and creating a new 1100px by 1100px document.
2. Next we’re going to use the ruler tool to create guidelines, or the grid. If you’re rulers are not already open, press ‘Ctrl R’ and you should see rulers on the top and left-hand side of the workspace. Make sure your ruler is in pixels by right clicking the ruler and selecting ‘Pixels’.
3. I’ve filled in the background of my image with a light gray (#EEEEEE). This just helps to see the bright grids a bit better.
4. A ruler can be created by taking the Move tool (usually at the top of the toolbar) and dragging a bright blue ruler off of the numbered ruler on the side of the workspace. Create vertical rulers at 100, 400, 700, and 1000. Similarly, create horizontal rulers at 100, 300, and 800.
Notice we followed the Rule of Thirds with the three even section in the middle, left room for margins on the left and right of the document, and planned a basic outline for 2 headers (logo area and main header), and a footer. There is also, of course, the main content area, still split into thirds.
Logo Design
One of the biggest elements in a sleek, Web 2.0 style design is the logo. It should be largely focused within the design, and still hold Web 2.0 properties. A proper logo should include a clean font and smooth edges, and additionally gradients, shine, and bright color.
In order to aid with the logo design process, there are plenty of tutorials and articles on logo design.
Now I’ll create my own logo for Webitect. You can copy the logo, or use your own text with the same techniques. Ideally, logos are created with Illustrator because they are vector based, but since this just a mockup, it can be created in Photoshop.
1. I’d like to stick the logo in our grid on the top row, second column over. This area is 300px by 100px, so we’re going to create a new Photoshop document with these dimensions.
2. Select the text tool by pressing ‘T’ on your keyboard. Now go through a list of your available fonts and find an appropriate font for a ‘Web 2.0 Style’. It should be sleek, perhaps a bit funky, and modern. I’m using a downloaded font called “Brie Light”.
3. Now we need to resize our font to fit our layout. In terms of alignment, remember that the edges of this document will the be edges of the section on the grid we’re working with. In order to align other elements with the grid, we’ll need to make this logo stretch out to the edge of this document through the use of font size and kerning.
4. Next, I changed the color of the text to a bright pink. (#f30078) Brighter colors usually look better with Web 2.0 designs, as it provides contrast to the excess whitespace and simplicity. I’ve also added a few more Web 2.0 style features: a white gradient (glossy look), a slight 3D effect, and other details.
You can play around with effects like this and go through Web 2.0 tutorials to create your own logo. I listed a few logo tutorials above that match this style, although there are plenty more out there. Here is what I ended up with:
Backgrounds
Simple backgrounds are key in sleek web design. A bright use of color is what’s really needed to make things interesting. For this design, we want to keep the main wrapper white, and add a small bit of style to the main background.
1. Go to StripGenerator.com to make a simple striped pattern for our background. I decided to go with bright blue to stick with the bright color theme. These are the settings I’ve chosen below:
2. Download the pattern and open up the resulting image in a new Photoshop document. Go to Edit > Define Pattern. A dialog box will come up asking you to name your pattern. You can rename it appropriately or just leave the default.
3. Using the paintbucket tool, select pattern from the dropdown at the top, and then the pattern you just created. (Your new pattern should be near the bottom of all the other patterns.) Fill in the document with this new striped pattern.
4. Now we’re going to add some white background for the content, footer, and headers in the layout. We’re using the Rounded Rectangle Tool with a 15px radius, and with the fill color (foreground color) set to white. I’m going to add a few more rulers to add some margins between what are going to be my white areas. I’ll add about 10px of space between the white areas.
5. Now we can place our logo in our design. I’ve downsized our logo by 10px in width in order to compensate for our added margin on the left.
Primary Navigation
Next we’re going to add the primary navigation to the same top header as the logo. For this tutorial, we’re going to include ‘About’, ‘Portfolio’, ‘Services’, and ‘Contact.’
1. Select the Text tool again by pressing ‘T’ on your keyboard. You can put them all in one text layer, or in separate ones. I’m going to put them in separate layers so I can move them around separately.
2. We’re going to put them in rounded tabs in our top header, to the right of the logo. Choose an appropriate font (Web 2.0 style–modern & sleek) and appropriate font size. I’m using 24pt Century Gothic. Place the navigation text to the right after adding some more 10px margins.
Note: I’ve also lowered the logo on the left to line up with the bottom margin of the primary navigation. It’s small changes like this through the design process that lead to a good overall sense of alignment in a design.
3. Next we’re going to add rounded tabs behind each piece of primary navigation using the Rounded Rectangle Tool. Choose this tool, and then create a new layer under all of the text layers. This so the tabs will be under the text.
4. Feel free to add 10px margin rulers around each navigation piece. In the newly created layer, add a rounded rectangle (with a color of #ffc960) behind each navigation piece with the 10px margin. Note the rectangle will go below further than whats actually needed to account for the bottom corners. We’ll trim them off next.
5. Now with the rectangular marquee tool, cut off the bottoms of the rounded rectangles up to the bottom edge of the first header, to create tabs.
6. Add any Web 2.0 effects you like to the tabs, but be sure to keep it simple. I’ve just added a transparent to white gradient, which gives the tabs a bit more depth.
Distinct Header
Next it’s time to create the second header. One of the primary uses of a header is to add visual appeal, and connect the different parts of the whole layout visually. I see we’re starting to lose our Rule of Thirds because the primary navigation did not fit neatly into our preset margins. This ok, because we can now redefine them in our main header.
Add three large rounded rectangles into the even thirds of our original rulers, with 10px margins for repetition. To choose another bright color, we’ll go for a light green: #cdffbf.
The images going across the entire design add a sense of unity between the various elements already present, and among the elements we’re going to add.
Typography
Next we’re going to add some dummy text and headers. This all basic CSS stuff, but it is oftentimes beneficial to add the dummy text to see how different fonts and sizes will look.
1. Choose a generic web font for the dummy text. I’m using 11pt Verdana, with a 24pt line height and 50 kerning. You can choose your own font specifications, but a sans-serif font is best for Web 2.0 style web design. Make sure the spacing and proximity reflects a sleek look, although the text should still be legible and flow.
2. Next choose header and sidebar fonts, as well as extra detail like the header backgrounds I’ve chosen below. Note that there is repetition with the rounded corners and color in he header backgrounds I’ve created.
3. Add any Web 2.0 elements (gradient, gloss, shadow, etc.) to smaller elements in the typography. I’ve added the same gradient that I’ve been using throughout the design in my header backgrounds.
Footer
And finally, the footer. We’ll imitate what we did in the header by complimenting the Rule of Thirds.
1. This time, we’ll put the rounded rectangles in dark gray (#333333), and give it a similar gradient as in the rest of the design.
2. Add some dummy text the three areas of the footer. Because this what the visitor will see after viewing your content, there are some ideal choices for what should go in these three sections. One may be a contact form, links to other content on your site, or recent comments/testimonials. Basically, any content that would help the visitor stay on your website or lead them to a desired action.
Conclusion
What’s great about this design is that it’s simple, trendy, and really outlines the most important components: Logo, primary navigation, and portfolio pieces.
Of course, a portfolio is obviously not the only direction you could go with this. It would also work great as a blog or other type of generic website because of the amount of content it could hold.
Usually a sleek, Web 2.0 style design is a lot more simple than this, but this design still works because all the elements are simple individually, creating an overall simplistic and sleek feel.
