Winnipeg Web Design

Designing the Website – Part 2

Continuing Part 1’s tutorial, we finished creating the site creation doc and created the brand for Creative Communications. Now it’s time to work on the website. In Part 1, I listed out brief objectives of each tutorial section. The objectives for Part 2: Designing the website, is listed as follows:

“Continue Part 1’s tutorial by creating the rest of the pages from start to finish. Lay out site infrastructure and information hierarchy through either sitemaps or wiremaps. Marketing and positioning of key elements based on engagement goals presented in the document will be addressed. Functionality and usability will be vital in creating user-friendly design, while easy-to-use navigation will be implemented for less clickthroughs.”

Let’s break the objectives down into further detail. The layout and hierarchy was discussed in the site documentation. This looks something like this:

1. Services
   1. Marketing / Advertising
   2. Public Relations
   3. Design
      1. Web
      2. Print
      3. Branding
2. Portfolio
   1. Marketing / Advertising
   2. Public Relations
   3. Design
      1. Web
      2. Print
      3. Branding
3. About Us
   1. Who We Are
      1. The Execs
      2. The 2nd In Command
      3. The Henchmen
   2. Our History
4. Contact
   1. Location
   2. Email
   3. Google Map
5. Home

This tutorial will show how the marketing and positioning of key elements of Creative Communications’ business, which focuses mainly on displaying three specifics: the focal point (the portfolio of the company), its social media marketing (SMM), and the free quote contact form. Displaying these key elements effectively presents the goals of the company: its brand to be exposed, the level and quality of work they provide and produce, and the method to generate interest and business leads.

Functionality and usability is designed through understanding eye flow pattern and minimalistic navigation. Ease and placement of portfolio focal point, minimalistic sidebar, and simplistic site structure all contribute to creating a modern flair with a relaxed sense of style.

Before we begin, there are a few notes that needs to be addressed:

1. Lots of sites have different business and marketing needs and goals. It is advisable that those needs and goals are part of a strategic foundation that drives the metric performance and overall revenue generation of a website. In this tutorial, I will show a sample of why design, placement, and positioning is critical to driving that metric performance.
2. While this is a tutorial, it does not show the harsh reality of driving traffic, revenue, conversions, etc. of a website.
3. In designing a site, it’s best to start off with grids and naming conventions to help you sort, categorize and keep your design elements clean. It’s best to name a layer to describe the elements of that layer, and to create hierarchies of your layers through group folders.

Now that that’s been said, let’s work on creating the website.

Creating the Grid

1. Download and open the creative-tut.psd file at http://www.zioneyemedia.com/Creative%20Communications/creative-comm-tut1.zip. Or you can download the completed Part 2 tutorial at http://www.zioneyemedia.com/free-downloads.php.
2. View the rulers to create design parameters by pressing “Ctrl” + “R” (or Apple + R). Drag the ruler guides to the marks as shown. You may need to zoom in to make accurate guides.
   1. Vertical guides: 120, 200, 250, 700, 980, 1020, 1120
   2. Horizontal guides: 150, 200, 500

The Background Folder

1. Create a new folder, name it “bg,” and drag Layer 1 into that folder. Rename layer to “bg.” With that layer highlighted, select Filter > Noise > Add Noise on the top menu.
   
2. Select Uniform, amount 1, and click OK.
   
   Should look like
