introduction to web design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... ·...
TRANSCRIPT
![Page 1: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/1.jpg)
INTRODUCTION TO WEB DESIGN
Week 1
![Page 2: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/2.jpg)
Careers in Web Development
� How many of you want to go into the field of
Web Development or Web Programming?
•Web Designer
•Web Manager
•Web Developer
Introduction to Web 2
•Web Developer
•Flash Developer
•Web Programmer
•Java
•PHP
•ASP
•.NET
•Sr. Web Developer
•Sr. Project Manager
•Web Team Manager
![Page 3: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/3.jpg)
Introduction to Web 3
CLIENTS & SERVERS
Types of
![Page 4: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/4.jpg)
Clients & Servers
Clients (Browser)
� Internet Explorer
� Firefox
� Mozilla
Servers
� Apache
� Microsoft
� Netscape� Mozilla
� Netscape
� Opera
� Amaya
� AOL
� MSN
� Netscape
� zeus
� AOLserver
� AV
� JavaWebServer
� Oracle
Introduction to Webb Design 4
![Page 5: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/5.jpg)
Introduction to Web 5
GENERAL INFORMATION
A little…
![Page 6: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/6.jpg)
Domain’s URL’s and IPs
� Domain name: The specific address of a
computer on the Internet
� http://www.google.com
� Uniform Resource Locator (URL): � Uniform Resource Locator (URL):
� http://www.microsoft.com/faqs.html
� Internet protocol (IP) address
� 168.212.226.204 in binary form is
10101000.11010100.11100010.11001100.
Introduction to Webb Design 6
![Page 7: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/7.jpg)
12 Principles of good web design
1. Visitor-centric, clear purpose
2. Progressive disclosure
3. Displays quickly
4. Browser compatible
5. Intuitive navigation
6. Spelling, grammar, writing6. Spelling, grammar, writing
7. Secure (eCommerce) SSL = https://
8. Attractive design, easy to read
9. Cultural bias? (Regional? Domestic? International?)
10. No technical problems (broken links, buggy scripts)
11. Maintainable (separate content from style)
12. Search Engine Accessible
Introduction to Webb Design 7
![Page 8: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/8.jpg)
Common Hex Colors
�RED (Hex: #ff0000)
�GREEN (Hex: #00ff00)
�BLUE (Hex: #0000ff)�BLUE (Hex: #0000ff)
�WHITE (Hex: #ffffff)
��BLACK (Hex: #000000)BLACK (Hex: #000000)
![Page 9: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/9.jpg)
Common Hex Colors
�MAGENTA (Hex: #ff00ff)
�CYAN (Hex: #00ff00)
�YELLOW (Hex: #ff0000)�YELLOW (Hex: #ff0000)
�GRAY (Hex: #808080)
![Page 10: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/10.jpg)
Introduction to Web 10
STORYBOARDS
A little about…
![Page 11: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/11.jpg)
What is a storyboard?
� Planning is key!
� Storyboards are graphic organizers which show the scenes in a multimedia project in a rough drawing form.
� A storyboard will help you visualize how the content chunks relate to each other and will help to shape the chunks relate to each other and will help to shape the direction of your efforts as you create your project.
� With a storyboard, you are able to map out your original ideas for communication to your viewers.
� Evaluating the storyboard will allow you to make adjustments during the early formative stage while revisions are still quite simple to do.
Introduction to Webb Design 11
![Page 12: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/12.jpg)
How to create your storyboard:1. Write down key points, ideas, and concepts under consecutive
storyboard frames (see attached).
2. Your storyboard should in essence be a type of map, outlining all the major steps needed to complete the learning objective(s) for that lesson.
3. Make rough sketches of visuals for each frame. Don’t worry about polish at this point; you just want the idea of the visual about polish at this point; you just want the idea of the visual clearly portrayed.
4. Read your presentation while looking at the storyboard and complete the storyboard checklist:
1. Does my visual clearly display one key idea from my presentation?
2. Is my aid as visually simple as I can make it?
3. Can my audience understand my visual completely in less than 30 seconds?
5. You can create your storyboard on paper or various software such as Microsoft Word, Microsoft PowerPoint, and Inspiration
Introduction to Webb Design 12
![Page 13: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/13.jpg)
Examples of storyboardsPaper
Introduction to Web 13
![Page 14: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/14.jpg)
Examples of storyboards
� Creating a storyboard before you begin your website will help you work on the computer more efficiently because you'll have a plan to follow and will have already thought out the overall site organization, the page
Introduction to Web 14
site organization, the page layout and the page contents.
� The storyboard gives a "big picture" perspective to the overall web project while also breaking down a complex project into workable units that can be addressed individually.
![Page 15: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/15.jpg)
Examples of storyboardsWord or PowerPoint (using the organizational chart or flowchart)
Introduction to Web 15
![Page 16: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/16.jpg)
Examples of storyboardsInspiration - Technology
� Creating a visual map, flowchart, or
storyboard can greatly assist you in your
course design process. Storyboarding is
simply a visual interpretation or visual
Introduction to Web 16
simply a visual interpretation or visual
sketch of your ideas for organizing your
course site contents and activities and
their relationship to one another.
� http://bubbl.us/
� http://www.inspiration.com/
![Page 17: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/17.jpg)
Benefits of Storyboarding
� Provides an overall view of your course site/structure
� See the relationships/links of your course designcourse design
� See the missing pieces
� Aids in organizing and/or sequencing of instruction
Introduction to Web 17
![Page 18: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/18.jpg)
Introduction to Web 18
![Page 19: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/19.jpg)
Storyboards and UI
� Strengths� Inexpensive & flexible
� Informal & interactive
� Early feedback on user interface (GUI model)
� Easy to create/modify
� Get past blank page syndrome
� Storyboards focus on details of human-computer interface� Who are the players
� Users
� What happens to them� Screen flows
� How it happens� Events & transitions that trigger screen flows
Introduction to Web 19
![Page 20: Introduction to Web Design2 - …lwilliamsbusinesseducationclass.weebly.com/uploads/7/5/9/... · 2018-10-02 · Introduction to Web 14 layout and the page contents. The storyboard](https://reader034.vdocuments.net/reader034/viewer/2022050611/5fb21989279dfc465421b0cf/html5/thumbnails/20.jpg)
Homework Assignments Due
� Homework:
� 5 good websites
� 5 bad websites
� Provide critique for each. Define:� Provide critique for each. Define:
� Use & follow standards?
� Cross browser compatible?
� Colors proper?
� Other reason for your choice.
Introduction to Web 20