1 / 70

Introduction to Web Design

Introduction to Web Design. Multimedia Storytelling Fall 2013. HTML is born (1990). HTML ( HyperText Markup Language) is created First standardized language programmers could use to communicate with web browsers

evers
Download Presentation

Introduction to Web Design

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. Introduction to Web Design Multimedia Storytelling Fall 2013

  2. HTML is born (1990) • HTML (HyperText Markup Language) is created • First standardized language programmers could use to communicate with web browsers • Tells browser what content should appear on a web page, and in what order the content should appear • Basic building blocks of a website, the structure

  3. First website goes live (1991)

  4. First website goes live (1991) • First browser introduced called “World Wide Web,” soon after changed to Nexus to avoid being confused with the Internet • Primary function was to provide information on the World Wide Web • Lightweight, optimized for slow internet connections • Design features were limited to bold, italicized and underlined text • Interactivity was limited to links that brought you to other pages • Images and media were not supported

  5. Table design is introduced (1992)

  6. Table design is introduced (1992) • Initially meant for displaying tabular data, similar to an Excel spreadsheet • Text could be divided into columns & rows • Designers began placing “spacer.gifs” inside the tables to create the illusion of white space • Downsides included extensive markup & visual inconsistency • Marked the beginning of a movement toward page structure

  7. Early table design (Yahoo)

  8. Later table design (AltaVista)

  9. First picture published (1992)

  10. W3C forms (1994) • W3C (World Wide Web Consortium) forms • Discourages companies from setting up competing browsers and programming languages, arguing that it would destroy the Web • Makes HTML the standard markup language for the World Wide Web • Establishes standards and goals for the future of web design • Acceptable programming languages must be approved by W3C

  11. JS & Flash are introduced (1995) • JS (JavaScript) is introduced as the first interactive programming language on the web • Allowed the users to interact with the browser, control the browser, and even alter content displayed on the page • Flash animations were also introduced • Enabled designers to deliver rich content over browsers, creating motion, interactivity and a more visual, linear experience

  12. Flash web page design sample

  13. Frames are introduced (1996) • This was the first design element introduced after tables • Allowed designers to place two media elements side by side within the same browser window

  14. Frames are introduced (1996)

  15. CSS is introduced (1996) • CSS (Cascading Style Sheets) is introduced as the language describing the presentation/style/look of a website • Created to separate the content (HTML) from the presentation (layout, colors, fonts, etc.) • Made site-wide consistency easy • Made page reformatting easy • Downside was many browsers read the style sheets differently, creating visual inconsistency across different browsers

  16. PHP 3 is released (1998) • PHP (first called “Personal Home Page”) is released, paving way for dynamic pages • Created a richer, more interactive experience • Allows user to change the interface behaviors with the click of a mouse or keyboard actions

  17. PHP 3 is released (1998)

  18. PHP web application sample

  19. First 12 years in numbers • 1993: 10 million+ users / 600+ websites • 1996: 74 million+ users / 650,000+ websites • 1999: 279 million+ users / 2.2 million+ websites • 2003: 782 million+ users / 38 million+ websites

  20. Web 2.0 movement (2003) • With the introduction of JS & PHP, a new web movement is born • Web 2.0 introduces the age of user-based information sites • Users interact & collaborate in a virtual community • Social networking sites • Blogs • Video sharing • Wikis

  21. Web 2.0 highlights • 2003: Skype transfers its first spoken sentence from one user to another • “Tere, kassakuuled min?” (Estonian for “Hello, can you hear me?”) • 2004: Facebook gets its first non-founder to join • ArieHasit • 2005: First YouTube video is posted • “Me at the zoo” • 2006: First Tweet is written • “just setting up my twttr”

  22. Mobile web comes along (2008) • First generation iPhone introduced late 2007 • Mobile web takes over • More people are accessing the Internet via phone than computer • Introduction of responsive design • Crafting sites & user interfaces that work across a wide range of devices • Flexible layouts that change based on the device

  23. HTML 5 is introduced (2010) • 5th revision of the HTML standard • Main goal is to improve the language with support for the latest multimedia • Released in 2012 • Set to release new version in 2016

  24. Present-day web design • Intro of HTML5 & CSS3 brought game-changing features • Multiple, full-page background images • Box & text shadows • Transparency • Beginning of the postmodern web design movement • Shifting from “less is more” to “less is a bore” • Reintroducing type & image elements used in traditional print design

  25. “Form follows function” • “Form follows function” art theory • An object’s design should be based primarily upon its function • Introduced first by an architect during the modernist art movement in the late 19th century • Often applied to web design, and other industrial design fields • Web & UI designers are discovering their designs do allow for ornamentation, as long as the ornamentation serves a purpose & carries the intended message

  26. 2013 Trends: Responsive design

  27. 2013 Trends: Fixed headers

  28. 2013 Trends: Photo backgrounds

  29. 2013 Trends: CSS Transparency

  30. 2013 Trends: Social media badges

  31. 2013 Trends: Detailed illustrations

  32. 2013 Trends: Infinite scrolling

  33. 2013 Trends: Sliding panels

  34. 2013 Trends: Fullscreen typography

  35. 2013 Trends: Box shadows

  36. 2013 Trends: Circular elements

  37. So how do we make all that happen? • Learn how websites work • Research trends • Research the HTML, CSS, JS properties associated with those trends • Experiment

  38. Web pages vs. websites • Web pages are HTML documents on the Internet, and any related style, script, and graphics files, often hyperlinked to other documents on the web • Websites are a collection of interconnected web pages, located on the same server, on the Internet

  39. Main components of web pages • HTML • CSS (Cascading Style Sheets) • Interactive Programming • Audiovisual Content

  40. HTML: Overview • Predominant markup language for all web pages that all browsers read to understand the site. • Considered the building blocks of a web page, and define the structure of the document. • Made up of tags that surround plain text, telling the browser how to display elements on a web page. • These tags carry properties, that further define how they should act and look.

  41. HTML Structure: The Doctype

  42. HTML Structure: The document tree

  43. HTML Structure: Tags & tag rules • The basic building block of HTML structure • Composed of the name of the element, surrounded by angle brackets • Tags are always surrounded by angle brackets • Opening tags: < > • Closing tags: </> • Tags always come in pairs • Opening tag turns action on, closing tag turns it off • <head> </head> • <body> </body> • Tags can be nested inside of other tags • Inner tag must be closed before the outer tag • Tags have optional attributes that further tell the browser what to do, i.e. alignment, width, etc.

  44. HTML Structure: Basic tags • <html> • <head> • <title> • <link> • <body> • <div> • <p> • <br> • <h1> - <h6> • <a> • <img> • <source>

  45. CSS (Cascading style sheets) • Language that describes the presentation of a website. • Similar to the style sheets that newspapers and magazines use in InDesign • Define colors, fonts, positioning, etc.

  46. CSS + HTML = BFFs • CSS is a style sheet language that controls the presentation of HTML documents • While HTML controls the structure of a web page, CSS controls the style/presentation • By separating structure & presentation, you can change how a page looks without affecting the underlying structure • HTML document links to an outside CSS document

  47. Without CSS…

  48. With CSS…

  49. Without CSS…

  50. With CSS…

More Related