Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

01. web design

432 visualizaciones

Publicado el

Web Design short course in EEK

Publicado en: Diseño
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

01. web design

  1. 1. Web Design Lecture 1, Introduction to Web Design, Information Architecture, Business Strategy Vladimir Tomberg, PhD Estonian Entrepreneurship University of Applied Sciences March 2016 Picturesource:
  2. 2. Reporting Homework • What topic you have selected for the course project? • Why exactly this choice? • Do you have a real client for this web site? 2
  4. 4. World Wide Web (= W3, w3, WWW) • An information system on the Internet which allows documents to be connected to other documents by hypertext links, enabling the user to search for information by moving from one document to another 4
  5. 5. World Wide Web 5 • The World Wide Web (WWW) is an open source information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.
  6. 6. Gospel: the Early Hypertext 6
  7. 7. Map of World Wide Web 7
  8. 8. 8 Tim Bernes-Lee The World Wide Web was invented by English scientist Tim Berners-Lee in 1989. He wrote the first web browser in 1990 while employed at CERN in Switzerland
  9. 9. 9
  10. 10. Web Design • Web design encompasses many different skills and disciplines in the production and maintenance of websites; • The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization 10
  11. 11. Conceptual Model of Web Design • Before we can decide what to do, we need to understand why to do it. • Jeffrey Veen • The Art & Science of Web Design 11
  12. 12. Publishing on a Paper and Online • Web is an interplay of words and pictures — structured content and visual presentation. But the web also adds a third angle to the metaphor — that of behavior • A user works with web using interactions:  Buying tickets;  Conversations in social networks;  Online learning;  Searching for information 12
  13. 13. A Model for Web Development: the Collaboration of Words, Pictures, and Code 13
  14. 14. Extended Model • Web extends the model “Text – Pictures - Code” to model “Presentation – Structure - Behavior” 14
  15. 15. Presentation – Structure - Behavior • Presentation: how that organization is presented visually to users • Structure: how something is organized and optimized for ease of use and understanding • Behavior: how those users then interact with the product and the product’s resulting behavior 15
  16. 16. From Code to Teams 16
  17. 17. The Bad Approach to Web Design • There are programmers and visual designers, but no Information Architecture 17
  19. 19. Source Book Peter Van Dijk Information Architecture for Designers: Structuring Websites for Business Success 19
  20. 20. Introduction to the Information Architecture • Information Architecture(IA) is a quite new area in the Web Design; • IA is different to the visual design and programming because it focuses on the structure of a web site, not on the appearance or functionality; • IA aims building a web site, which is easy to use, and simultaneously corresponds to the goals of a business-client and end-users 20
  21. 21. Example: Web Site for Ordering Breakfast 21
  22. 22. The Bad Information Architecture • The Bad Information Architecture is crinkly, contradictory and complex without any reasons; • It makes usage of web sites to be harder 22
  23. 23. Another Example of Web Site for Ordering Breakfast Good IA makes usage of web site as simple as possible 23
  24. 24. For What IA is Responsible? • The main task for IA — organization of information on the web site, so end-users can find what they need and achieve their goals (for example – buying food in a big shop); • So more happy the user, so more products and services she will buy. Happy user spend more time on site, that makes a profit; • Information Architecture — is not a science about diagrams, rather that is science about communications 24
  25. 25. Information Architecture Tasks 1. User research: what people do to achieve their goals when visiting web site? 2. Defining content and functionality: how that can help users to achieve their goals? 3. Development of Organization Schemes: how web site should be organized? 4. Interface design together with a visual designer; 5. Tracking all those tasks in process of site building 25
  26. 26. IA in Real Life and in Web 26
  27. 27. Goals and Ways for Organizing Content • There is an endless amount of ways for organizing the same set of information; • Business goals and end-users goals help to define, what organization scheme we should use 27
  28. 28. Different Possibilities for Organization. Example 1 28
  29. 29. Different Possibilities for Organization. Example 2 29
  30. 30. Different Possibilities for Organization. Example 3 30
  31. 31. Different Possibilities for Organization. Example 4 31
  32. 32. IA Deliverables • There is a variety of methods in IA; two of them are the most popular: 1. Description of a site in terms of content and functionality — mostly there are sitemaps; 2. Functional description, which explains how web site should work; • Level of detailing in both ways can be vary 32
  33. 33. List of Content and Organization • IA is responsive for a list of al the content and its structure on the web site. This is often presented as a sitemap and content table 33
  34. 34. Content Table 34
  35. 35. Description of Functionality • The functionality description and task flow describe how the web site works, how individual pages work together, and what tasks people can perform; • The representation of this can take many forms, including scenarios and flow charts 35
  36. 36. Example: Scenario • Returning user • Persona: Joe • Function: Suggest remembering breakfast • Scenario: Joe likes to have the same breakfast every day. So every day he goes to the website and types in the same choices. After a while, the website notices this, and offers to remember his favorite breakfast. Joe hadn't noticed the small icon that offers that functionality and accepts the offer. From now on he only has to click one link to get the same breakfast. 36
  37. 37. Example: Flow Chart 37
  38. 38. Wireframes • Like sketches of the user interface, wireframes show interface design without showing visual design. They indicate the buttons, links, content, and other interface elements on a page, and show relationships between the elements on the page; • They are developed jointly by the information architect and the visual designer; • Wireframes are useful because they let you focus on the structure of the user interface and iterate the design of that, without designing a time-consuming visual design every time 38
  39. 39. Example Wireframe 39
  40. 40. Homework 1 • Make a short description of your project:  Web site title;  What is the business of your client? (Size of company, yearly turnover, staff, equipment, etc.);  What are products and services?  What is the target audience for this business?  What are business tasks of the web site? (Sales growth, advertizing of company, searching for partners, etc.); • Upload results to Google Drive 40
  41. 41. SITE STRATEGY 41
  42. 42. Site Strategy • Strategy consists of a combination of user goals and business goals, and how you plan to address those; • User goals are the reasons people will visit the website, and the things they want out of it; • Business goals are the reasons the business is creating the website, and the things they want out of it; • Defining these two groups of goals and how they interact is the first challenge of the information architect 42
  43. 43. When to Talk about Strategy? • Strangely, strategy is often glossed over at the beginning of a project - more attention is given to the more tangible aspects of web development like visual design and technology; • When your client starts getting excited about visual elements (the colors on the homepage. Flash animation) or some cool new technology (XML .NET) before you have discussed strategy, refocus the conversation; • Talking strategy at the outset of a project is crucial 43
  44. 44. Some Questions to Ask The Client at the Start of a Project • Why are you building this website?  What are the short- and long-term business goals?  Can some of these goals be expressed in numbers? (number of visitors, widgets sold, subscriptions...) • What will the business invest in the website?  How much money?  Who will work on it? (remind them that websites need ongoing attention) • Why will people visit the website: what are the user goals?  Is there existing research on the target audience?  Who is the website meant for?  Why will the audience visit the website?  How will they find it?  What will they do on it? 44
  45. 45. Something about User Research 45Copyright: Dmitri Satin
  46. 46. The ROI of User Experience with Dr. Susan Weinschenk 46
  47. 47. Examples of Business Goals • Keeping existing customers happy—it's often cheaper than trying to win new customers; • Reaching new markets—selling worldwide; • Decreasing support spending—call centers are surprisingly expensive. Provide customer support on the website that decreases support calls and the site will pay for itself; • Creating a cost-efficient sales channel—fewer offices have to be built if you have an effective website: online banking is a good example; • Increasing efficiency in the supply chain—this consists of the companies that supply you with the things you use to do business: automating this can save costs; 47
  48. 48. Examples of Business Goals (2) • Knowledge management—if department A tries to solve a problem that department B already solved six months ago, a company loses money; an intranet can help avoid such situations; • Testing new products and brands—testing new products on the web is an efficient and cheap way of testing if consumers like them; • Lock in early adopters—if you get people to use your website, they will be reluctant to go to a competitor's website as long as they are happy. This is especially crucial for sites that aim to become personalized to the user over time, like personal finance or email 48
  49. 49. Table of Content Example 49
  50. 50. How Business Goals Influence Design? • Comparing the main web pages of sites — a good exercise to understand that 50
  51. 51. AmericanAirlines, 51
  52. 52. AmericanAirlines, 52 Advertising Search for flight Information about flight Registered Users
  53. 53. Continental Airlines, 53
  54. 54. Continental Airlines, 54 Search for flight Car or hotel Printing Boarding Pass Advertising Flight Status Different User Goals Registered Users Advertising
  55. 55. Northwest Airlines, 55
  56. 56. Northwest Airlines, 5656 Search for flight Car or hotel Registered Users Advertising Flight Status News and Ads Checkin Existing Booking Services
  57. 57. Homework 2: Business goals • Define business goals for your web site; • Find out three examples of similar web sites and try to analyze their business goals; • Create couple of personas and scenarios for them • Upload everything to Google Drive 57