Dan Olsavsky's Blog

The days of plain text, animated gifs and blue underlined text-link navigations are no more…and with good reason. Web designers have come a long way since the early years of the World Wide Web. While websites are still designed around the old cliché “function over form”, but there is currently more focus on the importance of an aesthetically pleasing website.

Some of the most common design features are: simple layouts (generally one to three column layouts, center aligned on the page), subtle 3d effects such as gradients and drop shadows, soft, neutral tone backgrounds, contrasting bold colors are used to emphasize call to actions, simple icons are used sparingly (again to emphasize importance), lots of white space (which is not always white) and large bold text to differentiate from the really important and less important content.

A blog, short for web log, is a website or webpage where the user can easily publish new information on a regular basis. Blogs allow you to add a new page of content while archiving the old ones in a well organized fashion. Updating a blog is a faster process than contacting a web designer with changes or doing the coding and uploading yourself. Bloging software is very simple to use and a great way of self-managing the content on your website.

The modern blog has evolved from an online diary to a powerful and cost efficient marketing tool (search engine marketing has the lowest cost-per-lead and the highest return on investment). By intergrating a blog in to your website, you are increasing your websites ranking, popularity and most importantly positioning.

One method of increasing your website rankings, in a short period of time, is by adding fresh content frequently. Because blogs are text rich webpages, Blog posts are naturally search engine friendly. By frequently updating your blog with fresh content, you are increasing your position in the search engine results.

The second most efficient method of increasing your website rankings is by adding relevant text links. Links pointing to and from your Blog from similar business and/or organizations also aid and assist in bringing your website to the top of the search engine results. It is easy to exchange links as most business and/or organizations are willing to network with similar websites. Link exchanges with other websites are easy to implement with most blogging software.

• accuracy, does it look like the composition


• 8 html pages created from a template


• roll-over top navigation


• optional region for mini-contact form (does not display on main contact form)


• main contact form on contact.html page


• correctly aligned/tabbed mark up


• acceptable file structure & naming conventions


• broken links (you should not have any)

• accuracy, does it look like the composition


• 8 html pages created from a template


• roll-over top navigation


• optional region for mini-contact form (does not display on main contact form)


• main contact form on contact.html page


• correctly aligned/tabbed mark up


• acceptable file structure & naming conventions


• broken links (you should not have any)

Today is the deadline for signing up for your web hosting service/registering your domain name

Click here for details

I will be checking tonight, due by end of class. 50pts.

10 points will be deducted for each class it is late **

** This is a requirement for this class, you must purchase a domain/ hosting service to pass.

A must read

Please read the following article and post a comment. 15pts. Due by 11/28/06.

Assignment 4

Real world situation

You have received feedback from your client, based on the information you received from the critique and you must now edit your composition.

The catch...The deadline is near and your co-worker is out on vacation. The composition changes have now been handed down to you. You must, to your best ability, edit the composition based on the notes provided.

Switch compositions with a class mate, review their critique notes and make the changes.

Assignment 3

Now that you have done the research for your client, wrote the proposal, designed a logo and developed a flowchart, you will now be designing the website.

Using the index.psd file from the "new_client_folder", choose a color palette and a design a composition ("comp"). Remember, you are only creating a static image of what the website will look like.

Projects due beginning of class
Review and critique projects in class
Reading Exercise: Web Graphics.4, Pages 41-65
Review and grade proposal/flowcharts
Project 2
Project 1 Due - Beginning of Class

Your project files should be in a folder (titled "lastname_firstname") and placed in to the drop box (Niteweb-->Public-->Dropbox).

We reviewed and critiqued the logos in class. Based on the feedback that you received, you should edit your logos accordingly.

I reviewed,critiqued graded and returned the proposals,flowcharts and logos

Reading Exercise

Web Graphics.4, Pages 41-65

Project 1

We will be working on Project 1 in class. Please see the previous blog post for details if you were abscent.

What you do not finish in class is homework. The projects are due on Tuesday.

Assignment 2

Step 1

You will be writing a proposal to a client. Explain to them why you should design and brand their website. In your proposal, you must explaining to the client what you are proposing, how you plan to do it, when you plan to do it, how much it will cost, and how much "say" the client has. You will also report the marketing research that you have done for their company, product or service. The idea is to rationalize to the client why you made the choices that you have, how did you choose the color palette, how/why you will design the logo.

Step 2

The client has accepted your proposal, you must now design a logo. The logo should reflect upon the type of company, services offered, what the company specializes in and your target market.

Step 3

