Creating a Grayscale Wireframe
Now we’ve sketched out a few ideas it’s time to turn these sketches into a more solid wireframe. We’ll start creating a grayscale wireframe where all the layout and type treatments will be present, but there will be no color, texture, imagery, etc.
Here’s how our final grayscale wireframe should look like:
Layout: Composition
Before we start working on our wireframe in Adobe Photoshop, we have some decisions to make.
First, our layout will be a fixed layout, this means that the dimensions of our layout will be specified in a particular number of pixels. Our layout is going to be 940px wide so, as you can see in the image below, whether it’s shown on a smaller or larger window, its size remains the same.
Layout: The Grid
Using a grid makes it so much easier to align our elements and decide on their size. In this design, we’ll be using this Baseline Grid created by the awesome guys at Teehan+Lax. It’s a 6px baseline grid coupled with the 960 grid system.
Further Reading:
As we move on we’ll discuss how to align our text and elements, but for now you should go ahead and read this article to get an idea of how to use this grid.
Layout: White Space
White, or Negative Space is the space in-between elements in our interface. The space between major elements is called Macro White Space. Micro White Space is the White Space between elements such as list items, the space between a caption and an image, or the space between words and letters.
White Space helps position brands, and designers usually use White Space in their designs to give them a feeling of sophistication and luxury. So it’s something that we should take care of while we’re designing.
Typography: Typefaces
We should always choose our typefaces/fonts carefully. Choosing the right font isn’t easy at all, and you have to look at many aspects, from choosing a typeface with a personality that will deliver the right message, to how it will look on the browser. I won’t get into much detail, instead I’d like to mention a few posts that I found very interesting:
Further Reading:
- A Beginner’s Guide to Pairing Fonts
- How to Choose a Typeface
- “What Font Should I Use?”: Five Principles for Choosing and Using Typefaces
- Choosing the Right Font: A Practical Guide to Typography on the Web
- Choose your web fonts wisely
- On Choosing Type
In our interface we’ll use the following three typefaces: Helvetica, a clean and modern typeface that says it all. Georgia, a typeface that evokes royalty and has a serious tone. Bebas, a typeface that has the sense of authority, and is like a bold statement, always making a point.
- Helvetica Neue: Body copy (Standard font).
- Bebas: Headings (Download here).
- Georgia: Other headed elements (Standard font).
Typography: Hierarchy
“Typographic hierarchy” simply describes how different typefaces, weights and sizes of typefaces structure a document.
In terms of font sizes, the baseline grid we’ve decided to use is designed to be compatible with standard font sizes, that’s why we’ll stick with them. These sizes prove to be extremely useful when combined with leading derived from three. So here are the main pixel sizes for our interface:
- 24px: H1 headings.
- 18px: H2 headings.
- 14px: H3 and navigation headings.
- 12px: Body copy—with a leading value of 18px.
However, in the sidebar banners and the featured content area, we’ll end up using a couple of other different sizes (after all, these ads will be replaced in time) yet they’ll be standard font sizes.
As for the weights, I’ll go from Roman Lower Case to Bold Lower Case. Nothing really complicated.
Typography: Leading, Kerning & Tracking
As I’ve already said, we’ll be using leading (line spacing) values driven from the grid, which will be: 18px, and 21px.
Our kerning will be Metrics for body text, and Optical for headings (see further reading). And finally, we’ll use the default tracking values (0) for all the text.
Further Reading:
Typography: Anti-Aliasing
Here’s a really excellent article. You have to read this one! I won’t say a single word, except that for body copy (small point sizes) we’ll use Sharp, and for headings (larger point sizes) we’ll use Crisp.
Step 1: Setting Up the Document
Now that we have made some decisions, it’s time to open up Adobe Photoshop and actually start creating our wireframe! So open up the grid document we previously downloaded called “grid2.psd”. The first thing we’re going to do is to select all the existing layers in the document—except for the folder called “Marks” — and get rid of them, or group them in a folder and hide them for now. Before we go any further, let’s select the “Marks” folder and click the “Lock All” button in the layers panel.
Now we need to change the height of our document, because our final design is taller than the existing document. In order to do so, we’ll go to Image > Canvas Size, change the height to 1540px and make sure to set the Anchor to Top Center.
Then click View > Extras (to view our Guides), Rulers (to view the Rulers) and Snap (so that the objects we’ll be creating can snap to the Guides).
Step 2: Creating the Background
We’ll start by creating our background. Create a new layer, give it a name (“bg” for example), then grab the Rectangular Marquee Tool (M). Create a selection over the whole canvas, and in order to fill it, click Shift+Backspace, Use: Color… then fill the selection with this color value: #f5f5f3. Notice that the color values we’ll be using in the grayscale wireframe are not the final values, but we’ll use them to differentiate our page elements.
Step 3: Creating the Top Bar
Now let’s create the top bar. Again grab the Rectangular Marquee Tool (M), create a selection of 1260x45px, and then fill it with this color value: #2d2d2d.
Select the Horizontal Type Tool (T), type your navigation items, then apply the following character settings to it:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 12px.
- Kerning: Metrics.
- Color: #767676.
- Anti-Aliasing: Sharp.
To make sure that our text is well-aligned with the background, select both layers (the text layer and the background layer) and click on Align vertical centers in the control bar.
Step 4: Creating the Sign In Form
Type the word “Sign In” using the Horizontal Type Tool (T), apply the following character settings to it, and make sure to align it like the image below.
- Font: Helvetica Neue LT Std.
- Weight: 75 Bold.
- Size: 12px.
- Kerning: Metrics.
- Color: #ffffff.
- Anti-Aliasing: Sharp.
Now let’s create the input fields. Using the Rounded Rectangle Tool (U) create two rounded rectangles each one of them should be 127x26px, with 15px radius. Fill them with this color value: #767676 and align them like the image below.
Type the two words “User name” and “Password” inside the two fields, with the following character settings applied to them, then align them according to the image below:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 12px.
- Kerning: Metrics.
- Color: #ffffff.
- Anti-Aliasing: Sharp.
We’ll create our “Go” button using the Rounded Rectangle Tool (U) but this time a 33x25px rectangle with 25px radius. Then type the word “Go” inside it using the same character settings in the previous image but change its weight to 75 Bold.
Grab the Line Tool (L), create a line of 1x25px and fill it with white. Then type the word “Sign Up” using the same character settings shown in the following image, also align all the elements we’ve created in this step according to it.
Step 5: Creating an Ad Space
Let’s use the Rectangular Marquee Tool (M) to create a rectangle of 480x60px, fill it with #767676, and align it as in the image below. This should work as a placeholder for an ad space.
Then give this layer a Stroke. The image below shows the settings we want.
Step 6: Creating the Logo
Practically speaking, our logo shouldn’t be designed here in Adobe Photoshop, but for now we’ll just create create it here. So grab the Ellipse Tool (U), create a circle of 60x60px, fill it with this color value: #2d2d2d, and align it as shown the image below.
Type the letter “F” using the following character settings, and align it according to the following image:
- Font: Avant Quelombre.
- Size: 53.65px.
- Color: #ffffff.
- Anti-Aliasing: Crisp.
Then type the word “Fashion” and apply the following character settings to it:
- Font: Avant Quelombre.
- Size: 30px.
- Kerning: Optical.
- Color: #2d2d2d.
- Anti-Aliasing: Crisp.
And “Store” with the following character settings:
- Font: Georgia.
- Weight: Regular.
- Size: 12px.
- Kerning: Metrics.
- Color: #767676.
- Anti-Aliasing: Sharp.
Make sure you place them both according to the image below.
Step 7: Creating the Navigation Bar
In this step we’ll create our navigation bar. Go ahead and grab the Rectangular Marquee Tool (M), create a selection of 940x48px, fill it with this color value: #c3c3c3, and put 20 pixels beneath the ad space as in the image below.
We’ll go ahead and grab the Horizontal Type Tool (T), and type the titles of our sub-pages using the following character settings:
- Font: Bebas.
- Weight: Regular.
- Size: 14px.
- Kerning: Optical.
- Color: #2d2d2d/#ffffff.
- Anti-Aliasing: Crisp.
Now let’s separate the titles we’ve just created. Using the Line Tool (U), create a vertical line between every two titles, fill it with this color value: #b4b4b4, and make sure to leave 20px between each title and vertical line.
Step 8: Creating the Drop-Down Menu
Now let’s create a drop-down menu, shall we? Grab the Rectangular Marquee Tool (M), create a selection that fills up the space between the two surrounding lines of the word “WOMEN” and fill it with this color value: #2d2d2d. Then create yet another selection of 340x147px, fill it with same color value, and align it according to the image below. This will serve as a background for our drop-down menu.
Hit the (T) button on your keyboard to select the Horizontal Type Tool (T), and start typing the elements of the sub-menu, using the following character settings:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 12px.
- Kerning: Metrics.
- Leading: 30px.
- Color: #767676.
- Anti-Aliasing: Sharp.
Finally, make sure they’re aligned like the following image.
What we’re going to do now is to create a frame for an image (where we’ll place a picture of a woman just to tell the user you’ve selected the “Women” section). So grab the Rectangular Marquee Tool (M), create a selection of 139x105px, and fill it with #1f1f1f, then create another selection of 121x87px and fill it with #767676. Make sure that the centers of the two rectangles are aligned horizontally and vertically.
Step 9: Creating the Search Bar
Let’s go ahead and create an input field for our search bar. Grab the Rounded Rectangle Tool (U), create a rectangle of 123x26px, with 15px radius, and fill it with white. Don’t forget to align it as shown in the image below.
Using the awesome Horizontal Type Tool (T), type the word “Search” inside the rounded rectangle and apply the following character settings to it:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 12px.
- Kerning: Metrics.
- Color: #767676.
- Anti-Aliasing: Sharp.
Find an icon of a magnifying glass, and place on the right hand side of the search bar, make sure it’s colored with #929292 and aligned according to the image below.
Step 10: Creating the Search Bar
Let’s start creating the “Featured Content” area. Start with creating a selection of 640x315px using the Rectangular Marquee Tool (M), and fill it with #c3c3c3.
Now let’s create this bar where a message about the featured product goes. Grab the Rectangular Marquee Tool (M), create a selection of 480x33px, fill it with this color value: #767676, and align it as shown in the image below.
Select the Horizontal Type Tool (T) and type a message using the following character setting:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 14px.
- Kerning: Metrics.
- Color: #ffffff.
- Anti-Aliasing: Sharp.
Don’t forget to align the text and the background as demonstrated.
It’s time to type some introductory text. Grab the Horizontal Type Tool (T), and type the word “Collection” using the following character settings:
- Font: Georgia.
- Weight: Bold.
- Size: 18px.
- Kerning: Optical.
- Color: #2d2d2d.
- Anti-Aliasing: Crisp.
Then type the word “Summer” using the following character settings:
- Font: Georgia.
- Weight: Bold.
- Size: 48px.
- Kerning: Optical.
- Color: #ffffff.
- Anti-Aliasing: Crisp.
And finally type “Helping you look cool” with the following character settings applied to it:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 18px.
- Kerning: Optical.
- Color: #2d2d2d.
- Anti-Aliasing: Crisp.
Make sure to align our text as shown in the image below.
Step 11: Creating the Sale Tag
Now let’s create our sale tag. Use the Ellipse Tool (U) to create a 80x80px circle, fill it with this color value: #2d2d2d, then place it as shown in the image below.
Type some text inside this circle (“40% off” for example) and apply the following character settings to it:
- Font: Georgia.
- Weight: Regular / Bold.
- Size: 48px / 14px.
- Kerning: Metrics.
- Color: #ffffff.
- Anti-Aliasing: Crisp.
Step 12: Creating the Main Content Area
Let’s go ahead and starting creating our main content area. We’ll start with the title, so grab the Horizontal Type Tool (T), type a title, and apply the following character settings to it:
- Font: Bebas.
- Weight: Regular.
- Size: 24px.
- Kerning: Optical.
- Color: #2d2d2d.
- Anti-Aliasing: Crisp.
Don’t forget to place it 20px beneath the featured content area.
With the Horizontal Type Tool (T) still selected, type a quick description for this title, using the following character settings:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 12px.
- Kerning: Metrics.
- Color: #767676.
- Anti-Aliasing: Sharp.
And of course it should be aligned according to the baseline grid as shown in the image below.
Using the Line Tool (U), create a line that’s 640px wide and color it with this value: #e5e5e5.
Step 13: Creating the Product Images
Grab the Rectangular Marquee Tool (M), create a selection of 200x152px, fill it with #2d2d2d and align it 20px beneath the line we’ve just created.
Create another sale tag like the one we created in step 11, but this time make the circle 45x45px and fill it with White. And the text should be 24px/14px and filled with #767676.
Use the Horizontal Type Tool (T) to type the name and price of the product using the following character settings:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 12px.
- Leading: 21px.
- Kerning: Metrics.
- Color: #767676 / #000000.
- Anti-Aliasing: Sharp.
We’ll fill this empty space between the text with an icon – in case you’re wondering.
Place an icon of a shopping cart, place it in the empty space we left in the previous step, and align it as shown in the image below.
If the icon is colored, go to Layer > New Adjustment Layer > Black & White… to make it grayscale.
Select all the product preview elements we created in this step, and group them together, then duplicate this folder five times. Align the six product previews as shown in the image below.
Step 14: Creating the Big Sidebar Banner
Now let’s work on our sidebar. We’ll start with the big banner, so grab the Rectangle Tool (U), create a 280x314px rectangle and fill it with #2d2d2d. With the tool still selected create another rectangle of 280x41px and fill it with #767676, then align both of them as shown in the image below.
Using the Horizontal Type Tool (T), type a title for this banner using the following character settings:
- Font: Bebas
- Weight: Regular.
- Size: 18px.
- Kerning: Optical.
- Color: #ffffff.
- Anti-Aliasing: Crisp.
Hit the (U) key to select the Ellipse Tool (U), create a circle that’s 210x210px, fill it with #7676767 and try to align it somehow as in the image below.
Now in order to get rid of the part of the circle that goes out of the banner background, open up the Layers panel, put the layer of the circle (“tag_bg”) right above the layer of banner background (“box_bg”), then right click on the circle’s layer > Create Clipping Mask.
Now using the Horizontal Type Tool (T), type some text inside this circle, using the following character settings:
- Font: Georgia
- Weight: Regular.
- Size: 18px / 14px / 24px / 30px.
- Kerning: Optical.
- Color: #ffffff.
- Anti-Aliasing: Crisp.
Also make sure that “Faux Bold” in the character panel is selected.
Step 15: Creating a Smaller Sidebar Banner
Grab the Rectangle Tool (U) and create a rectangle of 280x144px, fill it with #2d2d2d, and place it according to the image below.
Now let’s create the “Know More” button. Use the Rectangular Marquee Tool (M) to create a selection of 120x30px and fill it with #767676.
Then grab the Horizontal Type Tool (T), type “Know More” inside the rectangle using the following character settings:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 18px.
- Kerning: Optical.
- Color: #ffffff.
- Anti-Aliasing: Crisp.
With the Horizontal Type Tool (T) still selected, type some text as in the image below using the following character settings:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 14px / 24px / 18px.
- Leading: 24px.
- Kerning: Optical.
- Color: #ffffff.
- Anti-Aliasing: Crisp.
The image below shows you how to align the text.
Make a copy of this banner and leave 20px of vertical space between them.
Step 16: Creating the “Twitter Updates” Section
Create a selection of 280x235px using the Rectangular Marquee Tool (M), fill it with white, and place it 20px beneath the banner.
Grab the Horizontal Type Tool (T) and type a title using the following character settings:
- Font: Bebas.
- Weight: Regular.
- Size: 18px.
- Kerning: Optical.
- Color: #2d2d2d.
- Anti-Aliasing: Crisp.
Using the Line Tool (U) create a line that’s 240px wide and fill it with this color value: #e5e5e5.
Find an icon/illustration of the Twitter bird and place it as in the image below. Also make sure to make it grayscale as we did in a previous step.
Grab the Horizontal Type Tool (T) and type some text as an example of a tweet, then apply the following character settings to it:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 12px.
- Leading: 18px.
- Kerning: Metrics.
- Color: #2d2d2d / #767676.
- Anti-Aliasing: Crisp.
Then type “More Tweets” using the following character settings:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 12px.
- Kerning: Metrics.
- Color: #2d2d2d.
- Anti-Aliasing: Crisp.
Don’t forget to click “Underline” in the Character panel.
Step 17: Creating the “Other Products” Section
Grab the Rectangle Tool (U) and create a rectangle of 940x264px, fill it with #ffffff, and place 20px beneath the “Twitter Updates” section.
Create a title for this section that’s exactly the same as the one we created in the previous step. Then use the Line Tool (U) to create a 898px wide line and fill it with #e5e5e5.
Use the Rectangle Tool (U) to create a 178x113px rectangle. Make three copies of it and align them according to the image below.
Again, type some information about the product and apply the following character settings to your text:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 12px.
- Leading: 18px.
- Kerning: Metrics.
- Color: #2d2d2d/#767676.
- Anti-Aliasing: Crisp.
Finally don’t forget to make “Buy Now” underlined.
Find an icon of an arrow and place it as in the image below, try to resize it to something around 28x28px, and fill it with this color value: #2d2d2d. Make another copy of this icon and put it on the right hand side.
Step 18: Creating the Footer Area
Grab the Rectangular Marquee Tool (M) and create a selection of 1260x122px, then fill it with #2d2d2d.
Type some text in the footer using the following character settings:
- Font: Helvetica Neue LT Std.
- Weight: 55 Roman.
- Size: 12px.
- Leading: 21px.
- Kerning: Metrics.
- Color: #ffffff / #767676.
- Anti-Aliasing: Crisp.
Finally place a copy of the logo and make sure that it’s aligned as in the image below, and that’s it!
Color Combination
Now that we’re done with our grayscale wireframe, it’s time to focus on coloring our interface. Color is a very huge topic, so I’m only going to go through the color combination part. Our color scheme will contain three types of colors:
- Subordinate or base color: This is a visually weak or subordinate color. It contrasts or complements.
- Dominant or main color: This one defines the communicative values of the color combination.
- Accent or highlight color: This can be sympathetic to the base or main color. Or instead, you may choose an accent color that is visually strong, and appears to compete with the main color, in order to provide tension within the combination.
The following image shows our base, main, and accent colors.
Looking Room
Since we’ll be using some portraits in our design, I thought I should briefly talk about “Looking Room”. Generally, a portrait photograph will have a subject and space around them. The visual interest in the portrait can come from movement, that is how our eyes move around the shot. And to get the eye moving, the photographer adjusts the space around the subject accordingly.
So for example as you can see in the image below, the alignment of the subject on the left (1), with the White Space (Looking Room) on the right, creates movement (3), which makes our eyes look in the direction where the subject is looking.
Further Reading:
Step 19: Coloring the Background
Now let’s start coloring our interface! In order to fill the background layer with color, you could click on its thumbnail in the Layers panel while holding down the Cmd/Ctrl key in order to select its pixels then click Shift+Backspace > Color… > #f6f6f4. Or you could add a Color Overlay to it.
Step 20: Coloring the Top Bar
Color the word “Sign In” with this color value: #ffffff, “User name/Password” with: #8e8e8e, the input fields with #8e8e8e, the background of the button and “Sign Up” with #ea6a53, and the navigation text with #999999.
Fill the advertising space with an image as shown in the image below, and create clipping mask for it, like we did in step 14.
Time to color the logo. Give the circle and the word “Fashion” this color value: #2d2d2d, fill the letter “F” with the same color as the background #f6f6f4, and the word “store” with #bc3726.
Step 21: Coloring the Navigation Bar
We’ll fill the navigation background text with this color value: #c3c3c3, the text with #2d2d2d, the word “WOMEN” with #f6f6f4 (representing the hover/selected state), and the vertical separating lines with with #b4b4b4.
In order to add more visual interest to the navigation text, we’ll add a Drop Shadow to it. The image below shows the settings…
Moving to the search bar, we’ll fill the input field with white #ffffff, the word “Search” with #a6a6a6, and the icon with #ea6a53.
Now let’s give our sub-navigation bar some colors… Fill the background with #2d2d2d, the text with #c4c4c4, and the border of the image with #1f1f1f.
We’ll make the image border a bit more interesting by adding a Drop Shadow and an Inner Shadow to it. All the settings can be seen in the image below.
Finally place an image of a female model as shown in the image below.
Now it’s time to create the dashed lines between the navigation items. Open up Adobe Illustrator, create a new document, select the Line Segment Tool (\), create a line that’s 135px wide, and fill it with None (/). Then open up the Stroke panel and adjust your settings according to the image below.
Copy the dashed line and paste it into Adobe Photoshop, make two copies of it, and fill them all with this color value: #484848.
Step 22: Coloring the Big Sidebar Banner
We’ll start this step by placing an image to fill the background of the banner. Go to File > Place… > Select an image > Place.
Let’s go ahead and color the circle with the text inside it. The color values we should be using are shown in the image below.
In order to make the number “50″ stand out a bit we’ll apply a Drop Shadow to the layer that contains it. Settings can be seen in the image below.
Time to work on the title… Fill the background of it with this color value: #000000, and the text with this color value: #c3c3c3. Then create two dashed lines (like the one we created in step 21) fill them with #414141 and place them as shown in the image below.
Let’s add some visual interest to the title’s background, by adding a subtle grunge texture to it. Download this amazing brush set: “Function Subtle Grunge Brushes” created by the awesome guys at WeFunction or any other brush set you prefer. Create a new layer right above the title’s background layer, while having it selected, paint over the title with one of the brushes using the Brush Tool (B) (or maybe you can use one of the PNGs included instead) fill it with white, then reduce the layer’s opacity down to 30%. Finally, right-click on it > Create clipping mask…
Step 23: Coloring the Featured Content Area
We’ll fill the background of the featured content area with a gradient to make it look more interesting. So go ahead and grab the Gradient Tool (G), open up the Gradient Editor from the Control panel, and set your color values from #b6a397 to #9d8a83.
We need to specify the area that should be filled with the gradient, and we do that by making a selection over it. So let’s go to the Layers panel, click on the background layer’s thumbnail while holding down the Cmd/Ctrl key to make a selection over it, and with Gradient Tool (G) still selected, select Radial Gradient, and drag from as shown in the image below while holding down the Shift key to constrain the angel.
The color values of the elements in this section are shown in the image below.
Finally, find a photo of a female model, place it in our document, and align it according to the grid as shown in the image below.
Step 24: Coloring the Small Sidebar Banners
Again, we’ll place yet another image as a background for our banner, and use the color values shown in the image below to color our elements.
To make our text stand out a bit more, we’ll give it a Drop Shadow. The settings can be seen in the image below.
And we’ll do the same with the other banner…
Now let’s give some colors to the “Twitter Updates” section… The image below contains all the color values that should we’ll use for this section.
Step 25: Coloring the Main Content Area
We’ll start with the title, fill it with this color value: #2d2d2d, then the description with this value: #858585, then the line with #e5e5e5.
Moving to the product preview… First place an image of the product, then color all the elements with the values viewed in the image below.
The elements in the “Other Products” section will have be colored with the same values shown in the previous step, just make sure to fill the background with white #ffffff, and the arrow icon with #040707.
Coloring the Footer Area
Fill the footer’s background with this color value: #2d2d2d, and the text with #a0a0a0 and #ffffff.
And finally the colors of the logo are shown in the following image…
Conclusion
And that’s pretty much it! I hope you’ve enjoyed reading this tutorial, and, more importantly, you’ve found it useful. If you have any questions, please don’t hesitate to leave a comment, and I’ll do my best to help.