Example

December 2003 Design Basics Presentation

Account Executives. Their role in the development of a web site. Account Executives are the primary and most important communication tool between the client and the web site development team. We depend on you to understand the client’s needs and expectations – as well as our own! This presentation is designed to equip you with some of the knowledge you’ll need to operate effectively between your clients and your co-workers. google

Design: Good vs. Bad Why is design important? * A well designed site is easy to use . A poorly designed site is easy to leave! * Good design establishes credibility . And credibility generates trust . * People subconsciously associate the quality of your site with the quality of your product or service. * Aesthetics count . Many people are very visual. That’s why we like cars that look good, and homes that look good. That’s why we roll sticky-paper-rollers over our jackets before we leave for work. * An unprofessional-looking design instantly gives the impression that you’re dealing with an unprofessional company . According to a new study from Genex, 36.2% of Internet users say site design is very important, 28.7% say it is extremely important, and 13.5% say it is somewhat important. These people also say they will leave a poorly designed site for a better designed site to buy their goods. Marketing Wonk, June 2003 google

Some designs that we like, and what we like about them: http://www.neuchatelchocolates.com http://www. beinstep .com/index.asp google

Good site vs. bad site A one-on-one comparison Exercise: Let’s attempt to see what each of these department stores has to offer right now in the shoe department. Let’s get some winter boots!!! Kenneth Cole? YES! google

Design Comparison – Before & After Before: Home page as we presented it. After http://www. keystonehelicopter .com google

Design Comparison – Before & After Before Secondary page as we presented it After http://www. keystonehelicopter .com google

http://www. philartalliance .org google

Some features of a bad web site design “ How to use the site” is explained by an annoying voice. We have to play the “make-me-guess” game, also known as mystery meat. Flash going on in more than one place. Ugly. More mystery navigation in product pages. Too many funny shapes, no great product shots. Amateurish buttons. Design aesthetics are inconsistent with this company’s credibility. google

LOGOS: What is a logo A combination of characters and/or graphics creating a single design used to identify a company A recognizable graphic design element, representing an organization or product. A symbol or other recognizable form that allows others to recognize your company, its products, premises etc. Let’s look at some great logos: Some Great Logos! Note that none of these logos tell you what the company does! google

Why is a logo design quoted separately from a web site design? A logo design is a project in itself and requires as much thought and creativity as a web site design, and in many cases, even more. Many companies spend hundreds of thousands of dollars on logo development. These two companies have invested heavily in their logos and corporate identity. Their logos have evolved to a point where people can identify them easily - even when they are not in their true form, and without their names being present. google

Advance Design logo development To give you an idea of the work involved in a logo design, let’s look at the development process that took place when the Advance Design logo was created. google

Advance Design logo development google

How should clients supply their logo art to Advance Design? The better the quality of the logo they give us, the better it will look on the website. Sometimes clients have a good quality logo on an existing site, and we can copy and paste it. Clients can e-mail logos or supply them on a disk as an eps, tiff, jpeg or gif . We prefer an EPS or TIFF . They can also supply original art in Illustrator, PhotoPaint, PhotoShop or CorelDraw . If they have a nice quality, clear logo of reasonable size on a brochure, we can sometimes scan it. Business cards and letterheads are seldom a good source of logo art as they are too small and not always beautifully printed. google

How we recreate a logo if a client can’t give us one. Some logos can be redrawn in a graphics program. This normally applies when a logo consists of text and a simple shape. If the logo includes a complex illustration, we may not be able to redraw it. EASY TO REDRAW PAINS-TAKING TO REDRAW ONLY IF YOUR NAME’S MICHELANGELO google

How to identify a logo that may be difficult for us to use. Close up view shows a “dirty” logo with fuzzy edges. Cannot easily be selected and changed. Too small. But if this is a regular font, we can replicate the logo. Very integrated with the current web site’s background Too small. Logo is 3D with a metal effect. google

How to identify a logo that may be easy for us to use. Variety and Google are clean and clear and can be used just as they are here if we keep them on a white background. Using them on a color would be more of a challenge. VW USA has a small logo that would be easy to use and also easy to remove from its background as it is round. Note that the VW USA website has broken conventions in a very big way by using their logo at the bottom right – not top left – consistent with their print campaign. Blue Nile – easy to use as is, but not if we want to make it bigger or change its color google

Colors: How to discuss colors with clients “ Mere colour, unspoiled by meaning, and unallied with definite form, can speak to the soul in a thousand different ways.” Oscar Wilde When selecting colors for use on a website, we may have to factor in any of the following things: 1. Client’s personal taste 2. The company’s corporate color scheme 3. The color that the product dictates – eg. Think… diamonds , caulking guns , diapers 4. What happens to colors when we publish them to the Internet 5. The limitations of the web-safe color palette 6. Viewers light/dark screen settings 7. Color wash-out on laptops 8. The difference between web colors and printed colors google

