The Beginnings of a Web Site

In this 5-part tutorial, I am going to attempt to show the making of a web site – from the initial consultation, to the design and development, to the marketing of a web site. The initial consultation I mention is a web site creation document that I use to help clients figure out the logistics of their website: its design and look/feel, its functionality and usability, and its marketing and SEM-related initiatives. You can download this document from at http://www.zioneyemedia.com/sitecreation.doc.

I have broken the tutorials down to summarized sections below.

Part 1: The beginnings of a web site

Download and complete the web site creation document with all the necessary and vital data for designing the site. This includes, but is not limited to; color schematics and design look/feel, marketing content, traffic development, functionality and usability. Use the data from this document to gather information on how to create the logo and thus brand the site from the start.

Part 2: Designing the web site

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.

Part 3: Slicing, converting, and deployment

With the site fully completed, images and other design elements will be sliced and converted to web-appropriate images. Site layout will be created with CSS, and other elements and interactivity of the site will be created with the appropriate language and application if applicable (i.e. Flash, JQuery, etc.). Testing of the site will be needed to ensure cross-browser functionality.

Part 4: SEO and content development

The fun part!! Research and implementation of targeted keywords based on site document data to various code segments. Create engaging content to provide streamlined, friendly communication with its target audience. Use SEO fundamentals and tactics within content to create viable search marketing initiative. Show targeted placement and positioning of call-to-action verbiage and engagement methods.

Part 5: SEM and online marketing

Submit to search engines, directories, and other avenues of search. Connect to and advertise/marketing through social mediums and bookmarking mediums. Conduct link exchanges. Expose through public relations sites and other avenues.

Now that you have a glimpse of what each tutorial will look like, let’s take a look at the web site creation document I created for this sample company. I’ve extracted most of the data from the document for easier viewing of this tutorial.

Web Site Design Creation

Fictional Company Name: Creative Communications
Fictional Company Business: Marketing, Advertising, Public Relations, Design Firm based in San Diego, CA
Objectives: To create an online presence that presents our company values: Clear, Crisp, Concise, Catchy and Creative. To present an integrity-based communication agency that is modern in approach and relaxed in style.
Target Audience: Small to medium-sized businesses, non-profit organizations, any industry
Current Target Audience Perceptions: Creative Communications is a brand new company getting its name and brand up, so no target audience perceptions so far.
Net Impressions: Want the site to look warm and appealing, but yet bold enough for engagement. Earth tones would be nice.
Key copy points: Want to emphasize specific marketing communication that is:

• Clear and understandable
• Crisp methods of modern approach
• Concise and to-the-point communication, honest and forthright
• Catchy advertising that is memorable, far-reaching, and targeted
• Creative in its conception, development, implementation and management of design and marketing

Information hierarchy:

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

Navigation: Easy to use with minimal clickthroughs. Clear and concise navigation flow to direct user to where they need to be when they want to be.
Sitemap: See information hierarchy.
Additional functionality: No shopping cart. Will need contact form and interactive way to display / show portfolio
Keywords/tags: Need to be targeted to San Diego and/or southern California geolocation. Include advertising, marketing, web design, print design, brand marketing, search engine marketing, print marketing, etc. **More information will be conducted and discussed in part 4 of the tutorial**
SEM: Submission to local search and national search. Submission to PRWeb and other PR related sites. Needs to be exposed as much as possible through social media.
How to drive traffic: Specific, engaging call-to-actions needed. Social Media! SEO, but no pay-per-click
Pros/Cons of competition: Some sites are weak in message but powerful in display. Other sites are weak in display but powerful in message. We want to be powerful in both display and content. **Since this is a sample business, I can pretend to use pros and cons about the competition, but in reality, strategy through market research is a key use of gaining exposure, market share, traffic and conversion generation.
Others: **This includes resource, budget, timeline, and other necessary information not listed.

As you can see, the document contains questions that can be answered exhaustively if business needs allows it to. For this tutorial, I kept it as short and concise as possible. With the details in place, let’s start first with the main branding.

Steps to create logo:

I admit, I am no expert in logo creation, but I do love a well-made font logo, which is what you will see in this tutorial. I will be using Photoshop CS4 instead of Illustrator to design the logo and web site. I will make it as crisp, clear, concise, and creative as I can without sacrificing look and brand value.

1. Use site document to extract marketing/business data and design feel
2. Go to Kuler (kuler.adobe.com) for color schematics
   1. For this practice, I’ve chosen the following (Ground Olive by matthaios):
   2. 1. Base Color: e7dfa0
      2. 2b0d0a
      3. 581f1a
      4. b36d07
      5. 706933

   

