how to get a great website
DESCRIPTION
test presentation - PowerPoint PPT PresentationTRANSCRIPT
How to Get a Great Website
Matt Kuliani
ITRE
October 22, 2015
What You Will Learn
• Website design terminology
• Elements of a great website
• How to make a great website
(without becoming a computer nerd)
Website Experience?
• Can use Google?
• Uses online banking or is active in social media?
• Has a personal website?
• Has built a webpage?
• Knows what WWW stands for?
• HTML?
• HTTP?
• Can spot the error in this HTML code?
<a href=“..\photos.php”>Photos</a>
Website Design Terminology
• 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
Website vs Webpage
• A website is made of many webpages.
Webpage Website
Graphics vs Photos
• A graphic is any non-text, visual thing
• A photo is literally a photograph taken by a camera
Graphic Photo
Copy
• The text written to be shown in marketing materials
• A website is a marketing material
Flash
• Refers to Adobe Flash
• Plugin to browsers
• Allows interesting/complicated animations and programming
• Resource-intensive (a lot makes the page slow)
Javascript
• A programming language only for webpages
• Not resource-intensive like Flash
• Requires much more coding ability
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
URL vs Web Address
• URL = Uniform Resource Location
• Web Address = URL
• Slang, everyone’s familiar with the term “address”
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
SEO
• SEO = Search Engine Optimization
• Better SEO on a site = Better visibility on a search engine
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
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
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/)
Elements of a Great Website
• Appearance
• Content
• Functionality
• Usability
Appearance
• Color
• Text
• Graphics
• Photography
• Simplicity
Appearance - Color
• Bad colors are offensive and will quickly give the audience wrong assumptions
• Good colors can give satisfactory/positive emotions toward the brand
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
Appearance - Graphics
• Too many graphics will overload the user
• Not enough graphics will bore the user
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 for Vision Zero
Appearance - Simplicity
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
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
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
How to Make a Great Website
• Hire someone with technical expertise
• Hire someone with design expertise
• Feedback
• Feedback
•Feedback
How to Give Good Feedback
• Get educated (done!)
• Be descriptive
• Be precise
• Go with your gut
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
Practice
• This presentation design
• Good?
• Bad?