Introduction to Web Design — Week 3, Kneedeep

In Spring of 2011, I taught an 8 week introductory course to web design at Brookline Adult and Community Education. This is the presentation deck from week 3 of the course.

Transcript

1. introduction to WEB DESIGN brookline adult and community education SPRING 2012 taught by lou suSi
2. web image basics including image optimization how about that <img> tag? img positioning using css background img options tricks with img tiling visual design including page layout type and image visual hierarchy interaction design balance week 3 kneedeep
3. a little review from last week
4. images for the web resolution 72dpi displayable image formats gif jpg png graphics interchange format joint photographics expert group portable network graphic good for flat, solid colors ( logos and vector art ) good for photographic imagery, raster imagery good for either of the above, larger file size supports transparency, sort of no transparency supports transparency
5. image-related tags { and the anatomy of } here are some helpful examples of image tag details <img src=”ladygaga.jpg” width=”700px” height=”500px”> <img src=”images/ladygaga.jpg” style=”width: 700px; height: 500px;” border=”0”> <img src=”images/popstars/ladygaga.jpg” style=”border: none;” /> <img src=”http://famemonster.com/img/posters/badRomance77.jpg” style=”float: right; margin-left: 15px; margin-bottom: 22px;” alt=”Lady Gaga - Bad Romance Poster”> img { border: none; }
6. background image tricks
7. web page layout basics
8. web page layout basics fixed width the width of the page container is a set pixel value the main contents of the page can be left, centered or right aligned within the browser liquid layout the width of the page container is flexible and will expand and contract with the size of the browser also called flexible layout, depending on what social circles you’re swimming in ;] mixed fixed and liquid layout a combination of fixed and flexible layout that keeps certain blocks of information fixed width inside more flexible columns or containers in the page also called elastic layout, depending on what social circles you’re swimming in ;] responsive layout the layout of the page changes depending upon the size of the browser the page is rendered
9. web page layout basics example of a fixed width layout
10. web page layout basics example of a fluid width layout
11. web page layout basics more food for thought on fixed vs fluid layout http://coding.smashingmagazine.com/2009/06/02/ fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
12. homework find 5 ‘different’ websites that appeal to you and do a little analysis get 2 screenshots from each site, include the home page and an inside page put the screenshots into Word, Pages, Powerpoint or Keynote and write up a short analysis of each site, just a paragraph or 2 per website include notes about the layout type, use of color and typography and what you think the core purpose of the website might be as well as your best guesstimate of who you think the target audience is as usual, have fun with it and be creative let’s try one right now together while we’re here in class ;]