3. Open up Photoshop, create a new file with the following specs:
   1. 1240 x 1024 pixel **
      ** We are going to use this file to construct the rest of the site, which is why it is easier to use a bigger page!
   2. 72 dpi
   3. RGB color mode
   4. Transparent background **
      ** We are going to use Layer 1 as the potential background of the site.
   5. Save the file name as “creative tut”

   

4. Fill Layer 1 with the color #581F1A
5. Using the font tool, type “crea+ivecommunications” (minus the quotations) somewhere on the top left-hand corner using the following specs:
   1. Helvetica Neue (or Helvetica if you don’t have it)
   2. 65 medium character style
   3. 45 pt font size
   4. color # e7dfa0.
   5. We will play with the exact positioning of this logo during Part 2 of the tutorial.

   

6. Highlight the “a+” with your font tool, and on your character window, change the color to #B36D07. Highlight the “+”, then click the superscript tool to change the positioning of the + symbol.
   
   
7. Again, with your font tool, highlight the “crea+ive” text. Go to the character window and select “95 black” as the character style for this word.
8. With your font tool, highlight the “communications” text. Go to the character window and select “35 thin”.
   
9. Now let’s look at the sub-logo of our brand. We are going to infuse the 5 core values of the company under the brand name. Using the font tool again, type in “Clear. Crisp. Concise. Catchy. Creative.” (without apostrophes) just below the logo you just created, using the following specs:
   1. Helvetica Neue
   2. Color # e7dfa0
   3. Font size 15pt
   4. 65 Medium weight
10. Highlight the sub-logo with your font tool, and on the character window, set the tracking of the characters you selected to “200”. With the characters highlighted, select the small caps on your character window. You should now see something like this:
    
    
11. Nudge the sub characters to make it centered below the main brand.
12. For a little creativity and flashiness, let’s add some font shadowing on the brand. We are going to rasterize the fonts to make it a little easier to augment. To keep my sanity, I always make double copies when I am rasterizing fonts, just in case something goes awry.
13. Make two (2) copies of the “crea+ivecommunications” text to play with. You can accomplish this by doing one of the following:
    1. Dragging the file towards the “create new layer” button on the bottom of your side panel window (see text7.spec.jpg), or
    2. With the move tool, ensure you’re on the correct layer being duplicated. Press and hold the “alt” and “shift” button on your keyboard on a PC (apple and shift on Mac), and left-click on the text, dragging the text (and consequently a duplicate layer of the selected text), or
    3. Right-click on the layer, select “duplicate layer”, and rename it to however you wish to name the file.
    4. In this tutorial, I am choosing method C, duplicating the layer 2x.

    

14. On the side panel, click on the eye of the original “crea+ivecommunications” layer so that we don’t accidentally mess that layer up.
    
15. Now, let’s rasterize the duplicate layers. On both of the duplicates you made, right click each layer, and select “rasterize type”. You should see something like this:
    
16. We are going to use the bottom duplicate to create the text shadowing. To do this, select the layer, and on the top main menu, select Edit > Transform > Flip vertical.
    
17. You should now get something like this:
    
18. Drag the inverted text using the move tool so that it shows just underneath the other logo text. Leave a tiny line of about 1px in between the two (2) copies.
    
19. Click on the inverted text layer on the right side panel to highlight the layer, and on the top main menu, select Layer > Layer Mask > Reveal All
    
20. You should have two (2) boxes besides your file name as seen below.
    
21. We are now going to make a shadow of the inverted text to create a mirror of the logo. Make sure that the white box on inverted text layer on the right hand panel is selected before proceeding. Select the gradient tool, and make sure that the gradient colors are black to white.
22. With the white box selected on the inverted text layer, do the following:
    While pressing the shift button (PC), left click your mouse and drag from the middle of the inverted text to the top of the normal text.
    ** Pressing the shift button will ensure that you will have a straighter gradient when you drag your mouse. **
23. Your final product should look something similar to this:



24. An optional thing to do, if you feel it appropriate, is to make the “creative.” portion of the sub-logo to be the same color as the “a+”. To do so, highlight the “creative.” portion of the sub-logo using the font tool, and change the color to #B36D07.
25. Your alternative final product should look something like this:
    

Whew! This now concludes the Part 1 tutorial. Part 2 will be designing the actual website based on what we have done here. You can download the zip file of this Part 1 tutorial at http://www.zioneyemedia.com/free-downloads.php, which includes a word doc version of instructions, Photoshop .PSD file, and images.

Hope you learned a lot from this tutorial and have a great time designing!

Related posts:

1. Designing the Website – Part 2
2. Reading XML Using Flash
3. Change Text Selection Color using CSS
4. Client-Side Javascript
5. Become a Better Web Developer Using RSS

Written by Brenley Dueck