IDCC 380 Announcements

Sunday, April 12, 2009

Site Design Inspiration, 04/13/09

Check this out:

Visit cssBeauty.In preparation for the final assignment, you should be scouting the Web for sites whose design you admire. You will want to pay special attention to the color palette, layout, and design of the banner and navigation areas of the sites. Take your time to explore the sites in the gallery section of cssBeauty and the other sites listed here:

http://www.456bereastreet.com/
http://www.designshack.co.uk/gallery/all/
http://meyerweb.com/
http://www.simplebits.com/
http://www.pearsonified.com/
http://www.cssbeauty.com/
http://www.cssimpress.com/
http://www.bartelme.at/
http://www.themaninblue.com/
http://www.andybudd.com/
http://warpspire.com/
http://www.cssdrive.com/
http://www.briangardner.com/
http://www.netzfruehling.de/
http://bittbox.com/
http://fadtastic.net/
http://www.davidairey.com/
http://www.alvit.de/css-showcase/
http://www.designlinkdatabase.net/
http://csscollection.com/
http://www.cssbased.com/
http://cssvault.com/gallery/
http://www.csselite.com/category/showcase/
http://www.screenalicious.com/
http://www.unmatchedstyle.com/gallery/
http://screenfluent.com/
http://www.cssheaven.com/
http://www.cssreboot.com/
http://www.csstux.com/
http://www.css-website.com/
http://www.my3w.org/
http://www.ceeses.com/

Check out CSSdriveMake some mental notes (or better yet, jot down some ideas) that you can incorporate into your own sites as we move into the final phases of design for your IDCC 380 site and your prototype dream site. This is your opportunity to spread your wings and design sites that will make all of us very proud.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Labels: , , , , ,


Wednesday, January 28, 2009

CSS Box Model, 01/30/09

Check this out! Check this out:

As I have mentioned in class, you will need to become comfortable with the css box model, as that forms the conceptual and technical underpinning of all layout, navigation, and design elements using Cascading Style Sheets (CSS). Andy Budd's CSS Box Model from his book 'CSS Mastery: Advanced Web Standards Solutions.'

Note this figure from Andy Budd. You can see from this set of "boxes" how the container metaphor works and how white space can be introduced into page design. In class, we will continually put this box model into action, as we work throughout the semester with margins, borders, and padding. Of course, all of this guides the shape of the ultimate container: our "wrapper" div. I think you will enjoy the design power that css and its box model give you.

Next class, we will continue to work on our layout exercises, and as we do, you will see again and again the large number of ways that the CSS box model plays a major role, in layout, design, and ultimately navigation.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: , , , , , , ,


Friday, January 23, 2009

Exercises 1-5: CSS Layout Templates -- Ice, Liquid, and Jello 01/23/09

Check this out:

Divs and Floats: Key to Design ControlOur layout exercises will deal with flow, layers (divs) and absolute pixel placement. The PowerPoint tutorial on Divs and Floats will prepare you for some of the basic layout and design principles that are predominant on the Web today. The tutorial is also available in PDF format for printing (Divs and Floats PDF). The print version also supplies notes on the discussion.

In preparation for building the five templates of exercises one through five, we will discuss the design terms "ice," "jello," and "liquid" layouts. Over the next few days, you will be creating pages that participate in each of these design schools.

Following are a few selected Web sites that illustrate the three layout concepts of exercises one through five.

Liquid design (all elements flow):
http://www.webstandards.org/
http://www.htmlbasictutor.ca/flexible-liquid-design.htm
http://www.maxdesign.com.au/presentation/em/
http://www.w3.org/
http://bluerobot.com/web/layouts/
http://www.mardiros.net/liquid-design.html
http://www.webdeveloper.com/forum/showthread.php?t=63332
http://www.evolt.org/article/Liquid_Design_for_the_Web/%2020/15177/

Ice (all elements are fixed):
http://www.mpix.com/
http://foreignexchange.tv/
http://lenovo.com/us/en/

Jello (some elements flow; some are fixed):
http://icanaz.org/
http://www.w3schools.com/css/
http://webdesign.about.com/od/layout/i/aa060506.htm
http://www.sitepoint.com/
http://webstyleguide.com/page/fixed-flex.html
http://www.themaninblue.com/writing/perspective/2003/12/22/
http://www.zdnet.com/
http://roselli.org/adrian/articles/liquid.asp
http://cyber.bentley.edu/faculty/wb/courses/370/
http://www.cnn.com/
http://bentley.edu/
http://lsvp.wordpress.com/
http://webdesigninfo.wordpress.com/web-templates/
http://www.webforumz.com/
http://www.search-this.com/2007/11/14/hip-to-be-square/
http://www.d.umn.edu/

On your layouts.htm gateway page, you will provide floated thumbnail screenshots (no larger than 200px x 200px) hyperlinked to an actual Web site illustrating each of these three layout types. I will provide explicit instructions in class on all aspects of this complete layout assignment.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Labels: , , , , ,


