SlideShare una empresa de Scribd logo
1 de 47
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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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
Advance Design logo development google
Advance Design logo development google
google
How should clients supply  their logo art to Advance Design? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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:  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. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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

Más contenido relacionado

La actualidad más candente

Web Design/Development : Portfolio cum Presentation
Web Design/Development : Portfolio cum PresentationWeb Design/Development : Portfolio cum Presentation
Web Design/Development : Portfolio cum PresentationDeepak_Hasija
 
Web Design by Client Perspective
 Web Design by Client Perspective Web Design by Client Perspective
Web Design by Client Perspectiveeginni
 
Redesigning Our Intranet
Redesigning Our IntranetRedesigning Our Intranet
Redesigning Our IntranetGary Schroeder
 
What makes a good website
What makes a good websiteWhat makes a good website
What makes a good websiteganeaudiences
 
Website critique
Website critiqueWebsite critique
Website critiqueAzmiSuhaimi
 
6 Key Elements to a Good Website
6 Key Elements to a Good Website6 Key Elements to a Good Website
6 Key Elements to a Good WebsiteWebs
 
Website development proposal - Leadtrance Technologies
Website development proposal - Leadtrance TechnologiesWebsite development proposal - Leadtrance Technologies
Website development proposal - Leadtrance TechnologiesLeadtrance Technologies
 
Desktop on Tablet UX Audit
Desktop on Tablet UX AuditDesktop on Tablet UX Audit
Desktop on Tablet UX AuditTim Broadwater
 
Designing for Discoverability
Designing for DiscoverabilityDesigning for Discoverability
Designing for DiscoverabilityMolecular Inc
 
Ezio Magarotto UI, UX, IA Resume
Ezio Magarotto UI, UX, IA ResumeEzio Magarotto UI, UX, IA Resume
Ezio Magarotto UI, UX, IA ResumeEzio E Magarotto
 
Your Digital Brand: Building a Powerful Website
Your Digital Brand: Building a Powerful Website Your Digital Brand: Building a Powerful Website
Your Digital Brand: Building a Powerful Website Katharine Coles
 
Rich Interface Design
Rich Interface DesignRich Interface Design
Rich Interface DesignMolecular Inc
 
10 Principles Of Effective Web Design
10 Principles Of Effective Web Design10 Principles Of Effective Web Design
10 Principles Of Effective Web Designsirferds
 
Jensen Harris: Beyond Menus and Toolbars in Microsoft Office
Jensen Harris: Beyond Menus and Toolbars in Microsoft OfficeJensen Harris: Beyond Menus and Toolbars in Microsoft Office
Jensen Harris: Beyond Menus and Toolbars in Microsoft OfficeSteve Williams
 
SharePoint Saturday Boston #SPSaturday 3.4.09
SharePoint Saturday Boston #SPSaturday 3.4.09SharePoint Saturday Boston #SPSaturday 3.4.09
SharePoint Saturday Boston #SPSaturday 3.4.09Kanwal Khipple
 

La actualidad más candente (20)

Proposed solutions
Proposed solutionsProposed solutions
Proposed solutions
 
Web Design/Development : Portfolio cum Presentation
Web Design/Development : Portfolio cum PresentationWeb Design/Development : Portfolio cum Presentation
Web Design/Development : Portfolio cum Presentation
 
Web site proposal
Web site proposalWeb site proposal
Web site proposal
 
Web Design by Client Perspective
 Web Design by Client Perspective Web Design by Client Perspective
Web Design by Client Perspective
 
Redesigning Our Intranet
Redesigning Our IntranetRedesigning Our Intranet
Redesigning Our Intranet
 
What makes a good website
What makes a good websiteWhat makes a good website
What makes a good website
 
Website critique
Website critiqueWebsite critique
Website critique
 
6 Key Elements to a Good Website
6 Key Elements to a Good Website6 Key Elements to a Good Website
6 Key Elements to a Good Website
 
Website development proposal - Leadtrance Technologies
Website development proposal - Leadtrance TechnologiesWebsite development proposal - Leadtrance Technologies
Website development proposal - Leadtrance Technologies
 
