good looking website production tips to live by patrice valentine profusion dealer network...
TRANSCRIPT
Good Looking Website Production Tips to
Live By
Patrice ValentineProFusion Dealer Network
Oops…“Who Represents – where you can find the name of the agent that represents a celebrity
www.whorepresents.com
Experts Exchange – a knowledge base where programmers can exchange advice and views
www.expertsexchange.com
Need a therapist? Try Therapist Finderwww.therapistfinder.com
Art Designers whacky websitewww.speedofart.com
The Mole Station Native Nursery, based in New South Wales
www.molestationnursery.com
Getting Started“Researchers found that the brain makes decisions in just a 20th of a second of viewing a webpage”
The goals:
• Create a good looking site
• Represents the brand/company culture
• Educates the user and entices them to take action
Getting StartedThe good news…
The ProFusion Ultra IS gets you started on the right foot:
• Consistent site header/logo
• Consistent navigation
• No horizontal scrolling on 1024 x 768 resolution and
higher (98% of users)
• Consistent Footer
• CSS – Cascading Style Sheet for consistent font styles
and colors
Set the foundationFor Rapid Deploy sites follow these tips…
• Start with colors
• www.colorcombos.com – search for specific colors
• Don’t use font colors to “dress up” site
• Consider readability - Don’t use saturated background
colors that fight with your site’s content and make it
difficult to read and navigate.
Play with Colors on the
background
See what works,
See what doesn't
Set the foundationFor Rapid Deploy sites follow these tips…
• Select Fonts
• Serif Fonts - Use if you wish to convey one of these qualities: warm, personal, artistic, stately, traditional, conservative or intellectual.(Times New Roman, Georgia)
• Sans serif font - Use if you wish to convey one of these qualities: technical, cool, clean, crisp, youthful, modern or uncluttered. Sans serif fonts can also be viewed as cold and impersonal.(Arial, Verdana)
Most importantly, select a font and be consistent.
Set the foundationFor Rapid Deploy sites follow these tips…
• Size does matter - Selecting the wrong size can be
detrimental to your sites success.
• Make Headlines Stand Out (a size bigger than your
body copy)
• Body copy should be a consistent font, bold important
items or keywords.
• Use font color sparingly. Use to emphasize an action (Go,
stop, look)
• Underline – avoid using underlines, can be confused with
links
Set the foundationPage Layout and Navigation
Decisions to make:
• Logo or no-logo – using the logo upload function
means the logo will hyperlink back to the homepage.
Header Images
Logo Area
Set the foundationPage Layout and Navigation
Decisions to make:
• Logo or no-logo – using the logo upload function
means the logo will hyperlink back to the homepage
• Putting the logo as a header image will have no link
Header ImagesLogo as part of header image
Set the foundationPage Layout and Navigation
Decisions to make:
• Logo or no-logo – using the logo upload function
means the logo will hyperlink back to the homepage
• Putting the logo as a header image will have no link
• Use the header region to mimic logo function and
hyperlinkHeader Region
Text, modules, or imagesLogo
Set the foundationPage Layout and Navigation
Decisions to make:
• Logo or no-logo – using the logo upload function
means the logo will hyperlink back to the homepage
• Putting the logo as a header image will have no link
• Use the header region to mimic logo function and
hyperlink
• Header images – larger image on homepage vs. inner
pages.
• ¼ - 1/3 of the space dedicated to site branding
• No header image?
• Put logo in Vertical Column Section – can hyperlink
and will show on every page. Think outside the
box.
Vertical Column Section
Header Image
Text Area Page by Page
Footer Region
Horizontal Navigation
Set the foundationGive it some texture:
• Using backgrounds with a bit of texture can add that extra bit of presence to your site
• If tiling an image, make sure it is cut correctly
Set the foundationPage Layout and Navigation
Decisions to make:
• Breadcrumbs
• Footer navigation
• Vertical column section (VCS)– Left, Right none?
• Navigation Type
• Horizontal
• Vertical
• Hidden pages with graphic navigation in the VCS?
Graphic navigation placed in the vertical column section and hyperlinked to the
pages.
Set the foundationBuilding pages
• Organize your thoughts
• Think like a customer
• Cater to the impatient
• Use understandable, consistent labels
• Provide options
• Active listening
• Start with a solid page foundation (URL Structure)
• Use a full short name instead of abbreviations
Set the foundationUse of Images – Use them, but use them wisely
• JPG files are best for pictures or art with gradient tints.
• GIF images are best for line art—cartoon-like drawings,
text rendered as an image, artwork with flat areas of color.
• Images should be saved to the exact size you want them
to be viewed on the web.
• Do not resize images using size attributes in your HTML
code.
• Taking a large image and having it display at a smaller
size not only slows down loading times but also distorts
your image.
• An ALT tag (title) should be used for each picture.
• Avoid all graphic pages
Set the foundationAll graphic pages
Set the foundationPlease, avoid this:
Set the foundationPlease, avoid this:
Welcome to Dr Reynolds’ Site
Click Here to Enter
Set the foundationFlash - Adobe has discontinued work on its mobile Flash player
• Caution clients on excessive use of flash
• Explain why it is not a good idea
• Mobile compatibility
• Distracting
• Ask what the attraction is
PHONE NUMBERCLIENT LOGIN
SHOPPING CART
LOGOSLOGAN
NAVIGATIONNEWSLETTER SIGNUP
SPECIALS
SERVICES YOU PROVIDESPECIALS
USP’S
LEAST IMPORTANT INFORMATIONBOTTOM NAVIGATION
Red Section• Hottest section of a website• Place most visitors look first• Logo here helps create brand awareness
Blue Section• Second hottest section of a website• Users look here to see if you have the information they are
looking for• Largest area on a home page – show where to click to get more
information
Yellow Section• Supplemental information – useful but not critical• Users expect to see site navigation• Good place for newsletter signup or special offers
White Section• Good place for contact information on every page of your site• Services (client login, shopping cart)
Black Section• Last place the visitors look, if they get to this section at all• Least important information
Set the foundationOn page
• Setting up content
• Spell check!
• When hyperlinking use titles
• When inserting images use alt tags
• Don’t use the space bar to creating spacing
• Copy/paste text from word/pdf to notepad, then to the
editor
• Avoid using Click Here to indicate a link
• Hyperlinking –
• Staying on the site – open in same window
• Taking away from sire – open in new window
Set the foundation• Using tables
• Helpful for creating backgrounds – transparent
backgrounds
• Helpful for aligning text
• Creating text columns
• Break up long pages, more effective use of space
• Use table borders to create visual text breaksHeader ImagesLogo as part of
header image
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. blah blah blah
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. blah blah blah
ExceptionsFor custom designs:
• CMS rules still apply
• Color/Fonts are still specified
• Less restriction on where things go
• Header at the bottom
• Vertical header graphic
• Vertical column section
is horizontal
Conclusion• You will have clients that want everything I have shown.
• Understand why these best practices are important so you
can educate your customer
• Know when to pick your battles
QuestionsPatrice ValentineProFusion Dealer [email protected]