3. Still in the “bg” folder, create a new layer and name it “gradient.” Select the gradient tool (colors #2b0d0a to transparent), and shift-click from the top of the document to ruler mark 450
   
   

The Header Folder

1. Create a new folder, name it “header” and drag the “logo” folder in that new folder. With your new guides, ensure that the logo is between 0 and 150 horizontal grid, and 120 and 700 vertical grid.
2. Create a new folder, name it “ nav”, and with the font tool, use Helvetica Neue, 35 Thin, 19pt to create the navigation menus: “Services | Portfolio | About | Contact | Home”
   
3. Create a new layer, name it “line”, and with the pencil tool, draw line under the navigation menu using 1px, color 2b0d0a, 20% opacity, and 50% fill.
   
   

The Portfolio

1. For the background of our main focal point, use the elliptical marquee tool, and utilize the rulers you created to get a good feel of the oval you’re creating. For this tutorial, I am using the vertical guides between 200 and 1020 and horizontal guides between 200 and 500.
   
2. Create a new group folder and name it subheader. In a new layer, name it “bg”, select the gradient tool, reflective gradient, and shift-click from the middle of the ellipse to close to the top. Deselect.
   
   
3. Highlight the portfolio bg layer, then select the rectangle tool, create a rectangle covering the ellipse, then delete using the delete button on your keyboard. Deselect.
   
4. Highlight again the layer, right-click and select Layer Properties > Inner shadow > Multiply 75%, 90 degrees, 5px distance, 5px size.
   
5. You should get something like this:
6. Open a new layer, name it grunge, and select paintbrush to work on a grunge-ish background.
   1. There are lots of websites to get grunge backgrounds for your site. One of my favorites is Brusheezy.com. For this example, I used “p-i-b grunge3”, 3rd brush from the left.
      
7. With your paintbrush, apply the background to the top left-hand corner. Duplicate the layer then drag the background to the bottom right-hand corner. Select Edit > Transform > Rotate 180 to rotate your background to fit the edge of the portfolio bg.
   
8. Insert a new layer underneath your grunge background, name it “color layer,” and with the rectangle tool, create rectangle box within that area.
   
9. Using the gradient tool, with the color palette #b36d07 to transparent, shift-click and drag your tool from the top of the rectangle box to the bottom.
   
   
10. Next, create a group folder within your subheader folder and name it “samplesite”. Create a new layer, name it “btn”, and using a rounded rectangle tool, create a button about 190px x 20px somewhere on the bottom right-hand corner. Use #2b0d0a as the color, and anywhere between a 20 to 50 radius.
    
    (zoomed)
11. Type “Visit the Site” on top of your new button with the following specs
    
    
12. We’re now going to complete the verbiage for our sample portfolio. Since this is just a sample, I’m going to write in generic verbiage. However, on a real portfolio, you should use a catchy title (like the name of the site, or infuse keywords with your title) and the nature of that project (i.e. web design, logo, print, etc.).
    
    
13. Add a web site image to complete the portfolio. I chose to put an image of a very old site that I created 5 years ago as a sample. Always rasterize your image if you are going to add/edit any layer properties for that image.
14. For arrows to rotate the images, I used the “< " and ">” sign for left/right button. You should have something similar to this.
    

The Body

1. To create the body, use the grids you made earlier to position the body content. The vertical grid starting at 500px on down, and the horizontal space between 200px and 700px will host the body. The horizontal space between 200 and 500 will host the main content and from 500 to 700 as the right bar. Now let’s create the main content.
2. Create a new group folder and name it “body.”
3. Create 2 group folders under “body:” maincontent, and right nav.
4. In the maincontent folder, using the specs below, insert “Insert Title Here” as your title. This is just to start off on the design aspect of the page, but we will infuse SEO on our site later on.
   
   
5. For the body content, I went to www.lipsum.com to generate dummy text for our site. Insert your contents under the maincontent folder. Use the text specs to create your sample body paragraphs.
   
   
6. Next, let’s create the sidebar border to differentiate the body from the right bar. In a new layer called “sidebar,” use a pencil tool to create a sidebar border with the following specs:
   1. 1px weight
   2. Color 2b0d0a
   3. Positioned just outside of your paragraph
   4. Opacity and fill 50%
7. You should see something like this:

The Sidebar

1. Here’s what we’re going to create: img31a
2. Under the right nav folder, type “Show your support” using the following specs:
   
   
3. Leave room below your new text to insert social media buttons, and on a new layer, use same specs to create “Free Quote”
4. There are many places to get free social media icons online. I got downloaded mine from http://directoryfordesigners.com/50-free-social-media-icon-sets-for-your-bloghttp://www.directorydesigners.com. Once you have chosen your social media icons, insert each social media under the right nav folder and resize to fit your sidebar.
   
5. For the Free Quote box, create box in a new layer under the free quote text and name it “quote bg.” The width I chose is 250px by 210px, using the color #2b0d0a. Next, we need to separate the box to create the elements of the form, primarily Name, Email, Your Message, and a submit button. To separate out the box, use the single row marquee tool and create sections on box by pressing delete button. Make sure that the comments section is bigger than the rest.
   
6. Use Helvetica Neue, 35 thin, and 14pt to type in name, email, your message, and submit.
   

The Footer

1. Now for the footer. Create a new group folder, and name it “footer.” In a new layer called “bg”, use the rounded rectangle box with 50px radius and color #2b0d0a to create the footer background. I used the horizontal grids between 120 and 1120 to ensure more accurate formatting and placement.
   
2. Highlight the footer background layer and create layer mask (Layer > Layer Mask > Reveal All)
3. With the gradient tool, apply mask so half of box is transparent
   
4. Select the layer again and add satin effect to the background through your layer properties.
   
5. Next, change opacity and fill of your background to 70%.
6. We’re close! Now for some content. On the left hand side of the footer, type in “Copyright 2009 by Creative Communications. All Rights Reserved. Services | Portfolio | About | Contact | Home Sitemap | Terms of Use | Privacy Policy” using Helvetica Neue, 35 Thin, 12pt and 24pt vertical line height.
7. On the right side, type in the following text using the same specs above:
   “12345 Address 1 Your city, Your State 77777 800-555-5555 info@creativecommunications.com”
8. To separate the two texts, grab your content sidebar, duplicate it, drag it so it resides under the footer folder, and resize to fit the footer bg and footer text.
   
9. Your final product should look something like this:
   

Voila! Creative Communications website is designed! Let’s look at the key details here:

1. The portfolio aspect of this page is the primary incentive and main focal point that the company is driving, providing a) a method for the company to showcase its work, and 2) the ability for a user to engage with the company.
2. Since a user’s eye typically travels diagonally from left to right, the eye thus glances (and focuses) on brand logo, focal point, and then right sidebar, which starts off with the company’s social media. This is their secondary incentive, which fits well with the marketing and business functionality.
3. Tertiary goal is to get the user to sign up for a free quote. As the user’s eye travels towards the social media, the quote piggy backs from their SMM exposure and thus provides a natural flow progression from brand to contact.

Like what you see? Download the full Part 2 tutorial at http://www.zioneyemedia.com/free-downloads.php.

Be Sociable, Share!

• 

Related posts:

1. Five SEO Writing Tips for Your Blog or Website

Written by David Abling

Online marketing specialist. Web Designer. SEO/SEM/SMM dude. Musician. Emcee. Bboy. Fashion Freak.