Web proposal
Web proposalWeb proposal
Web proposal
 
Desktop on Tablet UX Audit
Desktop on Tablet UX AuditDesktop on Tablet UX Audit
Desktop on Tablet UX Audit
 
Designing for Discoverability
Designing for DiscoverabilityDesigning for Discoverability
Designing for Discoverability
 
Ezio Magarotto UI, UX, IA Resume
Ezio Magarotto UI, UX, IA ResumeEzio Magarotto UI, UX, IA Resume
Ezio Magarotto UI, UX, IA Resume
 
Your Digital Brand: Building a Powerful Website
Your Digital Brand: Building a Powerful Website Your Digital Brand: Building a Powerful Website
Your Digital Brand: Building a Powerful Website
 
Web design
Web designWeb design
Web design
 
Rich Interface Design
Rich Interface DesignRich Interface Design
Rich Interface Design
 
10 Principles Of Effective Web Design
10 Principles Of Effective Web Design10 Principles Of Effective Web Design
10 Principles Of Effective Web Design
 
Jensen Harris: Beyond Menus and Toolbars in Microsoft Office
Jensen Harris: Beyond Menus and Toolbars in Microsoft OfficeJensen Harris: Beyond Menus and Toolbars in Microsoft Office
Jensen Harris: Beyond Menus and Toolbars in Microsoft Office
 
SharePoint Saturday Boston #SPSaturday 3.4.09
SharePoint Saturday Boston #SPSaturday 3.4.09SharePoint Saturday Boston #SPSaturday 3.4.09
SharePoint Saturday Boston #SPSaturday 3.4.09
 
Website designing proposal with price
Website designing proposal with priceWebsite designing proposal with price
Website designing proposal with price
 

Destacado

Звіт про роботу за напрямками гри "Добрик 2014"
Звіт про роботу за напрямками гри "Добрик 2014"Звіт про роботу за напрямками гри "Добрик 2014"
Звіт про роботу за напрямками гри "Добрик 2014"Марія Ковальчук
 
Digital Marketing Summit 2013 (Mobile Era section on Mar 13th 2013)
Digital Marketing Summit 2013 (Mobile Era section on Mar 13th 2013)Digital Marketing Summit 2013 (Mobile Era section on Mar 13th 2013)
Digital Marketing Summit 2013 (Mobile Era section on Mar 13th 2013)Oranuch (mimee) Lerdsuwankij
 
Appui institutionnel à la Direction de la Programmation et de la Prospective ...
Appui institutionnel à la Direction de la Programmation et de la Prospective ...Appui institutionnel à la Direction de la Programmation et de la Prospective ...
Appui institutionnel à la Direction de la Programmation et de la Prospective ...BTC CTB
 
AW presentation setup for Lifestyle
AW presentation setup for LifestyleAW presentation setup for Lifestyle
AW presentation setup for LifestyleClarence Patrick
 
คู่มือการลงทุนในเขตพัฒนาเศรษฐกิจพิเศษ 2559
คู่มือการลงทุนในเขตพัฒนาเศรษฐกิจพิเศษ 2559คู่มือการลงทุนในเขตพัฒนาเศรษฐกิจพิเศษ 2559
คู่มือการลงทุนในเขตพัฒนาเศรษฐกิจพิเศษ 2559Thailand Board of Investment North America
 
Use of a Theory of Change approach for learning processes - Giuseppe Daconto ...
Use of a Theory of Change approach for learning processes - Giuseppe Daconto ...Use of a Theory of Change approach for learning processes - Giuseppe Daconto ...
Use of a Theory of Change approach for learning processes - Giuseppe Daconto ...BTC CTB
 

Destacado (12)

Звіт про роботу за напрямками гри "Добрик 2014"
Звіт про роботу за напрямками гри "Добрик 2014"Звіт про роботу за напрямками гри "Добрик 2014"
Звіт про роботу за напрямками гри "Добрик 2014"
 
Aec 1 presentaciones digitales
Aec 1 presentaciones digitalesAec 1 presentaciones digitales
Aec 1 presentaciones digitales
 
