1 / 32

How to get a great website

test presentation

mkuliani
Télécharger la présentation

How to get a great website

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. How to Get a Great Website Matt Kuliani ITRE October 22, 2015

  2. What You Will Learn Website design terminology Elements of a great website How to make a great website (without becoming a computer nerd)

  3. Website Experience? • <a href=“..\photos.php”>Photos</a> • 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?

  4. 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

  5. Website vs Webpage A website is made of many webpages. Webpage Website

  6. Graphics vs Photos Graphic Photo A graphic is any non-text, visual thing A photo is literally a photograph taken by a camera

  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 vs Web 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 Great Website Appearance Content Functionality Usability

  18. Appearance Color Text Graphics Photography Simplicity

  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. 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

  23. Appearance - Simplicity

  24. 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

  25. Functionality • It ALLworks • 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

  26. 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

  27. How to Make a Great Website Hire someone with technical expertise Hire someone with design expertise Feedback Feedback Feedback

  28. How to Give Good Feedback Get educated (done!) Be descriptive Be precise Go with your gut

  29. Examples Good Bad 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

  30. Practice • This presentation design • Good? • Bad?

More Related