Principles of Web Design

Instructor : Wilson Alvarez
Phone : 305-386- 6165
Email : info@wilsonalvarez.com

Week 01

This unit will give students a brief history of the web, an explanation of how the web works, and a basic understanding of core principles that apply to web design and development. It will help them develop criteria for assessing the quality of websites, introduce them to web design trends, common HTMl elements and the concepts of developing a site plan before coding.

SESSION 1A (Tuesday)

• History of the web
• How does the internet work?
• The web standards model – HTML, CSS and Javascript
• Common HTML terms and elements
• ✖︎ Class Notes || (Updated with instructor’s notes)

Other links

• Design Inspiration
• ✎ Basic HTML Starter Page

   

SESSION 1B (Thursday)

• What does a good webpage need?
• Who will be coming to my site?
• What should my website users do?
• Common elements
• ✖︎ Class Notes || (Updated with instructor’s notes)

Class Workshop: Coding Simple Website

• Setting up our basic html document
• adding main headline
• adding sub-headings
• adding paragraphs
• adding unordered list for navigation with 3 list items ‘home, about, contact’
• add links to navigation
• adding email link to contact navigation item
• ✎ HTML Starter Page || (Updated with instructor’s notes)

Extra Credit: Basic CSS

• Create HTML/CSS classes that apply background colors to html elements
• Float and clear elements to create a basic main content/sidebar nav website layout

Week 02

This unit will introduce students into the legalities of sampling images from the web. It will summarize and clarify some copyright laws and show students where to obtain high-quality photo media legally. We will also give them a brief tour of the photoshop application and show them some basic image editing. We will introduce them to Cascading Style Sheets (CSS) for styling and layout.

SESSION 2A (Tuesday)

• ✖︎ Class Notes || (Updated with instructor’s notes)
• Box Sizing Demo
• Clearfix Demo
• Positioning Context
• List of CSS properties
• ✎ CSS Starter Page || (Updated with instructor’s notes)

SESSION 2B (Thursday)

Continuation from Week 2A

1. Basic Photo Editing for web
   
   There are many free online image editors that perform these basic tasks beautifully and cost you a penny. There are literally dozens of free applications out there. These are a few.
   • http://pixlr.com
     Online photo editor with many similar features to Adobe photoshop
   • http://www.sumopaint.com
     Available online or can be downloaded
   For the purpose of this demonstration we will be using photoshop. But these are simple exercises that you can do to edit and resize your photos. Keep in mind that there are many ways to accomplish any one image editing task in photoshop.

   • Editing pictures.
   • Resizing, resolution, saving multiples versions.
   • Entering text into a picture.
   • Removing backgrounds? Special effects.

      

2. Finding legal images and inspiration
   Searching for the perfect photo for a web project can be difficult. Most people run to the internet searching for photos, since those images are seemingly free. But many of those photos are copyrighted, and using them without permission can lead to an embarrassing legal confrontation.
   An easy way to avoid this is to select images from Creative Commons stock photography sites:

    

   • Library of Congress Digital Collections – http://www.loc.gov/library/libarch-digital.html
   • Creative Commons – http://search.creativecommons.org
   • EveryStockPhoto – http://www.everystockphoto.com 
   • WikiMedia – http://commons.wikimedia.org/wiki/Main_Page
   • Flickr Commons – http://www.flickr.com/creativecommons

      

3. Map your thoughts with MindManager, VISIO, Word/Excel,  Design Ideas.

   Exercise: Have the students discuss their individual web page needs, i.e. Have a student explain the department or business to the rest of the partners (the students) and grab individual ideas from all, formulate the menu structure based on your findings.

   • ✖︎ Class Notes || (Updated with instructor’s notes)
   • Download Picture
   • Cool CSS3 Text-Effects
   • 3D Text with CSS3
   • CSS3 Letterpress Effect

• ✎ CSS Layouts Continued || (Updated with instructor’s notes)

Week 03

This unit will introduce students to open source frameworks, specifically HTML5 Boilerplate and Bootstrap by Twitter. We will learn why HTML5 BP is so well thought-out in its structure. We will review the Bootstrap framework, discovering how easily it is to create complex web components and studying the CSS behind the bootstrap components. We will learn how to quickly create a HTML5 BOILERPLATE/Bootstrap code base for our new projects using intialzr.