The client has accepted your proposal and logo, you must now create a flowchart for the website. Use the methods we discussed in class to visually display what elements will be contained within the website. The flowchart should include such elements as: navigation (top, side or both), direct marketing tools (mini contact form, newsletter), Calls to Action (CTA's) and any other graphical/verbal elements.

Due Tuesday September 12th, beginning of class

We will be reviewing the logos in class

Branding

Branding is your identity in the marketplace, your company image and the appearance of your packaging.

Identity packaging can be judged and represented by the following business tools:

• business cards


• stationary (envelope, letterhead)


• website


• email address

Corporate Identity

Branding Sites

The objectives of a good brand will achieve:

• Delivers the message clarly


• Confirms your credibility


• Connects you with your target audience emotionally


• Motivates the buyer


• Loyalty

Your brand resides within the hearts and minds of your customers, clients and prospects. It is the sum total of their experiences and perceptions, some of which you can influence and some you can not.

Online Branding

Who does branding online?

Anyone who is not directly selling their product or service online.

How to evaluate your brand

• Brand loyalty


• Brand awareness


• Perceived quality


• Brand associations

Beyond branding

Think of your brand as a promise to your customer.

Some examples of that promise are:

• convenience


• achievement


• fun and adventure


• belonging

Tips for developing a branded site

• Create a positive experience (easy-to-use, delivers value, interactivity, personaized and timely)


• Reflect and support your brand


• Keep your banding consistent with your other advertising mediums

Unique Selling Points

• Price


• Product/Service quality


• Innovation


• Marketing


• Convenience


• Extensions (add-ons)

Ways to define your brand

• What product/services do you offer


• What are the values of your company


• What do you specialize in


• Who is your target market

Using these examples and more, create a personality or character for your company

Web Aesthetics

"Web Aesthetics are some generally agreed upon ideas about what makes effective communication in a web site. These ideas are constantly evolving and are employed to make navigation simple, and information easy to find."

Common Traits in Modern Web Style:

• Simple layout


• Centered orientation


• 3D effects, used sparingly


• Soft, neutral background colors


• Strong color, used sparingly


• use icons sparingly


• Plenty of white space


• Nice big text

Design for the internet

The Internet, since it is monitor based, uses RGB files at 72 DPI.

How it Looks vs. How it Works

Website Planning

Storyboarding and Flowcharts

Color Palettes

Examples:

• http://www.colourlovers.com/


• http://www.designmeltdown.com/

Fonts

Reference:

• www.dafont.com


• http://www.lipsum.com/

Assignment

Using Photoshop, design a simple layout for a website. Try applying the common traits of modern web style in your composition.

Step 1

Sketch 5-10 different thumbnails. Pick your favorite one, as it is what you will use in step 2. For inspiration, it may be helpful to research a few of your favorite websites.

Step 2

You will be using the index.psd file to complete this assignment.
Select a color palette and begin your design.
You don’t have to add images graphics or logos, you can simply use colored boxes and shapes. For the content area, use the text generator at, http://www.lipsum.com/. You can use words and phrases such as “logo goes here” or “contact form goes here”, as a visual representation of your ideas.

Due Tuesday September 5th

Here is an example of your assignment:

Need more inspiration?

• Color Palettes


• Color Palette Tool


• Design Trends


• Web Design Inspiration


• Favorite Website Awards

Reading Assignment

• Photoshop CS for the Web book , pages 64-70, try exercises 1,2,and 3.
• Designing Web Graphics, pages 17-34.

Demographics

Demographics is a shorthand term for 'population characteristics'.

Some Examples Are:

• Age


• Sex


• Geographic Location


• Economic Situation

Identify your demographics through statistics and study your competitors.

Psychographics

Psychographics is a system for measuring consumers' beliefs, opinions and interests.

Some Examples Are:

• Spending patterns


• Are they brand conscious


• What influences their buying behavior


• What promotional efforts they respond to

7 Psychographic Profile Groups

• Belonger


• Achiever


• Emulator


• Socially Conscious Type A


• Socially Conscious Type B


• Balanced


• Needs driven

Analize Your Competitors

Some Examples Are:

• What are the differences between your product and theirs


• In what ways do they market their product


• What is their advertising message


• What is their overall goal

Direct Marketing

Direct marketing is a sales method by which advertisers approach potential customers directly, with products or services.

Some Examples Are:

• Direct Mail


• Telemarketing


• Email


• Newspapers/Magazines

Generating a Response

• Targeting - demographics & psychographics


• Offer - what are you affering


• Timing - is it a good time to sell your service


• Creative - stand out by using imagery and words

Ways to direct market on your website

• Newsletter or mini-contact forms


• Contact form


• Coupons

Additional topics

We also reviewed our naming conventions and file structure. I will only be accepting files in the format we discussed.

We took a look at Photoshop and the format we will be using to layout and design websites.

Homework will be assigned Thursday.

Remember to bring your books to class!