The document provides guidance on how to create a great website. It discusses important website design terminology and elements. Key points include:
- Websites are made of multiple webpages. Important terminology includes things like graphics, photos, copy, HTML5, URLs, hosts, and SEO.
- Elements of a great website include an appealing appearance with the right use of color, text, graphics and photos. It also requires high-quality, updated content and easy functionality and usability.
- Functionality means everything works properly with no typos or errors. Usability involves simplicity, valuable content, good organization, attractive design and fast loading.
- To make a great website, hire experts in technical
1. How to Get a Great
Website
Matt Kuliani
ITRE
October 22, 2015
2. WhatYou Will Learn
• Website design terminology
• Elements of a great website
• How to make a great website
(without becoming a computer nerd)
3. Website Experience?
• Can use Google?
• Uses online banking or is active in social media?
• Has a personal website?
• Has built a webpage?
• Knows whatWWW stands for?
• HTML?
• HTTP?
• Can spot the error in this HTML code?
<a href=“..photos.php”>Photos</a>
4. Website DesignTerminology
• Website vs webpage
• Graphics vs photos
• Copy
• Flash
• Javascript
• HTML5
• URL vs web address
• Host
• SEO
• Site map vs breadcrumbs
• Cross-platform compatibility
• Resolution vs Responsiveness
6. Graphics vs Photos
• A graphic is any non-text, visual thing
• A photo is literally a photograph taken by a camera
Graphic Photo
7. Copy
• The text written to be shown in marketing materials
• A website is a marketing material
8. Flash
• Refers to Adobe Flash
• Plugin to browsers
• Allows interesting/complicated animations and programming
• Resource-intensive (a lot makes the page slow)
9. Javascript
• A programming language only for webpages
• Not resource-intensive like Flash
• Requires much more coding ability
10. HTML5
• The 5 is the version of HTML
• Refers to the addition of
• Video-playing
• Sounds
• Animations
• … without the need for coding expertise or a browser plugin
11. URL vsWeb Address
• URL = Uniform Resource Location
• Web Address = URL
• Slang, everyone’s familiar with the term “address”
12. Host
• The company/location where the website data is stored
• Like the host of a house party
• Provides nice services to their guests/clients
• Keeps things secure
• Cleans up after them
• Makes sure the guest/client has a good time
13. SEO
• SEO = Search Engine Optimization
• Better SEO on a site = Better
visibility on a search engine
14. Site Map vs Breadcrumbs
• Site map is the outline of the site
• Directory structure
• Good for static sites
• Similar to looking for a file
• Breadcrumbs are links that allow quick navigation to a higher level
15. Cross-Platform Compatibility
• Web browsers do NOT act the same
• Keeps the site usable on any browser
• Very important
• Not as difficult as it used to be
16. Resolution vs Responsiveness
• Resolution = minimum monitor resolution required to view the page
• Example:Google Images (https://www.google.com/imghp)
• Responsiveness = uses HTML5 to make the page viewable at any resolution
• Example: NCSU (https://www.ncsu.edu/)
17. Elements of a GreatWebsite
• Appearance
• Content
• Functionality
• Usability
19. Appearance - Color
• Bad colors are offensive and will quickly give the audience wrong
assumptions
• Good colors can give satisfactory/positive emotions toward the brand
20. Appearance -Text
• Colors – again, don’t be offensive to the eyes
• Fonts
• Stay reasonably uniform
• No exotic fonts
• Be either deliberately artsy and not readable or deliberately plain and very readable
21. Appearance - Graphics
• Too many graphics will overload the user
• Not enough graphics will bore the user
22.
23.
24. Appearance - Photography
• Always opt for high quality
• Today’s monitors and screens can easily show high definition
• It is “expected” that high quality photos will be available to view if low
quality ones are in small sizes
• Real cameras are still better than phone cameras
• Honestly, not a big problem forVision Zero
26. Content
• Copy
• Clearly label
• Break into small paragraphs
• Don’t overwhelm with text
• Updated content
• No one will repeat if it’s always the same
• “You”
• Use “you” as much as possible
• Minimize “I”, “we”, and “us”
• Flashy stuff
• Use the cool stuff appropriately
• Be like James Bond – simple fashion with
really cool toys
• Don’t be like a 1970’s pimp
27. Functionality
• It ALL works
• Poor website construction leaves a user frustrated
• No typos
• Double check facts and figures
• Spelling mistakes and bad grammar are unforgivable for something so professional
28. Usability
• Simplicity
• Valuable content
• Good organization
• Attractive Design
• Fast-loading
• Most users anger after 2 seconds, abandon after 4
• Scrolling
• Don’t require scrolling when unnecessary
• Don’t make a page so long that the user stops using the
scroll wheel
• Layout
• Consistent and organized
• Extremely important
• Navigation
• Menu on top or the sides
• Menus should be simple and quick to navigate
• Don’t make the users hunt
• Cross-platform compatibility
• Responsiveness
29. How to Make a Great Website
• Hire someone with technical expertise
• Hire someone with design expertise
• Feedback
• Feedback
•Feedback
30. How to Give Good Feedback
• Get educated (done!)
• Be descriptive
• Be precise
• Go with your gut
31. Examples
• I don’t like the colors, too girly
• The menu is too big, make it smaller
• We shouldn’t use Flash on the site
• Make it simpler to use
• I don’t like the pink, it makes me feel
like our brand is too girly
• The menu is too long going down the
page, let’s make it shorter
• We shouldn’t use Flash, instead use an
HTML5 players for the video
• Remove A, B, and C and let’s see if that
helps simplify things because they
aren’t needed on that page
Bad Good
Good use of color: an appropriate color scheme will contain 2 or 3 primary colors that blend well and create a proper mood or tone for your business. Don't overdo the color, as it can distract from the written content.
Text that is easily read: The most easily read combination is black text on a white background, but many other color combinations are acceptable if the contrast is within an appropriate range. Use fonts that are easy to read and are found on most of today's computer systems. depending on your audience. Keep font size for paragraph text between 10 and 12 pts.
Meaningful graphics: Graphics are important, as they lend visual variety and appeal to an otherwise boring page of text. However, don't over-use them, and make sure that add meaning or context to your written content. Don’t overload any one page with more than 3 or 4 images.
Quality photography: A simple way to increase visual appeal is to use high quality photography. High quality product images are especially important for online retailers.
Simplicity: Keep it simple and allow for adequate white space. Uncluttered layouts allow viewers to focus on your message. Don't overload your site with overly complex design, animation, or other effects just to impress your viewers.
Short and organized copy: Clearly label topics and break your text up into small paragraphs. Don't bore your visitors with visually overwhelming text. You've got less than 10 seconds to hook your visitors, so grab their attention by being clear, concise and compelling.
Update your content regularly: No one likes to read the same thing over and over again. Dead or static content will not bring visitors back to your site!
Speak to your visitors: Use the word you as much as possible. Minimize the use of I, we and us.
Flashy graphics and animation are tempting, and can have a very positive impact on user experience. Just use them appropriately and keep some simple guidelines in mind:
Use multimedia to entertain and enlighten your prospects. An animated banner, snappy video or interactive content will add to your site's "interest quotient" and keep your visitors around longer. BUT -- don't force your visitors to endure something they're not interested in or don't have time for, and don't let the "rich media" overwhelm your other content.
Don't neglect your HTML content for the sake of glitz. Search Engines don't have ears, and can't read Flash, JavaScript or even PDFs .
Every component of your site should work quickly and correctly. Broken or poorly constructed components will only leave your visitors frustrated and disillusioned with your company. Across the spectrum, everything should work as expected, including hyperlinks, contact forms, site search, event registration, and so on.
Error-free copy: Remember the exposure your website will get. Double-check your facts and figures, as you don't know who may be quoting you tomorrow. Nor do you want to be recognized or remembered for typos, incorrect grammar and punctuation, or misspellings. Spelling mistakes and bad grammar are as unforgivable on a website as they are in other company materials.
Simplicity: The best way to keep visitors glued to your site is through valuable content, good organization and attractive design. Keep your site simple and well organized. Fast-loading pages: A page should load in 20 seconds or less via dial-up; at more than that, you'll lose more than half of your potential visitors. Minimal scroll: This is particularly important on the first page. Create links from the main page to read more about a particular topic. Even the Search Engines will reward you for this behavior. Consistent layout: Site layout is extremely important for usability. Use a consistent layout and repeat certain elements throughout the site. Prominent, logical navigation: Place your menu items at the top of your site, or above the fold on either side. Limit your menu items to 10 or fewer. Remember, your visitors are in a hurry -- don't make them hunt for information.