Colors: How to describe them google

Colors: Web-safe Colors are a set of 256 colors that were created in RGB and determined to be the fastest to download . But of the 256, many are not very attractive. Now that so many people have high-speed internet access and more powerful computers, many sites – including ours – feature colors that are not considered “web-safe”. Web-safe or browser-safe colors are a set of 216 indexed colors which can accurately be displayed by different browsers cross-platform. RGB: For Monitors CMYK: For Paper google

Photography and its use in web design. Why are photographs important? They tell a story that would otherwise have to be told in words: OR… google

Photography and its use in web design. Why are photographs important? Like the design, they add an element of visual interest to the page, and, depending on their quality, they establish (or ruin) the company’s credibility: “ Our team at work!” OR “Our team at work!” google

Let’s look at those photos again! It’s all in the details: Good lighting – no shadows, you can see their face details, the room is evenly lit. The table has relevant props. The focal point (standing man) is framed by attractive plants. Good perspective – the rectangle is filled with people . It’s all in the details: Bad lighting – heavy shadows, you cannot see their face details, the room is unevenly lit. The table has messy props. The focal point (standing man) is framed by ugly brown things. Bad perspective – the rectangle is filled with wall and ceiling . Which company would you hire? google

Good portrait vs. bad portrait. Ann Betty Subject: Middle aged woman with short blond hair. Ann’s face is framed by soft, muted colors . Betty’s head is chopped in half by a horizontal line and she has a flag growing out of her ear. Ann was told she’d be having her photo taken today and dressed accordingly. Betty probably wasn’t and came to work looking a bit homely. Ann has a high-cred business situation going on behind her. Betty has a low-cred office equipment/partition situation. Ann is facing into the photo with no redundant space around her. Betty is facing out of the photo with a lot of redundant space behind her. Ann’s face is lit from the front. Betty’s face is lit from the top. google

Photography and its use in web design. The lectures are all very well, but where does this leave the Account Executive? You may not always be able to coerce great photos out of a client, but you can always demonstrate what you have just learned. Bookmark two websites for comparative purposes or print out visual comparisons so clients can see for themselves what the benefits of good photography are. Ask clients if we can quote on photography. Use your discretion. If a client already has 7000 photos of industrial widgets that don’t have to look like the diamonds at Tiffany’s, you’re not likely to talk him into re-shooting Demonstrate what can be achieved with great photography. (See next slide) Remember that we are also able to take photographs for clients who don’t have a large budget for photography, but we should make it clear to them what our capabilities are – let’s discuss them now! google

Photography and its use in web design. http://www.santafe.org/ This is a site a client named as one of her favorites. No doubt, the beautiful photo at the top (which is part of a flash sequence) contributed to her attraction to this site. Above – the quality and size of photos that she supplied for us to use in our design. We were initially told we could not purchase stock photography. After the design was rejected many times, we were allowed to purchase a couple of photographs, but it was too little, too late. See how bad photographs effect a site's credibility See how good photographs make a difference ( http://shop.store.yahoo.com/artisticsilver & http://www.tiffany.com/ ) google

StockPhotos and their use in web design. Most of our purchased images come from Getty Images, a huge collection of professional images from dozens of photo libraries. They are: All taken by professional photographers. Available for web or print (we’ll discuss the difference later). Generally much cheaper than employing a photographer. Unfortunately, not always appropriate for all clients, some of whom have very specialized applications. google

StockPhotos and their use in web design & print. When we order photos for clients, we have to predetermine whether we will be using them for the web only or print as well . Web requires a resolution of 72 dpi (dots per inch) to match monitors, while print requires a finer resolution – 300dpi - to match the requirements of printers. 300dpi photos can easily be converted to 72dpi, but not the other way around. (See printed sample) google

F O N T S When we design a web site, we have a choice of using conventional fonts or pixel fonts for the non-html text on the page – e.g. the buttons. google

F O N T S Pixel fonts, like TENACITY, fit exactly into the pixels on a monitor. Conventional fonts, like SWISS, blur at the edges to accommodate the screen resolution. google

F O N T S Conventional fonts look nice if used at the right size. As they are graphics, they cannot be read as text by search engines. Pixel fonts look nice because they are so sharp, but they are only available in small sizes. As they are graphics, they also cannot be read as text by search engines. google

F O N T S Let’s identify the pixel, graphic and html fonts on the CNN web site: If you can scroll over a word and select only half the letters in it, it’s an html font. If you can’t select individual words, or if you can right-click on it and go “Save picture as…”, it’s a graphic. The most popular default html fonts are Verdana , Arial and Times Roman for PCs and Helvetica , Geneva and Times Roman for Macs. Let’s discuss why we use html fonts in the body of websites. http://www. cnn .com google