Digital Marketing Summit 2013 (Mobile Era section on Mar 13th 2013)
Digital Marketing Summit 2013 (Mobile Era section on Mar 13th 2013)Digital Marketing Summit 2013 (Mobile Era section on Mar 13th 2013)
Digital Marketing Summit 2013 (Mobile Era section on Mar 13th 2013)
 
Introducing BUILD
Introducing BUILDIntroducing BUILD
Introducing BUILD
 
Appui institutionnel à la Direction de la Programmation et de la Prospective ...
Appui institutionnel à la Direction de la Programmation et de la Prospective ...Appui institutionnel à la Direction de la Programmation et de la Prospective ...
Appui institutionnel à la Direction de la Programmation et de la Prospective ...
 
AW presentation setup for Lifestyle
AW presentation setup for LifestyleAW presentation setup for Lifestyle
AW presentation setup for Lifestyle
 
คู่มือการลงทุนในเขตพัฒนาเศรษฐกิจพิเศษ 2559
คู่มือการลงทุนในเขตพัฒนาเศรษฐกิจพิเศษ 2559คู่มือการลงทุนในเขตพัฒนาเศรษฐกิจพิเศษ 2559
คู่มือการลงทุนในเขตพัฒนาเศรษฐกิจพิเศษ 2559
 
Use of a Theory of Change approach for learning processes - Giuseppe Daconto ...
Use of a Theory of Change approach for learning processes - Giuseppe Daconto ...Use of a Theory of Change approach for learning processes - Giuseppe Daconto ...
Use of a Theory of Change approach for learning processes - Giuseppe Daconto ...
 
Ecommerce trend 2014_mimee
Ecommerce trend 2014_mimeeEcommerce trend 2014_mimee
Ecommerce trend 2014_mimee
 
Técnicas de gestión del conocimiento
Técnicas de gestión del conocimientoTécnicas de gestión del conocimiento
Técnicas de gestión del conocimiento
 
Climate smart agriculture
Climate smart agricultureClimate smart agriculture
Climate smart agriculture
 
Design of beams
Design of beamsDesign of beams
Design of beams
 

Similar a Example

Good Website Design vs Bad Website Design
Good Website Design vs Bad Website DesignGood Website Design vs Bad Website Design
Good Website Design vs Bad Website DesignSikander Nazir
 
Am I ready to go online
Am I ready to go onlineAm I ready to go online
Am I ready to go onlineGreg Osborne
 
Collaborative Design: Lessons & Observations
Collaborative Design: Lessons & ObservationsCollaborative Design: Lessons & Observations
Collaborative Design: Lessons & ObservationsAdam Connor
 
Jane_clark_pres2016_FUP_web
Jane_clark_pres2016_FUP_webJane_clark_pres2016_FUP_web
Jane_clark_pres2016_FUP_webJane Clark
 
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.Brody Dorland
 
WHAT WENT WRONG WITH FLASH IN WEB DESIGN?
WHAT WENT WRONG WITH FLASH IN WEB DESIGN?WHAT WENT WRONG WITH FLASH IN WEB DESIGN?
WHAT WENT WRONG WITH FLASH IN WEB DESIGN?company
 
Turning a Startup to a Design-Driven Company
Turning a Startup to a Design-Driven CompanyTurning a Startup to a Design-Driven Company
Turning a Startup to a Design-Driven CompanyTanya Zavialova
 
Web Marketing Week3
Web Marketing Week3Web Marketing Week3
Web Marketing Week3cghb1210
 
Twf homepagedesign sb_okey
Twf homepagedesign sb_okeyTwf homepagedesign sb_okey
Twf homepagedesign sb_okeyLimeRed Studio
 
Designing with content-first
Designing with content-firstDesigning with content-first
Designing with content-firstAndy Parker
 
Why interior designers struggle with online marketing
Why interior designers struggle with online marketingWhy interior designers struggle with online marketing
Why interior designers struggle with online marketingRaymond Lowe
 
Design Session At Launch Camp Boston
Design Session At Launch Camp BostonDesign Session At Launch Camp Boston
Design Session At Launch Camp BostonMargery Stegman
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsLany Lyn Magdaraog
 