SESSION 3A (Tuesday)

• ✖︎ Class Notes
• Bootstrap Sample
• HTML5 BOILERPLATE
• ✎ H5BP Class Starter File

SESSION 3B (Thursday)

POP QUIZ!!!

Guess what folks? I’m throwing you some curve-balls. Tonight we have no lectures, no ranting, no ravings about html and css! You need to build a multiple row, multiple layout website. Fun right!?!

• You can use this to generate text for your quiz – Text Generator
• ✎ Quiz starter code

Week 04

Bootstrap is a framework of carefully crafted html/css/js components, free to use, for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Bootstrap was developed by Mark Otto and Jacob Thornton while working at Twitter in order torpidly build web apps.

SESSION 4A (Tuesday)

• ✖︎ Class Notes
• ✎ Bootstrap Starter code

SESSION 4B (Thursday)

• More Bootstrap! Class workshop!
• ✎ Bootstrap Starter code

Week 05

This unit will introduce students to the Bootstrap grid system and teach them how to rapidly put together almost any web page layout.

SESSION 5A (Tuesday)

• ✖︎ Class Notes || (Updated with instructor’s notes)
• ✎ Grid Starter code
• ✎ Grid code examples

SESSION 5B (Thursday)

• Class workshop – More Bootstrap Grid!

• ✎ New Grid Starter code
• ✎ New Final Class Workshop code

Week 06

This unit will teach: students to apply CSS transitions on elements to achieve simple animations, about jQuery and its capabilities, how to select, add and remove classes from HTML elements to activate CSS transitions.

SESSION 6A (Thursday)

• ✖︎ Class Notes || (Updated with instructor’s notes)

SESSION 6B (Tuesday)

Lets try transitions again! And maybe… a little JQuery.

• ✖︎ Transition Notes || (Updated with instructor’s notes)
  1. 01 – inset border demo
  2. 02 – change color demo
  3. 03 – Fade in demo
  4. 04 – Grow demo
  5. 05 – Rotate demo
  6. 06 – 3D shadow demo
  7. 07 – Shrink demo
  8. 08 – Swing demo
• ✖︎ JQuery Notes || (Updated with instructor’s notes)
• Simple button demo
• Simple toggle class demo

Week 07

This unit will introduce the basic HTML elements necessary to build a web form. And ‘cheating’ at forms by using web services like Wufoo.com. We will also go over planning and wire-framing our websites before coding.

SESSION 7A (Thursday)

FORMS & WUFOO FORMS
Lets talk about forms and SUPER EASY Wufoo forms!

• Basic HTML forms final || (Updated with instructor’s notes)
• Easy Wufoo forms

WIRE-FRAMES
Now lets talk about planning and wire-framing our websites before coding!

• Wire-frame notes final || (Updated with instructor’s notes)

CLASS WORKSHOP
Review the ‘Final Project Website Requirements‘ below. Sketch out (on paper) the following elements for your final website:

• Logo placement in layout
• Navigation elements and placement in layout
• Main content and sidebar content elements and layout
• Footer elements
• Sketch different pages if any part of the layout changes significantly

MANDATATORY HOMEWORK

• Create or gather all of the content for you website (text, images, etc.)
• Purchase web domain hosting account. You can pick one out of this consumer ranked list ( Choose a hosting provider)
• Sign up for a free wufoo account (Sign up here)

SESSION 7B (Tuesday)

• Final Project Template

Week 08 – FINAL WEEK

Final Project Website Requirements:

• Logo
  Website should have text and/or graphic logo. If you want to use a graphic for your logo, you can download some here – ( Free Graphics for Logos )
• Menu
  Website needs a navigational element with 3 or more links (e.g., Home, About, Contact)
• Content, content, content!
  Website should have at least 3 pages of original, logical content
• Layout
  Website content should be laid out in a logical, organized structure (i.e. Main content, supplementary content, website information)
• Contact
  Website should have some method of allowing users to contact the author. Students can use a form, wufoo form or simple email links