Check this out:
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/
Make 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: css, css beauty, design, gallery, inspiration, models
WJB
posted on
Sunday, April 12, 2009
(permalink)
0 Comments

top of page
Wednesday, January 28, 2009
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).

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: Andy Budd, cascading style sheets, css box model, design, Hakon Wium Lie, internal navigation, layout, template
WJB
posted on
Wednesday, January 28, 2009
(permalink)
0 Comments

top of page
Check this out:
Our 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.htmhttp://www.maxdesign.com.au/presentation/em/http://www.w3.org/http://bluerobot.com/web/layouts/http://www.mardiros.net/liquid-design.htmlhttp://www.webdeveloper.com/forum/showthread.php?t=63332http://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.htmhttp://www.sitepoint.com/http://webstyleguide.com/page/fixed-flex.htmlhttp://www.themaninblue.com/writing/perspective/2003/12/22/http://www.zdnet.com/http://roselli.org/adrian/articles/liquid.asphttp://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: design, ice layout, jello layout, layout, liquid layout, template
WJB
posted on
Friday, January 23, 2009
(permalink)
0 Comments

top of page
Check this out:
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/
Make 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: css, css beauty, design, gallery, inspiration, models
WJB
posted on
Saturday, April 19, 2008
(permalink)
0 Comments

top of page
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.

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: design, e-commerce, functionality, high fidelity prototype, ice layout, primary navigation, prototype, requirements, secondary navigation
WJB
posted on
Thursday, March 27, 2008
(permalink)
0 Comments

top of page
Friday, February 01, 2008
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).

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: Andy Budd, cascading style sheets, css box model, design, Hakon Wium Lie, internal navigation, layout, template
WJB
posted on
Friday, February 01, 2008
(permalink)
1 Comments

top of page
Wednesday, January 23, 2008
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.htmhttp://www.maxdesign.com.au/presentation/em/http://www.w3.org/http://bluerobot.com/web/layouts/http://www.mardiros.net/liquid-design.htmlhttp://www.d.umn.edu/is/support/Training/Online/
webdesign/usability.htmlhttp://www.webdeveloper.com/forum/showthread.php?t=63332Ice (all elements are fixed)
http://www.adobe.com/?ogn=EN_US-gn_homehttp://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.htmhttp://www.glish.com/css/http://www.sitepoint.com/http://webstyleguide.com/page/fixed-flex.htmlhttp://www.themaninblue.com/writing/perspective/2003/12/22/http://www.zdnet.com/http://roselli.org/adrian/articles/liquid.asphttp://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: design, ice layout, jello layout, layout, liquid layout, template
WJB
posted on
Wednesday, January 23, 2008
(permalink)
2 Comments

top of page
Check this out: Designing a well-functioning Web site calls for quite a bit of planning and upfront "rough work."

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.

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: audience, design, information design, purpose, scope, technology, usability, web design
WJB
posted on
Monday, January 21, 2008
(permalink)
0 Comments

top of page
Wednesday, April 04, 2007
Check this out:Take a look at some really appealing designs and course work that your classmates submitted for assignment one:
- Siraj Bilimoria
- Jason Feldman
- Brian Gilbreath
- Josh Mahoney
- Kimberly O'Connor
- Robyn Saidi
- Jennifer Shabshelowitz
- Laura Tabb
Here are the problem areas that were general:
- SEO: poor page titles; no meta keywords or descriptions. Be sure to correct these on all pages (except the exercise pages).
- 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.
- 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).
- Many of you experienced wrapper problems. Be sure to correct these. Ask if you need some help with this.
- 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.
- Avoid non-informative hyperlinks such as click here.
- 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: assignment one, CSS Tab Designer, design, dream site, Dreamweaver, footer, hyperlinks, non-recursive hyperlinks, proofreading, prototype, student sites
WJB
posted on
Wednesday, April 04, 2007
(permalink)
0 Comments

top of page
Wednesday, February 14, 2007
Check this out:
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: audience, deliverables, design, PowerPoint tutorial, purpose
WJB
posted on
Wednesday, February 14, 2007
(permalink)
0 Comments

top of page
Thursday, January 18, 2007
Check this out: Designing a larger Web site calls for quite a bit of planning and upfront "rough work."

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.

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: audience, design, information design, purpose, scope, technology, usability, web design
WJB
posted on
Thursday, January 18, 2007
(permalink)
0 Comments

top of page