Saturday, April 19, 2008

Site Design Inspiration, 04/19/08

Check this out:

Visit cssBeauty.In preparation for the final assignment, you should be scouting the Web for sites whose design you admire. You will want to pay special attention to the color palette, layout, and design of the banner and navigation areas of the sites. Take your time to explore the sites in the gallery section of cssBeauty and the other sites listed here:

http://www.456bereastreet.com/
http://www.designshack.co.uk/gallery/all/
http://meyerweb.com/
http://www.simplebits.com/
http://www.pearsonified.com/
http://www.cssbeauty.com/
http://www.cssimpress.com/
http://www.bartelme.at/
http://www.themaninblue.com/
http://www.andybudd.com/
http://warpspire.com/
http://www.cssdrive.com/
http://www.briangardner.com/
http://www.netzfruehling.de/
http://bittbox.com/
http://fadtastic.net/
http://www.davidairey.com/
http://www.alvit.de/css-showcase/
http://www.designlinkdatabase.net/
http://csscollection.com/
http://www.cssbased.com/
http://cssvault.com/gallery/
http://www.csselite.com/category/showcase/
http://www.screenalicious.com/
http://www.unmatchedstyle.com/gallery/
http://screenfluent.com/
http://www.cssheaven.com/
http://www.cssreboot.com/
http://www.csstux.com/
http://www.css-website.com/
http://www.my3w.org/
http://www.ceeses.com/

Check out CSSdriveMake some mental notes (or better yet, jot down some ideas) that you can incorporate into your own sites as we move into the final phases of design for your IDCC 380 site and your prototype dream site. This is your opportunity to spread your wings and design sites that will make all of us very proud.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Labels: , , , , ,


Thursday, March 27, 2008

High Fidelity Prototype Model, 03/27/08

Check this out:

The screenshot to your right links to the high fidelity prototyp model for Exercise 14, the Visual Infinite Menu to be the centerpiece of an e-commerce site of your choosing.Photo Emporium

Remember, this final layout/navigation exercise functions as a kind of mid-term exam for the course, giving you the opportunity to demonstrate to site visitors your best work in the two critically most important aspects of Web design: layout and navigation.

Your objective is to create a high-level (high fidelity) prototype page of an e-commerce site, providing the expected functionality of such a site in the design. (As noted in the assignment requirements, some of this functionality will exist only at the design phase; it is yet to be programmed.)

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Labels: , , , , , , , ,


Friday, February 01, 2008

CSS Box Model, 01/02/08

Check this out! Check this out:

As I have mentioned in class, you will need to become comfortable with the css box model, as that forms the conceptual and technical underpinning of all layout, navigation, and design elements using Cascading Style Sheets (CSS). Andy Budd's CSS Box Model from his book 'CSS Mastery: Advanced Web Standards Solutions.'

Note this figure from Andy Budd. You can see from this set of "boxes" how the container metaphor works and how white space can be introduced into page design. In class, we will continually put this box model into action, as we work throughout the semester with margins, borders, and padding. Of course, all of this guides the shape of the ultimate container: our "wrapper" div. I think you will enjoy the design power that css and its box model give you.

Next class, we will continue to work on our layout exercises, and as we do, you will see again and again the large number of ways that the CSS box model plays a major role, in layout, design, and ultimately navigation.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: , , , , , , ,


Wednesday, January 23, 2008

Exercises 1-5: CSS Layout Templates -- Ice, Liquid, and Jello 01/23/08

Check this out:

Our layout exercises will deal with flow and absolute pixel placement. In preparation for building the five templates of exercises one through five, we will discuss the design terms "ice," "jello," and "liquid" layouts. Over the next few days, you will be creating pages that participate in each of these design schools.

Following are a few selected Web sites that illustrate the three layout concepts of exercises one through five.

Liquid design (all elements flow)
http://www.evolt.org/article/Liquid_Design_for_the_Web
/ 20/15177/

http://www.webstandards.org/
http://www.htmlbasictutor.ca/flexible-liquid-design.htm
http://www.maxdesign.com.au/presentation/em/
http://www.w3.org/
http://bluerobot.com/web/layouts/
http://www.mardiros.net/liquid-design.html
http://www.d.umn.edu/is/support/Training/Online/
webdesign/usability.html

http://www.webdeveloper.com/forum/showthread.php?t=63332

Ice (all elements are fixed)
http://www.adobe.com/?ogn=EN_US-gn_home
http://www.w3schools.com/css/
http://www.mpix.com/
http://foreignexchange.tv/
http://lenovo.com/us/en/