Flash. How we should use it Flash is an exciting and effective way to bring movement to a website. We need to understand the facts about FLASH: One of the big problems with Flash content is that it's very hard to find Macromedia Flash and other non-HTML formats can pose problems for search engines, unless you take appropriate steps to optimize the content . Search engines were originally built to index and serve HTML documents. Now the web has become more diverse in content types, and knowing how to treat Flash and other types of content has become more important for search engines Not all search engine spiders have the ability to crawl or index Flash, however some – like Google – can follow embedded links. Flash is the leading vector graphics technology for creating design-focused web sites. Over 98 percent of Internet users can view Flash content with the Flash player software already installed in their browsers. Over 490 million people use the Flash player. Read more about Flash and search engines http://searchenginewatch.com/searchday/article.php/2200921 . How most people feel when they view a site that has too much movement going on! google

Frames. Why we don’t use them. “ Sorry! You need a frames-browser to view this site. ” Search engines have a tough time with frames. Using frames either prevents them from finding pages within a web site, or it causes them to send visitors into a site without the proper frame "context" being established. The content for frames pages actually comes together from a few different pages that are blended together according to the instructions of yet another "master" page, also called the "frameset" page. Many search engine spiders will only see the master page, failing to read all the important optimization information that we place in web pages in order to be identified and found. This is what many viewers see when they arrive at a frames-based website – including me with my brand new Dell computer with XP and Internet Explorer! Read more about Frames and search engines. http://www.searchenginewatch.com/webmasters/article.php/2167901 Frames also have many “annoyance” factors. Sometimes there are so many of them on one web page that the important info we want to see is squashed into a tiny little block, navigable only by mean of numerous confusing scroll bars. Frames print badly, show the wrong url, can’t easily be found, and the size doesn’t adjust proportionately for smaller monitors. They prevent the bookmarking of any but the home page of a website. google

Navigation should be intuitive “ I think I see the How-to-Order Page, Captain!” “ Nah! Let’s just go back to Contact Us page and try calling them.” Navigation is as important a design feature of a web site as any of the graphics, text, or visuals. A website's navigation should consider the following: From any page on the site, can a new visitor to the site easily and intuitively find their way around the site? Will that visitor feel comfortable moving around on the site? Can they find the Home page again? Is the contact information readily accessible from the pages where it is needed the most? Most importantly, can the visitor quickly and easily locate the product and/or services you are selling? Navigation google

Different Types of Navigation Why vertical navigation can go on forever… while horizontal runs outta space Graphic Buttons vs. HTML Buttons Take longer to download Look “pretty” and contribute to the look of the design Don’t contribute much to optimization Are not easy to edit Appear quickly like text Look like plain text Contain words that search engines can read, though are not necessarily keywords Are very easy to edit google

Why is it important to establish as much as possible about the sitemap and navigation requirements before we start a design? Starting a design without a well-thought-out web chart is the equivalent of building a house without the blueprints. Why do we have to discuss future growth with the client? When we design the navigation, we need to anticipate whether it will last until the design is refreshed a year or two later, or if the client is considering imminent additions or changes. The Challenges of Navigation Primary navigation, secondary navigation and deeper navigation: Let’s look at how some sites handle navigation challenges and examine their potential for growth. google

Gathering material to build a website Among the “materials” we need in order to start designing a web site are: The client’s logo Any available photographs (or permission to use stock photos) If possible, text (or an arrangement to write it ourselves) Any other physical things a client may want to include in the site… certificates… samples of stuff for scanning or photographing…other logos…disks with products or databases google

Excuses clients will use for not giving you what you need, and what to do about it. “ We have seven thousand photographs. I’m too busy to go through them now. Do the design first and we’ll give them to you later. Just use blocks where the pictures would be” Taken from an actual conversation. Tell them: NO! But tell them nicely. The photographs often dictate or inspire the design. They play an important role in helping us choose colors. We have no idea how they can be used, or what their potential is if we can’t see them. google

What a design looks like with “blocks” in place of the photographs: Which would you prefer to present to a client? google

Excuses clients will use for not giving you what you need, and what to do about it. “ We had a new logo designed but my dog ate the only draft. Now the designer’s busy doing another one but it will take eleven weeks and we can’t wait. Please start designing our web site now!” Tell them: The color, font, style and shape (portrait or landscape) play a VERY important role in the design of a web site. If we simply “leave a space” for the logo, it may be the wrong shape and the entire website may be the wrong color or look to accommodate the logo. Fixing it could be expensive…living with it could be unattractive. google

What a design looks like when the logo comes along after the design is complete: Here is an example of a site that was designed with a very “square” look and the logo provided later was curly and whimsical. The site was designed in blue and gold – the logo had green! We managed to salvage the design with just a few compromises. The design as it was with it’s “temporary” logo: google

And finally… don’t forget that whenever any of this seems unclear…we’re all here for you to talk to us about it. What was that you said about 300dpi again? Me? You must’ve dreamt it! google

Example

More Related Content

What's hot

Viewers also liked

Similar to Example

Recently uploaded

Example