Webinar 7 steps to launching yourself online fast may 30 2017
Webinar 7 steps to launching yourself online fast may 30 2017Webinar 7 steps to launching yourself online fast may 30 2017
Webinar 7 steps to launching yourself online fast may 30 2017Michelle Castillo
 

Similar a Example (20)

Good Website Design vs Bad Website Design
Good Website Design vs Bad Website DesignGood Website Design vs Bad Website Design
Good Website Design vs Bad Website Design
 
Am I ready to go online
Am I ready to go onlineAm I ready to go online
Am I ready to go online
 
Collaborative Design: Lessons & Observations
Collaborative Design: Lessons & ObservationsCollaborative Design: Lessons & Observations
Collaborative Design: Lessons & Observations
 
Jane_clark_pres2016_FUP_web
Jane_clark_pres2016_FUP_webJane_clark_pres2016_FUP_web
Jane_clark_pres2016_FUP_web
 
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
Web Design & Internet Marketing Basics - Brody Dorland, Something Creative, Inc.
 
WHAT WENT WRONG WITH FLASH IN WEB DESIGN?
WHAT WENT WRONG WITH FLASH IN WEB DESIGN?WHAT WENT WRONG WITH FLASH IN WEB DESIGN?
WHAT WENT WRONG WITH FLASH IN WEB DESIGN?
 
Company profile
Company profileCompany profile
Company profile
 
Website designer
Website designerWebsite designer
Website designer
 
Turning a Startup to a Design-Driven Company
Turning a Startup to a Design-Driven CompanyTurning a Startup to a Design-Driven Company
Turning a Startup to a Design-Driven Company
 
Web Marketing Week3
Web Marketing Week3Web Marketing Week3
Web Marketing Week3
 
Website Design: 6 Trends to Follow in 2020
Website Design: 6 Trends to Follow in 2020Website Design: 6 Trends to Follow in 2020
Website Design: 6 Trends to Follow in 2020
 
Twf homepagedesign sb_okey
Twf homepagedesign sb_okeyTwf homepagedesign sb_okey
Twf homepagedesign sb_okey
 
Designing with content-first
Designing with content-firstDesigning with content-first
Designing with content-first
 
Why interior designers struggle with online marketing
Why interior designers struggle with online marketingWhy interior designers struggle with online marketing
Why interior designers struggle with online marketing
 
Web designer
Web designerWeb designer
Web designer
 
Design Session At Launch Camp Boston
Design Session At Launch Camp BostonDesign Session At Launch Camp Boston
Design Session At Launch Camp Boston
 
Manchester web design
Manchester web designManchester web design
Manchester web design
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and Elements
 
Pro forma
Pro formaPro forma
Pro forma
 
Webinar 7 steps to launching yourself online fast may 30 2017
Webinar 7 steps to launching yourself online fast may 30 2017Webinar 7 steps to launching yourself online fast may 30 2017
Webinar 7 steps to launching yourself online fast may 30 2017
 

Último

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Último (20)

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 

Example

  • 1. December 2003 Design Basics Presentation
  • 2. 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
  • 3. 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
  • 4. Some designs that we like, and what we like about them: http://www.neuchatelchocolates.com http://www. beinstep .com/index.asp google
  • 5. 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
  • 6. Design Comparison – Before & After Before: Home page as we presented it. After http://www. keystonehelicopter .com google
  • 7. Design Comparison – Before & After Before Secondary page as we presented it After http://www. keystonehelicopter .com google
  • 9.
  • 10. 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                                                              
  • 11. 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                                                                                                                                                             
  • 12. 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
  • 13. Advance Design logo development google
  • 14. Advance Design logo development google
  • 15. Advance Design logo development google
  • 17.
  • 18. 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                                                                                                                           
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. Colors: How to describe them google
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. 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
  • 28. 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
  • 29.
  • 30. 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                                                                  
  • 31. 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                                                                  
  • 32. 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                                                                  
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. 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
  • 44. What a design looks like with “blocks” in place of the photographs: Which would you prefer to present to a client? google
  • 45. 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
  • 46. 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
  • 47. 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