Jello (some elements flow; some are fixed):
http://webdesign.about.com/od/layout/i/aa060506.htm
http://www.glish.com/css/
http://www.sitepoint.com/
http://webstyleguide.com/page/fixed-flex.html
http://www.themaninblue.com/writing/perspective/2003/12/22/
http://www.zdnet.com/
http://roselli.org/adrian/articles/liquid.asp
http://cyber.bentley.edu/faculty/wb/courses/370/
http://www.cnn.com/
http://bentley.edu/
http://lsvp.wordpress.com/
http://webdesigninfo.wordpress.com/web-templates/
http://icanaz.org/
http://www.webforumz.com/
http://www.search-this.com/2007/11/14/hip-to-be-square/

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Labels: , , , , ,


Monday, January 21, 2008

Designing a Web Site, 01/22/08

Check this out: Designing a well-functioning Web site calls for quite a bit of planning and upfront "rough work." Adobe's Web design process, printable version.This semester we will go through the planning process carefully so that you get a clear sense of the major steps involved in designing a successful site--one that will make you very proud.

Your Web site will be designed according to Web standards, so you will be learning very many new things about building a Web presence. I think you'll really enjoy the whole design project.
To get started, please read about the Web Design Process. This is a tutorial, published by Adobe (owners of Macromedia and thereby the parent company of Dreamweaver), that offers a very nice high level view of site design. I have given you the URL to the printable version, so you might want to print this out and bring it to class on Thursday. IBM design and usability guidelines.We'll discuss a few approaches to design at that time. Also make sure you have some paper and a pencil or pen to start your design sketching.

You should also read what the IBM usability team has to say about ease of use in Web design. Not to overload you at this point, but I will talk in class about planning and the kinds of documents and approaches you should be thinking about at this point in the planning process, especially regarding purpose, scope, audience, and technology concerns of your site.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Labels: , , , , , , ,


Wednesday, April 04, 2007

IDCC 380 Sites Nicely Designed, 04/10/07

Check this out:

Take a look at some really appealing designs and course work that your classmates submitted for assignment one:

  1. Siraj Bilimoria
  2. Jason Feldman
  3. Brian Gilbreath
  4. Josh Mahoney
  5. Kimberly O'Connor
  6. Robyn Saidi
  7. Jennifer Shabshelowitz
  8. Laura Tabb

Here are the problem areas that were general:

  1. SEO: poor page titles; no meta keywords or descriptions. Be sure to correct these on all pages (except the exercise pages).
  2. On your dream site prototype and your IDCC 380 Web site, kill all self-referencing links. If your navigation setup causes you trouble in doing this, let me know.
  3. Remember that you are creating a Web; you need to make sure that from any page in the Web your visitor can easily get back home (except the exercise pages; I give you a pass on those).
  4. Many of you experienced wrapper problems. Be sure to correct these. Ask if you need some help with this.
  5. Provide a signature and a text global navigation bar in the footer of your IDCC 380 site and prototype dream site pages. The footer minimally should include date, time, and contact information. You need not include the footer on exercise pages.
  6. Avoid non-informative hyperlinks such as click here.
  7. Watch your proofreading. Remember as well to use Shift/F7 in Dreamweaver to check your pages for spelling.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Labels: , , , , , , , , , ,


Wednesday, February 14, 2007

Assignment One Help, 02/14/07

Check this out:

PowerPoint tutorial on Purpose, Audience, Scope, and Technology Concerns in Web Design.It appeared in the last class that many of you have an unclear idea of what is expected in the way of deliverables for assignment one. In addition to the suggestions offered in the PowerPoint tutorial, you may find this assignment one outline document and this site map graphic (both open new windows) useful in designing and building assignment one.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Labels: , , , ,


Thursday, January 18, 2007

Designing a Web Site, 01/23/07

Check this out: Designing a larger Web site calls for quite a bit of planning and upfront "rough work." Adobe's Web design process, printable version.This semester we will go through the planning process very carefully so that you get a clear sense of the major steps involved in designing a successful site--one that will make you very proud.

Your Web site will be designed according to Web standards, so you will be learning very many new things about building a Web presence. I think you'll really enjoy the whole design project.

To get started, please read about the Web Design Process. This is a tutorial, published by Adobe (owners of Macromedia and thereby the parent company of Dreamweaver), that offers a very nice high level view of site design. I have given you the URL to the printable version, so you might want to print this out and bring it to class on Thursday. IBM design and usability guidelines.We'll discuss a few approaches to design at that time. Also make sure you have some paper and a pencil or pen to start your design sketching.

You should also read what the IBM usability team has to say about ease of use in Web design. Not to overload you at this point, but I will talk in class about planning and the kinds of documents and approaches you should be thinking about at this point in the planning process, especially regarding purpose, scope, audience, and technology concerns of your site.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Labels: , , , , , , ,


information design directory:
information design home |contact|author bio|courses|tutorials|publications|site map

As of Friday, August 21, 2009 10:10 AM
information design copyright © 1998 by William J. Buchholz
This document conforms to W3C CSS specifications.